// Visas & Docs — Chapter III (Entry) + IV (Stack) + V (Wrong) + CTA + Reading + FAQ — Spanish
const { useState: useVState } = React;

const VisasEntry = () => {
  const lane = VISAS_LANES[2];
  return (
    <section className="visas-entry" id="entry">
      <div className="container">
        <div className="entry-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="entry-grid">
          <div className="entry-image" style={{ backgroundImage: `url(${lane.img})` }}>
            <div className="ei-coord">{lane.coord}</div>
          </div>
          <div className="entry-cards">
            {VISAS_ENTRY_REQS.map((r) => (
              <article key={r.mark} className="entry-card">
                <div className="ec-mark">{r.mark}</div>
                <h4 className="serif">{r.title}</h4>
                <p>{r.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const VisasStack = () => {
  const lane = VISAS_LANES[3];
  return (
    <section className="visas-stack" id="stack">
      <div className="container">
        <div className="stack-head">
          <div className="chapter-tag">
            <span className="num">{lane.num}</span>
            <span className="label">{lane.chapter}</span>
          </div>
          <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
          <p className="dek">{lane.desc}</p>
        </div>
        <div className="stack-list">
          {VISAS_DOCSTACK.map((d) => (
            <article key={d.tag} className="stack-row">
              <div className="sr-tag">{d.tag}</div>
              <div className="sr-body">
                <h4 className="serif">{d.item}</h4>
                <p>{d.reason}</p>
              </div>
              <div className="sr-stamp" aria-hidden="true">✓</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const VisasWrong = () => {
  const lane = VISAS_LANES[4];
  return (
    <section className="visas-wrong" id="wrong">
      <div className="bg-overlay"></div>
      <div className="container">
        <div className="wrong-grid">
          <div className="wrong-intro">
            <div className="chapter-tag light">
              <span className="num">{lane.num}</span>
              <span className="label">{lane.chapter}</span>
            </div>
            <h2 className="serif">{lane.title}<em> — {lane.titleEm}</em></h2>
            <p className="dek">{lane.desc}</p>
            <blockquote className="pull-quote">
              <span className="quote-mark">&#8220;</span>
              <p>El viaje que más recuerdas es aquel en el que importó este capítulo. Guarda el teléfono de la embajada antes de salir de casa — buscarlo en un móvil sin batería en un aeropuerto extranjero es el momento equivocado para aprenderlo.</p>
              <cite>— Iris Mendoza, Mesa de papeleo</cite>
            </blockquote>
          </div>
          <div className="wrong-list">
            <article className="wrong-card">
              <div className="wc-mark">ENTRADA DENEGADA</div>
              <h3 className="serif">Cuando el oficial dice no.</h3>
              <p>Tienes derecho a saber el motivo — normalmente, prueba incompleta de viaje de salida, sospecha de intención de exceder estancia o un sello en el pasaporte de un país sensible. La aerolínea debe llevarte de vuelta a su coste; algunos países te retienen en zona de tránsito hasta el siguiente vuelo. No discutas en el mostrador; pide al supervisor con calma. Toma notas. La denegación queda en archivo y puede afectar a futuros visados.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">PERDIDO O ROBADO</div>
              <h3 className="serif">Cuando el pasaporte ya no está.</h3>
              <p>Pon una denuncia policial dentro de 24 horas — la mayoría de embajadas requiere el número de denuncia. Contacta con tu embajada o consulado más cercano en horario. Los documentos de viaje de emergencia (un solo viaje) se emiten en 24–72 horas, 130 $ en la mayoría de casos. El escaneo que te enviaste por correo antes de salir ahorra horas. La inscripción en STEP deja que la embajada te encuentre más rápido.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">CONTACTOS DE EMERGENCIA</div>
              <h3 className="serif">Los números que importan.</h3>
              <p>Línea 24 h de embajada, recepción del hotel, familiar fuera del destino, asistencia de emergencia del seguro de viaje, servicios locales (112 en la mayor parte de Europa, 911 en Norteamérica, varía en otros sitios). Imprime esta lista. Lleva una copia en el cuerpo, otra en facturada. El móvil del que dependes muere; la lista impresa, no.</p>
            </article>
            <article className="wrong-card">
              <div className="wc-mark">EXCESO DE ESTANCIA</div>
              <h3 className="serif">Cuando te quedaste de más.</h3>
              <p>Aunque sea un día, dispara multas, prohibiciones de entrada futura y banderas en la base de datos de inmigración que duran años. La mayoría de países impone una sanción graduada — multas pequeñas para excesos cortos, prohibiciones plurianuales para excesos largos. La solución es salir por puerto formal (no por tierra cuando sea posible), pagar la multa en moneda local y guardar el recibo. Algunos viajeros consiguen una carta de exención al salir — pídela.</p>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
};

const VisasCTA = () => (
  <section className="visas-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="lhs">
        <div className="kicker">ROUNDTRIPS · DESPEJADO PARA ENTRAR</div>
        <h2 className="serif">Bloque de documentos. <em>Una pestaña.</em></h2>
        <p>RoundTrips es el espacio que construimos para nosotros: comprobaciones de validez de pasaporte atadas a tu itinerario, búsqueda de requisitos de visado por destino, checklist del bloque de documentos y archivos de contactos de embajada guardados junto al viaje. Una pestaña. Un viaje. Una frontera despejada.</p>
        <div className="cta-actions">
          <a href="https://roundtrips.org" className="btn-primary">Abrir RoundTrips →</a>
          <a href="/journal/apply-tourist-visa" className="btn-ghost">Lee la guía de visado</a>
        </div>
      </div>
    </div>
    <div className="coord">VISADOS — PUBLICADO 25.04.2026</div>
    <div className="coord right">MESA DE CAMPO Nº 091</div>
  </section>
);

const VisasReading = () => {
  const [open, setOpen] = useVState(0);
  return (
    <section className="visas-reading" id="reading">
      <div className="container">
        <div className="reading-grid">
          <div className="read-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VI · LA LISTA DE LECTURAS</div>
              <h3 className="serif">Cuatro piezas, <em>antes de llegar al mostrador.</em></h3>
            </div>
            <div className="card-rows">
              {VISAS_READING.map((r) => (
                <a key={r.slug} href={`/journal/${r.slug}`} className="reading-card">
                  <div className="rc-img" style={{ backgroundImage: `url(${r.img})` }}></div>
                  <div className="rc-body">
                    <div className="rc-meta">
                      <span className="tag">{r.tag}</span>
                      <span className="dur">{r.duration}</span>
                    </div>
                    <h4>{r.title}</h4>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div className="faq-col">
            <div className="head">
              <div className="lbl"><span className="dot"></span>VII · PREGUNTAS QUE NOS HACEN MUCHO</div>
              <h3 className="serif">Las preguntas, <em>respondidas.</em></h3>
            </div>
            <div className="faq-list">
              {VISAS_FAQS.map((f, i) => (
                <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
                  <div className="q">
                    <span>{f.q}</span>
                    <span className="toggle">+</span>
                  </div>
                  <div className="a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { VisasEntry, VisasStack, VisasWrong, VisasCTA, VisasReading });