// App — composes the page + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#DC2626",
  "background": "#08090B",
  "density": "regular",
  "showScrollHint": true,
  "heroVariant": "studio"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { label: "Surgical red",  value: "#DC2626" },
  { label: "Cyan signal",   value: "#22D3EE" },
  { label: "Vital green",   value: "#84CC16" },
  { label: "Pure white",    value: "#F4F5F7" },
  { label: "Brass",         value: "#C79D5B" }
];

const BG_PRESETS = [
  { label: "Near-black",     value: "#08090B" },
  { label: "Cool obsidian",  value: "#070A10" },
  { label: "Deep ink",       value: "#0A0E16" }
];

function hexToGlow(hex, a) {
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2), 16);
  const g = parseInt(h.slice(2,4), 16);
  const b = parseInt(h.slice(4,6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const tweaksEnabled = React.useMemo(() => {
    if (typeof window === 'undefined') return false;
    const p = new URLSearchParams(window.location.search);
    return p.has('tweaks');
  }, []);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-glow', hexToGlow(t.accent, 0.25));
    root.style.setProperty('--bg', t.background);
    if (t.density === 'compact') {
      root.style.setProperty('--gutter', '40px');
    } else if (t.density === 'comfy') {
      root.style.setProperty('--gutter', '72px');
    } else {
      root.style.setProperty('--gutter', '56px');
    }
    document.documentElement.classList.toggle('no-scrollhint', !t.showScrollHint);
  }, [t]);

  return (
    <React.Fragment>
      <style>{`
        .no-scrollhint .scrollhint{display:none}
      `}</style>

      <Nav/>
      <Hero variant={t.heroVariant}/>
      <Press/>
      <Paradigm/>
      <Device/>
      <InTheOR/>
      <Mechanism/>
      <Specs/>
      <Evidence/>
      <Perfusionists/>
      <FAQ/>
      <CTA/>
      <Foot/>

      {tweaksEnabled && (
      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakSelect
          label="Preset"
          value={t.accent}
          options={ACCENT_PRESETS.map(p => ({label: p.label, value: p.value}))}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakColor label="Custom" value={t.accent} onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Background" />
        <TweakSelect
          label="Tone"
          value={t.background}
          options={BG_PRESETS.map(p => ({label: p.label, value: p.value}))}
          onChange={(v) => setTweak('background', v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero"
          value={t.heroVariant}
          options={['studio','or']}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact','regular','comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakToggle
          label="Hero scroll hint"
          value={t.showScrollHint}
          onChange={(v) => setTweak('showScrollHint', v)}
        />
      </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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