/* global React */
const { useState, useEffect } = React;

/* ═══════════════════════════════════════════
   Componentes auxiliares
   ═══════════════════════════════════════════ */

function PageHeader({ section, num, total }) {
  return (
    <div className="page-header">
      <span>{section}</span>
      <span>Manual de Identidad · Contingente Antártico</span>
      <span><span className="page-num">{num}</span> / {total}</span>
    </div>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow">{children}</div>;
}

function SectionTitle({ num, children }) {
  return (
    <h3 className="section-title">
      <span className="section-num">{num}</span>
      {children}
    </h3>
  );
}

/* Componente emblema reutilizable */
function Emblem({ src, size = 200, style = {} }) {
  return <img src={src} alt="" style={{ width: size, height: size, ...style }} />;
}

/* MonoEmblem — fetch SVG inline & override fills via CSS so monocromo funciona */
const _svgCache = {};
function MonoEmblem({ src, size = 200, color = "#000", style = {} }) {
  const [svg, setSvg] = React.useState(_svgCache[src] || null);
  React.useEffect(() => {
    if (_svgCache[src]) { setSvg(_svgCache[src]); return; }
    fetch(src).then(r => r.text()).then(text => {
      _svgCache[src] = text;
      setSvg(text);
    });
  }, [src]);
  if (!svg) {
    return <div style={{width: size, height: size, ...style}}/>;
  }
  return (
    <div
      className="mono-emblem"
      style={{ width: size, height: size, color, ...style }}
      dangerouslySetInnerHTML={{ __html: svg }}
    />
  );
}
window.Emblem = Emblem;
window.MonoEmblem = MonoEmblem;

/* ═══════════════════════════════════════════
   1. Portada
   ═══════════════════════════════════════════ */
function Cover() {
  return (
    <section className="page cover" id="portada">
      <div className="cover-tag">XL · CONTINGENTE · ANTÁRTICO</div>
      <div className="cover-emblem-wrap">
        <Emblem src="assets/Emblema_XL.png" size={220} />
      </div>
      <div className="cover-stripes">
        <div className="r"></div><div className="y"></div><div className="r"></div>
      </div>
      <div className="cover-content">
        <div className="cover-eyebrow">Manual de Identidad Corporativa · Edición 2026</div>
        <h1 className="cover-title">
          Contingente
          <span className="cover-title-sub">Antártico</span>
        </h1>
        <div className="cover-rule"></div>
        <p className="cover-desc">
          Sistema de identidad visual del XL Contingente Antártico del Ejército
          de Tierra, desplegado en la Base Antártica Española «Gabriel de Castilla»
          durante la Campaña Antártica Española 2026.
        </p>
        <div className="cover-motto">
          Comprometidos con la ciencia,<br/>
          <span className="cover-motto-light">en la frontera de lo desconocido</span>
        </div>
      </div>
      <div className="cover-foot">
        <span>EJÉRCITO DE TIERRA</span>
        <span>EDICIÓN 01 · V1.0</span>
        <span>62°58′ S — 60°40′ W</span>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════
   2. Introducción
   ═══════════════════════════════════════════ */
function Intro({ num, total }) {
  return (
    <section className="page" id="introduccion">
      <PageHeader section="00 · Introducción" num={num} total={total} />
      <Eyebrow>Propósito del manual</Eyebrow>
      <h1 className="h1">
        La guía<br/>
        <span className="light">de nuestra<br/>identidad</span>
      </h1>
      <div className="rule"></div>
      <p className="lede">
        Una identidad clara y reconocible refuerza la cohesión del Contingente
        y proyecta con coherencia los valores que representamos en la Antártida.
      </p>
      <div className="body">
        <p>
          Este manual recoge el sistema de identidad visual del <strong>XL Contingente
          Antártico del Ejército de Tierra</strong>, desplegado en la Base Antártica
          Española «Gabriel de Castilla» durante la <strong>Campaña Antártica
          Española 2026</strong>.
        </p>
        <p>
          Su finalidad es regular el uso correcto de los emblemas, paleta cromática,
          tipografía y aplicaciones gráficas en todos los soportes — papelería,
          uniformidad, plantillas de documentos, materiales de campaña y elementos
          de merchandising — garantizando una imagen institucional unificada,
          sobria y reconocible.
        </p>
        <p>
          Las indicaciones que siguen tienen carácter normativo. Para usos no
          contemplados expresamente, deben aplicarse los principios generales de
          legibilidad, austeridad y respeto por las proporciones definidas.
        </p>
      </div>

      <SectionTitle num="0.1">Símbolos del Contingente</SectionTitle>
      <p className="body">
        La identidad del Contingente se articula en torno a dos emblemas oficiales
        que conviven con peso equivalente: el emblema del Contingente — que identifica
        la dotación específica de la campaña — y el emblema institucional de la Base
        Antártica Española «Gabriel de Castilla».
      </p>

      <div className="grid-2">
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_XL.png" size={180} />
          </div>
          <div className="card-foot">
            <span>EMBLEMA · CONTINGENTE</span>
            <span>XL · 2026</span>
          </div>
        </div>
        <div className="card">
          <div className="card-stage">
            <Emblem src="assets/Emblema_BAE.png" size={180} />
          </div>
          <div className="card-foot">
            <span>EMBLEMA · BAE</span>
            <span>GABRIEL DE CASTILLA</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════
   Divisor de capítulo
   ═══════════════════════════════════════════ */
function Divider({ num, title, lightTitle, desc }) {
  return (
    <section className="page divider">
      <div className="divider-num">CAPÍTULO {num}</div>
      <h2 className="divider-title">
        {title}
        {lightTitle && <span className="light">{lightTitle}</span>}
      </h2>
      <div className="divider-rule"></div>
      <p className="divider-desc">{desc}</p>
    </section>
  );
}

window.Cover = Cover;
window.Intro = Intro;
window.Divider = Divider;
window.PageHeader = PageHeader;
window.Eyebrow = Eyebrow;
window.SectionTitle = SectionTitle;
window.Emblem = Emblem;