/* ============================================================
   app.jsx — compose page + seasonal/theme tweaks + render
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "season": "panim",
  "accent": ["#e8633f", "#1f9d8f", "#f2b134"],
  "heading": "Secular One",
  "round": true,
  "announce": "משלוח עד הבית ב-35 ₪ · בקנייה מעל 99 ₪ משלוח ב-20 ₪ בלבד · אספקה 3-5 ימי עסקים"
}/*EDITMODE-END*/;

function applyTheme(t) {
  const root = document.documentElement;
  const [a, b, c] = t.accent;
  root.style.setProperty('--accent', a);
  root.style.setProperty('--accent-2', b);
  root.style.setProperty('--accent-3', c);
  root.style.setProperty('--rad', t.round ? '22px' : '6px');
  root.style.setProperty('--rad-sm', t.round ? '14px' : '4px');
  root.style.setProperty('--font-head', `"${t.heading}", "Rubik", sans-serif`);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTheme(t); }, [t.accent, t.round, t.heading]);

  const camp = STData.CAMPAIGNS[t.season] || STData.CAMPAIGNS.panim;

  return (
    <CartProvider>
      <ModalProvider>
      <div className={'page season-' + camp.id}>
        <AnnounceSetter text={t.announce} />
        <Header camp={camp} />
        <main>
          <Hero camp={camp} />
          <TrustStrip />
          <WhySection />
          <ProductsSection camp={camp} />
          <MagicSection />
          <Testimonials />
          <Gallery />
          <About />
          <FAQ />
          <FinalCTA camp={camp} />
        </main>
        <Footer />
        <FloatingCTA camp={camp} />
        <CartDrawer />
        <ProductModal />
        <SuccessOverlay />
      </div>

      <TweaksPanel>
        <TweakSection label="פוקוס האתר" />
        <TweakRadio label="קמפיין פעיל" value={t.season}
          options={[{ value: 'panim', label: 'ספר הפנים' }, { value: 'heroes', label: 'הגיבורים' }, { value: 'pesach', label: 'פסח' }, { value: 'soldier', label: 'החייל שלי' }]}
          onChange={(v) => setTweak('season', v)} />

        <TweakSection label="מראה" />
        <TweakColor label="צבעי מותג" value={t.accent}
          options={[
            ['#e8633f', '#1f9d8f', '#f2b134'],
            ['#7a5ae0', '#e8633f', '#f2b134'],
            ['#1f9d8f', '#e8633f', '#f2b134'],
            ['#d6336c', '#1f9d8f', '#f2b134'],
          ]}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSelect label="גופן כותרות" value={t.heading}
          options={['Secular One', 'Rubik', 'Suez One', 'Heebo']}
          onChange={(v) => setTweak('heading', v)} />
        <TweakToggle label="פינות מעוגלות" value={t.round}
          onChange={(v) => setTweak('round', v)} />

        <TweakSection label="פס עליון" />
        <TweakText label="טקסט הכרזה" value={t.announce}
          onChange={(v) => setTweak('announce', v)} />
      </TweaksPanel>
      </ModalProvider>
    </CartProvider>
  );
}

/* sets the announcement bar text imperatively (lives in Header markup) */
function AnnounceSetter({ text }) {
  useEffect(() => {
    const el = document.querySelector('.ann-bar');
    if (el) el.textContent = text;
  }, [text]);
  return null;
}

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