// sections.jsx — content sections for the Grupo Térreo brand manual.
// Each section is a self-contained component. Exposed on window for app.jsx.

const { useState, useEffect, useMemo } = React;

// ────────────────────────────────────────────────────────────────────────────
// Shared atoms
// ────────────────────────────────────────────────────────────────────────────

function SecHead({ num, title, lede, kicker }) {
  return (
    <div className="sec__head" style={{ flexDirection: "column", alignItems: "flex-start" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 18, flexWrap: "wrap" }}>
        <span className="sec__num">{num}</span>
        {kicker && <span className="mono">{kicker}</span>}
      </div>
      <h2 className="sec__title" style={{ marginTop: 12 }}>{title}</h2>
      {lede && <p className="sec__lede">{lede}</p>}
    </div>
  );
}

function PCell({ num, sym, mass, name, group, size = 1, tone = "verde", style = {} }) {
  // Renders a periodic-table cell at consistent proportions.
  const w = 132 * size;
  const h = 152 * size;
  const symSize = 42 * size;
  const stroke = tone === "arena" ? "#C8B89A" : "var(--verde)";
  const color = tone === "arena" ? "#C8B89A" : "var(--verde)";
  return (
    <div
      className="pcell"
      style={{
        width: w, height: h,
        borderColor: stroke, color: color,
        padding: `${8 * size}px ${10 * size}px ${10 * size}px`,
        ...style,
      }}
    >
      <span className="num" style={{ fontSize: 9 * size, top: 6 * size, left: 8 * size }}>{num}</span>
      <span className="mass" style={{ fontSize: 9 * size, top: 6 * size, right: 8 * size }}>{mass}</span>
      <div className="sym" style={{ fontSize: symSize, marginTop: 14 * size }}>{sym}</div>
      <div className="name" style={{ fontSize: 8.5 * size, marginTop: 4 * size }}>{name}</div>
      {group && <span className="group" style={{ fontSize: 8.5 * size, bottom: 4 * size, right: 8 * size }}>{group}</span>}
    </div>
  );
}

// Compact inline mark used in headers / business cards / web nav.
// Renders the active logo route + a small TÉRREO wordmark beneath.
function MiniMark({ size = 60, color = "#2D4A3E", textColor = "#1A1F1C", route = "estrella", showWordmark = true }) {
  const wordSize = Math.max(6, Math.round(size * 0.13));
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: Math.round(size * 0.08) }}>
      <LogoMark route={route} size={size} color={color} />
      {showWordmark && (
        <div style={{ fontFamily: "var(--f-mono)", fontSize: wordSize, fontWeight: 400, letterSpacing: 2, color: textColor }}>TÉRREO</div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// HERO
// ────────────────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <header className="hero" data-screen-label="00 Cover">
      <div className="hero__top">
        <span className="mono">Manual de identidad corporativa · v1.0 · 2026</span>
        <span className="mono">Confidencial</span>
      </div>

      <h1 className="hero__title">
        Construimos<br />
        lo <b>permanente.</b>
      </h1>

      <p className="hero__sub">
        Grupo Térreo es una promotora inmobiliaria de vivienda y hotelería de muy
        altas prestaciones. Construye con responsabilidad ambiental, innovación técnica
        y compromiso de permanencia. Cada proyecto certificado BREEAM o LEED.
      </p>

      <div className="hero__meta">
        <div><div className="k">Cliente</div><div className="v">Grupo Térreo Promotora Inmobiliaria</div></div>
        <div><div className="k">Disciplina</div><div className="v">Branding · Editorial · Digital</div></div>
        <div><div className="k">Sello</div><div className="v">BREEAM® · LEED®</div></div>
        <div><div className="k">Fecha</div><div className="v">Mayo 2026</div></div>
      </div>
    </header>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 01 — CONCEPTO
// ────────────────────────────────────────────────────────────────────────────

function ConceptSection({ density, route = "estrella" }) {
  return (
    <section className="sec" id="concepto" data-screen-label="01 Concepto">
      <SecHead
        num="01"
        kicker="Concepto · propósito"
        title="Construimos para perdurar."
        lede="Grupo Térreo no es una promotora más. Cada vivienda, cada hotel, cada metro construido responde a un estándar de exigencia ambiental y técnica que trasciende la entrega: es compromiso de permanencia."
      />

      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(260px, 360px) 1fr",
        gap: 64,
        alignItems: "start",
      }}>
        <div>
          <LogoMark route={route} size={140} color="var(--verde)" />
          <p className="mono" style={{ marginTop: 20, letterSpacing: 3, color: "var(--gris)" }}>
            Símbolo de marca<br />Innovación responsable
          </p>
        </div>

        <div style={{ paddingTop: 8 }}>
          <p style={{ fontFamily: "var(--f-serif)", fontSize: 24, lineHeight: 1.4, fontWeight: 300, margin: 0, color: "var(--carbon)" }}>
            La construcción responsable no es un eslogan. Es método, rigor y tiempo invertido en cada detalle. BREEAM, LEED, auditoría externa, trazabilidad de materiales, reporting transparente al inversor.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--carbon)", marginTop: 24, maxWidth: "62ch" }}>
            Grupo Térreo promueve vivienda y hotelería donde la sostenibilidad y la innovación técnica no son concesiones al mercado, sino el fundamento mismo de cada proyecto.
          </p>

          <div className="rule rule--dash" style={{ margin: "40px 0 24px" }} />

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {[
              { k: "Sostenibilidad", t: "BREEAM Very Good / LEED Gold mínimo en cada proyecto." },
              { k: "Exigencia", t: "Auditoría externa en cada fase. Ningún atajo de calidad." },
              { k: "Transparencia", t: "Reporting trimestral al inversor. Acceso en tiempo real a proyectos." },
            ].map((p) => (
              <div key={p.k}>
                <div className="pill">{p.k}</div>
                <p style={{ fontFamily: "var(--f-serif)", fontSize: 18, lineHeight: 1.4, fontWeight: 300, marginTop: 14, color: "var(--carbon)" }}>{p.t}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 02 — LOGOTIPO
// ────────────────────────────────────────────────────────────────────────────

function LogoSection({ route = "estrella", setRoute }) {
  const active = LOGO_ROUTES.find(r => r.id === route) || LOGO_ROUTES[0];

  return (
    <section className="sec" id="logotipo" data-screen-label="02 Logotipo" style={{ background: "var(--piedra)" }}>
      <SecHead num="02" kicker="Identidad gráfica · 3 propuestas" title="La marca como sillar."
        lede="Tres variaciones sobre un mismo gesto: un único bloque de piedra con una sola incisión. Cambia lo que se labra — una ventana, un símbolo, un umbral — pero la silueta permanece. La marca debe vivir igual en un sello de cera, en un favicon y en una fachada."
      />

      {/* 3-route comparison */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginBottom: 64 }}>
        {LOGO_ROUTES.map((r) => {
          const isActive = r.id === active.id;
          return (
            <button
              key={r.id}
              type="button"
              onClick={() => setRoute && setRoute(r.id)}
              style={{
                textAlign: "left",
                background: isActive ? "#FFFFFF" : "transparent",
                border: isActive ? "1.5px solid var(--verde)" : "1px solid var(--linea-soft)",
                borderRadius: 6,
                padding: "28px 28px 24px",
                cursor: setRoute ? "pointer" : "default",
                fontFamily: "inherit",
                color: "inherit",
                display: "flex",
                flexDirection: "column",
                gap: 18,
                transition: "border-color .15s ease, background .15s ease",
                position: "relative",
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="mono" style={{ color: isActive ? "var(--verde)" : "var(--gris)" }}>{r.short}</span>
                {isActive && <span className="mono" style={{ color: "var(--verde)" }}>● ACTIVA</span>}
              </div>
              <div style={{ display: "flex", justifyContent: "center", padding: "20px 0 8px" }}>
                <LogoMark route={r.id} size={120} color="var(--verde)" />
              </div>
              <div style={{ borderTop: "1px solid var(--linea-soft)", paddingTop: 14 }}>
                <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 18, color: "var(--carbon)", letterSpacing: -.2 }}>{r.label}</div>
                <div className="mono" style={{ marginTop: 6, color: "var(--verde)" }}>{r.reading}</div>
                <p style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 300, fontSize: 14, color: "var(--carbon)", marginTop: 10, lineHeight: 1.45 }}>{r.blurb}</p>
              </div>
              {/* scale sampler */}
              <div style={{ marginTop: "auto", display: "flex", alignItems: "flex-end", justifyContent: "space-between", borderTop: "1px dashed var(--linea-soft)", paddingTop: 14, gap: 8 }}>
                <LogoMark route={r.id} size={48} color="var(--verde)" />
                <LogoMark route={r.id} size={28} color="var(--verde)" />
                <LogoMark route={r.id} size={16} color="var(--verde)" />
                <span className="mono" style={{ fontSize: 8.5 }}>120 · 48 · 28 · 16 PX</span>
              </div>
            </button>
          );
        })}
      </div>

      <div className="rule" />

      {/* Active route — Versión principal */}
      <div className="mono" style={{ marginBottom: 18 }}>
        Ruta activa · {active.short} · {active.label}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 32, alignItems: "start", marginBottom: 48 }}>
        <div className="mono">Versión<br />principal</div>
        <div style={{ background: "#FFFFFF", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: "56px 24px", display: "flex", justifyContent: "center", alignItems: "center" }}>
          <LogoLockup route={active.id} color="var(--verde)" textColor="var(--carbon)" scale={2} />
        </div>
      </div>

      {/* Monocromo + negativo */}
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 32, alignItems: "stretch", marginBottom: 48 }}>
        <div className="mono">Variantes<br />admitidas</div>
        <div style={{ background: "#FFFFFF", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: "40px 24px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 16, alignItems: "center" }}>
          <LogoLockup route={active.id} color="var(--carbon)" textColor="var(--carbon)" scale={1.4} />
          <div className="mono" style={{ textAlign: "center" }}>Monocromo · sobre blanco</div>
        </div>
        <div style={{ background: "#1A1F1C", borderRadius: 6, padding: "40px 24px", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 16, alignItems: "center" }}>
          <LogoLockup route={active.id} color="#EAE5DC" textColor="#FFFFFF" scale={1.4} />
          <div className="mono" style={{ color: "var(--arena)", textAlign: "center" }}>Negativo · solo aplicaciones puntuales</div>
        </div>
      </div>

      {/* Construcción / área de seguridad */}
      <div className="rule" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, marginTop: 48 }}>
        <div>
          <div className="mono" style={{ marginBottom: 16 }}>Área de seguridad</div>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--carbon)", maxWidth: "44ch" }}>
            El espacio libre alrededor del logotipo equivale a la altura de
            la marca (x). Ningún elemento gráfico, fotográfico o tipográfico
            debe invadir esta zona.
          </p>
          <div style={{ position: "relative", marginTop: 24, padding: 40, border: "1px dashed var(--linea)", borderRadius: 6, background: "#fff", display: "flex", justifyContent: "center" }}>
            {["nw","ne","sw","se"].map((p) => (
              <div key={p} style={{
                position: "absolute",
                top:    p[0] === "n" ? 8 : "auto",
                bottom: p[0] === "s" ? 8 : "auto",
                left:   p[1] === "w" ? 8 : "auto",
                right:  p[1] === "e" ? 8 : "auto",
                fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--gris)",
              }}>x</div>
            ))}
            <LogoLockup route={active.id} color="var(--verde)" textColor="var(--carbon)" scale={1.2} />
          </div>
        </div>

        <div>
          <div className="mono" style={{ marginBottom: 16 }}>Tamaño mínimo</div>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--carbon)", maxWidth: "44ch" }}>
            Para garantizar la legibilidad del símbolo y del bloque tipográfico,
            el logotipo principal no debe reproducirse por debajo de las
            siguientes medidas.
          </p>
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <div style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <LogoMark route={active.id} size={64} color="var(--verde)" />
              <div className="mono">Digital · 32 px</div>
            </div>
            <div style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 24, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <LogoMark route={active.id} size={48} color="var(--verde)" />
              <div className="mono">Impreso · 10 mm</div>
            </div>
          </div>
        </div>
      </div>

      {/* Usos incorrectos */}
      <div className="rule" />
      <div className="mono" style={{ marginBottom: 24 }}>Usos incorrectos</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
        {[
          { label: "No deformar",                style: { transform: "scaleX(0.7)" } },
          { label: "No rotar",                   style: { transform: "rotate(-8deg)" } },
          { label: "No recolorar fuera de paleta", color: "#B23A3A" },
          { label: "No invertir el contraste",    bg: "#1A1F1C", color: "var(--arena)" },
        ].map((u) => (
          <div key={u.label}>
            <div style={{ position: "relative", background: u.bg || "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 24, height: 130, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={u.style || {}}>
                <LogoMark route={active.id} size={56} color={u.color || "var(--verde)"} />
              </div>
              <span style={{ position: "absolute", top: 8, right: 10, color: "#B23A3A", fontFamily: "var(--f-mono)", fontSize: 16, fontWeight: 500 }}>✕</span>
            </div>
            <div className="mono" style={{ marginTop: 10, color: "var(--carbon)" }}>{u.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 03 — PALETA
// ────────────────────────────────────────────────────────────────────────────

function PaletteSection({ palette }) {
  // palette: { verde, arena, piedra, gris, carbon, name }
  const swatches = [
    { id: "verde",  label: "Verde Bosque",  hex: palette.verde,  role: "Color principal · marca, titulares, sellos",  cmyk: "C76 M48 Y66 K39", pantone: "Pantone 5535 C" },
    { id: "arena",  label: "Arena Cálida",  hex: palette.arena,  role: "Color de acompañamiento · piedra, materia",   cmyk: "C20 M25 Y45 K06", pantone: "Pantone 7501 C" },
    { id: "piedra", label: "Piedra Clara",  hex: palette.piedra, role: "Fondo principal · papelería, web, impreso",    cmyk: "C08 M09 Y17 K00", pantone: "Pantone 7527 C" },
    { id: "gris",   label: "Gris Frío",     hex: palette.gris,   role: "Datos secundarios · texto técnico, divisores", cmyk: "C57 M40 Y29 K07", pantone: "Pantone 5415 C" },
    { id: "carbon", label: "Carbón",        hex: palette.carbon, role: "Tipografía sobre fondos claros (uso limitado)",cmyk: "C70 M58 Y66 K78", pantone: "Pantone Black 6 C" },
  ];

  return (
    <section className="sec" id="paleta" data-screen-label="03 Paleta">
      <SecHead num="03" kicker="Paleta cromática" title="Cinco colores. Una sola atmósfera."
        lede="La marca vive en superficies claras: piedra y arena. El verde bosque actúa como sello de propiedad; el carbón se reserva para tipografía."
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16, marginBottom: 56 }}>
        {swatches.map((s) => {
          const isLight = s.id === "piedra" || s.id === "arena";
          const textColor = isLight ? "var(--carbon)" : "var(--piedra)";
          return (
            <div key={s.id}>
              <div style={{
                background: s.hex,
                aspectRatio: "3 / 4",
                borderRadius: 4,
                padding: 18,
                color: textColor,
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                border: isLight ? "1px solid var(--linea-soft)" : "none",
              }}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: 2, opacity: .7 }}>{s.id === "verde" ? "01" : s.id === "arena" ? "02" : s.id === "piedra" ? "03" : s.id === "gris" ? "04" : "05"}</div>
                <div>
                  <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 16, letterSpacing: ".5px", textTransform: "uppercase", lineHeight: 1.15 }}>{s.label}</div>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: 1.5, marginTop: 6, opacity: .75 }}>{s.hex.toUpperCase()}</div>
                </div>
              </div>
              <div style={{ marginTop: 10 }}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: 1.5, color: "var(--gris)", lineHeight: 1.6 }}>{s.cmyk}</div>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: 1.5, color: "var(--gris)", lineHeight: 1.6 }}>{s.pantone}</div>
                <div style={{ fontSize: 12, color: "var(--carbon)", marginTop: 8, lineHeight: 1.45 }}>{s.role}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="rule rule--dash" />

      {/* Proporciones */}
      <div style={{ marginTop: 56 }}>
        <div className="mono" style={{ marginBottom: 18 }}>Proporciones de uso recomendadas</div>
        <div style={{ display: "flex", height: 48, borderRadius: 4, overflow: "hidden", border: "1px solid var(--linea-soft)" }}>
          <div style={{ flex: "0 0 50%", background: palette.piedra }} />
          <div style={{ flex: "0 0 22%", background: palette.arena }} />
          <div style={{ flex: "0 0 18%", background: palette.verde }} />
          <div style={{ flex: "0 0 7%",  background: palette.gris }} />
          <div style={{ flex: "0 0 3%",  background: palette.carbon }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "50% 22% 18% 7% 3%", marginTop: 10 }}>
          {["Piedra · fondo","Arena · acento","Verde · sello","Gris · datos","Carbón · tipo"].map((l, i) => (
            <div key={i} className="mono" style={{ paddingRight: 8, fontSize: 9.5 }}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 04 — TIPOGRAFÍA
// ────────────────────────────────────────────────────────────────────────────

function TypeSection({ fontMain }) {
  return (
    <section className="sec" id="tipografia" data-screen-label="04 Tipografía" style={{ background: "var(--piedra)" }}>
      <SecHead num="04" kicker="Tipografía" title="Tres voces. Sin estridencias."
        lede="Una sans humanista para todo el peso comunicativo, una monoespaciada para datos técnicos y certificaciones, y un serif editorial para los momentos de discurso."
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 56 }}>
        {/* Principal */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--linea)", paddingBottom: 12, marginBottom: 20 }}>
            <div>
              <span className="mono" style={{ marginRight: 12 }}>Aa · 01</span>
              <span style={{ fontFamily: fontMain, fontWeight: 600, fontSize: 18 }}>{fontMain.replace(/['"]/g,'').split(",")[0]}</span>
            </div>
            <div className="mono">Tipografía principal · sans humanista</div>
          </div>
          <div style={{ fontFamily: fontMain, fontWeight: 200, fontSize: "clamp(72px, 11vw, 168px)", lineHeight: .95, letterSpacing: "-.04em", color: "var(--carbon)" }}>
            Aa Gg Tt
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12, marginTop: 24 }}>
            {[
              ["200","Extra Light"],
              ["300","Light"],
              ["400","Regular"],
              ["500","Medium"],
              ["600","Semi Bold"],
              ["700","Bold"],
            ].map(([w, n]) => (
              <div key={w} style={{ borderTop: "1px solid var(--linea-soft)", paddingTop: 10 }}>
                <div style={{ fontFamily: fontMain, fontWeight: Number(w), fontSize: 28, lineHeight: 1, color: "var(--carbon)" }}>Térreo</div>
                <div className="mono" style={{ marginTop: 8, fontSize: 9 }}>{w} · {n}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Monoespaciada */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--linea)", paddingBottom: 12, marginBottom: 20 }}>
            <div><span className="mono" style={{ marginRight: 12 }}>Aa · 02</span><span style={{ fontFamily: "var(--f-mono)", fontWeight: 500, fontSize: 18 }}>JetBrains Mono</span></div>
            <div className="mono" style={{ marginBottom: 10, fontSize: 9 }}>Datos y referencias · etiquetas</div>
          </div>
          <div style={{ fontFamily: "var(--f-mono)", fontWeight: 300, fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.2, color: "var(--verde)", letterSpacing: 2 }}>
            BREEAM · LEED · INNOVACIÓN RESPONSABLE
          </div>
        </div>

        {/* Serif editorial */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--linea)", paddingBottom: 12, marginBottom: 20 }}>
            <div><span className="mono" style={{ marginRight: 12 }}>Aa · 03</span><span style={{ fontFamily: "var(--f-serif)", fontWeight: 500, fontSize: 18 }}>Newsreader</span></div>
            <div className="mono">Editorial · cursivas · pull quotes</div>
          </div>
          <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 300, fontSize: "clamp(28px, 4.5vw, 64px)", lineHeight: 1.1, color: "var(--carbon)", maxWidth: "20ch" }}>
            Construimos lo permanente.
          </div>
        </div>

        {/* Escala */}
        <div>
          <div className="mono" style={{ marginBottom: 18 }}>Escala tipográfica recomendada · web y editorial</div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--f-mono)", fontSize: 11 }}>
            <thead>
              <tr style={{ color: "var(--gris)", textAlign: "left" }}>
                <th style={{ padding: "10px 0", fontWeight: 400, letterSpacing: 2, borderBottom: "1px solid var(--linea)" }}>NIVEL</th>
                <th style={{ padding: "10px 0", fontWeight: 400, letterSpacing: 2, borderBottom: "1px solid var(--linea)" }}>USO</th>
                <th style={{ padding: "10px 0", fontWeight: 400, letterSpacing: 2, borderBottom: "1px solid var(--linea)" }}>TAMAÑO</th>
                <th style={{ padding: "10px 0", fontWeight: 400, letterSpacing: 2, borderBottom: "1px solid var(--linea)" }}>PESO</th>
                <th style={{ padding: "10px 0", fontWeight: 400, letterSpacing: 2, borderBottom: "1px solid var(--linea)" }}>FAMILIA</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Display","Portadas, claim","96–168 / 1.0","200","Principal"],
                ["H1","Títulos de sección","48–72 / 1.05","700","Principal"],
                ["H2","Subtítulos","28–36 / 1.2","600","Principal"],
                ["Lede","Entradilla editorial","18–24 / 1.4","300 italic","Serif"],
                ["Body","Texto corrido","14–16 / 1.55","400","Principal"],
                ["Caption","Pie de foto","11–12 / 1.5","400","Principal"],
                ["Mono","Datos técnicos, certificaciones","9–12 / 1.5","300","JetBrains Mono"],
              ].map((r) => (
                <tr key={r[0]} style={{ borderBottom: "1px solid var(--linea-soft)" }}>
                  {r.map((c, i) => <td key={i} style={{ padding: "12px 0", color: i===0 ? "var(--carbon)" : "var(--carbon)", fontWeight: i===0 ? 500 : 300 }}>{c}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// expose
Object.assign(window, { Hero, ConceptSection, LogoSection, PaletteSection, TypeSection, SecHead, PCell, MiniMark });