/* Colors tab — primary, secondary, surfaces, ink, dark, semantic, diagram */
const ColorsTab = () => {
  const scaleEntries = (scale) =>
    Object.entries(scale).sort((a, b) => Number(a[0]) - Number(b[0]));

  const primaryRoles = {
    50:  "Callout background",
    100: "Soft fill",
    200: "Decorative tint",
    300: "Dark-surface accent text",
    400: "Dark-pairing accent",
    500: "Signature accent",
    600: "Body text on white (AA)",
    700: "Hover, pressed",
    800: "Heavy emphasis",
    900: "Deep accent",
  };
  const secondaryRoles = {
    50:  "Soft callout",
    100: "Badge background",
    200: "Tint",
    300: "Subtle border",
    400: "Dark-pairing accent",
    500: "Signature accent",
    600: "Solid CTA text",
    700: "Hover, pressed",
    800: "Heavy emphasis",
    900: "Deep accent",
  };

  const surfaces = [
    { hex: BRAND.surface.canvas,  name: "canvas",  role: "Page background" },
    { hex: BRAND.surface.card,    name: "card",    role: "Surface fill" },
    { hex: BRAND.surface.callout, name: "callout", role: "Callout, soft primary" },
    { hex: BRAND.surface.rowAlt,  name: "rowAlt",  role: "Alternating table row" },
    { hex: BRAND.surface.border,  name: "border",  role: "1px hairline" },
    { hex: BRAND.surface.grid,    name: "grid",    role: "Light grid stroke" },
  ];

  const inkRoles = [
    { hex: BRAND.ink.body,   name: "body",   role: "Primary text" },
    { hex: BRAND.ink.muted,  name: "muted",  role: "Body, supporting" },
    { hex: BRAND.ink.subtle, name: "subtle", role: "Captions, meta" },
    { hex: BRAND.ink.light,  name: "light",  role: "Disabled, placeholder" },
  ];

  const darkSurfaces = [
    { hex: BRAND.dark.navyDeep,   name: "navyDeep",   role: "Cover anchor" },
    { hex: BRAND.dark.navy,       name: "navy",       role: "Cover midfield" },
    { hex: BRAND.dark.navyAccent, name: "navyAccent", role: "Cover highlight" },
    { hex: BRAND.dark.slate,      name: "slate",      role: "Dark card fill" },
    { hex: BRAND.dark.slateMuted, name: "slateMuted", role: "Dark body text" },
  ];

  const semantic = [
    { hex: BRAND.semantic.success, name: "success", role: "Authorized, passed" },
    { hex: BRAND.semantic.warning, name: "warning", role: "Caution, attention" },
    { hex: BRAND.semantic.danger,  name: "danger",  role: "Failure, blocking" },
    { hex: BRAND.semantic.info,    name: "info",    role: "Informational" },
  ];

  const diagram = [
    { hex: BRAND.diagram.a, name: "Accent A", role: "Outer, critical" },
    { hex: BRAND.diagram.b, name: "Accent B", role: "Primary region" },
    { hex: BRAND.diagram.c, name: "Accent C", role: "Supporting region" },
    { hex: BRAND.diagram.d, name: "Accent D", role: "Adjacent group" },
    { hex: BRAND.diagram.e, name: "Accent E", role: "Excluded, external" },
  ];

  return (
    <div className="space-y-12">
      {/* Primary scale */}
      <section>
        <SectionEyebrow number="04" label="Primary Scale" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          Derived from #4353FF. 500 is the signature accent. 600 is body text on white when AA contrast is required. 50 is callout backgrounds.
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {scaleEntries(BRAND.primary).map(([k, hex]) => (
            <Swatch key={k} hex={hex} name={`Primary ${k}`} role={primaryRoles[k]} />
          ))}
        </div>
      </section>

      {/* Secondary scale + pairings */}
      <section>
        <SectionEyebrow number="05" label="Secondary Scale" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          Derived from #5BC9B1. The single secondary accent, used for the second data series, supporting CTAs, and dual-color dividers.
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {scaleEntries(BRAND.secondary).map(([k, hex]) => (
            <Swatch key={k} hex={hex} name={`Secondary ${k}`} role={secondaryRoles[k]} />
          ))}
        </div>

        {/* Pairing tests */}
        <div className="grid md:grid-cols-2 gap-4 mt-6">
          <Card padding={28}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], marginBottom: 14 }}>
              LIGHT PAIRING
            </div>
            <div className="flex items-center gap-3 flex-wrap">
              <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.primary[500], color: "#fff", fontSize: 13, fontWeight: 600 }}>
                Primary 500
              </span>
              <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.secondary[500], color: BRAND.dark.navyDeep, fontSize: 13, fontWeight: 600 }}>
                Secondary 500
              </span>
              <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.primary[50], color: BRAND.primary[700], fontSize: 13, fontWeight: 600 }}>
                Primary 50 · 700
              </span>
              <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.secondary[100], color: BRAND.secondary[800], fontSize: 13, fontWeight: 600 }}>
                Secondary 100 · 800
              </span>
            </div>
            <p style={{ fontSize: 13, color: BRAND.ink.subtle, marginTop: 14, lineHeight: 1.5 }}>
              On white. Primary leads, secondary supports. Use soft tints for badges.
            </p>
          </Card>
          <Card padding={0} style={{ overflow: "hidden", border: `1px solid ${BRAND.dark.navyAccent}` }}>
            <div className="p-7 relative" style={{ background: BRAND.dark.navy, minHeight: 168 }}>
              <div className="absolute inset-0 pointer-events-none" style={{
                backgroundImage: `linear-gradient(to right, ${BRAND.primary[500]} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.primary[500]} 1px, transparent 1px)`,
                backgroundSize: "40px 40px",
                opacity: 0.18,
              }} />
              <div className="relative">
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[300], marginBottom: 14 }}>
                  DARK PAIRING
                </div>
                <div className="flex items-center gap-3 flex-wrap">
                  <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.primary[400], color: BRAND.dark.navyDeep, fontSize: 13, fontWeight: 600 }}>
                    Primary 400
                  </span>
                  <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: BRAND.secondary[400], color: BRAND.dark.navyDeep, fontSize: 13, fontWeight: 600 }}>
                    Secondary 400
                  </span>
                  <span className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: "rgba(255,255,255,0.06)", border: `1px solid ${BRAND.dark.slateMuted}`, color: "#fff", fontSize: 13, fontWeight: 600 }}>
                    Outline · slateMuted
                  </span>
                </div>
                <p style={{ fontSize: 13, color: BRAND.dark.slateMuted, marginTop: 14, lineHeight: 1.5 }}>
                  On navy. Lift the scale one step (400) so accents read against dark.
                </p>
              </div>
            </div>
          </Card>
        </div>
      </section>

      {/* Surfaces + Ink */}
      <section>
        <SectionEyebrow number="06" label="Surfaces & Ink" />
        <div className="grid md:grid-cols-2 gap-4">
          <Card>
            <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink.body, marginBottom: 12 }}>Surfaces</div>
            <div className="space-y-2">
              {surfaces.map((s) => <Swatch key={s.name} hex={s.hex} name={s.name} role={s.role} variant="row" />)}
            </div>
          </Card>
          <Card>
            <div style={{ fontSize: 16, fontWeight: 700, color: BRAND.ink.body, marginBottom: 12 }}>Ink</div>
            <div className="space-y-2">
              {inkRoles.map((s) => <Swatch key={s.name} hex={s.hex} name={s.name} role={s.role} variant="row" />)}
            </div>
            <div className="mt-5 pt-5" style={{ borderTop: `1px solid ${BRAND.surface.border}` }}>
              <div style={{ fontSize: 16, color: BRAND.ink.body, lineHeight: 1.5 }}>
                Body sets at 16/24 with <span style={{ color: BRAND.ink.muted }}>muted</span> for supporting copy, <span style={{ color: BRAND.ink.subtle }}>subtle</span> for captions, and <span style={{ color: BRAND.ink.light }}>light</span> for placeholders.
              </div>
            </div>
          </Card>
        </div>
      </section>

      {/* Dark surfaces */}
      <section>
        <SectionEyebrow number="07" label="Dark Surfaces" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          Reserved for cover and closing surfaces. Never under dense data or tables.
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {darkSurfaces.map((s) => <Swatch key={s.name} hex={s.hex} name={s.name} role={s.role} />)}
        </div>
      </section>

      {/* Semantic */}
      <section>
        <SectionEyebrow number="08" label="Semantic" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          Deployed only where a state is actually being communicated. Never decorative.
        </p>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {semantic.map((s) => <Swatch key={s.name} hex={s.hex} name={s.name} role={s.role} />)}
        </div>
      </section>

      {/* Diagram */}
      <section>
        <SectionEyebrow number="09" label="Diagram Accents" />
        <p className="mb-4 max-w-2xl" style={{ fontSize: 14, color: BRAND.ink.muted, lineHeight: 1.6 }}>
          A curated five-color palette for diagrams, charts, and matrices. Assigned per-document, never auto-mapped. Roles are generic, not domain-specific.
        </p>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {diagram.map((s) => <Swatch key={s.name} hex={s.hex} name={s.name} role={s.role} />)}
        </div>
      </section>
    </div>
  );
};

window.ColorsTab = ColorsTab;