/* Love Teeth Dental - Black Friday deals landing page (composite bonding + Invisalign open day) */
(function () {
  const { useState, useEffect } = React;
  const { LtIc: Ic, LtSpark: Spark, LtFooter: Footer } = window;
  const CFG = { phone: "020 8337 0629", tel: "+442083370629", openDay: "2026-11-21T09:00:00Z", hook: "https://hooks.zapier.com/hooks/catch/7821429/CDeD7izEn5OnzcQ1r/" };

  const Promo = () => (
    <div className="promo"><Ic n="gift" /><span><b>Black Friday deals</b><span className="promo__x"> - 20% off composite bonding and £1,000 off Invisalign at our open day</span></span></div>
  );

  const Header = () => (
    <header className="hdr">
      <div className="wrap hdr__row">
        <a className="hdr__phone" href={"tel:" + CFG.tel}><span className="ic"><Ic n="phone" /></span>{CFG.phone}</a>
        <a className="hdr__logo" href="#top" aria-label="Love Teeth Dental Practice - back to top"><img src="lt/img/logo.png" alt="Love Teeth Dental Practice" width="163" height="60" /></a>
        <div className="hdr__end">
          <a className="btn btn--primary" href="#request">Book your spot now</a>
          <a className="hdr__icon" href={"tel:" + CFG.tel} aria-label={"Call " + CFG.phone}><Ic n="phone" /></a>
          <a className="hdr__icon" href="#request" aria-label="Book your spot now"><Ic n="calendar" /></a>
        </div>
      </div>
    </header>
  );

  const Countdown = ({ end, label }) => {
    const target = new Date(end).getTime();
    const [now, setNow] = useState(Date.now());
    useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
    const left = Math.max(0, target - now);
    const cells = [[Math.floor(left / 864e5), "Days"], [Math.floor(left / 36e5) % 24, "Hours"], [Math.floor(left / 6e4) % 60, "Mins"], [Math.floor(left / 1e3) % 60, "Secs"]];
    return (
      <div className="bf-count">
        <p className="bf-count__l">{label}</p>
        <div className="bf-count__g" role="timer" aria-label={label + " " + cells[0][0] + " days and " + cells[1][0] + " hours"}>
          {cells.map(([n, u]) => <div key={u}><b>{String(n).padStart(2, "0")}</b><span>{u}</span></div>)}
        </div>
      </div>
    );
  };

  const LeadForm = () => {
    const [sent, setSent] = useState(false);
    const [deal, setDeal] = useState("");
    const [busy, setBusy] = useState(false);
    // Sends the lead to Zapier (which emails it on), then goes to the thank-you page.
    // The redirect happens even if the request fails or is slow, so the visitor is never stuck.
    const submit = (e) => {
      e.preventDefault();
      if (busy) return;
      setBusy(true);
      const data = new URLSearchParams(new FormData(e.target));
      data.set("page", window.location.href);
      const go = () => { setSent(true); window.location.href = "black-friday-thank-you" + (deal ? "?deal=" + deal : ""); };
      try { (window.dataLayer = window.dataLayer || []).push({ event: "lead_form_submit", deal }); } catch (err) {}
      const post = fetch(CFG.hook, { method: "POST", mode: "no-cors", keepalive: true, body: data }).catch(() => {});
      Promise.race([post, new Promise((r) => setTimeout(r, 4000))]).then(go);
    };
    if (sent) {
      return (
        <div className="form__done" role="status">
          <span className="ic"><Ic n="check" /></span>
          <p className="fcard__t">Thank you, your request is in</p>
          <p>Our team will call you to arrange your free consultation.</p>
          <p>Prefer to talk now? Call <a href={"tel:" + CFG.tel}>{CFG.phone}</a></p>
        </div>
      );
    }
    const opts = [["bonding", "Composite bonding"], ["invisalign", "Invisalign open day"]];
    return (
      <form className="form" onSubmit={submit}>
        <div className="field"><label className="sr-only" htmlFor="f-name">Name</label><input id="f-name" name="name" type="text" required placeholder="Name" autoComplete="name" /></div>
        <div className="field"><label className="sr-only" htmlFor="f-email">Email</label><input id="f-email" name="email" type="email" required placeholder="Email" autoComplete="email" /></div>
        <div className="field"><label className="sr-only" htmlFor="f-phone">Phone number</label><input id="f-phone" name="phone" type="tel" required placeholder="Phone number" autoComplete="tel" inputMode="tel" /></div>
        <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}><label htmlFor="f-website">Leave this field empty</label><input id="f-website" name="website" type="text" tabIndex={-1} autoComplete="off" /></div>
        <fieldset className="bf-opts">
          <legend>Which deal are you interested in?</legend>
          {opts.map(([v, l]) => (
            <label className="bf-opt" key={v}>
              <input type="radio" name="deal" value={v} required checked={deal === v} onChange={() => setDeal(v)} />
              <span>{l}</span>
            </label>
          ))}
        </fieldset>
        <p className="form__consent">By submitting your details you are agreeing to our <a href="https://loveteethdental.co.uk/privacy-policy/" target="_blank" rel="noopener">privacy policy</a>.</p>
        <button className="btn btn--primary btn--block" type="submit" disabled={busy}>{busy ? "Sending..." : "Book your spot now"}</button>
        <p className="form__note">Our team will call you to arrange your time.</p>
      </form>
    );
  };

  const Hero = () => (
    <section className="hero" id="top" aria-labelledby="hero-h1">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <h1 id="hero-h1">Big, bright smiles. Big, bright <span className="ul">savings</span>.</h1>
          <p className="bf-sub">Snap up our Black Friday deals</p>
          <p className="bf-intro">Been waiting for the perfect time to get your dream smile? From whitening and reshaping to straightening, with these dreamy deals there's no better time to get started.</p>
          <ul className="ticks hero__ticks">
            {[["20% off composite bonding", " until the end of November"], ["£1,000 off Invisalign", " at our open day, 21st November"]].map(([t, x]) => <li key={t}><span className="tk"><Ic n="check" /></span><span>{t}<span className="hero__tx">{x}</span></span></li>)}
          </ul>
        </div>
        <div className="hero__photo">
          <img src="lt/img/hero-smile.png" alt="A Love Teeth patient smiling at her new smile in a hand mirror" />
          <Spark className="hero__spark" style={{ right: 18, bottom: 18 }} />
        </div>
        <div className="fcard" id="request">
          <h2 className="fcard__t">Book your free consultation</h2>
          <LeadForm />
        </div>
      </div>
    </section>
  );

  const Usps = () => {
    const items = [
      ["diamond", "Invisalign Diamond Apex provider - top 1% in Europe"],
      ["star", "Rated 4.9 stars on Google"],
      ["trophy", "Practice of the Year, Private Dentistry Awards 2024"],
      ["heart", "Nationally Dental Phobia certified"],
    ];
    return (
      <section className="usps" aria-label="Why choose Love Teeth">
        <ul className="wrap usps__grid" style={{ listStyle: "none", margin: "0 auto" }}>
          {items.map(([ic, t]) => <li className="usp" key={t}><span className="ic"><Ic n={ic} /></span><p>{t}</p></li>)}
        </ul>
      </section>
    );
  };

  const Bonding = () => (
    <section className="sec" id="bonding" aria-labelledby="cb-h">
      <div className="wrap bf-split">
        <div className="bf-split__img"><img src="lt/img/patient-happy.jpg" alt="A smiling Love Teeth patient giving a thumbs up with the dental team" loading="lazy" /></div>
        <div className="bf-split__copy">
          <span className="bf-tag">Until the end of November</span>
          <h2 className="h2" id="cb-h"><span className="ul">20% off</span> composite bonding</h2>
          <p className="bf-sub">Restore, refine and rock your smile this festive season</p>
          <p>We're giving a merry 20% off our signature, stunning composite bonding until the end of November. If you have chips or gaps, or you've been wanting to enhance your smile for a while, this is your chance to save big on the ultimate glow-up.</p>
          <ul className="bf-chips">
            {[["sparkle", "Huge transformation"], ["clock", "One-day treatment"], ["tag", "Our best ever price"]].map(([ic, t]) => <li key={t}><span className="ic"><Ic n={ic} /></span>{t}</li>)}
          </ul>
          <a className="btn btn--primary" href="#request">Book your free consultation now</a>
        </div>
      </div>
    </section>
  );

  const OpenDay = () => {
    const items = [
      "Free 30 minute appointment with one of our experienced dentists",
      "£1,000 off all treatment plans signed up on the day",
      "Personalised 3D scan and treatment plan",
      "X-rays and photos",
      "Free retainers",
      "Free teeth whitening",
    ];
    return (
      <section className="sec bf-dark" id="open-day" aria-labelledby="od-h">
        <Spark className="bf-dark__spark" style={{ width: 90, height: 90, right: "5%", top: "10%" }} />
        <div className="wrap bf-od">
          <div className="bf-od__copy">
            <h2 className="h2" id="od-h">Invisalign Black Friday <span className="ul">open day</span></h2>
            <p className="hero__date bf-od__date"><span className="ic"><Ic n="calendar" /></span><span>Saturday 21st November 2026</span></p>
            <p className="bf-sub">Come for the treats, leave with a smile.</p>
            <p>Our Invisalign open day invites you to come along and enjoy a free consultation, where you can scoop up all this:</p>
            <ul className="ticks bf-od__list">{items.map((t) => <li key={t}><span className="tk"><Ic n="check" /></span><span>{t}</span></li>)}</ul>
            <p>That's right - we'll be giving £1,000 off Invisalign on all treatment plans, along with other exclusive offers available on the day.</p>
            <p className="bf-od__q">Ready for the smile of your dreams at the prices you've been dreaming of?</p>
            <a className="btn btn--primary" href="#request">Book your spot now</a>
          </div>
          <div className="bf-od__side">
            <div className="bf-od__img">
              <img src="lt/img/surgery-itero.jpg" alt="A Love Teeth treatment room with the iTero 3D scanner" loading="lazy" />
              <img className="bf-od__badge" src="lt/img/invisalign-diamond-apex.png" alt="Invisalign Diamond Apex provider" />
            </div>
            <Countdown end={CFG.openDay} label="Open day in" />
          </div>
        </div>
      </section>
    );
  };

  const Consult = () => {
    const steps = [
      ["chat", "Meet the dentist", "Every consultation is led by one of our dentists."],
      ["scan", "Your iTero scan and smile simulation", "A 3D scan of your teeth and a preview of your potential new smile."],
      ["clipboard", "Your options and custom plan", "Recommendations and a treatment plan made for you."],
      ["card", "Costs and next steps", "Our treatment coordinator talks you through the cost and what happens next."],
    ];
    return (
      <section className="sec sec--blush" id="consultation" aria-labelledby="con-h">
        <div className="wrap">
          <div className="shead">
            <h2 className="h2" id="con-h">What happens at your free <span className="ul">consultation</span></h2>
            <p className="lead">Whichever deal you choose, your consultation usually takes 30 to 60 minutes.</p>
          </div>
          <div className="bf-banner"><img src="lt/img/consult-room.jpg" alt="A Love Teeth consultation room with Invisalign branding" loading="lazy" /></div>
          <ol className="bf-steps">
            {steps.map(([ic, t, d], i) => (
              <li key={t}><span className="bf-steps__n">{i + 1}</span><span className="ic"><Ic n={ic} /></span><h3 className="h3">{t}</h3><p>{d}</p></li>
            ))}
          </ol>
          <p className="bf-fine">We take a £25 deposit to secure your consultation.</p>
        </div>
      </section>
    );
  };

  const Why = () => {
    const items = [
      ["diamond", "Top 1% for Invisalign in Europe", "Our clinics have achieved Invisalign Diamond Apex status."],
      ["star", "Led by Dr Kunal \u201CKP\u201D Patel", "An Invisalign global ambassador, and one of the top 50 most influential dentists in the UK."],
      ["trophy", "Award-winning care", "Winner of Practice of the Year, Patient Care and Child-Friendly Practice at the Private Dentistry Awards 2024."],
      ["heart", "Gentle with nervous patients", "Our team is nationally Dental Phobia certified."],
      ["scan", "Precise digital planning", "Our iTero scanners mean no messy moulds."],
      ["card", "0% finance over 12 months", "On treatment over £1,000, with no deposit needed. Finance subject to status."],
    ];
    return (
      <section className="sec" id="why" aria-labelledby="why-h">
        <div className="wrap">
          <div className="shead"><h2 className="h2" id="why-h">Why choose <span className="ul">Love Teeth</span>?</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 Final = () => (
    <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">Book your spot now</h2>
        <p>To make sure you get a spot, book now - they tend to get snapped up quicker than the mince pies. This is your time to make sure you get the perfect smile in time for Christmas.</p>
        <div className="final__actions">
          <a className="btn btn--white" href="#request">Book your spot now</a>
          <a className="btn btn--ghost" href={"tel:" + CFG.tel}><Ic n="phone" />Call {CFG.phone}</a>
        </div>
      </div>
    </section>
  );

  const MobileBar = () => {
    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}>Book your spot now</a>
      </div>
    );
  };

  function App() {
    return (
      <React.Fragment>
        <Promo />
        <Header />
        <main>
          <Hero />
          <Usps />
          <Bonding />
          <OpenDay />
          <Consult />
          <Why />
          <Final />
        </main>
        <Footer />
        <MobileBar />
      </React.Fragment>
    );
  }
  Object.assign(window, { BfCFG: CFG, BfPromo: Promo, BfHeader: Header });
  if (!window.BF_SKIP_APP) ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();