/* eslint-disable */
const ItinerariesHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1524850011238-e3d235c7d4c9?w=2400&q=80)` }}></div>
    <div className="hero-scrim"></div>
    <Nav />
    <div className="container">
      <div className="types-crumbs">
        <a href="/">Home</a>
        <span className="sep">/</span>
        <a href="/en/plan/">Plan</a>
        <span className="sep">/</span>
        <span className="here">Itineraries</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE SHAPE OF THE TRIP · 8 LENGTHS</span>
          </div>
          <h1>Itineraries<em>eight lengths, one right fit.</em></h1>
        </div>
        <p className="lede">
          Start with how many days you have. <em>The length is the frame</em> — everything else is what fits inside it. Three days to a month, micro to multi-continent.
        </p>
      </div>

      <div className="types-rail">
        {ITINERARIES_LANES.map(l => (
          <a key={l.id} href={`#${l.id}`}>
            <span className="n">{l.num}</span>
            <span className="t">{l.title}{l.titleEm ? ` ${l.titleEm}` : ""}</span>
          </a>
        ))}
      </div>
    </div>

    <div className="hero-coord">55°57′N · 03°11′W · EDINBURGH</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 114</div>
  </section>
);

const ItineraryLane = ({ lane }) => (
  <a href={lane.href || `#${lane.id}`} 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 ItinerariesLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>Eight <em>lengths,</em> one right fit.</h2>
          <p>The length sets the frame. Pick the one that matches what you actually have — then let everything else follow from it.</p>
        </div>
        <div className="right">All lengths <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {ITINERARIES_LANES.map(l => <ItineraryLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const ItinerariesEssay = () => (
  <section className="types-essay">
    <div className="container">
      <div className="types-section-head">
        <div className="num">II</div>
        <div className="titles">
          <h2>Field notes <em>on planning time.</em></h2>
          <p>From the desk that has read more itineraries than it would care to admit. Some patterns hold.</p>
        </div>
        <div className="right">Read the essay <Icon name="arrow" size={12} /></div>
      </div>
      <div className="essay-spread">
        <div className="essay-lhs">
          <p className="pull">"The length is <em>not the ambition.</em> It's the constraint that makes the ambition possible."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Clara Voss</div>
              <div className="role">Senior Editor · Plan Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>People come to us with destinations. They rarely come with days. The country is chosen — the length is still negotiable, as if it were a detail rather than the fundamental decision it is. It isn't a detail. The length is the frame, and the frame determines what's possible inside it.</p>
          <p>A week in Japan is a completely different trip from two weeks in Japan. Not just twice the time — a different kind of experience. The first week is orientation. The second week is when you start to know your way. Three days anywhere is still a draft. Ten days is a finished thing. These are not preferences; they're the mechanics of how travel actually works.</p>
          <p>The most common mistake is miscounting arrival days. You land Tuesday evening. You leave Sunday morning. That's four nights, not five days. Build your itinerary from the first full morning to the last full afternoon — and anything that survives that edit is what the trip actually contains.</p>
          <p>The second most common mistake is filling every slot. The blank days are not laziness. They're the days that become the story. The thing you found on day three, the town you didn't plan to stop in, the afternoon the itinerary went sideways in the best way — that's margin. Build it in deliberately or the trip will take it anyway, just at a worse moment.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">7</div><div className="l">Avg. days<br />most-planned length</div></div>
        <div className="item"><div className="n">41%</div><div className="l">Under-count<br />arrival time</div></div>
        <div className="item"><div className="n">2.1</div><div className="l">Cities per trip<br />at 1–2 weeks</div></div>
        <div className="item"><div className="n">8.8</div><div className="l">Reader rating,<br />itinerary guides</div></div>
      </div>
    </div>
  </section>
);

const BuilderPanel = ({ p }) => (
  <div className="rt-panel">
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
  </div>
);

const BuilderSection = () => (
  <section className="roundtrips-section" id="builder">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">PLANNING FRAMEWORK · ITINERARY BUILDER</span></div>
          <h2>Five rules.<em>Better itineraries.</em></h2>
        </div>
        <p>The framework behind every well-built trip. Not a tool, not a form — <em>a set of principles that holds regardless of the destination or the length.</em></p>
      </div>

      <div className="rt-grid">
        {BUILDER_PANELS.map((p, i) => <BuilderPanel key={i} p={p} />)}
      </div>

      <div className="rt-footer">
        <div className="note">
          These five rules apply whether you have <em>three days or three months.</em> The constraint changes; the discipline doesn't.
        </div>
        <div className="actions">
          <a href="/en/plan/" className="btn-rt">Back to Plan →</a>
          <a href="/journal/" className="link-rt">Read the full essay</a>
        </div>
      </div>
    </div>
  </section>
);

const ItinerariesDecide = () => {
  const [picks, setPicks] = React.useState([1, 0, 1, 1]);
  const result = React.useMemo(() => {
    const [days, style, cities, pace] = picks;
    if (days === 0) return ITINERARIES_LANES.find(l => l.id === "three-day");
    if (days === 3 && style === 2) return ITINERARIES_LANES.find(l => l.id === "one-month");
    if (days === 3) return ITINERARIES_LANES.find(l => l.id === "three-week");
    if (cities === 3 || style === 3) return ITINERARIES_LANES.find(l => l.id === "rtw");
    if (days === 2 && cities >= 1) return ITINERARIES_LANES.find(l => l.id === "multi-city");
    if (days === 2) return ITINERARIES_LANES.find(l => l.id === "two-week");
    if (style === 2 && days === 1) return ITINERARIES_LANES.find(l => l.id === "one-week");
    if (pace === 0 && days === 1) return ITINERARIES_LANES.find(l => l.id === "ten-day");
    return ITINERARIES_LANES.find(l => l.id === "one-week");
  }, [picks]);

  return (
    <section className="types-decide">
      <div className="container">
        <div className="types-section-head">
          <div className="num">III</div>
          <div className="titles">
            <h2>Not sure? <em>Pick four answers.</em></h2>
            <p>Four honest questions about your trip. No quiz, no email — just a starting point when the length is still open.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR PARAMETERS</div>
            <h3>Four answers,<em>one length.</em></h3>
            <p>Click an option in each row. The recommendation updates as you go. Change your mind at any point — there's no submit button and no wrong answer.</p>
            <div className="result">
              <div className="r-lbl">RECOMMENDED LENGTH</div>
              <div className="r-type">{result.title}{result.titleEm && <em> {result.titleEm}</em>}</div>
              <div className="r-blurb">{result.desc}</div>
            </div>
          </div>
          <div className="decide-rhs">
            {ITINERARIES_DECIDE.map((q, qi) => (
              <div key={qi} className="q-block">
                <div className="q-num">Q{String(qi + 1).padStart(2, "0")}</div>
                <div className="q-label">{q.q}</div>
                <div className="q-opts">
                  {q.opts.map((o, oi) => (
                    <button
                      key={oi}
                      className={`q-opt ${picks[qi] === oi ? "sel" : ""}`}
                      onClick={() => {
                        const next = [...picks];
                        next[qi] = oi;
                        setPicks(next);
                      }}
                    >{o}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const ItinerariesReading = () => (
  <section className="types-reading" id="reading">
    <div className="container">
      <div className="types-section-head">
        <div className="num">IV</div>
        <div className="titles">
          <h2>The reading list, <em>by length.</em></h2>
          <p>Six essays from the planning desk. Pick the length you're working with; the rest is bedside.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {ITINERARIES_READING.map((r, i) => (
          <a key={i} href="/journal/" className="reading-row-t">
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <div className="title">{r.title}{r.em && <em> {r.em}</em>}</div>
            <div className="tag">{r.tag}</div>
            <div className="duration">{r.duration}</div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const ItinerariesFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-lhs">
            <div className="lbl">FREQUENTLY · BUT QUIETLY · ASKED</div>
            <h3>What people<em>actually ask.</em></h3>
            <p>Reader questions, lightly edited. If yours isn't here, the planning desk is one search away.</p>
          </div>
          <div className="faq-list">
            {ITINERARIES_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>
    </section>
  );
};

const ItinerariesCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1501854140801-50d01698950b?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PLAN BY LENGTH · START ANYWHERE</div>
      <h2>Pick the frame.<em>Build the trip.</em></h2>
      <p>The lengths are sorted, the essays are written, and the planning desk is on call. Start with however many days you actually have.</p>
      <div className="actions">
        <a href="/en/plan/" className="btn-p">Back to Plan →</a>
        <a href="/" className="btn-g">Home</a>
      </div>
    </div>
  </section>
);

const ItinerariesApp = () => (
  <>
    <ItinerariesHero />
    <ItinerariesLanes />
    <ItinerariesEssay />
    <BuilderSection />
    <ItinerariesDecide />
    <ItinerariesReading />
    <ItinerariesFAQ />
    <ItinerariesCTA />
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<ItinerariesApp />);