/* global React, ReactDOM, MEG_DATA,
   Nav, Hero, Marquee, About, Services, ServiceModal,
   Gallery, Testimonials, Instagram, FAQ, Visit, Footer,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle
*/
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "A",
  "accent": "#B8505E",
  "showMarquee": true,
  "showInstagram": true
}/*EDITMODE-END*/;

const ACCENTS = {
  // mapping accent hex -> {deep, blush, blush2}
  "#B8505E": { deep: "#9C4A5C", blush: "#F8E1E7", blush2: "#EFC9D2" }, // rose
  "#D17A8A": { deep: "#A85564", blush: "#FBEBED", blush2: "#F3D2D8" }, // soft blush
  "#7E2C3E": { deep: "#5C1B2A", blush: "#EFD9DC", blush2: "#DCB8BD" }, // wine
  "#E63E7A": { deep: "#B8285C", blush: "#FFE0EC", blush2: "#FFC1D8" }, // hot pink
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [overHero, setOverHero] = useState(true);
  const [modalSvc, setModalSvc] = useState(null);

  useEffect(() => {
    const onScroll = () => setOverHero(window.scrollY < window.innerHeight - 120);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute("data-direction", tweaks.direction);
    const a = ACCENTS[tweaks.accent] || ACCENTS["#B8505E"];
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--rose-deep", a.deep);
    document.documentElement.style.setProperty("--blush", a.blush);
    document.documentElement.style.setProperty("--blush-2", a.blush2);
  }, [tweaks.direction, tweaks.accent]);

  return (
    <>
      <Nav overHero={overHero} />
      <Hero />
      {tweaks.showMarquee && <Marquee />}
      <About />
      <Services onOpen={setModalSvc} />
      <Gallery />
      <Testimonials />
      {tweaks.showInstagram && <Instagram />}
      <FAQ />
      <Visit />
      <Footer />
      {modalSvc && <ServiceModal service={modalSvc} onClose={() => setModalSvc(null)} />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Direction">
          <TweakRadio
            label="Style"
            value={tweaks.direction}
            options={[
              { value: "A", label: "Clinical" },
              { value: "B", label: "Editorial" },
            ]}
            onChange={(v) => setTweak("direction", v)}
          />
          <div style={{fontSize: 11, color: "#777", marginTop: 8, lineHeight: 1.45, padding: "0 2px"}}>
            <strong>Clinical</strong> — cream + soft blush, Cormorant. Quieter.<br/>
            <strong>Editorial</strong> — warm rose-cream + Playfair. Magazine-y.
          </div>
        </TweakSection>

        <TweakSection title="Pink accent">
          <TweakColor
            label="Swatch"
            value={tweaks.accent}
            options={Object.keys(ACCENTS)}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection title="Sections">
          <TweakToggle
            label="Marquee strip"
            value={tweaks.showMarquee}
            onChange={(v) => setTweak("showMarquee", v)}
          />
          <TweakToggle
            label="Instagram feed"
            value={tweaks.showInstagram}
            onChange={(v) => setTweak("showInstagram", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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