/* eslint-disable */
const ToolsHero = () => (
  <section className="types-hero">
    <div className="hero-bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1499750310107-5fef28a66643?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">Research &amp; Tools</span>
      </div>
      <div className="types-mast">
        <div>
          <div className="kicker-row">
            <span className="layer-tag">THE WORKING DESK · 8 CATEGORIES</span>
          </div>
          <h1>Research<em>&amp; Tools.</em></h1>
        </div>
        <p className="lede">
          The stack the Plan Desk opens before any trip is confirmed. <em>Flight search, hotel vetting, itinerary builders, offline maps, translation, reviews, forums, and AI.</em> Eight categories, ranked by how often we actually use them.
        </p>
      </div>

      <div className="types-rail">
        {TOOLS_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">48°51′N · 02°21′E · PARIS, FRANCE</div>
    <div className="hero-credit">PHOTO — RESEARCH DESK Nº 042</div>
  </section>
);

const ToolLane = ({ 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 ToolsLanes = () => (
  <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>categories.</em></h2>
          <p>The research toolkit, broken into the eight decisions every trip requires. Start with the category where you're least confident.</p>
        </div>
        <div className="right">All categories <Icon name="arrow" size={12} /></div>
      </div>
      <div className="lane-grid">
        {TOOLS_LANES.map(l => <ToolLane key={l.id} lane={l} />)}
      </div>
    </div>
  </section>
);

const ToolsEssay = () => (
  <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 research.</em></h2>
          <p>From the desk that has watched 612 trips get planned, most of them with the wrong tool for the wrong job.</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">"Most research problems <em>aren't information problems.</em> They're attention problems — too many tabs open at once."</p>
          <div className="byline">
            <div className="av" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&q=80)` }}></div>
            <div className="who">
              <div className="name">Marcus Delacroix</div>
              <div className="role">Research Editor · Plan Desk</div>
            </div>
          </div>
        </div>
        <div className="essay-rhs">
          <p>The traveler who spends six hours researching a four-day trip is not more prepared than the one who spends two. They are more anxious, and they have usually convinced themselves that the hotel that is slightly cheaper but marginally less convenient is the correct choice because the spreadsheet said so.</p>
          <p>What the tools are for is compression. A fare calendar compresses six months of prices into one screen. A well-run forum compresses a thousand strangers' hard-won opinions into the top three threads. An offline map compresses the risk of getting lost in a city where your phone has no signal. The goal is not more research. The goal is faster confidence.</p>
          <p>The stack we return to has three layers: one tool that finds the best price, one tool that validates the choice, and one tool that keeps the plan alive while you're on the ground. Everything else is optional. Most experienced travelers use fewer tools than you'd expect — they've learned which ones earn time back and which ones spend it.</p>
          <p>The categories below are ordered by the decisions they serve, not by popularity. Start with whichever decision is giving you the most uncertainty, work through it with the right tool, and move on. The research phase ends when you've made the decisions, not when the tabs run out.</p>
        </div>
      </div>
      <div className="essay-stats">
        <div className="item"><div className="n">612</div><div className="l">Trips read,<br />planned, returned</div></div>
        <div className="item"><div className="n">3.1</div><div className="l">Avg. tools used<br />per booking</div></div>
        <div className="item"><div className="n">74%</div><div className="l">Save money on<br />first fare check</div></div>
        <div className="item"><div className="n">8</div><div className="l">Categories in<br />the working stack</div></div>
      </div>
    </div>
  </section>
);

const BuilderPanel = ({ 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 WorkingStackSection = () => (
  <section className="roundtrips-section" id="itinerary-builders">
    <div className="container">
      <div className="rt-top">
        <div>
          <div className="rt-brand-row"><span className="lbl">THE WORKING STACK</span></div>
          <h2>Five tools.<em>One trip.</em></h2>
        </div>
        <p>The itinerary builders and research tools the Plan Desk opens on every trip. <em>Ranked by how often they're actually used</em> — not by feature count.</p>
      </div>

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

      <div className="rt-footer">
        <div className="note">
          For group trips, <em>Roundtrips</em> handles the coordination overhead — shared itinerary, expenses, roster — so the planning conversation stays about the trip, not the logistics.
        </div>
        <div className="actions">
          <a href="https://roundtrips.org" className="btn-rt">Try Roundtrips →</a>
          <a href="#reviews-sources" className="link-rt">More tool reviews</a>
        </div>
      </div>
    </div>
  </section>
);

const ToolsDecide = () => {
  const [picks, setPicks] = React.useState([0, 0, 1, 1]);
  const result = React.useMemo(() => {
    const [challenge, who, level, time] = picks;
    if (challenge === 0) return TOOLS_LANES.find(l => l.id === "flight-search");
    if (challenge === 1) return TOOLS_LANES.find(l => l.id === "hotel-research");
    if (challenge === 2) return TOOLS_LANES.find(l => l.id === "itinerary-builders");
    if (challenge === 3) return TOOLS_LANES.find(l => l.id === "translation-apps");
    if (who === 3) return TOOLS_LANES.find(l => l.id === "travel-forums");
    if (level === 3) return TOOLS_LANES.find(l => l.id === "travel-forums");
    if (level === 0) return TOOLS_LANES.find(l => l.id === "reviews-sources");
    return TOOLS_LANES.find(l => l.id === "ai-trip-planning");
  }, [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>where to start?</em></h2>
            <p>Four questions, one category. Useful when you know the trip but not which research gap to close first.</p>
          </div>
          <div className="right">90 sec · No email</div>
        </div>

        <div className="decide-shell">
          <div className="decide-lhs">
            <div className="lbl">START HERE</div>
            <h3>Four answers,<em>one category.</em></h3>
            <p>Click one option in each row. The recommendation updates as you go. No submit button — your answers are yours.</p>
            <div className="result">
              <div className="r-lbl">RECOMMENDED CATEGORY</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">
            {TOOLS_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 ToolsReading = () => (
  <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>from the desk.</em></h2>
          <p>Six essays on the craft of research. Pick the category where your confidence is lowest.</p>
        </div>
        <div className="right">All essays <Icon name="arrow" size={12} /></div>
      </div>
      <div>
        {TOOLS_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 ToolsFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="types-faq" id="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 about the tools, lightly answered. If yours isn't here, the search bar finds two thousand more pages on this edition.</p>
          </div>
          <div className="faq-list">
            {TOOLS_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 ToolsCTA = () => (
  <section className="types-cta">
    <div className="bg" style={{ backgroundImage: `url(https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=2000&q=80)` }}></div>
    <div className="inner">
      <div className="kicker">RESEARCH WELL, BOOK ONCE</div>
      <h2>Open the stack.<em>Close the tabs.</em></h2>
      <p>Eight categories, eight decisions. Work through whichever one is creating the most uncertainty — and stop when the trip is planned, not when the research feels finished.</p>
      <div className="actions">
        <a href="/en/plan/" className="btn-p">Back to Plan →</a>
        <a href="/en/plan/trip-types/" className="btn-g">Trip Types</a>
      </div>
    </div>
  </section>
);

const ToolsApp = () => (
  <>
    <ToolsHero />
    <ToolsLanes />
    <ToolsEssay />
    <WorkingStackSection />
    <ToolsDecide />
    <ToolsReading />
    <ToolsFAQ />
    <ToolsCTA />
    <Footer />
  </>
);

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