// Visas & Docs — hero + Chapter I (Passports) + Chapter II (Visas) — Spanish

const VisasHero = () => (
  <section className="visas-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1569870499705-504209102861?w=2400&q=85)` }}></div>
    <div className="hero-scrim"></div>
    <div className="hero-coord">38°53'N · 77°02'W · MOSTRADOR DE INMIGRACIÓN · SELLO Nº 2417</div>
    <div className="hero-credit">FOTO — MESA DE CAMPO Nº 091</div>
    <div className="container">
      <div className="visas-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Visados y documentos</span>
      </div>
      <div className="visas-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">LA MESA DEL PAPELEO · 5 CAPÍTULOS</span>
          </div>
          <h1>Visados<em>El papeleo que te deja entrar.</em></h1>
          <p className="lede">
            El pasaporte es el libro. El visado es el permiso. Las preguntas en el mostrador son cortas y específicas — y las respuestas también deberían serlo. <em>Cinco capítulos. Plazos reales.</em> Despejado en la frontera.
          </p>
        </div>
        <div className="rhs">
          <div className="visas-stats">
            <div className="stat"><div className="n">5 <em>capítulos</em></div><div className="l">Carriles de documentos</div></div>
            <div className="stat"><div className="n">6 mes</div><div className="l">Validez tras el regreso</div></div>
            <div className="stat"><div className="n">90+</div><div className="l">Países con e-visa</div></div>
            <div className="stat"><div className="n"><em>40</em></div><div className="l">Exigen prueba de salida</div></div>
          </div>
        </div>
      </div>
      <div className="visas-toc">
        <span className="toc-label">En este número</span>
        <a href="#passports"><span className="num">I</span>Pasaportes</a>
        <span className="sep">·</span>
        <a href="#visas"><span className="num">II</span>Visados</a>
        <span className="sep">·</span>
        <a href="#entry"><span className="num">III</span>Requisitos de entrada</a>
        <span className="sep">·</span>
        <a href="#stack"><span className="num">IV</span>El bloque de documentos</a>
        <span className="sep">·</span>
        <a href="#wrong"><span className="num">V</span>Cuando sale mal</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VI</span>Lecturas y FAQ</a>
      </div>
    </div>
  </section>
);

const VisasChapterPanel = ({ lane, side = "left" }) => (
  <div className={`chapter-panel side-${side}`}>
    <div className="img" style={{ backgroundImage: `url(${lane.img})` }}></div>
    <div className="panel-body">
      <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 className="bullet-rows">
        {lane.bullets.map((b, i) => (
          <div key={i} className="bullet-row">
            <span className="bl">{b.l}</span>
            <span className="bv">{b.v}</span>
          </div>
        ))}
      </div>
      <div className="chapter-coord">{lane.coord}</div>
    </div>
  </div>
);

const VisasPassports = () => {
  const lane = VISAS_LANES[0];
  return (
    <section className="visas-passports" id="passports">
      <div className="container">
        <VisasChapterPanel lane={lane} side="left" />
        <div className="passport-grid">
          <div className="pg-head">
            <span className="lbl">NOTA DE CAMPO · GUÍA DEL PASAPORTE</span>
            <h3 className="serif">Cuatro reglas, <em>antes de volar.</em></h3>
            <p>Las reglas del pasaporte que dejan a viajeros en tierra no están escondidas — solo no se leen. Validez, páginas en blanco, plazo de renovación, vías exprés. Comprueba las cuatro cuando compras el vuelo, no la noche antes.</p>
          </div>
          <div className="pg-cards">
            {VISAS_PASSPORT_RULES.map((t) => (
              <article key={t.id} className="passport-card">
                <div className="pc-top">
                  <div className="glyph">{t.glyph}</div>
                  <span className="pc-coord">{t.coord}</span>
                </div>
                <h3 className="serif">{t.title}</h3>
                <p>{t.desc}</p>
                <div className="pc-spec">{t.spec}</div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const VisasVisas = () => {
  const lane = VISAS_LANES[1];
  return (
    <section className="visas-visas" id="visas">
      <div className="container">
        <div className="visas-grid">
          <div className="vg-aside">
            <div className="aside-head">
              <span className="lbl">NOTA DE CAMPO · VÍAS DE SOLICITUD</span>
              <h3 className="serif">Cuatro rutas. <em>Elige la tuya.</em></h3>
            </div>
            <p>
              La vía del visado la deciden tu pasaporte y tu destino, no tú. Consulta el sitio oficial de inmigración del destino — no un blog ni el PDF de la embajada de 2018. Después planifica hacia atrás desde la fecha del viaje.
            </p>
            <div className="visa-rules">
              <div className="rule">
                <span className="rn">01</span>
                <div>
                  <strong>Solicita en la ventana de reserva, no en la de empacar.</strong>
                  <span>Las solicitudes en embajada pueden tardar un mes más el plazo de cita. Compra vuelos reembolsables hasta tener el visado en la mano.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">02</span>
                <div>
                  <strong>Imprime todo dos veces.</strong>
                  <span>Una copia con el pasaporte, otra en la bolsa de día. La mayoría de denegaciones ocurre porque el documento está en un móvil sin batería.</span>
                </div>
              </div>
              <div className="rule">
                <span className="rn">03</span>
                <div>
                  <strong>No te saltes la preparación de la entrevista.</strong>
                  <span>Los oficiales preguntan por itinerario, empleo, fecha de regreso y viajes previos. Ten una respuesta para cada uno en menos de 10 segundos. Las respuestas largas se leen como evasión.</span>
                </div>
              </div>
            </div>
            <a href="/journal/apply-tourist-visa" className="aside-cta">Lee: Solicita un visado de turista sin que te lo rechacen →</a>
          </div>
          <div className="vg-right">
            <VisasChapterPanel lane={lane} side="right" />
            <div className="visa-cards">
              {VISAS_VISA_TYPES.map((s) => (
                <article key={s.method} className="visa-card">
                  <div className="vc-head">
                    <span className="vc-method">{s.method}</span>
                    <span className="vc-icon">{s.icon}</span>
                  </div>
                  <div className="vc-price">{s.price}</div>
                  <h3 className="serif">{s.title}</h3>
                  <p>{s.desc}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { VisasHero, VisasChapterPanel, VisasPassports, VisasVisas });