export function TypographySamples() {
  return (
    <div className="space-y-10">
      {/* Serif - Source Serif Pro */}
      <div className="border border-border rounded-md p-6 bg-card">
        <div className="flex items-center gap-3 mb-6">
          <span className="font-sans text-xs font-semibold uppercase tracking-wide text-primary bg-primary/10 px-2 py-1 rounded">
            Primary
          </span>
          <h4 className="font-sans text-sm font-semibold text-muted-foreground">
            Source Serif Pro — Reading & Explanation
          </h4>
        </div>
        
        <div className="space-y-6">
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Display / H1</p>
            <p className="font-serif text-4xl font-semibold tracking-tight">
              Local-first AI systems shaped by real work
            </p>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H2</p>
            <p className="font-serif text-2xl font-semibold tracking-tight">
              Built where work happens. Contained end to end.
            </p>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Heading / H3</p>
            <p className="font-serif text-xl font-medium">
              Systems run inside the perimeter. Nothing leaks.
            </p>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Body</p>
            <p className="font-serif text-base leading-relaxed text-muted-foreground max-w-2xl">
              Real work is messy, distributed, and embedded in internal systems. Cloud AI often 
              cannot operate there. Useful AI runs inside the environment and supports human 
              decision-making — not abstract it away. We sit with the operators, map the steps, 
              and build a system that mirrors what actually happens.
            </p>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Small / Caption</p>
            <p className="font-serif text-sm text-muted-foreground">
              Powered by Monadical&apos;s internal, open-source stack hardened over eight years.
            </p>
          </div>
        </div>
      </div>

      {/* Sans - Aspekta */}
      <div className="border border-border rounded-md p-6 bg-card">
        <div className="flex items-center gap-3 mb-6">
          <span className="font-sans text-xs font-semibold uppercase tracking-wide text-muted-foreground bg-muted px-2 py-1 rounded">
            Secondary
          </span>
          <h4 className="font-sans text-sm font-semibold text-muted-foreground">
            Aspekta — UI, Navigation & Labels
          </h4>
        </div>
        
        <div className="space-y-6">
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Navigation</p>
            <div className="flex gap-6">
              <span className="font-sans text-sm font-medium">Overview</span>
              <span className="font-sans text-sm font-medium text-primary">Documentation</span>
              <span className="font-sans text-sm font-medium">Support</span>
              <span className="font-sans text-sm font-medium">Contact</span>
            </div>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Button Text</p>
            <div className="flex gap-4">
              <span className="font-sans text-sm font-semibold">Get Started</span>
              <span className="font-sans text-sm font-medium">Learn More</span>
              <span className="font-sans text-xs font-semibold uppercase tracking-wide">View All</span>
            </div>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Labels & Form Elements</p>
            <div className="flex flex-wrap gap-4">
              <span className="font-sans text-sm font-medium">Email Address</span>
              <span className="font-sans text-xs text-muted-foreground">Optional</span>
              <span className="font-sans text-xs font-medium text-destructive">Required field</span>
            </div>
          </div>
          
          <div>
            <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Status & Metadata</p>
            <div className="flex flex-wrap gap-4">
              <span className="font-sans text-xs font-medium bg-primary/10 text-primary px-2 py-0.5 rounded">Active</span>
              <span className="font-sans text-xs font-medium bg-muted text-muted-foreground px-2 py-0.5 rounded">Pending</span>
              <span className="font-sans text-xs text-muted-foreground">Last updated: 2 hours ago</span>
            </div>
          </div>
        </div>
      </div>

      {/* Type Scale Reference */}
      <div className="border border-border rounded-md p-6 bg-card">
        <h4 className="font-sans text-sm font-semibold text-muted-foreground mb-4 uppercase tracking-wide">
          Type Scale — Brand Guidelines v1.1
        </h4>
        <div className="overflow-x-auto">
          <table className="w-full text-sm font-sans">
            <thead>
              <tr className="border-b border-border text-left">
                <th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Level</th>
                <th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Print ref</th>
                <th className="pb-2 pr-6 font-medium text-muted-foreground text-xs uppercase tracking-wide">Web token</th>
                <th className="pb-2 font-medium text-muted-foreground text-xs uppercase tracking-wide">Tracking</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {[
                { level: "Display", print: "136pt", token: "--type-display", tracking: "−1%" },
                { level: "H1", print: "68pt", token: "--type-h1", tracking: "−1%" },
                { level: "H2", print: "51pt", token: "--type-h2", tracking: "−1%" },
                { level: "H3", print: "40pt", token: "--type-h3", tracking: "−1%" },
                { level: "H4", print: "36pt", token: "--type-h4", tracking: "−1%" },
                { level: "Body", print: "18px", token: "--type-body-lg", tracking: "2%" },
                { level: "Body sm", print: "15px", token: "--type-body-sm", tracking: "2%" },
                { level: "Caption", print: "10pt", token: "--type-caption", tracking: "2%" },
              ].map((row) => (
                <tr key={row.level}>
                  <td className="py-2 pr-6 font-medium">{row.level}</td>
                  <td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.print}</td>
                  <td className="py-2 pr-6 text-muted-foreground font-mono text-xs">{row.token}</td>
                  <td className="py-2 text-muted-foreground font-mono text-xs">{row.tracking}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Font Stack Reference */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="border border-border rounded-md p-4 bg-card">
          <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-2">Primary — Serif</p>
          <p className="font-mono text-xs text-muted-foreground">
            &apos;Source Serif Pro&apos;, &apos;Source Serif 4&apos;, Georgia, serif
          </p>
        </div>
        <div className="border border-border rounded-md p-4 bg-card">
          <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Secondary — Sans</p>
          <p className="font-mono text-xs text-muted-foreground">
            &apos;Aspekta&apos;, ui-sans-serif, system-ui, sans-serif
          </p>
        </div>
        <div className="border border-border rounded-md p-4 bg-card">
          <p className="font-sans text-xs text-muted-foreground uppercase tracking-wide mb-1">Logo only</p>
          <p className="font-mono text-xs text-muted-foreground mb-2">
            Circular Medium
          </p>
          <p className="font-sans text-xs text-muted-foreground">
            Used exclusively for the Greyhaven wordmark and product logos. Do not use in UI.
          </p>
        </div>
      </div>
    </div>
  )
}