/* eslint-disable */
const TypesHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1502920917128-1aa500764cbd?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 Types</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE SHAPE OF THE WEEK · 9 MODES</span>
          </div>
          <h1>Trip Types<em>nine ways to leave the house.</em></h1>
        </div>
        <p className="lede">
          Less about who you are, more about what this specific trip is supposed to do. <em>Pick the shape</em> — solo, couples, family, crew, adventure, slow, workation, bucket-list, last-minute — and let it bend everything else.
        </p>
      </div>

      <div className="types-rail">
        {TYPE_LANES.map(l => (
          <a key={l.id} href={l.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">42°39′N · 18°05′E · BAY OF KOTOR</div>
    <div className="hero-credit">PHOTO — FIELD DESK Nº 091</div>
  </section>
);

const TypeLane = ({ 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 TypesLanes = () => (
  <section className="types-lanes" id="lanes">
    <div className="container">
      <div className="types-section-head">
        <div className="num">I</div>
        <div className="titles">
          <h2>The nine <em>shapes</em> of a trip.</h2>
          <p>Same destination, nine completely different weeks. Pick the shape and the rest of planning gets a lot easier — pace, stops, the right number of restaurants, who comes.</p>
        </div>
        <div className="right">All types <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {TYPE_LANES.map(l => <TypeLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const TypesEssay = () => (
  <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 choosing a type.</em></h2>
          <p>From the desk that has watched 412 trips get planned, mostly badly. 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 trip type is <em>not who you are.</em> It's what this specific week is supposed to do for you."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Iris Mendoza</div>
              <div className="role">Senior Editor · Plan Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>People come to us asking which type they are, as if the answer were a personality test. It isn't. The same person takes a solo trip in March, a family trip in July, and a workation in October. The type is the <em>shape of the week</em> — and that shape changes more often than you'd think.</p>
          <p>What the type does is set defaults. A solo trip defaults to slower mornings, longer dinners, fewer stops, and a notebook. A family trip defaults to walkable cities, mid-range hotels with two beds, and a hard 9 p.m. ceiling. A friends trip defaults to one shared house, three group meals a week, and the rest fend for yourselves.</p>
          <p>Get the defaults right and the rest of planning collapses to the small decisions: which restaurant, which day, which hike. Get them wrong and you spend a year dragging four people through someone else's idea of fun.</p>
          <p>If you're stuck choosing, look at the last trip you took. Whatever you got wrong — too fast, too crowded, too quiet, too expensive — the next type is the one that corrects for it. Travel is mostly a series of corrections.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">412</div><div className="l">Trips read,<br />planned, returned</div></div>
        <div className="item"><div className="n">68%</div><div className="l">Pick a type<br />on second visit</div></div>
        <div className="item"><div className="n">3.4</div><div className="l">Avg. types tried<br />per traveler/yr</div></div>
        <div className="item"><div className="n">9.2</div><div className="l">Reader rating,<br />average essay</div></div>
      </div>
    </div>
  </section>
);

const RoundtripsPanel = ({ 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 RoundtripsSection = () => (
  <section className="roundtrips-section" id="friends">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">PARTNER · ROUNDTRIPS</span></div>
          <h2>One app.<em>The whole crew.</em></h2>
        </div>
        <p>Itineraries that update for everyone. Expenses that balance themselves. Votes that break ties. <em>A shared calendar that actually respects who's in and who's out.</em></p>
      </div>

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

      <div className="rt-footer">
        <div className="note">
          We picked one partner for the friends-trip lane and it's <em>Roundtrips</em>. Free for the first trip, then $4/person.
        </div>
        <div className="actions">
          <button className="btn-rt">Try Roundtrips →</button>
          <a href="#" className="link-rt">Read the review</a>
        </div>
      </div>
    </div>
  </section>
);

const TypesDecide = () => {
  const [picks, setPicks] = React.useState([1, 1, 1, 1]);
  // crude mapping: combinations land on a type
  const result = React.useMemo(() => {
    const [feel, who, days, budget] = picks;
    if (who === 0 && feel === 0) return TYPE_LANES.find(l => l.id === "solo");
    if (who === 3) return TYPE_LANES.find(l => l.id === "friends");
    if (who === 2) return TYPE_LANES.find(l => l.id === "family");
    if (budget === 3) return TYPE_LANES.find(l => l.id === "bucket-list");
    if (days === 3) return TYPE_LANES.find(l => l.id === "slow");
    if (feel === 1) return TYPE_LANES.find(l => l.id === "adventure");
    if (feel === 3) return TYPE_LANES.find(l => l.id === "workation");
    return TYPE_LANES.find(l => l.id === "couples");
  }, [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 small questions; we'll point you at the right shape. Not a quiz — just a way to break the tie when you're between two.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">YOUR DEFAULTS</div>
            <h3>Four answers,<em>one shape.</em></h3>
            <p>Click an option in each row. The recommendation updates as you go. Change your mind whenever — there's no "submit."</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">
            {TYPE_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 TypesReading = () => (
  <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 trip type.</em></h2>
          <p>Six essays from the planning desk. Pick a type; the rest is bedside.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {TYPE_READING.map((r, i) => (
          <a key={i} href="#" 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 TypesFAQ = () => {
  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 letters, lightly edited. If yours isn't here, the FAQ on the home page has another forty.</p>
          </div>
          <div className="faq-list">
            {TYPE_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 TypesCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">PLAN ANYTHING, START ANYWHERE</div>
      <h2>Pick the shape.<em>Build the week.</em></h2>
      <p>The lanes are sorted, the defaults are written, and the desk is on call. Start with whichever type you'd correct your last trip toward.</p>
      <div className="actions">
        <button className="btn-p">Open the lanes →</button>
        <a href="/en/plan/" className="btn-g">Back to Plan</a>
      </div>
    </div>
  </section>
);

const TypesApp = () => (
  <>
    <TypesHero />
    <TypesLanes />
    <TypesEssay />
    <RoundtripsSection />
    <TypesDecide />
    <TypesReading />
    <TypesFAQ />
    <TypesCTA />
    <Footer />
  </>
);

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