/* App: nav, rail, cursor, progress, intro, sections */
const { useState, useEffect, useRef } = React;

const sections = [
  { id: "top", label: "I · Villa" },
  { id: "estate", label: "II · Estate" },
  { id: "provenance", label: "III · Provenance" },
  { id: "gallery", label: "IV · Photographs" },
  { id: "plan", label: "V · Specifications" },
  { id: "enquire", label: "VI · Enquiry" },
];

const App = () => {
  const showIntro = !sessionStorage.getItem("vf-intro") && !/nointro|utm_/.test(location.search);
  const [introDone, setIntroDone] = useState(!showIntro);
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("top");
  const [progress, setProgress] = useState(0);
  const [lightIdx, setLightIdx] = useState(null);
  const cursorRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 80);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? window.scrollY / h : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const ids = sections.map(s => s.id);
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-40% 0px -50% 0px", threshold: 0 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [introDone]);

  useEffect(() => {
    const cur = cursorRef.current;
    if (!cur) return;
    const onMove = (e) => { cur.style.left = e.clientX + "px"; cur.style.top = e.clientY + "px"; };
    const onOver = (e) => { const t = e.target.closest('[data-cursor="zoom"]'); cur.classList.toggle("zoom", !!t); };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseover", onOver);
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseover", onOver); };
  }, [introDone]);

  useEffect(() => {
    if (lightIdx !== null) document.body.classList.add("no-scroll"); else document.body.classList.remove("no-scroll");
  }, [lightIdx]);

  const n = () => window.galleryItems.length;
  const openLight = (i) => setLightIdx(i);
  const closeLight = () => setLightIdx(null);
  const prevLight = () => setLightIdx(i => (i === null ? null : (i - 1 + n()) % n()));
  const nextLight = () => setLightIdx(i => (i === null ? null : (i + 1) % n()));

  return (
    <div className="grain">
      {showIntro && <Intro onDone={() => { sessionStorage.setItem("vf-intro", "1"); setIntroDone(true); }} />}

      <div className="progress"><div className="progress-bar" style={{ transform: `scaleX(${progress})` }} /></div>

      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <a href="#top" className="mark">Villa Francesca</a>
        <ul>
          <li><a href="#estate">The Estate</a></li>
          <li><a href="#provenance">Provenance</a></li>
          <li><a href="#gallery">Photographs</a></li>
          <li><a href="#plan">Specifications</a></li>
          <li><a href="#enquire">Enquire</a></li>
        </ul>
      </nav>

      <aside className="rail">
        {sections.map(s => (
          <a key={s.id} href={`#${s.id}`} className={active === s.id ? "active" : ""}>{s.label}</a>
        ))}
      </aside>

      <div className="cursor" ref={cursorRef}></div>

      <Hero heroSrc="images/twilight.jpg" />
      <Estate />
      <Provenance />
      <Quote />
      <Gallery onOpen={openLight} />
      <Specifications />
      <Enquire />
      <Footer />

      <Lightbox index={lightIdx} onClose={closeLight} onPrev={prevLight} onNext={nextLight} />
    </div>
  );
};

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