/* ZestPlus — Stats strip + Bento Features */

/* ---------------------------- Stats Strip ----------------------------- */
function Stats(){
  const stats = [
    { num:28400, label:"Active movers",   format:(v)=>`${(v/1000).toFixed(1)}K` },
    { num:1240000, label:"Activities logged", format:(v)=>`${(v/1000000).toFixed(2)}M` },
    { num:412,   label:"Running clubs",   format:(v)=>Math.round(v).toLocaleString() },
    { num:9400000,label:"Kilocalories burned",format:(v)=>`${(v/1000000).toFixed(1)}M` },
  ];
  return (
    <Section padded={false} className="py-16 md:py-24 border-t border-line">
      <Container>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-px rounded-3xl overflow-hidden hairline">
          {stats.map((s,i)=>(
            <Reveal key={i} delay={i*80}>
              <div className="bg-elev p-6 md:p-8 h-full">
                <div className="font-display font-semibold text-[40px] md:text-[56px] leading-none tracking-tight text-gradient-soft">
                  <Counter to={s.num} format={s.format} duration={1800+i*150}/>
                </div>
                <div className="mt-3 text-[12.5px] text-fg3 uppercase tracking-[0.16em]">{s.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ---------------------------- Bento Cell ------------------------------ */
function BentoCell({ icon, eyebrow, title, desc, accent = false, className = "", children, span = "" }) {
  return (
    <div className={`group relative h-full flex flex-col rounded-3xl p-6 md:p-7 overflow-hidden glass ring-grad transition-all duration-300 hover:-translate-y-1
      ${className} ${span}`}
      style={accent?{background:"linear-gradient(135deg, rgba(199,255,61,0.08), rgba(255,255,255,0.02))"}:{}}>
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-2.5">
          <div className={`grid place-items-center rounded-xl shrink-0 ${accent?"":""}`}
               style={{width:36, height:36, background: accent ? "var(--accent)" : "var(--bg-card-2)", color: accent?"#0a0a0b":"var(--fg)", border:"1px solid "+(accent?"var(--accent)":"var(--line)")}}>
            <Icon name={icon} size={17} stroke={1.8}/>
          </div>
          {eyebrow && <div className="eyebrow !text-[10.5px]">{eyebrow}</div>}
        </div>
        <Icon name="arrowUpRight" size={16} className="text-fg3 group-hover:text-fg2 transition-colors shrink-0"/>
      </div>
      <div className="mt-4">
        <h3 className="h-section text-[20px] md:text-[22px]">{title}</h3>
        {desc && <p className="mt-1.5 text-[13.5px] leading-snug text-fg3 max-w-[36ch]">{desc}</p>}
      </div>
      {children && <div className="mt-auto pt-4">{children}</div>}
      {/* subtle hover glow */}
      <div className="absolute -inset-px rounded-3xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity"
           style={{boxShadow:"0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), 0 20px 60px -20px color-mix(in oklab, var(--accent) 25%, transparent)"}}/>
    </div>
  );
}

/* ---------------------------- Mini previews --------------------------- */
function LeaderboardPreview() {
  const rows = [
    {rank:1,name:"Maya P",pts:2410,you:false},
    {rank:2,name:"Andi P",pts:2180,you:true},
    {rank:3,name:"Rico T",pts:1940,you:false},
    {rank:4,name:"Aisyah K",pts:1720,you:false},
  ];
  return (
    <div className="space-y-1.5">
      {rows.map(r=>(
        <div key={r.rank}
          className="flex items-center gap-2.5 rounded-xl px-3 py-2"
          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={`w-5 text-center font-display font-semibold text-[13px] ${r.you?"text-accent":"text-fg3"}`}>{r.rank}</span>
          <Avatar name={r.name} size={26}/>
          <span className="flex-1 text-[13.5px]">{r.name}{r.you && <span className="text-accent ml-1">(you)</span>}</span>
          {/* bar */}
          <div className="hidden md:block w-20 h-1.5 rounded-full overflow-hidden" style={{background:"var(--bg-card-2)"}}>
            <div className="h-full rounded-full" style={{width: `${(r.pts/2410)*100}%`, background: r.you?"var(--accent)":"var(--fg-3)"}}/>
          </div>
          <span className="font-mono text-[12px] text-fg2 w-12 text-right">{r.pts.toLocaleString()}</span>
        </div>
      ))}
    </div>
  );
}

function CrewsPreview() {
  const crews = [
    {name:"Sunrise 5K", members:142, emoji:"🏃"},
    {name:"Smash Club", members:98, emoji:"🏸"},
    {name:"Mindful Mornings", members:204, emoji:"🧘"},
    {name:"Bike Bandung", members:81, emoji:"🚴"},
  ];
  return (
    <div className="grid grid-cols-2 gap-2">
      {crews.map(c=>(
        <div key={c.name} className="rounded-2xl p-3 flex items-center gap-2.5"
             style={{background:"var(--bg-card)", border:"1px solid var(--line)"}}>
          <div className="rounded-xl grid place-items-center text-[18px]" style={{width:36, height:36, background:"var(--bg-card-2)"}}>
            {c.emoji}
          </div>
          <div className="leading-tight min-w-0">
            <div className="text-[13px] font-display font-semibold truncate">{c.name}</div>
            <div className="text-[11px] text-fg3">{c.members} members</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function QuestsPreview() {
  const quests = [
    { title:"Walk 30K this week", pct:62, reward:"+200 zest" },
    { title:"3 mornings before 7AM", pct:66, reward:"badge" },
  ];
  return (
    <div className="space-y-3">
      {quests.map((q,i)=>(
        <div key={i}>
          <div className="flex items-center justify-between">
            <span className="text-[13px] font-medium">{q.title}</span>
            <span className="text-[10.5px] uppercase tracking-[0.14em] text-fg3">{q.reward}</span>
          </div>
          <div className="mt-1.5 h-1.5 rounded-full overflow-hidden" style={{background:"var(--bg-card-2)"}}>
            <div className="h-full rounded-full" style={{width:`${q.pct}%`, background: q.pct>0?"linear-gradient(90deg, var(--accent), #34d399)":"var(--line)"}}/>
          </div>
        </div>
      ))}
    </div>
  );
}

function AnalyticsPreview(){
  return (
    <div className="flex items-end gap-1.5 h-[80px]">
      {[40,55,46,68,52,75,90,72,84,95,82,98].map((v,i)=>(
        <div key={i} className="flex-1 rounded-md" style={{
          height:`${v}%`,
          background: i>=8 ? "linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 50%, transparent))" : "var(--line-strong)",
          opacity: i>=8 ? 1 : .6,
        }}/>
      ))}
    </div>
  );
}

function MatchPreview(){
  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2.5 rounded-xl p-2.5" style={{background:"var(--bg-card)", border:"1px solid var(--line)"}}>
        <div className="rounded-lg grid place-items-center text-[16px]" style={{width:32, height:32, background:"var(--bg-card-2)"}}>🏸</div>
        <div className="flex-1 leading-tight">
          <div className="text-[12.5px] font-medium">Sat Smash · 7AM</div>
          <div className="text-[10.5px] text-fg3">GBK · 5/8</div>
        </div>
        <Pill accent className="!text-[10px]">Going</Pill>
      </div>
      <div className="flex items-center gap-2.5 rounded-xl p-2.5" style={{background:"var(--bg-card)", border:"1px solid var(--line)"}}>
        <div className="rounded-lg grid place-items-center text-[16px]" style={{width:32, height:32, background:"var(--bg-card-2)"}}>🏃</div>
        <div className="flex-1 leading-tight">
          <div className="text-[12.5px] font-medium">Sunrise 5K · Mon</div>
          <div className="text-[10.5px] text-fg3">Senayan loop</div>
        </div>
        <Pill className="!text-[10px]">Maybe</Pill>
      </div>
    </div>
  );
}

function RewardsPreview(){
  return (
    <div>
      <div className="flex items-baseline gap-1">
        <span className="font-display font-semibold text-[26px] leading-none">1,840</span>
        <span className="text-[11px] text-fg3">/ 2,000</span>
      </div>
      <div className="mt-2 h-1.5 rounded-full overflow-hidden" style={{background:"var(--bg-card-2)"}}>
        <div className="h-full rounded-full" style={{width:"92%", background:"linear-gradient(90deg, var(--accent), #34d399)"}}/>
      </div>
      <div className="mt-2 text-[11.5px] text-fg3">160 pts → 20% off apparel</div>
    </div>
  );
}

function ActivityPreview(){
  return (
    <div className="flex items-center gap-3">
      <ActivityRing size={56} stroke={6} value={62} color="var(--accent)" track="var(--line-strong)"
        center={<span className="font-display font-semibold text-[13px]">62%</span>}/>
      <div className="text-[12px] leading-tight">
        <div className="font-display font-semibold">Auto-detected</div>
        <div className="text-fg3">16 activity types</div>
      </div>
    </div>
  );
}

function StreaksPreview(){
  return (
    <div className="flex items-center gap-2">
      {[1,2,3,4,5,6,7].map(i=>(
        <div key={i} className={`rounded-md grid place-items-center text-[12px] font-display font-semibold`}
             style={{width:26, height:32, background: i<=5?"color-mix(in oklab, var(--accent) 20%, transparent)":"var(--bg-card)", border:"1px solid "+(i<=5?"color-mix(in oklab, var(--accent) 35%, transparent)":"var(--line)"), color: i<=5?"var(--accent)":"var(--fg-3)"}}>
          {i<=5?"🔥":"·"}
        </div>
      ))}
    </div>
  );
}

/* ---------------------------- Features Section ------------------------ */
function Features(){
  return (
    <Section id="features" className="relative">
      <OrbField orbs={[
        { right:"-8%", top:"10%", size:520, blur:120, opacity:.35, bg:"radial-gradient(closest-side, rgba(199,255,61,0.35), transparent 70%)" },
        { left:"-6%", bottom:"5%", size:420, blur:120, opacity:.25, bg:"radial-gradient(closest-side, rgba(124,58,237,0.4), transparent 70%)" },
      ]}/>
      <Container className="relative">
        <Reveal>
          <Eyebrow>Built for the way you actually move</Eyebrow>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="h-section text-[44px] md:text-[64px] max-w-[18ch] mt-4">
            Six ways to <span className="text-gradient-lime">show up.</span>
          </h2>
        </Reveal>
        <Reveal delay={180}>
          <p className="mt-5 text-[17px] text-fg2 max-w-[58ch]">
            Track your every move, earn SWEAT for every step, share the badge, challenge your circle, move together, climb the board. Built around the rhythm of Jakarta — kopi pagi, smash malam.
          </p>
        </Reveal>

        {/* Bento grid */}
        <div className="mt-14 grid grid-cols-2 md:grid-cols-4 auto-rows-[352px] gap-4">
          {/* Get Motivated · Leaderboard 2x2 */}
          <Reveal className="col-span-2 row-span-2 h-full">
            <BentoCell
              icon="trophy"
              eyebrow="Get motivated"
              title="Top Walkers, podium energy"
              desc="Global, country, and province boards. Friends-only when the leaderboard becomes the workout."
              accent
              className="h-full">
              <div className="mt-2"><LeaderboardPreview/></div>
            </BentoCell>
          </Reveal>

          {/* Track Every Move 1x1 */}
          <Reveal delay={80} className="h-full">
            <BentoCell icon="pin" eyebrow="Tracking" title="Track every move"
              desc="GPS routes across Jakarta — GBK, Sudirman, Senayan.">
              <ActivityPreview/>
            </BentoCell>
          </Reveal>

          {/* Move. Earn SWEAT 1x1 */}
          <Reveal delay={120} className="h-full">
            <BentoCell icon="bolt" eyebrow="SWEAT rewards" title="Move. Earn SWEAT."
              desc="Every km earns the token. +0.80 a run.">
              <StreaksPreview/>
            </BentoCell>
          </Reveal>

          {/* Challenge Your Circle 1x1 */}
          <Reveal delay={160} className="h-full">
            <BentoCell icon="target" eyebrow="Challenges" title="Challenge your circle"
              desc="50,000 steps. First to finish. Trophy Case wins.">
              <QuestsPreview/>
            </BentoCell>
          </Reveal>

          {/* Share With Friends 1x1 */}
          <Reveal delay={200} className="h-full">
            <BentoCell icon="sparkle" eyebrow="Social" title="Share with friends"
              desc="WhatsApp, IG Direct, Telegram — flex the badge.">
              <RewardsPreview/>
            </BentoCell>
          </Reveal>

          {/* Move Together · Team play 2x1 */}
          <Reveal delay={240} className="col-span-2 h-full">
            <BentoCell icon="users" eyebrow="Move together" title="Tim Content vs. Tim Product"
              desc="Month-long team challenges. Yang kalah bayarin kopi.">
              <CrewsPreview/>
            </BentoCell>
          </Reveal>

          {/* Match-day 2x1 */}
          <Reveal delay={280} className="col-span-2 h-full">
            <BentoCell icon="calendar" eyebrow="Match-day" title="Court bookings, no group-chat chaos"
              desc="Book courts. RSVP. Auto-balance teams. Split bills via QRIS.">
              <MatchPreview/>
            </BentoCell>
          </Reveal>
        </div>
      </Container>
    </Section>
  );
}

Object.assign(window, { Stats, Features, BentoCell });