// How It Works (expanded), Journal, About — secondary pages.

const HowPage = ({ setRoute }) => {
  const steps = [
    { n: "01", t: "Experience", d: "Travel with intention. Tria, your AI concierge, helps you capture the moments that matter — beyond the postcard view.", img: "assets/step-01.jpg" },
    { n: "02", t: "Share",      d: "Your experiences become immersive, searchable stories — tagged to hotels, restaurants, neighborhoods, and the feeling of the place.", img: "assets/step-02.jpg" },
    { n: "03", t: "Discover",   d: "Travelers find your stories through the places they dream of — and book what you actually recommended.", img: "https://images.unsplash.com/photo-1504609813442-a8924e83f76e?w=1200&q=80&auto=format&fit=crop" },
    { n: "04", t: "Earn",       d: "Commission on every booking from your recommendations. 3–20% depending on your tier and the property, paid monthly with no minimums.", img: "https://images.unsplash.com/photo-1515586000433-45406d8e6662?w=1200&q=80&auto=format&fit=crop" },
  ];
  const triaLog = [
    { who: "Tria", text: "Welcome to Kyoto. How are you arriving — morning train or afternoon flight?" },
    { who: "You",  text: "Morning train, around 10am." },
    { who: "Tria", text: "Skip the temple rush. Start at Café Bibliotic Hello — hidden in Teramachi, all white oak and second-edition novels. I'll tag it for your story." },
    { who: "You",  text: "Perfect. What should I notice while I'm there?" },
    { who: "Tria", text: "The light at 11:15am on the east wall. It's what changes the café for regulars. Want a reflection prompt for later?" },
  ];

  return (
    <main>
      <section className="page-hero how" data-screen-label="How It Works · 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 reveal">How It Works</div>
            <h1 className="display reveal">A new <em>practice of travel</em>, in four steps.</h1>
          </div>
          <div className="reveal">
            <p className="lede">Trepic isn't another review site or booking engine. It's a storytelling platform that turns real travel into real discovery — and real income for the people doing the living.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {steps.map((s, i) => (
            <div key={s.n} className="reveal" style={{
              display:"grid",
              gridTemplateColumns: i % 2 === 0 ? "1fr 1.1fr" : "1.1fr 1fr",
              gap:"clamp(32px,6vw,96px)",
              alignItems:"center",
              padding: "60px 0",
              borderBottom: i < steps.length - 1 ? "1px solid var(--c-line)" : "none",
            }}>
              <div style={{order: i % 2 === 0 ? 1 : 2}}>
                <div style={{fontFamily:"var(--ff-display)",fontWeight:300,fontSize:72,lineHeight:1,color:"var(--c-line)",marginBottom:24,letterSpacing:"-0.02em"}}>{s.n}</div>
                <h2 className="h2" style={{marginBottom:20}}>{s.t}</h2>
                <p className="body-lg" style={{maxWidth: 420}}>{s.d}</p>
              </div>
              <div style={{order: i % 2 === 0 ? 2 : 1}}>
                <div className="imgbox" style={{aspectRatio:"5/4"}}>
                  <img src={s.img} alt="" loading="lazy"/>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section" style={{background:"var(--c-warm)"}} data-screen-label="How · Tria AI">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"clamp(40px,7vw,96px)",alignItems:"stretch"}} className="reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Tria · Your AI Concierge</div>
              <h2 className="h2" style={{marginBottom: 28}}>The AI that <em>helps you notice</em>.</h2>
              <p className="body-lg" style={{maxWidth: 460, marginBottom: 24}}>Tria travels with you. Suggestions shaped by where you are, what you love, and what the locals quietly recommend to each other.</p>
              <ul style={{listStyle:"none",padding:0,margin:0,fontSize:15,lineHeight:1.9,color:"var(--c-mute-ink)"}}>
                <li>— Pre-trip itineraries shaped by your values, not trends</li>
                <li>— In-the-moment recommendations that respect the neighborhood</li>
                <li>— Reflection prompts that turn memories into stories</li>
                <li>— Automatic tagging so your discoveries become others' discoveries</li>
              </ul>
            </div>
            <div className="tria-inline">
              <div className="topline">
                <div className="tria-avatar">
                  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1 L12 8 L19 10 L12 12 L10 19 L8 12 L1 10 L8 8 Z" fill="url(#trepicGoldSm)"/></svg>
                </div>
                <div>
                  <div style={{fontFamily:"var(--ff-display)",fontSize:18}}>Tria</div>
                  <div style={{fontSize:9,letterSpacing:"0.3em",textTransform:"uppercase",color:"rgba(255,255,255,0.5)"}}>Trepic Concierge</div>
                </div>
                <div style={{marginLeft:"auto",fontSize:10,letterSpacing:"0.22em",textTransform:"uppercase",color:"rgba(255,255,255,0.4)"}}>Kyoto · 10:47</div>
              </div>
              {triaLog.map((m,i) => (
                <div key={i} className={"tria-msg " + (m.who === "Tria" ? "bot" : "user")}>
                  {m.who === "Tria" ? <div className="who"><span>✦</span> Tria</div> : null}
                  {m.text}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ——— The Practice: journaling + mindfulness + auto-trailer ——— */}
      <section className="section" data-screen-label="How · The Practice">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>The Practice</div>
              <h2 className="h2">A journal that <em>writes itself</em> — with your eye, in your voice.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">Tria is both companion and editor. She prompts you gently in the moments that matter, keeps the record, then — at journey's end — hands back the story you lived.</p>
            </div>
          </div>

          <div className="practice-flow reveal">
            <div className="pf-step">
              <div className="pf-num">I.</div>
              <div className="pf-label">On the Road</div>
              <h3 className="pf-h">A quiet tap on the shoulder.</h3>
              <p className="pf-p">Tria notices the light on the water, the pause before a meal, the first morning in a new city — and asks, softly: <span className="serif-it">"Will you remember this?"</span> One photograph. One sentence. Nothing more than the moment deserves.</p>
              <div className="pf-chat">
                <div className="pf-msg bot"><span className="who">✦ Tria · Amalfi · 18:42</span>The harbor lanterns are coming on. Take one photo, then put the phone down.</div>
                <div className="pf-msg bot"><span className="who">✦ Tria</span>When you're ready — what's one word for how this place feels tonight?</div>
                <div className="pf-msg user">Steady.</div>
                <div className="pf-msg bot"><span className="who">✦ Tria</span>Noted. I'll save it with the lanterns.</div>
              </div>
            </div>

            <div className="pf-step">
              <div className="pf-num">II.</div>
              <div className="pf-label">The Reflection</div>
              <h3 className="pf-h">Mindfulness, not metrics.</h3>
              <p className="pf-p">Each evening, a single prompt — rooted in where you are and what you saw. Not a checklist. A conversation. Your words stay yours; Tria only listens.</p>
              <div className="pf-prompts">
                <div className="pf-prompt">
                  <span className="pf-kicker">Day 02 · Positano</span>
                  <span className="pf-pr-text">"The most generous thing a place did for you today?"</span>
                </div>
                <div className="pf-prompt">
                  <span className="pf-kicker">Day 04 · Ravello</span>
                  <span className="pf-pr-text">"Describe a meal the way you'd describe a person you love."</span>
                </div>
                <div className="pf-prompt">
                  <span className="pf-kicker">Day 06 · Capri</span>
                  <span className="pf-pr-text">"What will you miss when this is a photograph?"</span>
                </div>
              </div>
              <div className="pf-tags">
                <span className="pf-tag">Geo-contextual</span>
                <span className="pf-tag">Local knowledge</span>
                <span className="pf-tag">Journal-private by default</span>
              </div>
            </div>

            <div className="pf-step">
              <div className="pf-num">III.</div>
              <div className="pf-label">The Edit</div>
              <h3 className="pf-h">Tria becomes your editor-in-residence.</h3>
              <p className="pf-p">She gathers the photographs, the voice notes, the fragments — and returns a draft shaped by geography, by the rhythm of your days, and by the writers she's studied. You approve. You rewrite. You publish.</p>
              <div className="pf-edit-grid">
                <div className="pf-edit-card">
                  <div className="pf-e-badge">Photo edit</div>
                  <div className="pf-e-h">284 frames → 47 selects</div>
                  <div className="pf-e-sub">Composition. Light. Story beat. De-duplicated and color-matched across devices.</div>
                </div>
                <div className="pf-edit-card">
                  <div className="pf-e-badge">Prose edit</div>
                  <div className="pf-e-h">Your voice, kept</div>
                  <div className="pf-e-sub">Grammar corrected, cadence preserved. Tria learns how you write and matches it.</div>
                </div>
                <div className="pf-edit-card">
                  <div className="pf-e-badge">Geographic layer</div>
                  <div className="pf-e-h">Places, woven in</div>
                  <div className="pf-e-sub">Hotels, streets, viewpoints — tagged and linked so readers can book what moved you.</div>
                </div>
              </div>
            </div>

            <div className="pf-step">
              <div className="pf-num">IV.</div>
              <div className="pf-label">The Trailer</div>
              <h3 className="pf-h">Your trip — in sixty cinematic seconds.</h3>
              <p className="pf-p">A scored, paced film built from your best frames. A long-form travel post with itinerary, maps, and bookable stops. One private journal, for you. One public story, for the world. Both ready the morning you land.</p>
              <div className="pf-delivery">
                <div className="pf-card film">
                  <div className="pf-film-frame">
                    <video src="assets/reels/reel-1.mp4" autoPlay muted loop playsInline preload="metadata"/>
                    <div className="pf-film-chrome">
                      <div className="pf-film-bar"><span className="pf-film-play">▶</span><span className="pf-film-time">00:14 / 01:02</span></div>
                      <div className="pf-film-caption serif-it">"Seven days on the Amalfi Coast"</div>
                    </div>
                  </div>
                  <div className="pf-card-meta">
                    <span>Trepic Trailer · 1920×1080 · Dolby stereo</span>
                    <span>Auto-scored · Export · Share</span>
                  </div>
                </div>
                <div className="pf-card post">
                  <div className="pf-post-head">
                    <div className="pf-kicker">Trepic Post · Draft</div>
                    <h4 className="serif">The Lemon Coast, Slowly</h4>
                    <div className="pf-post-meta">Seven days · Six hotels · 47 images · 4 reflections</div>
                  </div>
                  <div className="pf-post-body">
                    <p><span className="pf-drop">W</span>e arrived at Positano the way most people arrive at places they've only imagined — breathless, skeptical, trying to reconcile the picture with the thing. The lanterns helped.</p>
                    <div className="pf-post-gallery">
                      <div/><div/><div/>
                    </div>
                    <p>On the fourth evening, in Ravello, a waiter named Bruno poured us a wine he said "would taste better tomorrow." He was right.</p>
                  </div>
                  <div className="pf-card-meta">
                    <span>Bookable stops: Le Sirenuse · Palazzo Avino · Il San Pietro</span>
                    <span>Publish →</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <section className="final">
        <div className="grid-lines"><span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/></div>
        <div className="gold-flourish"/>
        <h2 className="h2" style={{color:"var(--c-ink)"}}>Ready to travel <em>differently</em>?</h2>
        <div style={{marginTop: 32}}>
          <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>
        </div>
      </section>
    </main>
  );
};

const JournalPage = () => {
  const cats = ["All","Mindful Travel","Creator Economy","Destinations","Reflection","Industry"];
  const [filter, setFilter] = React.useState("All");
  const posts = filter === "All" ? IMG.journal : IMG.journal.filter(p => p.cat === filter);
  const [featured, ...rest] = IMG.journal;
  return (
    <main>
      <section style={{padding:"calc(var(--nav-h) + 60px) var(--gutter) 40px"}} data-screen-label="Journal · Header">
        <div className="container" style={{padding:0}}>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:60,alignItems:"end",marginBottom: 48}} className="reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Trepic Journal</div>
              <h1 className="display" style={{fontSize:"clamp(44px,5vw,72px)"}}>Stories from the <em>slow lane</em>.</h1>
            </div>
            <p className="body-lg" style={{maxWidth: 420}}>Editorial dispatches, creator spotlights, and long-form journeys. Full stories live on trepicstories.com.</p>
          </div>
          <div className="filter-row reveal">
            {cats.map(c => (
              <button key={c} className={"filter-btn" + (filter === c ? " on" : "")} onClick={()=>setFilter(c)}>{c}</button>
            ))}
          </div>
        </div>
      </section>

      {filter === "All" ? (
        <section style={{padding:"0 var(--gutter) 80px"}}>
          <div className="container" style={{padding:0}}>
            <a href="#" className="reveal" onClick={(e)=>e.preventDefault()} style={{display:"grid",gridTemplateColumns:"1.3fr 1fr",gap:"clamp(32px,6vw,80px)",alignItems:"center",cursor:"pointer"}}>
              <div className="imgbox" style={{aspectRatio:"16/11"}}>
                <img src={featured.img} alt=""/>
              </div>
              <div>
                <div className="cat" style={{fontSize:10,letterSpacing:"0.26em",textTransform:"uppercase",color:"var(--c-mute)",marginBottom: 16}}>{featured.cat} · Featured</div>
                <h2 className="h2" style={{marginBottom: 24}}>{featured.title}</h2>
                <p className="body-lg" style={{maxWidth: 440, marginBottom: 24}}>{featured.excerpt}</p>
                <div style={{display:"flex",gap:16,alignItems:"center",marginBottom:24}}>
                  <span style={{fontSize:10,letterSpacing:"0.22em",textTransform:"uppercase",color:"var(--c-mute)"}}>{featured.read}</span>
                  <span style={{fontSize:10,letterSpacing:"0.22em",textTransform:"uppercase",color:"var(--c-mute)"}}>By Elena Kovač</span>
                </div>
                <span className="tlink">Read on Trepic Stories →</span>
              </div>
            </a>
          </div>
        </section>
      ) : null}

      <section className="section" style={{paddingTop: filter === "All" ? 40 : 0}}>
        <div className="container">
          <div className="journal-grid reveal">
            {(filter === "All" ? rest : posts).map((p) => (
              <a href="#" key={p.title} className="journal-card" onClick={(e)=>e.preventDefault()}>
                <div className="img"><img src={p.img} alt=""/></div>
                <div className="cat">{p.cat}</div>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <div className="meta">{p.read} · Trepic Stories</div>
              </a>
            ))}
          </div>
          <div style={{textAlign:"center",marginTop: 80}}>
            <a href="#" className="btn ghost lg" onClick={(e)=>e.preventDefault()}>Visit trepicstories.com →</a>
          </div>
        </div>
      </section>
    </main>
  );
};

const AboutPage = ({ setRoute }) => {
  const values = [
    { t: "Presence over performance", d: "The point of travel is to be here. Our tools exist to help you stay here longer." },
    { t: "Curiosity over consumption", d: "A destination isn't a checklist. It's a conversation with a place, a culture, a history." },
    { t: "Truth over polish", d: "Real places, told truthfully. Filters are allowed. Fiction isn't." },
    { t: "Shared reward", d: "The people whose stories inspire meaningful travel share in the value they create." },
  ];
  const pillars = [
    { n: "I.", t: "Social Discovery", d: "A short-form feed for authentic travel stories and recommendations from real travelers — not strangers with incentives you can't see." },
    { n: "II.", t: "Mindful Reflection", d: "Guided prompts and journaling encourage gratitude, self-awareness, and a deeper understanding of the places you move through." },
    { n: "III.", t: "Place-Based Learning", d: "Location-aware insight offers cultural, historical, and environmental context in real time — so you arrive informed, not just present." },
    { n: "IV.", t: "Seamless Booking", d: "Book hotels and experiences recommended by people you trust. Grounded in lived experience, not sponsored placement." },
    { n: "V.", t: "Creator-Led Rewards", d: "When bookings come from your recommendations, Trepic shares commission — aligning authentic storytelling with sustainable income." },
  ];
  return (
    <main>
      <section className="page-hero about" data-screen-label="About · 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 reveal">Our Mission</div>
            <h1 className="display reveal">Technology <em>in service of</em> our humanity.</h1>
          </div>
          <div className="reveal">
            <p className="lede">We envision a world where technology enhances our humanity rather than replaces it — where travel becomes a bridge between cultures, a mirror for self-reflection, and a catalyst for empathy in an increasingly artificial world.</p>
          </div>
        </div>
      </section>

      {/* ——— Mission statement ——— */}
      <section className="section" data-screen-label="About · Mission">
        <div className="container">
          <div className="mission-statement reveal">
            <div className="ms-kicker">Mission Statement</div>
            <blockquote className="ms-quote">
              <span className="ms-mark">"</span>
              Trepic exists to <em>protect what makes us human</em> — presence, curiosity, shared experience, and connection — in an age increasingly mediated by machines.
            </blockquote>
            <div className="ms-rule"/>
            <div className="ms-sig">
              <div>
                <div className="ms-name">Kimberli Cheung Wright</div>
                <div className="ms-title">Founder &amp; CEO, Trepic</div>
              </div>
              <div className="ms-loc">
                <div>Menlo Park, California</div>
                <div>2026</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— Narrative ——— */}
      <section className="section" style={{background:"var(--c-warm)", borderTop:"1px solid var(--c-line)"}} data-screen-label="About · Why Now">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"1.1fr 1fr",gap:"clamp(40px,7vw,120px)",alignItems:"start"}} className="reveal">
            <div className="prose">
              <div className="eyebrow" style={{marginBottom: 24}}>Why Now</div>
              <p className="drop">As AI floods the internet with infinite, frictionless content, the value of lived experience rises. Trepic is built for this moment — where people crave meaning over noise, connection over consumption, and truth over polish.</p>
              <p>We watched travel become a performance. A conveyor belt of the same five cafés, the same five hotels, ranked by who posted them loudest. Recommendations from strangers with incentives we couldn't see. Booking platforms optimizing for volume, not depth.</p>
              <p>Trepic is our attempt at something quieter and more honest. A platform where real travelers share real experiences. Where stories are searchable, bookable, and credited. Where a recommendation is worth something — and so is the person making it.</p>
              <p>By grounding discovery in real places, real stories, and real reflection, we don't compete with AI. We complement it — by anchoring people back in the physical world, and in each other.</p>
            </div>
            <div className="values-box">
              <div className="eyebrow" style={{marginBottom: 8}}>Our Values</div>
              {values.map(v => (
                <div key={v.t} className="v">
                  <h4>{v.t}</h4>
                  <p>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ——— Five pillars ——— */}
      <section className="section" data-screen-label="About · What Trepic Is">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>What Trepic Is</div>
              <h2 className="h2">Not just booking. Not just social. <em>A connected ecosystem.</em></h2>
            </div>
            <div className="lead">
              <p className="body-lg">Trepic is a social, experience-driven travel platform that combines storytelling, AI, and geolocation to turn travel into a practice of growth and connection. Five pillars, one intention.</p>
            </div>
          </div>

          <div className="pillar-list reveal">
            {pillars.map(p => (
              <div key={p.t} className="pillar-row">
                <div className="pillar-num">{p.n}</div>
                <div className="pillar-title serif">{p.t}</div>
                <div className="pillar-desc">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ——— Positioning ——— */}
      <section className="section section-light-cta" data-screen-label="About · Positioning">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Where We Stand</div>
              <h2 className="h2">We compete for attention. <em>We differentiate on intention.</em></h2>
            </div>
            <div className="lead">
              <p className="body-lg">Trepic occupies the same discovery space as TikTok, Instagram, Booking, and Airbnb Experiences — while offering something fundamentally different.</p>
            </div>
          </div>

          <div className="compete-grid reveal">
            <div className="cg-row">
              <div className="cg-label">Discovery</div>
              <div className="cg-them">Passive feeds. Infinite scroll.</div>
              <div className="cg-us serif-it">Intentional reflection. A feed that lets you leave.</div>
            </div>
            <div className="cg-row">
              <div className="cg-label">Inspiration</div>
              <div className="cg-them">Surface-level trends and lookalike content.</div>
              <div className="cg-us serif-it">Cultural education. Context before caption.</div>
            </div>
            <div className="cg-row">
              <div className="cg-label">Monetization</div>
              <div className="cg-them">Influencer economy. Sponsored, opaque.</div>
              <div className="cg-us serif-it">Values-based rewards for authentic recommendation.</div>
            </div>
            <div className="cg-row">
              <div className="cg-label">Outcome</div>
              <div className="cg-them">Transactions.</div>
              <div className="cg-us serif-it">Real-world impact, deeper human connection.</div>
            </div>
          </div>
        </div>
      </section>

      {/* ——— One-liner / investor line ——— */}
      <section className="section" data-screen-label="About · One-liner">
        <div className="container" style={{maxWidth: 920, textAlign:"center"}}>
          <div className="eyebrow reveal" style={{marginBottom: 32}}>In One Line</div>
          <p className="oneliner reveal">
            Trepic is a social travel and booking platform that uses <em>short-form storytelling</em>, <em>AI</em>, and <em>location-based prompts</em> to turn travel into a tool for connection, learning, and meaningful income.
          </p>
        </div>
      </section>

      <section className="final">
        <div className="grid-lines"><span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/></div>
        <div className="gold-flourish"/>
        <h2 className="h2">Join the <em>first chapter</em>.</h2>
        <div style={{marginTop: 32}}>
          <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>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { HowPage, JournalPage, AboutPage });