components/Hero.js

import { ArrowRight, Play, Star } from 'lucide-react';

export default function Hero() {
  return (
    <section className="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
      {/* Background effects */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl animate-pulse-slow" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-pink-500/8 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '2s' }} />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-brand-600/5 rounded-full blur-3xl" />
      </div>

      {/* Grid pattern */}
      <div className="absolute inset-0 opacity-[0.03]" style={{
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
        backgroundSize: '60px 60px'
      }} />

      <div className="max-w-7xl mx-auto relative">
        <div className="text-center max-w-4xl mx-auto">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/20 mb-8 animate-fade-in">
            <Star className="w-3.5 h-3.5 text-brand-400 fill-brand-400" />
            <span className="text-sm text-brand-300 font-medium">Trusted by 100,000+ developers</span>
          </div>

          {/* Heading */}
          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] mb-6 animate-slide-up">
            Your idea.
            <br />
            <span className="gradient-text">AI-built.</span>
            <br />
            Production-ready.
          </h1>

          {/* Subheading */}
          <p className="text-lg sm:text-xl text-surface-300 max-w-2xl mx-auto mb-10 animate-fade-in" style={{ animationDelay: '0.2s' }}>
            Lovable is your AI-powered full-stack engineer. Describe what you want to build and watch it come to life — from idea to deployed app in seconds.
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in" style={{ animationDelay: '0.4s' }}>
            <button className="group w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-xl font-semibold text-lg transition-all duration-300 shadow-2xl shadow-brand-500/30 hover:shadow-brand-500/50 flex items-center justify-center gap-2">
              Start Building Free
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="group w-full sm:w-auto px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-2">
              <Play className="w-5 h-5 text-brand-400" />
              Watch Demo
            </button>
          </div>

          {/* Social proof */}
          <div className="mt-16 animate-fade-in" style={{ animationDelay: '0.6s' }}>
            <p className="text-sm text-surface-300 mb-4">Powering apps for teams at</p>
            <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 opacity-40">
              {['Stripe', 'Vercel', 'Shopify', 'Notion', 'Linear'].map((company) => (
                <span key={company} className="text-xl font-bold tracking-tight text-white/60">{company}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Hero visual */}
        <div className="mt-20 max-w-5xl mx-auto animate-slide-up" style={{ animationDelay: '0.3s' }}>
          <div className="glass-card gradient-border p-1 rounded-2xl">
            <div className="bg-surface-900 rounded-xl overflow-hidden">
              {/* Browser chrome */}
              <div className="flex items-center gap-2 px-4 py-3 bg-surface-850 border-b border-white/5">
                <div className="flex gap-1.5">
                  <div className="w-3 h-3 rounded-full bg-red-500/60" />
                  <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
                  <div className="w-3 h-3 rounded-full bg-green-500/60" />
                </div>
                <div className="flex-1 mx-4">
                  <div className="max-w-md mx-auto px-3 py-1 bg-surface-800 rounded-md text-xs text-surface-300 font-mono">
                    lovable.dev/editor
                  </div>
                </div>
              </div>
              {/* Editor content */}
              <div className="p-6 font-mono text-sm leading-relaxed">
                <div className="flex gap-4">
                  <div className="text-surface-700 select-none text-right" style={{ minWidth: '2rem' }}>
                    {Array.from({ length: 12 }, (_, i) => (
                      <div key={i}>{i + 1}</div>
                    ))}
                  </div>
                  <div className="flex-1 overflow-x-auto">
                    <div><span className="text-brand-300">import</span> <span className="text-yellow-300">React</span> <span className="text-brand-300">from</span> <span className="text-green-400">'react'</span>;</div>
                    <div className="mt-1"><span className="text-brand-300">export default function</span> <span className="text-yellow-300">App</span>() {'{'}</div>
                    <div className="ml-4"><span className="text-brand-300">const</span> [<span className="text-blue-300">count</span>, <span className="text-blue-300">setCount</span>] = <span className="text-yellow-300">useState</span>(<span className="text-orange-300">0</span>);</div>
                    <div className="ml-4 mt-1"><span className="text-brand-300">return</span> (</div>
                    <div className="ml-8">{'<'}<span className="text-pink-400">div</span> <span className="text-brand-200">className</span>=<span className="text-green-400">"p-8"</span>{'>'}</div>
                    <div className="ml-12">{'<'}<span className="text-pink-400">h1</span>{'>'}<span className="text-white/80">Hello Lovable! 🚀</span>{'</'}<span className="text-pink-400">h1</span>{'>'}</div>
                    <div className="ml-12">{'<'}<span className="text-pink-400">button</span> <span className="text-brand-200">onClick</span>={'{() => setCount(c => c + 1)}'}{'>'}</div>
                    <div className="ml-16 text-white/80">Count: {'{count}'}</div>
                    <div className="ml-12">{'</'}<span className="text-pink-400">button</span>{'>'}</div>
                    <div className="ml-8">{'</'}<span className="text-pink-400">div</span>{'>'}</div>
                    <div className="ml-4">);</div>
                    <div>{'}'}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}