// ============================================================
// Alumnus product site — live product shots
// ============================================================
// Renders real app screens into the <div class="shot" data-shot="…">
// placeholders on index.html. Each shot mounts as it nears the
// viewport and scales its native-size frame to fit the host, so the
// marketing imagery is always the current product.
(() => {
  const { Phone, Browser, Icon } = window.AL;
  const { M_Commitment } = window.MemberOnboarding;
  const { M_Home, M_CheckIn, M_Trends } = window.MemberDaily;
  const { M_Community, M_Privacy } = window.MemberRest;
  const { P_Overview, P_Alert, P_Message } = window.Partner;
  const { V_Caseload, V_AlertsQueue } = window.ProviderA;
  const { V_Analytics } = window.ProviderB;

  // Frames — sizes must match the aspect-ratio classes in site.css
  const member = (screen) => ({
    w: 360, h: 760,
    render: () => <Phone width={360} height={760}>{screen()}</Phone>,
  });
  // The partner portal is a mobile web app: show it under the status bar
  // with a browser address pill, rather than full-bleed like the native app.
  const partner = (screen) => ({
    w: 400, h: 820,
    render: () => (
      <Phone width={400} height={820}>
        <div style={{
          height: '100%', boxSizing: 'border-box', paddingTop: 52, paddingBottom: 18,
          display: 'flex', flexDirection: 'column', background: 'var(--bg-page)',
        }}>
          <div style={{
            margin: '0 18px 8px', height: 30, borderRadius: 8,
            background: 'var(--color-oat)', color: 'var(--fg-tertiary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            fontSize: 12, letterSpacing: '0.02em',
          }}>
            <Icon name="lock-simple" size={11}/> app.alumnus.care
          </div>
          <div style={{ flex: 1, minHeight: 0 }}>{screen()}</div>
        </div>
      </Phone>
    ),
  });
  const console_ = (screen) => ({
    w: 1280, h: 840,
    render: () => (
      <Browser url="console.alumnus.care" width={1280} height={840}
               style={{ borderRadius: 0, boxShadow: 'none' }}>
        {screen()}
      </Browser>
    ),
  });

  const SHOTS = {
    'member-commitment': member(() => <M_Commitment/>),
    'member-checkin':    member(() => <M_CheckIn/>),
    'member-home':       member(() => <M_Home patternEmerging={false}/>),
    'member-pattern':    member(() => <M_Home patternEmerging={true}/>),
    'member-trends':     member(() => <M_Trends/>),
    'member-community':  member(() => <M_Community/>),
    'member-privacy':    member(() => <M_Privacy/>),
    'partner-overview':  partner(() => <P_Overview alertOpen={false}/>),
    'partner-alert':     partner(() => <P_Alert/>),
    'partner-message':   partner(() => <P_Message/>),
    'console-caseload':  console_(() => <V_Caseload/>),
    'console-alerts':    console_(() => <V_AlertsQueue/>),
    'console-analytics': console_(() => <V_Analytics/>),
  };

  // Screens are pictures here: no focus, no clicks
  const makeInert = (el) => el && el.setAttribute('inert', '');

  function Scaled({ host, spec }) {
    const [scale, setScale] = React.useState(() => host.clientWidth / spec.w);
    React.useEffect(() => {
      const ro = new ResizeObserver(() => setScale(host.clientWidth / spec.w));
      ro.observe(host);
      return () => ro.disconnect();
    }, []);
    return (
      <div ref={makeInert} style={{
        width: spec.w, height: spec.h,
        transform: `scale(${scale})`, transformOrigin: 'top left',
      }}>
        {spec.render()}
      </div>
    );
  }

  const mount = (host) => {
    const spec = SHOTS[host.dataset.shot];
    if (!spec) return;
    ReactDOM.createRoot(host).render(<Scaled host={host} spec={spec}/>);
    host.classList.add('is-ready');
  };

  // Hidden shots (display: none) never intersect, so the desktop and
  // mobile variants of a section only render where they're shown.
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => {
      if (!e.isIntersecting) return;
      io.unobserve(e.target);
      mount(e.target);
    });
  }, { rootMargin: '600px 0px' });

  document.querySelectorAll('.shot[data-shot]').forEach((el) => io.observe(el));
})();