/* ============================================================
   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">
            <Brandmark className="mark" />
            <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 />);