/* ═══════════════════════════════════════════
   Capítulo 4 — Uniformidad, plantillas, merch
   ═══════════════════════════════════════════ */

function Uniformity({ num, total }) {
  return (
    <section className="page" id="uniformidad">
      <PageHeader section="4.1 · Uniformidad · Parches" num={num} total={total} />
      <Eyebrow>4.1 Uniformidad y parches</Eyebrow>
      <h1 className="h1">Parches<span className="light">y distintivos</span></h1>
      <div className="rule"></div>
      <p className="lede">
        Los parches reproducen el emblema bordado sobre tejido, manteniendo
        proporciones y colores corporativos.
      </p>

      <div className="grid-3" style={{marginTop: 32}}>
        <div className="card">
          <div className="card-stage" style={{padding: 40, background: '#1F2426'}}>
            <div style={{width: 160, height: 160, borderRadius: '50%', background: 'var(--blanco)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3), inset 0 0 0 4px #5A5F5D'}}>
              <Emblem src="assets/Emblema_XL.png" size={140}/>
            </div>
          </div>
          <div className="card-foot"><span>PARCHE COLOR</span><span>Ø 80 MM · BORDADO</span></div>
        </div>
        <div className="card">
          <div className="card-stage" style={{padding: 40, background: '#1F2426'}}>
            <div style={{width: 160, height: 160, borderRadius: '50%', background: '#1F2426', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3), inset 0 0 0 4px #5A5F5D'}}>
              <MonoEmblem src="assets/Emblema_XL.svg" size={140} color="#D8DCDA"/>
            </div>
          </div>
          <div className="card-foot"><span>PARCHE BAJA VISIBILIDAD</span><span>UNIFORME CAMPAÑA</span></div>
        </div>
        <div className="card">
          <div className="card-stage" style={{padding: 40, background: '#1F2426'}}>
            <div style={{width: 160, height: 160, borderRadius: '50%', background: 'var(--azul-antartico)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 12px rgba(0,0,0,0.3), inset 0 0 0 4px var(--azul-profundo)'}}>
              <MonoEmblem src="assets/Emblema_XL.svg" size={140} color="#FFFFFF"/>
            </div>
          </div>
          <div className="card-foot"><span>PARCHE GALA</span><span>FONDO INSTITUCIONAL</span></div>
        </div>
      </div>

      <SectionTitle num="4.1.1">Especificaciones de bordado</SectionTitle>
      <table className="spec-table">
        <thead><tr><th>VARIANTE</th><th>DIÁMETRO</th><th>HILOS</th><th>SOPORTE</th></tr></thead>
        <tbody>
          <tr><td>Color institucional</td><td className="mono">80 mm</td><td className="mono">7 hilos · CMYK aprox.</td><td>Tejido técnico negro</td></tr>
          <tr><td>Baja visibilidad</td><td className="mono">80 mm</td><td className="mono">2 hilos · gris / negro</td><td>Tejido camuflaje</td></tr>
          <tr><td>Gala</td><td className="mono">80 mm</td><td className="mono">5 hilos · gris / blanco</td><td>Paño grafito</td></tr>
        </tbody>
      </table>
    </section>
  );
}

function Templates({ num, total }) {
  return (
    <section className="page" id="plantillas">
      <PageHeader section="4.2 · Plantillas" num={num} total={total} />
      <Eyebrow>4.2 Plantillas operativas</Eyebrow>
      <h1 className="h1">Documentos<span className="light">y presentaciones</span></h1>
      <div className="rule"></div>
      <p className="lede">
        Plantillas base para informes, partes diarios y presentaciones
        institucionales del Contingente.
      </p>

      <SectionTitle num="4.2.1">Informe / Parte diario</SectionTitle>
      <div className="grid-3">
        <div className="card">
          <div className="card-stage" style={{padding: 24, background: '#F0F2F5'}}>
            <div style={{width: '100%', aspectRatio: '210/297', background: 'var(--blanco)', padding: 18, position: 'relative', boxShadow: '0 4px 12px rgba(0,0,0,0.08)'}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 8, paddingBottom: 10, borderBottom: '1px solid var(--line)'}}>
                <img src="assets/Emblema_XL.png" style={{width: 24, height: 24}}/>
                <div>
                  <div style={{fontFamily: 'Archivo', fontSize: 5, fontWeight: 700, color: 'var(--azul-antartico)', letterSpacing: '0.15em'}}>XL CONTINGENTE ANTÁRTICO</div>
                  <div style={{fontFamily: 'JetBrains Mono', fontSize: 4, color: 'var(--piedra)', marginTop: 1}}>PARTE DIARIO · DD/MM/AAAA</div>
                </div>
              </div>
              <div style={{fontFamily: 'Archivo', fontSize: 9, fontWeight: 700, color: 'var(--azul-antartico)', marginTop: 12, textTransform: 'uppercase'}}>Situación general</div>
              <div style={{height: 0.5, background: 'var(--rojo-bandera)', width: 16, margin: '4px 0 8px'}}></div>
              {Array.from({length: 22}).map((_,i) => (
                <div key={i} style={{height: 1.5, background: 'var(--azul-hielo)', borderRadius: 0.5, marginBottom: 1.5, width: i % 6 === 5 ? '50%' : '95%'}}></div>
              ))}
            </div>
          </div>
          <div className="card-foot"><span>PARTE DIARIO</span><span>A4 · WORD</span></div>
        </div>

        <div className="card">
          <div className="card-stage" style={{padding: 24, background: '#F0F2F5'}}>
            <div style={{width: '100%', aspectRatio: '210/297', background: 'var(--blanco)', padding: 18, position: 'relative', boxShadow: '0 4px 12px rgba(0,0,0,0.08)'}}>
              <div style={{height: 60, background: 'var(--azul-antartico)', margin: -18, marginBottom: 14, padding: 14, position: 'relative'}}>
                <img src="assets/Emblema_XL.png" style={{width: 30, height: 30, position: 'absolute', top: 10, right: 14}}/>
                <div style={{fontFamily: 'Archivo', fontSize: 4, fontWeight: 600, color: 'var(--azul-hielo)', letterSpacing: '0.3em'}}>INFORME · 2026</div>
                <div style={{fontFamily: 'Archivo', fontSize: 11, fontWeight: 800, color: 'white', textTransform: 'uppercase', marginTop: 18, letterSpacing: '-0.02em', lineHeight: 1}}>Título<br/>del informe</div>
              </div>
              <div style={{display: 'flex', height: 1, marginBottom: 14}}>
                <div style={{flex: 1, background: '#C8102E'}}></div>
                <div style={{flex: 1, background: '#F4C400'}}></div>
                <div style={{flex: 1, background: '#C8102E'}}></div>
              </div>
              {Array.from({length: 18}).map((_,i) => (
                <div key={i} style={{height: 1.5, background: 'var(--azul-hielo)', borderRadius: 0.5, marginBottom: 1.5, width: i % 5 === 4 ? '55%' : '92%'}}></div>
              ))}
            </div>
          </div>
          <div className="card-foot"><span>INFORME PORTADA</span><span>A4 · WORD</span></div>
        </div>

        <div className="card">
          <div className="card-stage" style={{padding: 24, background: '#F0F2F5', flexDirection: 'column', gap: 12}}>
            <div className="tmpl-slide" style={{width: '100%', background: 'var(--azul-antartico)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', padding: 14}}>
              <img src="assets/Emblema_XL.png" style={{width: 36, height: 36}}/>
              <div style={{fontFamily: 'Archivo', fontSize: 5, fontWeight: 700, color: 'var(--rojo-bandera)', letterSpacing: '0.3em', marginTop: 8}}>CAMPAÑA 2026</div>
              <div style={{fontFamily: 'Archivo', fontSize: 11, fontWeight: 800, color: 'white', textTransform: 'uppercase', marginTop: 4, letterSpacing: '-0.02em'}}>Título</div>
            </div>
            <div className="tmpl-slide" style={{width: '100%', padding: 12}}>
              <div style={{fontFamily: 'Archivo', fontSize: 4, fontWeight: 700, color: 'var(--rojo-bandera)', letterSpacing: '0.2em'}}>SECCIÓN 01</div>
              <div style={{fontFamily: 'Archivo', fontSize: 9, fontWeight: 700, color: 'var(--azul-antartico)', marginTop: 3, lineHeight: 1}}>Título de slide</div>
              <div style={{height: 0.5, background: 'var(--rojo-bandera)', width: 12, margin: '4px 0 6px'}}></div>
              {Array.from({length: 6}).map((_,i) => (
                <div key={i} style={{height: 1, background: 'var(--azul-hielo)', marginBottom: 1.5, width: i % 3 === 2 ? '50%' : '85%'}}></div>
              ))}
            </div>
          </div>
          <div className="card-foot"><span>PRESENTACIÓN</span><span>16:9 · POWERPOINT</span></div>
        </div>
      </div>
    </section>
  );
}

function Merch({ num, total }) {
  return (
    <section className="page" id="merch">
      <PageHeader section="5.1 · Merchandising" num={num} total={total} />
      <Eyebrow>5.1 Materiales conmemorativos</Eyebrow>
      <h1 className="h1">Merch<span className="light">de campaña</span></h1>
      <div className="rule"></div>
      <p className="lede">
        Aplicación del emblema en materiales textiles, vajilla institucional y
        banderines conmemorativos de la campaña.
      </p>

      <div className="grid-3" style={{marginTop: 32}}>
        {/* Polo */}
        <div className="card">
          <div className="card-stage dark" style={{padding: 40}}>
            <svg viewBox="0 0 200 220" style={{width: 180}}>
              <path d="M40,40 L70,20 L80,30 Q100,40 120,30 L130,20 L160,40 L170,80 L150,80 L150,200 L50,200 L50,80 L30,80 Z"
                    fill="#1F2426" stroke="#2C3133" strokeWidth="1"/>
              <path d="M80,30 L100,50 L120,30" fill="none" stroke="#C9CDCE" strokeWidth="0.6"/>
            </svg>
            <div style={{position: 'absolute', left: '50%', top: '52%', transform: 'translate(-50%, -50%)'}}>
              <img src="assets/Emblema_XL.png" style={{width: 48, height: 48}}/>
            </div>
          </div>
          <div className="card-foot"><span>POLO INSTITUCIONAL</span><span>GRAFITO</span></div>
        </div>

        {/* Taza */}
        <div className="card">
          <div className="card-stage" style={{padding: 40, background: 'var(--hielo)'}}>
            <div style={{position: 'relative'}}>
              <div style={{width: 130, height: 140, background: 'var(--blanco)', borderRadius: '4px 4px 8px 8px', boxShadow: '0 8px 20px rgba(14,31,63,0.15), inset -10px 0 20px rgba(0,0,0,0.05)', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                <img src="assets/Emblema_XL.png" style={{width: 80, height: 80}}/>
              </div>
              <div style={{position: 'absolute', right: -22, top: 30, width: 30, height: 60, border: '8px solid var(--blanco)', borderRadius: '0 30px 30px 0', boxShadow: '4px 0 8px rgba(14,31,63,0.1)'}}></div>
            </div>
          </div>
          <div className="card-foot"><span>TAZA CERÁMICA</span><span>BLANCA · IMPRESIÓN COLOR</span></div>
        </div>

        {/* Banderín */}
        <div className="card">
          <div className="card-stage" style={{padding: 30, background: 'var(--hielo)'}}>
            <svg viewBox="0 0 200 240" style={{width: 160}}>
              <line x1="20" y1="20" x2="20" y2="230" stroke="#6B7280" strokeWidth="2"/>
              <path d="M20,20 L180,40 L180,180 L20,200 Z" fill="#1F2426"/>
              {/* franjas tricolor superior */}
              <rect x="20" y="20" width="160" height="4" fill="#C8102E"/>
              <rect x="20" y="196" width="160" height="4" fill="#C8102E"/>
            </svg>
            <div style={{position: 'absolute', left: 95, top: '50%', transform: 'translate(-50%, -50%)'}}>
              <img src="assets/Emblema_XL.png" style={{width: 70, height: 70, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))'}}/>
              <div style={{textAlign: 'center', marginTop: 6, fontFamily: 'Archivo', fontSize: 7, fontWeight: 700, color: 'white', letterSpacing: '0.15em'}}>XL · 2026</div>
            </div>
          </div>
          <div className="card-foot"><span>BANDERÍN</span><span>40 × 30 CM · TEJIDO</span></div>
        </div>
      </div>

      <SectionTitle num="5.1.1">Pautas generales</SectionTitle>
      <div className="body" style={{maxWidth: 720}}>
        <p>
          Todo material de merchandising debe respetar las versiones oficiales
          del emblema y la paleta corporativa. Se evitarán fondos saturados o
          patrones que comprometan la legibilidad del símbolo.
        </p>
        <p>
          Cualquier producto conmemorativo de la campaña debe incluir, junto al
          emblema, la referencia <strong>«XL · CAMPAÑA 2026»</strong> en
          tipografía Archivo Bold con tracking 0.15 em.
        </p>
      </div>
    </section>
  );
}

function Closing({ num, total }) {
  return (
    <section className="page" id="cierre" style={{background: 'var(--azul-antartico)', color: 'white', borderBottom: 'none'}}>
      <div className="page-header" style={{color: 'var(--azul-glaciar)', borderBottomColor: 'rgba(110,139,168,0.25)'}}>
        <span>FIN DEL DOCUMENTO</span>
        <span>Manual de Identidad · Contingente Antártico</span>
        <span><span style={{color: 'var(--rojo-bandera)', fontWeight: 700}}>{num}</span> / {total}</span>
      </div>
      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '60px 0'}}>
        <img src="assets/Emblema_XL.png" style={{width: 140, height: 140, marginBottom: 30}}/>
        <div style={{display: 'flex', height: 4, width: 200, marginBottom: 40}}>
          <div style={{flex: 1, background: '#C8102E'}}></div>
          <div style={{flex: 1, background: '#F4C400'}}></div>
          <div style={{flex: 1, background: '#C8102E'}}></div>
        </div>
        <div style={{borderTop: '2px solid var(--rojo-bandera)', paddingTop: 28, maxWidth: 680, marginBottom: 16}}>
          <div style={{fontFamily: 'Archivo', fontWeight: 700, fontSize: 36, color: 'var(--blanco)', textTransform: 'uppercase', letterSpacing: '0.01em', lineHeight: 1.15}}>
            Comprometidos con la ciencia,
          </div>
          <div style={{fontFamily: 'Archivo', fontWeight: 200, fontSize: 36, color: 'var(--azul-hielo)', textTransform: 'uppercase', letterSpacing: '0.01em', lineHeight: 1.15, marginTop: 4}}>
            en la frontera de lo desconocido
          </div>
        </div>
        <div style={{fontFamily: 'JetBrains Mono', fontSize: 9, color: 'var(--azul-glaciar)', letterSpacing: '0.3em', textTransform: 'uppercase', marginBottom: 32}}>Lema del Contingente</div>
        <div style={{fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--azul-glaciar)', letterSpacing: '0.25em', textTransform: 'uppercase', lineHeight: 2}}>
          XL Contingente Antártico<br/>
          Ejército de Tierra · Campaña Antártica Española 2026<br/>
          Edición 01 · v1.0 · Marzo 2026
        </div>
      </div>
    </section>
  );
}

window.Uniformity = Uniformity;
window.Templates = Templates;
window.Merch = Merch;
window.Closing = Closing;