/* global React, ReactDOM, DevHeader, FloatCTA, DevFooter, DevHero, DevPain, DevValues, DevCaseStudies, DevAgevolazioni, DevTeam, DevLeadMagnet, DevFAQ, DevBooking, DevFinal, HERO_COPY_VARIANTS, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor */
/* Devmy Healthcare — App root + Tweaks panel + scrollspy + reveal-on-scroll */

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

/* ---------- Reveal on scroll ---------- */
function useRevealOnScroll() {
  useEffectApp(() => {
    const els = document.querySelectorAll('.section, .hero');
    els.forEach(el => el.classList.add('reveal'));
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

/* ---------- Scroll spy ---------- */
function useScrollSpy(ids) {
  const [active, setActive] = useStateApp(ids[0]);
  useEffectApp(() => {
    function onScroll() {
      const y = window.scrollY + 120;
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [ids.join(',')]);
  return active;
}

/* ---------- Tweaks defaults ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroCopy": "craft",
  "heroVisual": "mosaic",
  "accent": "#FF6600",
  "density": "comfy"
}/*EDITMODE-END*/;

/* ---------- App ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useRevealOnScroll();
  const active = useScrollSpy([
    'top', 'pain', 'competenze', 'progetti', 'agevolazioni', 'team', 'guida', 'faq', 'prenota'
  ]);

  // Apply accent + density as CSS vars on root for live tweak
  useEffectApp(() => {
    document.documentElement.style.setProperty('--brand-orange', t.accent || '#FF6600');
    document.body.dataset.density = t.density || 'comfy';
  }, [t.accent, t.density]);

  return (
    <div data-screen-label="Devmy Healthcare landing">
      <DevHeader activeId={active} />
      <main>
        <DevHero copyVariant={t.heroCopy} visualVariant={t.heroVisual} />
        <DevPain />
        <DevValues />
        <DevCaseStudies />
        <DevAgevolazioni />
        <DevTeam />
        <DevLeadMagnet />
        <DevFAQ />
        <DevBooking />
        <DevFinal />
      </main>
      <DevFooter />
      <FloatCTA />

      <TweaksPanel title="Tweaks · Healthcare landing">
        <TweakSection label="Hero — copy">
          <TweakSelect
            label="Variante headline"
            value={t.heroCopy}
            onChange={v => setTweak('heroCopy', v)}
            options={[
              { value: 'craft',      label: '01 · Craft — "fatti come si deve"' },
              { value: 'partner',    label: '02 · Partner — "che la sanità chiede"' },
              { value: 'compliance', label: '03 · Compliance — "101/2020 · 8 settimane"' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Hero — visual">
          <TweakRadio
            label="Trattamento visivo"
            value={t.heroVisual}
            onChange={v => setTweak('heroVisual', v)}
            options={[
              { value: 'mosaic',   label: 'Mosaico UI' },
              { value: 'single',   label: 'Dashboard' },
              { value: 'brokenk',  label: 'Broken-K' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Accent">
          <TweakColor
            label="Colore brand"
            value={t.accent}
            onChange={v => setTweak('accent', v)}
            options={['#FF6600', '#FF3600', '#0E7C86', '#0B1F2A']}
          />
        </TweakSection>

        <TweakSection label="Densità">
          <TweakRadio
            label="Spaziature"
            value={t.density}
            onChange={v => setTweak('density', v)}
            options={[
              { value: 'comfy', label: 'Arieggiata' },
              { value: 'tight', label: 'Compatta' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

window.App = App;

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