/* ZestPlus — phone mocks
   PhoneFrame, ActivityRing, plus 5 realistic screen components
*/

const { useEffect: useEffectP, useRef: useRefP, useState: useStateP } = React;

/* ---------------------------- PhoneFrame ------------------------------ */
function PhoneFrame({ children, width = 300, className = "", style = {}, screenClassName = "" }) {
  const height = Math.round(width * (640/300));
  return (
    <div className={`relative ${className}`} style={{ width, height, ...style }}>
      {/* outer body */}
      <div
        className="absolute inset-0 phone-shadow"
        style={{
          borderRadius: 42,
          background:"linear-gradient(160deg, #1c1c20 0%, #0c0c0e 100%)",
          padding: 7,
        }}
      >
        {/* inner bezel */}
        <div
          className="relative w-full h-full overflow-hidden"
          style={{
            borderRadius: 35,
            background:"#000",
            boxShadow:"inset 0 0 0 1px rgba(255,255,255,0.04)",
          }}
        >
          {/* screen */}
          <div className={`relative w-full h-full overflow-hidden ${screenClassName}`}
               style={{background:"linear-gradient(180deg,#0c0e10 0%,#070808 100%)"}}>
            {/* dynamic island */}
            <div className="absolute left-1/2 -translate-x-1/2 top-2 z-30"
                 style={{width:88, height:26, borderRadius:14, background:"#000", boxShadow:"inset 0 0 0 1px rgba(255,255,255,0.04)"}}>
              <span className="absolute right-2.5 top-1/2 -translate-y-1/2 inline-block rounded-full" style={{width:6,height:6,background:"#1c1c20",boxShadow:"inset 0 0 0 1px rgba(255,255,255,0.1)"}}/>
            </div>
            {/* status bar */}
            <StatusBar />
            {/* content (below status bar) */}
            <div className="absolute inset-0 pt-10 pb-2 px-4 text-[#fafafa]">
              {children}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatusBar(){
  return (
    <div className="absolute left-0 right-0 top-0 h-10 flex items-center justify-between px-5 text-[11px] font-display font-medium z-20 text-white/85">
      <span>9:41</span>
      <div className="flex items-center gap-1">
        {/* signal */}
        <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><rect x="0" y="7" width="2" height="3" rx="0.5"/><rect x="4" y="5" width="2" height="5" rx="0.5"/><rect x="8" y="3" width="2" height="7" rx="0.5"/><rect x="12" y="0" width="2" height="10" rx="0.5"/></svg>
        {/* wifi */}
        <svg width="13" height="10" viewBox="0 0 16 12" fill="currentColor"><path d="M8 11.4a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z"/><path d="M3.2 6.2a7 7 0 0 1 9.6 0l-1.4 1.4a5 5 0 0 0-6.8 0L3.2 6.2zM.4 3.4a11 11 0 0 1 15.2 0l-1.4 1.4a9 9 0 0 0-12.4 0L.4 3.4z"/></svg>
        {/* battery */}
        <svg width="22" height="11" viewBox="0 0 24 11" fill="none"><rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke="currentColor" opacity=".5"/><rect x="2" y="2" width="16" height="7" rx="1.5" fill="currentColor"/><rect x="21.5" y="3.5" width="2" height="4" rx="1" fill="currentColor" opacity=".5"/></svg>
      </div>
    </div>
  );
}

/* ---------------------------- ActivityRing --------------------------- */
function ActivityRing({ size = 150, stroke = 12, value = 62, label = "", subLabel = "", center, color = "#c7ff3d", track = "rgba(255,255,255,0.08)" }) {
  const r = (size - stroke)/2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value/100);
  return (
    <div className="relative inline-flex items-center justify-center" style={{width:size, height:size}}>
      <svg width={size} height={size} className="-rotate-90">
        <circle cx={size/2} cy={size/2} r={r} stroke={track} strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r}
          stroke={color} strokeWidth={stroke} strokeLinecap="round" fill="none"
          strokeDasharray={c} strokeDashoffset={off}
          style={{filter:`drop-shadow(0 0 6px ${color}88)`, transition:"stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)"}}
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
        {center ?? (
          <>
            <div className="font-display font-semibold leading-none" style={{fontSize:Math.round(size*0.20)}}>{label}</div>
            {subLabel && <div className="mt-1 text-[10px] uppercase tracking-[0.16em] text-white/55">{subLabel}</div>}
          </>
        )}
      </div>
    </div>
  );
}

/* tiny chip + nav bits for screens */
function PhoneChip({ children, accent = false }) {
  return (
    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${accent ? "text-[#0a0a0b]" : "text-white/75"}`}
      style={{background: accent ? "#c7ff3d" : "rgba(255,255,255,0.06)", border:"1px solid "+(accent?"#c7ff3d":"rgba(255,255,255,0.08)")}}>
      {children}
    </span>
  );
}
function MiniAvatar({ name, size = 22 }) {
  return <Avatar name={name} size={size} />;
}
function PhoneCard({ children, className = "", style = {} }) {
  return (
    <div className={`rounded-2xl p-3 ${className}`}
      style={{background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.06)", ...style}}>
      {children}
    </div>
  );
}
function PhoneBottomNav({ active = 0 }){
  const items = [
    {name:"home", icon:"ring"}, {name:"feed", icon:"users"}, {name:"play", icon:"play"}, {name:"trophy", icon:"trophy"}, {name:"me", icon:"users"},
  ];
  return (
    <div className="absolute left-3 right-3 bottom-3 flex items-center justify-between rounded-full px-3 py-2.5"
      style={{background:"rgba(20,20,22,0.85)", border:"1px solid rgba(255,255,255,0.07)", backdropFilter:"blur(10px)"}}>
      {items.map((it,i)=>(
        <button key={i} className={`flex items-center justify-center rounded-full ${i===active?"bg-[#c7ff3d] text-[#0a0a0b]":""}`} style={{width:32,height:32}}>
          <Icon name={it.icon} size={16} stroke={1.8}/>
        </button>
      ))}
    </div>
  );
}

/* =====================================================================
   SCREEN 1 — HOME  (default) — rebuilt to match screenshoot/home.png
   ===================================================================== */
const fmtID = (n) => Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

function gaugePoint(cx, cy, r, frac) {
  const a = (135 + frac * 270) * Math.PI / 180;
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}
function gaugeArc(cx, cy, r, f0, f1) {
  const [x0, y0] = gaugePoint(cx, cy, r, f0);
  const [x1, y1] = gaugePoint(cx, cy, r, f1);
  const large = (f1 - f0) > (2 / 3) ? 1 : 0;
  return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)}`;
}

/* Semicircular step gauge — the home-screen centerpiece.
   Sizes are calibrated against screenshoot/home.png (540px-wide reference). */
function StepGauge({ value = 3116, goal = 5000 }) {
  const W = 230, H = 116, cx = 115, cy = 68, r = 56, sw = 8.5;
  const frac = Math.max(0, Math.min(1, value / goal));
  const marks = [0, 1000, 2000, 3000, 4000, 5000];
  return (
    <div className="relative mx-auto" style={{ width: W, height: H }}>
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} className="absolute inset-0">
        <defs>
          <linearGradient id="zgauge" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor="#8bc40c" />
            <stop offset="55%" stopColor="#c7ff3d" />
            <stop offset="100%" stopColor="#e7ffa6" />
          </linearGradient>
        </defs>
        <path d={gaugeArc(cx, cy, r, 0, 1)} fill="none" stroke="rgba(255,255,255,0.13)" strokeWidth={sw} strokeLinecap="round" />
        <path d={gaugeArc(cx, cy, r, 0, frac)} fill="none" stroke="url(#zgauge)" strokeWidth={sw} strokeLinecap="round"
          style={{ filter: "drop-shadow(0 0 5px rgba(199,255,61,0.5))" }} />
      </svg>
      {/* faded shoe */}
      <div className="absolute left-1/2 -translate-x-1/2 select-none" style={{ top: 44, fontSize: 30, opacity: 0.13 }} aria-hidden="true">👟</div>
      {/* tick labels */}
      {marks.map((m, i) => {
        const [mx, my] = gaugePoint(cx, cy, r - 14, i / 5);
        return (
          <span key={m} className="absolute font-display text-white/40"
            style={{ left: mx, top: my, transform: "translate(-50%,-50%)", fontSize: 6.5 }}>
            {fmtID(m)}
          </span>
        );
      })}
      {/* big value */}
      <div className="absolute left-1/2 -translate-x-1/2 font-display font-bold leading-none"
        style={{ bottom: 0, fontSize: 12, color: "#c7ff3d", textShadow: "0 0 12px rgba(199,255,61,0.4)" }}>
        {fmtID(value)}
      </div>
    </div>
  );
}

function HomeScreen() {
  const screenBg = "#292929";                                              /* sampled from home.png */
  const card = { background: "#2f2f2f", border: "1px solid rgba(255,255,255,0.055)" };
  return (
    <div className="relative flex flex-col h-full">
      {/* flat dark-grey screen background — sampled from screenshoot/home.png (#292929) */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: screenBg }} />

      {/* greeting */}
      <div className="relative mt-2 flex items-start justify-between gap-2">
        <div className="leading-tight">
          <div className="text-white/55" style={{ fontSize: 9 }}>Hello,</div>
          <div className="font-display font-semibold leading-snug" style={{ fontSize: 10.5 }}>John Doe</div>
        </div>
        <div className="flex items-center gap-1.5 shrink-0">
          <button className="relative grid place-items-center rounded-full" style={{ width: 26, height: 26, ...card }}>
            <Icon name="bell" size={12} stroke={1.8} />
            <span className="absolute -top-1 -right-1 grid place-items-center rounded-full font-display font-bold text-[#0a0a0b]"
              style={{ width: 12, height: 12, fontSize: 5.5, background: "#c7ff3d", border: `2px solid ${screenBg}` }}>2</span>
          </button>
          <button className="grid place-items-center rounded-full" style={{ width: 26, height: 26, ...card }}>
            <Icon name="mail" size={12} stroke={1.8} />
          </button>
        </div>
      </div>

      {/* level + xp bar — capped at ~half the screen width (matches home.png) */}
      <div className="relative mt-3 flex items-center gap-2" style={{ width: "50%" }}>
        <span className="text-white/70 shrink-0" style={{ fontSize: 6 }}>Level</span>
        <span className="grid place-items-center rounded-full font-display font-bold text-[#0a0a0b] shrink-0"
          style={{ width: 15, height: 15, fontSize: 7.5, background: "#c7ff3d" }}>20</span>
        <div className="relative flex-1 rounded-full overflow-hidden" style={{ height: 12, background: "rgba(255,255,255,0.09)" }}>
          <div className="absolute inset-y-0 left-0 rounded-full" style={{ width: "22%", background: "linear-gradient(90deg,#8bc40c,#c7ff3d)" }} />
          <span className="absolute inset-0 grid place-items-center font-display font-semibold text-white/85 whitespace-nowrap" style={{ fontSize: 6 }}>13.006 / 119.811</span>
        </div>
      </div>

      {/* quick stats */}
      <div className="relative mt-3 flex items-center gap-4">
        <div className="flex items-center gap-1">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#c7ff3d" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" />
          </svg>
          <span className="font-display font-bold" style={{ fontSize: 10.5, color: "#c7ff3d" }}>404.33</span>
        </div>
        <div className="flex items-center gap-1">
          <Icon name="bolt" size={11} color="#c7ff3d" fill="#c7ff3d" />
          <span className="font-display font-bold" style={{ fontSize: 10.5, color: "#c7ff3d" }}>21/21</span>
        </div>
      </div>

      {/* step gauge */}
      <div className="relative mt-2">
        <StepGauge value={3116} goal={5000} />
      </div>

      {/* goal line — own centred line, no icon (matches home.png) */}
      <div className="relative mt-1.5 text-center">
        <span className="text-white/55" style={{ fontSize: 8.5 }}>Just <b className="text-white/85 font-display font-semibold">1.672 steps</b> left to crush your goal!</span>
      </div>

      {/* streak flame + activity stats — 4 evenly-spaced columns (matches home.png) */}
      <div className="relative mt-2.5 grid grid-cols-4 items-center">
        {/* streak flame — drawn SVG (no emoji-font dependency) */}
        <div className="relative flex items-center">
          <svg width="20" height="21" viewBox="0 0 24 25" aria-hidden="true">
            <path d="M12 1 C 16.5 8 19.5 11 19.5 16 A 7.5 7.5 0 0 1 4.5 16 C 4.5 11.5 8 8.5 12 1 Z" fill="#ff8a1e" />
            <path d="M12 10 C 14.5 13.5 16 15 16 17.5 A 4 4 0 0 1 8 17.5 C 8 15 9.8 13.2 12 10 Z" fill="#ffd23e" />
          </svg>
          <span className="absolute grid place-items-center rounded-full font-display font-bold"
            style={{ width: 11, height: 11, fontSize: 6, left: -4, bottom: -2, background: "#ffffff", color: "#1d1d1f" }}>2</span>
        </div>
        <div className="flex items-center gap-1.5">
          <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="12" r="10" fill="#33e35c" />
            <path d="M12 6.7 V12.2 L15.7 14.4" fill="none" stroke="#292929" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span className="font-display font-semibold whitespace-nowrap" style={{ fontSize: 9.5 }}>35 <span className="text-white/55 font-sans font-normal">Mins</span></span>
        </div>
        <div className="flex items-center gap-1.5">
          <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 3 C 15 7 17 10 17 13.5 A 5 5 0 0 1 7 13.5 C 7 10 9 7 12 3 Z" fill="#33e35c" />
          </svg>
          <span className="font-display font-semibold whitespace-nowrap" style={{ fontSize: 9.5 }}>133 <span className="text-white/55 font-sans font-normal">Cal</span></span>
        </div>
        <button className="flex items-center" aria-label="Share">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#33e35c" strokeWidth="2.7" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 17 C 5 10 9.5 7 16 7" />
            <path d="M11.5 2.5 L17 7 L11.5 11.5" />
          </svg>
        </button>
      </div>

      {/* top walkers */}
      <div className="relative mt-3 font-display font-semibold" style={{ fontSize: 10 }}>Top Walkers</div>
      <div className="relative mt-2 flex items-stretch gap-2">
        <div className="flex-1 flex items-start justify-around rounded-2xl px-2 py-2" style={card}>
          {[
            { rank: "1st", name: "Eric", av: "Eric W" },
            { rank: "2nd", name: "You", av: "Your R" },
            { rank: "3rd", name: "Tanto", av: "Tanto S" },
          ].map((w) => (
            <div key={w.rank} className="flex flex-col items-center gap-0.5">
              <span className="font-display font-semibold" style={{ fontSize: 7, color: w.rank === "1st" ? "#c7ff3d" : "rgba(255,255,255,0.5)" }}>{w.rank}</span>
              <Avatar name={w.av} size={26} />
              <span className="font-display font-semibold" style={{ fontSize: 8, color: "#c7ff3d" }}>{w.name}</span>
            </div>
          ))}
        </div>
        <button className="flex flex-col items-center justify-center gap-0.5 rounded-2xl" style={{ width: 48, background: "#383838", border: "1px solid rgba(255,255,255,0.055)" }}>
          <Icon name="chevR" size={12} color="#fff" />
          <span className="text-white/55 text-center leading-tight" style={{ fontSize: 6.5 }}>See more</span>
        </button>
      </div>

      {/* challenge friends */}
      <div className="relative mt-2.5 flex items-center justify-between rounded-2xl px-3 py-2" style={card}>
        <span className="text-white/80" style={{ fontSize: 9 }}>Challenge Your Friends!</span>
        <span className="grid place-items-center rounded-full" style={{ width: 18, height: 18, background: "rgba(255,255,255,0.1)" }}>
          <Icon name="plus" size={10} color="#fff" />
        </span>
      </div>

      {/* challenge card */}
      <div className="relative mt-2.5 rounded-2xl px-3 py-2.5"
        style={{ background: "linear-gradient(135deg, rgba(199,255,61,0.12), rgba(199,255,61,0.03))", border: "1px solid rgba(199,255,61,0.2)" }}>
        <div className="flex items-center justify-between gap-3">
          <div className="flex-1">
            <div className="font-display font-semibold" style={{ fontSize: 10.5, color: "#c7ff3d" }}>Challenge</div>
            <div className="text-white/75 mt-0.5" style={{ fontSize: 8.5 }}>50k bro</div>
            <button className="mt-2 inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-display font-semibold"
              style={{ fontSize: 8, background: "#c7ff3d", color: "#0a0a0b" }}>
              See Challenges <Icon name="arrowRight" size={9} color="#0a0a0b" stroke={2.4} />
            </button>
          </div>
          <AvatarStack names={["Maya P", "Rico T", "Aisyah K"]} size={20} max={3} overlap={7} extra={0} />
        </div>
      </div>

      <div className="flex-1" />

      {/* bottom nav — full-bleed grey bar + raised START (matches home.png) */}
      <div className="relative">
        <div className="flex items-center justify-between"
          style={{ marginLeft: -16, marginRight: -16, marginBottom: -8, height: 44, paddingLeft: 28, paddingRight: 28, background: "#3d3d3d" }}>
          {/* home (active) */}
          <button className="grid place-items-center" style={{ width: 26, height: 26 }}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#c7ff3d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 3 L20.5 9.5 V20 H3.5 V9.5 Z" />
            </svg>
          </button>
          {/* two overlapping squares */}
          <button className="grid place-items-center" style={{ width: 26, height: 26 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <rect x="8.5" y="3" width="12.5" height="12.5" rx="3.4" />
              <rect x="3" y="8.5" width="12.5" height="12.5" rx="3.4" fill="#3d3d3d" />
            </svg>
          </button>
          <span style={{ width: 26 }} />
          {/* bag */}
          <button className="grid place-items-center" style={{ width: 26, height: 26 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M6 8.5 H18 L17 20.5 H7 Z" />
              <path d="M9 9 V6.5 a3 3 0 0 1 6 0 V9" />
            </svg>
          </button>
          {/* profile */}
          <button className="grid place-items-center" style={{ width: 26, height: 26 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="8.5" r="4.2" /><path d="M4.5 20.5 a7.5 7.5 0 0 1 15 0" />
            </svg>
          </button>
        </div>
        {/* raised START button */}
        <button className="absolute left-1/2 -translate-x-1/2 grid place-items-center rounded-full font-display font-bold italic"
          style={{ width: 58, height: 58, bottom: 7, fontSize: 11, letterSpacing: "0.01em", color: "#0c2407",
                   background: "linear-gradient(180deg, #80ff31 0%, #29f458 100%)",
                   boxShadow: "0 5px 16px -3px rgba(60,225,75,0.55)" }}>
          START
        </button>
      </div>
    </div>
  );
}

/* =====================================================================
   SCREEN 2 — ACTIVITY (run with map)
   ===================================================================== */
function ActivityScreen() {
  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between">
        <button className="text-[14px] text-white/65 flex items-center gap-1"><Icon name="chevL" size={14}/>Activity</button>
        <PhoneChip>Today · 6:32 AM</PhoneChip>
      </div>

      {/* map */}
      <div className="mt-2 relative rounded-2xl overflow-hidden" style={{height:130, background:"linear-gradient(135deg,#10141a,#0a0c10)", border:"1px solid rgba(255,255,255,0.06)"}}>
        {/* fake map roads */}
        <svg viewBox="0 0 240 130" className="absolute inset-0 w-full h-full">
          <defs>
            <pattern id="m" width="22" height="22" patternUnits="userSpaceOnUse">
              <path d="M0 11h22M11 0v22" stroke="rgba(255,255,255,0.03)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="240" height="130" fill="url(#m)"/>
          <path d="M10 100 C 40 90 60 70 90 75 S 140 100 170 70 220 30 235 35" stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none" strokeLinecap="round"/>
          <path d="M10 100 C 40 90 60 70 90 75 S 140 100 170 70 220 30 235 35" stroke="#c7ff3d" strokeWidth="2.5" fill="none" strokeLinecap="round" style={{filter:"drop-shadow(0 0 4px #c7ff3d)"}}/>
          <circle cx="10" cy="100" r="4" fill="#c7ff3d"/>
          <circle cx="235" cy="35" r="5" fill="#fafafa" stroke="#c7ff3d" strokeWidth="2"/>
        </svg>
        <div className="absolute left-2.5 top-2.5 flex items-center gap-1">
          <PhoneChip accent>5.2 KM</PhoneChip>
        </div>
      </div>

      {/* metrics */}
      <div className="grid grid-cols-3 gap-2 mt-3">
        <div>
          <div className="text-[9px] uppercase tracking-[0.14em] text-white/45">Distance</div>
          <div className="font-display font-semibold text-[20px] leading-tight">5.2<span className="text-white/40 text-[12px]"> km</span></div>
        </div>
        <div>
          <div className="text-[9px] uppercase tracking-[0.14em] text-white/45">Pace</div>
          <div className="font-display font-semibold text-[20px] leading-tight">5'24<span className="text-white/40 text-[12px]"> /km</span></div>
        </div>
        <div>
          <div className="text-[9px] uppercase tracking-[0.14em] text-white/45">Time</div>
          <div className="font-display font-semibold text-[20px] leading-tight">28:09</div>
        </div>
      </div>

      {/* splits chart */}
      <div className="mt-3">
        <div className="flex items-center justify-between">
          <div className="text-[10px] uppercase tracking-[0.14em] text-white/55">Pace splits</div>
          <div className="text-[10px] text-white/45">5 km</div>
        </div>
        <div className="mt-1.5 flex items-end gap-2 h-[68px]">
          {[58,72,62,80,90].map((v,i)=>(
            <div key={i} className="flex-1 rounded-md" style={{height:`${v}%`, background: i===3?"#c7ff3d":"rgba(255,255,255,0.12)", boxShadow:i===3?"0 0 12px rgba(199,255,61,0.5)":"none"}}/>
          ))}
        </div>
      </div>

      {/* crew reacts */}
      <div className="mt-3">
        <div className="text-[10px] uppercase tracking-[0.14em] text-white/55 mb-1.5">Crew reacts</div>
        <PhoneCard className="!py-2 flex items-center gap-2">
          <Avatar name="Maya P" size={22}/>
          <span className="text-[11px]"><b>Maya</b> "PR Andi! 🔥🔥"</span>
        </PhoneCard>
        <PhoneCard className="mt-1.5 !py-2 flex items-center gap-2">
          <Avatar name="Rico T" size={22}/>
          <span className="text-[11px]"><b>Rico</b> "Race me Saturday?"</span>
        </PhoneCard>
      </div>

      <div className="flex-1"/>
      <PhoneBottomNav active={1}/>
    </div>
  );
}

/* =====================================================================
   SCREEN 3 — CREW LEADERBOARD
   ===================================================================== */
function LeaderboardScreen() {
  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 },
    { rank:5, name:"Danny F", pts:1510, you:false },
  ];
  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[10px] uppercase tracking-[0.14em] text-white/55">Leaderboard</div>
          <div className="font-display font-semibold text-[15px]">Crew Sunrise · Week 24</div>
        </div>
        <PhoneChip>Mon → Sun</PhoneChip>
      </div>

      {/* podium */}
      <div className="mt-3 grid grid-cols-3 gap-2 items-end">
        <div className="flex flex-col items-center pb-2">
          <Avatar name="Rico T" size={36}/>
          <div className="text-[11px] font-display font-semibold mt-1">Rico</div>
          <div className="text-[10px] text-white/55">1,940</div>
          <div className="mt-1.5 w-full rounded-t-lg flex items-end justify-center font-display font-semibold text-[14px] text-white/70" style={{height:42, background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.06)", borderBottom:"none"}}>3</div>
        </div>
        <div className="flex flex-col items-center pb-2">
          <div className="relative">
            <Avatar name="Maya P" size={46}/>
            <span className="absolute -top-1 -right-1 inline-flex items-center justify-center rounded-full" style={{width:18,height:18,background:"#c7ff3d"}}>
              <Icon name="trophy" size={11} color="#0a0a0b"/>
            </span>
          </div>
          <div className="text-[12px] font-display font-semibold mt-1">Maya</div>
          <div className="text-[10px] text-white/55">2,410</div>
          <div className="mt-1.5 w-full rounded-t-lg flex items-end justify-center font-display font-semibold text-[16px]" style={{height:64, background:"linear-gradient(180deg, #c7ff3d, #8bc40c)", color:"#0a0a0b"}}>1</div>
        </div>
        <div className="flex flex-col items-center pb-2">
          <Avatar name="Andi P" size={36}/>
          <div className="text-[11px] font-display font-semibold mt-1">Andi <span className="text-[#c7ff3d]">(you)</span></div>
          <div className="text-[10px] text-white/55">2,180</div>
          <div className="mt-1.5 w-full rounded-t-lg flex items-end justify-center font-display font-semibold text-[14px] text-white/70" style={{height:52, background:"rgba(255,255,255,0.04)", border:"1px solid rgba(255,255,255,0.06)", borderBottom:"none"}}>2</div>
        </div>
      </div>

      {/* full ranking */}
      <div className="mt-3 space-y-1.5">
        {rows.slice(0,5).map(r=>(
          <div key={r.rank}
            className={`flex items-center gap-2 rounded-xl px-2.5 py-2 ${r.you?"ring-1":""}`}
            style={{background: r.you ? "rgba(199,255,61,0.08)" : "rgba(255,255,255,0.03)", boxShadow: r.you?"inset 0 0 0 1px rgba(199,255,61,0.35)":"none", border:r.you?"none":"1px solid rgba(255,255,255,0.05)"}}>
            <span className={`w-5 text-center font-display font-semibold text-[12px] ${r.you?"text-[#c7ff3d]":"text-white/60"}`}>{r.rank}</span>
            <Avatar name={r.name} size={22}/>
            <span className="flex-1 text-[12px]">{r.name}{r.you && <span className="text-[#c7ff3d] ml-1">(you)</span>}</span>
            <span className="font-mono text-[11px] text-white/75">{r.pts.toLocaleString()}</span>
          </div>
        ))}
      </div>

      <div className="flex-1"/>
      <PhoneBottomNav active={3}/>
    </div>
  );
}

/* =====================================================================
   SCREEN 4 — MATCHES
   ===================================================================== */
function MatchesScreen() {
  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[10px] uppercase tracking-[0.14em] text-white/55">Matches</div>
          <div className="font-display font-semibold text-[15px]">This week</div>
        </div>
        <button className="rounded-full p-1.5" style={{background:"rgba(255,255,255,0.06)"}}><Icon name="plus" size={14}/></button>
      </div>

      {/* hero match */}
      <PhoneCard className="mt-3 relative overflow-hidden" style={{background:"linear-gradient(135deg, rgba(199,255,61,0.18), rgba(255,255,255,0.02))", border:"1px solid rgba(199,255,61,0.28)"}}>
        <div className="flex items-start justify-between">
          <div>
            <div className="text-[10px] uppercase tracking-[0.14em] text-[#c7ff3d]">Up next</div>
            <div className="font-display font-semibold text-[17px] mt-0.5">🏃‍➡️🏃‍♂️‍➡️ Saturday Morning Run</div>
            <div className="text-[11px] text-white/65 mt-0.5">GBK Court 4 · 7:00 AM</div>
          </div>
          <div className="text-right">
            <div className="font-display font-semibold text-[18px]">Sat</div>
            <div className="text-[11px] text-white/55">17 May</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={22} max={4} overlap={6} extra={3}/>
            <span className="text-[10px] text-white/55">5/8</span>
          </div>
          <button className="rounded-full px-3 py-1.5 text-[11px] font-semibold" style={{background:"#c7ff3d", color:"#0a0a0b"}}>I'm in</button>
        </div>
      </PhoneCard>

      {/* upcoming list */}
      <div className="mt-3 space-y-1.5">
        <PhoneCard className="!py-2.5">
          <div className="flex items-center gap-2.5">
            <div className="rounded-lg flex items-center justify-center" style={{width:32,height:32,background:"rgba(255,255,255,0.05)"}}>
              <span>🏃</span>
            </div>
            <div className="flex-1">
              <div className="text-[12px] font-display font-semibold">Sunrise 5K</div>
              <div className="text-[10px] text-white/55">Mon 5:30 AM · Senayan loop</div>
            </div>
            <PhoneChip>Maybe</PhoneChip>
          </div>
        </PhoneCard>
        <PhoneCard className="!py-2.5">
          <div className="flex items-center gap-2.5">
            <div className="rounded-lg flex items-center justify-center" style={{width:32,height:32,background:"rgba(255,255,255,0.05)"}}>
              <span>🚴</span>
            </div>
            <div className="flex-1">
              <div className="text-[12px] font-display font-semibold">Sunday Spin</div>
              <div className="text-[10px] text-white/55">Sun 6:00 AM · Sudirman</div>
            </div>
            <PhoneChip accent>Going</PhoneChip>
          </div>
        </PhoneCard>
        <PhoneCard className="!py-2.5">
          <div className="flex items-center gap-2.5">
            <div className="rounded-lg flex items-center justify-center" style={{width:32,height:32,background:"rgba(255,255,255,0.05)"}}>
              <span>🧘</span>
            </div>
            <div className="flex-1">
              <div className="text-[12px] font-display font-semibold">Mindful Mornings</div>
              <div className="text-[10px] text-white/55">Daily 6:30 AM</div>
            </div>
            <PhoneChip>—</PhoneChip>
          </div>
        </PhoneCard>
      </div>

      <div className="flex-1"/>
      <PhoneBottomNav active={2}/>
    </div>
  );
}

/* =====================================================================
   SCREEN 5 — REWARDS
   ===================================================================== */
function RewardsScreen() {
  const screenBg = "#292929";                                              /* match HomeScreen (home.png) */
  const card = { background: "#2f2f2f", border: "1px solid rgba(255,255,255,0.055)" };
  const tile = { background: "#383838", border: "1px solid rgba(255,255,255,0.055)" };
  const rewards = [
    { emoji:"👕", name:"20% off Run Singlet", pts:"2,000 pts" },
    { emoji:"🏸", name:"Court hour · GBK",     pts:"3,500 pts" },
    { emoji:"☕", name:"Kopi Tuku · 1 cup",    pts:"800 pts"   },
    { emoji:"🎒", name:"Club Jacket",          pts:"5,500 pts" },
  ];
  return (
    <div className="relative flex flex-col h-full">
      {/* flat dark-grey screen background — matches HomeScreen (#292929) */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: screenBg }} />

      {/* header */}
      <div className="relative flex items-center justify-between">
        <div className="font-display font-semibold" style={{ fontSize: 13 }}>Rewards</div>
        <div className="flex items-center gap-1.5">
          <span className="text-white/70" style={{ fontSize: 7 }}>Level</span>
          <span className="grid place-items-center rounded-full font-display font-bold text-[#0a0a0b]"
            style={{ width: 16, height: 16, fontSize: 8, background: "#c7ff3d" }}>4</span>
        </div>
      </div>

      {/* zest balance card */}
      <div className="relative mt-3 rounded-2xl px-3 py-3 overflow-hidden"
        style={{ background: "linear-gradient(135deg, rgba(199,255,61,0.14), rgba(199,255,61,0.03))", border: "1px solid rgba(199,255,61,0.2)" }}>
        <div className="uppercase tracking-[0.14em]" style={{ fontSize: 8, color: "#c7ff3d" }}>Zest balance</div>
        <div className="font-display font-semibold leading-none mt-1" style={{ fontSize: 30 }}>1,840</div>
        <div className="text-white/65 mt-1" style={{ fontSize: 9 }}>160 to <b className="text-white/90">20% off apparel</b></div>
        <div className="mt-2.5 rounded-full overflow-hidden" style={{ height: 6, background: "rgba(255,255,255,0.09)" }}>
          <div className="h-full rounded-full" style={{ width: "92%", background: "linear-gradient(90deg,#8bc40c,#c7ff3d)" }} />
        </div>
      </div>

      {/* unlock grid */}
      <div className="relative mt-3 font-display font-semibold" style={{ fontSize: 9.5 }}>Unlock</div>
      <div className="relative mt-2 grid grid-cols-2 gap-2">
        {rewards.map((r) => (
          <div key={r.name} className="rounded-2xl p-2" style={card}>
            <div className="rounded-xl flex items-center justify-center" style={{ height: 48, fontSize: 18, ...tile }}>{r.emoji}</div>
            <div className="mt-1.5 font-display font-semibold" style={{ fontSize: 9.5 }}>{r.name}</div>
            <div className="text-white/55" style={{ fontSize: 8 }}>{r.pts}</div>
          </div>
        ))}
      </div>

      <div className="flex-1" />

      {/* bottom nav — full-bleed grey bar + raised START (matches HomeScreen) */}
      <div className="relative">
        <div className="flex items-center justify-between"
          style={{ marginLeft: -16, marginRight: -16, marginBottom: -8, height: 42, paddingLeft: 26, paddingRight: 26, background: "#3d3d3d" }}>
          {/* home */}
          <button className="grid place-items-center" style={{ width: 24, height: 24 }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 3 L20.5 9.5 V20 H3.5 V9.5 Z" />
            </svg>
          </button>
          {/* two overlapping squares */}
          <button className="grid place-items-center" style={{ width: 24, height: 24 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <rect x="8.5" y="3" width="12.5" height="12.5" rx="3.4" />
              <rect x="3" y="8.5" width="12.5" height="12.5" rx="3.4" fill="#3d3d3d" />
            </svg>
          </button>
          <span style={{ width: 24 }} />
          {/* bag */}
          <button className="grid place-items-center" style={{ width: 24, height: 24 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#8d8d8d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M6 8.5 H18 L17 20.5 H7 Z" />
              <path d="M9 9 V6.5 a3 3 0 0 1 6 0 V9" />
            </svg>
          </button>
          {/* rewards (active) — trophy */}
          <button className="grid place-items-center" style={{ width: 24, height: 24 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#c7ff3d" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
              <path d="M8 4h8v3a4 4 0 1 1-8 0V4zM5 5h3v2H6a2 2 0 0 1-1-2zM16 7V5h3a2 2 0 0 1-1 2h-2zM9 13h6v3H9zM7 20h10" />
            </svg>
          </button>
        </div>
        {/* raised START button */}
        <button className="absolute left-1/2 -translate-x-1/2 grid place-items-center rounded-full font-display font-bold italic"
          style={{ width: 52, height: 52, bottom: 7, fontSize: 10, letterSpacing: "0.01em", color: "#0c2407",
                   background: "linear-gradient(180deg, #80ff31 0%, #29f458 100%)",
                   boxShadow: "0 5px 16px -3px rgba(60,225,75,0.55)" }}>
          START
        </button>
      </div>
    </div>
  );
}

/* =====================================================================
   SCREEN — TRACK (GPS map · Zest_01)
   ===================================================================== */
function TrackScreen() {
  const pill = { padding: "5px 12px", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.08)" };
  const halo = "0 0 3px #fff, 0 0 3px #fff";
  const pois = [
    { top: "11%", left: "8%",  bg: "#1a73e8", label: "GBK Arena",            tc: "#3c4043" },
    { top: "23%", left: "25%", bg: "#1a73e8", label: "Gelora Bung Karno",    tc: "#3c4043" },
    { top: "36%", left: "52%", bg: "#ea4335", label: "MRCCC Siloam Hosp.",   tc: "#c5221f", letter: "H" },
    { top: "47%", left: "17%", bg: "#1a73e8", label: "fX Sudirman",          tc: "#3c4043" },
    { top: "44%", left: "50%", bg: "#1a73e8", label: "Pacific Place",        tc: "#3c4043" },
    { top: "56%", left: "8%",  bg: "#1a73e8", label: "Senayan City",         tc: "#3c4043" },
    { top: "63%", left: "63%", bg: "#9334e6", label: "Hollywood",            tc: "#9334e6" },
    { top: "73%", left: "30%", bg: "#9334e6", label: "Satriamandala Museum", tc: "#9334e6" },
    { top: "85%", left: "16%", bg: "#d96b1f", label: "Al-Azhar Mosque",      tc: "#3c4043" },
  ];
  return (
    <div className="relative flex flex-col h-full">
      {/* dark-grey screen background — matches Zest_01 (#292929) */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#292929" }} />
      {/* header */}
      <div className="relative mt-3 flex items-center justify-between">
        <button className="text-white/70"><Icon name="chevL" size={16}/></button>
        <div className="flex items-center gap-1.5">
          <span className="inline-block rounded-full" style={{width:7,height:7,background:"#33e35c",boxShadow:"0 0 6px #33e35c"}}/>
          <span className="text-[12px] font-display font-semibold">Running</span>
        </div>
        <span className="w-4"/>
      </div>

      {/* metric pills */}
      <div className="relative mt-3 flex items-center justify-center gap-2">
        <div className="flex items-center gap-1.5 rounded-full" style={pill}>
          <span className="grid place-items-center rounded-full" style={{width:15,height:15,background:"rgba(199,255,61,0.16)"}}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#c7ff3d" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/>
            </svg>
          </span>
          <span className="text-[12px] font-display font-semibold">2.5</span>
        </div>
        <div className="flex items-center gap-1.5 rounded-full" style={pill}>
          <Icon name="bolt" size={11} color="#c7ff3d" fill="#c7ff3d"/>
          <span className="text-[11.5px] font-display font-semibold">2/10</span>
          <span className="text-[10.5px] text-white/45">6:00</span>
        </div>
      </div>

      {/* map — Google-Maps style (Sudirman / GBK, Jakarta) */}
      <div className="mt-3 relative rounded-xl overflow-hidden flex-1" style={{border:"1px solid rgba(255,255,255,0.08)"}}>
        <svg viewBox="0 0 240 340" className="absolute inset-0 w-full h-full" preserveAspectRatio="xMidYMid slice">
          {/* land */}
          <rect width="240" height="340" fill="#ebe8e1"/>
          {/* parks / green space */}
          <path d="M-30 -30 H138 C150 22 136 64 92 84 C48 102 0 92 -30 60 Z" fill="#c6e4a6"/>
          <circle cx="214" cy="38" r="22" fill="#cfe7b2"/>
          <rect x="14" y="252" width="40" height="36" rx="9" fill="#cfe7b2"/>
          <circle cx="208" cy="308" r="23" fill="#cfe7b2"/>
          {/* canal */}
          <path d="M-10 210 C 70 202 140 224 250 214" stroke="#a7d0e6" strokeWidth="4.5" fill="none"/>
          {/* building blocks */}
          <g fill="#e3e0d5">
            {[
              [120,98,26,20],[150,94,22,26],[148,124,26,18],[176,98,24,30],[122,126,22,18],[152,148,28,20],[184,132,26,24],[118,152,22,18],[184,164,24,18],
              [148,26,30,22],[184,22,28,28],[150,56,26,20],[186,58,30,22],
              [86,242,28,22],[120,246,26,20],[152,240,30,24],[186,246,26,20],[214,244,22,22],[96,278,26,20],[132,282,28,22],[168,278,26,20],[200,282,22,20],
              [12,130,28,20],[12,158,24,22],[44,150,22,18],[44,176,24,20],
              [70,300,24,20],[108,306,26,18],
            ].map(([x,y,w,h],i)=><rect key={i} x={x} y={y} width={w} height={h} rx="2.5"/>)}
          </g>
          {/* road casings */}
          <g fill="none" strokeLinecap="round" stroke="#d7d3c5">
            <path d="M-10 56 Q 90 40 250 64" strokeWidth="9"/>
            <path d="M-10 122 Q 100 106 250 128" strokeWidth="9"/>
            <path d="M-10 200 Q 100 186 250 208" strokeWidth="8.5"/>
            <path d="M-10 276 Q 110 258 250 282" strokeWidth="8"/>
            <path d="M50 -10 Q 40 165 70 350" strokeWidth="8"/>
            <path d="M206 -10 Q 196 165 214 350" strokeWidth="7"/>
          </g>
          <path d="M150 -10 C 130 100 168 214 116 350" stroke="#ecd082" strokeWidth="15" fill="none" strokeLinecap="round"/>
          {/* road fills */}
          <g fill="none" strokeLinecap="round" stroke="#ffffff">
            <path d="M-10 56 Q 90 40 250 64" strokeWidth="5.5"/>
            <path d="M-10 122 Q 100 106 250 128" strokeWidth="5.5"/>
            <path d="M-10 200 Q 100 186 250 208" strokeWidth="5"/>
            <path d="M-10 276 Q 110 258 250 282" strokeWidth="5"/>
            <path d="M50 -10 Q 40 165 70 350" strokeWidth="5"/>
            <path d="M206 -10 Q 196 165 214 350" strokeWidth="4.5"/>
          </g>
          <path d="M150 -10 C 130 100 168 214 116 350" stroke="#fdf2c2" strokeWidth="10" fill="none" strokeLinecap="round"/>
          {/* minor streets */}
          <g fill="none" strokeLinecap="round" stroke="#ffffff" strokeWidth="2.4">
            <path d="M50 88 L150 98"/><path d="M66 158 L206 170"/>
            <path d="M86 240 L214 252"/><path d="M108 30 L118 198"/>
            <path d="M172 60 L182 276"/><path d="M28 128 L56 264"/>
            <path d="M150 122 L200 198"/><path d="M22 56 L48 120"/>
            <path d="M72 278 L84 340"/><path d="M118 250 L158 322"/>
          </g>
          {/* current-location dot */}
          <circle cx="116" cy="188" r="16" fill="#1a73e8" opacity="0.15"/>
          <circle cx="116" cy="188" r="5" fill="#1a73e8" stroke="#fff" strokeWidth="2"/>
        </svg>

        {/* highway shield */}
        <div className="absolute grid place-items-center font-display"
          style={{top:"4%",left:"62%",width:11,height:11,borderRadius:3,background:"#fff",border:"1px solid #c2c2c2",fontSize:7,fontWeight:700,color:"#3c4043"}}>2</div>

        {/* district label */}
        <div className="absolute font-display" style={{top:"52%",left:"41%",fontSize:6,fontWeight:700,color:"#80868b",letterSpacing:"0.05em",lineHeight:1.3,textShadow:halo}}>
          SUDIRMAN<br/>CENTRAL<br/>BUSINESS<br/>DISTRICT
        </div>

        {/* POI markers + labels */}
        {pois.map((p,i)=>(
          <div key={i} className="absolute flex items-center gap-1" style={{top:p.top,left:p.left}}>
            <span className="grid place-items-center rounded-full shrink-0 font-display font-bold"
              style={{width:13,height:13,fontSize:7,color:"#fff",background:p.bg,boxShadow:"0 1px 2px rgba(0,0,0,0.35)"}}>
              {p.letter || <span style={{width:4,height:4,borderRadius:"50%",background:"#fff"}}/>}
            </span>
            <span className="whitespace-nowrap" style={{fontSize:6.8,fontWeight:600,color:p.tc,textShadow:halo}}>{p.label}</span>
          </div>
        ))}

        {/* google watermark */}
        <div className="absolute font-display" style={{bottom:3,left:6,fontSize:9,fontWeight:500,textShadow:halo}}>
          <span style={{color:"#4285F4"}}>G</span><span style={{color:"#EA4335"}}>o</span><span style={{color:"#FBBC05"}}>o</span><span style={{color:"#4285F4"}}>g</span><span style={{color:"#34A853"}}>l</span><span style={{color:"#EA4335"}}>e</span>
        </div>
        <div className="absolute" style={{bottom:3.5,right:6,fontSize:5.3,color:"#5f6368",textShadow:halo}}>Map data ©2025</div>
      </div>

      {/* swipe-to-start control */}
      <div className="relative mt-3 rounded-full"
        style={{height:44, background:"rgba(255,255,255,0.035)", border:"1px solid rgba(255,255,255,0.1)"}}>
        <span className="absolute inset-0 grid place-items-center font-display whitespace-nowrap"
          style={{fontSize:11.5, paddingLeft:54, color:"rgba(255,255,255,0.42)"}}>Start Your Zest+!</span>
        <button className="absolute grid place-items-center rounded-full"
          style={{left:3, top:3, bottom:3, width:58,
                   background:"linear-gradient(180deg,#80ff31,#29f458)",
                   boxShadow:"0 3px 11px -2px rgba(60,225,75,0.55)"}}>
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0c2407" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 6l6 6-6 6M12 6l6 6-6 6"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

/* =====================================================================
   SCREEN — SWEAT (running stats · Zest_02)
   ===================================================================== */
function SweatScreen() {
  const pill = { padding: "5px 12px", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.08)" };
  return (
    <div className="relative flex flex-col h-full">
      {/* dark-grey screen background with subtle swirl — matches record.png */}
      <div className="absolute overflow-hidden" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#292929" }}>
        <svg viewBox="0 0 240 540" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 w-full h-full" style={{ filter: "blur(5px)" }}>
          <path d="M-70 120 C 120 180 20 320 250 280" stroke="#2f2f2f" strokeWidth="96" fill="none" strokeLinecap="round"/>
          <path d="M-50 380 C 140 330 110 540 320 470" stroke="#2e2e2e" strokeWidth="80" fill="none" strokeLinecap="round"/>
        </svg>
      </div>

      {/* header */}
      <div className="relative mt-3 flex items-center justify-between">
        <button className="text-white/70"><Icon name="chevL" size={16}/></button>
        <div className="flex items-center gap-1.5">
          <span className="inline-block rounded-full" style={{width:7,height:7,background:"#33e35c",boxShadow:"0 0 6px #33e35c"}}/>
          <span className="text-[12px] font-display font-semibold">Running</span>
        </div>
        <span className="w-4"/>
      </div>

      {/* metric pills */}
      <div className="relative mt-4 flex items-center justify-center gap-2">
        <div className="flex items-center gap-1.5 rounded-full" style={pill}>
          <span className="grid place-items-center rounded-full" style={{width:15,height:15,background:"rgba(199,255,61,0.16)"}}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#c7ff3d" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/>
            </svg>
          </span>
          <span className="text-[12px] font-display font-semibold">2.5</span>
        </div>
        <div className="flex items-center gap-1.5 rounded-full" style={pill}>
          <Icon name="bolt" size={11} color="#c7ff3d" fill="#c7ff3d"/>
          <span className="text-[11.5px] font-display font-semibold">2/10</span>
          <span className="text-[10.5px] text-white/45">6:00</span>
        </div>
      </div>

      {/* two stats */}
      <div className="relative mt-7 flex items-start justify-center gap-12">
        <div className="flex flex-col items-center gap-1.5">
          <svg width="25" height="25" viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="12" r="10.5" fill="#33e35c"/>
            <path d="M12 6 V12 L16.4 14.6" fill="none" stroke="#292929" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="font-display font-semibold text-[14px]">10:25</span>
        </div>
        <div className="flex flex-col items-center gap-1.5">
          <svg width="25" height="25" viewBox="0 0 24 24" fill="#33e35c" aria-hidden="true">
            <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 13 16.8 14 19 14v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/>
          </svg>
          <span className="font-display font-semibold text-[14px]">1,5 <span className="text-white/55 text-[10px]">km</span></span>
        </div>
      </div>

      <div className="flex-1"/>

      {/* pace */}
      <div className="relative flex flex-col items-center">
        <div className="flex items-center gap-1.5" style={{ color: "rgba(255,255,255,0.5)" }}>
          <svg width="17" height="13" viewBox="0 0 28 22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <path d="M3.5 16.5 C 3.5 13.5 6 13 9 12.8 L 14 8 C 15.2 7 17 7.5 17.6 9.2 L 19.4 13 C 22.5 13.6 24.5 14.6 25.5 16.6 C 25.9 17.4 25.4 18 24.4 18 L 5.5 18 C 4.2 18 3.5 17.5 3.5 16.5 Z"/>
            <path d="M0 12.5 H4"/><path d="M0 16 H3"/>
          </svg>
          <span className="text-[12px] font-display font-medium">Pace</span>
        </div>
        <div className="font-display font-bold leading-none mt-1.5 tracking-tight" style={{ fontSize: 62, color: "#f3f3f3" }}>6:57</div>
        <div className="font-display font-bold mt-2.5" style={{ fontSize: 17, color: "#c7ff3d" }}>+0.80</div>
      </div>

      <div className="flex-1" style={{ flexGrow: 1.7 }}/>

      {/* bottom control bar */}
      <div className="relative rounded-3xl flex items-center justify-between px-6"
        style={{ height: 56, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)" }}>
        <button className="grid place-items-center rounded-full"
          style={{ width: 38, height: 38, background: "transparent", border: "1.5px solid rgba(255,255,255,0.22)" }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="rgba(255,255,255,0.6)" stroke="rgba(255,255,255,0.6)" strokeWidth="1.4" strokeLinejoin="round">
            <path d="M3 11 L21 4 L14 21 L11.5 13 Z"/>
          </svg>
        </button>
        <span style={{ width: 54 }}/>
        <button className="grid place-items-center rounded-full"
          style={{ width: 38, height: 38, background: "transparent", border: "1.5px solid rgba(255,255,255,0.22)" }}>
          <span style={{ width: 11, height: 11, borderRadius: 2.5, background: "rgba(255,255,255,0.6)" }}/>
        </button>
        {/* big green pause button */}
        <button className="absolute grid place-items-center rounded-full"
          style={{ left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 54, height: 54,
                   background: "radial-gradient(circle at 38% 32%, #8dff44, #1fd84e 78%)",
                   boxShadow: "0 0 22px -4px rgba(60,225,75,0.7)" }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#0c2407">
            <rect x="7" y="5" width="4" height="14" rx="1.4"/><rect x="13" y="5" width="4" height="14" rx="1.4"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

/* Zest brand mark */
function ZestMark({ size = 14 }) {
  return (
    <img src="images/ic_launcher.png" width={size} height={size} alt="" aria-hidden="true"
      style={{ borderRadius: Math.round(size * 0.26), display: "block" }} />
  );
}

/* =====================================================================
   SCREEN — SHARE (run share card · share.png)
   ===================================================================== */
function ShareScreen() {
  const ICN = "#33e35c";
  const stats = [
    { v: "3,00 km", el: <Icon name="pin" size={15} color={ICN} stroke={2}/> },
    { v: "07:15",   el: (
      <svg width="15" height="15" viewBox="0 0 24 24" fill={ICN} aria-hidden="true">
        <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 13 16.8 14 19 14v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/>
      </svg>
    )},
    { v: "21:45",   el: (
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={ICN} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="12" cy="13.5" r="7.5"/><path d="M12 13.5V9"/><path d="M9.5 2.5h5"/><path d="M12 2.5v2.5"/><path d="M18.8 7.2 17.3 8.7"/>
      </svg>
    )},
    { v: "2.5",     el: (
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={ICN} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/>
      </svg>
    )},
  ];
  return (
    <div className="relative flex flex-col h-full">
      {/* screen background — bold Zest swirl (clean filled shapes) */}
      <div className="absolute overflow-hidden" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#0f0f0f" }}>
        <svg viewBox="0 0 286 626" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 w-full h-full">
          <defs>
            <linearGradient id="zswirl" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#aef11f"/>
              <stop offset="52%" stopColor="#54d439"/>
              <stop offset="100%" stopColor="#1fb958"/>
            </linearGradient>
          </defs>
          {/* green field */}
          <rect width="286" height="626" fill="url(#zswirl)"/>
          {/* dark band carving the Z-swirl — one smooth shape */}
          <path d="M -46 196 C 96 166 200 72 366 26 L 366 484 C 206 552 96 488 -46 602 Z" fill="#101010"/>
        </svg>
      </div>

      <div className="flex-1" />

      {/* share card */}
      <div className="relative rounded-2xl p-3"
        style={{ background: "linear-gradient(180deg,#2d2d2d,#212121)", border: "1px solid rgba(199,255,61,0.22)" }}>
        {/* logo */}
        <div className="flex items-center justify-end gap-1.5">
          <ZestMark size={15}/>
          <span className="font-display font-bold text-[11px] tracking-wide">ZEST<span style={{color:"#A2FF00"}}>+</span></span>
        </div>

        {/* map with GPS route */}
        <div className="mt-2 relative rounded-lg overflow-hidden" style={{ height: 116, border: "1px solid rgba(0,0,0,0.22)" }}>
          <svg viewBox="0 0 240 130" preserveAspectRatio="xMidYMid slice" className="absolute inset-0 w-full h-full">
            <rect width="240" height="130" fill="#ebe8e1"/>
            <path d="M-20 -20 H112 C122 30 92 60 42 64 C0 66 -20 50 -20 -20 Z" fill="#c6e4a6"/>
            <circle cx="212" cy="18" r="26" fill="#cfe7b2"/>
            <rect x="172" y="96" width="64" height="50" rx="10" fill="#cfe7b2"/>
            <g fill="none" strokeLinecap="round" stroke="#d7d3c5">
              <path d="M-10 44 Q 110 30 250 50" strokeWidth="8"/>
              <path d="M-10 98 Q 110 86 250 104" strokeWidth="7"/>
              <path d="M70 -10 Q 60 70 86 140" strokeWidth="7"/>
              <path d="M172 -10 Q 164 70 184 140" strokeWidth="6"/>
            </g>
            <path d="M122 -10 C 110 50 142 90 112 140" stroke="#ecd082" strokeWidth="12" fill="none" strokeLinecap="round"/>
            <g fill="none" strokeLinecap="round" stroke="#ffffff">
              <path d="M-10 44 Q 110 30 250 50" strokeWidth="5"/>
              <path d="M-10 98 Q 110 86 250 104" strokeWidth="4.5"/>
              <path d="M70 -10 Q 60 70 86 140" strokeWidth="4.5"/>
              <path d="M172 -10 Q 164 70 184 140" strokeWidth="4"/>
            </g>
            <path d="M122 -10 C 110 50 142 90 112 140" stroke="#fdf2c2" strokeWidth="8" fill="none" strokeLinecap="round"/>
            <g fill="none" strokeLinecap="round" stroke="#ffffff" strokeWidth="2">
              <path d="M30 60 L118 70"/><path d="M126 38 L182 112"/><path d="M40 102 L150 118"/>
            </g>
            {/* run route */}
            <path d="M52 100 C 38 70 58 44 100 42 C 146 40 190 58 186 88 C 183 112 122 116 88 105 C 64 98 60 106 52 100 Z"
              stroke="#ffffff" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M52 100 C 38 70 58 44 100 42 C 146 40 190 58 186 88 C 183 112 122 116 88 105 C 64 98 60 106 52 100 Z"
              stroke="#2fce3c" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <circle cx="52" cy="100" r="5" fill="#2fce3c" stroke="#fff" strokeWidth="2"/>
            <circle cx="100" cy="42" r="4.5" fill="#fff" stroke="#2fce3c" strokeWidth="2.5"/>
          </svg>
          {[
            { t: "6%",  l: "30%", c: "#3c4043", label: "Main Stadium" },
            { t: "30%", l: "60%", c: "#c5221f", label: "MRCCC Siloam" },
            { t: "44%", l: "5%",  c: "#3c4043", label: "fX Sudirman" },
            { t: "58%", l: "40%", c: "#80868b", label: "SUDIRMAN CBD" },
            { t: "74%", l: "12%", c: "#3c4043", label: "Senayan" },
          ].map((p,i)=>(
            <span key={i} className="absolute whitespace-nowrap font-display"
              style={{ top: p.t, left: p.l, fontSize: 5.6, fontWeight: 600, color: p.c, textShadow: "0 0 2px #fff,0 0 2px #fff" }}>{p.label}</span>
          ))}
        </div>

        {/* title */}
        <div className="mt-2.5 text-center">
          <div className="font-display font-semibold text-[13px]" style={{ color: "#c7ff3d" }}>Lari Walau Hujan :(</div>
          <div className="text-[9px] mt-0.5" style={{ color: "rgba(255,255,255,0.5)" }}>Jakarta, Indonesia</div>
        </div>

        {/* stats */}
        <div className="mt-2.5 flex items-start justify-between px-2">
          {stats.map((s,i)=>(
            <div key={i} className="flex flex-col items-center gap-1">
              {s.el}
              <span className="font-display font-semibold text-[10px]">{s.v}</span>
            </div>
          ))}
        </div>

        {/* download button */}
        <button className="mt-3 w-full rounded-full grid place-items-center font-display font-semibold"
          style={{ height: 26, fontSize: 8.5, color: "#16320a", background: "linear-gradient(90deg,#c7ff3d,#7fd80f)" }}>
          Download ZEST+ — Your Edge Starts Here
        </button>
      </div>

      <div className="flex-1" />
    </div>
  );
}

/* =====================================================================
   SCREEN — CHALLENGE (individual · Zest_04)
   ===================================================================== */
function ChallengeScreen() {
  const card = { background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.06)" };
  return (
    <div className="relative flex flex-col h-full">
      {/* dark screen background */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#292929" }} />

      {/* header */}
      <div className="relative mt-2 flex items-center justify-between">
        <button className="text-white/75"><Icon name="chevL" size={16}/></button>
        <div className="text-[12.5px] font-display font-semibold text-white/85">Challenge Details</div>
        <svg width="15" height="4" viewBox="0 0 15 4" fill="rgba(255,255,255,0.5)" aria-hidden="true">
          <circle cx="2" cy="2" r="2"/><circle cx="7.5" cy="2" r="2"/><circle cx="13" cy="2" r="2"/>
        </svg>
      </div>

      {/* challenge card */}
      <div className="relative mt-3 rounded-2xl p-3" style={card}>
        <span className="inline-flex items-center gap-1 rounded-full" style={{ padding: "3px 8px", background: "rgba(255,255,255,0.1)" }}>
          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="11" width="16" height="10" rx="2.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>
          </svg>
          <span className="text-[8.5px] text-white/85">Individual</span>
        </span>
        <div className="mt-2 font-display font-bold text-[15px]" style={{ color: "#2fe55e" }}>Who's Healthier? :p</div>
        <div className="text-[11px] text-white/85 mt-0.5">First to Finish Challenge</div>
        <div className="mt-2 text-[9.5px] font-display font-semibold" style={{ color: "#c7ff3d" }}>Challenge Overview</div>
        <div className="mt-2 grid grid-cols-2 gap-2">
          <div className="flex items-center gap-2">
            <Icon name="target" size={15} color="#33e35c"/>
            <div className="leading-tight">
              <div className="text-[8.5px] text-white/50">Target</div>
              <div className="font-display font-bold text-[11px]">50.000</div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Icon name="calendar" size={15} color="#33e35c"/>
            <div className="leading-tight">
              <div className="text-[8.5px] text-white/50">Start Date</div>
              <div className="font-display font-bold text-[11px]">30 June 2026</div>
            </div>
          </div>
        </div>
      </div>

      {/* participants */}
      <div className="relative mt-3 text-[10.5px] text-white/55">Participants</div>
      <div className="relative mt-1.5">
        <AvatarStack names={["Lena S","Temon T","Harianto R","Wira P","Sari M"]} size={26} max={3} overlap={9} extra={2}/>
      </div>
      <div className="relative mt-1.5 text-[9.5px] text-white/75">Lena, Temon, Harianto and 2 others joined</div>

      {/* invited */}
      <div className="relative mt-3 text-[10.5px] text-white/55">Invited</div>
      <div className="relative mt-1.5 flex items-center justify-between">
        <AvatarStack names={["Andi P","Maya P","Rico T","Aisyah K","Danny F","Linda S","Hana W","Jaya R","Bambang"]} size={26} max={3} overlap={9} extra={9}/>
        <button className="grid place-items-center rounded-lg" style={{ width: 26, height: 26, background: "transparent", border: "1.5px solid #c7ff3d" }}>
          <Icon name="plus" size={13} color="#c7ff3d"/>
        </button>
      </div>

      {/* rewards */}
      <div className="relative mt-3 text-[10.5px] text-white/55">Rewards</div>
      <div className="relative mt-1.5 rounded-2xl overflow-hidden" style={{ ...card, height: 94 }}>
        <svg viewBox="0 0 150 100" className="absolute" style={{ right: 6, bottom: 0, width: 146, height: 96 }} aria-hidden="true">
          {/* sparkle */}
          <path d="M36 12 L39.5 23.5 L51 27 L39.5 30.5 L36 42 L32.5 30.5 L21 27 L32.5 23.5 Z" fill="#a6e823"/>
          {/* white gift box (left) */}
          <rect x="22" y="64" width="33" height="32" rx="3" fill="#ededed"/>
          <rect x="33.5" y="64" width="10" height="32" fill="#d6d6d6"/>
          <path d="M38.5 64 C 28 62 25 51 37 50 C 44 50 43 60 38.5 64 Z" fill="#ededed"/>
          <path d="M38.5 64 C 49 62 52 51 40 50 C 33 50 34 60 38.5 64 Z" fill="#ededed"/>
          {/* white gift box (right) */}
          <rect x="105" y="68" width="30" height="28" rx="3" fill="#ededed"/>
          <rect x="115.5" y="68" width="9" height="28" fill="#d6d6d6"/>
          <path d="M120 68 C 111 66 108 56 119 55 C 125 55 124 64 120 68 Z" fill="#ededed"/>
          <path d="M120 68 C 129 66 132 56 121 55 C 115 55 116 64 120 68 Z" fill="#ededed"/>
          {/* main green gift box */}
          <rect x="54" y="50" width="58" height="46" rx="3" fill="#9fe024"/>
          <rect x="48" y="36" width="70" height="16" rx="3" fill="#b3ec40"/>
          <rect x="75" y="50" width="16" height="46" fill="#1f9d76"/>
          <rect x="75" y="36" width="16" height="16" fill="#24ad83"/>
          <path d="M83 36 C 63 31 59 11 80 11 C 92 11 91 30 83 36 Z" fill="#24ad83"/>
          <path d="M83 36 C 103 31 107 11 86 11 C 74 11 75 30 83 36 Z" fill="#24ad83"/>
          <circle cx="83" cy="34" r="6.5" fill="#1b8c66"/>
          {/* little badge bubble */}
          <circle cx="132" cy="44" r="9" fill="#1f9d6a"/>
          <path d="M132 39.5 l1.4 3 3.2 .4 -2.4 2.2 .7 3.2 -2.9-1.6 -2.9 1.6 .7-3.2 -2.4-2.2 3.2-.4 Z" fill="#bff56a"/>
        </svg>
      </div>

      <div className="flex-1" />

      {/* finisher note + share */}
      <div className="relative text-[9px] text-white/55 text-center leading-snug px-3">
        As a finisher you will earn a digital finisher's badge for your Trophy Case.
      </div>
      <button className="relative mt-2.5 rounded-full py-2 font-display font-semibold text-[12px]"
        style={{ background: "transparent", color: "#2fe55e", border: "1.5px solid rgba(199,255,61,0.5)" }}>
        Share
      </button>
    </div>
  );
}

/* =====================================================================
   SCREEN — TEAM CHALLENGE (Zest_05)
   ===================================================================== */
function TeamChallengeScreen() {
  const card = { background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.06)" };
  const SwapIcon = (
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#2fe55e" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 9 H19 M15.5 5.5 L19 9 L15.5 12.5"/>
      <path d="M20 15 H5 M8.5 11.5 L5 15 L8.5 18.5"/>
    </svg>
  );
  return (
    <div className="relative flex flex-col h-full">
      {/* dark screen background */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#292929" }} />

      {/* header */}
      <div className="relative mt-2 flex items-center justify-between">
        <button className="text-white/75"><Icon name="chevL" size={16}/></button>
        <div className="text-[12.5px] font-display font-semibold text-white/85">Challenge Details</div>
        <svg width="15" height="4" viewBox="0 0 15 4" fill="rgba(255,255,255,0.5)" aria-hidden="true">
          <circle cx="2" cy="2" r="2"/><circle cx="7.5" cy="2" r="2"/><circle cx="13" cy="2" r="2"/>
        </svg>
      </div>

      {/* challenge card */}
      <div className="relative mt-3 rounded-2xl p-3" style={card}>
        <span className="inline-flex items-center gap-1 rounded-full" style={{ padding: "3px 8px", background: "rgba(255,255,255,0.1)" }}>
          <Icon name="users" size={9} color="#fff"/>
          <span className="text-[8.5px] text-white/85">Team</span>
        </span>
        <div className="mt-2 font-display font-bold text-[15px]" style={{ color: "#2fe55e" }}>Yang Kalah Bayarin Kopi</div>
        <div className="text-[11px] text-white/85 mt-0.5">Timed Challenge</div>
        <div className="mt-2 text-[9.5px] font-display font-semibold" style={{ color: "#c7ff3d" }}>Challenge Overview</div>
        <div className="mt-2 grid grid-cols-2 gap-2">
          <div className="flex items-center gap-2">
            <Icon name="calendar" size={15} color="#33e35c"/>
            <div className="leading-tight">
              <div className="text-[8.5px] text-white/50">Start Date</div>
              <div className="font-display font-bold text-[11px]">01 May 2026</div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Icon name="calendar" size={15} color="#33e35c"/>
            <div className="leading-tight">
              <div className="text-[8.5px] text-white/50">End Date</div>
              <div className="font-display font-bold text-[11px]">31 May 2026</div>
            </div>
          </div>
        </div>
      </div>

      {/* leaderboard */}
      <div className="relative mt-3 text-[10.5px] text-white/55">Leaderboard</div>
      <div className="relative mt-1.5 rounded-2xl p-2.5" style={card}>
        <div className="text-[11px] font-display font-semibold">Tim Content</div>
        <div className="mt-1.5 flex items-center gap-2">
          <div className="flex flex-col items-center justify-center gap-1 rounded-lg" style={{ width: 46, height: 46, background: "rgba(255,255,255,0.06)" }}>
            <Avatar name="Andi P" size={22}/>
            <span className="text-[7.5px] text-white/55">You</span>
          </div>
          <button className="grid place-items-center rounded-lg" style={{ width: 46, height: 46, background: "transparent", border: "1.5px solid #2fe55e" }}>
            {SwapIcon}
          </button>
        </div>
      </div>
      <div className="relative mt-2 rounded-2xl p-2.5" style={card}>
        <div className="text-[11px] font-display font-semibold">Tim Product</div>
        <div className="mt-1.5">
          <button className="grid place-items-center rounded-lg" style={{ width: 46, height: 46, background: "transparent", border: "1.5px solid #2fe55e" }}>
            {SwapIcon}
          </button>
        </div>
      </div>

      {/* invited */}
      <div className="relative mt-3 text-[10.5px] text-white/55">Invited</div>
      <div className="relative mt-1.5 flex items-center justify-between">
        <AvatarStack names={["Maya P","Rico T","Aisyah K","Danny F","Linda S","Hana W","Jaya R","Wira P","Sari M"]} size={26} max={3} overlap={9} extra={99}/>
        <button className="grid place-items-center rounded-lg" style={{ width: 26, height: 26, background: "transparent", border: "1.5px solid #c7ff3d" }}>
          <Icon name="plus" size={13} color="#c7ff3d"/>
        </button>
      </div>

      {/* rewards */}
      <div className="relative mt-2.5 text-[10.5px] text-white/55">Rewards</div>
      <div className="relative mt-1.5 rounded-2xl overflow-hidden" style={{ ...card, height: 80 }}>
        <svg viewBox="0 0 150 100" className="absolute" style={{ right: 6, bottom: -6, width: 130, height: 88 }} aria-hidden="true">
          <path d="M36 12 L39.5 23.5 L51 27 L39.5 30.5 L36 42 L32.5 30.5 L21 27 L32.5 23.5 Z" fill="#a6e823"/>
          <rect x="22" y="64" width="33" height="32" rx="3" fill="#ededed"/>
          <rect x="33.5" y="64" width="10" height="32" fill="#d6d6d6"/>
          <path d="M38.5 64 C 28 62 25 51 37 50 C 44 50 43 60 38.5 64 Z" fill="#ededed"/>
          <path d="M38.5 64 C 49 62 52 51 40 50 C 33 50 34 60 38.5 64 Z" fill="#ededed"/>
          <rect x="105" y="68" width="30" height="28" rx="3" fill="#ededed"/>
          <rect x="115.5" y="68" width="9" height="28" fill="#d6d6d6"/>
          <path d="M120 68 C 111 66 108 56 119 55 C 125 55 124 64 120 68 Z" fill="#ededed"/>
          <path d="M120 68 C 129 66 132 56 121 55 C 115 55 116 64 120 68 Z" fill="#ededed"/>
          <rect x="54" y="50" width="58" height="46" rx="3" fill="#9fe024"/>
          <rect x="48" y="36" width="70" height="16" rx="3" fill="#b3ec40"/>
          <rect x="75" y="50" width="16" height="46" fill="#1f9d76"/>
          <rect x="75" y="36" width="16" height="16" fill="#24ad83"/>
          <path d="M83 36 C 63 31 59 11 80 11 C 92 11 91 30 83 36 Z" fill="#24ad83"/>
          <path d="M83 36 C 103 31 107 11 86 11 C 74 11 75 30 83 36 Z" fill="#24ad83"/>
          <circle cx="83" cy="34" r="6.5" fill="#1b8c66"/>
        </svg>
      </div>

      <div className="flex-1"/>
    </div>
  );
}

/* =====================================================================
   SCREEN — MOTIVATED LEADERBOARD (Top Walkers · Zest_06)
   ===================================================================== */
/* podium spot for the leaderboard top-3 */
function PodiumSpot({ name, av, rank, pts, size, first = false }) {
  return (
    <div className="flex flex-col items-center">
      <div className="relative" style={{ marginBottom: 10 }}>
        <div className="rounded-full" style={{ padding: 2.5, background: "#2fe55e", boxShadow: "0 0 9px rgba(47,229,94,0.5)" }}>
          <Avatar name={av} size={size}/>
        </div>
        <span className="absolute left-1/2 -translate-x-1/2 grid place-items-center rounded-full font-display font-bold"
          style={{ bottom: -7, width: first ? 22 : 18, height: first ? 22 : 18, fontSize: first ? 11 : 9,
                   background: "#2fe55e", color: "#0a1a05", border: "2.5px solid #292929" }}>{rank}</span>
      </div>
      <div className="font-display font-semibold text-center leading-tight" style={{ fontSize: first ? 12 : 11 }}>{name}</div>
      <div className="font-display mt-0.5" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.5)" }}>{pts}</div>
    </div>
  );
}

function MotivatedLeaderboardScreen() {
  const rows = [
    { rank: "4th",  name: "Tanto",        av: "Tanto S",  pts: "445.330" },
    { rank: "5th",  name: "Dini",         av: "Dini A",   pts: "443.285" },
    { rank: "6th",  name: "Hestyy",       av: "Hestyy R", pts: "421.048" },
    { rank: "7th",  name: "Harun 5",      av: "Harun L",  pts: "411.779" },
    { rank: "8th",  name: "Logueend",     av: "Logu E",   pts: "401.532" },
    { rank: "9th",  name: "Tulung",       av: "Tulung M", pts: "398.784" },
    { rank: "10th", name: "Ayu Put",      av: "Ayu P",    pts: "375.331" },
    { rank: "11th", name: "Calvin J",     av: "Calvin J", pts: "342.101" },
    { rank: "12th", name: "Mba Kantoran", av: "Mba K",    pts: "322.869" },
    { rank: "13th", name: "Tri",          av: "Tri W",    pts: "320.113" },
    { rank: "14th", name: "Nonita S",     av: "Nonita S", pts: "316.552" },
  ];
  return (
    <div className="relative flex flex-col h-full">
      {/* dark screen background */}
      <div className="absolute" aria-hidden="true"
        style={{ top: 0, left: -16, right: -16, bottom: -8, background: "#292929" }} />

      {/* header */}
      <div className="relative mt-2 flex items-center gap-2">
        <button className="text-white/75"><Icon name="chevL" size={16}/></button>
        <div className="text-[14px] font-display font-semibold">Leaderboard</div>
      </div>

      {/* tab toggle */}
      <div className="relative mt-3 flex rounded-xl p-0.5" style={{ border: "1.5px solid rgba(47,229,94,0.6)" }}>
        <div className="flex-1 rounded-lg py-1.5 flex items-center justify-center gap-1.5"
          style={{ background: "linear-gradient(180deg,#4bf06a,#1fc94e)" }}>
          <Icon name="trophy" size={12} color="#0a1a05"/>
          <span className="text-[10.5px] font-display font-bold text-[#0a1a05]">Top Walkers</span>
        </div>
        <div className="flex-1 rounded-lg py-1.5 flex items-center justify-center gap-1.5">
          <Icon name="target" size={11} color="#2fe55e"/>
          <span className="text-[10.5px] font-display font-semibold" style={{ color: "#2fe55e" }}>Challenge</span>
        </div>
      </div>

      {/* filters */}
      <div className="relative mt-2.5 flex items-center gap-1.5">
        <span className="rounded-full px-2.5 py-1 text-[9px] font-display font-semibold"
          style={{ color: "#2fe55e", border: "1px solid rgba(47,229,94,0.6)" }}>Global</span>
        <span className="rounded-full px-2.5 py-1 text-[9px] text-white/65" style={{ background: "rgba(255,255,255,0.08)" }}>Country</span>
        <span className="rounded-full px-2.5 py-1 text-[9px] text-white/65" style={{ background: "rgba(255,255,255,0.08)" }}>Provinci</span>
        <div className="ml-auto flex items-center gap-1.5">
          <span className="relative inline-block" style={{ width: 24, height: 13, borderRadius: 999, background: "rgba(255,255,255,0.14)" }}>
            <span className="absolute rounded-full" style={{ width: 10, height: 10, background: "#fff", top: 1.5, left: 1.5 }}/>
          </span>
          <span className="text-[8px] leading-tight text-white/55">Friends<br/>Only</span>
        </div>
      </div>

      {/* podium */}
      <div className="relative mt-3.5 grid grid-cols-3 items-start">
        <PodiumSpot name="Jopang" av="Jopang" rank="2" pts="498.119" size={44}/>
        <PodiumSpot name="Eric Wishnu" av="Eric W" rank="1" pts="581.770" size={56} first/>
        <PodiumSpot name="You" av="You" rank="3" pts="458.823" size={44}/>
      </div>

      {/* ranked list */}
      <div className="relative mt-3 space-y-1.5">
        {rows.map(r=>(
          <div key={r.rank} className="flex items-center gap-2.5">
            <span className="text-[9px] text-white/50 font-display font-semibold" style={{ width: 22 }}>{r.rank}</span>
            <Avatar name={r.av} size={20}/>
            <span className="flex-1 text-[10.5px]">{r.name}</span>
            <span className="font-display font-bold text-[10.5px]" style={{ color: "#c7ff3d" }}>{r.pts}</span>
          </div>
        ))}
      </div>
      <div className="flex-1"/>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
Object.assign(window, {
  PhoneFrame, ActivityRing,
  HomeScreen, ActivityScreen, LeaderboardScreen, MatchesScreen, RewardsScreen,
  TrackScreen, SweatScreen, ShareScreen, ChallengeScreen, TeamChallengeScreen, MotivatedLeaderboardScreen,
  PhoneCard, PhoneChip, PhoneBottomNav,
});