// App.jsx — main entry for ООО «РЕЗЕРВ» site

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "displayFont": "PT Serif"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [section, setSection] = React.useState('home');
  const [acc, setAcc] = React.useState(false);
  const [a11y, setA11y, setA11yAll] = useA11y();
  const [modal, setModal] = React.useState(false);

  React.useEffect(() => {
    applyA11y(acc, a11y);
  }, [acc, a11y]);

  React.useEffect(() => {
    const root = document.documentElement;
    const accentMap = {
      gold:    { gold: '#b8860b', goldSoft: '#c9a961' },
      burgundy:{ gold: '#7c1e1e', goldSoft: '#a04a4a' },
      navy:    { gold: '#1f3a66', goldSoft: '#4a679a' },
      olive:   { gold: '#6b6321', goldSoft: '#9a9356' },
    };
    const c = accentMap[t.accent] || accentMap.gold;
    root.style.setProperty('--gold', c.gold);
    root.style.setProperty('--gold-soft', c.goldSoft);
    root.style.setProperty('--display-font', `'${t.displayFont}'`);
  }, [t.accent, t.displayFont]);

  const openContact = () => setModal(true);

  // Renders for individual nav sections (focused view)
  const renderSection = () => {
    const map = {
      about: <AboutPillars />,
      activities: <Activities />,
      procurement: <Procurement />,
      documents: <Documents />,
      contacts: <Contacts onContactClick={openContact} />,
    };
    return map[section] || null;
  };

  return (
    <>
      <A11yBar
        open={acc}
        settings={a11y}
        setOne={setA11y}
        onClose={() => setAcc(false)}
      />
      <UtilityBar acc={acc} setAcc={setAcc} onContactClick={openContact} setSection={setSection} />
      <CrestBar setSection={setSection} />
      <NavBar section={section} setSection={setSection} acc={acc} setAcc={setAcc} />
      <Breadcrumb section={section} />
      {section === 'home' ? (
        <>
          <Hero />
          <WelcomeBlock />
          <AboutPillars />
          <Activities />
          <Procurement />
          <Documents />
          <Contacts onContactClick={openContact} />
        </>
      ) : (
        renderSection()
      )}
      <Footer setSection={setSection} />
      <ContactModal open={modal} onClose={() => setModal(false)} />

      <TweaksPanel>
        <TweakSection label="Оформление" />
        <TweakColor
          label="Акцентный цвет"
          value={t.accent === 'gold' ? '#b8860b' : t.accent === 'burgundy' ? '#7c1e1e' : t.accent === 'navy' ? '#1f3a66' : '#6b6321'}
          options={['#b8860b', '#7c1e1e', '#1f3a66', '#6b6321']}
          onChange={v => {
            const map = { '#b8860b': 'gold', '#7c1e1e': 'burgundy', '#1f3a66': 'navy', '#6b6321': 'olive' };
            setTweak('accent', map[v]);
          }}
        />
        <TweakSelect
          label="Заголовочный шрифт"
          value={t.displayFont}
          options={['PT Serif', 'Lora', 'Source Serif Pro', 'Spectral', 'Merriweather']}
          onChange={v => setTweak('displayFont', v)}
        />
      </TweaksPanel>
    </>
  );
}

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