// Ciphryn - App composer + Tweaks panel
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3D7AFF",
  "accent2": "#5EE6FF",
  "bg": "#06080F",
  "fontPair": "modern",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweak variables to :root
  useEffectApp(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-hi', shade(t.accent, 0.25));
    r.setProperty('--accent-soft', hexA(t.accent, 0.14));
    r.setProperty('--accent-line', hexA(t.accent, 0.38));
    r.setProperty('--accent-glow', hexA(t.accent, 0.55));
    r.setProperty('--accent-2', t.accent2);
    r.setProperty('--bg', t.bg);
    if (t.fontPair === 'mono') {
      r.setProperty('--font-display', "'JetBrains Mono', monospace");
      r.setProperty('--font-body', "'JetBrains Mono', monospace");
    } else if (t.fontPair === 'serif') {
      r.setProperty('--font-display', "'Fraunces', Georgia, serif");
      r.setProperty('--font-body', "'Space Grotesk', sans-serif");
    } else {
      r.setProperty('--font-display', "'Space Grotesk', sans-serif");
      r.setProperty('--font-body', "'Space Grotesk', sans-serif");
    }
  }, [t]);

  return (
    <>
      <Nav />
      <Hero />
      <Problem />
      <ThreeModes />
      <Coverage />
      <Methodology />
      <InsideAi />
      <DedupeNoise />
      <Reports />
      <Pricing />
      <About />
      <CTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={['#3D7AFF','#B8F02A','#FF4F8A','#5EE6FF','#9D6BFF']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="Secondary" value={t.accent2}
          options={['#5EE6FF','#B8F02A','#FFB86F','#6EFFB1','#FF6F8E']}
          onChange={(v) => setTweak('accent2', v)} />
        <TweakColor label="Background" value={t.bg}
          options={['#06080F','#000000','#0B0F1F','#0E0B14']}
          onChange={(v) => setTweak('bg', v)} />
        <TweakSection label="Type" />
        <TweakRadio label="Font pair" value={t.fontPair}
          options={['modern','mono','serif']}
          onChange={(v) => setTweak('fontPair', v)} />
      </TweaksPanel>
    </>
  );
}

// helpers
function hexA(hex, a) {
  const m = hex.replace('#','');
  const r = parseInt(m.slice(0,2),16), g = parseInt(m.slice(2,4),16), b = parseInt(m.slice(4,6),16);
  return `rgba(${r},${g},${b},${a})`;
}
function shade(hex, amt) {
  const m = hex.replace('#','');
  let r = parseInt(m.slice(0,2),16), g = parseInt(m.slice(2,4),16), b = parseInt(m.slice(4,6),16);
  r = Math.min(255, Math.round(r + (255-r) * amt));
  g = Math.min(255, Math.round(g + (255-g) * amt));
  b = Math.min(255, Math.round(b + (255-b) * amt));
  return `rgb(${r},${g},${b})`;
}

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