/* app.jsx — root composition + tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "violet",
  "headlineStyle": "bold",
  "showFloats": true,
  "showStickyCta": true,
  "ctaLabel": "Reserve my free seat"
}/*EDITMODE-END*/;

const THEMES = {
  violet: { '--accent-1': '#6d28d9', '--accent-2': '#d946ef', '--accent-3': '#f97316', '--grad-hot': 'linear-gradient(95deg, #6d28d9 0%, #c026d3 45%, #f97316 100%)', '--grad-warm': 'linear-gradient(95deg, #f97316 0%, #fbbf24 100%)' },
  sunset: { '--accent-1': '#dc2626', '--accent-2': '#f97316', '--accent-3': '#fbbf24', '--grad-hot': 'linear-gradient(95deg, #dc2626 0%, #f97316 50%, #fbbf24 100%)', '--grad-warm': 'linear-gradient(95deg, #dc2626 0%, #fbbf24 100%)' },
  electric: { '--accent-1': '#0ea5e9', '--accent-2': '#8b5cf6', '--accent-3': '#ec4899', '--grad-hot': 'linear-gradient(95deg, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%)', '--grad-warm': 'linear-gradient(95deg, #8b5cf6 0%, #ec4899 100%)' },
  emerald: { '--accent-1': '#059669', '--accent-2': '#0d9488', '--accent-3': '#f59e0b', '--grad-hot': 'linear-gradient(95deg, #059669 0%, #0d9488 50%, #f59e0b 100%)', '--grad-warm': 'linear-gradient(95deg, #059669 0%, #f59e0b 100%)' },
};

// ── CHANGE DATE HERE ──────────────────────────────────────────
const WEBINAR_DATE_ISO   = '2026-05-09T17:00:00+05:30'; // date & time for countdown
const WEBINAR_DATE_LABEL = 'Saturday, May 09, 5:00 PM IST'; // display text
// ──────────────────────────────────────────────────────────────

window.WEBINAR_DATE = WEBINAR_DATE_LABEL;

function App(){
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = useStateApp(false);
  const [stickyVisible, setStickyVisible] = useStateApp(false);

  const target = React.useMemo(() => new Date(WEBINAR_DATE_ISO), []);

  // apply theme variables
  useEffectApp(() => {
    const root = document.documentElement;
    const t = THEMES[tweaks.theme] || THEMES.violet;
    Object.entries(t).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [tweaks.theme]);

  // toggle floats visibility
  useEffectApp(() => {
    document.querySelectorAll('.float-badge').forEach((el) => {
      el.style.display = tweaks.showFloats ? '' : 'none';
    });
  }, [tweaks.showFloats]);

  // sticky CTA visibility
  useEffectApp(() => {
    if(!tweaks.showStickyCta){ setStickyVisible(false); return; }
    const onScroll = () => {
      setStickyVisible(window.scrollY > 800);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [tweaks.showStickyCta]);

  const openModal  = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    <>
      <UrgencyBar target={target} onCta={openModal} />
      <Nav onCta={openModal} />
      <main>
        <Hero onCta={openModal} target={target} />
        <Relate />
        <Problem />
        <Comparison />
        <Solution />
        <Learn />
        <Agenda />
        <Takeaways />
        <Wins />
        <ShortsSection />
        <Testimonials />
        <Revenue />
        <Offer onCta={openModal} />
        <WhoFor />
        <Speaker />
        <Industries />
        <Faq />
        <FinalCta onCta={openModal} target={target} />
      </main>
      <Footer />

      <StickyCta visible={stickyVisible} onCta={openModal} target={target} />
      <RegisterModal open={modalOpen} onClose={closeModal} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakSelect
            label="Color palette"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'violet', label: 'Violet → Magenta → Orange (default)' },
              { value: 'sunset', label: 'Sunset (red → amber)' },
              { value: 'electric', label: 'Electric (cyan → pink)' },
              { value: 'emerald', label: 'Emerald (green → amber)' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakToggle
            label="Floating stat badges"
            value={tweaks.showFloats}
            onChange={(v) => setTweak('showFloats', v)}
          />
        </TweakSection>

        <TweakSection label="Conversion">
          <TweakToggle
            label="Sticky bottom CTA bar"
            value={tweaks.showStickyCta}
            onChange={(v) => setTweak('showStickyCta', v)}
          />
          <TweakButton label="Open Registration" onClick={openModal} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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