/* Typography tab — three font cards, type scale, wordmark light + dark */
const TypographyTab = () => {
  const fonts = [
    {
      eyebrow: "DISPLAY & UI",
      family: "Aptos Display",
      fallback: "Inter, system-ui",
      use: "Headlines, surface titles, navigation, eyebrows. Set tight; let counters breathe.",
      stack: '"Aptos Display", "Aptos", "Inter", system-ui, sans-serif',
      sample: "Brand & Style",
      sampleSize: 44,
      tracking: "-0.02em",
      weight: 700,
    },
    {
      eyebrow: "BODY",
      family: "Aptos",
      fallback: "Inter, system-ui",
      use: "Long-form copy, table cells, captions. Neutral tracking, generous leading.",
      stack: '"Aptos", "Inter", system-ui, sans-serif',
      sample: "Engineers who learned compliance, not auditors who learned cloud.",
      sampleSize: 18,
      tracking: "0",
      weight: 400,
    },
    {
      eyebrow: "MONO",
      family: "JetBrains Mono",
      fallback: "ui-monospace, Menlo",
      use: "Hex codes, identifiers, terminal output, table numerics where alignment matters.",
      stack: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
      sample: "const primary = '#4353FF'",
      sampleSize: 18,
      tracking: "0",
      weight: 500,
    },
  ];

  return (
    <div className="space-y-12">
      {/* Font cards */}
      <section>
        <SectionEyebrow number="10" label="Typefaces" />
        <div className="grid md:grid-cols-3 gap-4">
          {fonts.map((f) => (
            <Card key={f.family}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], marginBottom: 14 }}>
                {f.eyebrow}
              </div>
              <div style={{ fontFamily: f.stack, fontSize: f.sampleSize, fontWeight: f.weight, letterSpacing: f.tracking, color: BRAND.ink.body, lineHeight: 1.15, minHeight: 96 }}>
                {f.sample}
              </div>
              <div className="mt-5 pt-4" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>{f.family}</div>
                <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
                  fallback: {f.fallback}
                </div>
                <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: 10 }}>{f.use}</p>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* Type scale */}
      <section>
        <SectionEyebrow number="11" label="Type Scale" />
        <Card padding={0} style={{ overflow: "hidden" }}>
          <div className="grid" style={{ gridTemplateColumns: "minmax(220px, 320px) 1fr" }}>
            <div style={{ background: BRAND.primary[500], color: "#fff", padding: "14px 20px", fontSize: 11, fontWeight: 700, letterSpacing: "0.18em" }}>
              NAME · SPEC
            </div>
            <div style={{ background: BRAND.primary[500], color: "#fff", padding: "14px 20px", fontSize: 11, fontWeight: 700, letterSpacing: "0.18em" }}>
              LIVE SAMPLE
            </div>
            {TYPE_SCALE.map((t, i) => {
              const fontStack = t.mono
                ? '"JetBrains Mono", ui-monospace, Menlo, monospace'
                : '"Aptos Display", "Aptos", "Inter", system-ui, sans-serif';
              const sampleColor =
                t.color === "primary500" ? BRAND.primary[500]
                : t.color === "subtle" ? BRAND.ink.subtle
                : BRAND.ink.body;
              return (
                <React.Fragment key={t.name}>
                  <div
                    style={{
                      padding: "20px 20px",
                      borderTop: `1px solid ${BRAND.surface.border}`,
                      borderRight: `1px solid ${BRAND.surface.border}`,
                      background: i % 2 === 0 ? BRAND.surface.card : BRAND.surface.canvas,
                    }}
                  >
                    <div style={{ fontSize: 14, fontWeight: 700, color: BRAND.ink.body }}>{t.name}</div>
                    <div className="font-mono mt-1" style={{ fontSize: 12, color: BRAND.ink.subtle, lineHeight: 1.5 }}>
                      {t.size}px · {t.weight} · {t.tracking || "0"}{t.upper ? " · upper" : ""}
                    </div>
                  </div>
                  <div
                    style={{
                      padding: "20px 24px",
                      borderTop: `1px solid ${BRAND.surface.border}`,
                      background: i % 2 === 0 ? BRAND.surface.card : BRAND.surface.canvas,
                      display: "flex",
                      alignItems: "center",
                      minHeight: 70,
                    }}
                  >
                    <span
                      style={{
                        fontFamily: fontStack,
                        fontSize: Math.min(t.size, 56),
                        fontWeight: t.weight,
                        letterSpacing: t.tracking || "normal",
                        color: sampleColor,
                        textTransform: t.upper ? "uppercase" : "none",
                        lineHeight: 1.15,
                      }}
                    >
                      {t.sample}
                    </span>
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </Card>
      </section>

      {/* Wordmark */}
      <section>
        <SectionEyebrow number="12" label="Wordmark" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          The wordmark is the only place the brand uses spaced all-caps. Letter-spacing 0.25em. Never set tighter, never set in mixed case.
        </p>
        <div className="grid md:grid-cols-2 gap-4">
          <Card padding={0} style={{ overflow: "hidden" }}>
            <div style={{ background: BRAND.surface.card, padding: "56px 32px", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span style={{
                fontFamily: '"Aptos Display", "Aptos", "Inter", sans-serif',
                fontSize: 32,
                fontWeight: 700,
                letterSpacing: "0.25em",
                color: BRAND.ink.body,
              }}>
                B L A D E S T A C K
              </span>
            </div>
            <div className="px-5 py-3" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
              <span className="font-mono" style={{ fontSize: 12, color: BRAND.ink.subtle }}>light surface · ink.body</span>
            </div>
          </Card>
          <Card padding={0} style={{ overflow: "hidden", border: `1px solid ${BRAND.dark.navyAccent}` }}>
            <div style={{ background: BRAND.dark.navy, padding: "56px 32px", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span style={{
                fontFamily: '"Aptos Display", "Aptos", "Inter", sans-serif',
                fontSize: 32,
                fontWeight: 700,
                letterSpacing: "0.25em",
                color: "#FFFFFF",
              }}>
                B L A D E S T A C K
              </span>
            </div>
            <div className="px-5 py-3" style={{ background: BRAND.dark.navyDeep, borderTop: `1px solid ${BRAND.dark.navyAccent}` }}>
              <span className="font-mono" style={{ fontSize: 12, color: BRAND.dark.slateMuted }}>dark surface · #FFFFFF</span>
            </div>
          </Card>
        </div>
      </section>
    </div>
  );
};

window.TypographyTab = TypographyTab;