/* eslint-disable */
// App shell — Direct Group × Molekula readout

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": 1,
  "font": "jakarta",
  "grain": true
}/*EDITMODE-END*/;

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

  // Apply density to root
  useEffect(() => {
    document.documentElement.style.setProperty("--density", String(tweaks.density));
  }, [tweaks.density]);

  // Apply font to root
  useEffect(() => {
    const root = document.documentElement;
    const stacks = {
      jakarta: '"Direct Sans", "Plus Jakarta Sans", -apple-system, sans-serif',
      manrope: '"Direct Sans", "Manrope", -apple-system, sans-serif',
      system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
      mono: '"JetBrains Mono", ui-monospace, Menlo, monospace',
    };
    root.style.setProperty("--font-sans", stacks[tweaks.font] || stacks.jakarta);
    // Lazy-load alternate fonts when picked
    if (tweaks.font === "manrope" && !document.getElementById("font-manrope")) {
      const l = document.createElement("link");
      l.id = "font-manrope";
      l.rel = "stylesheet";
      l.href = "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap";
      document.head.appendChild(l);
    }
  }, [tweaks.font]);

  // Toggle grain on body
  useEffect(() => {
    document.body.classList.toggle("no-grain", !tweaks.grain);
  }, [tweaks.grain]);

  return (
    <>
      <window.Nav />
      <window.Hero />
      <window.Diagnosis />
      <window.TransformationAxis />
      <window.BrandDossiers />
      <window.Modules />
      <window.Roadmap />
      <window.Outputs />
      <window.Footer />

      <TweaksPanel title="Tweaks · Readout">
        <TweakSection label="Typografie">
          <TweakRadio
            label="Font"
            value={tweaks.font}
            onChange={(v) => setTweak("font", v)}
            options={[
              { value: "jakarta", label: "Jakarta" },
              { value: "manrope", label: "Manrope" },
              { value: "system", label: "System" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakSlider
            label="Hustota"
            min={0.7}
            max={1.3}
            step={0.05}
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            unit="×"
          />
          <TweakToggle
            label="Grain"
            value={tweaks.grain}
            onChange={(v) => setTweak("grain", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Add no-grain rule
const sheet = document.createElement("style");
sheet.textContent = `
  body.no-grain .axis-col--molekula::after,
  body.no-grain .cta-slab::before { display: none; }
`;
document.head.appendChild(sheet);

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