// App root — wires all sections + dark mode + tweaks panel
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakText, TweakSelect } = window.Tweaks || {};
const { ScrollProgress } = window.UI;
const { Header, Hero, LogoStrip, PainPoints } = window.SectionsTop;
const { PatientCycle } = window.SectionsCycle;
const { BentoGrid } = window.SectionsBento;
const { StickyDemo, IAShowcase, Personas, Metrics, Migration } = window.SectionsMid;
const { Pricing, FAQ, FinalCTA, Footer } = window.SectionsBottom;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0EA5E9",
  "primary": "#15324D",
  "headline": "O sistema da sua clínica devia ter sido feito hoje. Agora foi.",
  "darkMode": true,
  "showFloatingBadges": true,
  "ctaCopy": "Quero ver uma demonstração"
}/*EDITMODE-END*/;

function CursorGlow() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (window.matchMedia('(max-width: 1024px)').matches) return;
    const onMove = (e) => {
      if (!ref.current) return;
      ref.current.style.transform = `translate3d(${e.clientX - 250}px, ${e.clientY - 250}px, 0)`;
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return <div ref={ref} aria-hidden className="hidden lg:block fixed top-0 left-0 w-[500px] h-[500px] rounded-full pointer-events-none z-0 transition-transform duration-200 ease-out" style={{ background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 60%)' }}/>;
}

function App() {
  const tweaks = useTweaks ? useTweaks(TWEAK_DEFAULTS) : { state: TWEAK_DEFAULTS, setTweak: () => {} };
  const { state, setTweak } = tweaks;
  const [dark, setDark] = React.useState(state.darkMode);

  React.useEffect(() => {
    document.documentElement.classList.toggle('dark', dark);
  }, [dark]);

  React.useEffect(() => {
    setDark(state.darkMode);
  }, [state.darkMode]);

  // Apply tweak colors via CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', state.accent);
    root.style.setProperty('--primary', state.primary);
  }, [state.accent, state.primary]);

  return (
    <>
      <ScrollProgress/>
      <CursorGlow/>
      <Header dark={dark} setDark={(v) => { setDark(v); setTweak('darkMode', v); }}/>
      <main id="main" className="relative">
        <Hero/>
        <LogoStrip/>
        <PainPoints/>
        <PatientCycle/>
        <BentoGrid/>
        <StickyDemo/>
        <IAShowcase/>
        <Personas/>
        <Metrics/>
        <Migration/>
        <Pricing/>
        <FAQ/>
        <FinalCTA/>
      </main>
      <Footer/>

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Aparência">
            <TweakToggle label="Modo escuro" value={state.darkMode} onChange={(v) => setTweak('darkMode', v)}/>
            <TweakColor label="Cor de destaque" value={state.accent} onChange={(v) => setTweak('accent', v)}/>
            <TweakColor label="Cor primária" value={state.primary} onChange={(v) => setTweak('primary', v)}/>
            <TweakToggle label="Badges flutuantes no hero" value={state.showFloatingBadges} onChange={(v) => setTweak('showFloatingBadges', v)}/>
          </TweakSection>
          <TweakSection title="Copy">
            <TweakText label="Headline do hero" value={state.headline} onChange={(v) => setTweak('headline', v)}/>
            <TweakText label="CTA principal" value={state.ctaCopy} onChange={(v) => setTweak('ctaCopy', v)}/>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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