// Bespoke Wealth Advisory — page composition + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "editorial",
  "accent": ["#0D903A", "#1A549F"],
  "showQuotes": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply accent gradient globally via CSS vars
  React.useEffect(() => {
    const [from, to] = Array.isArray(tweaks.accent) ? tweaks.accent : ["#0D903A", "#1A549F"];
    document.documentElement.style.setProperty(
      '--ambiz-gradient-button',
      `linear-gradient(271deg, ${from} -13%, ${to} 93%)`
    );
    document.documentElement.style.setProperty(
      '--ambiz-gradient',
      `linear-gradient(to right, ${from}, ${to})`
    );
  }, [tweaks.accent]);

  // Scroll reveal — light touch. Only animates sections that haven't entered the
  // viewport yet at mount; the rest stay visible by default.
  React.useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) {
        e.target.classList.add('visible');
        obs.unobserve(e.target);
      }});
    }, { threshold: 0.08, rootMargin: '0px 0px -10% 0px' });
    document.querySelectorAll('.section').forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top > window.innerHeight * 0.9) {
        // below the fold — give it a reveal animation
        el.classList.add('reveal-anim');
        obs.observe(el);
      }
    });
    return () => obs.disconnect();
  }, []);

  return (
    <React.Fragment>
      <window.MorphLayer/>
      <main>
        <window.Hero variant={tweaks.hero}/>
        <window.MarketPressure/>
        <window.MorphSpacer id="morph-23" vh={60}/>
        <window.SystemOverview/>
        <window.MorphSpacer id="morph-34" vh={60}/>
        <window.PerformanceLadder/>
        <window.MorphSpacer id="morph-45" vh={60}/>
        <window.CapabilityWheel/>
        <window.PracticeMatrix/>
        <window.Timeline/>
        <window.DashboardMockup/>
        <window.Proof/>
        <window.LicensePackage/>
        <window.CtaSection/>
      </main>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Hero" hint="Three explored directions for the top of the page.">
          <window.TweakRadio
            label="Variant"
            value={tweaks.hero}
            onChange={v => setTweak('hero', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'command',   label: 'Command' },
              { value: 'cinematic', label: 'Cinema' },
            ]}
          />
        </window.TweakSection>

        <window.TweakSection label="Accent palette" hint="Brand emphasis across CTAs, gradients, ladder.">
          <window.TweakColor
            label="Palette"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={[
              ['#0D903A', '#1A549F'],
              ['#0D903A', '#0F8E42'],
              ['#246BB2', '#164A97'],
              ['#057430', '#FFBA00'],
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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