/* ============================================================
   pages.jsx — inner pages  (window.Pages)
   ============================================================ */
(function () {
const { useState } = React;
const { Arw, Eyebrow, Reveal, Btn, Slot, Faq, CtaBand } = window.C;
const { DATA, LINKS } = window;

function PageHead({ eyebrow, title, intro, slot, ph, img }) {
  return (
    <section className="pagehead">
      <div className="pagehead__media"><Slot id={slot} src={img} label={ph} /></div>
      <div className="pagehead__inner">
        <Reveal><Eyebrow>{eyebrow}</Eyebrow></Reveal>
        <Reveal delay={1}><h1 className="display">{title}</h1></Reveal>
        {intro && <Reveal delay={2}><p>{intro}</p></Reveal>}
      </div>
    </section>
  );
}

function SecHead({ eyebrow, title, lead, center }) {
  return (
    <div className={`sec-head ${center ? "center" : ""}`}>
      <Reveal><Eyebrow center={center}>{eyebrow}</Eyebrow></Reveal>
      <Reveal delay={1}><h2 className="display">{title}</h2></Reveal>
      {lead && <Reveal delay={2}><p className="lead">{lead}</p></Reveal>}
    </div>
  );
}

function InclList({ items }) {
  return (
    <ul className="incl">
      {items.map((it, i) => (
        <Reveal tag="li" key={i} delay={i % 2 ? 1 : 0}>
          <span className="n display">{it.n}</span>
          <div><h4>{it.h}</h4><p>{it.p}</p></div>
        </Reveal>
      ))}
    </ul>
  );
}

function Itinerary({ rows }) {
  return (
    <div className="itin">
      {rows.map((r, i) => (
        <Reveal tag="div" className="itin__row" key={i}>
          <div className="when">{r.when}</div>
          <div className="what"><h4 className="display">{r.h}</h4><p>{r.p}</p></div>
        </Reveal>
      ))}
    </div>
  );
}

/* ---------------- THE SPACE ---------------- */
function Space({ go }) {
  return (
    <main>
      <PageHead eyebrow="The space" title="One house, taken over." slot="ph-space" img="assets/aerial-house.jpg"
        ph="Exterior — house & lake, wide"
        intro="Rent the entire property for your group. Open the doors between Rangitira and Hydro, add the apartment if you need it, and the whole place is yours." />

      <section className="section">
        <div className="wrap">
          <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={"sp-" + s.slot} src={s.img} label={s.ph} /></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <SecHead eyebrow="At a glance" title="Capacity & layout" />
          <Reveal>
            <table className="captable">
              <thead><tr><th>Space</th><th>Sleeps</th><th>Best for</th><th>Notes</th></tr></thead>
              <tbody>
                <tr><td>Rangitira</td><td className="num">18</td><td>Living, dining, gathering</td><td>Premium, open-plan, lake views</td></tr>
                <tr><td>Hydro</td><td className="num">14</td><td>Rest & overflow</td><td>Self-contained, 1940s heritage</td></tr>
                <tr><td>Apartment</td><td className="num">5</td><td>Coaches / organisers</td><td>2-bedroom add-on · $290 / night</td></tr>
                <tr><td>Whole house</td><td className="num">32+</td><td>The full team</td><td>More on trundler beds</td></tr>
              </tbody>
            </table>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SecHead eyebrow="The setting" title="What's nearby" />
          <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={"sp-" + 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>

      <section className="section section--tight">
        <div className="wrap">
          <div className="gallery">
            <div className="g tall"><Slot id="sp-gal-1" src="assets/kitchen-pantry.jpg" label="Kitchen, stocked" /></div>
            <div className="g wide"><Slot id="sp-gal-2" src="assets/hydro-living.jpg" label="Dining, full table" /></div>
            <div className="g sq"><Slot id="sp-gal-3" src="assets/bunkroom.jpg" label="Bunk room" /></div>
            <div className="g sq"><Slot id="sp-gal-4" src="assets/bathroom-2.jpg" label="Bathrooms" /></div>
            <div className="g sq"><Slot id="sp-gal-5" src="assets/family-deck.jpg" label="Deck / view" /></div>
          </div>
        </div>
      </section>

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

/* ---------------- CORPORATE ---------------- */
function Corporate({ go }) {
  return (
    <main>
      <PageHead eyebrow="Corporate teams" title="Offsites worth the trip." slot="ph-corp" img="assets/hydro-living.jpg"
        ph="Boardroom setup — team around table, lake visible"
        intro="Leadership resets, strategy days and board retreats — 90 minutes from Auckland, with room to think and a long table to gather around." />

      <section className="section">
        <div className="wrap">
          <div className="split">
            <Reveal>
              <Eyebrow>Why it works</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(30px,4vw,52px)", margin: "20px 0 18px", lineHeight: 1.08 }}>Take the team out of the office, and the office out of the team.</h2>
              <p className="lead">The best offsites change the setting so people can change how they think. Open-plan living becomes your strategy room. The long table becomes where the real conversations happen. And the lake does the rest.</p>
            </Reveal>
            <Reveal className="split__media" delay={1}><Slot id="corp-side" src="assets/rangitira-living.jpg" label="Working session in the living space" /></Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <SecHead eyebrow="What's included" title="Everything a working group needs." />
          <InclList items={DATA.corpIncl} />
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SecHead eyebrow="A sample stay" title="Two days at Ariki" lead="A starting point — we'll shape it around your team, your goals and your facilitator." />
          <Itinerary rows={DATA.corpItin} />
        </div>
      </section>

      <CtaBand go={go} title="Bring your team to the lake." text="Tell us your dates and what you're trying to achieve — we'll tailor a package and itinerary for your offsite." />
    </main>
  );
}

/* ---------------- SPORTS ---------------- */
function Sports({ go }) {
  return (
    <main>
      <PageHead eyebrow="Sports teams" title="A camp built for the squad." slot="ph-sport" img="assets/bunkroom-view.jpg"
        ph="Team on the deck / dining, lake behind"
        intro="Sleep the whole team under one roof, recover well, and train on world-class water and roads minutes from the door." />

      <section className="section">
        <div className="wrap">
          <div className="split split--rev">
            <Reveal className="split__media"><Slot id="sport-side" src="assets/family-deck.jpg" label="Founders / coaches at the property" /></Reveal>
            <Reveal delay={1}>
              <Eyebrow>The advantage</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(30px,4vw,52px)", margin: "20px 0 18px", lineHeight: 1.08 }}>Built by people who've lived high performance.</h2>
              <p className="lead">Ariki was created by founders who know what a team needs on the road — because they've been on the inside. The house is set up the way squads actually use it: train hard, recover properly, stay together.</p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <SecHead eyebrow="Why teams choose Ariki" title="Train, recover, stay together." />
          <InclList items={DATA.sportsIncl} />
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SecHead eyebrow="The environment" title="World-class training, on the doorstep." />
          <div className="amen">
            {DATA.amenities.map((a, i) => (
              <Reveal className="amen__card" key={i} delay={i}>
                <div className="amen__media"><Slot id={"sport-" + 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>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <SecHead eyebrow="A sample camp" title="Four days, dialled in" lead="Built around your training load — we'll flex it to your programme and the water." />
          <Itinerary rows={DATA.sportsItin} />
        </div>
      </section>

      <CtaBand go={go} title="Base your camp at the lake." text="Send us your sport, your dates and your squad size — we'll build the stay around your training week." />
    </main>
  );
}

/* ---------------- GATHERINGS (FAMILY & FRIENDS) ---------------- */
function Gatherings({ go }) {
  return (
    <main>
      <PageHead eyebrow="Family & friends" title="Get everyone in one place." slot="ph-gather" img="assets/family-deck.jpg"
        ph="Family & friends on the deck, golden hour"
        intro="Milestone birthdays, anniversaries, reunions and long-overdue weekends — take over the whole house and gather everyone around one table." />

      <section className="section">
        <div className="wrap">
          <div className="split">
            <Reveal>
              <Eyebrow>Why it works</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(30px,4vw,52px)", margin: "20px 0 18px", lineHeight: 1.08 }}>The hardest part is getting everyone together. This is the easy part.</h2>
              <p className="lead">No splitting the family across motels, no juggling restaurant bookings for twenty. Bunk rooms for the kids, quiet rooms for the grandparents, and one long table for the dinner the whole trip is really about.</p>
            </Reveal>
            <Reveal className="split__media" delay={1}><Slot id="gather-side" src="assets/kitchen-pantry.jpg" label="The kitchen & long table, set for dinner" /></Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <SecHead eyebrow="What you get" title="Room for three generations." />
          <InclList items={DATA.gatherIncl} />
        </div>
      </section>

      <CtaBand go={go} title="Get everyone to the lake." text="Tell us the occasion, your dates and your numbers — we'll help you shape a stay everyone talks about for years." />
    </main>
  );
}

/* ---------------- ABOUT ---------------- */
function About({ go }) {
  return (
    <main>
      <PageHead eyebrow="Our story" title="Oh, the stories it could tell." slot="ph-about" img="assets/aerial-house.jpg"
        ph="Founders at the property / heritage exterior"
        intro="Ariki Lake House began as a 1940s building on the edge of a dam project. Today it's a home for teams — with the same bones, and a lot more light." />

      <section className="section">
        <div className="wrap">
          <div className="split">
            <Reveal className="split__media wide"><Slot id="about-1" label="Founders — Shem & Mike at the house" /></Reveal>
            <Reveal delay={1}>
              <Eyebrow>The founders</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(28px,3.6vw,46px)", margin: "20px 0 18px", lineHeight: 1.1 }}>Made for teams, by people who back teams.</h2>
              <p className="lead" style={{ marginBottom: "16px" }}>Ariki was built by founders with a background in high-performance sport — people who understand what brings a group together and what a team needs to do its best work.</p>
              <p style={{ color: "var(--ink-soft)", fontWeight: 300 }}>Add Shem &amp; Mike's full bios and a portrait here — their story is the part no other venue can copy.</p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div className="split split--rev">
            <Reveal className="split__media wide" delay={1}><Slot id="about-2" src="assets/hydro-bar.jpg" label="Heritage — Hydro concrete wall detail" /></Reveal>
            <Reveal delay={1}>
              <Eyebrow>The building</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(28px,3.6vw,46px)", margin: "20px 0 18px", lineHeight: 1.1 }}>From dynamite store to gathering place.</h2>
              <p className="lead">The heart of Ariki dates to the 1940s. The Hydro's kitchen walls are reinforced concrete, once used to store dynamite for the building of the Karapiro Dam. That history is in the walls — and it's part of what makes a stay here feel grounded and real.</p>
            </Reveal>
          </div>
        </div>
      </section>

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

/* ---------------- TEAM DECKS ---------------- */
function Decks({ go }) {
  return (
    <main>
      <PageHead eyebrow="Team decks" title="Plan the whole trip, in one place." slot="ph-decks" img="assets/kitchen-cabinetry.jpg"
        ph="Team deck pages laid out / on a table"
        intro="A Team Deck gives a leader or coach everything they need to plan, propose and run a trip to Ariki — so it's easy to say yes." />

      <section className="section">
        <div className="wrap">
          <div className="decks">
            <Reveal className="deck">
              <div className="deck__media"><Slot id="deck-corp" src="assets/hydro-living.jpg" label="Corporate deck cover" /></div>
              <div className="deck__body">
                <span className="kicker">For corporate teams</span>
                <h3 className="display">The Corporate Team Deck</h3>
                <p>Why offsites work, the venue at a glance, sample itineraries, catering and tech guidance, pricing and the booking process — ready to share internally.</p>
                <button className="link-underline" onClick={() => go("enquire")}>Request the deck <Arw /></button>
              </div>
            </Reveal>
            <Reveal className="deck" delay={1}>
              <div className="deck__media"><Slot id="deck-sport" src="assets/bunkroom-view.jpg" label="Sports deck cover" /></div>
              <div className="deck__body">
                <span className="kicker">For sports teams</span>
                <h3 className="display">The Sports Team Deck</h3>
                <p>The training environment, the venue and recovery spaces, sample camp schedules, nutrition and kit notes, and the founders' background — built for coaches.</p>
                <button className="link-underline" onClick={() => go("enquire")}>Request the deck <Arw /></button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div className="quote" style={{ maxWidth: "760px" }}>
            <Reveal><Eyebrow center>Bespoke decks</Eyebrow></Reveal>
            <Reveal delay={1}><h2 className="display" style={{ fontSize: "clamp(28px,4vw,48px)", margin: "20px 0 16px", lineHeight: 1.1 }}>Want it tailored to your team?</h2></Reveal>
            <Reveal delay={2}><p className="lead">We'll build a fully customised deck around your team's name, dates and itinerary — perfect for getting a trip signed off. Ask us about a bespoke deck.</p></Reveal>
            <Reveal delay={3} style={{ marginTop: "30px" }}><Btn onClick={() => go("enquire")} variant="solid">Enquire about a bespoke deck <Arw /></Btn></Reveal>
          </div>
        </div>
      </section>

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

/* ---------------- ENQUIRE ---------------- */
function Enquire() {
  return (
    <main>
      <PageHead eyebrow="Enquire" title="Let's plan your stay." slot="ph-enquire" img="assets/family-deck.jpg"
        ph="Warm interior / deck at dusk"
        intro="Email us about your group and we'll come back within 24 hours with a tailored package. Ready to go? Book direct." />

      <section className="section">
        <div className="wrap" style={{ maxWidth: "1000px" }}>
          <div className="split" style={{ alignItems: "start", gap: "clamp(36px,5vw,72px)" }}>
            <Reveal>
              <Eyebrow>Email us</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(28px,3.6vw,46px)", margin: "20px 0 18px", lineHeight: 1.1 }}>One email is all it takes.</h2>
              <p className="lead" style={{ marginBottom: "28px" }}>Tell us who's coming, your preferred dates and what the trip is for — an offsite, a training camp or a family milestone — and we'll come back with a package shaped around your group.</p>
              <div style={{ display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap" }}>
                <Btn href={`mailto:${LINKS.email}?subject=${encodeURIComponent("Ariki enquiry")}`} variant="solid">{LINKS.email} <Arw /></Btn>
                <span className="formnote">We respond within 24 hours.</span>
              </div>
            </Reveal>
            <Reveal delay={1}>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: "26px" }}>
                <Eyebrow>Direct</Eyebrow>
                <div style={{ marginTop: "22px" }} className="stack">
                  <div>
                    <div className="kicker" style={{ marginBottom: "6px" }}>Ready to book</div>
                    <a className="link-underline" href={LINKS.book} target="_blank" rel="noopener noreferrer">Book direct online <Arw /></a>
                  </div>
                  <div>
                    <div className="kicker" style={{ marginBottom: "6px" }}>Find us</div>
                    <p style={{ color: "var(--ink-soft)", fontWeight: 300 }}>401 Ariki Street, Karapiro<br/>Cambridge, New Zealand</p>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap" style={{ maxWidth: "880px" }}>
          <SecHead eyebrow="Good to know" title="Frequently asked" />
          <div>{DATA.faqs.map((f, i) => <Faq key={i} {...f} />)}</div>
        </div>
      </section>
    </main>
  );
}

window.Pages = { space: Space, corporate: Corporate, sports: Sports, gatherings: Gatherings, about: About, decks: Decks, enquire: Enquire };
})();