export function TypographyDemo() {
  const sizes = [10, 12, 14, 18, 24, 36, 48] as const;
  const sample = "The quick brown fox jumps over the lazy dog";

  return (
    <section>
      <h2 class="text-xl font-bold text-secondary font-display hh-divider-glow">
        Typography & Anti-Aliasing
      </h2>

      <div class="space-y-3">
        {sizes.map((size) => (
          <div>
            <span class="text-xs text-text-dim font-mono mr-3">{size}px</span>
            <span style={{ "font-size": `${size}px` }}>{sample}</span>
          </div>
        ))}

        {/* Bold weight samples */}
        <div class="mt-4 pt-4 border-t border-border">
          <span class="text-xs text-text-dim font-mono mr-3">Bold</span>
          <span class="font-bold text-lg">{sample}</span>
        </div>

        {/* Neon CMYK palette preview */}
        <div class="mt-4 pt-4 border-t border-border">
          <span class="text-xs text-text-dim font-mono mr-3">Palette</span>
          <span class="text-2xl font-bold">
            <span class="text-primary">Cyan </span>
            <span class="text-warning">Yellow </span>
            <span class="text-secondary">Magenta </span>
            <span class="text-text">White</span>
          </span>
        </div>
      </div>
    </section>
  );
}