// HERO SECTION
function Hero() {
  return (
    <section id="hero" className="relative pt-6 lg:pt-8 overflow-hidden">
      {/* Top attention banner */}
      <div className="mx-auto max-w-[1320px] px-4 lg:px-10">
        <div className="glass rounded-full px-4 py-2.5 flex items-center justify-center gap-3 text-[13px] text-mute">
          <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-amber/15 text-amber shrink-0">
            <Icon.Flame size={14} strokeWidth={2.25} />
          </span>
          <span className="hidden sm:inline tracking-wide">
            <span className="text-amber font-semibold">ATTENTION:</span> Full-Day Strategic Workshop for Indian SME &amp; MSME Business Owners
          </span>
          <span className="sm:hidden text-amber font-semibold text-[12px]">Full-Day Strategic Workshop · India</span>
        </div>
      </div>

      {/* Nav */}
      <nav className="mx-auto max-w-[1320px] px-4 lg:px-10 mt-5 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-teal to-teal-deep grid place-items-center shadow-glow shrink-0">
            <span className="font-display text-ink-900 font-bold text-sm leading-none">B</span>
          </div>
          <div className="leading-tight">
            <div className="text-[13px] font-semibold tracking-tight">Basesh Gala</div>
            <div className="text-[9px] uppercase tracking-[0.15em] text-mute/80">Business Booster · AI</div>
          </div>
        </div>
        <div className="hidden md:flex items-center gap-7 text-[13px] text-mute">
          <a href="#speaker" className="hover:text-white transition">Speaker</a>
          <a href="#agenda" className="hover:text-white transition">Agenda</a>
          <a href="#tickets" className="hover:text-white transition">Tickets</a>
          <a href="#faq" className="hover:text-white transition">FAQ</a>
        </div>
        <a href="#tickets" className="hidden sm:inline-flex btn-ghost rounded-lg px-4 py-2 text-[13px] font-medium">Book Seat</a>
      </nav>

      {/* Hero content */}
      <div className="mx-auto max-w-[1320px] px-4 lg:px-10 pt-8 lg:pt-14 pb-6 lg:pb-12">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-10 items-center">

          {/* Left: text */}
          <div className="reveal min-w-0">
            <SectionEyebrow>The Business Booster · AI Workshop</SectionEyebrow>

            {/* Big headline */}
            <h1 className="mt-3 font-semibold tracking-tight leading-[1.1]">
              <span className="block text-[22px] sm:text-[46px] lg:text-[58px]">
                From <span className="grad-text-amber italic font-display font-medium">Founder-Dependent</span>
              </span>
              <span className="block text-[22px] sm:text-[46px] lg:text-[58px]">
                to <span className="grad-text">IPO-Ready</span>
              </span>
            </h1>

            {/* Sub-headline */}
            <p className="mt-2 text-[13px] sm:text-[20px] lg:text-[24px] font-medium text-white/70 leading-snug">
              — turn your vision into a <span className="text-white">billion-rupee reality.</span>
            </p>

            {/* ── VIDEO: mobile only — right after sub-headline ── */}
            <div className="lg:hidden mt-4 w-full min-w-0">
              <VideoPlayer />
            </div>

            {/* Body paragraph — below video on mobile */}
            <p className="mt-4 text-mute text-[12px] sm:text-[14px] lg:text-[15px] leading-relaxed">
              Are you an SME owner in India ready to unlock your business&rsquo;s true potential?
              The <span className="text-white font-medium">Business Booster with AI</span> workshop is built for founders who are done playing small.
            </p>

            {/* Info chips */}
            <div className="mt-4 flex flex-col sm:flex-row sm:flex-wrap gap-2">
              <Chip icon={<Icon.Calendar size={13} />} label="07 May · Ahmedabad" sub="09 May · Mumbai" subHighlight />
              <Chip icon={<Icon.Clock size={13} />} label="9:00 AM — 6:00 PM" sub="Full-day intensive" />
              <Chip icon={<Icon.MapPin size={13} />} label="Hyatt Regency" sub="Premium venues, both cities" />
            </div>

            {/* CTA + trust — side by side on desktop, stacked on mobile */}
            <div className="mt-6 flex flex-col sm:flex-row sm:items-center gap-4">
              <a href="#tickets" className="btn-primary inline-flex items-center justify-center gap-2 rounded-xl whitespace-nowrap
                px-4 py-3 text-[13px] font-bold
                sm:px-8 sm:py-5 sm:text-lg">
                Yes! I&rsquo;m Ready to 9&times; My Business
                <Icon.ArrowRight size={16} strokeWidth={2.25} className="sm:w-[22px] sm:h-[22px]" />
              </a>
              <div className="flex items-center gap-3 text-[13px] text-mute">
                <div className="flex -space-x-2 shrink-0">
                  {["avatar1.png","avatar2.png","avatar3.png","avatar4.png"].map((src, i) => (
                    <div key={i} className="w-8 h-8 sm:w-9 sm:h-9 rounded-full border-2 border-ink-800 overflow-hidden">
                      <img src={src} alt="Founder" className="w-full h-full object-cover object-center" draggable="false" />
                    </div>
                  ))}
                </div>
                <div>
                  <div className="text-white font-medium text-[13px]">2,400+ founders booked</div>
                  <div className="text-mute/80 text-[11px]">across both cities</div>
                </div>
              </div>
            </div>
          </div>

          {/* Right: video — DESKTOP ONLY */}
          <div className="hidden lg:block reveal w-full min-w-0">
            <div className="relative">
              <div className="absolute inset-0 -z-10 opacity-50 blur-3xl pointer-events-none"
                   style={{ background: "radial-gradient(closest-side, rgba(0,212,170,0.35), transparent 70%)" }} />
              <VideoPlayer />
              {/* 9× Growth card — anchored below video */}
              <div className="absolute left-0 bottom-0 translate-y-1/2 glass-strong rounded-2xl px-4 py-3 flex items-center gap-3 shadow-softCard z-10">
                <div className="w-10 h-10 rounded-xl bg-teal/15 grid place-items-center text-teal">
                  <Icon.TrendingUp size={18} />
                </div>
                <div>
                  <div className="text-[18px] font-semibold leading-none num-tabular">9×</div>
                  <div className="text-[11px] text-mute uppercase tracking-wider mt-1">Growth roadmap</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>


      {/* Trust strip — "As featured in" */}
      <div className="mx-auto max-w-[1320px] px-4 lg:px-10 pb-4 mt-6 lg:mt-10">
        <div className="glass rounded-2xl px-4 py-3 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
          <div className="text-[9px] sm:text-[10px] uppercase tracking-[0.22em] text-mute/80 whitespace-nowrap">As featured in</div>
          <div className="grid grid-cols-3 sm:flex sm:flex-wrap items-center gap-x-5 gap-y-1.5 sm:gap-x-8 text-mute/70 text-[9px] sm:text-[13px] font-medium font-display">
            {["FORBES INDIA", "ECONOMIC TIMES", "MINT", "CNBC TV18", "YOUR STORY", "INC42"].map((b) => (
              <span key={b} className="tracking-[0.1em] whitespace-nowrap">{b}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function VideoPlayer() {
  const [playing, setPlaying] = _useState(false);
  const videoRef = _useRef(null);

  function toggle() {
    const v = videoRef.current;
    if (!v) return;
    if (playing) { v.pause(); setPlaying(false); }
    else { v.play(); setPlaying(true); }
  }

  return (
    <div className="relative w-full" style={{ aspectRatio: "16/9" }}>
      <div className="absolute inset-0 rounded-2xl overflow-hidden glass-strong ring-teal">
        {/* Video */}
        <video
          ref={videoRef}
          src="https://risewithbg.com/wp-content/uploads/2026/04/ipo-final-v1.mp4"
          poster="rise-to-ipo-copy.jpg.webp"
          className="absolute inset-0 w-full h-full object-cover"
          playsInline
          onEnded={() => setPlaying(false)}
        />

        {/* Dark gradient overlay */}
        <div className="absolute bottom-0 left-0 right-0 h-2/3 pointer-events-none"
             style={{ background: "linear-gradient(180deg, transparent, rgba(7,15,30,0.80))" }} />

        {/* Play / Pause button */}
        <button onClick={toggle} className="absolute inset-0 grid place-items-center group" aria-label={playing ? "Pause" : "Play"}>
          <span className={
            "w-16 h-16 sm:w-20 sm:h-20 rounded-full grid place-items-center bg-white text-ink-900 shadow-glow transition-all duration-300 " +
            (playing ? "opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100" : "opacity-100 group-hover:scale-105")
          }>
            <Icon.Play size={24} strokeWidth={2.5} />
          </span>
        </button>

        {/* Caption */}
        <div className="absolute left-4 bottom-4 right-4 flex items-end justify-between gap-2 pointer-events-none">
          <div>
            <div className="text-[10px] uppercase tracking-[0.2em] text-teal">Watch the event video</div>
            <div className="text-white text-[13px] sm:text-[15px] font-medium leading-tight mt-1">A message from Basesh</div>
          </div>
          <div className="text-[10px] font-mono text-mute/80 px-2 py-1 rounded glass shrink-0">HD</div>
        </div>
      </div>
    </div>
  );
}

function Chip({ icon, label, sub, subHighlight = false }) {
  return (
    <div className="glass rounded-xl px-3 py-2.5 sm:px-4 sm:py-3 flex items-center gap-2.5 w-full sm:w-auto">
      <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-teal/15 text-teal grid place-items-center shrink-0">{icon}</div>
      <div className="leading-tight min-w-0">
        <div className="text-[12px] sm:text-[14px] font-semibold text-white truncate">{label}</div>
        {subHighlight ? (
          <div className="flex items-center gap-1.5 mt-0.5">
            <span className="w-1 h-1 rounded-full bg-teal shrink-0" />
            <span className="text-[11px] sm:text-[13px] font-semibold text-white">{sub}</span>
          </div>
        ) : (
          <div className="text-[10px] sm:text-[11px] text-mute/80 mt-0.5">{sub}</div>
        )}
      </div>
    </div>
  );
}

window.Hero = Hero;