/* ZestPlus — Nav + Hero */

const { useEffect: useEH, useRef: useRH, useState: useSH } = React;

/* ---------------------------------- Nav --------------------------------- */
function Nav({ theme, onThemeToggle }) {
  const [scrolled, setScrolled] = useSH(false);
  const [mobileOpen, setMobileOpen] = useSH(false);
  useEH(()=>{
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive:true });
    return () => window.removeEventListener("scroll", onScroll);
  },[]);
  const links = [
    
    { label:"Clubs", href:"#community" },
    { label:"Apparel", href:"#apparel" },
    { label:"Pricing", href:"#pricing" },
    { label:"Wiki", href:"#wiki" },
  ];
  return (
    <header className="fixed top-0 inset-x-0 z-50">
      <div className={`transition-all duration-300 ${scrolled?"py-2":"py-4"}`}>
        <Container>
          <div className={`flex items-center gap-6 rounded-full px-3 pl-5 py-2 transition-all duration-300
            ${scrolled?"glass-strong shadow-[0_8px_30px_-12px_rgba(0,0,0,0.4)]":"bg-transparent border border-transparent"}`}>
            <a href="#" className="shrink-0"><Logo /></a>
            <nav className="hidden md:flex items-center gap-1 ml-2">
              {links.map(l=>(
                <a key={l.label} href={l.href}
                   className="px-3 py-1.5 text-[13.5px] text-fg2 hover:text-fg transition-colors rounded-full">
                  {l.label}
                </a>
              ))}
            </nav>
            <div className="hidden md:flex items-center gap-2 ml-auto">
              <button onClick={onThemeToggle}
                className="grid place-items-center rounded-full hairline-strong text-fg2 hover:text-fg transition-colors"
                style={{width:36, height:36}}
                aria-label="Toggle theme">
                <Icon name={theme==="dark"?"sun":"moon"} size={15}/>
              </button>
              <a className="btn btn-primary text-[13px] !py-2 !px-4" href="#download"><Icon name="download" size={14}/> Get the app</a>
            </div>
            <button
              className="md:hidden ml-auto grid place-items-center rounded-full hairline-strong"
              style={{width:36,height:36}}
              aria-label="Menu"
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen(v => !v)}
            >
              <Icon name={mobileOpen ? "close" : "menu"} size={16}/>
            </button>
          </div>
          {mobileOpen && (
            <div className="md:hidden mt-2 rounded-2xl glass-strong p-2">
              <nav className="flex flex-col">
                {links.map(l=>(
                  <a key={l.label} href={l.href}
                     className="px-3 py-2.5 text-[13.5px] text-fg2 hover:text-fg transition-colors rounded-xl"
                     onClick={() => setMobileOpen(false)}>
                    {l.label}
                  </a>
                ))}
                <a className="mt-2 btn btn-primary text-[13px] !py-2 !px-4 justify-center" href="#download" onClick={() => setMobileOpen(false)}>
                  <Icon name="download" size={14}/> Get the app
                </a>
              </nav>
            </div>
          )}
        </Container>
      </div>
    </header>
  );
}

/* --------------------------------- Hero --------------------------------- */
function Hero() {
  const stageRef = useRH(null);
  const xy = useMouseParallax(stageRef, 12);
  return (
    <Section id="hero" padded={false} className="pt-32 md:pt-36 pb-12 md:pb-20 overflow-hidden">
      {/* mesh + grid */}
      <div className="mesh-hero" aria-hidden="true"></div>
      <div className="absolute inset-0 grid-bg pointer-events-none" aria-hidden="true"></div>

      <OrbField orbs={[
        { left:"-6%", top:"10%", size:380, blur:80, opacity:.55, anim:"animate-float-slow" },
        { right:"-4%", top:"30%", size:360, blur:90, opacity:.45, anim:"animate-float-med", delay:1, bg:"radial-gradient(closest-side, rgba(124,58,237,0.4), transparent 70%)" },
        { left:"45%", bottom:"-6%", size:520, blur:120, opacity:.35, anim:"animate-float-slow", delay:2, bg:"radial-gradient(closest-side, rgba(52,211,153,0.35), transparent 70%)" },
      ]}/>

      <Container className="relative z-10">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          {/* LEFT */}
          <div className="lg:col-span-7">
            <Reveal>
              <Pill accent className="!text-[11px] !font-medium">
                <span className="relative inline-flex" style={{width:6,height:6}}>
                  <span className="absolute inset-0 rounded-full animate-pulse-glow" style={{background:"var(--accent)"}}/>
                  <span className="absolute inset-[1px] rounded-full" style={{background:"var(--accent)"}}/>
                </span>
                Now live in Jakarta · 28,400 movers
              </Pill>
            </Reveal>

            <Reveal delay={120}>
              <h1 className="h-display text-[56px] md:text-[80px] lg:text-[92px] mt-5">
                <span className="text-gradient-soft">Move with</span><br/>
                <span className="text-gradient-soft">meaning.</span>{" "}
                <span className="relative inline-block">
                  <span className="text-gradient-lime">Together.</span>
                  <svg className="absolute -bottom-2 left-0 w-full" height="14" viewBox="0 0 320 14" fill="none" preserveAspectRatio="none" aria-hidden="true">
                    <path d="M2 10 C 60 2 120 14 180 6 S 290 4 318 10" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" fill="none" opacity=".7"/>
                  </svg>
                </span>
              </h1>
            </Reveal>

            <Reveal delay={220}>
              <p className="mt-7 text-[18px] md:text-[19px] max-w-[58ch] leading-relaxed" style={{color:"var(--fg-2)"}}>
                An app, an apparel line, and <span className="text-fg font-medium">412 crews</span> showing up for each other across Jakarta. Track honestly, compete kindly, wear it proudly.
              </p>
            </Reveal>

            <Reveal delay={300}>
              <div className="mt-8 flex flex-wrap items-center gap-3">
                <a href="#download" className="btn btn-primary glow-ring text-[14px]">
                  <Icon name="download" size={15}/> Download the app
                </a>
                <a href="#community" className="btn btn-ghost text-[14px]">
                  <Icon name="users" size={15}/> Find your crew
                  <Icon name="arrowRight" size={14} className="opacity-70"/>
                </a>
              </div>
            </Reveal>

            <Reveal delay={400}>
              <div className="mt-10 flex flex-wrap items-center gap-5">
                <AvatarStack names={["Maya P","Rico T","Aisyah K","Danny F","Linda S","Hana W"]} size={36} max={5} overlap={12}/>
                <div className="flex items-center gap-1.5">
                  <div className="flex">
                    {[1,2,3,4,5].map(i=><Icon key={i} name="star" size={14} color="#c7ff3d" fill="#c7ff3d"/>)}
                  </div>
                  <span className="text-[13px] text-fg2"><b className="text-fg">4.9</b> · 12,400 reviews</span>
                </div>
              </div>
            </Reveal>
          </div>

          {/* RIGHT — phone + floating cards */}
          <div ref={stageRef} className="lg:col-span-5 relative" style={{minHeight:560}}>
            <Reveal delay={300} y={40}>
              <div className="relative mx-auto" style={{width:"fit-content"}}>
                {/* Phone */}
                <div className="relative phone-glow animate-float-med"
                  style={{ transform:`translate3d(${xy.x*0.6}px, ${xy.y*0.6}px, 0)`, transition:"transform .25s ease-out" }}>
                  <PhoneFrame width={300}>
                    <HomeScreen/>
                  </PhoneFrame>
                </div>

                {/* Floating card · Live activity (top-left) */}
                <div className="absolute hidden md:block"
                     style={{ left:-170, top:48, width:240,
                              transform:`rotate(-3deg) translate3d(${xy.x*-1.2}px, ${xy.y*-1.2}px, 0)`,
                              transition:"transform .25s ease-out" }}>
                  <div className="glass-strong ring-grad rounded-2xl p-3.5 shadow-2xl">
                    <div className="flex items-center gap-2.5">
                      <div className="relative">
                        <Avatar name="Maya P" size={36}/>
                        <span className="absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-[var(--bg)]" style={{width:12,height:12,background:"#22c55e"}}/>
                      </div>
                      <div className="leading-tight">
                        <div className="text-[12.5px]"><b className="font-display font-semibold">Maya</b> finished a <b>5K</b></div>
                        <div className="text-[10.5px] text-fg3">27:14 · 2 min ago</div>
                      </div>
                    </div>
                    <div className="mt-3 flex items-center justify-between">
                      <div className="flex items-center gap-1.5">
                        <Pill className="!text-[10px]">🔥 streak 12</Pill>
                        <Pill className="!text-[10px]">+120 zest</Pill>
                      </div>
                      <Icon name="arrowUpRight" size={14} className="text-fg3"/>
                    </div>
                  </div>
                </div>

                {/* Floating card · Mini leaderboard (right) */}
                <div className="absolute hidden md:block"
                     style={{ right:-160, top:170, width:230,
                              transform:`rotate(2deg) translate3d(${xy.x*1.4}px, ${xy.y*1.4}px, 0)`,
                              transition:"transform .25s ease-out" }}>
                  <div className="glass-strong ring-grad rounded-2xl p-3.5 shadow-2xl">
                    <div className="flex items-center justify-between">
                      <div className="eyebrow !text-[10px]">Crew this week</div>
                      <LiveDot/>
                    </div>
                    <div className="mt-2.5 space-y-1.5">
                      {[
                        {rank:1,name:"Maya P",pts:"2,410"},
                        {rank:2,name:"You",   pts:"2,180",you:true},
                        {rank:3,name:"Rico T",pts:"1,940"},
                      ].map(r=>(
                        <div key={r.rank} className="flex items-center gap-2 rounded-lg px-2 py-1.5"
                             style={{background:r.you?"color-mix(in oklab, var(--accent) 14%, transparent)":"var(--bg-card)", border:"1px solid "+(r.you?"color-mix(in oklab, var(--accent) 35%, transparent)":"var(--line)")}}>
                          <span className={`font-display font-semibold text-[11px] w-4 ${r.you?"text-accent":"text-fg3"}`}>{r.rank}</span>
                          <Avatar name={r.name==="You"?"Andi P":r.name} size={20}/>
                          <span className="flex-1 text-[11.5px]">{r.name}</span>
                          <span className="font-mono text-[10.5px] text-fg2">{r.pts}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Floating card · match (bottom-left) */}
                <div className="absolute hidden md:block"
                     style={{ left:-130, bottom:30, width:230,
                              transform:`rotate(-2deg) translate3d(${xy.x*-1}px, ${xy.y*-0.8}px, 0)`,
                              transition:"transform .25s ease-out" }}>
                  <div className="glass-strong ring-grad rounded-2xl p-3.5 shadow-2xl">
                    <div className="flex items-center gap-2.5">
                      <div className="rounded-xl grid place-items-center" style={{width:38, height:38, background:"var(--accent)"}}>
                        <span className="text-[20px]">🏃‍➡️</span>
                      </div>
                      <div className="flex-1 leading-tight">
                        <div className="text-[12.5px] font-display font-semibold">Saturday Morning Run</div>
                        <div className="text-[10.5px] text-fg3">GBK · Sat 7:00 AM</div>
                      </div>
                    </div>
                    <div className="mt-3 flex items-center justify-between">
                      <div className="flex items-center gap-1.5">
                        <AvatarStack names={["Maya P","Rico T","Aisyah K","Danny F","Linda S"]} size={20} max={4} overlap={6} extra={3}/>
                      </div>
                      <button className="rounded-full px-2.5 py-1 text-[10.5px] font-semibold" style={{background:"var(--accent)", color:"#0a0a0b"}}>I'm in</button>
                    </div>
                  </div>
                </div>

                {/* Tiny streak chip (top-right of phone) */}
                <div className="absolute hidden md:flex items-center gap-2 glass-strong rounded-full px-3 py-2"
                     style={{ right:-30, top:-12, transform:`rotate(4deg) translate3d(${xy.x*1.6}px, ${xy.y*1.6}px, 0)`, transition:"transform .25s ease-out" }}>
                  <Icon name="flame" size={14} color="#f59e0b"/>
                  <span className="text-[11.5px] font-display font-semibold">9 day streak</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Hero ticker — trusted brands / press / context */}
        <Reveal delay={500}>
          <div className="mt-16 md:mt-20 flex flex-col md:flex-row items-center gap-6">
            <div className="text-[11px] uppercase tracking-[0.18em] text-fg3 shrink-0">As seen on</div>
            <div className="flex flex-wrap items-center gap-x-9 gap-y-3 opacity-80">
              {["Kompas","TechInAsia","Tempo","Detik","DailySocial","KumparanWomen"].map(n=>(
                <span key={n} className="font-display font-semibold text-[18px] text-fg3 hover:text-fg2 transition-colors">{n}</span>
              ))}
            </div>
          </div>
        </Reveal>
      </Container>
    </Section>
  );
}

Object.assign(window, { Nav, Hero });