// Travelers page — for the everyday user. Tria-led journey: capture → guide → remember.

const TravelersPage = ({ setRoute }) => {
  // Hide stats strip while hero is in view; reveal as user scrolls down.
  React.useEffect(() => {
    const hero = document.querySelector(".page-hero.travelers");
    const strip = document.querySelector(".travelers-strip");
    if (!hero || !strip) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) strip.classList.add("at-top");
        else strip.classList.remove("at-top");
      });
    }, { threshold: 0.35 });
    io.observe(hero);
    return () => io.disconnect();
  }, []);

  const phases = [
    {
      n: "01",
      label: "Before",
      title: "Bring your trip in.",
      copy: "Snap a picture of an itinerary you already have. Forward an email confirmation. Or browse Trepic stories and book a creator's trip — exactly as they did, or edit it your way. Tria reads it all and turns it into one editable plan.",
      img: "assets/web/traveler-suitcase.png",
      cap: "Itinerary capture",
    },
    {
      n: "02",
      label: "Plan",
      title: "Tell Tria what you want.",
      copy: "A long lunch in Praiano. A quiet morning in Kanazawa. A photograph of the Atlas mountains at dawn. Speak in plain language; Tria builds the day around it — restaurants reserved, hotels booked, walking routes plotted. Every line is editable.",
      img: "assets/web/positano/couple-with-map.jpg",
      cap: "Itinerary, drafted with you",
    },
    {
      n: "03",
      label: "During",
      title: "A gentle hand on your shoulder.",
      copy: "Tria pings you at the right moments — not constantly. Take a picture of the light here. What did the wine taste like? How did you feel walking back to the hotel? Short prompts, written for the present tense. The notes become the memory.",
      img: "assets/web/post-villa.png",
      cap: "Field prompts",
    },
    {
      n: "04",
      label: "After",
      title: "A journal you didn't have to write.",
      copy: "Tria assembles your photos, voice notes, and reflections into a publishable journal post and a sixty-second cinematic reel — scored, paced, and ready to share. Local history and fun facts woven in for context. Yours to keep, yours to publish.",
      img: "assets/web/musician-journal.jpg",
      cap: "The journal, and the reel",
    },
  ];

  const exploreLoop = [
    {
      n: "I.",
      title: "Explore other people's trips.",
      copy: "Browse stories from Trepic creators around the world. See what they ate, where they slept, what they noticed. Save the trips that move you — the entire itinerary saved exactly as they lived it.",
    },
    {
      n: "II.",
      title: "Book it as-is, or make it yours.",
      copy: "One tap books the whole itinerary — same hotels, same restaurants, same pacing. Or open it in the editor and change the days, the rooms, the rhythm. Tria adapts the rest of the plan around your edits.",
    },
    {
      n: "III.",
      title: "The creator earns.",
      copy: "Whenever you book through someone else's trip, the creator earns a commission on every reservation. It's how Trepic stays honest — the writers who help you travel are paid by the hotels, never by you.",
    },
  ];

  return (
    <main>
      {/* ——— Hero ——— */}
      <section className="page-hero travelers" data-screen-label="Travelers · Hero">
        <div className="grid-lines">
          <span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/>
        </div>
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow on-dark">For the Everyday Traveler</div>
            <h1 className="display">A trip <em>worth</em><br/>remembering.</h1>
          </div>
          <div>
            <p className="lede">Trepic is the simplest way to plan, live, and remember a trip — guided by Tria, your AI travel companion. Bring an existing itinerary or borrow one from another traveler. Live the trip without your phone in the way. Come home with a journal and a film you didn't have to make.</p>
            <div className="hero-ctas reveal">
              <a href="#waitlist" className="btn on-dark lg" onClick={(e)=>{e.preventDefault();setRoute("waitlist");window.scrollTo(0,0);}}>
                Join the Waitlist <span className="arrow">→</span>
              </a>
              <a href="#how" className="btn ghost on-dark lg" onClick={(e)=>{e.preventDefault();window.scrollTo({top: document.querySelector('.travelers-flow')?.offsetTop || 0, behavior:'smooth'});}}>
                See the journey
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Stat strip (full-bleed, flush to hero) ——— */}
      <div className="travelers-strip reveal">
        <div className="t-strip-item">
          <div className="t-strip-v">One plan</div>
          <div className="t-strip-l">Booking, journal, and reel — handled by Tria</div>
        </div>
        <div className="t-strip-item">
          <div className="t-strip-v">No screen time</div>
          <div className="t-strip-l">Tria pings only at the right moments</div>
        </div>
        <div className="t-strip-item">
          <div className="t-strip-v">Free to use</div>
          <div className="t-strip-l">Hotels pay the platform; you don't</div>
        </div>
      </div>

      {/* ——— Four-phase journey ——— */}
      <section className="section travelers-flow" data-screen-label="Travelers · Journey">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 18}}>The Journey</div>
              <h2 className="h2">Four phases. <em>One trip.</em></h2>
            </div>
            <div className="lead">
              <p className="body-lg">Trepic is built around the way travel actually unfolds — not the way booking sites assume it does. Here's what happens before, during, and after, with Tria walking with you.</p>
            </div>
          </div>

          <div className="travelers-phases">
            {phases.map((p, i) => (
              <article key={p.n} className={"travelers-phase reveal" + (i % 2 ? " right" : "")}>
                <div className="travelers-phase-text">
                  <div className="travelers-phase-meta mono">
                    <span>{p.n}</span>
                    <span className="dot" aria-hidden="true">·</span>
                    <span>{p.label}</span>
                  </div>
                  <h3 className="travelers-phase-h">{p.title}</h3>
                  <p className="travelers-phase-p">{p.copy}</p>
                </div>
                <figure className="travelers-phase-art">
                  <img src={p.img} alt="" loading="lazy"/>
                  <figcaption className="mono">{p.cap}</figcaption>
                </figure>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ——— Tria preview block ——— */}
      <section className="section" style={{background: "var(--c-cream, #F3F0E9)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)"}}>
        <div className="container">
          <div className="travelers-tria reveal">
            <div className="travelers-tria-meta">
              <div className="eyebrow" style={{marginBottom: 16}}>Meet Tria</div>
              <h2 className="h2" style={{marginBottom: 24}}>An AI <em>that knows<br/>when to be quiet.</em></h2>
              <p className="body-lg" style={{maxWidth: 460, marginBottom: 28}}>Tria is the AI concierge built into every Trepic trip. She remembers your preferences, drafts itineraries from a sentence, and during your trip she sends short, well-timed prompts — never push notifications about deals.</p>
              <ul className="travelers-tria-list">
                <li><strong>Reads</strong> your existing itinerary or booking emails.</li>
                <li><strong>Drafts</strong> day-by-day plans you can edit by tapping a line.</li>
                <li><strong>Reserves</strong> hotels and restaurants in one tap.</li>
                <li><strong>Prompts</strong> you to capture small moments at the right time of day.</li>
                <li><strong>Annotates</strong> your photos with local history and fun facts.</li>
                <li><strong>Assembles</strong> the journal post and the reel, automatically, when you're home.</li>
              </ul>
            </div>
            <div className="travelers-tria-chat" aria-hidden="true">
              <div className="t-chat-frame">
                <div className="t-chat-bubble t-chat-tria">It's almost golden hour at Le Sirenuse — the lemon trees on the terrace catch the light differently than the postcard suggests. Worth a photograph and a short note about what the day felt like.</div>
                <div className="t-chat-bubble t-chat-you">on it ✓</div>
                <div className="t-chat-bubble t-chat-tria">Bruno at the hotel bar mentioned a wine he'd recommend tomorrow. Want me to add it to your evening plan?</div>
                <div className="t-chat-bubble t-chat-you">yes — and remind me to ask for him by name</div>
                <div className="t-chat-bubble t-chat-tria">Done. Saved as a tap-to-confirm at 7 p.m. tomorrow.</div>
                <div className="t-chat-meta mono">— Day three, 5:42 p.m.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Explore-and-book loop ——— */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 18}}>Travel by Borrowing</div>
              <h2 className="h2">Take someone <em>else's trip</em>.<br/>Make it yours.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">Every Trepic story is also a bookable itinerary. You can browse what other travelers actually did, save what moves you, and book it exactly as they lived it — or change a day, a room, a restaurant, and let Tria adapt the rest.</p>
            </div>
          </div>

          <div className="travelers-loop reveal">
            {exploreLoop.map((s) => (
              <div key={s.n} className="t-loop-step">
                <div className="t-loop-num">{s.n}</div>
                <h3 className="t-loop-h">{s.title}</h3>
                <p className="t-loop-p">{s.copy}</p>
              </div>
            ))}
          </div>

          <div className="travelers-loop-note mono reveal">
            Whenever you book through another traveler's trip, the creator earns 3–20% commission on every reservation — depending on tier and the property's rate. Hotels pay the platform; the creator earns a share. Travelers never pay extra.
          </div>
        </div>
      </section>

      {/* ——— Anyone can be a creator ——— */}
      <section className="section travelers-anyone" data-screen-label="Travelers · Anyone Can Create">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 18}}>Anyone Can Be a Creator</div>
              <h2 className="h2">Your trip is <em>worth telling</em>.<br/>Whether ten people read it, or ten thousand.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">You don't need a following. You don't need a camera. You don't need a brand. Trepic was built so the wedding party in Lake Como, the family weekend in Big Sur, and the solo trip you took because something needed to change — all of those become stories worth keeping. And worth sharing.</p>
            </div>
          </div>

          <div className="travelers-anyone-grid reveal">
            <div className="t-anyone-card">
              <div className="t-anyone-num mono">I.</div>
              <h3 className="t-anyone-h">Share with the people you love.</h3>
              <p>Send your trip's journal post to family, friends, and the acquaintances who keep asking where you went. They can tap to read, save the itinerary, and book the same hotels for themselves.</p>
            </div>
            <div className="t-anyone-card">
              <div className="t-anyone-num mono">II.</div>
              <h3 className="t-anyone-h">Discover strangers worth following.</h3>
              <p>Trepic is also a way to find a kindred traveler — the photographer who lingers in small towns, the friend-of-a-friend who knows every quiet hotel on the Amalfi Coast, the parent who has done the family-of-five Italy trip you're scared of.</p>
            </div>
            <div className="t-anyone-card">
              <div className="t-anyone-num mono">III.</div>
              <h3 className="t-anyone-h">Earn — even on your first trip.</h3>
              <p>Every Trepic account is a creator account. Publish your trip; if a friend (or a stranger) books from it, you earn commission on the reservations. From 3% on day one — no follower count, no application, no inventory.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Final CTA ——— */}
      <section className="final section-light-cta">
        <div className="grid-lines"><span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/></div>
        <div className="gold-flourish"/>
        <div className="eyebrow reveal">Trepic · Beta 2026</div>
        <h2 className="h2 reveal">Travel <em>once</em>. Remember <em>forever</em>.</h2>
        <div className="cta-row reveal" style={{display:"flex",justifyContent:"center",gap:16,flexWrap:"wrap"}}>
          <a href="#waitlist" className="btn on-dark lg" onClick={(e)=>{e.preventDefault();setRoute("waitlist");window.scrollTo(0,0);}}>
            Join the Waitlist <span className="arrow">→</span>
          </a>
          <a href="https://trepic.app" target="_blank" rel="noopener" className="btn ghost on-dark lg">
            Open the App
          </a>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { TravelersPage });