/* Love Teeth Dental Chessington - Invisalign open day: icons, header, hero, USPs, reviews, offer, benefits */
(function () {
  const { useState, useEffect } = React;

  const P = {
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4" /></>,
    check: <path d="M20 6 9 17l-5-5" />,
    plus: <path d="M12 5v14M5 12h14" />,
    diamond: <><path d="M6 3h12l4 6-10 13L2 9Z" /><path d="M11 3 8 9l4 13 4-13-3-6M2 9h20" /></>,
    gift: <><rect x="3" y="8" width="18" height="4" rx="1" /><path d="M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5" /></>,
    star: <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" />,
    trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" /><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" /></>,
    tag: <><path d="M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r="1.2" /></>,
    sparkle: <path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z" />,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="m9 12 2 2 4-4" /></>,
    chat: <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />,
    scan: <><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" /><path d="M7 12h10" /></>,
    eye: <><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></>,
    utensils: <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" />,
    feather: <><path d="M12.67 19a2 2 0 0 0 1.42-.59l6.31-6.31a6.12 6.12 0 0 0-8.66-8.66l-6.32 6.31A2 2 0 0 0 4.83 11.2V19Z" /><path d="M16 8 2 22M17.5 15H9" /></>,
    clipboard: <><rect x="8" y="2" width="8" height="4" rx="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 14l2 2 4-4" /></>,
    clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
    heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />,
    tv: <><rect x="2" y="7" width="20" height="15" rx="2" /><path d="m17 2-5 5-5-5" /></>,
    access: <><circle cx="16" cy="4" r="1.5" /><path d="m18 19 1-7-6 1M5 8l3-3 5.5 3-2.36 3.5M4.24 14.5a5 5 0 0 0 6.88 6M13.76 17.5a5 5 0 0 0-6.88-6" /></>,
    card: <><rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20M6 15h4" /></>,
    pin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></>,
    arrowL: <path d="M15 18l-6-6 6-6" />,
    arrowR: <path d="M9 18l6-6-6-6" />,
  };
  const Ic = ({ n }) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[n]}</svg>;
  const Spark = ({ className, style }) => <svg className={className} style={style} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0Z" /></svg>;
  const Stars = () => <span className="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">{P.star}</svg>)}</span>;
  const GMark = () => (
    <svg className="gmark" viewBox="0 0 48 48" aria-label="Google" role="img">
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
    </svg>
  );

  const Promo = ({ cfg }) => (
    <div className="promo"><Ic n="calendar" /><span>Invisalign open day<span className="promo__x"> at our Chessington clinic</span> - <b>{cfg.dateLong}</b><span className="promo__x"> - places limited</span></span></div>
  );

  const Header = ({ cfg }) => (
    <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">Request your open day slot</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="Request your open day slot"><Ic n="calendar" /></a>
        </div>
      </div>
    </header>
  );

  const Countdown = ({ end, className }) => {
    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={"count-wrap " + (className || "")}>
        <p className="count__l">Open day in</p>
        <div className="count" role="timer" aria-label={"Open day in " + cells[0][0] + " days and " + cells[1][0] + " hours"}>
          {cells.map(([n, u]) => <div className="count__c" key={u}><span className="count__n">{String(n).padStart(2, "0")}</span><span className="count__u">{u}</span></div>)}
        </div>
      </div>
    );
  };

  const LeadForm = ({ cfg }) => {
    const [sent, setSent] = useState(false);
    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 time on {cfg.dateShort}.</p>
          <p>Prefer to talk now? Call <a href={"tel:" + cfg.tel}>{cfg.phone}</a></p>
        </div>
      );
    }
    return (
      <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); window.location.href = encodeURI("Love Teeth Chessington - Invisalign Open Day Thank You.html"); }}>
        <div className="field"><label className="sr-only" htmlFor="f-name">Name</label><input id="f-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" 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" type="tel" required placeholder="Phone number" autoComplete="tel" inputMode="tel" /></div>
        <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">Request your open day slot</button>
        <p className="form__note">Our team will call you to arrange your time.</p>
      </form>
    );
  };

  const Hero = ({ cfg }) => (
    <section className="hero" id="top" aria-labelledby="hero-h1">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <h1 id="hero-h1">Up to <span className="ul">£1,000 off</span> Invisalign at our Chessington Open Day</h1>
          <ul className="ticks hero__ticks">
            {[["Free professional teeth whitening", ", worth £325"], ["Free removable retainers", ", worth up to £330"], ["Free consultation", ", 3D scan, X-rays and photos"]].map(([t, x]) => <li key={t}><span className="tk"><Ic n="check" /></span><span>{t}<span className="hero__tx">{x}</span></span></li>)}
          </ul>
          <p className="hero__date"><span className="ic"><Ic n="calendar" /></span><span>{cfg.dateLong}, 9 till 5</span></p>
          <Countdown end={cfg.countdownEnd} className="count--desk" />
        </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 }} />
          <img className="hero__badge" src="lt/img/invisalign-diamond-apex.png" alt="Invisalign Diamond Apex provider" />
        </div>
        <div className="fcard" id="request">
          <h2 className="fcard__t">Limited slots! Request yours now.</h2>
          <LeadForm cfg={cfg} />
        </div>
        <Countdown end={cfg.countdownEnd} className="count--mob" />
      </div>
    </section>
  );

  const Usps = () => {
    const items = [
      ["diamond", "Invisalign Diamond Apex provider - top 1% in Europe"],
      ["gift", "Savings package worth up to £1,805"],
      ["star", "Rated 4.9 stars from over 500 Google reviews"],
      ["trophy", "Practice of the Year, Private Dentistry Awards 2024"],
    ];
    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 BeforeAfter = () => {
    const pics = Array.from({ length: 12 }, (_, i) => "lt/img/ba/ba-" + String(i + 1).padStart(2, "0") + ".jpg");
    const row = (dup) => pics.map((src, i) => (
      <li className="ba__item" key={(dup ? "d" : "") + i} aria-hidden={dup || undefined}>
        <img src={src} alt={dup ? "" : "Before and after photos of a Love Teeth patient's smile"} loading="lazy" />
        <span className="ba__tag ba__tag--b">Before</span><span className="ba__tag ba__tag--a">After</span>
      </li>
    ));
    return (
      <section className="ba-sec" aria-label="Before and after smiles">
        <div className="ba">
          <ul className="ba__track">{row(false)}{row(true)}</ul>
        </div>
      </section>
    );
  };

  const Reviews = () => {
    const revs = [
      ["Stephanie Marx", "So far my experience with Love Teeth Chessington has been fantastic. Megna is warm and professional, she really listened to what I want to achieve and pieced together a bespoke dental plan for me."],
      ["Jasmine Jackson", "If you are an anxious patient like myself, rest assured you will be very well looked after."],
    ];
    return (
      <section className="sec" id="reviews" aria-labelledby="rv-h">
        <div className="wrap">
          <div className="shead">
            <h2 className="h2" id="rv-h">What our <span className="ul">Chessington</span> patients say</h2>
            <div className="rv__top"><span className="rv__score"><GMark /><span>4.9</span><Stars /><span>from over 500 Google reviews</span></span></div>
          </div>
          <div className="rv__grid">
            {revs.map(([n, q]) => (
              <figure className="rv" key={n} style={{ margin: 0 }}>
                <div className="rv__head">
                  <span className="rv__av" aria-hidden="true">{n[0]}</span>
                  <div><p className="rv__n">{n}</p><p className="rv__m">Reviewed on Google</p></div>
                  <GMark />
                </div>
                <Stars />
                <blockquote>{q}</blockquote>
                <span className="rv__q" aria-hidden="true">{"\u201D"}</span>
              </figure>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const Included = ({ cfg }) => {
    const items = [
      ["tag", "Up to £1,000 off your Invisalign treatment", "The straighter smile you've been thinking about for years, for considerably less.", null],
      ["sparkle", "Free professional teeth whitening", "Once your aligners have done their work, we brighten your smile in the practice so the result looks truly finished.", "Worth £325"],
      ["shield", "Free removable retainers", "Retainers hold your teeth where your aligners moved them, protecting your result for years to come. They're worth £165 per arch.", "Worth up to £330"],
      ["chat", "Free consultation with the dentist", "Unhurried time to talk through what you'd like to change and ask anything at all, with no pressure.", "Worth £50"],
      ["scan", "Free 3D scan, custom treatment plan, X-rays and photos", "A precise picture of your teeth and a plan built around them, not a guess.", "Worth £100"],
    ];
    return (
      <section className="sec sec--blush" id="offer" aria-labelledby="inc-h">
        <div className="wrap">
          <div className="shead">
            <h2 className="h2" id="inc-h">Everything included in your open day <span className="ul">savings</span> package</h2>
            <p className="lead">Book a slot on {cfg.dateShort} and this is what's waiting for you.</p>
          </div>
          <div className="inc">
            <ol className="inc__list">
              {items.map(([ic, t, d, v], i) => (
                <li className={"inc__item" + (i === 0 ? " inc__item--lead" : "")} key={t}>
                  <span className="ic"><Ic n={ic} /></span>
                  <div><h3 className="h3">{t}</h3><p>{d}</p></div>
                  {v && <span className="inc__val">{v}</span>}
                </li>
              ))}
            </ol>
            <aside className="inc__sum" aria-label="Total savings package">
              <p className="inc__k">Total savings package</p>
              <p className="inc__big"><small>worth up to</small>£1,805</p>
              <a className="btn btn--primary btn--block" href="#request">Request your open day slot</a>
            </aside>
          </div>
        </div>
      </section>
    );
  };

  const Benefits = () => {
    const items = [
      ["eye", "Worried people will notice?", "Invisalign aligners are clear and sit closely over your teeth. Most people won't know you're wearing them - in meetings, on nights out or in photos."],
      ["utensils", "Don't want to give up your favourite food?", "The aligners come out to eat, drink, brush and floss. No brackets or wires, and no list of foods to avoid."],
      ["feather", "Concerned about comfort?", "Each new aligner brings a feeling of gentle pressure for a day or two - a sign it's working. With nothing fixed to your teeth, there are no wires to break or rub."],
      ["clipboard", "Not sure it will work for you?", "Your 3D scan and treatment plan show how your teeth are expected to move before you commit to anything."],
      ["clock", "Short on time?", "Once treatment is underway, you'll usually visit us around every six weeks."],
    ];
    return (
      <section className="sec" id="benefits" aria-labelledby="ben-h">
        <div className="wrap ben">
          <div className="ben__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="ben__copy">
            <h2 className="h2" id="ben-h">Straighten your teeth without putting <span className="ul">life</span> on hold</h2>
            <ul className="ben__list">
              {items.map(([ic, t, d]) => <li key={t}><span className="ic"><Ic n={ic} /></span><div><h3 className="h3">{t}</h3><p>{d}</p></div></li>)}
            </ul>
            <a className="btn btn--primary" href="#request">Request your open day slot</a>
          </div>
        </div>
      </section>
    );
  };

  Object.assign(window, { LtIc: Ic, LtSpark: Spark, LtStars: Stars, LtGMark: GMark, LtPromo: Promo, LtHeader: Header, LtHero: Hero, LtUsps: Usps, LtReviews: Reviews, LtBeforeAfter: BeforeAfter, LtIncluded: Included, LtBenefits: Benefits });
})();