// Main app — wires sections, hosts Tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "amber",
  "density": "regular",
  "showVideo": true,
  "showCalculator": true,
  "showParts": true,
  "showEquipment": true,
  "showMaterials": true,
  "showProcess": true,
  "showAbout": true,
  "showFAQ": true,
  "showMap": true,
  "showMarquee": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-accent', t.accent);
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.theme, t.accent, t.density]);

  return (
    <>
      <Nav />
      <Hero />
      {t.showMarquee && <Marquee />}
      <Capabilities />
      {t.showVideo && <VideoSection />}
      {t.showCalculator && <Calculator />}
      {t.showParts && <PartsCatalog />}
      {t.showEquipment && <Equipment />}
      {t.showMaterials && <MaterialsSection />}
      {t.showProcess && <Process />}
      {t.showAbout && <About />}
      {t.showFAQ && <FAQ />}
      {t.showMap && <MapSection />}
      <Contact />
      <Footer />

      <TweaksPanel title="Дизайн-настройки">
        <TweakSection label="Тема" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={[
            { value: 'amber', label: 'Amber' },
            { value: 'red', label: 'Red' },
            { value: 'steel', label: 'Steel' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'regular', label: 'Regular' },
            { value: 'comfy', label: 'Comfy' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Секции" />
        <TweakToggle label="Бегущая строка" value={t.showMarquee} onChange={(v) => setTweak('showMarquee', v)} />
        <TweakToggle label="Видео" value={t.showVideo} onChange={(v) => setTweak('showVideo', v)} />
        <TweakToggle label="Калькулятор" value={t.showCalculator} onChange={(v) => setTweak('showCalculator', v)} />
        <TweakToggle label="Каталог поковок" value={t.showParts} onChange={(v) => setTweak('showParts', v)} />
        <TweakToggle label="Оборудование" value={t.showEquipment} onChange={(v) => setTweak('showEquipment', v)} />
        <TweakToggle label="Материалы" value={t.showMaterials} onChange={(v) => setTweak('showMaterials', v)} />
        <TweakToggle label="Процесс" value={t.showProcess} onChange={(v) => setTweak('showProcess', v)} />
        <TweakToggle label="О компании" value={t.showAbout} onChange={(v) => setTweak('showAbout', v)} />
        <TweakToggle label="FAQ" value={t.showFAQ} onChange={(v) => setTweak('showFAQ', v)} />
        <TweakToggle label="Карта" value={t.showMap} onChange={(v) => setTweak('showMap', v)} />
      </TweaksPanel>
    </>
  );
}

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