'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
  Sparkles,
  Upload,
  BarChart3,
  Users,
  Zap,
  CheckCircle,
  ArrowRight,
  FileText,
  Target,
  TrendingUp,
} from 'lucide-react';

const features = [
  {
    icon: FileText,
    title: 'Patent Analysis',
    description:
      'AI-powered extraction of key innovations, technical domains, and TRL assessment',
  },
  {
    icon: BarChart3,
    title: 'Market Research',
    description:
      'Identify commercialization opportunities and market potential with precision',
  },
  {
    icon: Users,
    title: 'Partner Matching',
    description:
      'Semantic search to find the perfect stakeholders and collaborators',
  },
  {
    icon: Target,
    title: 'Valorization Brief',
    description:
      'Generate professional outreach documents ready for stakeholder engagement',
  },
  {
    icon: Zap,
    title: 'Real-Time Processing',
    description:
      'Watch your patent analysis happen live with WebSocket streaming',
  },
  {
    icon: TrendingUp,
    title: 'Data-Driven Insights',
    description:
      'Get actionable recommendations backed by comprehensive market data',
  },
];

const steps = [
  {
    number: '01',
    title: 'Upload Patent',
    description: 'Drag and drop your patent PDF (up to 50MB)',
  },
  {
    number: '02',
    title: 'AI Analysis',
    description: 'Our agentic system analyzes technology and market fit',
  },
  {
    number: '03',
    title: 'Partner Matching',
    description: 'Semantic search finds relevant stakeholders',
  },
  {
    number: '04',
    title: 'Get Results',
    description: 'Download valorization brief and connect with partners',
  },
];

export default function HomePage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50">
        <div className="container mx-auto px-4 py-24 sm:py-32">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Column - Content */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="space-y-8"
            >
              <div className="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-blue-100 text-blue-700 text-sm font-medium">
                <Sparkles className="h-4 w-4" />
                <span>AI-Powered Patent Commercialization</span>
              </div>

              <h1 className="text-5xl sm:text-7xl font-bold leading-tight">
                <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  SPARKNET
                </span>
              </h1>

              <p className="text-3xl sm:text-4xl font-semibold text-gray-800 leading-snug">
                Transform Dormant Patents into Commercialization Opportunities
              </p>

              <p className="text-xl text-gray-600 leading-relaxed">
                Leverage AI-powered multi-agent systems to analyze patents, identify
                market opportunities, and connect with the right partners for successful
                technology transfer.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <Button
                  asChild
                  size="lg"
                  className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg h-14 px-8"
                >
                  <Link href="/upload">
                    <Upload className="mr-2 h-5 w-5" />
                    Start Patent Analysis
                  </Link>
                </Button>

                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="text-lg h-14 px-8"
                >
                  <a href="#features">
                    Learn More
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </a>
                </Button>
              </div>

              {/* Stats */}
              <div className="flex gap-8 pt-4">
                <div>
                  <div className="text-3xl font-bold text-blue-600">98%</div>
                  <div className="text-sm text-gray-600">Match Accuracy</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-purple-600">2-5min</div>
                  <div className="text-sm text-gray-600">Analysis Time</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-green-600">AI-Powered</div>
                  <div className="text-sm text-gray-600">Multi-Agent System</div>
                </div>
              </div>
            </motion.div>

            {/* Right Column - Visual */}
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative"
            >
              <div className="relative aspect-square rounded-3xl bg-gradient-to-br from-blue-400 via-purple-400 to-pink-400 p-1">
                <div className="h-full w-full rounded-3xl bg-white p-8 flex items-center justify-center">
                  <div className="space-y-6 w-full">
                    <Card className="border-2 border-blue-200">
                      <CardContent className="p-6">
                        <div className="flex items-center space-x-3">
                          <CheckCircle className="h-6 w-6 text-green-500" />
                          <div>
                            <div className="font-semibold">Patent Analyzed</div>
                            <div className="text-sm text-gray-500">TRL Level 7/9</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card className="border-2 border-purple-200">
                      <CardContent className="p-6">
                        <div className="flex items-center space-x-3">
                          <BarChart3 className="h-6 w-6 text-purple-500" />
                          <div>
                            <div className="font-semibold">12 Market Opportunities</div>
                            <div className="text-sm text-gray-500">NaN TAM</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    <Card className="border-2 border-pink-200">
                      <CardContent className="p-6">
                        <div className="flex items-center space-x-3">
                          <Users className="h-6 w-6 text-pink-500" />
                          <div>
                            <div className="font-semibold">8 Partner Matches</div>
                            <div className="text-sm text-gray-500">95% fit score</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-24 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
              Powerful Features for{' '}
              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                Patent Valorization
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Everything you need to transform patents into commercial success
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="h-full hover:shadow-xl transition-shadow border-2 hover:border-blue-200">
                    <CardContent className="p-6">
                      <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-100 to-purple-100 mb-4">
                        <Icon className="h-7 w-7 text-blue-600" />
                      </div>
                      <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                      <p className="text-gray-600">{feature.description}</p>
                    </CardContent>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-24 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl sm:text-5xl font-bold mb-4">How It Works</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Four simple steps to patent commercialization success
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                className="relative"
              >
                <Card className="h-full">
                  <CardContent className="p-6 text-center">
                    <div className="text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
                      {step.number}
                    </div>
                    <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
                    <p className="text-gray-600">{step.description}</p>
                  </CardContent>
                </Card>
                {index < steps.length - 1 && (
                  <div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2 z-10">
                    <ArrowRight className="h-8 w-8 text-blue-400" />
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="max-w-3xl mx-auto space-y-8"
          >
            <h2 className="text-4xl sm:text-5xl font-bold">
              Ready to Wake Up Your Patents?
            </h2>
            <p className="text-xl text-blue-100">
              Start analyzing your patents today and discover untapped commercialization
              opportunities
            </p>
            <Button
              asChild
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100 text-lg h-14 px-8"
            >
              <Link href="/upload">
                <Upload className="mr-2 h-5 w-5" />
                Get Started Now
              </Link>
            </Button>
          </motion.div>
        </div>
      </section>
    </div>
  );
}