/* ═══════════════════════════════════════════
   Capítulo 3 — Papelería
   ═══════════════════════════════════════════ */

function PaperBusinessCard({ num, total }) {
  return (
    <section className="page" id="papeleria">
      <PageHeader section="3.1 · Papelería · Tarjeta" num={num} total={total} />
      <Eyebrow>3.1 Tarjeta de visita</Eyebrow>
      <h1 className="h1">Tarjeta<span className="light">de visita</span></h1>
      <div className="rule"></div>
      <p className="lede">
        Diseño minimalista, una sola tinta institucional. 85 × 54 mm, papel
        verjurado blanco 300 g.
      </p>

      <div className="grid-2" style={{marginTop: 32}}>
        <div className="card">
          <div className="card-stage" style={{padding: 40}}>
            {/* Anverso */}
            <div style={{width: 340, height: 215, background: 'var(--blanco)', border: '1px solid var(--line)', padding: '20px 22px', position: 'relative', boxShadow: '0 4px 16px rgba(14,31,63,0.08)'}}>
              <img src="assets/Emblema_XL.png" style={{width: 44, height: 44, position: 'absolute', top: 18, right: 22}}/>
              <div style={{position: 'absolute', bottom: 20, left: 22, right: 22}}>
                <div style={{fontFamily: 'Archivo', fontWeight: 700, fontSize: 11, color: 'var(--azul-antartico)', textTransform: 'uppercase', letterSpacing: '0.02em'}}>Nombre Apellido Apellido</div>
                <div style={{fontFamily: 'Archivo', fontSize: 9, color: 'var(--piedra)', marginTop: 3}}>Empleo · Unidad / Centro</div>
                <div style={{height: 1, background: 'var(--rojo-bandera)', width: 30, margin: '10px 0'}}></div>
                <div style={{fontFamily: 'JetBrains Mono', fontSize: 7, color: 'var(--piedra)', letterSpacing: '0.05em', lineHeight: 1.6}}>
                  XL Contingente Antártico — Ejército de Tierra<br/>
                  BAE «Gabriel de Castilla» · Isla Decepción<br/>
                  +34 000 000 000 · usuario@et.mde.es
                </div>
              </div>
            </div>
          </div>
          <div className="card-foot"><span>ANVERSO</span><span>85 × 54 MM</span></div>
        </div>

        <div className="card">
          <div className="card-stage dark" style={{padding: 40}}>
            <div style={{width: 340, height: 215, background: 'var(--azul-antartico)', padding: '20px 22px', position: 'relative', boxShadow: '0 4px 16px rgba(0,0,0,0.3)'}}>
              <img src="assets/Emblema_XL.png" style={{width: 100, height: 100, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}}/>
              <div style={{display: 'flex', height: 4, position: 'absolute', bottom: 20, left: 22, right: 22}}>
                <div style={{flex: 1, background: '#C8102E'}}></div>
                <div style={{flex: 1, background: '#F4C400'}}></div>
                <div style={{flex: 1, background: '#C8102E'}}></div>
              </div>
              <div style={{position: 'absolute', top: 20, left: 22, fontFamily: 'Archivo', fontSize: 7, fontWeight: 600, color: 'var(--azul-hielo)', letterSpacing: '0.3em', textTransform: 'uppercase'}}>XL · CAMPAÑA · 2026</div>
            </div>
          </div>
          <div className="card-foot"><span>REVERSO</span><span>UNA TINTA</span></div>
        </div>
      </div>

      <SectionTitle num="3.1.1">Especificaciones</SectionTitle>
      <table className="spec-table">
        <thead><tr><th>ELEMENTO</th><th>VALOR</th></tr></thead>
        <tbody>
          <tr><td>Formato</td><td className="mono">85 × 54 mm</td></tr>
          <tr><td>Papel</td><td className="mono">Verjurado blanco 300 g/m²</td></tr>
          <tr><td>Tipografía</td><td className="mono">Archivo / Arial — 7–11 pt</td></tr>
          <tr><td>Impresión</td><td className="mono">CMYK · una cara (anverso) o dos caras</td></tr>
          <tr><td>Acabado</td><td className="mono">Sin laminar — mate</td></tr>
        </tbody>
      </table>
    </section>
  );
}

function PaperLetter({ num, total }) {
  return (
    <section className="page" id="carta">
      <PageHeader section="3.2 · Papelería · Carta y sobre" num={num} total={total} />
      <Eyebrow>3.2 Carta y sobre</Eyebrow>
      <h1 className="h1">Carta<span className="light">institucional</span></h1>
      <div className="rule"></div>

      <div className="grid-2" style={{marginTop: 32}}>
        <div className="card">
          <div className="card-stage" style={{padding: 32}}>
            <div style={{width: 280, aspectRatio: '210/297', background: 'var(--blanco)', border: '1px solid var(--line)', padding: 22, position: 'relative', boxShadow: '0 4px 16px rgba(14,31,63,0.08)', fontSize: 5}}>
              <img src="assets/Emblema_XL.png" style={{width: 36, height: 36, position: 'absolute', top: 18, right: 22}}/>
              <div style={{fontFamily: 'Archivo', fontSize: 6, fontWeight: 700, color: 'var(--azul-antartico)', textTransform: 'uppercase', letterSpacing: '0.15em'}}>XL Contingente Antártico</div>
              <div style={{fontFamily: 'Archivo', fontSize: 5, color: 'var(--piedra)', marginTop: 2}}>Ejército de Tierra · BAE Gabriel de Castilla</div>
              <div style={{height: 0.5, background: 'var(--rojo-bandera)', width: 24, margin: '14px 0'}}></div>
              <div style={{height: 4, background: 'var(--azul-hielo)', borderRadius: 1, marginBottom: 4, width: '40%'}}></div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 2, marginTop: 16}}>
                {Array.from({length: 18}).map((_,i) => (
                  <div key={i} style={{height: 2, background: 'var(--azul-hielo)', borderRadius: 1, width: i % 5 === 4 ? '60%' : '92%'}}></div>
                ))}
              </div>
              <div style={{display: 'flex', height: 1.5, position: 'absolute', bottom: 20, left: 22, right: 22}}>
                <div style={{flex: 1, background: '#C8102E'}}></div>
                <div style={{flex: 1, background: '#F4C400'}}></div>
                <div style={{flex: 1, background: '#C8102E'}}></div>
              </div>
            </div>
          </div>
          <div className="card-foot"><span>CARTA · A4</span><span>210 × 297 MM</span></div>
        </div>

        <div className="card">
          <div className="card-stage" style={{padding: 32}}>
            <div style={{width: 320, aspectRatio: '220/110', background: 'var(--blanco)', border: '1px solid var(--line)', padding: '14px 18px', position: 'relative', boxShadow: '0 4px 16px rgba(14,31,63,0.08)'}}>
              <img src="assets/Emblema_XL.png" style={{width: 36, height: 36}}/>
              <div style={{position: 'absolute', top: 16, left: 64}}>
                <div style={{fontFamily: 'Archivo', fontSize: 7, fontWeight: 700, color: 'var(--azul-antartico)', textTransform: 'uppercase', letterSpacing: '0.15em'}}>XL Contingente Antártico</div>
                <div style={{fontFamily: 'Archivo', fontSize: 6, color: 'var(--piedra)', marginTop: 1}}>Ejército de Tierra</div>
                <div style={{fontFamily: 'JetBrains Mono', fontSize: 5, color: 'var(--piedra)', marginTop: 4, letterSpacing: '0.05em', lineHeight: 1.5}}>
                  Cuartel General · BAE Gabriel de Castilla<br/>
                  Isla Decepción · Antártida
                </div>
              </div>
              <div style={{display: 'flex', height: 1, position: 'absolute', bottom: 0, left: 0, right: 0}}>
                <div style={{flex: 1, background: '#C8102E'}}></div>
                <div style={{flex: 1, background: '#F4C400'}}></div>
                <div style={{flex: 1, background: '#C8102E'}}></div>
              </div>
            </div>
          </div>
          <div className="card-foot"><span>SOBRE AMERICANO</span><span>220 × 110 MM</span></div>
        </div>
      </div>

      <SectionTitle num="3.2.1">Firma de correo electrónico</SectionTitle>
      <p className="body" style={{maxWidth: 680, marginTop: -8, marginBottom: 24}}>
        La firma se compone de tres elementos: <strong>marca institucional del
        Ejército de Tierra</strong> a la izquierda, <strong>datos del firmante</strong>
        en el centro, y <strong>emblema del XL Contingente Antártico</strong> a la
        derecha. Bajo la línea roja figura el lema, en grafito sobre fondo claro.
        Tipografía Arial 11–13 pt como sustituto universal de Archivo en cliente
        de correo.
      </p>

      <div className="card" style={{marginTop: 24}}>
        <div className="card-stage" style={{padding: 48, justifyContent: 'flex-start', background: 'var(--blanco)'}}>
          <div style={{display: 'flex', gap: 24, alignItems: 'flex-start', width: '100%', maxWidth: 640}}>
            {/* Escudo ET */}
            <img src="assets/escudo_ET.png" style={{width: 78, height: 96, flexShrink: 0, objectFit: 'contain'}} alt="Ejército de Tierra"/>
            <div style={{fontFamily: 'Arial, sans-serif', fontSize: 13, lineHeight: 1.5, flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 700, color: 'var(--azul-antartico)', fontSize: 14}}>Empleo Nombre Apellido Apellido</div>
              <div style={{color: 'var(--piedra)'}}>Puesto del XL Contingente Antártico del ET</div>
              <div style={{fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--piedra)', marginTop: 4, lineHeight: 1.7}}>
                RCT 000 00 00 · Tlfo +34 000 000 000<br/>
                <span style={{color: 'var(--azul-antartico)', textDecoration: 'underline'}}>usuario@et.mde.es</span>
              </div>
              <div style={{height: 1, background: 'var(--rojo-bandera)', width: 36, margin: '14px 0 12px'}}></div>
              <div style={{fontFamily: 'Archivo', fontSize: 11, fontWeight: 700, color: 'var(--azul-antartico)', textTransform: 'uppercase', letterSpacing: '0.04em', lineHeight: 1.4}}>
                Comprometidos con la ciencia,<br/>
                <span style={{fontWeight: 300, color: 'var(--azul-medio)'}}>en la frontera de lo desconocido</span>
              </div>
            </div>
            <img src="assets/Emblema_XL.png" style={{width: 90, height: 90, flexShrink: 0}}/>
          </div>
        </div>
        <div className="card-foot"><span>FIRMA DE CORREO</span><span>ARIAL · 11–14 PT · ANCHO MÁX. 640 PX</span></div>
      </div>

      <table className="spec-table" style={{marginTop: 24}}>
        <thead><tr><th>ELEMENTO</th><th>ESPECIFICACIÓN</th></tr></thead>
        <tbody>
          <tr><td>Tipografía principal</td><td className="mono">Arial · 13–14 pt · sustituto universal de Archivo</td></tr>
          <tr><td>Datos técnicos</td><td className="mono">JetBrains Mono / Arial · 11 pt · color piedra</td></tr>
          <tr><td>Lema · primera línea</td><td className="mono">Archivo Bold 11 pt · MAYÚSCULAS · grafito · tracking 4%</td></tr>
          <tr><td>Lema · segunda línea</td><td className="mono">Archivo Light 11 pt · MAYÚSCULAS · grafito medio</td></tr>
          <tr><td>Escudo izquierdo</td><td className="mono">Marca institucional Ejército de Tierra · 78 × 96 px</td></tr>
          <tr><td>Escudo derecho</td><td className="mono">Emblema XL Contingente Antártico · 90 × 90 px</td></tr>
          <tr><td>Separador</td><td className="mono">Línea rojo bandera · 36 × 1 px sobre el lema</td></tr>
        </tbody>
      </table>

      <div style={{
        marginTop: 32,
        padding: '24px 26px',
        background: 'var(--azul-antartico)',
        color: 'var(--blanco)',
        borderRadius: 4,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 24,
        flexWrap: 'wrap'
      }}>
        <div style={{flex: '1 1 280px'}}>
          <div style={{fontFamily: 'JetBrains Mono', fontSize: 9, letterSpacing: '0.22em',
                       color: 'var(--rojo-bandera)', textTransform: 'uppercase', fontWeight: 600,
                       marginBottom: 6}}>
            Recurso descargable
          </div>
          <div style={{fontFamily: 'Archivo', fontWeight: 700, fontSize: 18, marginBottom: 4,
                       letterSpacing: '-0.01em'}}>
            Firma de correo lista para instalar
          </div>
          <div style={{fontFamily: 'Archivo', fontWeight: 300, fontSize: 13, color: 'var(--azul-hielo)',
                       lineHeight: 1.5}}>
            Vista previa, copia al portapapeles e instrucciones por cliente
            (Apple Mail, Outlook, Gmail, OWA).
          </div>
        </div>
        <a href="firma-email.html" style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          padding: '12px 22px',
          background: 'var(--rojo-bandera)',
          color: 'var(--blanco)',
          textDecoration: 'none',
          fontFamily: 'Archivo',
          fontSize: 12,
          fontWeight: 700,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          borderRadius: 2,
          whiteSpace: 'nowrap'
        }}>
          Abrir firma <span style={{fontSize: 16}}>→</span>
        </a>
      </div>
    </section>
  );
}

window.PaperBusinessCard = PaperBusinessCard;
window.PaperLetter = PaperLetter;