// app.jsx — Olena's Portraits

function Nav({ active, onNav, openCommission }) {
  const links = [
    { id: 'works', label: 'Works' },
    { id: 'process', label: 'Studio' },
    { id: 'commission', label: 'Commission' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="brand" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ cursor: 'pointer' }}>
          Olena's Portraits <small>Est. 2018</small>
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.id} data-active={active === l.id ? 1 : 0} onClick={() => onNav(l.id)}>{l.label}</a>
          ))}
        </div>
        <button className="nav-cta" onClick={openCommission}>Commission a portrait</button>
      </div>
    </nav>
  );
}

function App() {
  const [detailId, setDetailId] = useState(null);
  const [active, setActive] = useState('works');

  useEffect(() => {
    document.documentElement.dataset.palette = 'paper';
    document.documentElement.dataset.accent = 'oxblood';
  }, []);

  useEffect(() => {
    const ids = ['works', 'process', 'commission', 'contact'];
    const els = ids.map((i) => document.getElementById(i)).filter(Boolean);
    if (!els.length) return undefined;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-40% 0px -55% 0px' });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  useEffect(() => {
    document.body.style.overflow = detailId ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [detailId]);

  const openWork = (id) => setDetailId(id);
  const closeWork = () => setDetailId(null);
  const navTo = (id) => {
    if (id === 'detail') return;
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <Nav active={active} onNav={navTo} openCommission={() => navTo('commission')} />
      <Masthead />
      <Hero onNav={(s, id) => { if (s === 'detail') openWork(id); else navTo(s); }} />
      <Gallery layout="grid" onOpen={openWork} />
      <Spread />
      <Process />
      <Commission onNav={navTo} />
      <Foot />
      {detailId && <Detail id={detailId} onClose={closeWork} onOpen={openWork} />}
    </>
  );
}

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