/* Love Teeth Dental Chessington - Invisalign open day: journey, Dr KP, why choose, finance, how it works, FAQs, final CTA, find us, footer, app */
(function () {
  const { useState, useEffect, useRef } = React;
  const { LtIc: Ic, LtSpark: Spark, LtStars: Stars, LtGMark: GMark } = window;
  const W = window;

  const CFG = {
    phone: "020 8337 0629", tel: "+442083370629",
    dateLong: "Saturday 21st November", dateShort: "21st November", time: "9am - 5pm",
    countdownEnd: "2026-11-21T09:00:00Z",
    address: "401 Hook Rd, Chessington KT9 1EW",
    mapsQ: "Love Teeth Dental Chessington, 401 Hook Rd, Chessington KT9 1EW",
  };

  const Journey = ({ cfg }) => {
    const track = useRef(null);
    const [idx, setIdx] = useState(0);
    const [stops, setStops] = useState(1);
    const steps = [
      ["Request your slot", "Fill in the short form on this page.", "lt/img/request-phone.jpg", "A person filling in a form on their phone"],
      ["We call you", "Our team rings you to arrange a time on " + cfg.dateLong + ".", "lt/img/team-call.jpg", "Two smiling Love Teeth team members on the phones"],
      ["Your consultation", "Meet the dentist, have your 3D scan, X-rays and photos, and talk through the smile you'd like.", "lt/img/surgery-itero.jpg", "A Love Teeth treatment room with the iTero 3D scanner"],
      ["Your plan and costs", "Our treatment coordinator walks you through your plan, the cost and your finance options. Decide on the day to secure your open day savings.", "lt/img/consult-room.jpg", "A Love Teeth consultation room set up for an Invisalign consultation"],
      ["Your aligners and finishing touches", "Your aligners are made within a few weeks. When treatment is complete, your free whitening and retainers finish the job.", "lt/img/patient-thumbs-chair.jpg", "A smiling Love Teeth patient giving a thumbs up in the dental chair with her dentist"],
    ];
    const step = () => { const el = track.current; const c = el && el.querySelector(".jcard"); return c ? c.offsetWidth + 24 : 1; };
    useEffect(() => {
      const m = () => { const el = track.current; if (!el) return; setStops(Math.max(1, Math.round((el.scrollWidth - el.clientWidth) / step()) + 1)); };
      m(); window.addEventListener("resize", m); return () => window.removeEventListener("resize", m);
    }, []);
    const go = (d) => track.current && track.current.scrollBy({ left: d * step(), behavior: "smooth" });
    const onScroll = () => { const el = track.current; if (el) setIdx(Math.min(stops - 1, Math.round(el.scrollLeft / step()))); };
    return (
      <section className="sec sec--soft" id="journey" aria-labelledby="j-h">
        <div className="wrap">
          <div className="jhead">
            <div className="shead">
              <h2 className="h2" id="j-h">Your open day, <span className="ul">step</span> by step</h2>
              <p className="lead">From a two-minute form to a smile you love, here's how it works.</p>
            </div>
            <div className="jctl">
              <button type="button" className="jbtn" onClick={() => go(-1)} disabled={idx === 0} aria-label="Previous step"><Ic n="arrowL" /></button>
              <button type="button" className="jbtn jbtn--on" onClick={() => go(1)} disabled={idx >= stops - 1} aria-label="Next step"><Ic n="arrowR" /></button>
            </div>
          </div>
          <ol className="jtrack" ref={track} onScroll={onScroll} tabIndex={0} aria-label="Open day steps, scroll sideways">
            {steps.map(([t, d, img, alt], i) => (
              <li className="jcard" key={t}>
                <div className="jcard__img">{img ? <img src={img} alt={alt} loading="lazy" /> : <image-slot id={"lt-journey-" + i} shape="rect" placeholder={alt}></image-slot>}</div>
                <div className="jcard__body"><span className="jcard__n">{i + 1}</span><h3 className="h3">{t}</h3><p>{d}</p></div>
              </li>
            ))}
          </ol>
        </div>
      </section>
    );
  };

  const KpVideo = () => {
    const ref = useRef(null);
    const [playing, setPlaying] = useState(false);
    const play = () => { const v = ref.current; if (v) v.play(); };
    return (
      <React.Fragment>
        <video ref={ref} className="kp__video" src="lt/video/top-1-percent.mp4#t=0.1" playsInline controls={playing} preload="metadata" aria-label="Video about Love Teeth's Invisalign care" onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)}></video>
        {!playing && (
          <button type="button" className="kp__play" onClick={play} aria-label="Play video">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z" fill="currentColor" /></svg>
          </button>
        )}
      </React.Fragment>
    );
  };

  const DrKP = () => (
    <section className="sec sec--blush" id="dr-kp" aria-labelledby="kp-h">
      <div className="wrap kp">
        <div className="kp__img">
          <KpVideo />
          <img className="kp__logo" src="lt/img/invisalign-diamond-apex.png" alt="Invisalign Diamond Apex provider" />
        </div>
        <div className="kp__copy">
          <h2 className="h2" id="kp-h">Invisalign care from one of the <span className="ul">top 1%</span> of clinics in Europe</h2>
          <p>Love Teeth is one of a handful of Invisalign Diamond Apex providers in the UK. It's a status reserved for the highest-performing clinics, and it places us in the top 1% across Europe.</p>
          <p>That standard starts with our founder and principal dentist, Dr Kunal "KP" Patel. KP is an Invisalign global ambassador, lecturer and key opinion leader, and he regularly teaches other dentists at international events. He has also been named one of the 50 most influential dentists in the UK.</p>
          <p>Every Invisalign plan at our Chessington clinic is built on the same approach KP has developed across all six of our practices.</p>
          <a className="btn btn--primary" href="#request">Request your open day slot</a>
        </div>
      </div>
    </section>
  );

  const Why = () => {
    const items = [
      ["trophy", "Award-winning care", "Winner of Practice of the Year, Patient Care and Child-Friendly Practice at the Private Dentistry Awards 2024."],
      ["star", "Trusted by our patients", "Rated 4.9 stars from over 500 Google reviews."],
      ["heart", "Gentle with nervous patients", "Our team is nationally Dental Phobia certified, so you can take things at your own pace."],
      ["tv", "Recognised nationally", "Regularly featured on TV, in the press and in the Guardian."],
      ["scan", "Precise digital planning", "iTero 3D scanning means no messy moulds."],
      ["access", "Easy to reach", "Our clinic on Hook Road has a wheelchair accessible entrance."],
    ];
    return (
      <section className="sec" id="why" aria-labelledby="why-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="why-h">Why <span className="ul">Chessington</span> chooses Love Teeth</h2></div>
          <div className="why">
            {items.map(([ic, t, d]) => <div className="wcard" key={t}><span className="ic"><Ic n={ic} /></span><h3 className="h3">{t}</h3><p>{d}</p></div>)}
          </div>
        </div>
      </section>
    );
  };

  const Team = () => {
    const people = [
      ["lt/img/dr-kunal-patel.jpg", "Dr Kunal Patel", "Principal General and Cosmetic Dentist", "199250", "Kunal opened the first Love Teeth clinic in 2014 and has become one of the leading lights in UK dentistry. He created our signature Align Bleach & Composite (ABC), Mini Smile Makeover and WeddingSmiles treatments, and brought the Love Teeth approach to Chessington.", "Add a portrait of Dr Kunal Patel"],
      ["lt/img/dr-megna-shah.jpg", "Dr Megna Shah", "General and Cosmetic Dentist, Chessington", "289732", "Megna has dedicated her career to caring for her local community. She combines her technical skill in general and cosmetic dentistry with a gentle, empathetic approach, so you feel comfortable and confident from the moment you arrive.", "Add a portrait of Dr Megna Shah"],
    ];
    return (
      <section className="sec" id="team" aria-labelledby="team-h">
        <div className="wrap">
          <div className="shead">
            <h2 className="h2" id="team-h">Who you'll <span className="ul">meet</span> on the day</h2>
            <p className="lead">Your open day consultation is with a dentist from our Chessington team, and you can expect a very warm welcome.</p>
          </div>
          <div className="team">
            {people.map(([id, n, r, gdc, d, ph]) => (
              <article className="tcard" key={n}>
                <div className="tcard__img">{id.endsWith(".jpg") ? <img src={id} alt={n + ", " + r} loading="lazy" /> : <image-slot id={id} shape="rect" placeholder={ph}></image-slot>}</div>
                <div className="tcard__body">
                  <h3 className="h3">{n}</h3>
                  <p className="tcard__role">{r}</p>
                  <p className="tcard__gdc">GDC No. {gdc}</p>
                  <p className="tcard__d">{d}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const Finance = () => (
    <section className="sec sec--blush" id="finance" aria-labelledby="fin-h">
      <div className="wrap">
        <div className="shead"><h2 className="h2" id="fin-h">Spread the cost of your new <span className="ul">smile</span></h2><p className="lead">Your open day savings come straight off your Invisalign treatment. Our treatment coordinator explains every figure before you decide, so there are no surprises.</p></div>
        <div className="fin__grid">
          <div className="pay"><span className="ic"><Ic n="card" /></span><h3 className="h3">0% finance over 12 months</h3></div>
          <div className="pay"><span className="ic"><Ic n="calendar" /></span><h3 className="h3">Or spread the cost over up to five years</h3></div>
          <div className="pay"><span className="ic"><Ic n="tag" /></span><h3 className="h3">No deposit needed</h3><p className="pay__k">On treatment over £1,000</p></div>
        </div>
        <div className="fin__copy">
          <p className="fine">Finance is subject to status.</p>
          <a className="btn btn--primary" href="#request" style={{ marginTop: 12 }}>Request your open day slot</a>
        </div>
      </div>
    </section>
  );

  const How = () => (
    <section className="sec" id="how" aria-labelledby="how-h">
      <div className="wrap how">
        <div className="how__copy">
          <h2 className="h2" id="how-h">How Invisalign <span className="ul">straightens</span> your teeth</h2>
          <p>Invisalign uses a series of clear, removable aligners, each made precisely from your 3D scan. Every aligner moves your teeth a little closer to their new position.</p>
          <p>You'll wear each set for around two weeks, for about 22 hours a day, taking them out only to eat, drink and clean your teeth. We'll check your progress roughly every six weeks.</p>
          <p>How long treatment takes depends on your teeth. Your dentist will give you an estimate at your consultation. Once you're finished, your retainers keep your smile exactly where it should be.</p>
          <ul className="ticks how__list">
            {[["Around 2 weeks", "per aligner set"], ["About 22 hours", "a day"], ["Roughly 6 weeks", "between check-ups"]].map(([k, v]) => <li key={k}><span className="tk"><Ic n="check" /></span><span><b>{k}</b> {v}</span></li>)}
          </ul>
        </div>
        <div className="how__img"><img src="lt/img/invisalign-plus.jpg" alt="A Love Teeth dentist holding up a clear Invisalign aligner" loading="lazy" style={{ objectPosition: "center 35%" }} /></div>
      </div>
    </section>
  );

  const Faq = () => {
    const items = [
      ["How much could I save on Invisalign?", "Up to £1,000. Our Ultimate Invisalign package, which also includes composite bonding, comes with £1,000 off. Complex treatment comes with £500 off, and simple treatment with £300 off. Your dentist will confirm which applies to you at your consultation."],
      ["Do I need to pay anything to come to the open day?", "Your consultation is free. We take a £25 deposit to secure your slot."],
      ["Do I have to decide on the day?", "The open day savings are available to patients who choose to go ahead on 21st November. There's no pressure - you're welcome to take more time, but the open day savings won't apply after the day."],
      ["Can I start treatment on the day?", "Not on the day itself. Your aligners are made to your exact plan, which usually takes a few weeks. We'll invite you back for your fitting as soon as they arrive."],
      ["Am I suitable for Invisalign?", "Invisalign corrects a wide range of concerns, including crowding, gaps and teeth that sit unevenly. Your dentist will give you an honest answer at your consultation, and talk you through other options if Invisalign isn't right for you."],
      ["I'm nervous about the dentist. What should I expect?", "You're far from alone. Our team is nationally Dental Phobia certified, and we'll explain everything as we go. You can pause at any point."],
      ["How do I keep my new smile straight?", "With retainers, which are included free in your open day savings package."],
    ];
    return (
      <section className="sec sec--soft" id="faq" aria-labelledby="faq-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="faq-h">Your open day <span className="ul">questions</span>, answered</h2></div>
          <div className="faq">
            {items.map(([q, a], i) => (
              <details key={q} open={i === 0}><summary>{q}<span className="faq__ic" aria-hidden="true"><Ic n="plus" /></span></summary><p>{a}</p></details>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const Final = ({ cfg }) => (
    <section className="final" id="book" aria-labelledby="final-h">
      <Spark className="final__spark" style={{ width: 120, height: 120, left: "6%", top: "18%" }} />
      <Spark className="final__spark" style={{ width: 64, height: 64, right: "9%", bottom: "20%" }} />
      <div className="wrap">
        <h2 className="h2" id="final-h">Your straighter smile starts on {cfg.dateShort}</h2>
        <p>Places on the day are limited, and the savings are only available to patients who decide on the day. Request your slot now and our team will call you to arrange your time.</p>
        <div className="final__actions">
          <a className="btn btn--white" href="#request">Request your open day slot</a>
          <a className="btn btn--ghost" href={"tel:" + cfg.tel}><Ic n="phone" />Call {cfg.phone}</a>
        </div>
      </div>
    </section>
  );

  const FindUs = ({ cfg }) => {
    const q = encodeURIComponent(cfg.mapsQ);
    const hours = [["Monday - Tuesday", "9am - 5pm"], ["Wednesday", "9am - 7pm"], ["Thursday - Friday", "9am - 5pm"]];
    return (
      <section className="sec" id="find-us" aria-labelledby="find-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="find-h">Find our <span className="ul">Hook Road</span> clinic</h2></div>
          <div className="find">
            <div className="find__card">
              <div><h3 className="h3">Chessington</h3></div>
              <div className="find__row"><span className="ic"><Ic n="pin" /></span><p><b>Address</b>{cfg.address}</p></div>
              <div className="find__row"><span className="ic"><Ic n="phone" /></span><p><b>Phone</b><a href={"tel:" + cfg.tel}>{cfg.phone}</a></p></div>
              <div className="find__row"><span className="ic"><Ic n="clock" /></span><div><p><b>Opening hours</b></p><ul className="hours">{hours.map(([d, h]) => <li key={d}><span>{d}</span><span>{h}</span></li>)}</ul></div></div>
              <div className="find__row"><span className="ic"><Ic n="access" /></span><p><b>Access</b>Wheelchair accessible entrance</p></div>
              <div className="find__btns">
                <a className="btn btn--primary" href={"https://www.google.com/maps/search/?api=1&query=" + q} target="_blank" rel="noopener">Open in Google Maps</a>
                <a className="btn btn--secondary" href={"https://maps.apple.com/?q=" + q} target="_blank" rel="noopener">Open in Apple Maps</a>
              </div>
            </div>
            <div className="find__map"><iframe title="Map showing Love Teeth Dental Chessington on Hook Road" loading="lazy" src={"https://www.google.com/maps?q=" + q + "&output=embed"}></iframe></div>
          </div>
        </div>
      </section>
    );
  };

  const Footer = () => {
    const B = "https://www.loveteethdental.co.uk/";
    return (
      <footer className="ftr">
        <div className="wrap">
          <a className="ftr__logo" href={B} target="_blank" rel="noopener"><img src="lt/img/logo.png" alt="Love Teeth Dental Practice" width="152" height="56" /></a>
          <nav className="ftr__links" aria-label="Legal">
            <a href={B} target="_blank" rel="noopener">Love Teeth Dental Surrey</a>
            <a href="https://loveteethdental.co.uk/complaints-procedure/" target="_blank" rel="noopener">Complaints Procedure</a>
            <a href="https://loveteethdental.co.uk/privacy-policy/" target="_blank" rel="noopener">Privacy Policy</a>
            <a href="https://loveteethdental.co.uk/cookie-policy/" target="_blank" rel="noopener">Cookie Policy</a>
            <a href="https://www.gdc-uk.org/" target="_blank" rel="noopener">GDC</a>
          </nav>
          <p className="ftr__legal">Love Teeth Hook Limited is an Appointed Representative of Chrysalis Finance Limited, which is authorised and regulated by the Financial Conduct Authority. Love Teeth Hook Limited is a credit broker, not a lender. Finance is subject to status.</p>
          <div className="ftr__base">
            <span>© 2026 Love Teeth Dental Practice</span>
            <span>Website developed by <a href="https://www.xceleratordental.com/" target="_blank" rel="noopener">Xcelerator Dental</a></span>
          </div>
        </div>
      </footer>
    );
  };

  const MobileBar = ({ cfg }) => {
    const [show, setShow] = useState(false);
    useEffect(() => {
      document.body.classList.add("has-mbar");
      const f = () => { const r = document.getElementById("request"); setShow(r ? r.getBoundingClientRect().bottom < 0 : window.scrollY > 600); };
      f(); window.addEventListener("scroll", f, { passive: true }); return () => window.removeEventListener("scroll", f);
    }, []);
    return (
      <div className={"mbar" + (show ? " show" : "")} aria-hidden={!show}>
        <a className="mbar__call" href={"tel:" + cfg.tel} aria-label={"Call " + cfg.phone} tabIndex={show ? 0 : -1}><Ic n="phone" /></a>
        <a className="btn btn--primary" href="#request" tabIndex={show ? 0 : -1}>Request your open day slot</a>
      </div>
    );
  };

  function App() {
    const cfg = CFG;
    return (
      <React.Fragment>
        <W.LtHeader cfg={cfg} />
        <main>
          <W.LtHero cfg={cfg} />
          <W.LtUsps />
          <W.LtBeforeAfter />
          <W.LtReviews />
          <W.LtIncluded cfg={cfg} />
          <W.LtBenefits />
          <Journey cfg={cfg} />
          <DrKP />
          <Why />
          <Team />
          <Finance />
          <How />
          <Faq />
          <Final cfg={cfg} />
          <FindUs cfg={cfg} />
        </main>
        <Footer />
        <MobileBar cfg={cfg} />
      </React.Fragment>
    );
  }
  Object.assign(window, { LtCFG: CFG, LtFindUs: FindUs, LtFooter: Footer, LtFinal: Final });
  if (!window.LT_SKIP_APP) ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();