'use client';

import { useState } from 'react';
import { AnimatedGradientBorder } from './_components/AnimatedGradientBorder';
import {
  Zap,
  Globe,
  FlaskConical,
  AtSign,
  Link,
  Terminal,
  RefreshCw,
  ArrowLeftRight,
  Package,
  Layers,
  Check,
  Sparkles,
  Settings2,
  Info,
  GitBranch,
  Palette,
  SlidersHorizontal,
  Link2,
  Server,
  Code,
  Cpu,
  MessageCircle,
  Vote,
  Users,
  Crown,
  Type,
  Brain,
  Target,
  Image,
  Award,
  ArrowRight,
} from 'lucide-react';
import GlowEffect from './_components/GlowEffect';

// ============================================================================
// STYLES (CSS-in-JS for custom styles not available in Tailwind)
// ============================================================================

const customStyles = `
  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

  .gradient-text {
    background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 4s ease-in-out infinite;
  }

  @keyframes gradient-shift {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  .beta-dot {
    animation: beta-dot-delay 20s linear forwards, beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
  }

  @keyframes beta-dot-delay {
    0%, 99% { background-color: rgb(107, 114, 128); }
    100% { background-color: rgb(74, 222, 128); }
  }

  @keyframes beta-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .shape-future {
    clip-path: polygon(
      0% 40px, 10% 0px, 20% 40px, 30% 0px, 40% 40px, 50% 0px, 60% 40px, 70% 0px, 80% 40px, 90% 0px, 100% 40px,
      100% calc(100% - 40px), 90% calc(100% - 0px), 80% calc(100% - 40px), 70% calc(100% - 0px),
      60% calc(100% - 40px), 50% calc(100% - 0px), 40% calc(100% - 40px), 30% calc(100% - 0px),
      20% calc(100% - 40px), 10% calc(100% - 0px), 0% calc(100% - 40px)
    );
  }

  .shape-future-title {
    font-family: 'Caveat', cursive;
  }
`;

// ============================================================================
// BACKGROUND COMPONENTS
// ============================================================================

function BackgroundBlobs() {
  const blobs = [
    {
      className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]',
      gradient: 'rgba(139, 92, 246, 0.3)',
    },
    {
      className: 'w-[500px] h-[500px] top-[800px] left-[-150px]',
      gradient: 'rgba(99, 102, 241, 0.25)',
    },
    {
      className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]',
      gradient: 'rgba(236, 72, 153, 0.2)',
    },
    {
      className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]',
      gradient: 'rgba(34, 211, 238, 0.15)',
    },
    {
      className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]',
      gradient: 'rgba(139, 92, 246, 0.25)',
    },
    {
      className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]',
      gradient: 'rgba(99, 102, 241, 0.2)',
    },
  ];

  return (
    <>
      {blobs.map((blob, i) => (
        <div
          key={i}
          className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
          style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
        />
      ))}
    </>
  );
}

function HeroGlow() {
  return (
    <div
      className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] pointer-events-none"
      style={{
        background:
          'radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%)',
      }}
    />
  );
}

// ============================================================================
// HERO SECTION
// ============================================================================

function HeroSection() {
  const [email, setEmail] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // TODO: Handle form submission
    console.log('Email submitted:', email);
  };

  const badges = [
    { icon: Zap, text: 'API-First', variant: 'default' },
    { icon: Globe, text: 'Built-in CDN', variant: 'default' },
    { icon: FlaskConical, text: 'Web Lab', variant: 'default' },
    { icon: AtSign, text: 'Style References', variant: 'default' },
    { icon: Link, text: 'Prompt URLs', variant: 'cyan' },
  ];

  return (
    <section className="relative pt-40 pb-20 px-6">
      <div className="max-w-4xl mx-auto text-center">
        {/* Status Badge */}
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-8">
          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
          In Active Development
        </div>

        {/* Headline */}
        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
          AI Image Generation
          <br />
          <span className="gradient-text">Inside Your Workflow</span>
        </h1>

        {/* Subheadline */}
        <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
          Generate images via API, SDK, CLI, Lab, or live URLs.
          <br />
          Production-ready CDN delivery in seconds.
        </p>

        {/* Email Form */}
       <GlowEffect>
          <form
            onSubmit={handleSubmit}
            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
          >
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="your@email.com"
              className="flex-1 px-4 py-3 bg-transparent border-none rounded-md text-white outline-none placeholder:text-white/40 focus:bg-white/[0.03]"
            />
            <button
              type="submit"
              className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
            >
              Get Early Access
            </button>
          </form>
        </GlowEffect>

        <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>



        {/* Badges */}
        <div className="flex flex-nowrap gap-5 justify-center">
          {badges.map((badge, i) => (
            <span
              key={i}
              className={`px-6 py-2.5 rounded-full text-sm flex items-center gap-2.5 whitespace-nowrap ${
                badge.variant === 'cyan'
                  ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
                  : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
              }`}
            >
              <badge.icon
                className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
              />
              {badge.text}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// API EXAMPLE SECTION
// ============================================================================

function ApiExampleSection() {
  return (
    <section className="py-16 px-6">
      <div className="max-w-4xl mx-auto">
        <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-2xl p-8">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
              <Terminal className="w-5 h-5 text-indigo-400" />
            </div>
            <div>
              <h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
              <p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
            </div>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
            <div className="text-gray-500 mb-2"># Generate an image</div>
            <span className="text-cyan-400">curl</span>{' '}
            <span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
            <br />
            <span className="text-gray-300 ml-4">-H</span>{' '}
            <span className="text-green-400">&quot;Authorization: Bearer $API_KEY&quot;</span>{' '}
            <span className="text-gray-300">\</span>
            <br />
            <span className="text-gray-300 ml-4">-d</span>{' '}
            <span className="text-green-400">
              &apos;{`{"prompt": "modern office interior, natural light"}`}&apos;
            </span>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
            <div className="text-gray-500 mb-2"># Response</div>
            <span className="text-gray-300">{'{'}</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;url&quot;</span>
            <span className="text-gray-300">:</span>{' '}
            <span className="text-green-400">
              &quot;https://cdn.banatie.app/img/a7x2k9.png&quot;
            </span>
            <span className="text-gray-300">,</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;enhanced_prompt&quot;</span>
            <span className="text-gray-300">:</span>{' '}
            <span className="text-green-400">&quot;A photorealistic modern office...&quot;</span>
            <span className="text-gray-300">,</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;generation_time&quot;</span>
            <span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
            <br />
            <span className="text-gray-300">{'}'}</span>
          </div>

          <p className="text-gray-500 text-sm mt-4 text-center">
            CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PROBLEM/SOLUTION SECTION
// ============================================================================

function ProblemSolutionSection() {
  const problems = [
    {
      icon: RefreshCw,
      title: 'Placeholder hell',
      problem: '"I\'ll add images later" never happens',
      solution: 'Generate real images as you build',
    },
    {
      icon: ArrowLeftRight,
      title: 'Context switching',
      problem: 'Leave IDE, generate elsewhere, come back',
      solution: 'Stay in your workflow. API, SDK, MCP',
    },
    {
      icon: Package,
      title: 'Asset management',
      problem: 'Download, optimize, upload, get URL',
      solution: 'Production CDN URLs instantly',
    },
    {
      icon: Layers,
      title: 'Style drift',
      problem: 'Every image looks different',
      solution: 'Reference images keep style consistent',
    },
  ];

  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
          Why developers choose Banatie
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          Stop fighting your image workflow. Start building.
        </p>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {problems.map((item, i) => (
            <div
              key={i}
              className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
            >
              <div className="flex-1 flex flex-col">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
                  <item.icon className="w-6 h-6 text-red-400" />
                </div>
                <h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
                <p className="text-gray-500 text-sm mb-4">{item.problem}</p>
                <div className="mt-auto flex items-start gap-1 text-sm">
                  <Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
                  <span className="text-white">{item.solution}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PROMPT URLs SECTION
// ============================================================================

function PromptUrlsSection() {
  return (
    <section className="py-16 px-6">
      <div className="max-w-4xl mx-auto">
        <div className="bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30 rounded-2xl p-8">
          <div className="flex items-start gap-4 mb-6">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center flex-shrink-0">
              <Sparkles className="w-6 h-6 text-cyan-400" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">
                Unique
              </span>
              <h2 className="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
              <p className="text-gray-400">
                Put a prompt in your{' '}
                <code className="text-cyan-300 bg-black/30 px-1 rounded">img src</code> and get a
                real image. No API calls. No JavaScript. Just HTML.
              </p>
            </div>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
            <span className="text-gray-500">&lt;!-- Write this --&gt;</span>
            <br />
            <span className="text-purple-400">&lt;img</span>{' '}
            <span className="text-cyan-300">src</span>=
            <span className="text-green-400">
              &quot;https://cdn.banatie.app/gen?p=modern office interior&quot;
            </span>{' '}
            <span className="text-purple-400">/&gt;</span>
            <br />
            <br />
            <span className="text-gray-500">
              &lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;
            </span>
          </div>

          <p className="text-gray-500 text-sm mt-4">
            Perfect for static sites, prototypes, and AI coding agents that generate HTML.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// HOW IT WORKS SECTION
// ============================================================================

function HowItWorksSection() {
  const steps = [
    { number: 1, title: 'Your Prompt', subtitle: '"a cat on windowsill"' },
    { number: 2, title: 'Smart Enhancement', subtitle: 'Style + details added' },
    { number: 3, title: 'AI Generation', subtitle: 'Gemini creates image' },
    { number: 4, title: 'CDN Delivery', subtitle: 'Instant global URL' },
  ];

  const controls = [
    { text: 'Style templates', detail: '— photorealistic, illustration, minimalist, and more' },
    { text: 'Reference images', detail: '— @aliases maintain visual consistency' },
    { text: 'Output specs', detail: '— aspect ratio, dimensions, format' },
  ];

  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
          Your prompt. Your control. Production-ready.
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          We handle the complexity so you can focus on building.
        </p>

        <div className="max-w-4xl mx-auto">
          <div className="grid md:grid-cols-4 gap-4 mb-8">
            {steps.map((step) => (
              <div key={step.number} className="text-center p-4">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 shadow-[0_2px_10px_rgba(99,102,241,0.4)] flex items-center justify-center mx-auto mb-3 text-sm font-bold">
                  {step.number}
                </div>
                <p className="text-sm font-medium mb-1">{step.title}</p>
                <p className="text-xs text-gray-500">{step.subtitle}</p>
              </div>
            ))}
          </div>

          <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-xl p-6 mt-8">
            <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
              <Settings2 className="w-5 h-5 text-indigo-400" />
              What you control
            </h3>
            <div className="grid md:grid-cols-3 gap-4 text-sm">
              {controls.map((control, i) => (
                <div key={i} className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
                  <span className="text-gray-300">
                    <strong className="text-white">{control.text}</strong> {control.detail}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <p className="text-center text-gray-500 text-sm mt-6">
            <Info className="w-4 h-4 inline mr-1" />
            Enhanced prompts are visible in API response. You always see what was generated.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// KEY FEATURES SECTION
// ============================================================================

function KeyFeaturesSection() {
  const features = [
    {
      icon: AtSign,
      iconColor: 'text-pink-400',
      title: 'Reference Images',
      description:
        'Use @aliases to maintain style consistency across your project. Reference up to 3 images per generation.',
      isUnique: false,
    },
    {
      icon: GitBranch,
      iconColor: 'text-purple-400',
      title: 'Flows',
      description:
        'Chain generations, iterate on results, build image sequences with @last and @first references.',
      isUnique: false,
    },
    {
      icon: Palette,
      iconColor: 'text-yellow-400',
      title: '7 Style Templates',
      description:
        'Same prompt, different styles. Photorealistic, illustration, minimalist, product, comic, sticker, and more.',
      isUnique: false,
    },
    {
      icon: Globe,
      iconColor: 'text-green-400',
      title: 'Instant CDN Delivery',
      description:
        'Every image gets production-ready URL. No upload, no optimization, no hosting setup needed.',
      isUnique: false,
    },
    {
      icon: SlidersHorizontal,
      iconColor: 'text-blue-400',
      title: 'Output Control',
      description:
        'Control aspect ratio, dimensions, and format. From square thumbnails to ultra-wide banners.',
      isUnique: false,
    },
    {
      icon: Link,
      iconColor: 'text-cyan-400',
      title: 'Prompt URLs',
      description:
        'Generate images via URL parameters. Put prompt in img src, get real image. Built-in caching.',
      isUnique: true,
    },
  ];

  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
          Built for real development workflows
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          Everything you need to integrate AI images into your projects.
        </p>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <div
              key={i}
              className={`rounded-xl p-6 ${
                feature.isUnique
                  ? 'bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30'
                  : 'bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px]'
              }`}
            >
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
                <feature.icon className={`w-6 h-6 ${feature.iconColor}`} />
              </div>
              <div className="flex items-center gap-2 mb-2">
                <h3 className="font-semibold text-lg">{feature.title}</h3>
                {feature.isUnique && (
                  <span className="px-2 py-0.5 bg-cyan-500/20 text-cyan-300 text-xs rounded">
                    Unique
                  </span>
                )}
              </div>
              <p className="text-gray-400 text-sm">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// INTEGRATIONS SECTION
// ============================================================================

function IntegrationsSection() {
  const tools = [
    { icon: Server, text: 'REST API', color: 'text-cyan-400' },
    { icon: Code, text: 'TypeScript SDK', color: 'text-blue-400' },
    { icon: Cpu, text: 'MCP Server', color: 'text-purple-400' },
    { icon: Terminal, text: 'CLI', color: 'text-green-400' },
    { icon: FlaskConical, text: 'Banatie Lab', color: 'text-orange-400' },
    { icon: Link2, text: 'Prompt URLs', color: 'text-cyan-400', highlight: true },
  ];

  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">Works with your tools</h2>
        <p className="text-gray-400 mb-12 max-w-2xl mx-auto">
          Use what fits your workflow. All methods, same capabilities.
        </p>

        <div className="flex flex-wrap justify-center gap-4 mb-8">
          {tools.map((tool, i) => (
            <div
              key={i}
              className={`bg-[rgba(30,27,75,0.6)] border rounded-lg px-6 py-3 flex items-center gap-2 ${
                tool.highlight ? 'border-cyan-500/30' : 'border-indigo-500/20'
              }`}
            >
              <tool.icon className={`w-5 h-5 ${tool.color}`} />
              <span>{tool.text}</span>
            </div>
          ))}
        </div>

        <div className="max-w-2xl mx-auto mt-8 p-4 bg-slate-900/60 border border-indigo-500/15 backdrop-blur-[10px] rounded-lg">
          <p className="text-sm text-gray-400">
            <strong className="text-white">Banatie Lab</strong> — Official web interface for Banatie
            API. Generate images, build flows, browse your gallery, and explore all capabilities
            with ready-to-use code snippets.
          </p>
        </div>

        <p className="text-gray-500 text-sm mt-6">
          Perfect for Claude Code, Cursor, and any AI-powered workflow.
        </p>
      </div>
    </section>
  );
}

// ============================================================================
// SHAPE THE FUTURE SECTION
// ============================================================================

function ShapeTheFutureSection() {
  const features = [
    { icon: MessageCircle, text: 'Direct feedback channel' },
    { icon: Vote, text: 'Feature voting' },
    { icon: Users, text: 'Early adopter community' },
  ];

  return (
    <div className="relative my-[60px]">
      <section className="shape-future bg-[#2a2a2a] relative z-[2]">
        <div className="relative z-[6] py-[60px] px-10 text-center max-w-[700px] mx-auto">
          <h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
            Shape the future of Banatie
          </h2>

          <p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
            We&apos;re building this for developers like you. Early adopters get direct influence on
            our roadmap — suggest features, vote on priorities, and help us build exactly what you
            need.
          </p>

          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888]">
            {features.map((feature, i) => (
              <span key={i} className="flex items-center gap-2">
                <feature.icon className="w-4 h-4" />
                {feature.text}
              </span>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================================
// GEMINI SECTION
// ============================================================================

function GeminiSection() {
  const flashFeatures = [
    { text: 'Sub-3 second', detail: 'generation time' },
    { text: 'Multi-turn editing', detail: '— refine through conversation' },
    { text: 'Up to 3 reference images', detail: 'for consistency' },
    { text: '1024px', detail: 'resolution output' },
  ];

  const proFeatures = [
    { text: 'Up to 4K', detail: 'resolution output' },
    { text: '14 reference images', detail: 'for brand consistency' },
    { text: 'Studio controls', detail: '— lighting, focus, color grading' },
    { text: 'Thinking mode', detail: '— advanced reasoning for complex prompts' },
  ];

  const capabilities = [
    {
      icon: Type,
      title: 'Perfect Text Rendering',
      description:
        'Legible text in images — logos, diagrams, posters. What other models still struggle with.',
    },
    {
      icon: Brain,
      title: 'Native Multimodal',
      description:
        'Understands text AND images in one model. Not a text model + image model bolted together.',
    },
    {
      icon: Target,
      title: 'Precise Prompt Following',
      description:
        'What you ask is what you get. No artistic "interpretation" that ignores your instructions.',
    },
    {
      icon: Image,
      title: 'Professional Realism',
      description:
        'Photorealistic output that replaces stock photos. Not fantasy art — real, usable images.',
    },
  ];

  return (
    <section className="py-20 px-6">
      <div className="max-w-5xl mx-auto">
        <div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
          {/* Header */}
          <div className="text-center mb-10">
            <div className="flex items-center justify-center gap-3 mb-4">
              <Zap className="w-8 h-8 text-yellow-400" />
              <h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
            </div>
            <p className="text-gray-400 max-w-2xl mx-auto">
              We chose Gemini because it&apos;s the only model family that combines native
              multimodal understanding with production-grade image generation. Two models, optimized
              for different needs.
            </p>
          </div>

          {/* Two Model Cards */}
          <div className="grid md:grid-cols-2 gap-6 mb-10">
            {/* Flash Model */}
            <div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-cyan-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
                  <p className="text-cyan-400 text-sm">Nano Banana</p>
                </div>
              </div>
              <p className="text-gray-400 text-sm mb-4">
                Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
                generation.
              </p>
              <ul className="space-y-2 text-sm">
                {flashFeatures.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">
                      <strong className="text-white">{feature.text}</strong> {feature.detail}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Pro Model */}
            <div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                  <Crown className="w-5 h-5 text-yellow-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
                  <p className="text-yellow-400 text-sm">Nano Banana Pro</p>
                </div>
              </div>
              <p className="text-gray-400 text-sm mb-4">
                Maximum quality and creative control. For production assets and professional
                workflows.
              </p>
              <ul className="space-y-2 text-sm">
                {proFeatures.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">
                      <strong className="text-white">{feature.text}</strong> {feature.detail}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Shared Capabilities */}
          <div className="border-t border-yellow-500/20 pt-8">
            <h4 className="text-center font-semibold mb-6 text-gray-300">
              Why Gemini outperforms competitors
            </h4>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {capabilities.map((cap, i) => (
                <div key={i} className="text-center p-4">
                  <div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
                    <cap.icon className="w-6 h-6 text-yellow-400" />
                  </div>
                  <h5 className="font-medium text-sm mb-1">{cap.title}</h5>
                  <p className="text-gray-500 text-xs">{cap.description}</p>
                </div>
              ))}
            </div>
          </div>

          {/* #1 Ranking Note */}
          <p className="text-center text-gray-500 text-sm mt-8">
            <Award className="w-4 h-4 inline mr-1 text-yellow-400" />
            Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
            (August 2025)
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// FINAL CTA SECTION
// ============================================================================

function FinalCtaSection() {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    // Focus on email input after scroll
    setTimeout(() => {
      const input = document.querySelector('input[type="email"]') as HTMLInputElement;
      input?.focus();
    }, 500);
  };

  return (
    <section
      id="join"
      className="relative py-24 px-6 overflow-hidden"
      style={{
        background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
      }}
    >
      {/* Top accent line */}
      <div
        className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
        style={{
          background:
            'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
        }}
      />

      {/* Subtle cyan glow accents */}
      <div
        className="absolute inset-0 opacity-50 pointer-events-none"
        style={{
          backgroundImage:
            'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
        }}
      />

      <div className="relative z-10 max-w-3xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
          Ready to build?
        </h2>
        <p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
          Join developers waiting for early access. We&apos;ll notify you when your spot is ready.
        </p>

        <button
          onClick={scrollToTop}
          className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
        >
          Get Early Access
          <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
        </button>

        <p className="text-cyan-200/50 text-sm mt-8">
          No credit card required • Free to start • Cancel anytime
        </p>
      </div>
    </section>
  );
}

// ============================================================================
// MAIN HOME COMPONENT
// ============================================================================

export default function Home() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
      <div className="relative">
        <BackgroundBlobs />
        <HeroGlow />

        <HeroSection />
        <ApiExampleSection />
        <ProblemSolutionSection />
        <PromptUrlsSection />
        <HowItWorksSection />
        <KeyFeaturesSection />
        <IntegrationsSection />
        <ShapeTheFutureSection />
        <GeminiSection />
        <FinalCtaSection />
      </div>
    </>
  );
}