/* eslint-disable */
const DurationHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1471967183320-ee018f6e114a?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">Trip Duration</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">HOW LONG YOU STAY · 8 LENGTHS</span>
          </div>
          <h1>Trip Duration<em>how long shapes everything.</em></h1>
        </div>
        <p className="lede">
          The length of a trip is not a logistics question. It's a <em>life-fit question.</em> The same city feels completely different on a long weekend versus a month. Choose the duration first — the rest of planning follows.
        </p>
      </div>

      <div className="types-rail" style={{ gridTemplateColumns: "repeat(8, 1fr)" }}>
        {DURATION_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">35°41′N · 139°41′E · TOKYO · SHINJUKU</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 107</div>
  </section>
);

const DurationLane = ({ lane }) => (
  <div className={`lane ${lane.size}`} id={lane.id}>
    <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>
  </div>
);

const DurationLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The eight <em>lengths</em> of a trip.</h2>
          <p>Same passport, eight completely different relationships with a place. How long you stay determines how deep you go — and what version of yourself goes with you.</p>
        </div>
        <div className="right">All durations <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {DURATION_LANES.map(l => <DurationLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const DurationEssay = () => (
  <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 staying long enough.</em></h2>
          <p>From the desk that has watched travelers leave three days too early for twenty years. The patterns are consistent.</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 duration is <em>not a calendar question.</em> It's a question of what you want to happen to you while you're there."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Margot Ellison</div>
              <div className="role">Senior Editor · Plan Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>The most common planning mistake is not choosing the wrong destination. It's choosing the right destination for the wrong amount of time. People fly to Kyoto for four nights, spend two of them adjusting, and leave before the temple gardens have had a chance to change them. The city did nothing wrong.</p>
          <p>Duration determines depth. Not just in the practical sense — how many places you can visit — but in the psychological one. The first week of any trip is spent decompressing from your life at home. The second week is where the trip actually starts. Three weeks is where you stop being a tourist and start being a resident. Each of these is a different experience, and none of them is wrong — but they should be chosen intentionally.</p>
          <p>Trip philosophy isn't about budget or destination. It's about what you want the trip to do to you. A weekend escape sharpens you. A workation reframes you. An open-ended trip — one with no return date — reorganizes your entire sense of what's necessary. Choose the length the way you'd choose the dose of something strong. More is not always better. But too little leaves you wanting.</p>
          <p>The question worth asking before you book is not "how many days do I have?" but "what needs to happen on this trip?" The answer tells you the duration.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">7</div><div className="l">Days — the most-planned<br />trip length, worldwide</div></div>
        <div className="item"><div className="n">2nd</div><div className="l">Week — when most travelers<br />say the trip "started"</div></div>
        <div className="item"><div className="n">44%</div><div className="l">Leave a day earlier<br />than they should have</div></div>
        <div className="item"><div className="n">8.7</div><div className="l">Avg. reader rating,<br />duration essay set</div></div>
      </div>
    </div>
  </section>
);

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

const PacePlannerSection = () => (
  <section className="roundtrips-section" id="planner">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">TOOL · THE PACE PLANNER</span></div>
          <h2>The Pace<em>Planner.</em></h2>
        </div>
        <p>Five principles that tell you how long to actually stay — not what your calendar allows, but what the trip demands. <em>Work backward from the experience, not the departure date.</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">
          The right duration is the one where the last day feels like a loss, not a relief. <em>That's when you know you stayed long enough.</em>
        </div>
        <div className="actions">
          <a href="/en/plan/" className="btn-rt">Back to Plan</a>
          <a href="/en/plan/trip-types/" className="link-rt">Browse trip types</a>
        </div>
      </div>
    </div>
  </section>
);

const DurationDecide = () => {
  const [picks, setPicks] = React.useState([1, 2, 0, 1]);
  const result = React.useMemo(() => {
    const [time, distance, matters, homeFeeling] = picks;
    if (time === 0) return DURATION_LANES.find(l => l.id === "weekend-escapes");
    if (time === 3 && homeFeeling === 3) return DURATION_LANES.find(l => l.id === "open-ended");
    if (time === 3 && matters === 2) return DURATION_LANES.find(l => l.id === "sabbatical");
    if (time === 3 && matters === 3) return DURATION_LANES.find(l => l.id === "workation");
    if (time === 2) return DURATION_LANES.find(l => l.id === "two-weeks");
    if (distance === 0) return DURATION_LANES.find(l => l.id === "long-weekends");
    if (matters === 1) return DURATION_LANES.find(l => l.id === "two-weeks");
    return DURATION_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>Don't know? <em>Pick four answers.</em></h2>
            <p>Four short questions. We'll point at the length that fits the actual trip, not the ideal one. No submit button. Change your mind freely.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR TRIP PROFILE</div>
            <h3>Four answers,<em>one length.</em></h3>
            <p>Click an option in each row. The recommendation updates live. There is no right answer — only the honest one.</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">
            {DURATION_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 DurationReading = () => (
  <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 duration.</em></h2>
          <p>Six essays from the planning desk. Pick the length you're considering — then read the one that matches it.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {DURATION_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 DurationFAQ = () => {
  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>Duration questions from the reader inbox, lightly edited. Longer answers on the FAQ page if yours isn't here.</p>
          </div>
          <div className="faq-list">
            {DURATION_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 DurationCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PLAN THE RIGHT LENGTH · START ANYWHERE</div>
      <h2>Choose the duration.<em>The rest follows.</em></h2>
      <p>The length is decided. The destination bends to it. The desk is on call if you need to talk through which length fits the trip you actually have time for.</p>
      <div className="actions">
        <a href="/en/plan/" className="btn-p">Back to Plan</a>
        <a href="/en/plan/trip-types/" className="btn-g">Browse trip types</a>
      </div>
    </div>
  </section>
);

const DurationApp = () => (
  <>
    <DurationHero />
    <DurationLanes />
    <DurationEssay />
    <PacePlannerSection />
    <DurationDecide />
    <DurationReading />
    <DurationFAQ />
    <DurationCTA />
    <Footer />
  </>
);

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