// Home page
const HeroA = ({ headline, heroImgIdx, navStyle }) => {
  const n = IMG.hero.length;
  const [idx, setIdx] = React.useState(((heroImgIdx || 0) % n + n) % n);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % n), 7000);
    return () => clearInterval(t);
  }, [n]);
  return (
    <section className="hero" data-screen-label="Home · Hero">
      <div className="hero-bg" data-parallax>
        {IMG.hero.map((src, i) => (
          <img
            key={src}
            src={src}
            alt=""
            loading={i === 0 ? "eager" : "lazy"}
            fetchPriority={i === 0 ? "high" : "low"}
            className={"hero-slide" + (i === idx ? " on" : "")}
          />
        ))}
      </div>
      <div className="hero-grid"><span/></div>
      <div className="hero-content">
        <div className="eyebrow reveal">The first immersive storytelling & booking platform</div>
        <h1 className="display reveal" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="lede reveal">Share real experiences. Discover places through the eyes of people you trust. Book directly. Earn when others follow your journey.</p>
        <div className="hero-ctas reveal">
          <a href="#waitlist" className="btn lg" onClick={(e)=>{e.preventDefault();window.__setRoute("waitlist");window.scrollTo(0,0);}}>
            Join the Waitlist <span className="arrow">→</span>
          </a>
          <a href="#how" className="btn ghost lg" onClick={(e)=>{e.preventDefault();window.__setRoute("how");window.scrollTo(0,0);}}>
            Explore
          </a>
        </div>
      </div>
      <div className="hero-scroll">Scroll</div>
    </section>
  );
};

const HeroB = ({ headline, heroImgIdx }) => {
  const img = IMG.hero[heroImgIdx % IMG.hero.length];
  return (
    <section className="hero edit" data-screen-label="Home · Hero (Editorial)">
      <div className="hero-left">
        <div className="issue">
          <span>Issue 01 · Volume I</span>
          <span>Spring / Summer 2026</span>
        </div>
        <div>
          <div className="eyebrow reveal">The First Immersive Storytelling & Booking Platform</div>
          <h1 className="display reveal" dangerouslySetInnerHTML={{ __html: headline }} />
          <p className="lede reveal">Share real experiences. Discover places through the eyes of people you trust. Book directly. Earn when others follow your journey.</p>
          <div className="hero-ctas reveal">
            <a href="#waitlist" className="btn lg" onClick={(e)=>{e.preventDefault();window.__setRoute("waitlist");window.scrollTo(0,0);}}>
              Join the Waitlist <span className="arrow">→</span>
            </a>
            <a href="#how" className="btn ghost lg" onClick={(e)=>{e.preventDefault();window.__setRoute("how");window.scrollTo(0,0);}}>
              Explore
            </a>
          </div>
        </div>
        <div className="issue">
          <span>N° 0001</span>
          <span>Trepic Editorial</span>
        </div>
      </div>
      <div className="hero-right">
        <img src={img} alt="" loading="eager" fetchpriority="high"/>
        <div className="frame"/>
        <div className="caption">"To travel is to be written on, as much as to write."</div>
      </div>
    </section>
  );
};

const StatsBar = ({ floating }) => (
  <section className={"stats" + (floating ? " floating" : "")}>
    <div className="stats-inner">
      {[
        ["70K+", "Community"],
        ["700K+", "Hotels & Properties"],
        ["3–20%", "Commission"],
        ["30+", "Countries"],
      ].map(([v,l]) => (
        <div className="stat" key={l}>
          <div className="v">{v}</div>
          <div className="l">{l}</div>
        </div>
      ))}
    </div>
  </section>
);

const Mission = ({ setRoute }) => (
  <section className="section" data-screen-label="Home · Mission">
    <div className="container">
      <div className="mission-grid">
        <div className="mission-text reveal">
          <div className="eyebrow">Our Vision</div>
          <h2 className="h2">A world where technology <em>enhances our humanity</em> rather than replaces it.</h2>
          <p className="body-lg">Trepic began with a simple question: what if the stories we tell about our travels could reshape how we experience them? We believe travel is a practice — of attention, presence, and connection — and we're building the tools to honor that.</p>
          <a href="#about" className="tlink" onClick={(e)=>{e.preventDefault();setRoute("about");window.scrollTo(0,0);}}>Read our story →</a>
        </div>
        <div className="reveal">
          <div className="offset-frame">
            <img src={IMG.mission} alt="Travel moment" loading="lazy"/>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HowItWorks = ({ setRoute }) => {
  const steps = [
    ["01", "Experience", "Travel with intention. Tria helps you capture moments that matter."],
    ["02", "Share",      "Your experiences become immersive, searchable stories."],
    ["03", "Discover",   "Travelers find your stories and book what you recommended."],
    ["04", "Earn",       "Commission on every booking from your recommendations. 3–20% depending on tier and property, paid monthly."],
  ];
  return (
    <section className="section" style={{background: "var(--c-off)"}} data-screen-label="Home · How It Works">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow" style={{marginBottom: 20}}>How It Works</div>
            <h2 className="h2">Four steps from <em>a feeling</em> to a following.</h2>
          </div>
          <div className="lead">
            <p className="body-lg">A travel platform built around the honesty of real experience — where the moments that move you become the recommendations others trust.</p>
          </div>
        </div>
        <div className="hiw-grid reveal">
          {steps.map(([n,t,d]) => (
            <div key={n} className="hiw-step">
              <div className="num">{n}</div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop: 72, display: "flex", justifyContent: "center"}}>
          <a href="#waitlist" className="btn lg" onClick={(e)=>{e.preventDefault();setRoute("waitlist");window.scrollTo(0,0);}}>
            Start Your Journey <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
};

const Destinations = () => (
  <section className="section" style={{paddingBottom: 0}} data-screen-label="Home · Destinations">
    <div className="container">
      <div className="section-head reveal">
        <div>
          <div className="eyebrow" style={{marginBottom: 20}}>Destinations</div>
          <h2 className="h2">Places — through <em>the eyes of people</em> who've been there.</h2>
        </div>
        <div className="lead">
          <p className="body-lg">From the Amalfi Coast to Kyoto's quieter corners, every destination on Trepic is curated by travelers who lingered long enough to notice.</p>
        </div>
      </div>
    </div>
    <div className="dest-grid reveal">
      {IMG.destinations.map((d) => (
        <a href="#" key={d.name} className="dest" onClick={(e)=>e.preventDefault()}>
          <img src={d.img} alt={d.name} loading="lazy"/>
          <div className="dest-meta">
            <div>
              <div className="name">{d.name}</div>
              <div className="country">{d.country}</div>
            </div>
            <div className="count">{d.stories} journeys</div>
          </div>
        </a>
      ))}
    </div>
  </section>
);

const FinalCTA = ({ setRoute }) => (
  <section className="final" data-screen-label="Home · Final CTA">
    <div className="grid-lines">
      <span style={{left: "25%"}}/><span style={{left: "50%"}}/><span style={{left: "75%"}}/>
    </div>
    <div className="eyebrow on-dark reveal">Trepic · Beta 2026</div>
    <div className="gold-flourish reveal"/>
    <h2 className="h2 reveal">The world is waiting. <em>Are you?</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="#creators" className="btn ghost on-dark lg" onClick={(e)=>{e.preventDefault();setRoute("creators");window.scrollTo(0,0);}}>
        Become a Creator
      </a>
    </div>
  </section>
);

const HomePage = ({ tweaks, setRoute }) => {
  useHeroParallax();
  const Hero = tweaks.heroVariant === "editorial" ? HeroB : HeroA;
  return (
    <main>
      <Hero headline={tweaks.heroHeadline} heroImgIdx={tweaks.heroImg} navStyle={tweaks.navStyle}/>
      <StatsBar floating={tweaks.statsFloat}/>
      <Mission setRoute={setRoute}/>
      <HowItWorks setRoute={setRoute}/>
      <Destinations/>
      <FinalCTA setRoute={setRoute}/>
    </main>
  );
};

Object.assign(window, { HomePage });