/* De-ientes Bedford - early Black Friday ortho open day: FAQs, final CTA, find us, footer, mobile bar */
(function () {
  const { useEffect, useState } = React;
  const DIcon = window.DIcon, CFG = window.DtCFG;

  /* <details> opens instantly; this animates its height (and fades the answer)
     instead. Closing waits for the animation before removing [open]. */
  const toggleFaq = (e) => {
    const det = e.currentTarget.parentNode;
    if (!det.animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    e.preventDefault();
    if (det._anim) det._anim.cancel();
    const border = det.offsetHeight - det.clientHeight;
    const sumH = e.currentTarget.offsetHeight + border + "px";
    const from = det.offsetHeight + "px";
    const opening = !det.open || det.classList.contains("is-closing");
    det.classList.add("is-anim");
    det.classList.toggle("is-closing", !opening);
    if (opening) det.open = true;
    const to = opening ? det.scrollHeight + border + "px" : sumH;
    const ans = det.querySelector("p");
    if (ans) ans.animate(opening ? [{ opacity: 0, transform: "translateY(-6px)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1 }, { opacity: 0 }], { duration: opening ? 380 : 200, easing: "ease-out" });
    const anim = det.animate([{ height: from }, { height: to }], { duration: opening ? 380 : 280, easing: "cubic-bezier(.22,1,.36,1)" });
    det._anim = anim;
    anim.onfinish = () => {
      if (!opening) det.open = false;
      det.classList.remove("is-anim", "is-closing");
      det._anim = null;
    };
  };

  const Faq = () => {
    const items = [
      ["Do I have to go ahead on the day?", "No. Your assessment is free either way, and there's no obligation. The £500 off and the savings package apply when you choose to go ahead on the day."],
      ["Can my child come to the open day?", "Yes. The open day is for children and adults. Your child will be seen with you, and Dr Saroshen will explain everything in a way that makes sense to both of you."],
      ["My child may qualify for NHS braces. Is this offer for them?", "The open day offer is for private treatment. If you're unsure whether your child would qualify for NHS treatment, Dr Saroshen will give you an honest answer at the assessment."],
      ["How do I know whether aligners or lingual braces are right for me?", "That's what the assessment is for. Your 3D scan and X-rays show what your teeth need, and Dr Saroshen will talk you through the options that will genuinely work."],
      ["How long does treatment take?", "It depends on how far your teeth need to move. Many cases take between six months and two years. You'll get your own estimated timeline in your treatment plan."],
      ["Can I spread the cost?", "Yes. We offer 0% finance with Medenta over up to 12 months on treatment over £500, subject to status. We'll go through it with you at your appointment."],
      ["How much do clear aligners cost in Bedford?", "At De-ientes Bedford, clear aligners usually start from £4,500. At our open day, they start from £4,000 when you go ahead on the day. Your exact price depends on how much your teeth need to move, and you'll have it in writing before you commit."],
      ["What's the difference between Invisalign, Spark and 32co?", "All three are clear aligner systems that straighten teeth with a series of custom trays. They differ in the materials used and how treatment is planned. Dr Saroshen will recommend the one that best suits your teeth and budget."],
      ["Are clear aligners as effective as braces?", "For many people, yes. Aligners treat a wide range of crowding, gaps and bite issues. Some complex movements are more predictable with fixed braces, which is why we offer lingual braces too. Your assessment will show which suits you."],
      ["How many hours a day do I need to wear aligners?", "Usually 20 to 22 hours a day. You take them out to eat, to drink anything other than water, and to brush your teeth."],
      ["Do lingual braces affect your speech?", "Your tongue may notice them at first, and some people have a slight lisp for the first week or two. It usually settles quickly as your tongue gets used to them."],
      ["Am I too old for teeth straightening?", "There's no upper age limit. As long as your teeth and gums are healthy, you can straighten your teeth at any age. Many of our patients start in their 30s, 40s and beyond."],
      ["What age should my child have an orthodontic assessment?", "There's no set age. Many children are assessed once their adult teeth start coming through, and treatment often begins between 11 and 14. An early assessment means any problems are spotted in good time."],
      ["Will I need to wear a retainer after treatment?", "Yes. Teeth naturally try to drift back, so retainers keep your new smile in place. Your removable retainers are included free in the open day savings package."],
    ];
    return (
      <section className="sec sec--paper" id="faq" aria-labelledby="faq-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="faq-h">Your questions, <span className="hl">answered</span></h2></div>
          <div className="faq">
            {items.map(([q, a]) => (
              <details key={q}><summary onClick={toggleFaq}>{q}<span className="faq__ic" aria-hidden="true"><DIcon name="plus" /></span></summary><p>{a}</p></details>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const Review = () => (
    <section className="sec sec--navy revx" id="reviews" aria-label="Patient review">
      <img className="revx__mark" src="dt/img/mark-cream.png" alt="" />
      <div className="wrap">
        <figure className="revx__fig">
          <div className="revx__stars" role="img" aria-label="5 out of 5 stars">
            {[0, 1, 2, 3, 4].map((k) => <svg key={k} viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z" /></svg>)}
          </div>
          <blockquote className="revx__q"><p>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!</p></blockquote>
          <figcaption className="revx__by"><span className="revx__name">Katie Jones</span></figcaption>
        </figure>
      </div>
    </section>
  );

  const FinalCta = () => (
    <section className="sec sec--navy book" aria-labelledby="bk-h">
      <img className="book__mark" src="dt/img/mark-cream.png" alt="" />
      <div className="wrap">
        <h2 className="h2" id="bk-h">The smile you keep putting off could start on <span className="hl">21st November</span></h2>
        <p className="lead">Appointments run from 9am to 3pm on one day only, at De-ientes Bedford, Old Gaston House, 28 Lurke Street. Request your place and we'll call you to find a time that suits you.</p>
        <div className="cta-row"><a className="btn btn--primary" href="#book">Request your open day place</a></div>
      </div>
    </section>
  );

  const FindUs = () => {
    const q = encodeURIComponent("De-ientes Bedford, 28 Lurke Street, Bedford MK40 3HU");
    return (
      <section className="sec sec--cream" id="find-us" aria-labelledby="find-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="find-h">Find us in <span className="hl">Bedford</span></h2></div>
          <div className="find">
            <div className="find__info">
              <div className="find__blk"><div className="ic"><DIcon name="pin" /></div><div><h3 className="h3">Address</h3><p>{CFG.name}<br />{CFG.address}</p></div></div>
              <div className="find__blk"><div className="ic"><DIcon name="phone" /></div><div><h3 className="h3">Phone</h3><p><a href={"tel:" + CFG.tel}>{CFG.phone}</a></p></div></div>
              <div className="find__blk"><div className="ic"><DIcon name="mail" /></div><div><h3 className="h3">Email</h3><p><a href={"mailto:" + CFG.email}>{CFG.email}</a></p></div></div>
              <div className="find__blk"><div className="ic"><DIcon name="access" /></div><div><h3 className="h3">Getting here</h3><p>In the heart of Bedford town centre, with patient parking and step-free access, and open six days a week.</p></div></div>
            </div>
            <div className="find__map"><iframe title="Map showing De-ientes Bedford on Lurke Street" loading="lazy" src={"https://www.google.com/maps?q=" + q + "&output=embed"}></iframe></div>
          </div>
        </div>
      </section>
    );
  };

  /* Opens the policy in the same overlay as the form's consent link (ac-form.js).
     Without that script the link still opens the full policy in a new tab. */
  const openPolicy = (e) => {
    if (!window.DtAcForm) return;
    e.preventDefault();
    window.DtAcForm.openPolicy(CFG.privacyBox, e.currentTarget);
  };

  const Footer = ({ cta } = {}) => {
    const ctas = [cta || ["Request your open day place", "#book"]];
    return (
      <footer className="ftx">
        <img className="ftx__mark" src="dt/img/mark-cream.png" alt="" />
        <div className="wrap">
          <div className="ftx__top">
            <div className="ftx__brand">
              <a href="#top" aria-label="De-ientes Family Dental Group - back to top"><img src="dt/img/logo-cream.png" alt="De-ientes Family Dental Group" width="203" height="80" style={{ width: 203, height: "auto" }} /></a>
            </div>
            <div className="ftx__ctas">{ctas.map(([l, h]) => <a key={l} className="ftx__cta" href={h}>{l}<DIcon name="arrowR" /></a>)}</div>
          </div>
          <nav className="ftx__legal" aria-label="Legal"><a href={CFG.privacy} target="_blank" rel="noopener" onClick={openPolicy}>Privacy Policy</a></nav>
          <div className="ftx__base">
            <p>Copyright © 2026 De-ientes Family Dental Group. Dental Tree Group Limited.</p>
            <p>Website developed by <a href="https://www.xceleratordental.com/" target="_blank" rel="noopener">Xcelerator Dental</a></p>
          </div>
        </div>
      </footer>
    );
  };

  const MobileBar = () => {
    const [show, setShow] = useState(false);
    useEffect(() => {
      const hero = document.getElementById("top");
      if (!hero) return;
      document.body.classList.add("has-mbar");
      const io = new IntersectionObserver(([e]) => setShow(!e.isIntersecting), { threshold: 0 });
      io.observe(hero);
      return () => io.disconnect();
    }, []);
    return (
      <div className={"mbar" + (show ? " show" : "")} aria-hidden={!show}>
        <a className="btn btn--primary" href="#book" tabIndex={show ? 0 : -1}><DIcon name="calendar" />Request</a>
        <a className="btn btn--secondary" href={"tel:" + CFG.tel} tabIndex={show ? 0 : -1}><DIcon name="phone" />Call</a>
      </div>
    );
  };

  const PhotoRow = ({ pics }) => (
    <section className="prow" aria-label="Patients and team at De-ientes Bedford">
      {pics.map(([src, alt, pos]) => <div className="prow__item" key={src}><img src={src} alt={alt} loading="lazy" style={{ objectPosition: pos }} /></div>)}
    </section>
  );
  const ROW_A = [
    ["dt/img/strip-mirror-smile.webp", "A De-ientes patient smiling at her reflection in a hand mirror", "62% 30%"],
    ["dt/img/strip-older-patient.webp", "An older De-ientes patient smiling as she looks in a hand mirror", "60% 35%"],
    ["dt/img/strip-team-three.webp", "Three smiling members of the De-ientes team", "center 30%"],
  ];
  const ROW_B = [
    ["dt/img/strip-team-two.webp", "Two smiling members of the De-ientes team", "center 25%"],
    ["dt/img/strip-xray-scan.webp", "A teenage patient having a scan on the X-ray machine at De-ientes", "center 35%"],
    ["dt/img/strip-patient-smile.webp", "A smiling patient in the treatment chair at De-ientes", "center 30%"],
  ];
  const PhotoRowA = () => <PhotoRow pics={ROW_A} />;
  const PhotoRowB = () => <PhotoRow pics={ROW_B} />;

  Object.assign(window, { DtPhotoRow: PhotoRowA, DtPhotoRowB: PhotoRowB, DtReview: Review, DtFaq: Faq, DtFinal: FinalCta, DtFindUs: FindUs, DtFooter: Footer, DtMobileBar: MobileBar });
})();