/* Template 3 - Bedford app shell: location cfg + Tweaks + mount */
(function () {
  const e = React.createElement;
  const { useEffect } = React;
  const { T3A, T3B, T3C } = window;
  const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakColor } = window;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "ink": "#14352a",
    "gold": "#c8a44a",
    "page": "#f2eedf",
    "eventISO": "2026-07-18T09:00",
    "slots": 11,
    "placesLeft": 8
  }/*EDITMODE-END*/;

  const LOCATION = {
    practice: "De-ientes Family Dental Group",
    brandShort: "De-ientes",
    location: "Bedford",
    city: "Bedford",
    phone: "01234 263 050",
    email: "info@de-ientes.co.uk",
    address: "Old Gaston House, 28 Lurke Street, MK40 3HU",
    parking: "We're in central Bedford with public car parks a short walk away and good bus links. When we confirm your slot, we'll happily talk you through the easiest way to arrive and park.",
    thankYou: "/thankyou-bedford",
    financeTerm: "up to 12 months",
    rating: "4.8",
    reviewCount: "115",
    miniReview: { text: "My teeth look amazing.", name: "Katie J." },
    heroQuote: {
      text: "10/10 dentist! I had teeth straightening treatment with Saroshen (lingual brace and thereafter clear aligners). My teeth look amazing. So grateful to Saroshen and the team. The reception staff are so friendly also — especially Kiri. Thank you, all!",
      name: "Katie Jones",
    },
    reviews: [
      { text: "I've recently finished Orthodontic treatment with Saroshen and I am over the moon with the result. Saroshen explained everything very clearly at each stage which really put my mind at ease. Highly recommended and a true professional of his field.", name: "Oliver Endersby" },
      { text: "I am so happy with the level of care we have been given at De-ientes — in particular for my children who can sometimes be a little fearful but Rahil is so good with them and makes them feel totally at ease. My husband and I have also both recently seen Saroshen and I now have perfectly straight teeth! Very highly recommend!", name: "Tanveer Kendal" },
      { text: "I always receive the very best care from Dr Saroshen Naidoo when I visit De-ientes Dental Practice in Bedford. He is an exceptional dentist — the very best I have ever had treatment from. Thank you.", name: "Hilary Flower" },
    ],
  };

  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");
      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, { eventISO: t.eventISO, slots: t.slots, placesLeft: t.placesLeft });

    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(T3B.Treatments, null),
      e(T3C.Reviews, { cfg }),
      e(T3C.FAQ, { cfg }),
      e(T3C.FinalCTA, { cfg }),
      e(T3C.Footer, { cfg }),
      e(T3C.StickyCTA, { cfg }),

      e(TweaksPanel, null,
        e(TweakSection, { label: "The event" }),
        e(EventDate, { value: t.eventISO, onChange: (v) => setTweak("eventISO", v) }),
        e(TweakSlider, { label: "Total slots", value: t.slots, min: 4, max: 40, step: 1, onChange: (v) => setTweak("slots", v) }),
        e(TweakSlider, { label: "Places left (counter)", value: t.placesLeft, min: 1, max: 40, step: 1, onChange: (v) => setTweak("placesLeft", 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) }),
      ),
    );
  }

  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: "#5a625a", textTransform: "uppercase" } }, "Date & time"),
      e("input", {
        type: "datetime-local", value, onChange: (ev) => onChange(ev.target.value),
        style: { border: "1px solid rgba(20,53,42,.2)", borderRadius: 8, padding: "9px 12px", font: "400 14px/1 var(--font-poppins, sans-serif)", color: "#1d4734", background: "#fff" },
      }),
    );
  }

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