// THE MOST — main app
const { useState: useStateApp, useEffect: useEffectApp } = React;

const APP_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "noir",
  "heroVariant": "editorial",
  "showSticky": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(APP_TWEAKS);
  const [bookingOpen, setBookingOpen] = useStateApp(false);
  const [bookingService, setBookingService] = useStateApp(null);

  // Apply palette tweak
  useEffectApp(() => {
    const root = document.documentElement;
    const palettes = {
      noir: {
        "--noir": "#14110E",
        "--ink": "#23201C",
        "--ivory": "#FAF6F1",
        "--bone": "#ECE3D7",
        "--blush": "#F1E5DE",
        "--gold": "#B89A66",
        "--gold-deep": "#927847",
        "--line": "#E8DED2",
        "--line-soft": "#F1E9DD",
      },
      mono: {
        "--noir": "#0F0F0F",
        "--ink": "#1C1C1C",
        "--ivory": "#FBFAF7",
        "--bone": "#EFEDE7",
        "--blush": "#E9E7E2",
        "--gold": "#7A7A7A",
        "--gold-deep": "#444444",
        "--line": "#E5E3DE",
        "--line-soft": "#F1EFEB",
      },
      blush: {
        "--noir": "#2A1F1F",
        "--ink": "#3E2E2E",
        "--ivory": "#FAF4F1",
        "--bone": "#F0E0DA",
        "--blush": "#EFD6CD",
        "--gold": "#B07E68",
        "--gold-deep": "#8C5C46",
        "--line": "#E8D6CE",
        "--line-soft": "#F4E7E1",
      },
    };
    const p = palettes[tweaks.palette] || palettes.noir;
    Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [tweaks.palette]);

  const openBooking = (svc) => {
    setBookingService(svc || null);
    setBookingOpen(true);
  };

  return (
    <>
      <Navbar onBook={() => openBooking()} />
      <Hero onBook={() => openBooking()} variant={tweaks.heroVariant}/>
      <TrustStrip/>
      <Signature onBook={openBooking}/>
      <Menu onBook={openBooking}/>
      <Heritage/>
      <Portfolio/>
      <Reviews/>
      <Stylists/>
      <Visit onBook={() => openBooking()}/>
      <Footer/>
      {tweaks.showSticky && <StickyBook onBook={() => openBooking()}/>}
      <BookingModal
        open={bookingOpen}
        onClose={() => setBookingOpen(false)}
        initialService={bookingService}
      />
      <TweaksPanel title="Tweaks" subtitle="Quick variations">
        <TweakSection title="Palette">
          <TweakRadio
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "noir", label: "Noir" },
              { value: "mono", label: "Mono" },
              { value: "blush", label: "Blush" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero image">
          <TweakSelect
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "editorial", label: "Editorial portrait (B&W)" },
              { value: "portrait", label: "Editorial — close" },
              { value: "banner", label: "Meet Your Self banner" },
              { value: "interior", label: "Storefront — d3" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle
            label="Sticky mobile book bar"
            value={tweaks.showSticky}
            onChange={(v) => setTweak("showSticky", v)}
          />
        </TweakSection>
        <TweakSection title="Try a flow">
          <TweakButton onClick={() => openBooking()}>Open booking modal</TweakButton>
          <TweakButton onClick={() => openBooking(window.SALON_DATA.signature[0])}>Open with Balayage preselected</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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