/* ZestPlus — App Showcase (Apple-style alternating + tabbed phone) */

const { useState: useSA, useRef: useRA } = React;

function AppShowcase(){
  const rows = [
    {
      eyebrow:"01 · Tracking",
      title:"Track your\nevery move.",
      desc:"GPS-accurate tracking across walks, runs, and rides. Every Jakarta route — GBK, Senayan, Sudirman, Pacific Place — straight into your activity log.",
      bullets:[
        "Live GPS · Google Maps integration",
        "Distance, pace, route history"
      ],
      side:"left",
      screen:<TrackScreen/>,
      glow:"rgba(199,255,61,0.45)",
    },
    {
      eyebrow:"02 · SWEAT rewards",
      title:"Move.\nEarn SWEAT.",
      desc:"Every step, every kilometer, every minute on the pavement earns SWEAT — Zest's reward token. Cash it in for apparel, court hours, or a Saturday kopi.",
      bullets:[
        "+0.80 SWEAT for a 1.5km run · live counter",
        "Pace, time, distance — all in one view",
        "No padding, no cheating · verified moves only",
      ],
      side:"right",
      screen:<SweatScreen/>,
      glow:"rgba(52,211,153,0.4)",
    },
    {
      eyebrow:"03 · Social",
      title:"Share\nwith friends.",
      desc:"Hit 17,000 steps before lunch? Drop a branded badge straight into WhatsApp, Instagram Direct, Telegram, or Messenger. Goal-crushing, with witnesses.",
      bullets:[
        "Branded badge cards for every milestone",
        "One-tap share to WhatsApp · IG · TG · Messenger",
        "Tag friends to challenge them back",
      ],
      side:"left",
      screen:<ShareScreen/>,
      glow:"rgba(124,58,237,0.4)",
    },
    {
      eyebrow:"04 · Challenges",
      title:"Challenge\nyour circle.",
      desc:"Set a target — 50,000 steps, 5K run, first to finish — and invite your friends. Every winner earns a digital finisher's badge for the Trophy Case.",
      bullets:[
        "Individual or first-to-finish format",
        "Custom targets, deadlines, rewards",
        "Digital badges · build your Trophy Case",
      ],
      side:"right",
      screen:<ChallengeScreen/>,
      glow:"rgba(245,158,11,0.4)",
    },
    {
      eyebrow:"05 · Team play",
      title:"Move\ntogether.",
      desc:"Tim Content vs. Tim Product — month-long team challenges with a live leaderboard. Yang kalah bayarin kopi. Built for the way Jakarta crews actually move.",
      bullets:[
        "Team brackets · live leaderboards",
        "Set the stakes — kopi, court hours, dinner",
        "Captain controls · fair team balancing",
      ],
      side:"left",
      screen:<TeamChallengeScreen/>,
      glow:"rgba(199,255,61,0.45)",
    },
    {
      eyebrow:"06 · Leaderboards",
      title:"Get\nmotivated.",
      desc:"Top Walkers, weekly challenges, global down to province-level boards. Flip on Friends Only when the leaderboard becomes the workout.",
      bullets:[
        "Global · Country · Province scopes",
        "Friends Only toggle for crew rivalry",
        "Podium recognition · 1st, 2nd, 3rd badges",
      ],
      side:"right",
      screen:<MotivatedLeaderboardScreen/>,
      glow:"rgba(52,211,153,0.4)",
    },
  ];

  return (
    <Section id="app" className="relative">
      <OrbField orbs={[
        { right:"-10%", top:"5%", size:560, blur:140, opacity:.35, bg:"radial-gradient(closest-side, rgba(199,255,61,0.35), transparent 70%)" },
        { left:"-10%", top:"50%", size:520, blur:140, opacity:.25, bg:"radial-gradient(closest-side, rgba(52,211,153,0.35), transparent 70%)" },
      ]}/>

      <Container className="relative">
        <div className="max-w-[760px]">
          <Reveal><Eyebrow>Inside the app</Eyebrow></Reveal>
          <Reveal delay={100}>
            <h2 className="h-section text-[44px] md:text-[64px] mt-4">
              Six features.<br/>
              <span className="text-gradient-lime">One ritual.</span>
            </h2>
          </Reveal>
          <Reveal delay={180}>
            <p className="mt-5 text-[17px] text-fg2 max-w-[58ch]">
              Track, earn SWEAT, share the win, challenge your circle, move together, climb the board. Six surfaces that earn their place on your home screen.
            </p>
          </Reveal>
        </div>

        {/* Alternating rows */}
        <div className="mt-20 md:mt-28 space-y-28 md:space-y-40">
          {rows.map((r,i)=>(
            <ShowcaseRow key={i} {...r}/>
          ))}
        </div>
      </Container>
    </Section>
  );
}

function ShowcaseRow({ eyebrow, title, desc, bullets, side, screen, glow }){
  const stageRef = useRA(null);
  const xy = useMouseParallax(stageRef, 10);
  const isLeft = side === "left";
  return (
    <div ref={stageRef} className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center relative overflow-x-clip">
      {/* phone */}
      <div className={`lg:col-span-5 ${isLeft ? "lg:order-1" : "lg:order-2"}`}>
        <Reveal delay={100} y={36}>
          <div className="relative mx-auto" style={{width:"fit-content"}}>
            {/* glow */}
            <div className="absolute -inset-20 pointer-events-none" aria-hidden="true"
              style={{background:`radial-gradient(closest-side, ${glow}, transparent 70%)`, filter:"blur(30px)", opacity:.7}}/>
            {/* subtle deco card behind */}
            <div className="absolute -inset-6 rounded-[44px] hairline" style={{transform:"rotate(-4deg)", background:"var(--bg-card)"}} aria-hidden="true"/>
            <div className="relative phone-shadow animate-float-slow"
                 style={{transform:`translate3d(${xy.x*0.5}px, ${xy.y*0.5}px, 0)`, transition:"transform .25s ease-out"}}>
              <PhoneFrame width={300}>{screen}</PhoneFrame>
            </div>
          </div>
        </Reveal>
      </div>

      {/* copy */}
      <div className={`lg:col-span-7 ${isLeft ? "lg:order-2" : "lg:order-1"}`}>
        <Reveal>
          <div className="eyebrow">{eyebrow}</div>
        </Reveal>
        <Reveal delay={100}>
          <h3 className="h-section text-[36px] md:text-[52px] mt-4 whitespace-pre-line">{title}</h3>
        </Reveal>
        <Reveal delay={180}>
          <p className="mt-5 text-[17px] text-fg2 max-w-[52ch]">{desc}</p>
        </Reveal>
        <Reveal delay={240}>
          <ul className="mt-7 space-y-2.5">
            {bullets.map((b,i)=>(
              <li key={i} className="flex items-start gap-3 text-[14.5px]">
                <span className="mt-1 grid place-items-center rounded-full shrink-0"
                  style={{width:18, height:18, background:"color-mix(in oklab, var(--accent) 18%, transparent)", border:"1px solid color-mix(in oklab, var(--accent) 40%, transparent)"}}>
                  <Icon name="check" size={11} color="var(--accent)" stroke={2.2}/>
                </span>
                <span className="text-fg2">{b}</span>
              </li>
            ))}
          </ul>
        </Reveal>
        <Reveal delay={300}>
          <a href="#download" className="mt-8 inline-flex items-center gap-1.5 text-[14px] font-semibold text-accent hover:gap-2 transition-all">
            See it in the app <Icon name="arrowRight" size={14}/>
          </a>
        </Reveal>
      </div>
    </div>
  );
}

Object.assign(window, { AppShowcase });