export default function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-slate-950 text-white py-24 sm:py-32">
      {/* Background Glows */}
      <div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
        <div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[68rem] h-[30rem] bg-indigo-500/30 blur-3xl opacity-50 rounded-full" />
        <div className="absolute top-1/2 right-10 w-80 h-80 bg-pink-500/15 blur-3xl rounded-full" />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Top Announcement Badge */}
        <div className="flex justify-center mb-8">
          <a
            href="#"
            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-indigo-500/30 text-indigo-300 bg-indigo-500/10 hover:bg-indigo-500/20 text-xs font-semibold transition-all hover:scale-105"
          >
            <span>✨ Introducing v2.5 Launch • Supercharged AI Engine →</span>
          </a>
        </div>

        {/* Main Headline */}
        <div className="text-center max-w-3xl mx-auto">
          <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight leading-tight">
            Build Extraordinary Web Apps{' '}
            <span className="bg-gradient-to-r from-indigo-400 via-purple-300 to-pink-400 bg-clip-text text-transparent">
              Without the Friction
            </span>
          </h1>
          <p className="mt-6 text-base sm:text-lg text-slate-400 leading-relaxed">
            The modern developer platform to design, iterate, and deploy high-performance applications in seconds with zero boilerplate.
          </p>

          {/* Action Buttons */}
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <a
              href="#"
              className="w-full sm:w-auto px-8 py-3.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-600/25 font-bold text-sm transition-all hover:scale-105"
            >
              Start Building Free
            </a>
            <a
              href="#"
              className="w-full sm:w-auto px-8 py-3.5 rounded-xl border border-slate-700 bg-slate-900/60 hover:bg-slate-800 text-slate-200 font-bold text-sm transition-all hover:scale-105"
            >
              Watch 2-Min Demo
            </a>
          </div>

          {/* Social Proof */}
          <div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 text-xs text-slate-400">
            <div className="flex -space-x-2">
              <img width="32" height="32" className="w-8 h-8 rounded-full border-2 border-slate-950" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80" alt="Avatar" />
              <img width="32" height="32" className="w-8 h-8 rounded-full border-2 border-slate-950" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80" alt="Avatar" />
              <img width="32" height="32" className="w-8 h-8 rounded-full border-2 border-slate-950" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&auto=format&fit=crop&q=80" alt="Avatar" />
              <img width="32" height="32" className="w-8 h-8 rounded-full border-2 border-slate-950" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&auto=format&fit=crop&q=80" alt="Avatar" />
            </div>
            <span>Trusted by 25,000+ developers at top tech teams</span>
          </div>
        </div>

        {/* Interactive Dashboard Preview */}
        <div className="mt-16 sm:mt-20 max-w-5xl mx-auto rounded-2xl border border-slate-800 bg-slate-900/70 p-2 sm:p-4 backdrop-blur-xl shadow-2xl">
          <div className="rounded-xl border border-slate-800/80 bg-slate-950 overflow-hidden">
            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-800 bg-slate-900/50">
              <div className="flex items-center gap-2">
                <span className="w-3 h-3 rounded-full bg-rose-500/80" />
                <span className="w-3 h-3 rounded-full bg-amber-500/80" />
                <span className="w-3 h-3 rounded-full bg-emerald-500/80" />
              </div>
              <span className="text-[11px] font-mono text-slate-400">dashboard.app.dev</span>
              <div className="w-12" />
            </div>
            <div className="p-6 sm:p-8 grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="p-4 rounded-xl bg-slate-900 border-slate-800 border shadow-xs">
                <span className="text-xs text-slate-400">Monthly Deploys</span>
                <div className="text-2xl font-bold mt-1">1,482,920</div>
                <span className="text-xs text-emerald-500 font-semibold mt-2 inline-block">↑ 24.8% vs last month</span>
              </div>
              <div className="p-4 rounded-xl bg-slate-900 border-slate-800 border shadow-xs">
                <span className="text-xs text-slate-400">Average Latency</span>
                <div className="text-2xl font-bold mt-1 text-indigo-400">18ms</div>
                <span className="text-xs text-indigo-400 font-semibold mt-2 inline-block">Global edge active</span>
              </div>
              <div className="p-4 rounded-xl bg-slate-900 border-slate-800 border shadow-xs">
                <span className="text-xs text-slate-400">Global Uptime</span>
                <div className="text-2xl font-bold mt-1 text-emerald-500">99.99%</div>
                <span className="text-xs text-slate-400 font-semibold mt-2 inline-block">Zero downtime SLA</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}