// Runner iPhone app — 4 tabs + drill-in workout detail + live run
const { useState, useEffect, useRef, useMemo } = React;

// ────────────── shared bits ──────────────
function Wallpaper({ variant }) {
  return variant === "pure"
    ? <div className="wallpaper-pure" />
    : <div className="wallpaper-aurora"><div className="orb orb-2" /><div className="orb orb-3" /></div>;
}

function GlassCard({ children, style, className = "", strong = false, radius = 28 }) {
  return (
    <div className={`glass ${strong ? "glass-strong" : ""} ${className}`} style={{ borderRadius: radius, ...style }}>
      {children}
    </div>
  );
}

function Pill({ children, tone = "neutral", style }) {
  const tones = {
    neutral: { bg: "rgba(28,25,23,0.06)", fg: "var(--ink-2)" },
    accent: { bg: "rgba(255,107,53,0.14)", fg: "#C8431A" },
    amber: { bg: "rgba(255,182,39,0.18)", fg: "#A36B00" },
    green: { bg: "rgba(48,209,88,0.16)", fg: "#1A7A36" },
    red: { bg: "rgba(255,59,48,0.14)", fg: "#B0211B" },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "3px 8px", borderRadius: 999, background: t.bg, color: t.fg,
      fontSize: 11, fontWeight: 600, letterSpacing: 0.2, ...style,
    }}>{children}</span>
  );
}

// ────────────── Bottom tab bar (floating liquid glass) ──────────────
function RunnerTabBar({ tab, setTab }) {
  const tabs = [
    { id: "plan", label: "Plan", icon: Ic.Calendar },
    { id: "run", label: "Run", icon: Ic.Run },
    { id: "stats", label: "Stats", icon: Ic.Stats },
    { id: "coach", label: "Coach", icon: Ic.Chat },
  ];
  return (
    <div style={{
      position: "absolute", left: 16, right: 16, bottom: 34,
      zIndex: 30, pointerEvents: "auto",
    }}>
      <GlassCard radius={28} strong style={{
        height: 64, display: "flex", padding: "8px 6px",
        alignItems: "center", justifyContent: "space-around",
      }}>
        {tabs.map(t => {
          const active = t.id === tab;
          return (
            <button key={t.id} onClick={() => setTab(t.id)}
              style={{
                flex: 1, height: "100%", display: "flex", flexDirection: "column",
                alignItems: "center", justifyContent: "center", gap: 3,
                color: active ? "var(--accent)" : "var(--ink-3)",
                position: "relative", zIndex: 1,
              }}>
              {active && (
                <div style={{
                  position: "absolute", inset: "4px 6px", borderRadius: 18,
                  background: "rgba(255,107,53,0.12)",
                  border: "0.5px solid rgba(255,107,53,0.18)",
                }} />
              )}
              <t.icon size={22} color={active ? "var(--accent)" : "var(--ink-3)"} />
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 0.2, position: "relative" }}>{t.label}</span>
            </button>
          );
        })}
      </GlassCard>
    </div>
  );
}

// ────────────── Top app header ──────────────
function RunnerHeader({ title, subtitle, right, onBack, big = true }) {
  return (
    <div style={{ padding: "60px 20px 12px", position: "relative", zIndex: 5 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: big ? 10 : 0 }}>
        {onBack ? (
          <button onClick={onBack} style={{
            width: 36, height: 36, borderRadius: 18, display: "flex",
            alignItems: "center", justifyContent: "center",
            background: "rgba(255,252,245,0.6)", backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
          }}>
            <Ic.ChevronLeft size={20} color="var(--ink)" />
          </button>
        ) : <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>{subtitle}</div>}
        {right}
      </div>
      {big && <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.8, lineHeight: 1.05 }}>{title}</div>}
      {!big && <div style={{ fontSize: 17, fontWeight: 600, textAlign: "center", marginTop: -28 }}>{title}</div>}
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// SCREEN 1: PLAN
// ════════════════════════════════════════════════════════════════════
function PlanScreen({ onOpenWorkout }) {
  const d = RUN_DATA;
  const todayIdx = 3;
  return (
    <div style={{ paddingBottom: 120 }}>
      <RunnerHeader
        subtitle="THURSDAY · MAY 15"
        title="This week"
        right={
          <button style={{
            width: 36, height: 36, borderRadius: 18,
            background: "rgba(255,252,245,0.6)", backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Ic.Bell size={18} color="var(--ink)" />
          </button>
        }
      />

      {/* Week strip */}
      <div style={{ padding: "4px 20px 16px", display: "flex", gap: 6, overflowX: "auto" }}>
        {d.week.map((day, i) => {
          const isToday = i === todayIdx;
          const isPast = i < todayIdx;
          return (
            <div key={i} style={{
              flex: 1, minWidth: 44, padding: "10px 0", borderRadius: 16,
              textAlign: "center", position: "relative",
              background: isToday ? "var(--accent)" : (isPast ? "rgba(255,252,245,0.5)" : "transparent"),
              border: isToday ? "none" : "0.5px solid rgba(28,25,23,0.08)",
              color: isToday ? "#fff" : "var(--ink)",
            }}>
              <div style={{ fontSize: 10, fontWeight: 600, opacity: 0.7, letterSpacing: 0.4 }}>
                {day.day.toUpperCase()}
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2 }}>{day.date.split(" ")[1]}</div>
              <div style={{
                width: 4, height: 4, borderRadius: 2, margin: "4px auto 0",
                background: day.status === "done" ? (isToday ? "rgba(255,255,255,0.7)" : "var(--accent)") :
                  day.type === "Rest" ? "transparent" : (isToday ? "rgba(255,255,255,0.5)" : "rgba(28,25,23,0.2)"),
              }} />
            </div>
          );
        })}
      </div>

      {/* Today's workout — hero card */}
      <div style={{ padding: "0 16px 14px" }}>
        <button onClick={onOpenWorkout} style={{ width: "100%", textAlign: "left" }}>
          <GlassCard radius={28} style={{ padding: 20, overflow: "hidden", position: "relative" }}>
            {/* color accent strip */}
            <div style={{
              position: "absolute", left: 0, top: 0, bottom: 0, width: 4,
              background: "linear-gradient(180deg, var(--accent), var(--accent-2))",
            }} />
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <Pill tone="accent">TODAY · SPEED</Pill>
              <div style={{ display: "flex", alignItems: "center", gap: 4, color: "var(--ink-3)", fontSize: 12 }}>
                <Ic.Clock size={13} /> 4:00 PM
              </div>
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.4, marginTop: 4 }}>{d.todayWorkout.title}</div>
            <div style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 4 }}>{d.todayWorkout.pace}</div>

            <div style={{
              marginTop: 14, padding: 12, borderRadius: 16,
              background: "rgba(255,107,53,0.08)", border: "0.5px solid rgba(255,107,53,0.16)",
              display: "flex", gap: 10, alignItems: "flex-start",
            }}>
              <Ic.Sparkle size={16} color="var(--accent)" />
              <div style={{ flex: 1, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.4 }}>
                <span style={{ color: "var(--accent)", fontWeight: 600 }}>AI · </span>
                {d.todayWorkout.aiInsight}
              </div>
            </div>

            <div style={{ marginTop: 14, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div style={{ display: "flex", gap: 8, alignItems: "center", color: "var(--ink-3)", fontSize: 12 }}>
                <Ic.Pin size={13} /> {d.todayWorkout.location}
              </div>
              <div style={{
                padding: "8px 16px", borderRadius: 999, background: "var(--ink)", color: "#fff",
                fontSize: 13, fontWeight: 600, display: "flex", alignItems: "center", gap: 6,
              }}>
                Open <Ic.Chevron size={14} color="#fff" />
              </div>
            </div>
          </GlassCard>
        </button>
      </div>

      {/* Week summary */}
      <div style={{ padding: "0 16px 14px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <GlassCard radius={20} style={{ padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>VOLUME</div>
          <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4, letterSpacing: -0.3 }} className="tabnum">
            {d.athlete.weekMileage}<span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500 }}> / {d.athlete.weekTarget} mi</span>
          </div>
          <div style={{ marginTop: 8, height: 4, borderRadius: 2, background: "rgba(28,25,23,0.08)", overflow: "hidden" }}>
            <div style={{
              height: "100%", width: `${(d.athlete.weekMileage / d.athlete.weekTarget) * 100}%`,
              background: "linear-gradient(90deg, var(--accent), var(--accent-2))",
            }} />
          </div>
        </GlassCard>
        <GlassCard radius={20} style={{ padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>READINESS</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 4 }}>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.3 }} className="tabnum">{d.athlete.readiness}</div>
            <Pill tone="green" style={{ fontSize: 10 }}>GREEN</Pill>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>HRV +4 days up</div>
        </GlassCard>
      </div>

      {/* Upcoming */}
      <div style={{ padding: "10px 28px 6px", fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>
        UPCOMING
      </div>
      <div style={{ padding: "0 16px" }}>
        <GlassCard radius={22} style={{ overflow: "hidden" }}>
          {d.week.slice(todayIdx + 1).map((day, i, arr) => (
            <div key={i} style={{
              padding: "14px 16px", display: "flex", alignItems: "center", gap: 12,
              borderBottom: i < arr.length - 1 ? "0.5px solid var(--line)" : "none",
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 12, flexShrink: 0,
                background: day.type === "Long" ? "rgba(255,59,48,0.12)" :
                  day.type === "Speed" ? "rgba(255,107,53,0.12)" :
                  day.type === "Rest" ? "rgba(28,25,23,0.06)" : "rgba(255,182,39,0.16)",
                display: "flex", alignItems: "center", justifyContent: "center",
                color: day.type === "Long" ? "var(--accent-3)" :
                  day.type === "Speed" ? "var(--accent)" :
                  day.type === "Rest" ? "var(--ink-3)" : "var(--accent-2)",
                fontSize: 10, fontWeight: 700, letterSpacing: 0.4,
              }}>{day.day.slice(0,2).toUpperCase()}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>{day.title}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{day.planned}</div>
              </div>
              <Ic.Chevron size={14} color="var(--ink-4)" />
            </div>
          ))}
        </GlassCard>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// SCREEN 2: RUN — pre-run + live tracking
// ════════════════════════════════════════════════════════════════════
function RunScreen() {
  const [running, setRunning] = useState(false);
  return running ? <LiveRunView onStop={() => setRunning(false)} /> : <PreRunView onStart={() => setRunning(true)} />;
}

function PreRunView({ onStart }) {
  const w = RUN_DATA.todayWorkout;
  return (
    <div style={{ paddingBottom: 120 }}>
      <RunnerHeader subtitle="READY WHEN YOU ARE" title="Run" />
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={28} style={{ padding: 20 }}>
          <Pill tone="accent">PLANNED FOR TODAY</Pill>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 8 }}>{w.title}</div>
          <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 4 }}>{w.pace}</div>
        </GlassCard>
      </div>

      {/* Big start button */}
      <div style={{ padding: "20px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
        <button onClick={onStart} style={{
          width: 200, height: 200, borderRadius: "50%",
          background: "linear-gradient(145deg, #FF8C5A, #FF5722)",
          color: "#fff", display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", gap: 8,
          boxShadow: "0 20px 50px rgba(255,87,34,0.4), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.1)",
          position: "relative",
        }}>
          <div style={{
            position: "absolute", inset: 12, borderRadius: "50%",
            border: "1px solid rgba(255,255,255,0.3)",
          }} />
          <Ic.Play size={48} color="#fff" />
          <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: 0.5 }}>START</div>
        </button>
        <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6 }}>Auto-pause · Voice coaching on</div>
      </div>

      {/* Quick options */}
      <div style={{ padding: "0 16px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
        {[
          { label: "Free run", icon: Ic.Run },
          { label: "Treadmill", icon: Ic.Bolt },
          { label: "Music", icon: Ic.Wave },
        ].map((opt, i) => (
          <GlassCard key={i} radius={18} style={{ padding: "14px 8px", display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <opt.icon size={20} color="var(--ink-2)" />
            <div style={{ fontSize: 12, fontWeight: 600 }}>{opt.label}</div>
          </GlassCard>
        ))}
      </div>
    </div>
  );
}

function LiveRunView({ onStop }) {
  const l = RUN_DATA.liveRun;
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT(x => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const elapsedSeconds = 23 * 60 + 14 + t;
  const hh = Math.floor(elapsedSeconds / 3600);
  const mm = Math.floor((elapsedSeconds % 3600) / 60);
  const ss = elapsedSeconds % 60;
  const fmt = (n) => String(n).padStart(2, "0");
  const elapsed = `${fmt(hh)}:${fmt(mm)}:${fmt(ss)}`;

  return (
    <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column" }}>
      {/* Pulse background showing active workout */}
      <div style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: "radial-gradient(ellipse at top, rgba(255,107,53,0.25) 0%, transparent 60%)",
      }} />

      <div style={{ padding: "60px 20px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div className="pulse-dot" style={{ width: 8, height: 8, borderRadius: 4, background: "var(--accent-3)" }} />
          <span style={{ fontSize: 11, fontWeight: 700, color: "var(--accent-3)", letterSpacing: 0.6 }}>LIVE</span>
        </div>
        <div style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 600, letterSpacing: 0.4 }}>
          8×400 · INTERVAL {l.currentInterval.num} of {l.currentInterval.of}
        </div>
      </div>

      {/* Big metric — distance */}
      <div style={{ padding: "30px 20px 12px", textAlign: "center" }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.6 }}>DISTANCE · MI</div>
        <div className="tabnum" style={{ fontSize: 84, fontWeight: 700, letterSpacing: -3, lineHeight: 1, marginTop: 4 }}>
          {l.distance.toFixed(2)}
        </div>
      </div>

      {/* Secondary metrics */}
      <div style={{ padding: "0 16px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        <GlassCard radius={20} style={{ padding: "12px 10px", textAlign: "center" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>PACE</div>
          <div className="tabnum" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 2, color: "var(--accent)" }}>{l.pace}</div>
        </GlassCard>
        <GlassCard radius={20} style={{ padding: "12px 10px", textAlign: "center" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>TIME</div>
          <div className="tabnum" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 2 }}>{elapsed.slice(3)}</div>
        </GlassCard>
        <GlassCard radius={20} style={{ padding: "12px 10px", textAlign: "center" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>HR</div>
          <div className="tabnum" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 2 }}>{l.hr}</div>
        </GlassCard>
      </div>

      {/* Current interval bar */}
      <div style={{ padding: "16px 16px 0" }}>
        <GlassCard radius={22} style={{ padding: 16 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>INTERVAL {l.currentInterval.num} · TARGET {l.currentInterval.target}</div>
            <div className="tabnum" style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)" }}>{l.currentInterval.elapsed} / {l.currentInterval.target}</div>
          </div>
          <div style={{ height: 8, borderRadius: 4, background: "rgba(28,25,23,0.08)", overflow: "hidden" }}>
            <div style={{
              width: "58%", height: "100%",
              background: "linear-gradient(90deg, var(--accent), var(--accent-2))",
              borderRadius: 4,
            }} />
          </div>
          <div style={{ marginTop: 8, fontSize: 12, color: "var(--ink-3)" }}>
            On pace. <span style={{ color: "var(--accent)", fontWeight: 600 }}>+1s ahead of target.</span>
          </div>
        </GlassCard>
      </div>

      {/* Splits mini */}
      <div style={{ padding: "12px 16px 0" }}>
        <GlassCard radius={20} style={{ padding: "12px 16px" }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4, marginBottom: 8 }}>SPLITS</div>
          <div style={{ display: "flex", gap: 12 }}>
            {l.splits.map(s => (
              <div key={s.mi} style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: "var(--ink-3)" }}>MI {s.mi}</div>
                <div className="tabnum" style={{ fontSize: 15, fontWeight: 700 }}>{s.pace}</div>
                <div className="tabnum" style={{ fontSize: 10, color: "var(--ink-3)" }}>{s.hr} bpm</div>
              </div>
            ))}
          </div>
        </GlassCard>
      </div>

      <div style={{ flex: 1 }} />

      {/* Pause/stop controls */}
      <div style={{ padding: "0 16px 110px", display: "flex", gap: 12, alignItems: "center", justifyContent: "center" }}>
        <button style={{
          width: 68, height: 68, borderRadius: "50%",
          background: "rgba(255,252,245,0.78)", backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 4px 14px rgba(0,0,0,0.08)",
        }}><Ic.Pause size={28} color="var(--ink)" /></button>
        <button onClick={onStop} style={{
          width: 84, height: 84, borderRadius: "50%",
          background: "linear-gradient(145deg, #FF3B30, #C8281E)",
          color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 14px 30px rgba(255,59,48,0.35), inset 0 2px 0 rgba(255,255,255,0.3)",
        }}><Ic.Stop size={32} color="#fff" /></button>
        <button style={{
          width: 68, height: 68, borderRadius: "50%",
          background: "rgba(255,252,245,0.78)", backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 4px 14px rgba(0,0,0,0.08)",
        }}><Ic.Flag size={26} color="var(--ink)" /></button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// SCREEN 3: WORKOUT DETAIL
// ════════════════════════════════════════════════════════════════════
function WorkoutDetail({ onBack, onStartRun }) {
  const w = RUN_DATA.todayWorkout;
  return (
    <div style={{ paddingBottom: 130 }}>
      <RunnerHeader title={w.title} onBack={onBack} big={false} right={
        <button style={{
          width: 36, height: 36, borderRadius: 18,
          background: "rgba(255,252,245,0.6)", backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Ic.More size={18} color="var(--ink)" />
        </button>
      } />

      {/* Hero */}
      <div style={{ padding: "8px 20px 18px" }}>
        <Pill tone="accent">SPEED · 5K PACE</Pill>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6, marginTop: 8, lineHeight: 1.1 }}>{w.title}</div>
        <div style={{ display: "flex", gap: 16, marginTop: 10, color: "var(--ink-3)", fontSize: 13 }}>
          <span style={{ display: "flex", alignItems: "center", gap: 4 }}><Ic.Clock size={14} /> ~57 min</span>
          <span style={{ display: "flex", alignItems: "center", gap: 4 }}><Ic.Pin size={14} /> {w.location}</span>
          <span style={{ display: "flex", alignItems: "center", gap: 4 }}><Ic.Target size={14} /> 85s/400</span>
        </div>
      </div>

      {/* Voice note */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={22} style={{ padding: 16, display: "flex", alignItems: "center", gap: 14 }}>
          <button style={{
            width: 44, height: 44, borderRadius: 22,
            background: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 4px 12px rgba(255,107,53,0.3)",
          }}>
            <Ic.Play size={20} color="#fff" />
          </button>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Coach Marcus · voice note</div>
            <div style={{ marginTop: 6, height: 18, display: "flex", alignItems: "center", gap: 2 }}>
              {[6,10,14,9,16,12,18,8,14,10,16,12,8,14,11,17,9,13,15,8,11,14,9,12,6,10,8].map((h, i) => (
                <div key={i} style={{
                  flex: 1, height: h, borderRadius: 1.5,
                  background: i < 8 ? "var(--accent)" : "rgba(28,25,23,0.18)",
                }} />
              ))}
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 4 }} className="tabnum">0:14 / 1:24</div>
          </div>
        </GlassCard>
      </div>

      {/* AI recovery insight */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={20} style={{ padding: 14, display: "flex", gap: 10, alignItems: "flex-start" }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10, flexShrink: 0,
            background: "rgba(255,107,53,0.12)", display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Ic.Sparkle size={16} color="var(--accent)" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--accent)", letterSpacing: 0.3 }}>AI READINESS</div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.45, marginTop: 4 }}>{w.aiInsight}</div>
          </div>
        </GlassCard>
      </div>

      {/* Structure */}
      <div style={{ padding: "10px 28px 6px", fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>
        STRUCTURE
      </div>
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={22} style={{ overflow: "hidden" }}>
          {w.structure.map((s, i) => (
            <div key={i} style={{
              padding: "16px 16px", display: "flex", alignItems: "center", gap: 14,
              borderBottom: i < w.structure.length - 1 ? "0.5px solid var(--line)" : "none",
              background: s.isMain ? "rgba(255,107,53,0.06)" : "transparent",
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: s.isMain ? "var(--accent)" : "rgba(28,25,23,0.06)",
                color: s.isMain ? "#fff" : "var(--ink-2)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 12, fontWeight: 700,
              }}>{i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.2 }}>{s.label}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{s.detail}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="tabnum" style={{ fontSize: 13, fontWeight: 600 }}>{s.duration}</div>
                <div className="tabnum" style={{ fontSize: 11, color: "var(--ink-3)" }}>{s.pace}</div>
              </div>
            </div>
          ))}
        </GlassCard>
      </div>

      {/* Coach note */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={20} style={{ padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <div style={{ width: 26, height: 26, borderRadius: 13, background: "linear-gradient(135deg, #FFB627, #FF6B35)" }} />
            <div style={{ fontSize: 13, fontWeight: 600 }}>Coach Marcus</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)" }}>8:43 AM</div>
          </div>
          <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>"{w.coachNote}"</div>
        </GlassCard>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// SCREEN 4: STATS
// ════════════════════════════════════════════════════════════════════
function StatsScreen() {
  const d = RUN_DATA;
  const t = d.trends;
  const maxMile = Math.max(...t.weeklyMiles);

  return (
    <div style={{ paddingBottom: 120 }}>
      <RunnerHeader subtitle="LAST 12 WEEKS" title="Stats" />

      {/* Readiness ring + form */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={28} style={{ padding: 20 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <ReadinessRing value={d.athlete.readiness} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>READINESS</div>
              <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, marginTop: 2 }} className="tabnum">{d.athlete.readiness}<span style={{ fontSize: 14, color: "var(--ink-3)", fontWeight: 500 }}> / 100</span></div>
              <Pill tone="green" style={{ marginTop: 6 }}>Green light · cleared for speed</Pill>
            </div>
          </div>
          <div style={{
            marginTop: 16, paddingTop: 14, borderTop: "0.5px solid var(--line)",
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8,
          }}>
            <div>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>FITNESS</div>
              <div className="tabnum" style={{ fontSize: 18, fontWeight: 700 }}>{t.fitnessLoad}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>FATIGUE</div>
              <div className="tabnum" style={{ fontSize: 18, fontWeight: 700 }}>{t.fatigue}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.3 }}>FORM</div>
              <div className="tabnum" style={{ fontSize: 18, fontWeight: 700, color: "var(--accent)" }}>+{t.form}</div>
            </div>
          </div>
        </GlassCard>
      </div>

      {/* Weekly miles chart */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={22} style={{ padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>WEEKLY MILEAGE</div>
              <div className="tabnum" style={{ fontSize: 22, fontWeight: 700, marginTop: 2, letterSpacing: -0.3 }}>
                {d.athlete.weekMileage}<span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500 }}> mi this wk</span>
              </div>
            </div>
            <Pill tone="green">▲ 6%</Pill>
          </div>
          <div style={{ marginTop: 14, height: 90, display: "flex", alignItems: "flex-end", gap: 4 }}>
            {t.weeklyMiles.map((m, i) => {
              const isCurrent = i === t.weeklyMiles.length - 1;
              return (
                <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                  <div style={{
                    width: "100%", height: `${(m / maxMile) * 80}px`, borderRadius: 4,
                    background: isCurrent
                      ? "linear-gradient(180deg, var(--accent), var(--accent-2))"
                      : "rgba(28,25,23,0.14)",
                  }} />
                </div>
              );
            })}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 9, color: "var(--ink-4)" }}>
            <span>12 wk ago</span><span>now</span>
          </div>
        </GlassCard>
      </div>

      {/* Heat map */}
      <div style={{ padding: "0 16px 14px" }}>
        <GlassCard radius={22} style={{ padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>TRAINING LOAD HEATMAP</div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 2 }}>49 days · consistency {t.consistency}%</div>
            </div>
          </div>
          <Heatmap />
          <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 8, fontSize: 10, color: "var(--ink-3)" }}>
            Less
            {[0,1,2,3,4].map(v => (
              <div key={v} style={{
                width: 14, height: 14, borderRadius: 4,
                background: v === 0 ? "rgba(28,25,23,0.06)" : `rgba(255,107,53,${0.2 + v * 0.18})`,
              }} />
            ))}
            More
          </div>
        </GlassCard>
      </div>

      {/* PRs */}
      <div style={{ padding: "10px 28px 6px", fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>
        PERSONAL BESTS
      </div>
      <div style={{ padding: "0 16px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {[
          { label: "5K", time: d.athlete.pr5k, when: "Apr · Track" },
          { label: "10K", time: d.athlete.pr10k, when: "Feb · Boulder" },
          { label: "Mile", time: "5:42", when: "Mar · Track" },
          { label: "Half", time: "1:28:09", when: "Oct '24" },
        ].map((pr, i) => (
          <GlassCard key={i} radius={18} style={{ padding: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-3)", letterSpacing: 0.4 }}>{pr.label}</div>
            <div className="tabnum" style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 2 }}>{pr.time}</div>
            <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{pr.when}</div>
          </GlassCard>
        ))}
      </div>
    </div>
  );
}

function ReadinessRing({ value }) {
  const r = 38, c = 2 * Math.PI * r;
  const dash = c * (value / 100);
  return (
    <div style={{ width: 92, height: 92, position: "relative" }}>
      <svg width="92" height="92" viewBox="0 0 92 92" style={{ transform: "rotate(-90deg)" }}>
        <circle cx="46" cy="46" r={r} stroke="rgba(28,25,23,0.08)" strokeWidth="8" fill="none" />
        <circle cx="46" cy="46" r={r}
          stroke="url(#ringgrad)" strokeWidth="8" strokeLinecap="round"
          fill="none" strokeDasharray={`${dash} ${c}`} />
        <defs>
          <linearGradient id="ringgrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#FF6B35" />
            <stop offset="100%" stopColor="#FFB627" />
          </linearGradient>
        </defs>
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "flex",
        alignItems: "center", justifyContent: "center",
        fontSize: 22, fontWeight: 700, letterSpacing: -0.4,
      }} className="tabnum">{value}</div>
    </div>
  );
}

function Heatmap() {
  const h = RUN_DATA.heatmap;
  return (
    <div style={{ display: "flex", gap: 4 }}>
      {h[0].map((_, dayIdx) => (
        <div key={dayIdx} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
          {h.map((week, weekIdx) => {
            const v = week[dayIdx];
            return (
              <div key={weekIdx} style={{
                aspectRatio: 1, borderRadius: 4,
                background: v === 0 ? "rgba(28,25,23,0.06)" : `rgba(255,107,53,${0.2 + v * 0.18})`,
              }} />
            );
          })}
        </div>
      ))}
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// SCREEN 5: COACH MESSAGES
// ════════════════════════════════════════════════════════════════════
function CoachScreen() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      {/* Custom compact header */}
      <div style={{ padding: "58px 16px 12px", display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: 22, background: "linear-gradient(135deg, #FFB627, #FF6B35)", boxShadow: "0 2px 8px rgba(255,107,53,0.2)" }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.3 }}>Marcus Webb</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", display: "flex", alignItems: "center", gap: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: "#30D158" }} /> Online · Coach
          </div>
        </div>
        <button style={{
          width: 36, height: 36, borderRadius: 18,
          background: "rgba(255,252,245,0.6)", backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)", border: "0.5px solid rgba(28,25,23,0.08)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><Ic.More size={18} color="var(--ink)" /></button>
      </div>

      {/* Messages */}
      <div style={{ flex: 1, overflow: "auto", padding: "8px 12px 100px", display: "flex", flexDirection: "column", gap: 8 }}>
        {RUN_DATA.messages.map((m, i, arr) => {
          const isMe = m.from === "me";
          const showTime = i === 0 || arr[i-1].time !== m.time;
          return (
            <React.Fragment key={i}>
              {showTime && (
                <div style={{ textAlign: "center", fontSize: 10, color: "var(--ink-3)", margin: "10px 0 6px", letterSpacing: 0.3, fontWeight: 600 }}>
                  {m.time}
                </div>
              )}
              <div style={{ display: "flex", justifyContent: isMe ? "flex-end" : "flex-start" }}>
                {m.voice ? (
                  <div style={{
                    maxWidth: "78%", padding: 10, borderRadius: 22,
                    background: isMe ? "var(--accent)" : "rgba(255,252,245,0.85)",
                    backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
                    border: isMe ? "none" : "0.5px solid rgba(28,25,23,0.06)",
                    display: "flex", alignItems: "center", gap: 10,
                  }}>
                    <button style={{
                      width: 32, height: 32, borderRadius: 16,
                      background: isMe ? "rgba(255,255,255,0.25)" : "var(--accent)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <Ic.Play size={14} color="#fff" />
                    </button>
                    <div style={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                      {[6,9,12,8,14,10,16,7,12,10,14,8,11,9,13,6,10,8].map((h, idx) => (
                        <div key={idx} style={{
                          width: 2, height: h, borderRadius: 1,
                          background: isMe ? "rgba(255,255,255,0.7)" : "var(--ink-3)",
                        }} />
                      ))}
                    </div>
                    <span className="tabnum" style={{ fontSize: 11, color: isMe ? "rgba(255,255,255,0.85)" : "var(--ink-3)", fontWeight: 600 }}>{m.duration}</span>
                  </div>
                ) : (
                  <div style={{
                    maxWidth: "78%", padding: "10px 14px", borderRadius: 20,
                    background: isMe ? "var(--accent)" : "rgba(255,252,245,0.85)",
                    backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
                    border: isMe ? "none" : "0.5px solid rgba(28,25,23,0.06)",
                    color: isMe ? "#fff" : "var(--ink)",
                    fontSize: 14, lineHeight: 1.4,
                    boxShadow: isMe ? "0 2px 6px rgba(255,107,53,0.15)" : "0 1px 3px rgba(0,0,0,0.03)",
                  }}>{m.text}</div>
                )}
              </div>
            </React.Fragment>
          );
        })}
      </div>

      {/* Compose */}
      <div style={{ padding: "10px 12px 110px" }}>
        <GlassCard radius={26} strong style={{ padding: 6, display: "flex", alignItems: "center", gap: 6 }}>
          <button style={{ width: 38, height: 38, borderRadius: 19, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Ic.Plus size={20} color="var(--ink-3)" />
          </button>
          <div style={{ flex: 1, fontSize: 14, color: "var(--ink-3)", padding: "8px 4px" }}>Message Marcus…</div>
          <button style={{
            width: 38, height: 38, borderRadius: 19, background: "var(--accent)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Ic.Mic size={18} color="#fff" />
          </button>
        </GlassCard>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// Runner App shell
// ════════════════════════════════════════════════════════════════════
function RunnerApp({ variant }) {
  const [tab, setTab] = useState("plan");
  const [workoutOpen, setWorkoutOpen] = useState(false);

  let screen;
  if (workoutOpen) screen = <WorkoutDetail onBack={() => setWorkoutOpen(false)} />;
  else if (tab === "plan") screen = <PlanScreen onOpenWorkout={() => setWorkoutOpen(true)} />;
  else if (tab === "run") screen = <RunScreen />;
  else if (tab === "stats") screen = <StatsScreen />;
  else if (tab === "coach") screen = <CoachScreen />;

  return (
    <div style={{ position: "relative", width: "100%", height: "100%", overflow: "hidden" }}>
      <Wallpaper variant={variant} />
      <div style={{ position: "absolute", inset: 0, overflow: "auto" }}>
        {screen}
      </div>
      <RunnerTabBar tab={tab} setTab={(t) => { setWorkoutOpen(false); setTab(t); }} />
    </div>
  );
}

Object.assign(window, { RunnerApp });