/* Template 3 - Golders Green 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-25T09:00",
    "slots": 11,
    "placesLeft": 8
  }/*EDITMODE-END*/;

  const LOCATION = {
    practice: "De-ientes Family Dental Group",
    brandShort: "De-ientes",
    location: "Golders Green",
    city: "Golders Green",
    phone: "020 8731 9020",
    email: "reception@de-ientesdental.co.uk",
    address: "771 Finchley Road, NW11 8DN",
    parking: "We're on Finchley Road with parking nearby and excellent transport links, including Golders Green Underground close by. When we confirm your slot, we'll happily point you to the easiest place to park.",
    thankYou: "/thankyou-goldersgreen",
    basePath: "/goldersgreen",
    financeTerm: "up to 24 months",
    rating: "4.9",
    reviewCount: "149",
    miniReview: { text: "So pleased with the final outcome.", name: "Heather J." },
    heroQuote: {
      text: "Thank you so much Dr Saroshen and the whole team at De-ientes Dental for the amazing treatment I received during the alignment of my teeth with ceramic braces. I am so pleased with the final outcome, and with the overall care I've received. The practice always has a welcoming and calm vibe with a very friendly team.",
      name: "Heather Jackson",
    },
    reviews: [
      { text: "Dr Saroshen Naidoo really listens to his patients and goes above and beyond for them. My teeth are so straight now from my braces and Invisalign. I would recommend this dental practice.", name: "V (Local Guide)" },
      { text: "Excellent service and results! The dentist was professional, caring, and made my braces journey smooth and comfortable. I'm thrilled with the outcome — highly recommend!", name: "Andrea Rozsnyai" },
      { text: "Dr Naidoo recently performed a smile restoration for me and I could not be happier! Braces and then composite bonding. His attention to detail, care for his patients and the time he put aside to ensure that the work is of a very high standard.", name: "Scott Wadsworth" },
    ],
  };

  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();
  });

  useEffect(() => {
  const handleAnchorClick = (e) => {
    const href = e.currentTarget.getAttribute('href');
    // Extract the hash portion (works with or without basePath prefix)
    const hash = href.includes('#') ? '#' + href.split('#')[1] : null;
    if (!hash) return;

    const target = document.querySelector(hash);
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  const anchors = [];
  document.querySelectorAll('a[href*="#"]').forEach((a) => {
    // Still fix the href for basePath if needed
    if (LOCATION.basePath && a.getAttribute('href').startsWith('#')) {
      a.setAttribute('href', LOCATION.basePath + a.getAttribute('href'));
    }
    a.addEventListener('click', handleAnchorClick);
    anchors.push(a);
  });

  return () => {
    anchors.forEach((a) => a.removeEventListener('click', handleAnchorClick));
  };
}, []);

  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));
})();