// ─── App root ──────────────────────────────────────────────────────────

const { Reveal, LogoMark, MetaRow, SectionHead, Plate, Header,
  Hero, FeaturedReel, Mission, Services, Work, Process, Principles, Fit, FAQ, Journal, Footer,
  Inquiry, Tweaks, TWEAK_DEFAULTS } = window;

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [tweaksOn, setTweaksOn] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement;
    const fontMap = {
      'Newsreader': `'Newsreader', 'Times New Roman', serif`,
      'EB Garamond': `'EB Garamond', 'Times New Roman', serif`,
      'Cormorant Garamond': `'Cormorant Garamond', 'Times New Roman', serif`,
      'Libre Caslon Text': `'Libre Caslon Text', 'Times New Roman', serif`,
    };
    r.style.setProperty('--font-display', fontMap[tweaks.displayFont] || fontMap.Newsreader);
    r.style.setProperty('--signal', tweaks.accentRed);
    r.style.setProperty('--ember', tweaks.accentEmber);

    // Load extra Google Fonts if needed
    const extra = ['EB Garamond', 'Cormorant Garamond', 'Libre Caslon Text'];
    if (extra.includes(tweaks.displayFont) && !document.getElementById('tweak-font-' + tweaks.displayFont)) {
      const link = document.createElement('link');
      link.id = 'tweak-font-' + tweaks.displayFont;
      link.rel = 'stylesheet';
      link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(tweaks.displayFont)}:ital,wght@0,500;0,600;1,500;1,600&display=swap`;
      document.head.appendChild(link);
    }

    document.body.classList.toggle('ansel-texture', tweaks.texture);
    document.body.style.setProperty('--grain-opacity', tweaks.grain ? '0.06' : '0');
  }, [tweaks]);

  const onChange = (k, v) => {
    setTweaks((p) => {
      const next = { ...p, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  const onNav = useCallback((id) => {
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }, []);

  return (
    <>
      <Header onNav={onNav} />
      <main>
        <Hero onNav={onNav} />
        <FeaturedReel />
        <Mission />
        <Services />
        <Work onNav={onNav} />
        <Process />
        <Principles />
        <Fit />
        <FAQ />
        <Journal />
        <Inquiry />
      </main>
      <Footer />
      {tweaksOn && <Tweaks values={tweaks} onChange={onChange} />}
    </>
  );
}

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