/* September offer app shell: cfg + Tweaks + mount. */
(function () {
  const e = React.createElement;
  const { useEffect } = React;
  const SO = window.SO;
  const { useTweaks, TweaksPanel, TweakSection, TweakNumber, TweakText, TweakColor } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "ink": "#14352a",
    "gold": "#c8a44a",
    "page": "#f2eedf",
    "price": 35,
    "wasPrice": 95,
    "dateline": "Available 1st to 30th September only - limited appointments"
  }/*EDITMODE-END*/;

  const LOCATION = {
    practice: "De-ientes Family Dental Group",
    location: "Bedford",
    city: "Bedford",
    phone: "01234 263 050",
    address: "28 Lurke St, Bedford MK40 3HU",
    thankYou: "/thank-you",
    runsLine: "This offer runs from 1st to 30th September only, and appointments are limited.",
  };

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

    useEffect(() => {
      const r = document.documentElement.style;
      r.setProperty("--t3-ink", t.ink);
      r.setProperty("--t3-accent", `color-mix(in srgb, ${t.ink} 72%, #4f7c4a)`);
      r.setProperty("--t3-gold", t.gold);
      r.setProperty("--t3-page", t.page);
      document.body.style.background = t.page;
    }, [t.ink, t.gold, t.page]);

    useEffect(() => {
      const els = document.querySelectorAll(".t3-reveal:not(.in)");
      if (!("IntersectionObserver" in window)) { els.forEach(x => x.classList.add("in")); return; }
      const io = new IntersectionObserver((ents) => {
        ents.forEach(x => { if (x.isIntersecting) { x.target.classList.add("in"); io.unobserve(x.target); } });
      }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
      els.forEach(x => io.observe(x));
      return () => io.disconnect();
    });

    const cfg = Object.assign({}, LOCATION, { price: t.price, wasPrice: t.wasPrice, dateline: t.dateline });

    return e(React.Fragment, null,
      e(SO.Nav, { cfg }),
      e(SO.Hero, { cfg }),
      e(SO.HeroQuote, null),
      e(SO.Offer, { cfg }),
      e(SO.Calm, null),
      e(SO.Flow, null),
      e(SO.Find, null),
      e(SO.Why, null),
      e(SO.Pricing, { cfg }),
      e(SO.Explainer, null),
      e(SO.Reviews, null),
      e(SO.FAQ, null),
      e(SO.FinalCTA, { cfg }),
      e(SO.Footer, { cfg }),
      e(SO.StickyCTA, { cfg }),

      e(TweaksPanel, null,
        e(TweakSection, { label: "The offer" }),
        e(TweakNumber, { label: "Offer price", value: t.price, min: 0, max: 500, step: 1, unit: "£", onChange: (v) => setTweak("price", v) }),
        e(TweakNumber, { label: "Usual price", value: t.wasPrice, min: 0, max: 500, step: 1, unit: "£", onChange: (v) => setTweak("wasPrice", v) }),
        e(TweakText, { label: "Hero date line", value: t.dateline, onChange: (v) => setTweak("dateline", v) }),
        e(TweakSection, { label: "Look & feel" }),
        e(TweakColor, { label: "Ink", value: t.ink, options: ["#14352a", "#1d4734", "#205036", "#2c322c"], onChange: (v) => setTweak("ink", v) }),
        e(TweakColor, { label: "Accent", value: t.gold, options: ["#c8a44a", "#b8893a", "#759d55"], onChange: (v) => setTweak("gold", v) }),
        e(TweakColor, { label: "Page", value: t.page, options: ["#f2eedf", "#f7f5ea", "#ecefe1", "#eeeae0"], onChange: (v) => setTweak("page", v) })));
  }

  ReactDOM.createRoot(document.getElementById("root")).render(e(App));
})();