/* global React, ReactDOM */
// Direction B — Hi-fi homepage entry.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#00FB90",
  "heroBg": "indigo-purple",
  "marqueeSpeed": 44,
  "studioHighlight": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent + marquee speed via CSS variables on root.
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accentColor);
    document.documentElement.style.setProperty('--marquee-dur', `${t.marqueeSpeed}s`);
  }, [t.accentColor, t.marqueeSpeed]);

  // Subtle fade-up scroll reveals across the page.
  React.useEffect(() => {
    const reduce = window.matchMedia &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;

    // [selector, staggerChildren?] — each entry is a "reveal unit".
    const GROUPS = [
      ['.intro-art'], ['.intro-body'],
      ['.problem .section-head'], ['.problem-card', true],
      ['.imgbreak-photo'], ['.imgbreak-content'],
      ['.services-head'], ['.service-card', true], ['.studio-card'],
      ['.resource-copy'], ['.resource-form-wrap'],
      ['.process-head'], ['.versus-col', true],
      ['.industries-head'],
      ['.why .section-head'], ['.why-row', true],
      ['.leadership-head'], ['.leader-card', true],
      ['.testimonials-head'], ['.tcard', true],
      ['.cta-grid > div:first-child'], ['.cta-section .form-card'],
    ];

    const targets = [];
    GROUPS.forEach(([sel, stagger]) => {
      const els = Array.from(document.querySelectorAll(sel));
      els.forEach((el, i) => {
        if (el.dataset.reveal) return;
        el.dataset.reveal = '1';
        el.classList.add('reveal');
        if (stagger) el.style.setProperty('--reveal-delay', `${Math.min(i, 5) * 85}ms`);
        targets.push(el);
      });
    });

    if (!('IntersectionObserver' in window)) {
      targets.forEach((el) => el.classList.add('is-revealed'));
      return;
    }

    const io = new IntersectionObserver((entries, obs) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-revealed');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    targets.forEach((el) => io.observe(el));

    return () => { io.disconnect(); };
  }, []);

  return (
    <React.Fragment>
      <Nav />
      <Hero bgVariant={t.heroBg} />
      <Intro />
      <ProblemCarousel />
      <ImageBreak />
      <ServicesSection studioHighlight={t.studioHighlight} />
      <ResourceDownload />
      <VersusSplit />
      <IndustriesMarquee />
      <WhyDifferent />
      <LeadershipTeam />
      <Testimonials />
      <CTAForm />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Background"
          value={t.heroBg}
          options={['indigo-purple', 'pure-black', 'mint-glow']}
          onChange={(v) => setTweak('heroBg', v)}
        />

        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accentColor}
          options={['#00FB90', '#BC10DE', '#0599FF', '#7118C2']}
          onChange={(v) => setTweak('accentColor', v)}
        />

        <TweakSection label="Motion" />
        <TweakSlider
          label="Marquee speed"
          value={t.marqueeSpeed}
          min={20} max={90} step={2} unit="s"
          onChange={(v) => setTweak('marqueeSpeed', v)}
        />

        <TweakSection label="Services" />
        <TweakToggle
          label="Highlight Hume Studio"
          value={t.studioHighlight}
          onChange={(v) => setTweak('studioHighlight', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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