// Shared page header: eyebrow + big Cinzel heading + gold rule + serif subtitle.
function PageHead({ eyebrow, title, subtitle }) {
  return (
    <div style={{ marginBottom: 26 }}>
      <h1 className="rk-display" style={{ font: "600 40px/1 var(--font-display)", letterSpacing: "0.035em", textTransform: "uppercase" }}>{title}</h1>
      <hr className="rk-rule" style={{ width: 72, marginTop: 14 }} />
      {subtitle ? <p className="rk-subtitle" style={{ marginTop: 16, fontSize: 18 }}>{subtitle}</p> : null}
    </div>
  );
}

function OverviewScreen() {
  const { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, StatCard, Badge } = window.ROKKORDesignSystem_4e99ef;
  const I = window.RokkorIcons;
  const recent = [
    ["Refactor the transcription coordinator so the VAD frames emit on their own channel — right now the audio-level events and the state machine are fighting over the same lock.", "6/19/2026, 9:14:02 AM", "Elite · context-aware"],
    ["Can you review the PR when you get a chance? I pulled the grammar adapter into its own crate so we can benchmark it in isolation.", "6/19/2026, 8:47:31 AM", "Parakeet V3 · standard"],
    ["Add exponential backoff around the model download and surface the SHA-256 mismatch as a clear error instead of panicking.", "6/19/2026, 8:32:08 AM", "Elite · context-aware"],
    ["Note to self: the p95 latency regression only shows up on the cold-cache path, so the benchmark needs a warmup pass before it records numbers.", "6/19/2026, 8:05:44 AM", "Parakeet V3 · standard"],
    ["Draft to the design team — the new onboarding tested really well, but let's cut the third screen; people were dropping off before they reached the privacy promise.", "6/18/2026, 5:21:19 PM", "Elite · formal"],
  ];
  return (
    <div style={{ maxWidth: "var(--content-max)" }}>
      <PageHead eyebrow="Overview" title="Overview" subtitle="Your local voice layer. Everything stays on this machine." />

      {/* Privacy notice */}
      <div style={{
        display: "flex", gap: 14, background: "var(--notice-bg)", border: "1px solid var(--notice-border)",
        borderRadius: "var(--radius-xl)", padding: "16px 18px", marginBottom: 24,
      }}>
        <div style={{ color: "var(--oxblood-700)", flex: "none", marginTop: 1 }}><I.Lock size={20} /></div>
        <div>
          <div style={{ font: "600 15px/1.3 var(--font-sans)", color: "var(--oxblood-700)" }}>100% private — your voice never leaves your PC</div>
          <div style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--notice-body)", marginTop: 4 }}>
            Speech-to-text and grammar both run on this device. The only network is the local grammar server on your own machine (localhost) and optional, one-time model downloads you start yourself. No cloud, no upload, no telemetry.
          </div>
        </div>
      </div>

      <div style={{ marginBottom: 26 }}>
        <Button variant="default" size="lg" icon={<I.Mic size={18} />}>Start Dictation</Button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 26 }}>
        <StatCard label="Total recordings" value="4,812" note="All time · 100% local" />
        <StatCard label="Style corrections learned" value="342" note="Improves with every correction" accent="gold" />
        <StatCard label="Memory entries" value="5,154" note="342 local correction vectors" />
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Recent Activity</CardTitle>
          <CardDescription>Last 5 transcriptions</CardDescription>
        </CardHeader>
        <CardContent>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {recent.map((r, i) => (
              <div key={i} style={{ borderLeft: "2px solid var(--oxblood-400)", paddingLeft: 13 }}>
                <div style={{ font: "400 15px/1.4 var(--font-sans)", color: "var(--ink-800)" }}>{r[0]}</div>
                <div style={{ font: "11px/1.3 var(--font-mono)", color: "var(--gold-ink)", marginTop: 3 }}>{r[1]} · {r[2]}</div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <p style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 22 }}>
        Tip: Corrections you make anywhere can be learned instantly — this is how ROKKOR gets smarter over time.
      </p>
      <p style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 14 }}>
        Tip: Open Insights to watch your correction-learning curve — after ~4 months of daily use this install now needs roughly 6× fewer fixes per 100 dictations than week one.
      </p>
    </div>
  );
}

window.RokkorScreens = Object.assign(window.RokkorScreens || {}, { OverviewScreen, PageHead });