/* ============================================================
   home.jsx — Home page  (window.HomePage)
   ============================================================ */
(function () {
const { Arw, Eyebrow, Reveal, Btn, Slot, Stat, CtaBand, Marquee, FilmBand } = window.C;
const { DATA, LINKS } = window;

function Home({ go }) {
  return (
    <main>
      {/* ---------- HERO ---------- */}
      <section className="hero">
        <div className="hero__media">
          <Slot id="hero-main" src="assets/hero.jpg" backdropClass="kenburns" label="Hero — lake & venue at golden hour" className="kenburns" />
        </div>
        <div className="hero__inner">
          <Reveal className="hero__eyebrow"><Eyebrow>Karapiro · Cambridge · Aotearoa NZ</Eyebrow></Reveal>
          <Reveal delay={1}>
            <h1 className="display">Built for<br/><em>teams.</em></h1>
          </Reveal>
          <Reveal delay={2}>
            <p className="hero__sub">Where high-performance teams come to connect, reset, and perform — on the shores of Lake Karapiro.</p>
          </Reveal>
          <Reveal delay={3}>
            <div className="hero__cta">
              <Btn href={LINKS.book} external variant="lightsolid">Book Direct <Arw /></Btn>
              <Btn onClick={() => go("enquire")} variant="light">Enquire <Arw /></Btn>
            </div>
          </Reveal>
        </div>
        <div className="hero__scroll"><span>Scroll</span><span className="ln"></span></div>
      </section>

      {/* ---------- MARQUEE ---------- */}
      <Marquee items={["Lake Karapiro", "Built for teams", "Sleeps 32+", "Cambridge · Aotearoa", "Est. 1940s"]} />

      {/* ---------- INTRO ---------- */}
      <section className="section section--tight">
        <div className="wrap">
          <div style={{ maxWidth: "900px" }}>
            <Reveal><Eyebrow>Behind the doors</Eyebrow></Reveal>
            <Reveal delay={1}>
              <p className="display" style={{ fontSize: "clamp(26px,3.6vw,46px)", lineHeight: 1.28, marginTop: "26px", letterSpacing: "-0.01em" }}>
                Ariki Lake House overlooks the shores of Lake Karapiro, with Mt. Maungatautari as its backdrop. One house, taken over entirely by your group — designed to create connections in comfort.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------- STATS ---------- */}
      <Reveal><div className="wrap"><div className="stats">{DATA.stats.map((s, i) => <Stat key={i} {...s} />)}</div></div></Reveal>

      {/* ---------- AUDIENCES ---------- */}
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <Reveal><Eyebrow>One house, every kind of crew</Eyebrow></Reveal>
            <Reveal delay={1}><h2 className="display">A place to do the things that matter.</h2></Reveal>
            <Reveal delay={2}><p className="lead">Resetting a leadership team, sharpening a squad before the season, or getting the whole family together for a milestone — Ariki is set up for groups who gather under one roof.</p></Reveal>
          </div>
          <div className="aud aud--3">
            <Reveal className="aud__card">
              <Slot id="aud-corp" src="assets/hydro-living.jpg" label="Corporate — team around the table, lake beyond" />
              <div className="aud__body">
                <span className="kicker">Corporate Teams</span>
                <h3 className="display">Offsites that earn their place in the calendar.</h3>
                <p>Leadership resets, strategy days and board retreats — away from the office, with room to think and a long table to gather around.</p>
                <button className="link-underline" onClick={() => go("corporate")}>Explore corporate stays <Arw /></button>
              </div>
            </Reveal>
            <Reveal className="aud__card" delay={1}>
              <Slot id="aud-sport" src="assets/bunkroom-view.jpg" label="Sports — squad on the deck / dining, lake behind" />
              <div className="aud__body">
                <span className="kicker">Sports Teams</span>
                <h3 className="display">A training camp built by performance people.</h3>
                <p>Sleep the whole squad under one roof, recover well, and train on world-class water and roads minutes from the door.</p>
                <button className="link-underline" onClick={() => go("sports")}>Explore training camps <Arw /></button>
              </div>
            </Reveal>
            <Reveal className="aud__card" delay={2}>
              <Slot id="aud-gather" src="assets/family-deck.jpg" label="Family & friends — on the deck, golden hour" />
              <div className="aud__body">
                <span className="kicker">Family &amp; Friends</span>
                <h3 className="display">Milestones worth gathering for.</h3>
                <p>Big birthdays, anniversaries and reunions — everyone under one roof, around one table, with the lake out front.</p>
                <button className="link-underline" onClick={() => go("gatherings")}>Explore gatherings <Arw /></button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ---------- THE SPACE ---------- */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div className="sec-head">
            <Reveal><Eyebrow>The space</Eyebrow></Reveal>
            <Reveal delay={1}><h2 className="display">Take over the whole house.</h2></Reveal>
            <Reveal delay={2}><p className="lead">Open the doors between Rangitira and Hydro and rent the entire property for your group — no shared spaces, no other guests.</p></Reveal>
          </div>
          <div className="spaces">
            {DATA.spaces.map((s, i) => (
              <Reveal className="space-row" key={i}>
                <div className="space-row__no display">{s.no}</div>
                <div className="space-row__txt">
                  <h3 className="display">{s.name}</h3>
                  <div className="cap">{s.cap}</div>
                  <p>{s.text}</p>
                </div>
                <div className="space-row__media"><Slot id={s.slot} src={s.img} label={s.ph} /></div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={1} style={{ marginTop: "44px" }}>
            <button className="link-underline" onClick={() => go("space")}>See the full space <Arw /></button>
          </Reveal>
        </div>
      </section>

      {/* ---------- FILM ---------- */}
      <FilmBand src="assets/videos/hydro.mp4" poster="assets/hydro-living.jpg"
        kicker="01 — Film" title="Step inside the Hydro." note="Lake Karapiro · Cambridge" />

      {/* ---------- SETTING / AMENITIES ---------- */}
      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <Reveal><Eyebrow>The setting</Eyebrow></Reveal>
            <Reveal delay={1}><h2 className="display">World-class, on the doorstep.</h2></Reveal>
          </div>
          <div className="amen">
            {DATA.amenities.concat(DATA.dayTrips).map((a, i) => (
              <Reveal className="amen__card" key={i} delay={i % 3}>
                <div className="amen__media"><Slot id={a.slot} src={a.img} label={a.ph} /></div>
                <h4 className="display">{a.name}<span className="dist">{a.dist}</span></h4>
                <p>{a.text}</p>
              </Reveal>
            ))}
          </div>
          <Reveal delay={1} style={{ marginTop: "40px" }}>
            <p className="kicker" style={{ color: "var(--ink-soft)" }}>{DATA.travelNote}</p>
          </Reveal>
        </div>
      </section>

      {/* ---------- GALLERY ---------- */}
      <section className="section section--tight">
        <div className="wrap">
          <div className="gallery">
            <div className="g wide"><Slot id="gal-1" src="assets/family-deck.jpg" label="On the deck, golden hour" /></div>
            <div className="g tall"><Slot id="gal-2" src="assets/kitchen-pantry.jpg" label="Kitchen, stocked" /></div>
            <div className="g sq"><Slot id="gal-3" src="assets/bunkroom.jpg" label="Bunk room, white linen" /></div>
            <div className="g sq"><Slot id="gal-4" src="assets/kitchen-cabinetry.jpg" label="Detail — cabinetry" /></div>
            <div className="g sq"><Slot id="gal-5" src="assets/bathroom-2.jpg" label="Bathrooms" /></div>
          </div>
        </div>
      </section>

      {/* ---------- QUOTE ---------- */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <Reveal className="quote">
            <span className="mk">”</span>
            <blockquote className="display">A rare place that brought our team together — the kind of stay people talk about long after they're home.</blockquote>
            <div className="cite">Testimonial placeholder · add a real quote here</div>
          </Reveal>
        </div>
      </section>

      {/* ---------- STORY TEASER ---------- */}
      <section className="section">
        <div className="wrap">
          <div className="split">
            <Reveal className="split__media wide"><Slot id="story-img" src="assets/aerial-house.jpg" label="Heritage — the house & water tower" /></Reveal>
            <Reveal delay={1}>
              <Eyebrow>Our story</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(30px,4vw,52px)", margin: "20px 0 18px", lineHeight: 1.08 }}>Oh, the stories it could tell.</h2>
              <p className="lead" style={{ marginBottom: "18px" }}>The heart of Ariki dates back to the 1940s. The Hydro's kitchen walls are reinforced concrete, once used to store dynamite for the building of the Karapiro Dam.</p>
              <button className="link-underline" onClick={() => go("about")}>Read the full story <Arw /></button>
            </Reveal>
          </div>
        </div>
      </section>

      <CtaBand go={go} />
    </main>
  );
}

window.HomePage = Home;
})();