/* Template 3 - Re-Ignite Dental · Invisalign Open Day · app shell */
(function () {
  const e = React.createElement;
  const { useEffect } = React;
  const { T3A, T3B, T3C } = window;
  const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakColor, TweakText } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#2E93AD",
    "page": "#F7F8F9",
    "headline": "A confident new smile, up to £955 off in Hale",
    "showCountdown": true,
    "slots": 14,
    "eventISO": "2026-07-11T10:00"
  }/*EDITMODE-END*/;

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

    useEffect(() => {
      const r = document.documentElement.style;
      r.setProperty("--t3-ink", "#121221");
      r.setProperty("--t3-accent", t.accent);
      r.setProperty("--t3-gold", "#61AE98");
      r.setProperty("--t3-page", t.page);
      document.body.style.background = t.page;
    }, [t.accent, t.page]);

    useEffect(() => {
      const els = document.querySelectorAll(".t3-reveal");
      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 = {
      practice: "Re-Ignite Dental", city: "Hale", phone: "0333 200 8672",
      address: "Hale, Greater Manchester WA15",
      email: "enquiries@re-ignite.dental",
      video: "patient-journey.mp4",
      eventISO: t.eventISO, slots: t.slots, discount: 955,
      headline: t.headline, showCountdown: t.showCountdown,
    };

    return e(React.Fragment, null,
      e(T3A.Nav, { cfg }),
      e(T3A.Hero, { cfg }),
      e(T3A.HeroQuote, { cfg }),
      e(T3B.Trust, null),
      e(T3B.Offer, { cfg }),
      e(T3B.Gallery, null),
      e(T3B.VideoSlot, { cfg }),
      e(T3B.Flow, { cfg }),
      e(T3B.BeforeAfter, null),
      e(T3B.Why, { cfg }),
      e(T3C.Ortho, { cfg }),
      e(T3C.Finance, { cfg }),
      e(T3C.Reviews, null),
      e(T3C.FAQ, null),
      e(T3C.FinalCTA, { cfg }),
      e(T3C.Footer, { cfg }),
      e(T3C.StickyCTA, { cfg }),

      e(TweaksPanel, null,
        e(TweakSection, { label: "The open day" }),
        e(EventDate, { value: t.eventISO, onChange: (v) => setTweak("eventISO", v) }),
        e(TweakSlider, { label: "Places left", value: t.slots, min: 4, max: 40, step: 1, onChange: (v) => setTweak("slots", v) }),
        e(TweakToggle, { label: "Live countdown", value: t.showCountdown, onChange: (v) => setTweak("showCountdown", v) }),
        e(TweakSection, { label: "Hero" }),
        e(TweakText, { label: "Headline", value: t.headline, onChange: (v) => setTweak("headline", v) }),
        e(TweakSection, { label: "Look & feel" }),
        e(TweakColor, { label: "Accent", value: t.accent, options: ["#2E93AD", "#256A7B", "#61AE98"], onChange: (v) => setTweak("accent", v) }),
        e(TweakColor, { label: "Page", value: t.page, options: ["#F7F8F9", "#FFFFFF", "#EEF0F2"], onChange: (v) => setTweak("page", v) }),
      ),
    );
  }

  function EventDate({ value, onChange }) {
    return e("div", { style: { display: "flex", flexDirection: "column", gap: 6, padding: "8px 0" } },
      e("label", { style: { font: "500 12px/1 var(--font-poppins, sans-serif)", letterSpacing: ".3px", color: "#5C6573", textTransform: "uppercase" } }, "Date & time"),
      e("input", {
        type: "datetime-local", value, onChange: (ev) => onChange(ev.target.value),
        style: { border: "1px solid rgba(18,18,33,.2)", borderRadius: 8, padding: "9px 12px", font: "400 14px/1 var(--font-poppins, sans-serif)", color: "#121221", background: "#fff" },
      }),
    );
  }

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