// App entry — Shalev's Cakes
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [activeCat, setActiveCat] = useStateA('all');
  const [quick, setQuick] = useStateA(null);

  // sync nav highlight to current category id
  const navCat = ['bento','designed','cheesecake','pastry','birthday','boxes'].includes(activeCat) ? activeCat : null;

  useEffectA(() => {
    if (quick) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
  }, [quick]);

  // ---------- Scroll-reveal observer ----------
  useEffectA(() => {
    if (typeof IntersectionObserver === 'undefined') return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {
      document.querySelectorAll('[data-reveal]').forEach(el => el.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          // stagger children by --i if they're in a grid
          const target = e.target;
          target.classList.add('is-in');
          const kids = target.querySelectorAll('[data-reveal-child]');
          kids.forEach((k, i) => {
            k.style.setProperty('--i', i);
            k.classList.add('is-in');
          });
          io.unobserve(target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

    const scan = () => {
      document.querySelectorAll('[data-reveal]:not(.is-in)').forEach(el => io.observe(el));
    };
    scan();
    // Re-scan when shop filters change DOM
    const mo = new MutationObserver(() => scan());
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  // ---------- Smooth-scroll for in-page anchors ----------
  useEffectA(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <window.CartProvider>
      <window.Header activeCat={navCat} setActiveCat={setActiveCat} />
      <window.Hero />
      <window.Categories setActiveCat={setActiveCat} />
      <window.Tape />
      <window.Shop activeCat={activeCat} setActiveCat={setActiveCat} onQuickView={setQuick} />
      <window.Spotlight onQuickView={setQuick} />
      <window.Reviews onQuickView={setQuick} />
      <window.Contact />
      <window.News />
      <window.Footer />
      <a href="#" className="built-by" aria-label="נבנה ועוצב על ידי O&Y STUDIO">
        <span className="oy-name">O&amp;Y STUDIO</span>
        <span className="oy-mark" aria-hidden="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
            <path d="M12 3c1.5 2.5 1.5 4.5 0 6 1.5-1.5 3.5-1.5 6 0-2.5 1.5-4.5 1.5-6 0 1.5 1.5 1.5 3.5 0 6-1.5-2.5-1.5-4.5 0-6-1.5 1.5-3.5 1.5-6 0 2.5-1.5 4.5-1.5 6 0z"/>
            <circle cx="12" cy="12" r="1.2" fill="currentColor"/>
          </svg>
        </span>
        <span className="oy-he">נבנה ועוצב על ידי</span>
      </a>
      <window.CartDrawer />
      <window.Toast />
      <window.A11yWidget />
      <window.CookieBanner />
      {quick && <window.QuickView product={quick} onClose={() => setQuick(null)} />}
    </window.CartProvider>
  );
}

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