// ============================================
// Open Water / Triathlon Portal
// ============================================

function OpenWaterPortal({ subroute, setSubroute, toast }) {
  if (subroute === "session") return <OWSessionSelect setSubroute={setSubroute}/>;
  if (subroute === "checklist") return <OWChecklist setSubroute={setSubroute}/>;
  if (subroute === "active") return <OWActive setSubroute={setSubroute} toast={toast}/>;
  if (subroute === "post") return <OWPost setSubroute={setSubroute}/>;
  if (subroute === "brick") return <BrickSession setSubroute={setSubroute}/>;
  if (subroute === "conditions") return <ConditionsLog/>;
  if (subroute === "races") return <RaceCalendar/>;
  if (subroute === "plan") return <TrainingPlan/>;
  if (subroute === "devices") return <DevicePairing/>;
  if (subroute === "trends") return <PerformanceTrends/>;
  return <OWHome setSubroute={setSubroute}/>;
}

function OWHome({ setSubroute }) {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Open water & triathlon" sub="Track GPS sessions, brick workouts, races"
        actions={<Button variant="primary" icon="play" onClick={() => setSubroute("session")}>New session</Button>}/>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
        <StatCard label="Swim (week)" value="6.4 km" accent="var(--c-openwater)" icon="wave"/>
        <StatCard label="Bike (week)" value="142 km" accent="var(--aqua)" icon="bike"/>
        <StatCard label="Run (week)" value="32 km" accent="var(--c-recreation)" icon="run"/>
        <StatCard label="Days to Tri" value="42" sub="Sprint @ Marina Bay" accent="var(--gold)" icon="trophy"/>
      </div>

      <Card style={{ padding: 0, overflow: "hidden" }}>
        <MapPlaceholder height={260}/>
        <div className="between" style={{ padding: 16 }}>
          <div>
            <Pill tone="aqua">Last route</Pill>
            <div className="t-h2" style={{ marginTop: 8 }}>Marina Bay loop</div>
            <div className="muted">Sunday · 6:12 AM · 1.5 km · 32:14</div>
          </div>
          <Button variant="ghost" onClick={() => setSubroute("post")}>View<Icon name="chev-right" size={14}/></Button>
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        <Card>
          <div className="between" style={{ marginBottom: 12 }}>
            <div className="t-h2">Multi-sport balance</div>
            <Pill>This month</Pill>
          </div>
          <div className="row" style={{ gap: 12, padding: "8px 0" }}>
            <SportPie values={[{ label: "Swim", value: 28, color: "var(--c-openwater)" }, { label: "Bike", value: 48, color: "var(--aqua)" }, { label: "Run", value: 24, color: "var(--c-recreation)" }]}/>
            <div className="col" style={{ gap: 8, flex: 1 }}>
              {[
                { label: "Swim", pct: 28, color: "var(--c-openwater)", val: "24 km" },
                { label: "Bike", pct: 48, color: "var(--aqua)", val: "586 km" },
                { label: "Run", pct: 24, color: "var(--c-recreation)", val: "128 km" },
              ].map(s => (
                <div key={s.label} className="between"><div className="row"><div style={{ width: 12, height: 12, background: s.color, borderRadius: 3 }}/><span style={{ fontSize: 13, fontWeight: 600 }}>{s.label}</span></div><span className="t-mono-sm" style={{ fontWeight: 600 }}>{s.val}</span></div>
              ))}
            </div>
          </div>
        </Card>

        <Card>
          <div className="between" style={{ marginBottom: 12 }}>
            <div className="t-h2">Next race</div>
            <Pill tone="amber">In 42 days</Pill>
          </div>
          <div className="row" style={{ gap: 12 }}>
            <div style={{ width: 64, height: 64, borderRadius: 14, background: "var(--c-openwater)", display: "flex", alignItems: "center", justifyContent: "center", color: "white", flexDirection: "column" }}>
              <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.7 }}>JUN</div>
              <div className="t-h2" style={{ color: "white", lineHeight: 1 }}>26</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 16 }}>Marina Bay Sprint Tri</div>
              <div style={{ fontSize: 12, color: "var(--gray-600)" }}>Singapore · 750m / 20km / 5km</div>
              <div className="row" style={{ gap: 6, marginTop: 8 }}>
                <Button variant="secondary" size="sm">View plan</Button>
                <Button variant="ghost" size="sm">Calendar sync</Button>
              </div>
            </div>
          </div>
        </Card>
      </div>

      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>This week</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6 }}>
          {["Mon 7", "Tue 8", "Wed 9", "Thu 10", "Fri 11", "Sat 12", "Sun 13"].map((d, i) => {
            const acts = [
              [{ t: "Swim", c: "var(--c-openwater)" }],
              [{ t: "Bike", c: "var(--aqua)" }],
              [{ t: "Swim", c: "var(--c-openwater)" }, { t: "Run", c: "var(--c-recreation)" }],
              [],
              [{ t: "Bike", c: "var(--aqua)" }],
              [{ t: "Brick", c: "var(--gold)" }],
              [{ t: "Run", c: "var(--c-recreation)" }],
            ][i];
            return (
              <div key={d} style={{ background: "var(--gray-50)", borderRadius: 10, padding: 12, minHeight: 120 }}>
                <div className="t-caption">{d}</div>
                <div className="col" style={{ gap: 4, marginTop: 8 }}>
                  {acts.map((a, j) => (
                    <div key={j} style={{ background: `${a.c}22`, borderLeft: `3px solid ${a.c}`, padding: "4px 6px", borderRadius: 4, fontSize: 11, fontWeight: 600 }}>{a.t}</div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
}

function SportPie({ values }) {
  const total = values.reduce((a, b) => a + b.value, 0);
  let offset = 0;
  const r = 50, c = 2 * Math.PI * r;
  return (
    <svg width={130} height={130} viewBox="0 0 130 130">
      <g transform="translate(65 65) rotate(-90)">
        {values.map((v, i) => {
          const len = (v.value / total) * c;
          const el = <circle key={i} r={r} fill="none" stroke={v.color} strokeWidth={22} strokeDasharray={`${len} ${c - len}`} strokeDashoffset={-offset}/>;
          offset += len;
          return el;
        })}
      </g>
    </svg>
  );
}

function OWSessionSelect({ setSubroute }) {
  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("home")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Sessions</div>
      </div>
      <PageHeader title="Choose session type"/>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 14 }}>
        {[
          { id: "checklist", label: "Open water swim", desc: "GPS-tracked open water session", icon: "wave", color: "var(--c-openwater)" },
          { id: "brick", label: "Triathlon brick", desc: "Multi-sport sequence", icon: "trophy", color: "var(--gold)" },
        ].map(t => (
          <button key={t.id} onClick={() => setSubroute(t.id)} className="card" style={{ textAlign: "left", borderLeft: `4px solid ${t.color}`, padding: 24 }}>
            <div style={{ width: 56, height: 56, borderRadius: 16, background: `${t.color}22`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
              <Icon name={t.icon} size={28} color={t.color}/>
            </div>
            <div className="t-h2">{t.label}</div>
            <div className="muted" style={{ marginTop: 4 }}>{t.desc}</div>
          </button>
        ))}
      </div>

      <Card>
        <div className="t-h3" style={{ marginBottom: 12 }}>Triathlon distance</div>
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          {[
            { name: "Sprint", swim: "750m", bike: "20km", run: "5km" },
            { name: "Olympic", swim: "1.5km", bike: "40km", run: "10km" },
            { name: "70.3", swim: "1.9km", bike: "90km", run: "21km" },
            { name: "Full", swim: "3.8km", bike: "180km", run: "42km" },
          ].map(d => (
            <button key={d.name} onClick={() => setSubroute("brick")} className="card-flat" style={{ flex: 1, minWidth: 140, padding: 12, textAlign: "left", border: "1px solid var(--gray-200)" }}>
              <div style={{ fontWeight: 700 }}>{d.name}</div>
              <div className="t-caption">{d.swim} / {d.bike} / {d.run}</div>
            </button>
          ))}
        </div>
      </Card>
    </div>
  );
}

function OWChecklist({ setSubroute }) {
  const items = [
    "Buddy present & informed", "Route shared with contact", "Weather & water conditions checked",
    "Device battery > 80%", "Brightly-colored swim cap on", "Tow float / safety buoy attached",
  ];
  const [checked, setChecked] = useState({});
  const allDone = items.every(i => checked[i]);

  return (
    <div className="col" style={{ gap: 16, maxWidth: 600 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("session")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Open water</div><div className="t-caption">/</div><div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>Safety check</div>
      </div>
      <PageHeader title="Safety checklist" sub="Open water sessions cannot start until every item is confirmed."/>

      <Card>
        <div className="col" style={{ gap: 10 }}>
          {items.map(i => {
            const done = !!checked[i];
            return (
              <button key={i} onClick={() => setChecked({ ...checked, [i]: !done })} className="row" style={{ padding: 14, background: done ? "var(--mint-50)" : "var(--gray-50)", borderRadius: 12, textAlign: "left", borderLeft: `4px solid ${done ? "var(--mint)" : "var(--gray-300)"}`, transition: "all 160ms", gap: 12 }}>
                <div style={{ width: 28, height: 28, borderRadius: "50%", background: done ? "var(--mint)" : "white", border: done ? "none" : "2px solid var(--gray-300)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  {done && <Icon name="check" size={16} color="white"/>}
                </div>
                <span style={{ fontWeight: 600, fontSize: 14 }}>{i}</span>
              </button>
            );
          })}
        </div>
      </Card>

      <Button variant="primary" size="lg" full disabled={!allDone} onClick={() => setSubroute("active")} style={!allDone ? { opacity: 0.4, cursor: "not-allowed" } : {}}>
        {allDone ? "Start GPS session" : `${Object.values(checked).filter(Boolean).length} of ${items.length} checked`}
        {allDone && <Icon name="play" size={16}/>}
      </Button>
    </div>
  );
}

function OWActive({ setSubroute, toast }) {
  const [time, setTime] = useState(942);
  const [paused, setPaused] = useState(false);
  useEffect(() => { if (paused) return; const id = setInterval(() => setTime(t => t + 1), 1000); return () => clearInterval(id); }, [paused]);
  const fmt = (s) => `${Math.floor(s/60)}:${String(s%60).padStart(2,"0")}`;

  return (
    <div style={{ position: "fixed", inset: 0, background: "#0a1933", zIndex: 600, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1, position: "relative" }}>
        <MapPlaceholder height="100%"/>
        <div style={{ position: "absolute", top: 20, left: 20, right: 20, display: "flex", justifyContent: "space-between" }}>
          <button onClick={() => { toast({ message: "Session saved" }); setSubroute("post"); }} className="btn-icon" style={{ background: "rgba(255,255,255,0.95)" }}><Icon name="x" size={18}/></button>
          <div className="row" style={{ gap: 8 }}>
            <Pill tone="aqua" style={{ background: "rgba(255,255,255,0.95)" }}>● GPS strong</Pill>
            <Pill style={{ background: "rgba(255,255,255,0.95)" }}>🌊 26°C · Clear</Pill>
          </div>
        </div>
      </div>

      <div style={{ background: "white", borderRadius: "20px 20px 0 0", marginTop: -20, padding: 24, paddingBottom: "max(24px, env(safe-area-inset-bottom))", boxShadow: "0 -20px 40px rgba(0,0,0,0.15)" }}>
        <div className="row" style={{ justifyContent: "space-around", marginBottom: 18 }}>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 10, color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Time</div>
            <div className="t-mono-timer" style={{ color: "var(--navy)", fontSize: 38, marginTop: 4 }}>{fmt(time)}</div>
          </div>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 10, color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Distance</div>
            <div className="t-mono-timer" style={{ color: "var(--c-openwater)", fontSize: 38, marginTop: 4 }}>1.4<span style={{ fontSize: 18 }}>km</span></div>
          </div>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 10, color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: 1, fontWeight: 700 }}>Pace</div>
            <div className="t-mono-timer" style={{ color: "var(--mint)", fontSize: 38, marginTop: 4 }}>1:51<span style={{ fontSize: 16 }}>/100</span></div>
          </div>
        </div>

        <div className="between" style={{ marginBottom: 12, fontSize: 12, color: "var(--gray-600)" }}>
          <div className="row"><Icon name="heart" size={14} color="var(--red)"/><span className="t-mono-sm" style={{ marginLeft: 4 }}>148 bpm</span></div>
          <div className="row"><Icon name="info" size={14}/><span style={{ marginLeft: 4 }}>Buoy in 200m</span></div>
        </div>

        <div className="row" style={{ gap: 10 }}>
          <Button variant="secondary" full onClick={() => setPaused(!paused)} icon={paused ? "play" : "pause"}>{paused ? "Resume" : "Pause"}</Button>
          <Button variant="danger" full onClick={() => { toast({ message: "Session saved" }); setSubroute("post"); }}>End session</Button>
        </div>
      </div>
    </div>
  );
}

function OWPost({ setSubroute }) {
  return (
    <div className="col" style={{ gap: 16 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("home")}><Icon name="x" size={18}/></button>
        <div className="t-caption">Session complete</div>
      </div>

      <Card style={{ padding: 0, overflow: "hidden" }}>
        <MapPlaceholder height={300}/>
        <div style={{ padding: 18 }}>
          <Pill tone="aqua">Open water</Pill>
          <div className="t-h1" style={{ marginTop: 8 }}>Marina Bay loop</div>
          <div className="muted">Sunday May 12 · 6:12 AM</div>
          <div className="row" style={{ gap: 24, flexWrap: "wrap", marginTop: 16 }}>
            <div><div className="t-caption">Distance</div><div className="t-mono-stat" style={{ color: "var(--c-openwater)" }}>1.52 km</div></div>
            <div><div className="t-caption">Time</div><div className="t-mono-stat">32:14</div></div>
            <div><div className="t-caption">Avg pace</div><div className="t-mono-stat" style={{ color: "var(--mint)" }}>2:07/100</div></div>
            <div><div className="t-caption">Calories</div><div className="t-mono-stat">412</div></div>
          </div>
        </div>
      </Card>

      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Pace by 500m</div>
        <BarChart data={[
          { label: "0–500", value: 2.05, color: "var(--mint)" },
          { label: "500–1000", value: 2.10, color: "var(--mint)" },
          { label: "1000–1500", value: 2.18, color: "var(--amber)" },
        ]} max={2.4} height={120}/>
      </Card>

      <Card>
        <div className="between" style={{ marginBottom: 14 }}>
          <div className="t-h2">Conditions log</div>
          <Button variant="ghost" size="sm">Edit</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12 }}>
          {[
            ["Water temp", "26 °C"], ["Visibility", "Good"], ["Current", "Mild"], ["Wave height", "0.4 m"], ["Buoy difficulty", "Easy"], ["Wetsuit", "No"],
          ].map(([k, v]) => (
            <div key={k} style={{ background: "var(--gray-50)", padding: 12, borderRadius: 10 }}>
              <div className="t-caption">{k}</div><div style={{ fontWeight: 700, marginTop: 2 }}>{v}</div>
            </div>
          ))}
        </div>
      </Card>

      <div className="row" style={{ gap: 8 }}>
        <Button variant="secondary" icon="share">Share</Button>
        <div style={{ flex: 1 }}/>
        <Button variant="primary" onClick={() => setSubroute("home")}>Done</Button>
      </div>
    </div>
  );
}

function BrickSession({ setSubroute }) {
  const [active, setActive] = useState(0);
  const sports = [
    { name: "Swim", icon: "wave", color: "var(--c-openwater)", target: "750m", curr: "750m" },
    { name: "T1", icon: "stopwatch", color: "var(--gray-500)", target: "2:00", curr: "1:48" },
    { name: "Bike", icon: "bike", color: "var(--aqua)", target: "20km", curr: "12.4km" },
    { name: "T2", icon: "stopwatch", color: "var(--gray-500)", target: "1:30", curr: "—" },
    { name: "Run", icon: "run", color: "var(--c-recreation)", target: "5km", curr: "—" },
  ];

  return (
    <div className="col" style={{ gap: 16 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("session")}><Icon name="chev-left" size={18}/></button>
        <div className="t-caption">Brick session — Sprint distance</div>
      </div>

      <Card style={{ background: "linear-gradient(135deg, var(--navy-900), var(--c-openwater))", color: "white" }}>
        <Pill tone="navy" style={{ background: "rgba(255,255,255,0.2)", color: "white" }}>Currently</Pill>
        <div className="row" style={{ gap: 14, alignItems: "center", marginTop: 10 }}>
          <div style={{ width: 60, height: 60, borderRadius: 18, background: "var(--aqua)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name={sports[active].icon} size={32} color="white"/>
          </div>
          <div>
            <div className="t-h1" style={{ color: "white" }}>{sports[active].name}</div>
            <div style={{ color: "rgba(255,255,255,0.8)" }}>{sports[active].curr} / {sports[active].target}</div>
          </div>
          <div style={{ flex: 1, textAlign: "right" }}>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700 }}>Elapsed</div>
            <div className="t-mono-timer" style={{ color: "white", fontSize: 28 }}>42:18</div>
          </div>
        </div>
      </Card>

      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Sequence</div>
        <div className="col" style={{ gap: 8 }}>
          {sports.map((s, i) => (
            <button key={s.name} onClick={() => setActive(i)} className="row between" style={{ padding: 14, borderRadius: 10, background: i === active ? `${s.color}22` : "var(--gray-50)", borderLeft: `4px solid ${i === active ? s.color : i < active ? "var(--mint)" : "var(--gray-300)"}`, textAlign: "left", width: "100%" }}>
              <div className="row">
                <div style={{ width: 36, height: 36, borderRadius: 10, background: i === active ? s.color : i < active ? "var(--mint)" : "white", color: i <= active ? "white" : "var(--gray-500)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {i < active ? <Icon name="check" size={18}/> : <Icon name={s.icon} size={18}/>}
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: "var(--gray-600)" }}>{s.curr} / {s.target}</div>
                </div>
              </div>
              {i === active && <Pill tone="aqua">In progress</Pill>}
              {i < active && <Pill tone="mint">Done</Pill>}
            </button>
          ))}
        </div>
      </Card>

      <div className="row" style={{ gap: 8 }}>
        <Button variant="secondary" full onClick={() => setActive(Math.max(0, active - 1))}>Prev sport</Button>
        <Button variant="primary" full onClick={() => active < sports.length - 1 ? setActive(active + 1) : setSubroute("post")}>{active < sports.length - 1 ? "Switch sport" : "Finish brick"}</Button>
      </div>
    </div>
  );
}

function ConditionsLog() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Open water conditions log" sub="History of session conditions"/>
      <Card>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
            <thead><tr style={{ textAlign: "left", color: "var(--gray-500)", fontSize: 11, textTransform: "uppercase", letterSpacing: 1 }}>
              <th style={{ padding: 10 }}>Date</th><th>Location</th><th>Temp</th><th>Visibility</th><th>Current</th><th>Distance</th>
            </tr></thead>
            <tbody>
              {[
                ["May 12", "Marina Bay", "26°C", "Good", "Mild", "1.5 km"],
                ["May 5", "Sentosa Cove", "28°C", "Fair", "Strong", "2.0 km"],
                ["Apr 28", "East Coast", "27°C", "Good", "Mild", "1.8 km"],
                ["Apr 21", "Marina Bay", "25°C", "Poor", "Calm", "1.2 km"],
              ].map((r, i) => (
                <tr key={i} style={{ borderTop: "1px solid var(--gray-100)" }}>{r.map((c, j) => <td key={j} style={{ padding: 12 }}>{c}</td>)}</tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

function RaceCalendar() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Race calendar" sub="Upcoming open water races and triathlons"
        actions={<><Button variant="secondary" icon="filter">Filter</Button><Tabs tabs={[{ id: "list", label: "List" }, { id: "map", label: "Map" }]} value="list" onChange={() => {}}/></>}/>

      <div className="col" style={{ gap: 12 }}>
        {[
          { date: "Jun 26", name: "Marina Bay Sprint Tri", loc: "Singapore", dist: "Sprint", type: "Triathlon", color: "var(--c-openwater)", register: true },
          { date: "Jul 14", name: "Sentosa Open Water 5K", loc: "Singapore", dist: "5 km", type: "Open water", color: "var(--c-openwater)" },
          { date: "Aug 22", name: "Ironman 70.3 Da Nang", loc: "Vietnam", dist: "70.3", type: "Triathlon", color: "var(--gold)" },
          { date: "Sep 18", name: "Asian Masters Champs", loc: "Bangkok", dist: "1500m / 800m", type: "Pool", color: "var(--c-competitive)" },
          { date: "Oct 10", name: "Phuket Open Water 10K", loc: "Thailand", dist: "10 km", type: "Open water", color: "var(--c-openwater)" },
        ].map((r, i) => (
          <Card key={i}>
            <div className="row" style={{ gap: 16, flexWrap: "wrap" }}>
              <div style={{ width: 70, textAlign: "center", flexShrink: 0 }}>
                <div style={{ fontSize: 11, color: "var(--gray-500)", fontWeight: 600 }}>{r.date.split(" ")[0]}</div>
                <div className="t-h1" style={{ color: r.color, fontSize: 32 }}>{r.date.split(" ")[1]}</div>
              </div>
              <div style={{ flex: 1, minWidth: 200 }}>
                <Pill tone="aqua">{r.type}</Pill>
                <div className="t-h2" style={{ marginTop: 6 }}>{r.name}</div>
                <div className="row" style={{ gap: 12, marginTop: 4, color: "var(--gray-600)", fontSize: 13 }}>
                  <div className="row" style={{ gap: 4 }}><Icon name="pin" size={14}/>{r.loc}</div>
                  <div className="row" style={{ gap: 4 }}><Icon name="wave" size={14}/>{r.dist}</div>
                </div>
              </div>
              <div className="row" style={{ gap: 6 }}>
                <Button variant="secondary" size="sm">Add to plan</Button>
                <Button variant="primary" size="sm">{r.register ? "Registered" : "Register"}</Button>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function TrainingPlan() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Training plan" sub="Marina Bay Sprint Tri · 6-week build"
        actions={<><Button variant="secondary" icon="upload">Calendar sync</Button><Button variant="primary" icon="plus">Add session</Button></>}/>

      <div className="col" style={{ gap: 16 }}>
        {Array.from({ length: 6 }).map((_, w) => (
          <Card key={w}>
            <div className="between" style={{ marginBottom: 12 }}>
              <div>
                <div className="t-caption">Week {w + 1} · {["Base", "Base", "Build", "Build", "Peak", "Taper"][w]}</div>
                <div className="t-h2">May {13 + w * 7} – {19 + w * 7}</div>
              </div>
              <Pill tone={w === 0 ? "aqua" : "default"}>{w === 0 ? "This week" : `In ${w * 7} days`}</Pill>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6 }}>
              {["M","T","W","T","F","S","S"].map((d, i) => {
                const list = [
                  [{ s: "Swim", v: "1.5km", c: "var(--c-openwater)" }],
                  [{ s: "Bike", v: "40km", c: "var(--aqua)" }],
                  [{ s: "Run", v: "8km", c: "var(--c-recreation)" }, { s: "Swim", v: "1km", c: "var(--c-openwater)" }],
                  [],
                  [{ s: "Bike", v: "30km", c: "var(--aqua)" }],
                  [{ s: "Brick", v: "Swim+Bike", c: "var(--gold)" }],
                  [{ s: "Run", v: "12km", c: "var(--c-recreation)" }],
                ][i];
                return (
                  <div key={i} style={{ background: "var(--gray-50)", borderRadius: 8, padding: 10, minHeight: 100 }}>
                    <div className="t-caption">{d}</div>
                    <div className="col" style={{ gap: 4, marginTop: 6 }}>
                      {list.map((a, j) => (
                        <div key={j} style={{ background: `${a.c}22`, borderLeft: `2px solid ${a.c}`, padding: "4px 6px", borderRadius: 4 }}>
                          <div style={{ fontSize: 10, fontWeight: 700 }}>{a.s}</div>
                          <div style={{ fontSize: 9, color: "var(--gray-600)" }}>{a.v}</div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function DevicePairing() {
  return (
    <div className="col" style={{ gap: 16, maxWidth: 640 }}>
      <PageHeader title="Devices & sensors" sub="Paired wearables and accessories"
        actions={<Button variant="primary" icon="plus">Pair device</Button>}/>
      <Card>
        <div className="col" style={{ gap: 8 }}>
          {[
            { name: "Garmin Forerunner 965", type: "GPS watch", battery: 78, status: "Connected", icon: "stopwatch" },
            { name: "Polar H10", type: "Heart rate monitor", battery: 92, status: "Connected", icon: "heart" },
            { name: "FORM Smart Goggles", type: "Display goggles", battery: 45, status: "Connected", icon: "wave" },
            { name: "Wahoo TICKR", type: "Heart rate", battery: 0, status: "Disconnected", icon: "heart" },
          ].map((d, i) => (
            <div key={i} className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
              <div className="row" style={{ gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: "white", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--gray-200)" }}>
                  <Icon name={d.icon} size={18} color="var(--navy)"/>
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{d.name}</div>
                  <div style={{ fontSize: 12, color: "var(--gray-500)" }}>{d.type} · {d.battery ? `${d.battery}% battery` : "off"}</div>
                </div>
              </div>
              <div className="row" style={{ gap: 8 }}>
                <Pill tone={d.status === "Connected" ? "mint" : "default"}>{d.status}</Pill>
                <Button variant="ghost" size="sm">Test</Button>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function PerformanceTrends() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Performance trends"
        actions={<Tabs tabs={[{ id: "30", label: "30d" }, { id: "90", label: "90d" }, { id: "1y", label: "1y" }]} value="90" onChange={() => {}}/>}/>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Swim pace (1km)</div>
          <LineChart values={[20.4, 20.1, 19.8, 19.5, 19.3, 19.0, 18.9, 18.7, 18.6, 18.4, 18.3, 18.1]} color="var(--c-openwater)" height={180}/>
        </Card>
        <Card>
          <div className="t-h2" style={{ marginBottom: 14 }}>Run pace (5km)</div>
          <LineChart values={[5.8, 5.7, 5.6, 5.7, 5.5, 5.4, 5.3, 5.3, 5.2, 5.1, 5.1, 5.0]} color="var(--c-recreation)" height={180}/>
        </Card>
      </div>
    </div>
  );
}

// ============================================
// Recreational / Fitness Portal
// ============================================

function RecPortal({ subroute, setSubroute, toast }) {
  if (subroute === "workouts") return <RecWorkouts setSubroute={setSubroute}/>;
  if (subroute === "player") return <WorkoutPlayer setSubroute={setSubroute} toast={toast}/>;
  if (subroute === "history") return <RecHistory/>;
  if (subroute === "achievements") return <RecAchievements/>;
  if (subroute === "profile") return <RecProfile/>;
  if (subroute === "calories") return <CalorieTracker/>;
  if (subroute === "hydration") return <Hydration/>;
  return <RecHome setSubroute={setSubroute}/>;
}

const QUOTES = [
  "Slow is smooth. Smooth is fast.",
  "Every length is a vote for the swimmer you're becoming.",
  "The water doesn't care how you feel — it rewards how you move.",
];

function RecHome({ setSubroute }) {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Hey Alex 👋" sub="Tuesday May 14 · let's get in the water"/>

      <Card style={{ background: "linear-gradient(135deg, var(--c-recreation), #c4581a)", color: "white", padding: 28, position: "relative", overflow: "hidden" }}>
        <Icon name="flame" size={200} color="rgba(255,255,255,0.1)" style={{ position: "absolute", top: -30, right: -30 }}/>
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div style={{ background: "rgba(255,255,255,0.18)", padding: 8, borderRadius: 20 }}>
            <ProgressRing pct={68} size={140} stroke={10} color="white" label="68%" sublabel="of weekly"/>
          </div>
          <div style={{ flex: 1, minWidth: 200 }}>
            <Pill tone="navy" style={{ background: "rgba(255,255,255,0.18)", color: "white" }}>This week</Pill>
            <div className="t-h1" style={{ color: "white", marginTop: 10 }}>2.7 / 4 sessions</div>
            <div style={{ color: "rgba(255,255,255,0.85)", marginTop: 4 }}>1.3 to hit your weekly fitness goal</div>
            <div className="row" style={{ gap: 8, marginTop: 16 }}>
              <Button variant="mint" onClick={() => setSubroute("workouts")} iconRight="chev-right">Choose workout</Button>
              <Button variant="secondary" style={{ background: "rgba(255,255,255,0.95)" }} icon="play">Jump in</Button>
            </div>
          </div>
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)", gap: 12 }} className="dash-grid">
        <Card>
          <div className="row" style={{ gap: 10, marginBottom: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--c-recreation)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="flame" size={20} color="white"/>
            </div>
            <div><div className="t-caption">Streak</div><div className="t-h2">14 days</div></div>
          </div>
          <div className="row" style={{ gap: 3 }}>
            {Array.from({ length: 14 }).map((_, i) => (
              <div key={i} style={{ flex: 1, height: 6, borderRadius: 999, background: "var(--c-recreation)" }}/>
            ))}
          </div>
          <div className="t-caption" style={{ marginTop: 6 }}>Longest streak: 21 days</div>
        </Card>
        <Card>
          <div className="row" style={{ gap: 10, marginBottom: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--aqua)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="wave" size={20} color="white"/>
            </div>
            <div><div className="t-caption">Distance</div><div className="t-h2">6,200m</div></div>
          </div>
          <Sparkline values={[1.2, 0.8, 1.5, 0, 1.4, 0, 1.3]} color="var(--aqua)" width={200} height={40}/>
          <div className="t-caption" style={{ marginTop: 6 }}>Past 7 days</div>
        </Card>
        <Card>
          <div className="row" style={{ gap: 10, marginBottom: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--mint)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="heart" size={20} color="white"/>
            </div>
            <div><div className="t-caption">Calories</div><div className="t-h2">2,140</div></div>
          </div>
          <div className="t-caption">Equiv to 12.8 km running</div>
        </Card>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 16 }} className="dash-grid">
        <Card>
          <div className="between" style={{ marginBottom: 14 }}>
            <div className="t-h2">Recent sessions</div>
            <button onClick={() => setSubroute("history")} className="btn btn-ghost btn-sm">All<Icon name="chev-right" size={14}/></button>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { name: "Beginner endurance", dist: "1,200m", time: "32 min", cal: 290, focus: "Cardio" },
              { name: "Drill technique", dist: "800m", time: "28 min", cal: 210, focus: "Technique" },
              { name: "HIIT pool circuit", dist: "1,400m", time: "35 min", cal: 380, focus: "HIIT" },
            ].map((s, i) => (
              <div key={i} className="between" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10 }}>
                <div className="row" style={{ gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--c-recreation)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon name="play" size={16} color="white"/>
                  </div>
                  <div><div style={{ fontWeight: 600 }}>{s.name}</div><div className="t-caption">{s.focus} · {s.dist} · {s.time}</div></div>
                </div>
                <div className="t-mono-sm" style={{ fontWeight: 700, color: "var(--c-recreation)" }}>{s.cal} cal</div>
              </div>
            ))}
          </div>
        </Card>
        <Card style={{ background: "linear-gradient(135deg, var(--navy-900), var(--teal))", color: "white" }}>
          <div className="t-caption" style={{ color: "rgba(255,255,255,0.6)" }}>Daily inspiration</div>
          <div style={{ fontFamily: "var(--f-display)", fontSize: 22, fontWeight: 600, marginTop: 12, lineHeight: 1.3, color: "white" }}>"{QUOTES[0]}"</div>
          <Pill tone="navy" style={{ marginTop: 16, background: "rgba(255,255,255,0.18)", color: "white" }}>— Coach Maria</Pill>
        </Card>
      </div>
    </div>
  );
}

function RecWorkouts({ setSubroute }) {
  const [level, setLevel] = useState("all");
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Guided workouts" sub="Pre-built sessions you can follow lap-by-lap"
        actions={<><Button variant="secondary" icon="filter">Filter</Button></>}/>
      <Tabs tabs={[{ id: "all", label: "All" }, { id: "beg", label: "Beginner" }, { id: "int", label: "Intermediate" }, { id: "adv", label: "Advanced" }]} value={level} onChange={setLevel}/>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
        {[
          { name: "Easy aerobic", level: "Beginner", time: 25, dist: "800m", focus: "Endurance" },
          { name: "Stroke drill builder", level: "Beginner", time: 30, dist: "1,000m", focus: "Technique" },
          { name: "Threshold cruiser", level: "Intermediate", time: 45, dist: "1,800m", focus: "Cardio" },
          { name: "HIIT pool circuit", level: "Intermediate", time: 35, dist: "1,400m", focus: "HIIT" },
          { name: "Distance builder", level: "Advanced", time: 70, dist: "3,000m", focus: "Endurance" },
          { name: "Sprint pyramid", level: "Advanced", time: 50, dist: "2,200m", focus: "Speed" },
        ].map((w, i) => {
          const color = w.focus === "Cardio" ? "var(--red)" : w.focus === "Endurance" ? "var(--aqua)" : w.focus === "Technique" ? "var(--mint)" : w.focus === "HIIT" ? "var(--c-recreation)" : "var(--gold)";
          return (
            <Card key={i} style={{ padding: 0, overflow: "hidden", cursor: "pointer" }} onClick={() => setSubroute("player")}>
              <div style={{ height: 110, background: `linear-gradient(135deg, ${color}, ${color}88)`, position: "relative", padding: 16 }}>
                <Icon name={w.focus === "HIIT" ? "flame" : w.focus === "Speed" ? "stopwatch" : "wave"} size={70} color="rgba(255,255,255,0.2)" style={{ position: "absolute", right: -10, bottom: -10 }}/>
                <Pill tone="navy" style={{ background: "rgba(255,255,255,0.25)", color: "white" }}>{w.focus}</Pill>
                <div className="t-h2" style={{ color: "white", marginTop: 12, position: "relative" }}>{w.name}</div>
              </div>
              <div style={{ padding: 14 }}>
                <div className="row" style={{ gap: 12, color: "var(--gray-600)", fontSize: 13 }}>
                  <div className="row" style={{ gap: 4 }}><Icon name="clock" size={14}/>{w.time} min</div>
                  <div className="row" style={{ gap: 4 }}><Icon name="wave" size={14}/>{w.dist}</div>
                  <Pill>{w.level}</Pill>
                </div>
                <Button variant="primary" full style={{ marginTop: 12 }} icon="play">Start workout</Button>
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

function WorkoutPlayer({ setSubroute, toast }) {
  const sets = [
    { name: "Warm-up", desc: "200m easy any stroke", time: 5, dist: 200 },
    { name: "Drill set", desc: "4 × 50m catch-up drill", time: 8, dist: 200 },
    { name: "Main set", desc: "8 × 100m on 1:45 — moderate", time: 16, dist: 800 },
    { name: "Sprint set", desc: "4 × 25m all-out, 30s rest", time: 5, dist: 100 },
    { name: "Cool-down", desc: "200m easy", time: 5, dist: 200 },
  ];
  const [current, setCurrent] = useState(2);
  const totalDist = sets.reduce((a, b) => a + b.dist, 0);
  const doneDist = sets.slice(0, current).reduce((a, b) => a + b.dist, 0);

  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      <div className="row" style={{ gap: 8 }}>
        <button className="btn-icon" onClick={() => setSubroute("workouts")}><Icon name="x" size={18}/></button>
        <div className="t-caption" style={{ color: "var(--gray-900)", fontWeight: 600 }}>HIIT pool circuit</div>
      </div>

      <Card>
        <div className="between" style={{ marginBottom: 10 }}>
          <div className="t-caption">Set {current + 1} of {sets.length}</div>
          <div className="t-mono-sm" style={{ fontWeight: 700 }}>{doneDist} / {totalDist}m</div>
        </div>
        <ProgressBar pct={(doneDist / totalDist) * 100} color="var(--c-recreation)" height={10}/>
      </Card>

      <Card style={{ background: "linear-gradient(135deg, var(--c-recreation), #c4581a)", color: "white", padding: 32, textAlign: "center" }}>
        <Pill tone="navy" style={{ background: "rgba(255,255,255,0.2)", color: "white" }}>{sets[current].name}</Pill>
        <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 38, color: "white", marginTop: 16, letterSpacing: -0.5 }}>{sets[current].desc}</div>
        <div className="row" style={{ justifyContent: "center", gap: 32, marginTop: 20 }}>
          <div><div style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700 }}>Distance</div><div className="t-mono-stat" style={{ color: "white" }}>{sets[current].dist}m</div></div>
          <div><div style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700 }}>Approx time</div><div className="t-mono-stat" style={{ color: "white" }}>{sets[current].time}:00</div></div>
        </div>
      </Card>

      <Card>
        <div className="t-h3" style={{ marginBottom: 10, color: "var(--gray-500)" }}>Up next</div>
        {sets.slice(current + 1, current + 3).map((s, i) => (
          <div key={i} className="row between" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10, marginBottom: 6 }}>
            <div>
              <div style={{ fontWeight: 600 }}>{s.name}</div>
              <div className="t-caption">{s.desc}</div>
            </div>
            <div className="t-mono-sm" style={{ color: "var(--gray-600)" }}>{s.time}min</div>
          </div>
        ))}
      </Card>

      <div className="row" style={{ gap: 8 }}>
        <Button variant="secondary" full onClick={() => setCurrent(Math.max(0, current - 1))}>Previous</Button>
        <Button variant="primary" full onClick={() => current < sets.length - 1 ? setCurrent(current + 1) : (toast({ message: "Workout complete 🎉" }), setSubroute("home"))}>
          {current < sets.length - 1 ? "Next set" : "Finish"}
          <Icon name="chev-right" size={14}/>
        </Button>
      </div>
    </div>
  );
}

function RecHistory() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Session history"/>
      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Weekly distance</div>
        <BarChart data={[
          { label: "W1", value: 4 }, { label: "W2", value: 6 }, { label: "W3", value: 5 },
          { label: "W4", value: 7 }, { label: "W5", value: 6.2 },
        ]} color="var(--c-recreation)" height={140}/>
      </Card>
      <div className="col" style={{ gap: 8 }}>
        {[
          { date: "Tue May 13", title: "HIIT pool circuit", focus: "HIIT", dist: "1.4km", cal: 380 },
          { date: "Sun May 11", title: "Stroke drill builder", focus: "Technique", dist: "1.0km", cal: 210 },
          { date: "Thu May 8", title: "Easy aerobic", focus: "Endurance", dist: "800m", cal: 165 },
          { date: "Mon May 5", title: "Threshold cruiser", focus: "Cardio", dist: "1.8km", cal: 420 },
        ].map((s, i) => (
          <Card key={i}>
            <div className="between">
              <div>
                <div className="row" style={{ gap: 8 }}>
                  <div style={{ fontWeight: 700 }}>{s.title}</div>
                  <Pill tone="aqua">{s.focus}</Pill>
                </div>
                <div className="t-caption" style={{ marginTop: 2 }}>{s.date}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="t-mono-sm" style={{ fontWeight: 700 }}>{s.dist}</div>
                <div className="t-caption">{s.cal} cal</div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function RecAchievements() {
  const badges = [
    { name: "First Length", color: "var(--mint)", icon: "wave", earned: true, date: "Aug 14, 2024" },
    { name: "10 Sessions", color: "var(--aqua)", icon: "flame", earned: true, date: "Sep 2, 2024" },
    { name: "1k Total", color: "var(--c-openwater)", icon: "trophy", earned: true, date: "Sep 18, 2024" },
    { name: "Early Bird", color: "var(--gold)", icon: "clock", earned: true, date: "Oct 1, 2024" },
    { name: "7-Day Streak", color: "var(--c-recreation)", icon: "flame", earned: true, date: "Oct 22, 2024" },
    { name: "5k Total", color: "var(--mint)", icon: "wave", earned: true, date: "Nov 14, 2024" },
    { name: "Marathon Length", color: "var(--c-competitive)", icon: "medal", earned: false, hint: "Swim 42.2km total" },
    { name: "30-Day Streak", color: "var(--c-recreation)", icon: "flame", earned: false, hint: "Train 30 days in a row" },
    { name: "Night Owl", color: "var(--c-api)", icon: "star", earned: false, hint: "Train past 9 PM" },
  ];

  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Achievements" sub="6 earned · 3 to unlock"/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 12 }}>
        {badges.map((b, i) => (
          <div key={i} style={{
            background: b.earned ? "var(--navy)" : "var(--gray-100)",
            color: b.earned ? "white" : "var(--gray-500)",
            borderRadius: 14, padding: 18, textAlign: "center",
            filter: b.earned ? "none" : "grayscale(0.5)",
            opacity: b.earned ? 1 : 0.65,
          }}>
            <div style={{ position: "relative", marginBottom: 10 }}>
              <Icon name={b.icon} size={40} color={b.earned ? b.color : "var(--gray-400)"}/>
              {!b.earned && <Icon name="lock" size={16} color="var(--gray-500)" style={{ position: "absolute", bottom: -4, right: "calc(50% - 28px)" }}/>}
            </div>
            <div style={{ fontWeight: 700, fontSize: 13 }}>{b.name}</div>
            <div style={{ fontSize: 10, color: b.earned ? "rgba(255,255,255,0.6)" : "var(--gray-500)", marginTop: 4 }}>{b.earned ? b.date : b.hint}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CalorieTracker() {
  return (
    <div className="col" style={{ gap: 16 }}>
      <PageHeader title="Calorie tracker" sub="Estimated burn from your sessions"/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 12 }}>
        <StatCard label="Today" value="380 cal" sub="HIIT pool circuit" accent="var(--c-recreation)"/>
        <StatCard label="This week" value="2,140 cal" sub="≈ 12.8 km running" trend="up" accent="var(--mint)"/>
        <StatCard label="This month" value="9,820 cal" sub="3.2 lb fat equiv." accent="var(--aqua)"/>
      </div>
      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Weekly calorie burn</div>
        <BarChart data={[
          { label: "Mon", value: 290 }, { label: "Tue", value: 380 }, { label: "Wed", value: 0 },
          { label: "Thu", value: 210 }, { label: "Fri", value: 0 }, { label: "Sat", value: 420 }, { label: "Sun", value: 380 },
        ]} color="var(--c-recreation)" height={160}/>
      </Card>
    </div>
  );
}

function Hydration() {
  const [glasses, setGlasses] = useState(5);
  return (
    <div className="col" style={{ gap: 16, maxWidth: 480 }}>
      <PageHeader title="Hydration" sub="Daily goal: 8 glasses (2L)"/>
      <Card style={{ textAlign: "center", padding: 32 }}>
        <div style={{ width: 140, height: 200, margin: "0 auto", position: "relative", border: "3px solid var(--aqua)", borderRadius: "16px 16px 30px 30px", overflow: "hidden" }}>
          <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: `${(glasses / 8) * 100}%`, background: "linear-gradient(180deg, var(--aqua-100), var(--aqua))", transition: "height 600ms ease-out" }}/>
          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: glasses > 3 ? "white" : "var(--aqua)", fontFamily: "var(--f-mono)", fontWeight: 700, fontSize: 32 }}>{glasses}/8</div>
        </div>
        <div className="row" style={{ marginTop: 24, gap: 10, justifyContent: "center" }}>
          <Button variant="secondary" onClick={() => setGlasses(Math.max(0, glasses - 1))}><Icon name="x" size={14}/></Button>
          <Button variant="primary" onClick={() => setGlasses(Math.min(8, glasses + 1))} icon="plus">Log a glass</Button>
        </div>
      </Card>
    </div>
  );
}

function RecProfile() {
  return (
    <div className="col" style={{ gap: 16, maxWidth: 720 }}>
      <PageHeader title="Profile"/>
      <Card>
        <div className="row" style={{ gap: 16, flexWrap: "wrap" }}>
          <Avatar name="Alex Rivera" size="lg"/>
          <div style={{ flex: 1 }}>
            <div className="t-h1">Alex Rivera</div>
            <div className="muted">Recreational swimmer · Member since Aug 2024</div>
            <div className="row" style={{ marginTop: 10, gap: 6 }}>
              <Pill tone="mint">14-day streak</Pill>
              <Pill tone="aqua">6 badges</Pill>
            </div>
          </div>
          <Button variant="secondary" icon="edit">Edit</Button>
        </div>
      </Card>
      <Card>
        <div className="t-h2" style={{ marginBottom: 14 }}>Fitness goals</div>
        <div className="col" style={{ gap: 12 }}>
          <div className="field"><label>Sessions per week</label><input className="input" type="number" defaultValue="4"/></div>
          <div className="field"><label>Distance per week</label><input className="input" type="number" defaultValue="8000"/></div>
          <div className="field"><label>Body weight</label><input className="input" defaultValue="72 kg"/></div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { OpenWaterPortal, RecPortal });