/* ============================================================
 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 style={{ fontStyle: "normal" }}>teams.</em></h1>
 </Reveal>
 <Reveal delay={2}>
 <p className="hero__sub">Where 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>



 {/* ---------- 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-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>
 <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">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("teams")}>Explore training camps <Arw /></button>
 </div>
 </Reveal>
 <Reveal className="aud__card" delay={2}>
 <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>
 </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 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">The perfect spot to bring your favourite people together. The views were outstanding, perfect for photos at sunset - the place itself is so luxurious, with everything you could need and lots of space.</blockquote>
 <div className="cite">Jade</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/heritage-wall-frames.jpg" label="Framed archival photos of the Karapiro Dam build" /></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")}>More about Ariki <Arw /></button>
 </Reveal>
 </div>
 </div>
 </section>

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

window.HomePage = Home;
})();