// Plan page — masthead + lanes + editorial sections (ES)
const { useState: usePState } = React;

const PlanHero = () => (
  <section className="plan-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=2400&q=85)` }}></div>
    <div className="hero-scrim"></div>
    <div className="hero-coord">42°39'N · 18°05'E · BAHÍA DE KOTOR</div>
    <div className="hero-credit">FOTO — MESA DE CAMPO Nº 074</div>
    <div className="container">
      <div className="plan-crumbs">
        <a href="/es/">Inicio</a>
        <span className="sep">/</span>
        <span className="here">Planear</span>
      </div>
      <div className="plan-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">EL CIMIENTO · 8 CARRILES</span>
          </div>
          <h1>Planea<em>antes de reservar nada.</em></h1>
          <p className="lede">
            El cimiento de cualquier buen viaje se construye antes de la primera reserva — cuando son las 11 de la noche, miras un mapa y no sabes por dónde empezar. <em>Esta es esa parte.</em> Ocho carriles, mil respuestas y unas cuantas opiniones.
          </p>
        </div>
        <div className="rhs">
          <div className="plan-stats">
            <div className="stat"><div className="n">8 <em>carriles</em></div><div className="l">Temas dentro</div></div>
            <div className="stat"><div className="n">412</div><div className="l">Guías</div></div>
            <div className="stat"><div className="n">68k</div><div className="l">Viajes planeados</div></div>
            <div className="stat"><div className="n"><em>9.2</em></div><div className="l">Legibilidad media</div></div>
          </div>
        </div>
      </div>
      <div className="plan-toc">
        <span className="toc-label">En este número</span>
        <a href="#lanes"><span className="num">I</span>Los carriles</a>
        <span className="sep">·</span>
        <a href="#notes"><span className="num">II</span>Notas de campo</a>
        <span className="sep">·</span>
        <a href="#mood"><span className="num">III</span>Del ánimo al mapa</a>
        <span className="sep">·</span>
        <a href="#itin"><span className="num">IV</span>Itinerario modelo</a>
        <span className="sep">·</span>
        <a href="#toolkit"><span className="num">V</span>Caja de herramientas</a>
        <span className="sep">·</span>
        <a href="#types"><span className="num">VI</span>Tipos de viaje</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VII</span>Lecturas y FAQ</a>
      </div>
    </div>
  </section>
);

const Lane = ({ lane }) => (
  <a href="#" className={`lane ${lane.size}`}>
    <div className="img" style={{ backgroundImage: `url(${lane.img})` }}></div>
    <div className="scrim"></div>
    <span className="corner-num">{lane.num}</span>
    {lane.badge && <span className="corner-tag">{lane.badge}</span>}
    <div className="body">
      <div className="topic"><span className="dot"></span>{lane.topic}</div>
      <h3>{lane.title}{lane.titleEm && <em> {lane.titleEm}</em>}</h3>
      <p className="desc">{lane.desc}</p>
      <div className="meta">
        <span>{lane.count}</span>
        <span>·</span>
        <span>{lane.read}</span>
        <span className="arrow"><Icon name="arrow" size={14} /></span>
      </div>
    </div>
  </a>
);

const PlanLanes = () => (
  <section className="plan-lanes" id="lanes">
    <div className="container">
      <div className="plan-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Los ocho <em>carriles</em> de la planificación.</h2>
          <p>Teníamos dos y lo sabíamos. Esta es la arquitectura adecuada — cada pregunta que alguien hace antes de un viaje, ordenada en su sitio para leerla.</p>
        </div>
        <div className="right">Todos los carriles <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {PLAN_LANES.map(l => <Lane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const PlanNotes = () => (
  <section className="plan-notes" id="notes">
    <div className="container">
      <div className="plan-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Notas de campo <em>desde la mesa de planificación.</em></h2>
          <p>Editorial — no listas. Tres piezas de gente que planea viajes para vivir y una que claramente no.</p>
        </div>
        <div className="right">Todos los ensayos <Icon name="arrow" size={12} /></div>
      </div>
      <div className="notes-grid">
        <article className="note-feature">
          <div className="feat-img" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1473625247510-8ceb1760943f?w=1200&q=80)` }}></div>
          <div className="author">
            <div className="avatar" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80)` }}></div>
            <div className="info">
              <span className="name">Iris Mendoza</span>
              <span className="role">Editora sénior · Mesa de planificación</span>
            </div>
          </div>
          <h3>Cómo planear un viaje <em>al revés.</em></h3>
          <p className="dek">La mayoría de las planificaciones se desploman porque empezamos por las fechas. Empieza por el último día — la cena que quieres estar comiendo, el aeropuerto en el que quieres quedarte dormido. El resto se organiza solo.</p>
          <span className="read-on">Leer el ensayo · 9 min <Icon name="arrow" size={12} /></span>
        </article>
        <article className="note-stack">
          <div className="item">
            <span className="tag">Método</span>
            <h4>La regla del <em>itinerario de dos páginas.</em></h4>
            <span className="by">Marcus Lin <span className="dot"></span> 12 min de lectura</span>
          </div>
          <div className="item">
            <span className="tag">Reservas</span>
            <h4>El martes no es un día mágico, pero lo es casi siempre.</h4>
            <span className="by">Nia Adebayo <span className="dot"></span> 6 min de lectura</span>
          </div>
          <div className="item">
            <span className="tag">Presupuesto</span>
            <h4>Qué te compra de verdad <em>$1.500</em>, país por país.</h4>
            <span className="by">Juan Reyes <span className="dot"></span> 7 min de lectura</span>
          </div>
          <div className="item">
            <span className="tag">Principiantes</span>
            <h4>Tu primer viaje internacional, descifrado.</h4>
            <span className="by">Iris Mendoza <span className="dot"></span> 8 min de lectura</span>
          </div>
        </article>
        <article className="note-essay">
          <div className="label">Carta de la editora</div>
          <h3>La mayoría de los viajes fracasan en la fase de planificación — mucho antes de que nadie haga la maleta. La solución no suele ser más investigación; son mejores preguntas, hechas antes.</h3>
          <div className="body-copy">Reconstruimos esta página porque la anterior se encogía de hombros ante el paso más importante. Planear no es una tarea entre soñar e ir — es la parte que decide si te va a gustar el viaje en absoluto.</div>
          <div className="sig">
            <span>Carta editorial · Vol. III</span>
            <span className="name">— Iris</span>
          </div>
        </article>
      </div>
    </div>
  </section>
);

Object.assign(window, { PlanHero, PlanLanes, PlanNotes });