/* ═══════════════════════════════════════════
   Capítulo 2 — Color y tipografía
   ═══════════════════════════════════════════ */

function ColorPalette({ num, total }) {
  const principales = [
    { name: "Grafito", hex: "#1F2426", pantone: "426 C", cmyk: "73 / 60 / 60 / 79", rgb: "31 / 36 / 38", role: "Primario", light: true },
    { name: "Rojo Bandera", hex: "#C8102E", pantone: "186 C", cmyk: "0 / 100 / 81 / 4", rgb: "200 / 16 / 46", role: "Acento", light: true },
    { name: "Grafito Medio", hex: "#2C3133", pantone: "433 C", cmyk: "68 / 55 / 55 / 70", rgb: "44 / 49 / 51", role: "Secundario", light: true },
    { name: "Hielo", hex: "#F4F4F2", pantone: "Cool Gray 1 C", cmyk: "3 / 2 / 4 / 0", rgb: "244 / 244 / 242", role: "Fondo", light: false },
  ];
  const secundarios = [
    { name: "Gris Polar", hex: "#7E8587", pantone: "Cool Gray 9 C", cmyk: "55 / 42 / 42 / 22", rgb: "126 / 133 / 135", role: "Apoyo", light: true },
    { name: "Gris Piedra", hex: "#C9CDCE", pantone: "Cool Gray 3 C", cmyk: "20 / 13 / 14 / 0", rgb: "201 / 205 / 206", role: "Apoyo", light: false },
    { name: "Amarillo Bandera", hex: "#F4C400", pantone: "7549 C", cmyk: "0 / 22 / 100 / 0", rgb: "244 / 196 / 0", role: "Acento", light: false },
    { name: "Tinta", hex: "#1A1C1B", pantone: "Black 6 C", cmyk: "75 / 65 / 65 / 80", rgb: "26 / 28 / 27", role: "Texto", light: true },
  ];

  function Swatch({ c }) {
    return (
      <div className="swatch">
        <div className="swatch-color" style={{background: c.hex}}>
          <div className={`swatch-name ${c.light ? 'light' : 'dark'}`}>{c.name}</div>
        </div>
        <div className="swatch-meta">
          <div className="swatch-meta-row"><span>HEX</span><strong>{c.hex}</strong></div>
          <div className="swatch-meta-row"><span>PANTONE</span><strong>{c.pantone}</strong></div>
          <div className="swatch-meta-row"><span>CMYK</span><strong>{c.cmyk}</strong></div>
          <div className="swatch-meta-row"><span>RGB</span><strong>{c.rgb}</strong></div>
          <div className="swatch-meta-row" style={{marginTop: 6, paddingTop: 6, borderTop: '1px solid var(--line)'}}>
            <span>USO</span><strong>{c.role}</strong>
          </div>
        </div>
      </div>
    );
  }

  return (
    <section className="page" id="color">
      <PageHeader section="2.1 · Color · Paleta" num={num} total={total} />
      <Eyebrow>2.1 Paleta cromática</Eyebrow>
      <h1 className="h1">
        Grafito, hielo<br/>
        <span className="light">y un acento rojo</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        El sistema cromático se construye sobre el grafito — evocación de la
        roca volcánica antártica y el equipamiento técnico — con el rojo de
        la bandera como acento controlado.
      </p>
      <p className="body">
        El grafito es el color institucional principal y debe utilizarse
        como base en todas las aplicaciones. El rojo bandera es un color de acento
        de uso muy controlado: titulares destacados, marcadores y elementos
        diferenciadores. El hielo y los grises medios completan el sistema
        como neutros de fondo, en coherencia con la uniformidad técnica del Contingente.
      </p>

      <SectionTitle num="2.1.1">Paleta principal</SectionTitle>
      <div className="grid-4">
        {principales.map(c => <Swatch key={c.hex} c={c}/>)}
      </div>

      <SectionTitle num="2.1.2">Paleta secundaria</SectionTitle>
      <div className="grid-4">
        {secundarios.map(c => <Swatch key={c.hex} c={c}/>)}
      </div>

      <SectionTitle num="2.1.3">Proporciones de uso</SectionTitle>
      <div style={{display: 'flex', height: 56, borderRadius: 4, overflow: 'hidden', border: '1px solid var(--line)', marginTop: 24}}>
        <div style={{flex: 60, background: '#1F2426'}}></div>
        <div style={{flex: 25, background: '#F4F4F2'}}></div>
        <div style={{flex: 8, background: '#7E8587'}}></div>
        <div style={{flex: 5, background: '#C8102E'}}></div>
        <div style={{flex: 2, background: '#F4C400'}}></div>
      </div>
      <table className="spec-table">
        <thead><tr><th>COLOR</th><th>PROPORCIÓN ORIENTATIVA</th><th>USO</th></tr></thead>
        <tbody>
          <tr><td>Grafito</td><td className="mono">60%</td><td>Bloques principales, fondos institucionales</td></tr>
          <tr><td>Hielo / Blanco</td><td className="mono">25%</td><td>Fondo de contenido, papelería</td></tr>
          <tr><td>Gris Polar / Piedra</td><td className="mono">8%</td><td>Texto secundario, apoyos</td></tr>
          <tr><td>Rojo Bandera</td><td className="mono">5%</td><td>Acentos, eyebrows, datos clave</td></tr>
          <tr><td>Amarillo Bandera</td><td className="mono">2%</td><td>Solo en franjas tricolor / detalles puntuales</td></tr>
        </tbody>
      </table>
    </section>
  );
}

function Typography({ num, total }) {
  return (
    <section className="page" id="tipografia">
      <PageHeader section="2.2 · Tipografía" num={num} total={total} />
      <Eyebrow>2.2 Tipografía corporativa</Eyebrow>
      <h1 className="h1">
        Archivo,<br/>
        <span className="light">Fraunces, Mono</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        Tres familias tipográficas conviven en el sistema: una sans geométrica
        para titulares e información, una serif itálica para citas y destacados,
        y una monoespaciada para datos técnicos.
      </p>

      <SectionTitle num="2.2.1">Archivo · Tipografía principal</SectionTitle>
      <div className="type-display">
        <div className="type-name">FAMILIA PRINCIPAL · TITULARES Y TEXTO</div>
        <div className="type-sample" style={{fontFamily: 'Archivo', fontWeight: 800, fontSize: 96, fontStretch: '125%', textTransform: 'uppercase'}}>
          Aa Bb 26
        </div>
        <div className="type-weights">
          <div className="type-weight-row">
            <span className="type-weight-label">Extralight 200</span>
            <span className="type-weight-sample" style={{fontFamily: 'Archivo', fontWeight: 200}}>El XL Contingente Antártico</span>
          </div>
          <div className="type-weight-row">
            <span className="type-weight-label">Regular 400</span>
            <span className="type-weight-sample" style={{fontFamily: 'Archivo', fontWeight: 400}}>El XL Contingente Antártico</span>
          </div>
          <div className="type-weight-row">
            <span className="type-weight-label">Semibold 600</span>
            <span className="type-weight-sample" style={{fontFamily: 'Archivo', fontWeight: 600}}>El XL Contingente Antártico</span>
          </div>
          <div className="type-weight-row">
            <span className="type-weight-label">Bold 700</span>
            <span className="type-weight-sample" style={{fontFamily: 'Archivo', fontWeight: 700}}>El XL Contingente Antártico</span>
          </div>
          <div className="type-weight-row">
            <span className="type-weight-label">Extrabold 800</span>
            <span className="type-weight-sample" style={{fontFamily: 'Archivo', fontWeight: 800}}>EL XL CONTINGENTE ANTÁRTICO</span>
          </div>
        </div>
        <div className="type-meta">
          <span>LICENCIA · OFL OPEN SOURCE</span>
          <span>USO · TITULARES, TEXTO, UI</span>
          <span>DESCARGA · GOOGLE FONTS</span>
        </div>
      </div>

      <SectionTitle num="2.2.2">Fraunces · Tipografía editorial</SectionTitle>
      <div className="type-display">
        <div className="type-name">FAMILIA SECUNDARIA · CITAS Y DESTACADOS</div>
        <div className="type-sample" style={{fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 300, fontSize: 80}}>
          Aa Bb 26
        </div>
        <div className="type-weights">
          <div className="type-weight-row">
            <span className="type-weight-label">Light Italic 300</span>
            <span className="type-weight-sample" style={{fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 300}}>«Sesenta y dos grados al sur»</span>
          </div>
          <div className="type-weight-row">
            <span className="type-weight-label">Regular Italic 400</span>
            <span className="type-weight-sample" style={{fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 400}}>«Sesenta y dos grados al sur»</span>
          </div>
        </div>
        <div className="type-meta">
          <span>LICENCIA · OFL</span>
          <span>USO · LEDES, CITAS, EPÍGRAFES</span>
          <span>SOLO EN ITÁLICA</span>
        </div>
      </div>

      <SectionTitle num="2.2.3">JetBrains Mono · Tipografía técnica</SectionTitle>
      <div className="type-display">
        <div className="type-name">FAMILIA TERCIARIA · DATOS Y METADATOS</div>
        <div className="type-sample" style={{fontFamily: 'JetBrains Mono', fontWeight: 600, fontSize: 56, letterSpacing: '0.05em'}}>
          62°58′ S — 60°40′ W
        </div>
        <div className="type-meta">
          <span>USO · COORDENADAS, FECHAS, METADATOS</span>
          <span>TAMAÑOS · 8–11 PT</span>
          <span>TRACKING · 0.15 EM</span>
        </div>
      </div>

      <SectionTitle num="2.2.4">Tipografía de uso común</SectionTitle>
      <p className="body">
        En entornos donde la tipografía Archivo no esté disponible (editores de
        texto, plantillas Word/Excel, correo institucional), se utilizará
        <strong> Arial</strong> como tipografía de sustitución, en sus variantes
        Regular, Italic, Bold y Bold Italic.
      </p>

      <SectionTitle num="2.2.5">Descarga e instalación</SectionTitle>
      <p className="body" style={{maxWidth: 680, marginBottom: 24}}>
        Las tres familias son <strong>tipografías libres</strong> bajo licencia
        SIL Open Font License. Descárgalas desde Google Fonts (botón "Get font"
        / "Download family") e instálalas en el sistema antes de editar
        plantillas, papelería o presentaciones.
      </p>

      <div className="grid-3">
        <FontDownloadCard
          name="Archivo"
          role="Tipografía principal"
          weights="200 · 400 · 600 · 700 · 800"
          url="https://fonts.google.com/specimen/Archivo"
        />
        <FontDownloadCard
          name="Fraunces"
          role="Tipografía editorial"
          weights="300 Italic · 400 Italic"
          url="https://fonts.google.com/specimen/Fraunces"
        />
        <FontDownloadCard
          name="JetBrains Mono"
          role="Tipografía técnica"
          weights="400 · 500 · 600 · 700"
          url="https://fonts.google.com/specimen/JetBrains+Mono"
        />
      </div>

      <div style={{
        marginTop: 28,
        padding: '16px 22px',
        background: 'var(--hielo)',
        borderLeft: '3px solid var(--rojo-bandera)',
        borderRadius: '0 4px 4px 0',
        fontSize: 13,
        lineHeight: 1.6,
        color: 'var(--tinta)',
        maxWidth: 760
      }}>
        <strong style={{color: 'var(--azul-antartico)', fontFamily: 'Archivo', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', fontSize: 11}}>Instalación rápida</strong>
        <div style={{marginTop: 6}}>
          <strong>macOS:</strong> Doble clic en cada archivo .ttf/.otf → "Instalar fuente" en Libro de Tipos.<br/>
          <strong>Windows:</strong> Selecciona los archivos extraídos → clic derecho → "Instalar para todos los usuarios".<br/>
          <strong>Office:</strong> Reinicia Word / Excel / PowerPoint tras instalar.
        </div>
      </div>
    </section>
  );
}

function FontDownloadCard({name, role, weights, url}) {
  return (
    <a href={url} target="_blank" rel="noopener" style={{
      display: 'block',
      textDecoration: 'none',
      background: 'var(--blanco)',
      border: '1px solid var(--line)',
      borderRadius: 4,
      padding: 24,
      transition: 'all 0.2s ease',
      color: 'inherit'
    }}
    onMouseOver={e => { e.currentTarget.style.borderColor = 'var(--azul-antartico)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
    onMouseOut={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'none'; }}>
      <div style={{fontFamily: 'JetBrains Mono', fontSize: 9, letterSpacing: '0.2em', color: 'var(--rojo-bandera)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8}}>
        {role}
      </div>
      <div style={{fontFamily: name === 'Fraunces' ? 'Fraunces' : (name === 'JetBrains Mono' ? 'JetBrains Mono' : 'Archivo'),
                   fontWeight: name === 'Fraunces' ? 400 : 700,
                   fontStyle: name === 'Fraunces' ? 'italic' : 'normal',
                   fontSize: 28, lineHeight: 1.1, color: 'var(--azul-antartico)', marginBottom: 14, letterSpacing: '-0.01em'}}>
        {name}
      </div>
      <div style={{fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--piedra)', letterSpacing: '0.04em', marginBottom: 18, lineHeight: 1.6}}>
        {weights}
      </div>
      <div style={{display: 'inline-flex', alignItems: 'center', gap: 6,
                   fontFamily: 'Archivo', fontSize: 11, fontWeight: 700, color: 'var(--rojo-bandera)',
                   letterSpacing: '0.08em', textTransform: 'uppercase'}}>
        Descargar <span style={{fontSize: 14}}>↗</span>
      </div>
    </a>
  );
}

window.ColorPalette = ColorPalette;
window.Typography = Typography;