/* Park Lane Orthodontics - Back to school children's offer landing page.
   Closing sections: how the offer works, the specialist orthodontists,
   why families choose the practice, the cost, the treatments explained,
   FAQs, final CTA, footer and the sticky mobile bar. */
(function () {
  const { useState } = React;
  const { Btn, Stars, SHead } = window;
  const { useScrolled } = window;
  const Icon = window.Icon;

  /* ---- How the August offer works (navy band, 5 steps) ---- */
  const PLSteps = ({ cfg }) => {
    const steps = [
      ["Register their interest", "Send the form and we will call you back to arrange a time that suits."],
      ["Come in for the £" + cfg.consultPrice + " consultation", "A 3D iTero scan, any x-rays needed, and time with your orthodontist."],
      ["See the plan", "And where the case is suitable, a preview of the finished smile before anything begins."],
      ["Choose the treatment", "Start in August to lock in the £" + cfg.discount + " saving."],
      ["We look after the smile", "All the way through, and for a full year after treatment ends."],
    ];
    return React.createElement("section", { className: "section teal", id: "how" },
      React.createElement("div", { className: "wrap" },
        React.createElement(SHead, { center: true, onDark: true, eyebrow: "How it works",
          title: "How the August offer works",
          sub: "Five simple steps from first enquiry to a straighter smile." }),
        React.createElement("div", { className: "flow" },
          steps.map(([t, s], i) =>
            React.createElement("div", { className: "fstep reveal", key: i },
              React.createElement("div", { className: "fstep__n" }, i + 1),
              React.createElement("h4", { className: "fstep__t" }, t),
              React.createElement("p", { className: "fstep__s" }, s)))),
      ),
    );
  };

  /* ---- Cared for by specialist orthodontists ---- */
  const PLSpecialists = () => {
    const people = [
      { name: "Shivani Patel", role: "Specialist & consultant orthodontist",
        img: "assets/pl-team-shivani-award.jpg", pos: "center 22%",
        alt: "Shivani Patel, specialist orthodontist at Park Lane Orthodontics, with her Dentistry Top 50 award",
        d: "Shivani is leading the consultations for this offer. She is a specialist orthodontist and consultant orthodontist, a Diamond Apex Invisalign provider, and was named in the Dentistry Top 50 in both 2022 and 2023. She plans treatment around the whole face, not just the teeth, and is known for careful, considered work." },
      { name: "Ben Buffham", role: "Specialist orthodontist & partner",
        img: "assets/pl-team-ben-buffham.jpg", pos: "center 52%",
        alt: "Ben Buffham, specialist orthodontist and partner at Park Lane Orthodontics",
        d: "Ben is a specialist orthodontist and a partner at the practice, registered with the GDC (number 69390). Having helped hundreds of patients to straighter smiles, he has a particular interest in the more complex cases - missing and impacted teeth, and treatment that needs several dental teams working together." },
    ];
    return React.createElement("section", { className: "section white", id: "specialists" },
      React.createElement("div", { className: "wrap" },
        React.createElement(SHead, { center: true, eyebrow: "Your clinical team",
          title: "Cared for by specialist orthodontists",
          sub: "Your child is treated by a specialist orthodontist from the very first appointment." }),
        React.createElement("div", { className: "spec-grid" },
          people.map((p, i) =>
            React.createElement("div", { className: "spec reveal", key: i },
              React.createElement("div", { className: "spec__photo" },
                React.createElement("img", { src: p.img, alt: p.alt, loading: "lazy", style: p.pos ? { objectPosition: p.pos } : undefined })),
              React.createElement("div", { className: "spec__body" },
                React.createElement("h3", { className: "spec__name" }, p.name),
                React.createElement("p", { className: "spec__role" }, p.role),
                React.createElement("p", { className: "spec__d" }, p.d))))),
      ),
    );
  };

  /* ---- Why families choose Park Lane Orthodontics ---- */
  const PLBenefits = ({ cfg }) => {
    const items = [
      ["shield", "Two specialist orthodontists", "Both registered with the GDC, so specialist care from the very first appointment."],
      ["star", "A Diamond Invisalign provider", "Among the most experienced Invisalign providers in the country."],
      ["scan", "A 3D iTero scanner and 3D printer on site", "So planning is precise and quick, with no messy impressions."],
      ["heart", "A full year of free monitoring", "Once the braces come off, with retainer issues corrected at no charge."],
      ["clock", "Thursday appointments until 6.30pm", "For after-school visits, without a day off lessons."],
      ["accessible", "Easy to get to and get into", "Ground-floor treatment rooms, a ramp to the entrance and on-site parking, on a main bus route."],
      ["users", "A relaxed, unhurried practice", "Where your child is a person, not a number."],
      ["smile", "Rated " + cfg.rating + " on Google", "From over " + cfg.reviewCount + " reviews by families across Reading."],
    ];
    return React.createElement("section", { className: "section paper", id: "benefits" },
      React.createElement("div", { className: "wrap" },
        React.createElement(SHead, { center: true, eyebrow: "Why Park Lane",
          title: "Why families choose Park Lane Orthodontics",
          sub: "A family-run specialist practice in Tilehurst, treating patients from across Reading, Calcot, Purley on Thames and Theale." }),
        React.createElement("div", { className: "benefits-grid" },
          items.map(([ic, t, d], i) =>
            React.createElement("div", { className: "benefit reveal", key: i },
              React.createElement("div", { className: "benefit__ic" }, React.createElement(Icon, { name: ic })),
              React.createElement("h3", { className: "benefit__t" }, t),
              React.createElement("p", { className: "benefit__d" }, d))))),
    );
  };

  /* ---- The cost, and how to spread it ---- */
  const PLCost = ({ cfg }) => React.createElement("section", { className: "section white", id: "costs" },
    React.createElement("div", { className: "wrap" },
      React.createElement(SHead, { center: true, eyebrow: "The cost",
        title: "The cost, and how to spread it" }),
      React.createElement("div", { style: { marginTop: 52 } },
        React.createElement("div", { className: "exam-band reveal" },
          React.createElement("div", { className: "exam-band__l" },
            React.createElement("div", { className: "h3" }, "Start treatment in August"),
            React.createElement("p", null, "Save £", cfg.discount, " on the treatment itself, with a first specialist consultation of £", cfg.consultPrice, " instead of £", cfg.consultUsual, " - inside a package worth £", cfg.packageValue, " in total.")),
          React.createElement("div", { className: "exam-band__price" },
            React.createElement("b", null, "£", cfg.packageValue),
            React.createElement("span", null, "total package value"))),
        React.createElement("div", { className: "worth-prose" },
          React.createElement("p", null, "The offer is simple. Start treatment in August and you save £", cfg.discount, " on the treatment itself, with a first specialist consultation of £", cfg.consultPrice, " instead of £", cfg.consultUsual, ", inside a package worth £", cfg.packageValue, " in total."),
          React.createElement("p", null, "For the treatment that follows, flexible payment plans are available both in house and through a trusted third-party provider, so the cost can be spread over time. Pay in full and there is a 5% discount. Your treatment coordinator goes through every option and the exact figures at your consultation, with nothing hidden.")),
        React.createElement("div", { style: { display: "flex", justifyContent: "center", marginTop: 40 } },
          React.createElement(Btn, { variant: "teal", size: "lg", href: "#book" }, "Book their August consultation")),
      ),
    ),
  );

  /* ---- The treatments in plain English ---- */
  const PLTreatments = () => {
    const items = [
      ["smile", "Invisalign and Angel Aligners", "Clear, removable aligners. They are barely visible, come out to eat and to clean teeth, and are usually the easiest option for a self-conscious child to wear."],
      ["shield", "Fixed braces", "These attach to the teeth and stay put throughout treatment. They remain the most predictable way to move teeth in more complex cases."],
      ["star", "Ceramic braces", "The same job as fixed braces, with tooth-coloured brackets that are far less noticeable than metal."],
    ];
    return React.createElement("section", { className: "section paper", id: "treatments" },
      React.createElement("div", { className: "wrap" },
        React.createElement(SHead, { center: true, eyebrow: "The treatments",
          title: "The treatments in plain English",
          sub: "Which one suits your child is something we will talk through together at the consultation." }),
        React.createElement("div", { className: "benefits-grid" },
          items.map(([ic, t, d], i) =>
            React.createElement("div", { className: "benefit reveal", key: i },
              React.createElement("div", { className: "benefit__ic" }, React.createElement(Icon, { name: ic })),
              React.createElement("h3", { className: "benefit__t" }, t),
              React.createElement("p", { className: "benefit__d" }, d))))),
    );
  };

  /* ---- FAQs ---- */
  const PLFaq = ({ cfg }) => {
    const [open, setOpen] = useState(0);
    const items = [
      ["Is my child the right age?",
       "This offer is for children and teenagers aged 10 to 17. The consultation is where we confirm the right time to begin - sometimes that is now, sometimes it is worth waiting a little, and we will always be honest about which."],
      ["Will the braces be obvious at school?",
       "For many children, hardly at all. Clear aligners are close to invisible, and where fixed braces are needed, ceramic brackets keep them far more discreet. We will talk you through what suits your child at the consultation."],
      ["What is included in the £" + cfg.consultPrice + " consultation?",
       "A 3D iTero scan, any x-rays that are needed, time with a specialist orthodontist, and a full treatment plan with clear costs. It normally costs £" + cfg.consultUsual + ", so this is half price for August."],
      ["Do we have to start straight away to get the £" + cfg.discount + " off?",
       "Treatment needs to start within August to secure the £" + cfg.discount + " saving. Booking the consultation early in the month leaves the most room to talk things through without rushing."],
      ["Will it hurt?",
       "Braces and aligners can feel a little tight for a day or two after they are placed or changed, and that settles quickly. Our team keeps every appointment gentle and unhurried, and there is always time to ask questions."],
      ["What happens after I send the form?",
       "We call you back to arrange the consultation at a time that works around school. There is nothing to pay to enquire, and no obligation to go ahead."],
    ];
    return React.createElement("section", { className: "section white", id: "faq" },
      React.createElement("div", { className: "wrap" },
        React.createElement(SHead, { center: true, eyebrow: "Good to know", title: "Frequently asked questions" }),
        React.createElement("div", { className: "faq" },
          items.map(([q, a], i) =>
            React.createElement("div", { className: "faq__item", key: i, "data-open": open === i },
              React.createElement("button", { className: "faq__q", "aria-expanded": open === i, onClick: () => setOpen(open === i ? -1 : i) },
                React.createElement("span", null, q),
                React.createElement("span", { className: "faq__ic" }, React.createElement(Icon, { name: "plus" }))),
              React.createElement("div", { className: "faq__a", style: { maxHeight: open === i ? 300 : 0 } },
                React.createElement("div", { className: "faq__a-inner" }, a))))),
      ),
    );
  };

  /* ---- Final CTA ---- */
  const PLFinalCTA = ({ cfg }) => React.createElement("section", { className: "section ink final" },
    React.createElement("div", { className: "final__inner" },
      React.createElement("span", { className: "eyebrow on-dark" }, "Back to school offer"),
      React.createElement("h2", { className: "h2" }, "Give them the smile they will want to show off"),
      React.createElement("p", { className: "lead" }, "The offer runs until ", cfg.offerEnds, ". Send the form and we will call you back to book their consultation."),
      React.createElement("div", { className: "final__actions" },
        React.createElement(Btn, { variant: "teal", size: "lg", href: "#book" }, "Book their August consultation"),
        React.createElement(Btn, { variant: "outline", size: "lg", onDark: true, href: "tel:" + cfg.tel },
          React.createElement(Icon, { name: "phone", style: { width: 17, height: 17 } }), "Call ", cfg.phone)),
      React.createElement("p", { className: "final__alt" },
        React.createElement(Icon, { name: "chat" }),
        "Prefer to talk it through first?",
        React.createElement("br", { className: "mobile-break" }),
        " Call ",
        React.createElement("a", { href: "tel:" + cfg.tel }, cfg.phone),
        " or email ",
        React.createElement("a", { href: "mailto:" + cfg.email }, cfg.email)),
    ),
  );

  /* ---- Footer ---- */
  const PLFooter = ({ cfg }) => {
    const hours = [["Monday", "9:00 - 17:00"], ["Tuesday", "8:30 - 17:00"], ["Wednesday", "9:00 - 17:00"], ["Thursday", "8:30 - 18:30"], ["Friday", "9:00 - 17:00"], ["Saturday", "9:00 - 12:30 (every 2 months)"]];
    return React.createElement("footer", { className: "footer" },
      React.createElement("div", { className: "footer__wood", "aria-hidden": "true" }),
      React.createElement("div", { className: "footer__inner" },
        React.createElement("div", { className: "footer__cards" },
          React.createElement("div", { className: "fcard fcard--contact" },
            React.createElement("div", { className: "fc-name" }, cfg.practice),
            React.createElement("p", null, cfg.address),
            React.createElement("div", { className: "fc-contact-rows" },
              React.createElement("div", null, React.createElement("span", { className: "fc-label" }, "Call us:"), React.createElement("a", { href: "tel:" + cfg.tel }, cfg.phone)),
              React.createElement("div", null, React.createElement("span", { className: "fc-label" }, "Email us:"), React.createElement("a", { href: "mailto:" + cfg.email }, cfg.email))),
            React.createElement("div", { className: "fc-pills" },
              React.createElement(Btn, { variant: "navy", href: "#book" }, "Book consultation"),
              React.createElement(Btn, { variant: "navy", href: "tel:" + cfg.tel },
                React.createElement(Icon, { name: "phone" }), "Call us"))),
          React.createElement("div", { className: "fcard fcard--hours" },
            React.createElement("h4", null, "Opening times"),
            hours.map(([d, t], i) => {
              const m = t.match(/^(.*?)\s*(\(.*\))$/);
              return React.createElement("div", { className: "hours-row", key: i },
                React.createElement("span", null, d),
                m
                  ? React.createElement("span", null, m[1], React.createElement("span", { className: "hours-row__note" }, m[2]))
                  : React.createElement("span", null, t));
            })),
          React.createElement("div", { className: "fcard fcard--links" },
            React.createElement("h4", null, "Explore"),
            React.createElement("ul", null,
              [["The offer", "#package"], ["Why us", "#benefits"], ["Our specialists", "#specialists"], ["Treatments", "#treatments"], ["The cost", "#costs"], ["FAQs", "#faq"], ["Book their consultation", "#book"]].map(([l, h], i) =>
                React.createElement("li", { key: i }, React.createElement("a", { href: h }, l)))))),
        React.createElement("div", { className: "footer__bottom" },
          React.createElement("div", { className: "footer-wm" },
            React.createElement("span", { className: "footer-wm__name" }, "Park Lane Orthodontics"),
            React.createElement("span", { className: "footer-wm__sub" }, "Reading")),
          React.createElement(Btn, { variant: "teal", href: "#book" }, "Book their August consultation")),
        React.createElement("div", { className: "footer__legal" },
          React.createElement("span", null, "\u00A9 ", new Date().getFullYear(), " ", cfg.practice, ". Treatment subject to clinical suitability. Finance subject to status."),
          React.createElement("span", null, "GDC registered · Specialist orthodontic practice")),
      ),
    );
  };

  /* ---- Sticky mobile CTA ---- */
  const PLMobileCTA = ({ cfg }) => {
    const scrolled = useScrolled(520);
    if (!cfg.showStickyCTA) return null;
    return React.createElement("div", { className: "mobile-cta" + (scrolled ? " mobile-cta--in" : "") },
      React.createElement("a", { className: "mobile-cta__call", href: "tel:" + cfg.tel },
        React.createElement(Icon, { name: "phone" }),
        React.createElement("span", null, "Call")),
      React.createElement(Btn, { variant: "teal", block: true, href: "#book" }, "Book their consultation"));
  };

  /* ---- Full-bleed reassurance band ---- */
  const PLBand = ({ cfg }) => React.createElement("section", { className: "band", "aria-label": "A year of free monitoring" },
    React.createElement("img", { className: "band__img", src: "assets/pl-team-reception.jpg", alt: "The team at Park Lane Orthodontics in reception" }),
    React.createElement("div", { className: "band__grad" }),
    React.createElement("div", { className: "band__inner" },
      React.createElement("span", { className: "eyebrow on-dark" }, "After treatment"),
      React.createElement("h2", { className: "band__h" }, "We look after the smile for a full year afterwards"),
      React.createElement("p", { className: "band__p" }, "Once the braces come off we monitor your child's smile for a whole year. If a retainer needs adjusting or a bonded retainer plays up in that time, we put it right at no extra cost."),
      React.createElement(Btn, { variant: "teal", size: "lg", href: "#book" }, "Book their August consultation")),
  );

  Object.assign(window, { PLSteps, PLSpecialists, PLBenefits, PLCost, PLTreatments, PLFaq, PLFinalCTA, PLFooter, PLMobileCTA, PLBand });
})();