greyhaven-design-system/components/design-system/typography-samples.tsx

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>

      {/* Font Stack Reference */}
      <div className="grid grid-cols-1 md:grid-cols-2 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">Serif Stack</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-2">Sans Stack</p>
          <p className="font-mono text-xs text-muted-foreground">
            &apos;Aspekta&apos;, ui-sans-serif, system-ui, sans-serif
          </p>
        </div>
      </div>
    </div>
  )
}