import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
import { WaitlistEmailForm } from './WaitlistEmailForm';

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' },
];

export function HeroSection() {
  return (
    <section className="relative pt-12 sm:pt-16 md:pt-20 lg:pt-24 pb-12 sm:pb-16 md:pb-20 px-4 sm:px-6">
      <div className="max-w-4xl mx-auto text-center">
        {/* Beta Badge */}
        <div className="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-[10px] sm:text-xs mb-5 sm:mb-6">
          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
          In Active Development
        </div>

        {/* Heading */}
        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 sm:mb-8 md:mb-10 leading-tight">
          AI Image Generation
          <br />
          <span className="bg-[linear-gradient(90deg,#818cf8_0%,#c084fc_25%,#f472b6_50%,#c084fc_75%,#818cf8_100%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-gradient-shift-hero">
            Inside Your Workflow
          </span>
        </h1>

        {/* Subtitle */}
        <p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-12 md:mb-16 lg:mb-20 max-w-2xl mx-auto">
          Generate images via API, SDK, CLI, Lab, or live URLs.
          <br className="hidden sm:inline" />
          <span className="sm:hidden"> </span>
          Production-ready CDN delivery in seconds.
        </p>

        {/* Email Form */}
        <WaitlistEmailForm />

        {/* Fine Print */}
        <p className="text-xs sm:text-sm text-gray-500 mb-8 sm:mb-12 md:mb-16 lg:mb-20">
          Free early access. No credit card required.
        </p>

        {/* Feature Badges */}
        <div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4 justify-center">
          {badges.map((badge, i) => (
            <span
              key={i}
              className={`px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-full text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2 md: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-3.5 sm:w-4 h-3.5 sm:h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
              />
              {badge.text}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}