/* ============================================================
 app.jsx - App shell: nav, footer, router, reveal, tweaks
 ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;
const { Arw, Eyebrow, Btn, Brandmark, Wordmark } = window.C;
const { ROUTES, LINKS } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
 "direction": "editorial",
 "accent": "#2C4636",
 "heroMotion": true
}/*EDITMODE-END*/;

/* ---------------- NAV ---------------- */
function Nav({ page, go, scrolled, onBurger }) {
 return (
 <header className={`nav ${scrolled ? "scrolled" : ""}`}>
 <a className="nav__brand" href="#home" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="Ariki Lake House - home">
 <Brandmark className="mark" />
 <Wordmark className="word" />
 </a>
 <nav className="nav__links">
 {ROUTES.filter(r => r.id !== "home" && r.id !== "enquire").map(r => (
 <a key={r.id} href={"#" + r.id} className={page === r.id ? "active" : ""}
 onClick={(e) => { e.preventDefault(); go(r.id); }}>{r.label}</a>
 ))}
 </nav>
 <div className="nav__right">
 <a className="nav__phone" href={`mailto:${LINKS.email}`}>{LINKS.email}</a>
 <a className="btn btn--light" href={LINKS.book} target="_blank" rel="noopener noreferrer">Book Now</a>
 <button className="nav__burger" aria-label="Menu" onClick={onBurger}><span></span><span></span><span></span></button>
 </div>
 </header>
 );
}

function MobileMenu({ open, go, close }) {
 return (
 <div className={`mobilemenu ${open ? "open" : ""}`}>
 <button className="close" onClick={close} aria-label="Close">×</button>
 <nav>
 {ROUTES.map(r => (
 <a key={r.id} href={"#" + r.id} onClick={(e) => { e.preventDefault(); go(r.id); close(); }}>
 {r.label}<span className="arw">→</span>
 </a>
 ))}
 </nav>
 <div className="mm-foot">
 <a href={LINKS.book} target="_blank" rel="noopener noreferrer">Book Direct</a> · <a href={`mailto:${LINKS.email}`}>{LINKS.email}</a>
 </div>
 </div>
 );
}

/* ---------------- FOOTER ---------------- */
function Footer({ go }) {
 return (
 <footer className="footer">
 <div className="wrap">
 <div className="footer__top">
 <div className="footer__brand">
 <span className="mark mark--footer" aria-hidden="true"></span>
 <p>A lake house built for teams - on the shores of Lake Karapiro, Cambridge, Aotearoa New Zealand.</p>
 </div>
 <div className="footer__col">
 <h5>Explore</h5>
 {ROUTES.filter(r => r.id !== "home").map(r => (
 <a key={r.id} href={"#" + r.id} onClick={(e) => { e.preventDefault(); go(r.id); }}>{r.label}</a>
 ))}
 </div>
 <div className="footer__col">
 <h5>Visit</h5>
 <p>401 Ariki Street, Karapiro</p>
 <p>Cambridge, New Zealand</p>
 <a href={LINKS.ig} target="_blank" rel="noopener noreferrer">Instagram ↗</a>
 <a href={LINKS.book} target="_blank" rel="noopener noreferrer">Book Direct ↗</a>
 </div>
 <div className="footer__col">
 <h5>Get in touch</h5>
 <a href={`mailto:${LINKS.email}`}>{LINKS.email}</a>
 <a href={LINKS.book} target="_blank" rel="noopener noreferrer">Book Direct ↗</a>
 <Btn onClick={() => go("enquire")} variant="solid" style={{ marginTop: "10px" }}>Enquire <Arw /></Btn>
 </div>
 </div>
 <div className="footer__bottom">
 <span>© {new Date().getFullYear()} Ariki Lake House</span>
 <span><a href={`mailto:${LINKS.email}`}>{LINKS.email}</a></span>
 </div>
 </div>
 </footer>
 );
}

/* ---------------- TWEAKS ---------------- */
function Tweaks({ t, setTweak }) {
 const {
 TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle,
 } = window;
 if (!TweaksPanel) return null;
 return (
 <TweaksPanel>
 <TweakSection label="Visual direction" />
 <TweakRadio label="Direction" value={t.direction}
 options={["editorial", "cinematic", "natural"]}
 onChange={(v) => setTweak("direction", v)} />
 <TweakSection label="Accent" />
 <TweakColor label="Accent colour" value={t.accent}
 options={["#2C4636", "#7EB89A", "#1B2E22", "#B4825C"]}
 onChange={(v) => setTweak("accent", v)} />
 <TweakSection label="Motion" />
 <TweakToggle label="Hero pan (Ken Burns)" value={t.heroMotion}
 onChange={(v) => setTweak("heroMotion", v)} />
 </TweaksPanel>
 );
}

/* ---------------- APP ---------------- */
function App() {
 const useTweaks = window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]);
 const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
 const [page, setPage] = useState(() => (location.hash || "#home").slice(1));
 const [scrolled, setScrolled] = useState(false);
 const [menu, setMenu] = useState(false);

 const go = useCallback((id) => {
 setPage(id);
 if (location.hash !== "#" + id) history.pushState(null, "", "#" + id);
 window.scrollTo({ top: 0, behavior: "auto" });
 }, []);

  // hash / back-button sync
 useEffect(() => {
 const onHash = () => setPage((location.hash || "#home").slice(1));
 window.addEventListener("popstate", onHash);
 window.addEventListener("hashchange", onHash);
 return () => { window.removeEventListener("popstate", onHash); window.removeEventListener("hashchange", onHash); };
 }, []);

  // nav scrolled state
 useEffect(() => {
 const onScroll = () => setScrolled(window.scrollY > 40);
 onScroll();
 window.addEventListener("scroll", onScroll, { passive: true });
 return () => window.removeEventListener("scroll", onScroll);
 }, []);

  // apply theme + accent + motion to <html>
 useEffect(() => {
 const r = document.documentElement;
 r.setAttribute("data-theme", t.direction || "editorial");
 if (t.accent) { r.style.setProperty("--accent", t.accent); }
 else { r.style.removeProperty("--accent"); }
 r.classList.toggle("no-heromotion", !t.heroMotion);
 }, [t.direction, t.accent, t.heroMotion]);

  // scroll reveal — reveal above-the-fold instantly, observe the rest
 useEffect(() => {
 const els = Array.from(document.querySelectorAll(".reveal:not(.in)"));
 if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
 const io = new IntersectionObserver((entries) => {
 entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
 }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
 const vh = window.innerHeight;
 els.forEach(e => {
 if (e.getBoundingClientRect().top < vh * 0.92) e.classList.add("in", "snap");
 else io.observe(e);
 });
 return () => io.disconnect();
 }, [page]);

 const Page = page === "home" ? window.HomePage : (window.Pages[page] || window.HomePage);

 return (
 <React.Fragment>
 <Nav page={page} go={go} scrolled={scrolled} onBurger={() => setMenu(true)} />
 <MobileMenu open={menu} go={go} close={() => setMenu(false)} />
 <div key={page} className="page-fade">
 <Page go={go} />
 </div>
 <Footer go={go} />
 <Tweaks t={t} setTweak={setTweak} />
 </React.Fragment>
 );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);