/* Tokens viewer — copy-paste blocks for tokens.css, tailwind, theme.ts */

const TOKEN_FILES = {
  "tokens.css": `:root {
  --zo-sapphire: #1A2D6B;
  --zo-rose-gold: #B76E79;
  --zo-ivory: #FBF8F3;
  --zo-champagne: #E8DCC4;
  --zo-cream: #F4EDE0;

  --md-primary: var(--zo-sapphire-30);
  --md-on-primary: #FFFFFF;
  --md-secondary: var(--zo-rose-50);
  --md-surface: var(--zo-ivory);
  /* …full set in tokens/tokens.css */
}`,
  "tailwind.config.js": `module.exports = {
  theme: {
    extend: {
      colors: {
        sapphire: { DEFAULT: "#1A2D6B", 30: "#1A2D6B", 50: "#324BA3", /*…*/ },
        rose:     { DEFAULT: "#B76E79", 50: "#B76E79", 90: "#F5DFE2", /*…*/ },
        ivory:    "#FBF8F3",
        cream:    "#F4EDE0",
      },
      fontFamily: {
        display: ['"Playfair Display"', "Georgia", "serif"],
        body:    ["Inter", "sans-serif"],
      },
      fontSize: {
        "display-lg":  ["57px", { lineHeight: "64px", letterSpacing: "-0.25px" }],
        "headline-lg": ["32px", { lineHeight: "40px" }],
        /* …full MD3 scale in tokens/tailwind.config.js */
      },
      borderRadius: { md: "12px", lg: "20px", xl: "28px", "2xl": "36px" },
    }
  }
};`,
  "theme.ts": `import theme from "./theme";

// MUI / React usage
const muiTheme = createTheme({
  palette: {
    primary:   { main: theme.light.primary },
    secondary: { main: theme.light.secondary },
    background:{ default: theme.light.background, paper: theme.light.surface },
  },
  typography: {
    fontFamily: theme.typography.fontFamily.body,
    h1: { fontFamily: theme.typography.fontFamily.display, fontSize: 57 },
  },
  shape: { borderRadius: theme.shape.lg },
});`,
};

function TokensSection({ onCopy }) {
  const [active, setActive] = React.useState("tokens.css");
  return (
    <section id="tokens" className="zo-section">
      <div className="zo-section-eyebrow">05 — Tokens</div>
      <h2 className="zo-section-title">One source. Three formats.</h2>
      <p className="zo-section-lede">
        The full token files live in <code className="zo-mono" style={{ background: "var(--md-surface-container)", padding: "2px 6px", borderRadius: 4 }}>/tokens</code>. Quick previews below — click <em>Copy</em> for the snippet.
      </p>

      <div style={{ display: "flex", gap: 4, marginBottom: 0, padding: 4, background: "var(--md-surface-container)", borderRadius: "var(--shape-md) var(--shape-md) 0 0", width: "fit-content" }}>
        {Object.keys(TOKEN_FILES).map(f => (
          <button
            key={f}
            onClick={() => setActive(f)}
            style={{
              padding: "8px 18px",
              fontFamily: "ui-monospace, monospace",
              fontSize: 12,
              border: "none",
              borderRadius: "var(--shape-sm)",
              background: active === f ? "var(--md-surface)" : "transparent",
              color: active === f ? "var(--md-primary)" : "var(--md-on-surface-variant)",
              fontWeight: 600,
              cursor: "pointer",
              transition: "all 150ms",
            }}
          >
            {f}
          </button>
        ))}
      </div>
      <div style={{
        background: "var(--md-inverse-surface)",
        color: "var(--md-inverse-on-surface)",
        padding: "24px 28px",
        borderRadius: "0 var(--shape-lg) var(--shape-lg) var(--shape-lg)",
        fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace",
        fontSize: 13, lineHeight: 1.6,
        position: "relative",
        overflow: "auto",
      }}>
        <button
          onClick={() => onCopy(TOKEN_FILES[active], `${active} snippet copied`)}
          style={{
            position: "absolute", top: 12, right: 12,
            padding: "6px 14px",
            background: "var(--zo-rose-50)", color: "white",
            border: "none", borderRadius: 9999,
            fontSize: 11, fontWeight: 600, letterSpacing: 0.4,
            cursor: "pointer",
          }}
        >COPY</button>
        <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>{TOKEN_FILES[active]}</pre>
      </div>
    </section>
  );
}

window.TokensSection = TokensSection;