/* Arcline App — wires sections together with tweaks */

const { useState: USA, useEffect: UEA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "systems",
  "headline": "reception",
  "typepair": "geist",
  "density": "regular",
  "scenario": "workers_comp"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  document.documentElement.setAttribute('data-theme', t.theme);
  document.documentElement.setAttribute('data-typepair', t.typepair);
  document.documentElement.setAttribute('data-density', t.density);
}

function App() {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);
  const [scenario, setScenario] = USA(tweaks.scenario || 'workers_comp');

  UEA(() => { applyTweaks(tweaks); }, [tweaks]);
  UEA(() => { setScenario(tweaks.scenario); }, [tweaks.scenario]);

  // reveal-on-scroll
  UEA(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  const onToggleTheme = () => {
    setTweaks({ theme: tweaks.theme === 'dark' ? 'systems' : 'dark' });
  };

  return (
    <>
      <Nav tweaks={tweaks} onToggleTheme={onToggleTheme}/>
      <main>
        <Hero headlineKey={tweaks.headline} scenario={scenario} onScenarioChange={(s) => setTweaks({ scenario: s })}/>
        <TrustBar/>
        <div className="reveal"><Leverage/></div>
        <div className="reveal"><Operational/></div>
        <div className="reveal"><HowItWorks/></div>
        <div className="reveal"><LiveDemo/></div>
        <div className="reveal"><Outcomes/></div>
        <div className="reveal"><PracSuiteSection/></div>
        <div className="reveal"><Testimonials/></div>
        <div className="reveal"><PricingPreview/></div>
        <div className="reveal"><FAQ/></div>
        <div className="reveal"><FinalCTA/></div>
      </main>
      <Footer/>
      <ArclineTweaks tweaks={tweaks} setTweaks={setTweaks}/>
    </>
  );
}

function ArclineTweaks({ tweaks, setTweaks }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakRadio
          value={tweaks.theme}
          onChange={(v) => setTweaks({ theme: v })}
          options={[
            { value: 'systems', label: 'Systems' },
            { value: 'dark', label: 'Dark' },
            { value: 'light', label: 'Light' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero headline">
        <TweakRadio
          value={tweaks.headline}
          onChange={(v) => setTweaks({ headline: v })}
          options={[
            { value: 'reception', label: 'Reception leverage' },
            { value: 'patients', label: 'Patient focus' },
            { value: 'revenue', label: 'Revenue / bookings' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Typography">
        <TweakRadio
          value={tweaks.typepair}
          onChange={(v) => setTweaks({ typepair: v })}
          options={[
            { value: 'geist', label: 'Geist · Geist Mono' },
            { value: 'manrope', label: 'Manrope · JetBrains' },
            { value: 'editorial', label: 'Inter · Instrument Serif' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Density">
        <TweakRadio
          value={tweaks.density}
          onChange={(v) => setTweaks({ density: v })}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'regular', label: 'Regular' },
            { value: 'spacious', label: 'Spacious' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Phone demo scenario">
        <TweakRadio
          value={tweaks.scenario}
          onChange={(v) => setTweaks({ scenario: v })}
          options={[
            { value: 'workers_comp', label: 'Workers Comp' },
            { value: 'cdm', label: 'CDM Care Plan' },
            { value: 'after_hours', label: 'After-hours' },
            { value: 'dva', label: 'DVA Veterans' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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