export function ColorSwatches() {
  const primaryColors = [
    { name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215", token: "--secondary", pantone: null },
    { name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", token: "--card (dark)", dark: true, pantone: null },
    { name: "Off-black", hex: "#161614", rgb: "22 22 20", token: "--foreground", dark: true, pantone: "PANTONE Black 6 C" },
  ]

  const accentColors = [
    { name: "Orange", hex: "#D95E2A", rgb: "217 94 42", token: "--primary", dark: true, pantone: "PANTONE 1595 C" },
    { name: "Off-white", hex: "#F9F9F7", rgb: "249 249 247", token: "--card", pantone: null },
  ]

  const greyScale = [
    { name: "Grey 1", hex: "#DDDDD7", rgb: "221 221 215" },
    { name: "Grey 2", hex: "#C4C4BD", rgb: "196 196 189" },
    { name: "Grey 3", hex: "#A6A69F", rgb: "166 166 159" },
    { name: "Grey 4", hex: "#7F7F79", rgb: "127 127 121", dark: true },
    { name: "Grey 5", hex: "#575753", rgb: "87 87 83", dark: true },
    { name: "Grey 6", hex: "#F0F0EC", rgb: "240 240 236" },
    { name: "Grey 8", hex: "#2F2F2C", rgb: "47 47 44", dark: true },
  ]

  const semanticTokens = [
    { name: "Background", cssVar: "bg-background", className: "bg-background" },
    { name: "Foreground", cssVar: "bg-foreground", className: "bg-foreground", dark: true },
    { name: "Card", cssVar: "bg-card", className: "bg-card" },
    { name: "Muted", cssVar: "bg-muted", className: "bg-muted" },
    { name: "Secondary", cssVar: "bg-secondary", className: "bg-secondary" },
    { name: "Primary", cssVar: "bg-primary", className: "bg-primary", dark: true },
    { name: "Accent", cssVar: "bg-accent", className: "bg-accent" },
    { name: "Border", cssVar: "bg-border", className: "bg-border" },
  ]

  return (
    <div className="space-y-10">
      {/* Primary Scheme */}
      <div>
        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
          Primary Scheme
        </h4>
        <p className="font-sans text-xs text-muted-foreground mb-4">
          Neutral and minimal. Off-black, warm grey, and white form the base. No gradients, no decorative color.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {primaryColors.map((color) => (
            <div key={color.name} className="border border-border rounded-md overflow-hidden">
              <div
                className="h-24 flex items-end p-3"
                style={{ backgroundColor: color.hex }}
              >
                <span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
                  {color.hex}
                </span>
              </div>
              <div className="p-3 bg-card">
                <p className="font-sans text-sm font-medium">{color.name}</p>
                <p className="font-mono text-xs text-muted-foreground">{color.token}</p>
                {color.pantone && (
                  <p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Accent */}
      <div>
        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-1">
          Accent
        </h4>
        <p className="font-sans text-xs text-muted-foreground mb-4">
          Orange is the single accent — used sparingly to mark what&apos;s active or important.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {accentColors.map((color) => (
            <div key={color.name} className="border border-border rounded-md overflow-hidden">
              <div
                className="h-24 flex items-end p-3"
                style={{ backgroundColor: color.hex }}
              >
                <span className={`font-sans text-xs font-medium ${color.dark ? "text-white" : "text-foreground"}`}>
                  {color.hex}
                </span>
              </div>
              <div className="p-3 bg-card">
                <p className="font-sans text-sm font-medium">{color.name}</p>
                <p className="font-mono text-xs text-muted-foreground">{color.token}</p>
                {color.pantone && (
                  <p className="font-sans text-xs text-muted-foreground mt-0.5">{color.pantone}</p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Grey Scale */}
      <div>
        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
          Grey Scale
        </h4>
        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
          {greyScale.map((color) => (
            <div key={color.name} className="border border-border rounded-md overflow-hidden">
              <div
                className="h-16 flex items-end p-2"
                style={{ backgroundColor: color.hex }}
              >
                <span className={`font-mono text-xs ${color.dark ? "text-white" : "text-foreground"}`}>
                  {color.hex}
                </span>
              </div>
              <div className="p-2 bg-card">
                <p className="font-sans text-xs font-medium truncate">{color.name}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Semantic Tokens */}
      <div>
        <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
          Semantic Tokens
        </h4>
        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
          {semanticTokens.map((token) => (
            <div key={token.name} className="border border-border rounded-md overflow-hidden">
              <div className={`h-16 flex items-end p-2 ${token.className}`}>
                <span className={`font-sans text-xs ${token.dark ? "text-white" : "text-foreground"}`}>
                  {token.name}
                </span>
              </div>
              <div className="p-2 bg-card">
                <p className="font-mono text-xs text-muted-foreground truncate">{token.cssVar}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}