// Hair by Gra — App entry
// Composes nav, sections, modal, and the Tweaks panel.

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "default",
  "display": "cormorant",
  "showBadge": true,
  "accent": "#b8935a"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#b8935a", // gold (default)
  "#e89aae", // deeper rose
  "#8c6a3e", // bronze
  "#1a1614"  // ink
];

function AppInner() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = useStateApp(false);
  const [menuOpen, setMenuOpen] = useStateApp(false);

  // Apply theme + display font to body
  useEffectApp(() => {
    document.body.dataset.theme = t.theme;
    document.body.dataset.display = t.display;
    document.documentElement.style.setProperty('--c-gold', t.accent);
  }, [t.theme, t.display, t.accent]);

  // Hide / show the gold "New clients" badge
  useEffectApp(() => {
    document.documentElement.style.setProperty(
      '--badge-display',
      t.showBadge ? 'grid' : 'none'
    );
    const badge = document.querySelector('.hero-image-wrap .badge');
    if (badge) badge.style.display = t.showBadge ? 'grid' : 'none';
  }, [t.showBadge]);

  // Lock body scroll while modal/menu open
  useEffectApp(() => {
    const lock = bookOpen || menuOpen;
    document.body.style.overflow = lock ? 'hidden' : '';
  }, [bookOpen, menuOpen]);

  const openBook = () => setBookOpen(true);

  return (
    <>
      <Nav onBook={openBook} onOpenMenu={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} onBook={openBook} />
      <main>
        <Hero onBook={openBook} />
        <Services onBook={openBook} />
        <Gallery />
        <Testimonial />
        <About />
        <Contact onBook={openBook} />
      </main>
      <Footer />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={[
            { value: "default", label: "Soft pink" },
            { value: "champagne", label: "Champagne" },
            { value: "rose-noir", label: "Rosé noir" }
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Typography" />
        <TweakRadio
          label="Display font"
          value={t.display}
          options={[
            { value: "cormorant", label: "Cormorant" },
            { value: "playfair", label: "Playfair" },
            { value: "italiana", label: "Italiana" }
          ]}
          onChange={(v) => setTweak('display', v)}
        />

        <TweakSection label="Hero" />
        <TweakToggle
          label="Show 'New clients' badge"
          value={t.showBadge}
          onChange={(v) => setTweak('showBadge', v)}
        />

        <TweakSection label="Actions" />
        <TweakButton onClick={openBook}>Open booking modal</TweakButton>
      </TweaksPanel>
    </>
  );
}

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