// ARC Proofing — app root + Tweaks.
const { useState: useStateA, useEffect: useEffectA } = React;

const SANS = {
  Geist: "'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
  'Space Grotesk': "'Space Grotesk', -apple-system, sans-serif",
  System: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif",
};
const MONO = {
  'JetBrains Mono': "'JetBrains Mono', ui-monospace, Menlo, monospace",
  'IBM Plex Mono': "'IBM Plex Mono', ui-monospace, Menlo, monospace",
  'Geist Mono': "'Geist Mono', ui-monospace, Menlo, monospace",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sans": "Geist",
  "mono": "JetBrains Mono",
  "headWeight": "Medium",
  "density": "comfortable"
}/*EDITMODE-END*/;

const WEIGHTS = { Regular: 400, Medium: 500, Semibold: 600 };

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const home = window.ARC_HOME;
  const verticals = window.ARC_VERTICALS;
  const items = [home, ...verticals];
  const [active, setActive] = useStateA('certainty');
  const [compareOpen, setCompareOpen] = useStateA(false);

  // apply typographic tweaks to the document
  useEffectA(() => {
    const r = document.documentElement;
    r.style.setProperty('--font-sans', SANS[t.sans] || SANS.Geist);
    r.style.setProperty('--font-mono', MONO[t.mono] || MONO['JetBrains Mono']);
    r.style.setProperty('--head-weight', WEIGHTS[t.headWeight] || 500);
  }, [t.sans, t.mono, t.headWeight]);

  // reset scroll on vertical change
  useEffectA(() => { window.scrollTo({ top: 0 }); }, [active]);

  const isHome = active === 'certainty';
  const v = verticals.find((x) => x.slug === active);

  return (
    <div className={'shell' + (t.density === 'dense' ? ' dense' : '')}>
      <Nav />
      <Selector items={items} active={active} onPick={setActive} />

      {isHome ? <HomeHero home={home} /> : <VerticalHero v={v} onCompare={() => setCompareOpen(true)} />}

      <DemoSection />

      {!isHome && (
        <React.Fragment>
          <Frameworks v={v} />
          <Outcomes v={v} />
          <Capabilities v={v} />
          <Pricing v={v} />
        </React.Fragment>
      )}

      <Implementation />

      <CTA word={isHome ? home.word : v.word} cta={isHome ? home.cta : v.cta} />
      <Footer />

      <ComparisonModal open={compareOpen} onClose={() => setCompareOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakSelect label="Headline / UI" value={t.sans}
          options={['Geist', 'Space Grotesk', 'System']}
          onChange={(val) => setTweak('sans', val)} />
        <TweakSelect label="Mono (hashes, URLs)" value={t.mono}
          options={['JetBrains Mono', 'IBM Plex Mono', 'Geist Mono']}
          onChange={(val) => setTweak('mono', val)} />
        <TweakRadio label="Headline weight" value={t.headWeight}
          options={['Regular', 'Medium', 'Semibold']}
          onChange={(val) => setTweak('headWeight', val)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={['comfortable', 'dense']}
          onChange={(val) => setTweak('density', val)} />
      </TweaksPanel>
    </div>
  );
}

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