/* De-ientes Bedford - early Black Friday ortho open day: included, benefits, journey, clinician, why choose, pricing, treatments explained */
(function () {
  const { useState, useRef, useEffect } = React;
  const DIcon = window.DIcon;
  const Cta = () => <a className="btn btn--primary" href="#book">Request your open day place</a>;
  const Pic = ({ src, alt, id, pos }) => src ? <img src={src} alt={alt} loading="lazy" style={pos ? { objectPosition: pos } : undefined} /> : <image-slot id={id} shape="rect" placeholder={alt}></image-slot>;

  const Included = () => {
    const items = [
      ["£500 off your clear aligners or lingual braces.", "The straighter smile you've been putting off, for less. Clear aligners usually start from £4,500 - on the day, they start from £4,000.", "dt/img/aligner-kit.webp", "A De-ientes aligner kit with clear aligners in their cases", "center 55%"],
      ["Free Boutique at-home whitening, worth £425.", "Because the finishing touch matters. Once your teeth are straight, whitening brings out the brightness too, with custom trays made for you. (Whitening is available to patients aged 18 and over.)", "dt/img/smile-closeup.webp", "A close-up of a bright, white smile", "center 45%"],
      ["Free removable retainers, guaranteed for 1 year, worth £250.", "Retainers are what keep your new smile where it belongs. Yours are included, so the result you've worked for stays put.", "dt/img/saroshen-aligner-case.webp", "Dr Saroshen Naidoo showing a patient her clear trays in their case", "center 35%"],
      ["Free remote monitoring, where suitable.", "Fewer trips into the practice. Where it suits your treatment, we keep an eye on your progress remotely and only ask you in when you need to be.", "dt/img/assessment-tablet.webp", "A De-ientes dentist checking a patient's progress on a tablet", "center 30%"],
      ["Free orthodontic assessment with Dr Saroshen Naidoo, worth £250.", "A 3D scan, X-rays and a custom treatment plan. You'll know exactly what's possible, how long it should take and what it costs before you commit to anything.", "dt/img/saroshen-tablet.webp", "Dr Saroshen Naidoo talking a patient through her scans on a tablet", "20% 30%"],
    ];
    return (
      <section className="sec sec--paper" id="offer" aria-labelledby="inc-h">
        <div className="wrap">
          <div className="incx__head">
            <h2 className="incx__title" id="inc-h">Everything included in your savings package, <span className="hl">worth up to £1,425</span></h2>
          </div>
          <ol className="incx__list">
            {items.map(([t, d, img, alt, pos], i) => (
              <li className="incx__row" key={t} style={{ "--i": i }}>
                <div className="incx__copy"><h3 className="h3">{t}</h3><p>{d}</p></div>
                <div className="incx__img"><Pic src={img} alt={alt} id={"dt-inc-" + i} pos={pos} /></div>
              </li>
            ))}
          </ol>
        </div>
        <a className="istrip" href="#book">
          <span className="istrip__inner">
            <span className="istrip__k">One day only</span>
            <span className="istrip__t">Saturday 21st November. Decide on the day to secure £500 off and the full savings package.</span>
            <span className="istrip__go">Request your place<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></span>
          </span>
        </a>
      </section>
    );
  };

  const Benefits = () => {
    const items = [
      ["\u201CI don't want people to notice.\u201D", "Clear aligners are close to invisible, and lingual braces sit on the back of your teeth, out of sight. Most people will never know you're having treatment."],
      ["\u201CWill it fit around my life?\u201D", "Aligners come out to eat, drink and brush, so meals and cleaning stay normal. Remote monitoring, where suitable, means fewer appointments to fit around work or school."],
      ["\u201CWill it actually work for me?\u201D", "Your 3D scan shows the starting point in detail, and your plan is built around your teeth, not a template. If a different route would suit you better, Dr Saroshen will tell you honestly."],
      ["\u201CIs it right for my child?\u201D", "Straightening during the growing years can be simpler and quicker. Your child will be seen by someone who treats children every week, in a calm, unhurried way, with you there throughout."],
      ["\u201CWill it be uncomfortable?\u201D", "Aligners are generally gentler than fixed braces, especially in the first week, and there are no wires to break. Any pressure usually settles within a couple of days of each new stage."],
    ];
    return (
      <section className="sec sec--cream" id="benefits" aria-labelledby="ben-h">
        <div className="wrap">
          <h2 className="h2 ben__h" id="ben-h">Straighter teeth, without the things you're <span className="hl">worried about</span></h2>
          <div className="split ben__split">
          <div className="split__img ben__img"><img src="dt/img/teen-with-dentist.webp" alt="A smiling teenage patient standing with his De-ientes dentist" loading="lazy" style={{ objectPosition: "center 30%" }} /></div>
            <div className="split__copy">
            <ul className="qlist">{items.map(([q, a]) => <li key={q}><DIcon name="check" /><div><b>{q}</b><span>{a}</span></div></li>)}</ul>
            </div>
          </div>
        </div>
      </section>
    );
  };

  const Journey = () => {
    const track = useRef(null);
    const [idx, setIdx] = useState(0);
    const [stops, setStops] = useState(1);
    useEffect(() => {
      const measure = () => { const el = track.current; const card = el && el.querySelector('.jcard'); if (!card) return; const step = card.offsetWidth + 24; setStops(Math.max(1, Math.round((el.scrollWidth - el.clientWidth) / step) + 1)); };
      measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure);
    }, []);
    const steps = [
      ["Request your place.", "Fill in the form and our Bedford team will call you to arrange your appointment time. A £30 refundable deposit secures your slot.", "dt/img/reception-desk.webp", "The De-ientes reception team smiling at the front desk"],
      ["Come and see us on Saturday 21st November.", "Meet Dr Saroshen Naidoo for your assessment, including a 3D scan and X-rays.", "dt/img/saroshen-patient-standing.webp", "Dr Saroshen Naidoo with a patient in the treatment room"],
      ["See your plan.", "Dr Saroshen talks you through your options, how long treatment should take and what it costs, in plain English.", "dt/img/plan-3d-model.webp", "Dr Saroshen Naidoo and a patient looking at a 3D model of her teeth on screen"],
      ["Decide on the day.", "Choose to go ahead on the day and the £500 off and full savings package are yours.", "dt/img/patient-sofa.webp", "A smiling patient sitting with his De-ientes dentist"],
      ["Start your new smile.", "Your treatment begins, supported by remote monitoring where suitable, with your retainers and whitening to finish.", "dt/img/patient-mirror-smile.webp", "A patient smiling at her teeth in a hand mirror"],
    ];
    const go = (d) => { const el = track.current; if (!el) return; const card = el.querySelector('.jcard'); const w = card ? card.offsetWidth + 24 : el.clientWidth; el.scrollBy({ left: d * w, behavior: 'smooth' }); };
    const onScroll = () => { const el = track.current; const card = el && el.querySelector('.jcard'); if (!card) return; setIdx(Math.min(stops - 1, Math.round(el.scrollLeft / (card.offsetWidth + 24)))); };
    return (
      <section className="sec sec--paper" id="journey" aria-labelledby="j-h">
        <div className="wrap">
          <div className="incx__head jhead">
            <h2 className="incx__title" id="j-h">Walk in curious, leave knowing <span className="hl">exactly what's possible</span></h2>
            <p className="lead">Simple, unhurried and no pressure. Here's what to expect.</p>
          </div>
          <ol className="jtrack" ref={track} onScroll={onScroll} tabIndex={0} aria-label="Open day journey steps, scroll sideways">
            {steps.map(([t, d, img, alt], i) => (
              <li className="jcard" key={t}>
                <div className="jcard__img"><Pic src={img} alt={alt} id={"dt-journey-" + i} pos={img === "dt/img/saroshen-patient-standing.webp" ? "center top" : undefined} /></div>
                <div className="jcard__body"><span className="jcard__n">{String(i + 1).padStart(2, "0")}</span><h3 className="h3">{t}</h3><p>{d}</p></div>
              </li>
            ))}
          </ol>
          <div className="jctl">
            <button type="button" className="jbtn" onClick={() => go(-1)} aria-label="Previous step" disabled={idx === 0}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
            <button type="button" className="jbtn jbtn--on" onClick={() => go(1)} aria-label="Next step" disabled={idx >= stops - 1}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M9 18l6-6-6-6" /></svg></button>
            <div className="jdots" aria-hidden="true">{Array.from({ length: stops }, (_, i) => <i key={i} className={i === idx ? "on" : ""}></i>)}</div>
            <span className="jcount">{String(idx + 1).padStart(2, "0")} / {String(stops).padStart(2, "0")}</span>
            <a className="btn btn--primary jcta" href="#book">Request your open day place</a>
          </div>
        </div>
      </section>
    );
  };

  const Clinician = () => (
    <section className="sec sec--cream" id="team" aria-labelledby="team-h">
      <div className="wrap split">
        <div className="split__img preet__img"><img src="dt/img/saroshen-standing.webp" alt="Dr Saroshen Naidoo smiling in his De-ientes uniform" loading="lazy" style={{ objectPosition: "center 18%" }} /></div>
        <div className="split__copy">
          <h2 className="h2" id="team-h">Meet <span className="hl">Dr Saroshen Naidoo</span></h2>
          <p className="lead">Dr Saroshen Naidoo holds a postgraduate diploma in orthodontics and leads orthodontic care at De-ientes in Bedford and Clapham, including the practice's NHS orthodontic contract. That means children and adults are seen here every week, often with straightforward needs and sometimes with the harder ones.</p>
          <p className="kp__p">Dr Saroshen has extensive experience with challenging cases in fixed braces and aligners, including impacted canines - teeth that haven't come through where they should. Whether your case is simple or complex, you'll get a plan built on real experience and an honest view of what will work.</p>
          <p className="kp__p">As part of the Naidoo family, Dr Saroshen also carries the values De-ientes was built on: getting to know patients properly and looking after them for years, not just for one treatment.</p>
        </div>
      </div>
    </section>
  );

  const WhyChoose = () => {
    const [i, setI] = useState(0);
    const items = [
      ["25 years as a family practice.", "De-ientes is family-run, and once patients find us, they tend to stay.", "dt/img/team-family-sofa.webp", "Dr Saroshen Naidoo and the De-ientes family team together in the practice"],
      ["All under one roof.", "Orthodontics, implants, IV sedation and root canal treatment from Dr Kris Fernandes, a GDC-registered specialist in endodontics - so as your needs change, you won't need to look elsewhere.", "dt/img/team-together.webp", "The De-ientes team together in the practice"],
      ["See it before you start.", "iTero 3D scanning and on-site X-rays give an accurate picture of your teeth from day one.", "dt/img/plan-on-screen.webp", "A De-ientes clinician talking a patient through his X-rays on screen"],
      ["Easy to reach.", "In the heart of Bedford town centre, with patient parking and step-free access, and open six days a week.", "dt/img/practice-entrance.webp", "The front door of De-ientes at No. 28, with the practice sign beside it"],
    ];
    const n = items.length, nx = (i + 1) % n;
    const pad = (v) => String(v).padStart(2, "0");
    return (
      <section className="sec sec--paper" id="why" aria-labelledby="why-h">
        <div className="wrap">
          <div className="whyx__head">
            <h2 className="incx__title" id="why-h">Why <span className="hl">Bedford families</span> choose De-ientes</h2>
          </div>
          <div className="whyx">
            <div className="whyx__copy" aria-live="polite">
              <span className="whyx__n">{pad(i + 1)}</span>
              <h3 className="whyx__t">{items[i][0]}</h3>
              <p>{items[i][1]}</p>
              <div className="jctl whyx__ctl">
                <div className="jdots" aria-hidden="true">{items.map((_, k) => <i key={k} className={k === i ? "on" : ""}></i>)}</div>
                <span className="jcount">{pad(i + 1)} / {pad(n)}</span>
                <button type="button" className="jbtn" onClick={() => setI((i - 1 + n) % n)} aria-label="Previous reason"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg></button>
                <button type="button" className="jbtn jbtn--on" onClick={() => setI(nx)} aria-label="Next reason"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><path d="M9 18l6-6-6-6" /></svg></button>
              </div>
            </div>
            <div className="whyx__pics">
              <div className="whyx__pic whyx__pic--a" key={"a" + i}><Pic src={items[i][2]} alt={items[i][3]} id={"dt-why-" + i} /></div>
              <button type="button" className="whyx__pic whyx__pic--b" key={"b" + nx} onClick={() => setI(nx)} aria-label={"Next: " + items[nx][0]}>{items[nx][2] ? <img src={items[nx][2]} alt="" loading="lazy" /> : <image-slot id={"dt-why-" + nx} shape="rect" placeholder={items[nx][3]}></image-slot>}</button>
            </div>
          </div>
        </div>
      </section>
    );
  };

  const Pricing = () => (
    <section className="sec sec--navy" id="finance" aria-labelledby="fin-h">
      <div className="wrap fin">
        <div className="split__copy">
          <h2 className="h2" id="fin-h">Clear pricing, with time to <span className="hl">spread the cost</span></h2>
          <table className="ptable">
            <caption className="sr-only">Open day pricing</caption>
            <thead><tr><th scope="col">Treatment</th><th scope="col">Usual price</th><th scope="col">On open day</th></tr></thead>
            <tbody>
              <tr><th scope="row">Clear aligners (Invisalign, Spark, 32co)</th><td data-label="Usual price">From £4,500</td><td className="ptable__open" data-label="On open day">From £4,000, plus the savings package</td></tr>
              <tr><th scope="row">Lingual braces</th><td data-label="Usual price">Priced at your assessment</td><td className="ptable__open" data-label="On open day">£500 off, plus the savings package</td></tr>
            </tbody>
          </table>
          <p className="lead">You'll get the full cost in writing before you commit. If you'd like to spread it, we offer 0% finance with Medenta over up to 12 months on treatment over £500, subject to status.</p>
          <Cta />
        </div>
        <div className="split__img fin__img"><img src="dt/img/team-aligner-chat.webp" alt="The De-ientes team talking a patient through her options" loading="lazy" style={{ objectPosition: "center 30%" }} /></div>
      </div>
    </section>
  );

  const Treatments = () => {
    const [on, setOn] = useState(0);
    const tx = [
      { t: "Clear aligners", img: "dt/img/invisalign-box.webp", alt: "Invisalign clear aligner packs and cases", pos: "center 40%",
        d: "Clear aligners are a series of thin, clear, custom-made trays. Each set moves your teeth a small step, and you switch to the next set every week or two. We offer Invisalign, Spark and 32co, and Dr Saroshen will recommend the one that suits your teeth and lifestyle best. Aligners are suitable for many adults and children." },
      { t: "Lingual braces", img: "dt/img/lingual-braces.webp", alt: "A dental mirror showing lingual braces fitted behind a patient's teeth", pos: "35% center",
        d: "Lingual braces are fixed braces bonded to the back of your teeth instead of the front. They do everything traditional braces do, including the more complex movements, while staying hidden. They're a good fit for adults who want the reliability of fixed braces without anyone seeing them." },
    ];
    return (
      <section className="sec sec--cream" id="treatments" aria-labelledby="tx-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="tx-h"><span className="hl">Clear aligners</span> and <span className="hl">lingual braces</span>, explained</h2></div>
          <div className="txp">
            {tx.map((x, i) => (
              <article key={x.t} className={"txp__panel" + (on === i ? " is-on" : "")} onMouseEnter={() => setOn(i)} onFocus={() => setOn(i)} onClick={() => setOn(i)}>
                {x.img ? <img className="txp__bg" src={x.img} alt={x.alt} loading="lazy" style={{ objectPosition: x.pos }} /> : <image-slot className="txp__bg" id={"dt-tx-" + i} shape="rect" placeholder={x.alt} style={{ position: "absolute", inset: 0 }}></image-slot>}
                <div className="txp__shade"></div>
                <span className="txp__vert" aria-hidden="true">{x.t}</span>
                <div className="txp__copy">
                  <h3 className="txp__t">{x.t}</h3>
                  <hr className="rule" />
                  <p className="txp__d">{x.d}</p>
                </div>
              </article>
            ))}
          </div>
          <p className="txp__note"><b>How your plan comes together:</b> your 3D scan builds a precise digital model of your teeth. From that, Dr Saroshen maps out how they'll move, step by step, from where they are now to the finished smile. So you know the likely result and the timeline before treatment begins.</p>
        </div>
      </section>
    );
  };

  Object.assign(window, { DtIncluded: Included, DtBenefits: Benefits, DtJourney: Journey, DtClinician: Clinician, DtWhy: WhyChoose, DtPricing: Pricing, DtTreatments: Treatments });
})();