/* eslint-disable */
const { useState, useMemo } = React;

const WhenHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?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">When to Go</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE TIMING QUESTION · 8 WINDOWS</span>
          </div>
          <h1>When to Go<em>the calendar is the strategy.</em></h1>
        </div>
        <p className="lede">
          Every destination has a window when it makes sense. <em>Some windows are obvious.</em> Most of the best ones aren't. Eight ways to read the calendar before you commit.
        </p>
      </div>

      <div className="types-rail">
        {WHEN_LANES.slice(0, 8).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">45°27′N · 9°11′E · PO VALLEY IN OCTOBER</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 104</div>
  </section>
);

const WhenLane = ({ lane }) => (
  <a 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 WhenLanes = () => (
  <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>windows</em> in the year.</h2>
          <p>Same destination, eight very different months. The window you choose sets the price, the crowd, the weather, and the version of the place you get. Choose deliberately.</p>
        </div>
        <div className="right">All windows <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {WHEN_LANES.map(l => <WhenLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const WhenEssay = () => (
  <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 reading the calendar.</em></h2>
          <p>From the desk that has watched 600 timing decisions go wrong. A few patterns keep appearing.</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 destination is <em>not the decision.</em> The month is."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Clara Bautista</div>
              <div className="role">Senior Editor · When Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>People spend weeks choosing between two destinations and thirty seconds choosing between two months at the same destination. The destination is the headline. The month is the actual trip.</p>
          <p>Paris in August is not Paris. It is a facsimile operated largely by tourists, with half the locals gone and most of the good restaurants shuttered. Paris in October is the other thing — the thing people mean when they say they love the city.</p>
          <p>This pattern holds almost everywhere. Tokyo in the week before Golden Week is a masterpiece of timing. Tokyo during Golden Week is a lesson in what happens when 127 million people take the same holiday. Same city. Same flights. Twenty percent price difference and a completely different experience.</p>
          <p>The advice is simple: pick the destination, then spend equal time on the month. Read the historical weather. Look up school holiday schedules. Check the festival calendar. Ask what the locals do in August. Usually they leave.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">600+</div><div className="l">Timing decisions<br />studied this year</div></div>
        <div className="item"><div className="n">31%</div><div className="l">Average price drop<br />shoulder vs. peak</div></div>
        <div className="item"><div className="n">2–4</div><div className="l">Weeks: the typical<br />perfect window</div></div>
        <div className="item"><div className="n">9.4</div><div className="l">Reader rating,<br />timing essay set</div></div>
      </div>
    </div>
  </section>
);

const CalendarPanel = ({ p }) => (
  <div className={`rt-panel ${p.size}`}>
    <div className="pic" style={{ backgroundImage: `url(${p.img})` }}></div>
    <div className="body">
      <span className="pill">{p.tag}</span>
      <h4>{p.title}</h4>
      <p>{p.desc}</p>
    </div>
  </div>
);

const CalendarSection = () => (
  <section className="roundtrips-section" id="calendar">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">THE TWELVE-MONTH CALENDAR</span></div>
          <h2>Month by<em>month.</em></h2>
        </div>
        <p>A rough read of the year. Not gospel — conditions vary by destination, year, and how far in advance you plan. But as a starting frame, it holds more often than it doesn't.</p>
      </div>

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

      <div className="rt-footer">
        <div className="note">
          The <em>shoulder seasons</em> — April–May and September–October — are the single best-return investment in the travel calendar. Book early. Go often.
        </div>
        <div className="actions">
          <a href="/en/plan/when-to-go/" className="btn-rt">Explore the calendar</a>
          <a href="/en/plan/" className="link-rt">Back to Plan</a>
        </div>
      </div>
    </div>
  </section>
);

const WhenDecide = () => {
  const [picks, setPicks] = useState([0, 0, 1, 1]);
  const result = useMemo(() => {
    const [constraint, need, flex, planning] = picks;
    if (constraint === 0) return WHEN_LANES.find(l => l.id === "winter");
    if (constraint === 2 || need === 1) return WHEN_LANES.find(l => l.id === "shoulder");
    if (need === 2) return WHEN_LANES.find(l => l.id === "festivals");
    if (need === 3) return WHEN_LANES.find(l => l.id === "weather");
    if (planning === 0) return WHEN_LANES.find(l => l.id === "crowds");
    if (planning === 3) return WHEN_LANES.find(l => l.id === "festivals");
    if (need === 0) return WHEN_LANES.find(l => l.id === "summer");
    return WHEN_LANES.find(l => l.id === "fall");
  }, [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>Four answers.</em></h2>
            <p>Tell us what actually constrains you and we'll point at the right window. No submit. No email.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR WINDOW</div>
            <h3>Four answers,<em>one season.</em></h3>
            <p>Click an option in each row. The recommendation updates as you go. Change your mind whenever.</p>
            <div className="result">
              <div className="r-lbl">RECOMMENDATION</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">
            {WHEN_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 WhenReading = () => (
  <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 season.</em></h2>
          <p>Six essays from the timing desk. For the traveler who plans ahead.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {WHEN_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 WhenFAQ = () => {
  const [open, setOpen] = 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>Timing questions from the inbox. Lightly edited. If yours isn't here, the FAQ on the home page has another forty.</p>
          </div>
          <div className="faq-list">
            {WHEN_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 WhenCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1475688621402-4257c812d6db?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">TIMING IS EVERYTHING · START ANYWHERE</div>
      <h2>Pick the month.<em>Build the trip.</em></h2>
      <p>The windows are mapped, the patterns are written, and the calendar is on call. Start with whichever season you'd correct your last trip toward.</p>
      <div className="actions">
        <button className="btn-p">Open the calendar →</button>
        <a href="/en/plan/" className="btn-g">Back to Plan</a>
      </div>
    </div>
  </section>
);

const WhenApp = () => (
  <>
    <WhenHero />
    <WhenLanes />
    <WhenEssay />
    <CalendarSection />
    <WhenDecide />
    <WhenReading />
    <WhenFAQ />
    <WhenCTA />
    <Footer />
  </>
);

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