/* ═══════════════════════════════════════════
   Capítulo 1 — El emblema
   Construcción, versiones, área de respeto, usos
   ═══════════════════════════════════════════ */

function EmblemConstruction({ num, total }) {
  return (
    <section className="page" id="construccion">
      <PageHeader section="1.1 · El emblema · Construcción" num={num} total={total} />
      <Eyebrow>1.1 Construcción geométrica</Eyebrow>
      <h1 className="h1">
        Geometría<br/>
        <span className="light">y proporción</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        El emblema se construye sobre una circunferencia maestra dividida en
        retícula de 12 X. Esta proporción debe respetarse en cualquier reproducción.
      </p>

      <div className="geom-stage" style={{marginTop: 32}}>
        <svg viewBox="0 0 600 380" xmlns="http://www.w3.org/2000/svg">
          {/* Retícula */}
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#C9CDCE" strokeWidth="0.4"/>
            </pattern>
          </defs>
          <rect x="120" y="40" width="300" height="300" fill="url(#grid)"/>

          {/* Ejes principales */}
          <line x1="270" y1="40" x2="270" y2="340" stroke="#C8102E" strokeWidth="0.6" strokeDasharray="3,3"/>
          <line x1="120" y1="190" x2="420" y2="190" stroke="#C8102E" strokeWidth="0.6" strokeDasharray="3,3"/>

          {/* Circunferencia maestra */}
          <circle cx="270" cy="190" r="148" fill="none" stroke="#1F2426" strokeWidth="1.2"/>
          {/* Circunferencia interna (anillo de texto) */}
          <circle cx="270" cy="190" r="120" fill="none" stroke="#1F2426" strokeWidth="0.6" strokeDasharray="2,2"/>
          {/* Círculo central */}
          <circle cx="270" cy="190" r="100" fill="none" stroke="#1F2426" strokeWidth="0.6" strokeDasharray="2,2"/>

          {/* Emblema escalado */}
          <image href="assets/Emblema_XL.png" x="120" y="40" width="300" height="300" opacity="0.95"/>

          {/* Etiquetas */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#1F2426" letterSpacing="1">
            <text x="430" y="194">12 X</text>
            <line x1="425" y1="190" x2="418" y2="190" stroke="#1F2426" strokeWidth="0.5"/>
            <text x="270" y="20" textAnchor="middle">X = Ø círculo central / 10</text>

            {/* leyenda lateral */}
            <text x="475" y="80" fill="#6B7280">— Circunferencia maestra</text>
            <text x="475" y="100" fill="#6B7280">— Anillo de texto</text>
            <text x="475" y="120" fill="#6B7280">— Núcleo (ilustración)</text>
            <text x="475" y="140" fill="#C8102E">— Ejes de simetría</text>
          </g>

          {/* Indicadores radio */}
          <line x1="270" y1="190" x2="418" y2="190" stroke="#C8102E" strokeWidth="0.8"/>
          <circle cx="270" cy="190" r="2.5" fill="#C8102E"/>
        </svg>
      </div>

      <SectionTitle num="1.1.1">Reglas de construcción</SectionTitle>
      <div className="grid-2">
        <div className="body">
          <p>
            El emblema se inscribe siempre en una circunferencia perfecta. La orla
            exterior contiene la denominación rotada sobre el anillo, separada por
            cuatro nodos: dos puntos rojos a 9h y 3h, y dos secciones con los
            colores de la bandera nacional a 12h y 6h.
          </p>
          <p>
            La ilustración del pingüino de barbijo (<em>Pygoscelis antarcticus</em>)
            sobre el contorno de Isla Decepción ocupa el círculo central interno
            (10 X de diámetro). Toda la composición es simétrica respecto al eje
            vertical.
          </p>
        </div>
        <div className="body">
          <p>
            <strong>Reproducción:</strong> usar siempre los archivos vectoriales
            originales (SVG/PDF). En aplicaciones donde el tamaño de reproducción
            sea inferior a 18 mm de diámetro, debe sustituirse por la versión
            simplificada (sin texto en orla).
          </p>
          <p>
            <strong>Modificaciones:</strong> no se admite ninguna alteración de
            proporciones, colores o composición. Cualquier necesidad de adaptación
            debe consultarse con la oficina de identidad del Contingente.
          </p>
        </div>
      </div>
    </section>
  );
}

function EmblemSafeZone({ num, total }) {
  return (
    <section className="page" id="seguridad">
      <PageHeader section="1.2 · El emblema · Área de respeto" num={num} total={total} />
      <Eyebrow>1.2 Zona de seguridad</Eyebrow>
      <h1 className="h1">
        Espacio<br/>
        <span className="light">de respeto</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        Alrededor del emblema debe mantenerse siempre una zona libre de cualquier
        otro elemento gráfico, equivalente a 1 X.
      </p>

      <div className="geom-stage" style={{marginTop: 32}}>
        <svg viewBox="0 0 600 380" xmlns="http://www.w3.org/2000/svg">
          {/* Marco zona seguridad */}
          <rect x="180" y="60" width="240" height="240" fill="none" stroke="#C8102E" strokeWidth="1" strokeDasharray="4,4"/>

          {/* Ticks de medida */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#C8102E" letterSpacing="1">
            <text x="155" y="40">1 X</text>
            <line x1="180" y1="20" x2="180" y2="60" stroke="#C8102E" strokeWidth="0.5" strokeDasharray="2,2"/>
            <line x1="210" y1="20" x2="210" y2="60" stroke="#C8102E" strokeWidth="0.5" strokeDasharray="2,2"/>
            <line x1="180" y1="30" x2="210" y2="30" stroke="#C8102E" strokeWidth="0.6"/>
            <text x="195" y="26" textAnchor="middle">X</text>
          </g>

          {/* Emblema */}
          <image href="assets/Emblema_XL.png" x="210" y="90" width="180" height="180"/>

          {/* leyenda */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#6B7280" letterSpacing="1">
            <text x="440" y="100">— Borde del emblema</text>
            <text x="440" y="120" fill="#C8102E">— Zona de seguridad</text>
            <text x="440" y="140">— Equivale a 1 X</text>
          </g>
        </svg>
      </div>

      <SectionTitle num="1.2.1">Tamaños mínimos de reproducción</SectionTitle>
      <div className="grid-3" style={{alignItems: 'end'}}>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={120} />
          </div>
          <div className="card-foot"><span>DIGITAL</span><span>≥ 80 px</span></div>
        </div>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={70} />
          </div>
          <div className="card-foot"><span>IMPRESIÓN</span><span>≥ 18 mm</span></div>
        </div>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={40} />
          </div>
          <div className="card-foot"><span>BORDADO / PARCHE</span><span>≥ 60 mm</span></div>
        </div>
      </div>
    </section>
  );
}

function EmblemVersions({ num, total }) {
  return (
    <section className="page" id="versiones">
      <PageHeader section="1.3 · El emblema · Versiones" num={num} total={total} />
      <Eyebrow>1.3 Versiones cromáticas</Eyebrow>
      <h1 className="h1">
        Versiones<br/>
        <span className="light">del emblema</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        El emblema cuenta con cuatro versiones oficiales para cubrir todas las
        situaciones de reproducción.
      </p>

      <div className="grid-4">
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={140} />
          </div>
          <div className="card-foot"><span>POSITIVO COLOR</span><span>PRINCIPAL</span></div>
        </div>
        <div className="card">
          <div className="card-stage dark">
            <Emblem src="assets/Emblema_XL_blanco_oficial.svg" size={140}/>
          </div>
          <div className="card-foot"><span>NEGATIVO BLANCO</span><span>S/ FONDO OSCURO</span></div>
        </div>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL_gris_oficial.svg" size={140}/>
          </div>
          <div className="card-foot"><span>ESCALA DE GRIS</span><span>1 TINTA</span></div>
        </div>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL_negro_oficial.svg" size={140}/>
          </div>
          <div className="card-foot"><span>NEGRO POSITIVO</span><span>SELLO / FAX</span></div>
        </div>
      </div>

      <SectionTitle num="1.3.1">Aplicación sobre fondos</SectionTitle>
      <div className="grid-4">
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={110} />
          </div>
          <div className="card-foot"><span>BLANCO</span><span style={{color: '#00875A'}}>✓ ÓPTIMO</span></div>
        </div>
        <div className="card">
          <div className="card-stage gray">
            <Emblem src="assets/Emblema_XL.png" size={110} />
          </div>
          <div className="card-foot"><span>GRIS PIEDRA</span><span style={{color: '#00875A'}}>✓ ADMITIDO</span></div>
        </div>
        <div className="card">
          <div className="card-stage dark">
            <Emblem src="assets/Emblema_XL_blanco_oficial.svg" size={110}/>
          </div>
          <div className="card-foot"><span>GRAFITO</span><span style={{color: '#00875A'}}>✓ NEGATIVO</span></div>
        </div>
        <div className="card">
          <div className="card-stage" style={{background: 'var(--rojo-bandera)'}}>
            <Emblem src="assets/Emblema_XL_blanco_oficial.svg" size={110}/>
          </div>
          <div className="card-foot"><span>ROJO</span><span style={{color: '#C8102E'}}>✕ EVITAR</span></div>
        </div>
      </div>
    </section>
  );
}

function EmblemUsage({ num, total }) {
  return (
    <section className="page" id="usos">
      <PageHeader section="1.4 · El emblema · Usos" num={num} total={total} />
      <Eyebrow>1.4 Usos correctos e incorrectos</Eyebrow>
      <h1 className="h1">
        Lo que sí.<br/>
        <span className="light">Lo que no.</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        La reproducción correcta del emblema requiere el cumplimiento estricto
        de las normas que se ilustran a continuación.
      </p>

      <div className="grid-3" style={{marginTop: 40}}>
        {/* Mal usos */}
        <div className="usage-card">
          <div className="usage-stage">
            <Emblem src="assets/Emblema_XL.png" size={100} style={{transform: 'scaleX(0.6)'}}/>
          </div>
          <div className="usage-label bad">No deformar</div>
        </div>
        <div className="usage-card">
          <div className="usage-stage">
            <Emblem src="assets/Emblema_XL.png" size={100} style={{transform: 'rotate(18deg)'}}/>
          </div>
          <div className="usage-label bad">No rotar</div>
        </div>
        <div className="usage-card">
          <div className="usage-stage">
            <Emblem src="assets/Emblema_XL.png" size={100} style={{filter: 'hue-rotate(90deg) saturate(2)'}}/>
          </div>
          <div className="usage-label bad">No alterar colores</div>
        </div>
        <div className="usage-card">
          <div className="usage-stage" style={{background: 'linear-gradient(135deg, #C8102E 0%, #F4C400 100%)'}}>
            <Emblem src="assets/Emblema_XL.png" size={100} />
          </div>
          <div className="usage-label bad">No usar fondos saturados</div>
        </div>
        <div className="usage-card">
          <div className="usage-stage">
            <Emblem src="assets/Emblema_XL.png" size={100} style={{opacity: 0.3}}/>
          </div>
          <div className="usage-label bad">No reducir opacidad</div>
        </div>
        <div className="usage-card">
          <div className="usage-stage">
            <Emblem src="assets/Emblema_XL.png" size={100} style={{filter: 'drop-shadow(4px 4px 0 #C8102E)'}}/>
          </div>
          <div className="usage-label bad">No añadir efectos</div>
        </div>
      </div>

      <SectionTitle num="1.4.1">Convivencia de los dos emblemas</SectionTitle>
      <p className="body">
        Cuando ambos emblemas aparezcan juntos, se mantendrán al mismo tamaño y
        a una distancia mínima de 2 X entre sus circunferencias. El orden de
        lectura es: emblema del Contingente a la izquierda, emblema de la BAE a
        la derecha.
      </p>
      <div className="card" style={{marginTop: 24}}>
        <div className="card-stage" style={{padding: '48px', gap: 60}}>
          <Emblem src="assets/Emblema_XL.png" size={140} />
          <Emblem src="assets/Emblema_BAE.png" size={140} />
        </div>
        <div className="card-foot"><span>COMPOSICIÓN CONJUNTA</span><span>SEPARACIÓN ≥ 2 X</span></div>
      </div>
    </section>
  );
}

window.EmblemConstruction = EmblemConstruction;
window.EmblemSafeZone = EmblemSafeZone;
window.EmblemVersions = EmblemVersions;
window.EmblemUsage = EmblemUsage;
