/* NEO Orthodontics - Black Friday open week: reviews, emotional, team, FAQ, booking strip, find us, footer, mobile bar */
(function () {
  const { useEffect, useState } = React;
  const NIcon = window.NIcon, Logo = window.Logo;

  const Reviews = () => (
    <section className="sec sec--navy revx" id="reviews" aria-label="Patient review">
      <img className="revx__mark" src="neo/img/mandala.webp" 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>From start to finish the service we have received has been excellent. We have been amazed with the improvement in my daughter’s smile and profile. Thank you Dr Parvez and all the team.</p></blockquote>
          <figcaption className="revx__by">
            <span className="revx__name">Caroline Rowell</span>
            <span className="revx__sep" aria-hidden="true"></span>
            <span className="revx__src">Google review</span>
          </figcaption>
        </figure>
      </div>
    </section>
  );

  const WhyStraighten = () => (
    <section className="sec sec--cream" id="confidence" aria-labelledby="em-h">
      <div className="wrap split">
        <div className="split__img"><img src="neo/img/adult-patient-chair.webp" alt="An adult patient laughing with her Specialist Orthodontist and nurse in the treatment room" loading="lazy" /></div>
        <div className="split__copy">
          <h2 className="h2" id="em-h">More than <span className="hl">straighter teeth</span></h2>
          <p className="lead">If you've ever kept your lips closed in photos or covered your mouth when you laugh, you're not alone. A straighter smile is about feeling like yourself again.</p>
          <ul className="ticks">
            <li><NIcon name="check" /><span>Smile, laugh and talk without thinking twice</span></li>
            <li><NIcon name="check" /><span>Feel confident in photos, at work and on special occasions</span></li>
            <li><NIcon name="check" /><span>Straighter teeth are easier to brush and floss, which helps protect your teeth and gums</span></li>
            <li><NIcon name="check" /><span>A more even bite can reduce uneven wear on your teeth over time</span></li>
          </ul>
          <a className="btn btn--primary" href="#book">Book my £50 consultation</a>
        </div>
      </div>
    </section>
  );

  const Team = () => {
    const Tick = window.NIcon;
    const points = [
      "Awarded the Walpole-Day Prize in Orthodontics at the University of Birmingham",
      "Fellowship in Dental Surgery from the Royal College of Surgeons of Edinburgh",
      "Providing Invisalign clear aligners since 2008",
      "Has trained over 3,000 dentists across the UK, Ireland, China and Australia",
    ];
    return (
      <section className="sec sec--paper" id="team" aria-labelledby="team-h">
        <div className="wrap split">
          <div className="split__img preet__img"><img src="neo/img/preet-portrait.webp" alt="Dr Preet Bhogal, Specialist Orthodontist, smiling with a patient in the treatment room" loading="lazy" /></div>
          <div className="split__copy">
            <h2 className="h2" id="team-h">Meet Preet, your <span className="hl">Specialist Orthodontist</span></h2>
            <div className="preet__id">
              <p className="preet__name">Dr Preet Bhogal</p>
              <p className="preet__quals">BDS, MFDS RCS (Eng), MOrth RCS (Edin), MPhil (Orthodontics), FDS RCS (Edin), PG Cert Med Ed, FHEA</p>
              <p className="preet__gdc">GDC No. 78057</p>
            </div>
            <p className="lead">With 25 years in dentistry and thousands of successful cases, Preet looks after patients of all ages, from children to adults. He co-founded Neo Orthodontics in the North East in 2009, and combines clinical precision with a personal approach tailored to you.</p>
            <ul className="ticks">{points.map((p) => <li key={p}>{Tick ? <Tick name="check" /> : null}<span>{p}</span></li>)}</ul>
            <a className="btn btn--primary" href="#book">Book my £50 consultation</a>
          </div>
        </div>
      </section>
    );
  };

  const Faq = ({ cfg }) => {
    const items = [
      ["Do I have to start treatment at my consultation to get the offer?", "Yes. To receive the Black Friday offer, you need to book and attend your consultation during open week and agree to start treatment at that appointment."],
            ["What does the consultation cost?", "During open week, your consultation with Preet, our Specialist Orthodontist, is £50 instead of the usual £95, and includes your 3D scan, x-rays and custom treatment plan."],
      ["Am I too old for braces?", "There's no upper age limit for straightening your teeth, as long as your teeth and gums are healthy. Many of our patients are adults."],
      ["Will people notice I'm wearing them?", "Clear aligners are nearly invisible, and ceramic fixed braces are tooth-coloured, so both are discreet options. We'll show you each one at your consultation."],
            ["Is there parking at the " + cfg.loc.site + " practice?", cfg.loc.findNote || cfg.loc.accessText],
      ["Is the offer available on NHS treatment?", "No. The Black Friday offer applies to private orthodontic treatment only."],
    ];
    return (
      <section className="sec sec--cream" id="faq" aria-labelledby="faq-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="faq-h">Your questions, answered about our <span className="hl">Black Friday open week</span></h2></div>
          <div className="faq">
            {items.map(([q, a]) => (
              <details key={q}>
                <summary>{q}<span className="faq__ic" aria-hidden="true"><NIcon name="plus" /></span></summary>
                <p>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const BookStrip = ({ cfg }) => (
    <section className="sec sec--navy book" aria-labelledby="bk-h">
      <img className="book__mark" src="neo/img/mandala.webp" alt="" />
      <div className="wrap">
        <h2 className="h2" id="bk-h">Book your <span className="hl">open week consultation</span> at {cfg.loc.site}, {cfg.loc.town}</h2>
        <p className="lead">Open week runs {cfg.openWeek}. Fill in the form and our treatment coordinator will be in touch to book your visit.</p>
        <div className="cta-row">
          <a className="btn btn--primary" href="#book">Claim up to £550 off</a>
          <a className="btn btn--secondary" href={"tel:" + cfg.loc.tel}><NIcon name="phone" />Call {cfg.loc.phone}</a>
        </div>
      </div>
    </section>
  );

  const FindUs = ({ cfg }) => {
    const L = cfg.loc, q = encodeURIComponent("NEO Orthodontics, " + L.address);
    return (
      <section className="sec sec--paper" id="find-us" aria-labelledby="find-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="find-h">Find our <span className="hl">{L.site}, {L.town}</span> practice</h2></div>
          <div className="find">
            <div className="find__info">
              <div className="find__blk"><div className="ic"><NIcon name="pin" /></div><div><h3 className="h3">Address</h3><p>{L.name}<br />{L.address}</p><p style={{ marginTop: 6 }}>{L.findNote || L.accessText}</p></div></div>
              <div className="find__blk"><div className="ic"><NIcon name="phone" /></div><div><h3 className="h3">Phone</h3><p><a href={"tel:" + L.tel}>{L.phone}</a></p></div></div>
              <div className="find__blk"><div className="ic"><NIcon name="clock" /></div><div style={{ minWidth: 0 }}><h3 className="h3">Opening times</h3>
                <ul className="hours">{L.hours.map(([d, h]) => <li key={d}><span>{d}</span><span>{h}</span></li>)}</ul>
                {L.phonesNote && <p style={{ marginTop: 8 }}>{L.phonesNote}</p>}</div></div>
            </div>
            <div className="find__map">
              <a className="find__mapimg" href={L.mapsGoogle || ("https://www.google.com/maps/search/?api=1&query=" + q)} target="_blank" rel="noopener" aria-label={"Open NEO Orthodontics " + L.site + " in Google Maps"}><img src="neo/img/map-west-road.webp" alt={"Map showing NEO Orthodontics on West Road, Newcastle, near Condercum Road"} loading="lazy" /></a>
            </div>
          </div>
        </div>
      </section>
    );
  };

  const Footer = ({ cta } = {}) => {
    const B = "https://www.neo-orthodontics.co.uk";
    const ctas = [cta || ["Book my £50 consultation", "#book"]];
    const legal = [["Terms and Conditions", "/policy/terms-and-conditions"], ["Privacy Policy", "/policy/privacy-policy"], ["Complaints Procedure", "/policy/complaints"], ["Cookies Policy", "/policy/cookies"], ["Data Protection Policy", "/policy/data-protection-privacy-notice"], ["GDC Standards", "/policy/gdc-standards"]];
    const arrow = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    return (
      <footer className="ftx">
        <img className="ftx__mark" src="neo/img/mandala.webp" alt="" />
        <div className="wrap">
          <div className="ftx__top">
            <div className="ftx__brand">
              <a href="#top" aria-label="NEO Orthodontics - back to top"><img src="neo/img/mandala.webp" alt="NEO Orthodontics" width="120" height="118" /></a>
              <div className="ftx__social">
                <a href="https://www.instagram.com/neoorthodontics/" target="_blank" rel="noopener" aria-label="NEO Orthodontics on Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><path d="M17.5 6.5h.01" /></svg></a>
                <a href="https://www.facebook.com/NeoOrthodontics/" target="_blank" rel="noopener" aria-label="NEO Orthodontics on Facebook"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg></a>
              </div>
            </div>
            <div className="ftx__ctas">{ctas.map(([l, h]) => <a key={l} className="ftx__cta" href={h}>{l}{arrow}</a>)}</div>
          </div>
          <nav className="ftx__legal" aria-label="Legal">{legal.map(([l, h]) => <a key={l} href={B + h} target="_blank" rel="noopener">{l}</a>)}</nav>
          <div className="ftx__base">
            <p>Copyright © 2026 NEO Orthodontics. All rights reserved.<br />All treatment is planned by our GDC-registered Specialist Orthodontists.</p>
            <p>Website developed by <a href="https://www.xceleratordental.com/" target="_blank" rel="noopener">Xcelerator Dental</a></p>
          </div>
        </div>
      </footer>
    );
  };

  const MobileBar = ({ cfg }) => {
    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}><NIcon name="calendar" />Book</a>
        <a className="btn btn--secondary" href={"tel:" + cfg.loc.tel} tabIndex={show ? 0 : -1}><NIcon name="phone" />Call</a>
      </div>
    );
  };

  Object.assign(window, { NeoReviews: Reviews, NeoWhyStraighten: WhyStraighten, NeoTeam: Team, NeoFaq: Faq, NeoBookStrip: BookStrip, NeoFindUs: FindUs, NeoFooter: Footer, NeoMobileBar: MobileBar });
})();