// axios estate — main app

const { useState, useEffect } = React;

function App() {
  const defaults = window.useTweaks(/*EDITMODE-BEGIN*/{
    "heroVariant": "invest",
    "cardStyle": "grid",
    "formVariant": "modal"
  }/*EDITMODE-END*/);
  const tweaks = defaults[0];
  const setTweak = defaults[1];

  const [drawerProject, setDrawerProject] = useState(null);
  const [contactOpen, setContactOpen] = useState(false);
  const [contactProjectId, setContactProjectId] = useState(null);
  const [toast, setToast] = useState(null);

  const openContact = (projectId = null) => {
    setContactProjectId(projectId);
    setContactOpen(true);
  };

  const handleSubmit = (data) => {
    console.log('Lead submitted:', data);
    setContactOpen(false);
    setToast('Заявка принята. Свяжемся в течение 30 минут.');
    setTimeout(() => setToast(null), 4000);
  };

  // smooth scroll
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        window.scrollTo({ top: el.offsetTop - 64, behavior: 'smooth' });
      }
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <>
      <window.Header onContact={() => openContact()} />
      <window.Hero variant={tweaks.heroVariant} onPrimary={() => openContact()} />
      <window.Advantages />
      <window.Projects
        cardStyle={tweaks.cardStyle}
        onOpenProject={(p) => setDrawerProject(p)}
        onContact={() => openContact()}
      />
      <window.MapSection onOpenProject={(p) => setDrawerProject(p)} />
      <window.About />
      <window.FAQ onContact={() => openContact()} />
      <window.Contact onSubmit={handleSubmit} />
      <window.Footer />

      <window.FAB onContact={() => openContact()} />
      <window.ProjectDrawer
        project={drawerProject}
        onClose={() => setDrawerProject(null)}
        onContact={(pid) => { setDrawerProject(null); openContact(pid); }}
      />
      <window.ContactModal
        open={contactOpen}
        onClose={() => setContactOpen(false)}
        onSubmit={handleSubmit}
        projectId={contactProjectId}
        formVariant={tweaks.formVariant}
      />
      <window.CookieBanner />
      <window.Toast show={!!toast} message={toast} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Hero">
          <window.TweakRadio
            label="Заголовок и CTA"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'invest', label: 'Инвест' },
              { value: 'prp', label: 'ВНЖ' },
              { value: 'yield', label: 'Доход' },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Карточка проекта">
          <window.TweakRadio
            label="Стиль"
            value={tweaks.cardStyle}
            onChange={(v) => setTweak('cardStyle', v)}
            options={[
              { value: 'grid', label: 'Плотная' },
              { value: 'editorial', label: 'Editorial' },
              { value: 'minimal', label: 'Минимум' },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Форма «Связаться»">
          <window.TweakRadio
            label="Подача"
            value={tweaks.formVariant}
            onChange={(v) => setTweak('formVariant', v)}
            options={[
              { value: 'modal', label: 'Модал' },
              { value: 'drawer', label: 'Drawer' },
            ]}
          />
          <div style={{ fontSize: 11, color: '#737373', lineHeight: 1.5, marginTop: 8 }}>
            Inline-форма всегда видна в секции «Контакты». Тут переключается только всплывающая (CTA-кнопки в шапке, hero, FAB, FAQ).
          </div>
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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