// Patient dashboard — shows hormones trend, current Rx, messages, upcoming visit

function DashboardPage({ onBack, doctor }) {
  const [tab, setTab] = useS("overview");
  const isMobile = useIsMobile();

  return (
    <div style={{ background: "var(--ink-900)", minHeight: "100vh" }}>
      {/* Top bar */}
      <div style={{ borderBottom: "1px solid var(--line)", padding: isMobile ? "14px 16px" : "16px 32px", display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "stretch" : "center", background: "var(--ink-800)", gap: isMobile ? 12 : 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32 }}>
          <Logo />
          {isMobile && (
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <button onClick={onBack} style={{ background: "transparent", border: "none", color: "var(--cream-400)", fontSize: 12 }}>← Site</button>
              <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--gold-500)", color: "var(--ink-900)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 13 }}>M</div>
            </div>
          )}
        </div>
        <div style={{ display: "flex", gap: 4, overflowX: "auto", scrollbarWidth: "none", WebkitOverflowScrolling: "touch" }}>
          {[
            { id: "overview", label: "Overview" },
            { id: "labs", label: "Labs" },
            { id: "rx", label: "Prescriptions" },
            { id: "messages", label: "Messages" },
            { id: "visits", label: "Visits" },
          ].map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              style={{
                background: tab === t.id ? "var(--ink-700)" : "transparent",
                color: tab === t.id ? "var(--cream-50)" : "var(--cream-400)",
                border: "none", padding: "8px 14px", borderRadius: 8,
                fontSize: 13, whiteSpace: "nowrap", flexShrink: 0,
              }}
            >{t.label}</button>
          ))}
        </div>
        {!isMobile && (
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <button onClick={onBack} style={{ background: "transparent", border: "none", color: "var(--cream-400)", fontSize: 13 }}>← Marketing site</button>
            <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--gold-500)", color: "var(--ink-900)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600 }}>M</div>
          </div>
        )}
      </div>

      <div style={{ padding: isMobile ? "24px 16px 80px" : "40px 32px", maxWidth: 1280, margin: "0 auto" }}>
        {tab === "overview" && <OverviewTab doctor={doctor} />}
        {tab === "labs" && <LabsTab />}
        {tab === "rx" && <RxTab />}
        {tab === "messages" && <MessagesTab doctor={doctor} />}
        {tab === "visits" && <VisitsTab doctor={doctor} />}
      </div>
    </div>
  );
}

function OverviewTab({ doctor }) {
  const isMobile = useIsMobile();
  return (
    <div>
      <div style={{ marginBottom: 32, display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "flex-end", gap: isMobile ? 12 : 0 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Welcome back</div>
          <h1 className="display" style={{ fontSize: isMobile ? 32 : 44, margin: 0 }}>Good morning, <span className="serif-italic" style={{ color: "var(--gold-500)" }}>Marcus</span>.</h1>
        </div>
        <div style={{ fontSize: 13, color: "var(--cream-400)" }}>Tuesday, May 5 · Day 84 on protocol</div>
      </div>

      {/* Top alert */}
      <div style={{ background: "linear-gradient(90deg, rgba(13,110,201,0.12), transparent)", border: "1px solid var(--gold-700)", borderRadius: 12, padding: 20, marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--gold-500)", color: "var(--ink-900)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <ServiceIcon id="labs" size={20} color="var(--ink-900)" />
          </div>
          <div>
            <div style={{ fontSize: 14, color: "var(--cream-50)", fontWeight: 500 }}>Your week-12 labs are ready</div>
            <div style={{ fontSize: 13, color: "var(--cream-300)" }}>{doctor.name} reviewed them this morning. Notes in the report.</div>
          </div>
        </div>
        <button className="btn btn-primary btn-sm">View results <ArrowRight size={12} /></button>
      </div>

      {/* 3-up stat cards */}
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr 1fr", gap: 16, marginBottom: 24 }}>
        <BigChartCard />
        <KPICard label="Energy" value="8.2" change="+5.0" unit="/10" tone="success" />
        <KPICard label="Body fat" value="18%" change="−6%" unit="" tone="success" />
      </div>

      {/* Two columns */}
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr", gap: 16 }}>
        <ProtocolPanel />
        <UpNextPanel doctor={doctor} />
      </div>
    </div>
  );
}

function BigChartCard() {
  // Hand-drawn line chart for total testosterone over 12 weeks
  const points = [287, 320, 410, 520, 612, 690, 740, 770, 800, 830, 855, 872];
  const min = 200, max = 1000;
  const w = 480, h = 180, pad = 24;
  const x = (i) => pad + (i / (points.length - 1)) * (w - pad * 2);
  const y = (v) => h - pad - ((v - min) / (max - min)) * (h - pad * 2);
  const path = points.map((v, i) => `${i === 0 ? "M" : "L"} ${x(i)} ${y(v)}`).join(" ");
  const area = path + ` L ${x(points.length - 1)} ${h - pad} L ${x(0)} ${h - pad} Z`;

  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
        <div>
          <div className="label-sm">Total testosterone</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
            <span className="display tab-num" style={{ fontSize: 44, color: "var(--cream-50)" }}>872</span>
            <span style={{ fontSize: 14, color: "var(--cream-400)" }}>ng/dL</span>
            <span className="chip" style={{ background: "rgba(111,166,136,0.12)", borderColor: "var(--success)", color: "var(--success)", fontSize: 11 }}>↑ +204% vs baseline</span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 4 }}>
          {["12w", "6mo", "1y", "All"].map((p, i) => (
            <button key={p} style={{
              background: i === 0 ? "var(--ink-600)" : "transparent",
              color: i === 0 ? "var(--cream-50)" : "var(--cream-400)",
              border: "none", padding: "6px 10px", borderRadius: 6, fontSize: 12,
            }}>{p}</button>
          ))}
        </div>
      </div>

      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto" }}>
        <defs>
          <linearGradient id="trtgrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(13,110,201,0.35)" />
            <stop offset="100%" stopColor="rgba(13,110,201,0)" />
          </linearGradient>
        </defs>
        {/* Optimal range band */}
        <rect x={pad} y={y(916)} width={w - pad * 2} height={y(264) - y(916)} fill="rgba(13,110,201,0.05)" />
        <line x1={pad} y1={y(916)} x2={w - pad} y2={y(916)} stroke="rgba(13,110,201,0.3)" strokeDasharray="3 3" />
        <line x1={pad} y1={y(264)} x2={w - pad} y2={y(264)} stroke="rgba(13,110,201,0.3)" strokeDasharray="3 3" />
        <text x={w - pad - 4} y={y(916) - 6} fill="var(--cream-500)" fontSize="10" textAnchor="end">Upper · 916</text>
        <text x={w - pad - 4} y={y(264) + 14} fill="var(--cream-500)" fontSize="10" textAnchor="end">Lower · 264</text>
        {/* Area */}
        <path d={area} fill="url(#trtgrad)" />
        {/* Line */}
        <path d={path} fill="none" stroke="var(--gold-500)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
        {/* Last point */}
        <circle cx={x(points.length - 1)} cy={y(points[points.length - 1])} r="5" fill="var(--gold-500)" stroke="var(--ink-800)" strokeWidth="2" />
      </svg>
    </div>
  );
}

function KPICard({ label, value, change, unit, tone }) {
  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
      <div className="label-sm">{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 16 }}>
        <span className="display tab-num" style={{ fontSize: 44, color: "var(--cream-50)" }}>{value}</span>
        <span style={{ fontSize: 14, color: "var(--cream-400)" }}>{unit}</span>
      </div>
      <div style={{ marginTop: 8, fontSize: 12, color: tone === "success" ? "var(--success)" : "var(--danger)" }}>
        {change} · 12 weeks
      </div>
      <div style={{ marginTop: 16, height: 32, position: "relative" }}>
        <Sparkline />
      </div>
    </div>
  );
}

function Sparkline() {
  const pts = [3, 3.5, 4, 4.2, 5, 5.6, 6.2, 6.8, 7.2, 7.6, 8, 8.2];
  const min = 0, max = 10;
  const w = 200, h = 32;
  const x = (i) => (i / (pts.length - 1)) * w;
  const y = (v) => h - ((v - min) / (max - min)) * h;
  const path = pts.map((v, i) => `${i === 0 ? "M" : "L"} ${x(i)} ${y(v)}`).join(" ");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "100%" }}>
      <path d={path} fill="none" stroke="var(--gold-500)" strokeWidth="1.5" />
    </svg>
  );
}

function ProtocolPanel() {
  const meds = [
    { name: "Testosterone Cypionate", spec: "200 mg/mL", dose: "0.5 mL · weekly · subcutaneous", next: "Friday, May 9", refill: 18 },
    { name: "HCG", spec: "5,000 IU", dose: "500 IU · 2× weekly", next: "Wednesday, May 7", refill: 24 },
  ];
  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
        <div className="display" style={{ fontSize: 22 }}>Current protocol</div>
        <button className="btn btn-ghost btn-sm">View history</button>
      </div>
      {meds.map((m, i) => (
        <div key={m.name} style={{ display: "grid", gridTemplateColumns: "1fr auto", padding: "20px 0", borderTop: "1px solid var(--line)", gap: 16, alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 15, color: "var(--cream-50)", marginBottom: 4 }}>{m.name} <span style={{ color: "var(--cream-500)", fontFamily: "var(--font-mono)", fontSize: 13 }}>· {m.spec}</span></div>
            <div style={{ fontSize: 13, color: "var(--cream-400)" }}>{m.dose}</div>
            <div style={{ fontSize: 12, color: "var(--cream-500)", marginTop: 8, display: "flex", gap: 16 }}>
              <span>Next dose · <span style={{ color: "var(--cream-200)" }}>{m.next}</span></span>
              <span>Refill in · <span style={{ color: "var(--cream-200)" }}>{m.refill} days</span></span>
            </div>
          </div>
          <div style={{ width: 56, height: 56, borderRadius: "50%", border: "2px solid var(--gold-500)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div className="display tab-num" style={{ fontSize: 18, color: "var(--gold-500)" }}>{m.refill}</div>
          </div>
        </div>
      ))}
      <button style={{ width: "100%", marginTop: 16 }} className="btn btn-ghost">Message physician about protocol</button>
    </div>
  );
}

function UpNextPanel({ doctor }) {
  return (
    <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
      <div className="display" style={{ fontSize: 22, marginBottom: 20 }}>Up next</div>
      {/* Visit card */}
      <div style={{ padding: 16, border: "1px solid var(--gold-700)", borderRadius: 10, background: "rgba(13,110,201,0.04)", marginBottom: 12 }}>
        <div className="label-sm" style={{ color: "var(--gold-500)", marginBottom: 10 }}>Upcoming visit</div>
        <div className="display" style={{ fontSize: 18, marginBottom: 4 }}>12-week check-in</div>
        <div style={{ fontSize: 13, color: "var(--cream-300)", marginBottom: 12 }}>With {doctor.name}</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 12, borderTop: "1px solid var(--line)" }}>
          <div className="tab-num" style={{ fontSize: 14 }}>Thu, May 7 · 4:30 PM</div>
          <button className="btn btn-primary btn-sm">Join</button>
        </div>
      </div>
      {/* Next refill */}
      <div style={{ padding: 16, border: "1px solid var(--line-strong)", borderRadius: 10, marginBottom: 12 }}>
        <div className="label-sm" style={{ marginBottom: 8 }}>Next shipment</div>
        <div style={{ fontSize: 14, color: "var(--cream-200)" }}>Monthly refill</div>
        <div style={{ fontSize: 12, color: "var(--cream-400)", marginTop: 4 }}>Ships Tuesday · arrives by Thursday</div>
      </div>
      {/* Lab kit */}
      <div style={{ padding: 16, border: "1px solid var(--line-strong)", borderRadius: 10 }}>
        <div className="label-sm" style={{ marginBottom: 8 }}>Bloodwork</div>
        <div style={{ fontSize: 14, color: "var(--cream-200)" }}>Schedule by July 18</div>
        <div style={{ fontSize: 12, color: "var(--cream-400)", marginTop: 4 }}>Any LabCorp · 7 min</div>
      </div>
    </div>
  );
}

function LabsTab() {
  const labs = [
    { name: "Total Testosterone", value: 872, unit: "ng/dL", range: [264, 916], status: "optimal" },
    { name: "Free Testosterone", value: 22.4, unit: "pg/mL", range: [9.3, 26.5], status: "optimal" },
    { name: "Estradiol (E2)", value: 32, unit: "pg/mL", range: [11, 44], status: "optimal" },
    { name: "SHBG", value: 28, unit: "nmol/L", range: [10, 57], status: "optimal" },
    { name: "Hematocrit", value: 49.2, unit: "%", range: [38.8, 50], status: "watch" },
    { name: "PSA", value: 0.8, unit: "ng/mL", range: [0, 4], status: "optimal" },
    { name: "Cortisol AM", value: 14.2, unit: "µg/dL", range: [6.2, 19.4], status: "optimal" },
    { name: "TSH", value: 1.8, unit: "mIU/L", range: [0.4, 4.5], status: "optimal" },
  ];
  return (
    <div>
      <div style={{ marginBottom: 32 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Lab results</div>
        <h1 className="display" style={{ fontSize: 40, margin: 0 }}>Week 12 panel</h1>
        <div style={{ fontSize: 13, color: "var(--cream-400)", marginTop: 8 }}>Drawn April 28, 2026 · LabCorp Austin · Reviewed by {doctor_name_placeholder()}</div>
      </div>
      <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
        {labs.map((l, i) => (
          <LabRow key={l.name} lab={l} top={i === 0} />
        ))}
      </div>
    </div>
  );
}
function doctor_name_placeholder() { return "Dr. Whitford"; }

function LabRow({ lab, top }) {
  const pct = ((lab.value - lab.range[0]) / (lab.range[1] - lab.range[0])) * 100;
  const tone = lab.status === "watch" ? "var(--danger)" : "var(--success)";
  const isMobile = useIsMobile();
  if (isMobile) {
    return (
      <div style={{ padding: "18px 20px", borderTop: top ? "none" : "1px solid var(--line)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
          <div style={{ fontSize: 14, color: "var(--cream-50)" }}>{lab.name}</div>
          <div className="display tab-num" style={{ fontSize: 20, color: "var(--cream-50)" }}>
            {lab.value}<span style={{ fontSize: 12, color: "var(--cream-500)", marginLeft: 4 }}>{lab.unit}</span>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ position: "relative", height: 6, borderRadius: 3, background: "var(--ink-600)", flex: 1 }}>
            <div style={{ position: "absolute", left: "10%", right: "10%", top: 0, bottom: 0, background: "rgba(13,110,201,0.15)", borderRadius: 3 }}></div>
            <div style={{ position: "absolute", left: `calc(10% + ${pct * 0.8}% - 6px)`, top: -3, width: 12, height: 12, borderRadius: 6, background: tone, border: "2px solid var(--ink-800)" }}></div>
          </div>
          <div style={{ fontSize: 11, color: tone, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em" }}>
            {lab.status === "watch" ? "Watch" : "Optimal"}
          </div>
        </div>
      </div>
    );
  }
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1.4fr 100px 2fr 100px",
      gap: 24, padding: "20px 24px", alignItems: "center",
      borderTop: top ? "none" : "1px solid var(--line)",
    }}>
      <div style={{ fontSize: 15, color: "var(--cream-50)" }}>{lab.name}</div>
      <div className="display tab-num" style={{ fontSize: 22, color: "var(--cream-50)" }}>
        {lab.value}<span style={{ fontSize: 12, color: "var(--cream-500)", marginLeft: 4 }}>{lab.unit}</span>
      </div>
      <div style={{ position: "relative", height: 6, borderRadius: 3, background: "var(--ink-600)" }}>
        <div style={{ position: "absolute", left: "10%", right: "10%", top: 0, bottom: 0, background: "rgba(13,110,201,0.15)", borderRadius: 3 }}></div>
        <div style={{ position: "absolute", left: `calc(10% + ${pct * 0.8}% - 6px)`, top: -3, width: 12, height: 12, borderRadius: 6, background: tone, border: "2px solid var(--ink-800)" }}></div>
      </div>
      <div style={{ textAlign: "right", fontSize: 12, color: tone, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em" }}>
        {lab.status === "watch" ? "Watch" : "Optimal"}
      </div>
    </div>
  );
}

function RxTab() {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Prescriptions</div>
      <h1 className="display" style={{ fontSize: 40, margin: 0, marginBottom: 32 }}>Active prescriptions</h1>
      <ProtocolPanel />
    </div>
  );
}

function MessagesTab({ doctor }) {
  const isMobile = useIsMobile();
  const messages = [
    { from: "doc", time: "8:24 AM", body: "Marcus, your week-12 labs look great. Total T at 872, free T 22.4, E2 perfectly in range. Hematocrit ticked up to 49.2 — still in range but worth watching. I'd like you to donate blood once before your next labs. Otherwise, no protocol changes." },
    { from: "me", time: "8:41 AM", body: "Thanks Doc. Will book a donation this week. Quick question — sleep is way better but I'm noticing a little more morning erections. Normal?" },
    { from: "doc", time: "9:03 AM", body: "Very normal — and a good sign. Morning erections are one of the better real-world markers of free T and overall health. Expect this to continue." },
    { from: "me", time: "9:05 AM", body: "Best news I've heard all month." },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 2.4fr", gap: 16, height: isMobile ? "auto" : "calc(100vh - 220px)" }}>
      <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 16, display: isMobile ? "none" : "block" }}>
        <div className="label-sm" style={{ marginBottom: 12 }}>Conversations</div>
        <div style={{ padding: 12, background: "var(--ink-700)", borderRadius: 8, display: "flex", gap: 12, alignItems: "center" }}>
          <div style={{ width: 36, height: 36, borderRadius: "50%", background: `url(${PHOTOS.doctor}) center/cover` }}></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, color: "var(--cream-50)" }}>{doctor.name.split(" ").slice(-1)[0]}</div>
            <div style={{ fontSize: 12, color: "var(--cream-400)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Very normal — and a good sign...</div>
          </div>
          <span style={{ fontSize: 11, color: "var(--cream-500)" }}>9:03</span>
        </div>
      </div>
      <div style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, display: "flex", flexDirection: "column" }}>
        <div style={{ padding: 16, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: "50%", background: `url(${PHOTOS.doctor}) center/cover` }}></div>
          <div>
            <div style={{ fontSize: 14, color: "var(--cream-50)" }}>{doctor.name}</div>
            <div style={{ fontSize: 12, color: "var(--success)" }}>● Online · Replies usually within an hour</div>
          </div>
        </div>
        <div style={{ flex: 1, overflow: "auto", padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
          {messages.map((m, i) => (
            <div key={i} style={{ display: "flex", justifyContent: m.from === "me" ? "flex-end" : "flex-start" }}>
              <div style={{
                maxWidth: 540, padding: "12px 16px", borderRadius: 12,
                background: m.from === "me" ? "var(--gold-500)" : "var(--ink-700)",
                color: m.from === "me" ? "var(--ink-900)" : "var(--cream-50)",
                fontSize: 14, lineHeight: 1.5,
              }}>
                {m.body}
                <div style={{ fontSize: 11, opacity: 0.6, marginTop: 6 }}>{m.time}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: 16, borderTop: "1px solid var(--line)", display: "flex", gap: 8 }}>
          <input className="input" placeholder="Message Dr. Whitford..." />
          <button className="btn btn-primary">Send</button>
        </div>
      </div>
    </div>
  );
}

function VisitsTab({ doctor }) {
  const isMobile = useIsMobile();
  const upcoming = [
    { date: "Thu May 7", time: "4:30 PM", type: "12-week check-in", who: doctor.name, status: "confirmed" },
  ];
  const past = [
    { date: "Feb 12", type: "Initial consultation", who: doctor.name, notes: "Baseline workup. Started TRT protocol." },
    { date: "Mar 28", type: "6-week check-in", who: doctor.name, notes: "Adjusted dose to 0.5 mL weekly. Estradiol stable, no AI needed." },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 24 }}>
      <div>
        <h2 className="display" style={{ fontSize: 28, margin: 0, marginBottom: 16 }}>Upcoming</h2>
        {upcoming.map((v) => (
          <div key={v.date} style={{ background: "var(--ink-800)", border: "1px solid var(--gold-700)", borderRadius: 12, padding: 24, marginBottom: 12 }}>
            <div style={{ fontSize: 12, color: "var(--gold-500)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>● {v.status}</div>
            <div className="display" style={{ fontSize: 22, marginBottom: 6 }}>{v.type}</div>
            <div style={{ fontSize: 14, color: "var(--cream-300)", marginBottom: 16 }}>{v.who} · video visit</div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--line)" }}>
              <div className="tab-num" style={{ fontSize: 14 }}>{v.date} · {v.time}</div>
              <button className="btn btn-primary btn-sm">Join visit</button>
            </div>
          </div>
        ))}
        <button className="btn btn-ghost" style={{ marginTop: 8 }}>+ Schedule visit</button>
      </div>
      <div>
        <h2 className="display" style={{ fontSize: 28, margin: 0, marginBottom: 16 }}>Past visits</h2>
        {past.map((v) => (
          <div key={v.date} style={{ background: "var(--ink-800)", border: "1px solid var(--line)", borderRadius: 12, padding: 20, marginBottom: 12 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
              <div className="display" style={{ fontSize: 18 }}>{v.type}</div>
              <div className="tab-num" style={{ fontSize: 12, color: "var(--cream-400)" }}>{v.date}</div>
            </div>
            <div style={{ fontSize: 13, color: "var(--cream-300)", marginBottom: 10 }}>{v.who}</div>
            <div style={{ fontSize: 13, color: "var(--cream-400)", padding: 12, background: "var(--ink-700)", borderRadius: 6, lineHeight: 1.5 }}>
              <span style={{ color: "var(--cream-500)" }}>Note: </span>{v.notes}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPage });