/* Components tab — eyebrows, callouts, tables, badges, buttons, lists, stats, three-band rows */
const ComponentsTab = () => {
  return (
    <div className="space-y-12">
      {/* Section eyebrows */}
      <section>
        <SectionEyebrow number="17" label="Section Eyebrows" />
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { n: "01", label: "Principles" },
            { n: "07", label: "Engagement Model" },
            { n: "14", label: "Cover Treatment" },
          ].map((e) => (
            <Card key={e.n}>
              <SectionEyebrow number={e.n} label={e.label} />
              <p style={{ fontSize: 13, color: BRAND.ink.muted, lineHeight: 1.55, marginTop: -8 }}>
                Two-character number, middot, all-caps label, 2px primary underline. Top-left of every content surface.
              </p>
            </Card>
          ))}
        </div>
      </section>

      {/* Callouts */}
      <section>
        <SectionEyebrow number="18" label="Callouts" />
        <div className="grid md:grid-cols-2 gap-4">
          {/* Filled + left bar */}
          <div className="rounded-xl p-5" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
            <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
              <strong style={{ color: BRAND.primary[700] }}>The rule.</strong> The load-bearing claim of the surface. One per surface, never more.
            </div>
          </div>
          {/* Filled + eyebrow + left bar */}
          <div className="rounded-xl p-5" style={{ background: BRAND.surface.callout, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500], marginBottom: 8 }}>
              FIELD OBSERVATION
            </div>
            <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
              When the eyebrow earns the space, the callout reads as a labelled card, not a generic highlight.
            </div>
          </div>
          {/* Outline only */}
          <div className="rounded-xl p-5" style={{ background: BRAND.surface.card, border: `1px solid ${BRAND.primary[200]}`, borderLeft: `4px solid ${BRAND.primary[500]}` }}>
            <div style={{ fontSize: 14, color: BRAND.ink.body, lineHeight: 1.6 }}>
              <strong style={{ color: BRAND.primary[700] }}>Boundary test.</strong> Outline-only variant when the callout sits next to other filled surfaces.
            </div>
          </div>
          {/* Dark slate */}
          <div className="rounded-xl p-5" style={{ background: BRAND.dark.slate, borderLeft: `4px solid ${BRAND.primary[400]}` }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[300], marginBottom: 8 }}>
              A HARD TRUTH
            </div>
            <div style={{ fontSize: 14, color: "#FFFFFF", lineHeight: 1.6 }}>
              Dark variant for cover and closing surfaces. Slate fill, primary 400 left bar, primary 300 eyebrow.
            </div>
          </div>
        </div>
      </section>

      {/* Tables */}
      <section>
        <SectionEyebrow number="19" label="Tables" />
        <Card padding={0} style={{ overflow: "hidden" }}>
          <table className="w-full" style={{ borderCollapse: "collapse" }}>
            <thead>
              <tr style={{ background: BRAND.primary[500], color: "#FFFFFF" }}>
                {["Item", "Tier", "Owner", "Cadence", "Status"].map((h) => (
                  <th key={h} style={{ padding: "12px 16px", textAlign: "left", fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ["Item one",   "Tier One",   "Team A", "Weekly",    "Active"],
                ["Item two",   "Tier Two",   "Team B", "Biweekly",  "Active"],
                ["Item three", "Tier One",   "Team A", "Monthly",   "Paused"],
                ["Item four",  "Tier Three", "Team C", "Quarterly", "Active"],
              ].map((row, i) => (
                <tr key={i} style={{ background: i % 2 === 0 ? BRAND.surface.card : BRAND.surface.callout }}>
                  {row.map((cell, j) => (
                    <td key={j} style={{ padding: "12px 16px", fontSize: 14, color: BRAND.ink.body, fontWeight: j === 0 ? 700 : 400 }}>{cell}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        <p className="mt-3" style={{ fontSize: 12, color: BRAND.ink.subtle }}>
          Primary-blue header band. Alternating white and callout rows. First column bold. No vertical borders.
        </p>
      </section>

      {/* Badges */}
      <section>
        <SectionEyebrow number="20" label="Badges" />
        <Card>
          <div className="flex flex-wrap gap-2.5">
            {[
              { label: "Primary",    bg: BRAND.primary[500],   fg: "#fff" },
              { label: "Secondary",  bg: BRAND.secondary[500], fg: BRAND.dark.navyDeep },
              { label: "Success",    bg: BRAND.semantic.success, fg: "#fff" },
              { label: "Warning",    bg: BRAND.semantic.warning, fg: BRAND.dark.navyDeep },
              { label: "Danger",     bg: BRAND.semantic.danger,  fg: "#fff" },
              { label: "Soft Primary",   bg: BRAND.surface.callout,  fg: BRAND.primary[700] },
              { label: "Soft Secondary", bg: BRAND.secondary[100],   fg: BRAND.secondary[800] },
              { label: "Slate",      bg: BRAND.dark.slate, fg: "#fff" },
            ].map((b) => (
              <span key={b.label} className="inline-flex items-center px-3 py-1.5 rounded-full" style={{ background: b.bg, color: b.fg, fontSize: 13, fontWeight: 600 }}>
                {b.label}
              </span>
            ))}
          </div>
        </Card>
      </section>

      {/* Buttons */}
      <section>
        <SectionEyebrow number="21" label="Buttons" />
        <Card>
          <div className="flex flex-wrap items-center gap-3">
            <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg" style={{ background: BRAND.primary[500], color: "#fff", fontSize: 14, fontWeight: 600, boxShadow: "0 1px 0 rgba(15,23,42,0.05)" }}>
              Primary action <ChevronRight size={14} strokeWidth={2.25} />
            </button>
            <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg" style={{ background: BRAND.secondary[600], color: "#fff", fontSize: 14, fontWeight: 600 }}>
              Secondary
            </button>
            <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg" style={{ background: "transparent", color: BRAND.primary[600], border: `1px solid ${BRAND.primary[500]}`, fontSize: 14, fontWeight: 600 }}>
              Outline
            </button>
            <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg" style={{ background: "transparent", color: BRAND.ink.muted, fontSize: 14, fontWeight: 600 }}>
              Ghost
            </button>
            <button className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg" style={{ background: BRAND.semantic.danger, color: "#fff", fontSize: 14, fontWeight: 600 }}>
              Destructive
            </button>
          </div>
          <p className="mt-5 pt-4" style={{ fontSize: 13, color: BRAND.ink.subtle, lineHeight: 1.6, borderTop: `1px solid ${BRAND.surface.border}` }}>
            One primary per surface. Secondary handles the second action, outline is the tertiary, ghost is for inline controls. Destructive is reserved for irreversible state changes.
          </p>
        </Card>
      </section>

      {/* Numbered list */}
      <section>
        <SectionEyebrow number="22" label="Numbered Lists" />
        <Card>
          <ol className="space-y-5">
            {[
              { t: "Define the surface.", b: "Eyebrow first, then a single primary claim. Decide what the surface is responsible for before placing components." },
              { t: "Pick the rhythm.", b: "Numbered list, table, or callout. Prose is the fallback. Three to six items per group is the sweet spot." },
              { t: "Spend color carefully.", b: "Primary 500 carries weight. Secondary 500 supports. Everything else stays neutral." },
              { t: "Audit on exit.", b: "Walk the surface and remove anything not earning its place. One thousand no's for every yes." },
            ].map((item, i) => (
              <li key={i} className="flex items-start gap-4">
                <span className="font-mono shrink-0" style={{ fontSize: 22, fontWeight: 700, color: BRAND.primary[500], letterSpacing: "-0.02em", lineHeight: 1, paddingTop: 2, minWidth: 36 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: BRAND.ink.body }}>{item.t}</div>
                  <p style={{ fontSize: 13.5, color: BRAND.ink.muted, lineHeight: 1.6, marginTop: 4 }}>{item.b}</p>
                </div>
              </li>
            ))}
          </ol>
        </Card>
      </section>

      {/* Stat blocks */}
      <section>
        <SectionEyebrow number="23" label="Stat Blocks" />
        <div className="grid sm:grid-cols-3 gap-4">
          {[
            { n: "3×", c: "Improvement multiplier, primary blue.", color: BRAND.primary[500] },
            { n: "110", c: "Count, primary blue.", color: BRAND.primary[500] },
            { n: "72hr", c: "Window, secondary 600.", color: BRAND.secondary[600] },
          ].map((s, i) => (
            <Card key={i}>
              <div className="text-7xl" style={{ fontSize: 84, fontWeight: 700, letterSpacing: "-0.04em", color: s.color, lineHeight: 1 }}>
                {s.n}
              </div>
              <p style={{ fontSize: 13, color: BRAND.ink.muted, marginTop: 14, lineHeight: 1.5 }}>{s.c}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Three-band rows */}
      <section>
        <SectionEyebrow number="24" label="Three-Band Rows" />
        <div className="space-y-3">
          {[
            { label: "Band one",   bg: BRAND.primary[500],  fg: "#fff" },
            { label: "Band two",   bg: BRAND.dark.slate,    fg: "#fff" },
            { label: "Band three", bg: BRAND.dark.slateMuted, fg: "#fff" },
          ].map((band, i) => (
            <div key={i} className="grid items-stretch rounded-xl overflow-hidden" style={{ gridTemplateColumns: "180px 1fr", border: `1px solid ${BRAND.surface.border}`, background: BRAND.surface.card }}>
              <div className="flex items-center px-5" style={{ background: band.bg, color: band.fg }}>
                <div>
                  <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", opacity: 0.8 }}>0{i + 1}</div>
                  <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: "-0.01em", marginTop: 4 }}>{band.label}</div>
                </div>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-px" style={{ background: BRAND.surface.border }}>
                {["Detail one", "Detail two", "Detail three", "Detail four"].map((d, j) => (
                  <div key={j} className="p-4" style={{ background: BRAND.surface.callout }}>
                    <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", color: BRAND.primary[500] }}>{`0${j + 1}`}</div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: BRAND.ink.body, marginTop: 4 }}>{d}</div>
                    <p style={{ fontSize: 12, color: BRAND.ink.muted, marginTop: 4, lineHeight: 1.5 }}>Short supporting line.</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

window.ComponentsTab = ComponentsTab;