// lux/page-shell.jsx — Shared sub-page header layout component.
// Every standalone sub-page (menu/voucher/visit/biz/story/ritual)
// uses this so chrome stays identical across the site.

const { useState: __ps_useState, useEffect: __ps_useEffect } = React;

function PageHero({ eyebrow, titleA, titleB, sub, glyph }) {
  return (
    <section className="lx-pagehero">
      <div className="wrap">
        <div className="lx-pagehero-grid">
          <div className="lx-pagehero-text reveal">
            <div className="eyebrow">{eyebrow}</div>
            <h1 className="lx-pagehero-title">
              {titleA} {titleB && <em>{titleB}</em>}
            </h1>
            {sub && <p className="p-lead lx-pagehero-sub">{sub}</p>}
          </div>
          {glyph && (
            <div className="lx-pagehero-glyph reveal d2" aria-hidden="true">{glyph}</div>
          )}
        </div>
      </div>
    </section>
  );
}

function LuxLayout({ children, lang, setLang, t }) {
  // Trigger reveal on scroll (CSS transitions, IntersectionObserver flips .in)
  __ps_useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <LuxNav t={t} lang={lang} setLang={setLang} />
      <main id="top" className="lx-page-main">
        {children}
      </main>
      <FloatingBook t={t} />
      <LuxFooter t={t} />
    </>
  );
}

Object.assign(window, { PageHero, LuxLayout });