/* Park Lane Orthodontics - back to school children's offer. App shell + tweaks. */
(function () {
  const { useReveal, useTweaks, TweaksPanel, TweakSection, TweakToggle, TweakText, TweakNumber, TweakSelect } = window;
  const { PLHeader, PLHero, PLUspStrip, PLReviews, PhotoBreak, PLPackage, PLWhyParents,
          PLSteps, PLSpecialists, PLBenefits, PLCost, PLTreatments, PLFaq, PLFinalCTA,
          PLFooter, PLMobileCTA, PLBand } = window;

  const HEADLINES = {
    "£500 off children's braces": {
      h1: [React.createElement("span", { className: "hl-accent", key: "a" }, "£500 off"), " children's braces and aligners this August"],
      sub: "A straighter smile, starting this school year, planned by our specialist orthodontists.",
    },
    "A straighter smile by September": {
      h1: ["A straighter smile by ", React.createElement("span", { className: "hl-accent", key: "a" }, "September"), ", planned by specialists"],
      sub: "Start your child's treatment this summer and save £500, with a first specialist consultation at half price.",
    },
    "Start their treatment this August": {
      h1: ["Start their treatment this August and save ", React.createElement("span", { className: "hl-accent", key: "a" }, "£500")],
      sub: "Specialist orthodontic care for children aged 10 to 17 in Reading, with a 3D scan that shows their new smile before it begins.",
    },
  };

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "headline": "£500 off children's braces",
    "discount": 500,
    "consultPrice": 75,
    "consultUsual": 150,
    "packageValue": "1,130",
    "retainerValue": 370,
    "reviewValue": 185,
    "rating": "4.9",
    "reviewCount": 260,
    "offerEnds": "Friday 28th August 2026",
    "showStickyCTA": true
  }/*EDITMODE-END*/;

  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    useReveal();
    const hl = HEADLINES[t.headline] || HEADLINES["£500 off children's braces"];
    const cfg = {
      practice: "Park Lane Orthodontics", city: "Reading",
      phone: "0118 941 1628", tel: "01189411628",
      address: "65 Park Lane, Tilehurst, Reading, RG31 5DP",
      email: "smiles@parklaneorthodontics.co.uk",
      headline: hl.h1, subline: hl.sub,
      dateline: "Start treatment before " + t.offerEnds.replace(/^Friday /, ""),      discount: t.discount, consultPrice: t.consultPrice, consultUsual: t.consultUsual,
      packageValue: t.packageValue, retainerValue: t.retainerValue, reviewValue: t.reviewValue,
      rating: t.rating, reviewCount: t.reviewCount, offerEnds: t.offerEnds,
      showStickyCTA: t.showStickyCTA,
      /* Real Google reviews: [quote, name, meta, isFeatured] */
      reviews: [
        ["They are fantastic. Really clear communication. Everyone has been so friendly and kind. My daughter was a bit nervous to get braces but they put her at ease and have made her feel comfortable. She managed to pop a bracket off and they got her back in and fixed it up. Really appreciate the great team.", "Lauren", "Parent of a patient", true],
        ["I've had a great experience at this orthodontic practice. The entire team made me feel welcome and comfortable. The staff are incredibly friendly, professional, and always willing to help with any questions or concerns. They truly go above and beyond to make every visit a positive one.", "Calum", "Google review", false],
      ],
    };
    return (
      <React.Fragment>
        <PLHeader cfg={cfg} />
        <PLHero cfg={cfg} />
        <PLUspStrip cfg={cfg} />
        <PLReviews cfg={cfg} />
        <PhotoBreak src="assets/pl-team-selfie.jpg" alt="The team at Park Lane Orthodontics in reception" pos="center 34%" award="assets/pl-award-clinical-case-2022.png" />
        <PLPackage cfg={cfg} />
        <PLWhyParents />
        <PhotoBreak src="assets/pl-consultation-room.jpg" alt="A treatment coordinator talking a parent and her daughter through their options at Park Lane Orthodontics" pos="center 42%" twoThirds parallax />
        <PLSteps cfg={cfg} />
        <PLSpecialists />
        <PLBand cfg={cfg} />
        <PLBenefits cfg={cfg} />
        <PLCost cfg={cfg} />
        <PLTreatments />
        <PLFaq cfg={cfg} />
        <PLFinalCTA cfg={cfg} />
        <PLFooter cfg={cfg} />
        <PLMobileCTA cfg={cfg} />
        <TweaksPanel>
          <TweakSection label="Hero headline" />
          <TweakSelect label="Headline" value={t.headline} options={Object.keys(HEADLINES)} onChange={(v) => setTweak("headline", v)} />
          <TweakSection label="The offer (£)" />
          <TweakNumber label="Discount off treatment" value={t.discount} min={0} max={2000} step={50} unit="£" onChange={(v) => setTweak("discount", v)} />
          <TweakNumber label="Consultation price" value={t.consultPrice} min={0} max={500} step={5} unit="£" onChange={(v) => setTweak("consultPrice", v)} />
          <TweakNumber label="Consultation usual price" value={t.consultUsual} min={0} max={500} step={5} unit="£" onChange={(v) => setTweak("consultUsual", v)} />
          <TweakText label="Total package value" value={t.packageValue} placeholder="1,130" onChange={(v) => setTweak("packageValue", v)} />
          <TweakNumber label="Retainers worth" value={t.retainerValue} min={0} max={1000} step={5} unit="£" onChange={(v) => setTweak("retainerValue", v)} />
          <TweakNumber label="Review retainer worth" value={t.reviewValue} min={0} max={1000} step={5} unit="£" onChange={(v) => setTweak("reviewValue", v)} />
          <TweakSection label="Trust & dates" />
          <TweakText label="Google rating" value={t.rating} placeholder="4.9" onChange={(v) => setTweak("rating", v)} />
          <TweakNumber label="Review count" value={t.reviewCount} min={0} max={5000} step={10} onChange={(v) => setTweak("reviewCount", v)} />
          <TweakText label="Offer ends" value={t.offerEnds} placeholder="Friday 28th August 2026" onChange={(v) => setTweak("offerEnds", v)} />
          <TweakSection label="Layout" />
          <TweakToggle label="Sticky CTA (mobile)" value={t.showStickyCTA} onChange={(v) => setTweak("showStickyCTA", v)} />
        </TweaksPanel>
      </React.Fragment>
    );
  }
  ReactDOM.createRoot(document.getElementById("app")).render(React.createElement(App));
})();