// Plan page — masthead + lanes + editorial sections
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 · BAY OF KOTOR</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 074</div>
    <div className="container">
      <div className="plan-crumbs">
        <a href="#">Home</a>
        <span className="sep">/</span>
        <span className="here">Plan</span>
      </div>
      <div className="plan-mast">
        <div className="lhs">
          <div className="kicker-row">
            <span className="layer-tag">THE FOUNDATION · 8 LANES</span>
          </div>
          <h1>Plan<em>before you book a thing.</em></h1>
          <p className="lede">
            The foundation of every great trip is built before the first booking — when you're staring at a map at 11pm with no idea where to start. <em>This is that part.</em> Eight lanes, a thousand answers, and a few opinions.
          </p>
        </div>
        <div className="rhs">
          <div className="plan-stats">
            <div className="stat"><div className="n">8 <em>lanes</em></div><div className="l">Topics inside</div></div>
            <div className="stat"><div className="n">412</div><div className="l">Guides</div></div>
            <div className="stat"><div className="n">68k</div><div className="l">Trips planned</div></div>
            <div className="stat"><div className="n"><em>9.2</em></div><div className="l">Avg readability</div></div>
          </div>
        </div>
      </div>
      <div className="plan-toc">
        <span className="toc-label">In this issue</span>
        <a href="#lanes"><span className="num">I</span>The Lanes</a>
        <span className="sep">·</span>
        <a href="#notes"><span className="num">II</span>Field Notes</a>
        <span className="sep">·</span>
        <a href="#mood"><span className="num">III</span>Mood-to-Map</a>
        <span className="sep">·</span>
        <a href="#itin"><span className="num">IV</span>Sample Itinerary</a>
        <span className="sep">·</span>
        <a href="#toolkit"><span className="num">V</span>Toolkit</a>
        <span className="sep">·</span>
        <a href="#types"><span className="num">VI</span>Trip Types</a>
        <span className="sep">·</span>
        <a href="#reading"><span className="num">VII</span>Reading List & 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>The eight <em>lanes</em> of planning.</h2>
          <p>We had two and we knew it. Here's the proper architecture — every question someone asks before a trip, sorted into a place to read about it.</p>
        </div>
        <div className="right">All lanes <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>Field notes <em>from the planning desk.</em></h2>
          <p>Editorial — not listicles. Three pieces from people who plan trips for a living and one who clearly doesn't.</p>
        </div>
        <div className="right">All essays <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">Senior Editor · Plan Desk</span>
            </div>
          </div>
          <h3>How to plan a trip <em>in reverse.</em></h3>
          <p className="dek">Most planning collapses because we start with dates. Start with the last day instead — the dinner you want to be eating, the airport you want to fall asleep in. The rest organizes itself.</p>
          <span className="read-on">Read the essay · 9 min <Icon name="arrow" size={12} /></span>
        </article>
        <article className="note-stack">
          <div className="item">
            <span className="tag">Method</span>
            <h4>The two-page <em>itinerary rule.</em></h4>
            <span className="by">Marcus Lin <span className="dot"></span> 12 min read</span>
          </div>
          <div className="item">
            <span className="tag">Bookings</span>
            <h4>Tuesday is not a magic day, but it is most days.</h4>
            <span className="by">Nia Adebayo <span className="dot"></span> 6 min read</span>
          </div>
          <div className="item">
            <span className="tag">Budget</span>
            <h4>What <em>$1,500</em> actually buys, by country.</h4>
            <span className="by">Juan Reyes <span className="dot"></span> 7 min read</span>
          </div>
          <div className="item">
            <span className="tag">Beginner</span>
            <h4>Your first international trip, decoded.</h4>
            <span className="by">Iris Mendoza <span className="dot"></span> 8 min read</span>
          </div>
        </article>
        <article className="note-essay">
          <div className="label">Letter from the editor</div>
          <h3>Most trips fail at the planning stage — long before anyone packs a bag. The fix is rarely more research; it's better questions, asked earlier.</h3>
          <div className="body-copy">We rebuilt this page because the old one shrugged at the most important step. Planning is not a chore between dreaming and going — it is the part that decides whether you'll like the trip at all.</div>
          <div className="sig">
            <span>Editor's letter · Vol. III</span>
            <span className="name">— Iris</span>
          </div>
        </article>
      </div>
    </div>
  </section>
);

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