// GEM Homepage — composes the design-system Editorial homepage (OptionA: hero +
// structural-shifts slider + performance) with the shared chrome, full nav/footer
// link wiring, the diamond loader, and the global light/dark toggle.

const Nav = window.Nav, FooterCTA = window.FooterCTA, Footer = window.Footer;
const OptionA = window.OptionA;
const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#BEA87D",
  "showPerformance": true
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [ping, setPing] = useState(false);
  const onBook = () => { setPing(true); setTimeout(() => setPing(false), 1800); };

  React.useEffect(() => {
    const wireHome = (el) => {
      if (!el || el.dataset.home) return;
      el.dataset.home = '1'; el.style.cursor = 'pointer';
      el.addEventListener('click', () => { window.location.href = 'Home.html'; });
    };
    const fix = () => {
      document.querySelectorAll('img').forEach((img) => {
        const s = img.getAttribute('src') || '';
        if (s.includes('gem_logo_primary_horizontal.png') && window.GEM_LOGO_PRIMARY) img.src = window.GEM_LOGO_PRIMARY;
        else if (s.includes('gem_mark.png') && window.GEM_MARK) img.src = window.GEM_MARK;
      });
      document.querySelectorAll('.gem-nav-logo').forEach(wireHome);
      wireHome(document.querySelector('.gem-footer-brand img'));
      document.querySelectorAll('.gem-nav-link').forEach((a) => {
        const label = (a.textContent || '').trim();
        if (label === 'Equities') a.setAttribute('href', encodeURI('Equities.html'));
        else if (label === 'Property') a.setAttribute('href', encodeURI('Property.html'));
        else if (label === 'Managed Funds') a.setAttribute('href', encodeURI('Managed Funds.html'));
      });
      document.querySelectorAll('.gem-footer-col a').forEach((a) => {
        const l = (a.textContent || '').trim();
        if (l === 'Privacy Policy') a.setAttribute('href', encodeURI('Privacy.html'));
        else if (l === 'Terms & Conditions') a.setAttribute('href', encodeURI('Terms.html'));
        else if (l === 'Contact Us') a.setAttribute('href', encodeURI('Contact.html'));
        else if (l === 'Team') a.setAttribute('href', encodeURI('Team.html'));
        else if (l === 'History') a.setAttribute('href', encodeURI('History.html'));
        else if (l === 'Careers') a.setAttribute('href', encodeURI('Careers.html'));
      });
    };
    fix();
    requestAnimationFrame(fix);
    const mo = new MutationObserver(fix);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => mo.disconnect();
  }, []);

  // Optionally hide the performance section (last <section> inside OptionA).
  React.useEffect(() => {
    const perf = document.querySelector('.opt-a .perf');
    if (perf) perf.style.display = t.showPerformance ? '' : 'none';
  }, [t.showPerformance]);

  const rootStyle = { '--antique-gold': t.accent, '--antique-gold-soft': `${t.accent}26` };

  return (
    <>
      <div className="eq-root" style={rootStyle}>
        <Nav onBookMeeting={onBook} />
        <OptionA onBookMeeting={onBook} />
        <FooterCTA onBookMeeting={onBook} />
        <Footer />
      </div>

      <TweaksPanel>
        <TweakSection label="Style" />
        <TweakColor label="Accent gold" value={t.accent}
          options={['#BEA87D', '#D4C49A', '#C9A86A', '#A8916A']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Sections" />
        <TweakToggle label="Performance figures" value={t.showPerformance}
          onChange={(v) => setTweak('showPerformance', v)} />
      </TweaksPanel>

      {ping && <div className="booking-ping">Booking flow — prototype stub</div>}
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
setTimeout(() => document.documentElement.classList.add('anim-ready'), 1400);