/*
  sections.jsx — Larger composed sections: FAQ, foro, share modal, notify modal
*/

const SECTION_CSS = `
/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 1px; background: rgba(26,31,20,0.12); }
.faq-item { background: var(--paper); }
.faq-q {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq-q::before {
  content: counter(faq, decimal-leading-zero);
  counter-increment: faq;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.faq-q .chev {
  margin-left: auto;
  transition: transform 0.25s ease;
  color: var(--muted);
}
.faq-item.open .faq-q .chev { transform: rotate(90deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.25s ease;
  padding: 0 18px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding: 0 18px 18px 18px;
}

/* Forum */
.forum-thread { display: flex; flex-direction: column; gap: 14px; }
.forum-post {
  background: var(--paper);
  padding: 16px 18px;
  border-left: 3px solid var(--olive);
  position: relative;
}
.forum-post.op { border-color: var(--reserva); background: var(--paper-2); }
.forum-post.mine { border-color: var(--plaza); }
.forum-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.forum-meta .author { color: var(--ink); font-weight: 700; }
.forum-meta .badge {
  padding: 2px 6px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.forum-meta .badge.plaza { background: var(--plaza); }
.forum-meta .badge.reserva { background: var(--reserva); color: var(--ink); }
.forum-meta .badge.rechazo { background: var(--rechazo); }
.forum-body { color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.forum-actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.forum-actions button {
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.forum-actions button:hover { color: var(--ink); }
.forum-actions button.liked { color: var(--reserva-deep); }

.compose {
  background: var(--paper);
  padding: 16px 18px;
  border-top: 2px dashed var(--paper-edge);
}
.compose textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  resize: vertical;
  min-height: 60px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.compose textarea::placeholder { color: var(--muted); }
.compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: backdrop-in 0.2s ease;
}
@keyframes backdrop-in { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: var(--paper);
  color: var(--ink);
  max-width: 460px;
  width: 100%;
  padding: 0;
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  animation: modal-in 0.25s cubic-bezier(.16,.84,.36,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--paper-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.modal-close {
  background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: 4px;
}
.modal-body { padding: 20px 22px; }
.modal-footer {
  padding: 14px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--paper-edge);
  background: var(--paper-2);
}

/* Share card preview */
.share-preview {
  position: relative;
  background: var(--bg);
  color: var(--paper);
  padding: 28px;
  margin: 8px 0 16px;
  overflow: hidden;
  border-radius: 2px;
}
.share-preview .sp-stencil {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}
.share-preview .sp-stencil em {
  font-style: normal;
  color: var(--reserva);
}
.share-preview.plaza .sp-stencil em { color: var(--plaza); }
.share-preview.rechazo .sp-stencil em { color: var(--rechazo); }
.share-preview .sp-meta {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.7;
  text-transform: uppercase;
}
.share-preview .sp-num {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.85;
}
.share-preview::before {
  content: "ZA";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%) rotate(-12deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 90px;
  opacity: 0.06;
  letter-spacing: -0.04em;
}
`;
(function injectSectionsCSS() {
  if (document.getElementById('za-sections-css')) return;
  const el = document.createElement('style');
  el.id = 'za-sections-css';
  el.textContent = SECTION_CSS;
  document.head.appendChild(el);
})();


/* ---------- FAQ ---------- */
const FAQ_DATA = [
  {
    q: "¿Esta web es oficial del Ministerio de Defensa?",
    a: "No. Zurullitos Armados es una herramienta hecha por opositores para opositores. Los datos los hemos cargado tal cual desde el PDF oficial publicado por la Subdirección General de Reclutamiento. Para cualquier resolución vinculante consulta siempre el BOD y la página oficial reclutamiento.defensa.gob.es."
  },
  {
    q: "¿De qué convocatoria son los datos que muestra?",
    a: "Resolución 452/38557/2025, de 29 de diciembre, Ciclo Segundo. Listado definitivo publicado el 24 de abril de 2026 — 4.522 plazas adjudicadas en Tierra, Armada y Aire."
  },
  {
    q: "Tengo plaza, ¿cuándo me incorporo?",
    a: "El día, hora y centro de formación te lo comunica tu Subdelegación de Defensa por los cauces habituales (SMS, correo y/o llamada). Esa información no aparece en el listado del BOD."
  },
  {
    q: "Estoy en reserva. ¿Qué probabilidad real tengo de entrar?",
    a: "La «Relación Complementaria de Aspirantes Aptos No Clasificados» cubre renuncias, no presentaciones y bajas durante la fase de orientación. Históricamente se mueve entre un 8 % y un 25 % de las plazas. La estimación que ves aquí compara tu posición con el número de plazas de tu vacante; es orientativa, no oficial."
  },
  {
    q: "Mi N.I.O no aparece por ningún lado",
    a: "Si has superado la fase 1 deberías estar en la lista de seleccionados (la grande, 1.041 págs.). Si no apareces ahí significa que la Comisión Permanente no te ha clasificado para fase 2 en este ciclo. Comprueba tu Resolución personal en la sede electrónica del Ministerio."
  },
  {
    q: "¿Puedo activar avisos cuando cambie mi estado?",
    a: "Sí. En «Avisos» introduces un correo o un Telegram y te notificamos en cuanto el siguiente BOD modifique tu posición en reserva. Cero spam, baja con un click."
  },
  {
    q: "¿De dónde sale el código de vacante?",
    a: "Es el código numérico del Anexo III de la convocatoria. 5xxxx → Ejército de Tierra, 6xxxx → Armada, 7xxxx → Ejército del Aire y del Espacio. La descripción literal de cada especialidad la encontrarás en el Anexo III."
  },
  {
    q: "¿Cómo se calcula la posición exacta en reserva?",
    a: "Aplicamos la lógica oficial de la «lista depurada». Partimos del puesto que ocupas en esa vacante (la columna Ord.Parc. del PDF de seleccionados) y le restamos a todos los aspirantes que iban por delante de ti pero ya tienen plaza asignada en otra vacante (porque entonces el Ministerio les retira de TODAS las listas de reserva). El resultado es tu puesto real en la complementaria que se llama cuando hay renuncias."
  },
  {
    q: "Si saco plaza en mi op=3, ¿qué pasa con mi op=1, op=2, op=4… ?",
    a: "Que dejas de estar en sus listas de reserva. Al adjudicársete una plaza, el Ministerio te retira de todas las listas complementarias del resto de tus vacantes. Por eso los que iban detrás de ti en esas listas suben una posición — es la depuración."
  },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq-list" style={{ counterReset: 'faq' }}>
      {FAQ_DATA.map((f, i) => (
        <div key={i} className={classNames('faq-item', open === i && 'open')}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{f.q}</span>
            <span className="chev"><IconChevron size={16} /></span>
          </button>
          <div className="faq-a">{f.a}</div>
        </div>
      ))}
    </div>
  );
}


/* ---------- Forum (mocked) ---------- */
const FORUM_INITIAL = [
  {
    id: 1, author: 'Cabo_Casas', branch: 'TIERRA', state: 'plaza',
    when: 'hace 3 h', op: true,
    body: '¡¡PLAZA en 50014 (Infantería Ligera Aerotransportable, La Coruña)!! Llevaba 3 convocatorias intentándolo. Ánimo a los que estáis en reserva, en la mía se movió hasta el puesto 6 el año pasado.',
    likes: 47, replies: 12, liked: false,
  },
  {
    id: 2, author: 'Marinera_2026', branch: 'ARMADA', state: 'reserva',
    when: 'hace 5 h',
    body: 'Reserva nº 3 en 60023. La Marinera me dijo por teléfono que normalmente entran hasta el 4 o 5. Cruzo dedos. ¿Alguien sabe cuánto tardan en llamar tras una renuncia?',
    likes: 18, replies: 7, liked: false,
  },
  {
    id: 3, author: 'AireOPS', branch: 'AIRE', state: 'reserva',
    when: 'hace 8 h',
    body: 'Pregunta seria: ¿qué pasa si me llaman de reserva pero ya he empezado otra oposición? ¿Puedo renunciar sin perder los puntos de baremo para el próximo ciclo?',
    likes: 9, replies: 14, liked: false,
  },
  {
    id: 4, author: 'Mecánico_Ávila', branch: 'TIERRA', state: 'rechazo',
    when: 'hace 1 día',
    body: 'A los que no hemos entrado: el próximo ciclo abre en septiembre. He ido al CRM y me han confirmado que mantienen los 33 puntos del CFGS. A la próxima cae 💪',
    likes: 31, replies: 3, liked: true,
  },
];

function Forum({ myState }) {
  const [posts, setPosts] = useState(FORUM_INITIAL);
  const [draft, setDraft] = useState('');

  const toggleLike = (id) => {
    setPosts(ps => ps.map(p => p.id === id
      ? { ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1) }
      : p
    ));
  };
  const submit = () => {
    if (!draft.trim()) return;
    const me = {
      id: Date.now(),
      author: 'Tú (anónimo)',
      branch: myState?.branch || 'TIERRA',
      state: myState?.kind || 'reserva',
      when: 'ahora',
      body: draft.trim(),
      likes: 0, replies: 0, liked: false, mine: true,
    };
    setPosts(ps => [me, ...ps]);
    setDraft('');
  };

  return (
    <div>
      <div className="compose">
        <textarea
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Comparte cómo te ha ido, pregunta o anima al resto…"
          maxLength={500}
        />
        <div className="compose-footer">
          <span>{draft.length}/500 · publicas como ANÓNIMO</span>
          <button className="btn btn-dark btn-sm" onClick={submit} disabled={!draft.trim()}>
            Publicar
          </button>
        </div>
      </div>

      <Rule label="HILOS RECIENTES" style={{ marginTop: 18, color: 'var(--paper)' }} />

      <div className="forum-thread">
        {posts.map(p => (
          <div key={p.id} className={classNames('forum-post', p.op && 'op', p.mine && 'mine')}>
            <div className="forum-meta">
              <span className="author">{p.author}</span>
              <span className={`badge ${p.state}`}>{p.state === 'plaza' ? 'CON PLAZA' : p.state === 'reserva' ? 'EN RESERVA' : p.state === 'rechazo' ? 'SIN PLAZA' : ''}</span>
              <span>{p.branch}</span>
              <span>·</span>
              <span>{p.when}</span>
            </div>
            <div className="forum-body">{p.body}</div>
            <div className="forum-actions">
              <button onClick={() => toggleLike(p.id)} className={p.liked ? 'liked' : ''}>
                ▲ {p.likes}
              </button>
              <button>💬 {p.replies} respuestas</button>
              <button>compartir</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}


/* ---------- Modal shell ---------- */
function Modal({ open, onClose, title, children, footer }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div className="modal-title">{title}</div>
          <button className="modal-close" onClick={onClose} aria-label="Cerrar"><IconCross size={20} /></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
}


/* ---------- Share modal ---------- */
function ShareModal({ open, onClose, result }) {
  const toast = useToast();
  if (!result) return null;

  const headline = result.kind === 'plaza'
    ? 'TENGO <em>PLAZA</em>'
    : result.kind === 'reserva'
      ? <>RESERVA <em>Nº {result.reservePos}</em></>
      : <>SIN <em>PLAZA</em></>;
  const branchLabel = result.branch === 'TIERRA' ? 'Ejército de Tierra'
    : result.branch === 'ARMADA' ? 'Armada'
    : result.branch === 'AIRE' ? 'Ejército del Aire' : '—';

  const anonNio = result.nio ? result.nio.slice(0, 5) + '-XX-XXXXX' : '';
  const text = result.kind === 'plaza'
    ? `Tengo plaza en la convocatoria de Tropa y Marinería 2026 (${branchLabel}, vacante ${result.vac}). Consultado en Zurullitos Armados.`
    : result.kind === 'reserva'
      ? `Reserva nº ${result.reservePos} en la convocatoria de Tropa y Marinería 2026 (${branchLabel}, vacante ${result.vac}). Cruzo dedos. ZurullitosArmados.com`
      : `No he entrado en este ciclo de Tropa y Marinería 2026. A por el siguiente. ZurullitosArmados.com`;

  const copy = () => {
    navigator.clipboard?.writeText(text);
    toast('Texto copiado al portapapeles', 'success');
  };
  const openShare = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };
  const shareUrl = typeof window !== 'undefined' ? window.location.origin + window.location.pathname : '';
  const twitterUrl  = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text + '\n' + shareUrl)}`;
  const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text + '\n' + shareUrl)}`;
  const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(text)}`;

  return (
    <Modal open={open} onClose={onClose} title="Compartir resultado">
      <p style={{ margin: '0 0 12px', fontSize: 14, color: 'var(--ink-soft)' }}>
        Tu N.I.O nunca se comparte. Solo la cifra agregada y el código de vacante.
      </p>
      <div className={`share-preview ${result.kind}`}>
        <div className="sp-stencil">{headline}</div>
        <div className="sp-meta">Tropa y Marinería · Ciclo II · 2026</div>
        <div className="sp-num">{anonNio} · {branchLabel}</div>
      </div>
      <textarea
        readOnly
        value={text}
        style={{
          width: '100%', minHeight: 80, padding: 10,
          fontFamily: 'var(--font-ui)', fontSize: 13, color: 'var(--ink-soft)',
          background: 'var(--paper-2)', border: '1px solid var(--paper-edge)',
          borderRadius: 2, resize: 'vertical',
        }}
      />
      <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
        <button className="btn btn-ink" onClick={copy}><IconCopy size={14} /> Copiar texto</button>
        <button className="btn btn-ghost" onClick={() => openShare(twitterUrl)}>𝕏 Twitter</button>
        <button className="btn btn-ghost" onClick={() => openShare(whatsappUrl)}>WhatsApp</button>
        <button className="btn btn-ghost" onClick={() => openShare(telegramUrl)}>Telegram</button>
      </div>
    </Modal>
  );
}


/* ---------- Notify modal ---------- */
function NotifyModal({ open, onClose, result }) {
  const toast = useToast();
  const [chan, setChan] = useState('email');
  const [val, setVal] = useState('');
  const [enabled, setEnabled] = useState(false);

  const submit = () => {
    if (!val.trim()) return;
    setEnabled(true);
    toast('Avisos activados ✓', 'success');
    setTimeout(onClose, 700);
  };

  return (
    <Modal open={open} onClose={onClose} title="Activar avisos">
      <Banner tone="warn" icon={<IconWarn />}>
        <strong>Próximamente.</strong> El sistema de avisos por correo, Telegram y SMS aún no está activo. El formulario de abajo es una previsualización.
      </Banner>
      <p style={{ margin: '14px 0 16px', fontSize: 14, color: 'var(--ink-soft)' }}>
        {result?.kind === 'reserva'
          ? <>Te avisaremos en cuanto la <strong>posición {result.reservePos}</strong> de tu vacante <strong>{result.vac}</strong> se actualice en el próximo BOD.</>
          : result?.kind === 'plaza'
            ? <>Te avisaremos de fechas clave: incorporación, jura de bandera y publicación del Ciclo III.</>
            : <>Te avisaremos cuando se publique la próxima convocatoria.</>
        }
      </p>

      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {['email', 'telegram', 'sms'].map(c => (
          <button
            key={c}
            className={classNames('chan-tab', chan === c && 'active')}
            onClick={() => setChan(c)}
          >{c}</button>
        ))}
      </div>

      <label style={{ display: 'block', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 }}>
        {chan === 'email' ? 'Correo electrónico' : chan === 'telegram' ? 'Usuario de Telegram' : 'Teléfono móvil'}
      </label>
      <input
        type={chan === 'email' ? 'email' : 'text'}
        value={val}
        onChange={(e) => setVal(e.target.value)}
        placeholder={chan === 'email' ? 'tu@correo.es' : chan === 'telegram' ? '@mi_usuario' : '+34 600 00 00 00'}
        className="text-input"
      />

      <p style={{ margin: '14px 0 0', fontSize: 12, color: 'var(--muted)', lineHeight: 1.5 }}>
        🔒 No guardamos tu N.I.O, solo un hash anónimo. Baja con un click. Sin spam, sin terceros.
      </p>

      <style>{`
        .chan-tab {
          flex: 1;
          padding: 8px 12px;
          background: transparent;
          border: 1px solid var(--paper-edge);
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--muted);
          cursor: pointer;
        }
        .chan-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
        .text-input {
          width: 100%;
          padding: 12px;
          font-family: var(--font-mono);
          font-size: 14px;
          background: var(--paper-2);
          border: 1px solid var(--paper-edge);
          border-radius: 2px;
          color: var(--ink);
          outline: none;
        }
        .text-input:focus { border-color: var(--ink); }
      `}</style>

      <div className="modal-footer" style={{ marginTop: 18, marginLeft: -22, marginRight: -22, marginBottom: -20 }}>
        <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-ink" onClick={submit}>Activar avisos</button>
      </div>
    </Modal>
  );
}


Object.assign(window, { FAQ, Forum, Modal, ShareModal, NotifyModal });