/* De-ientes Bedford - early Black Friday ortho open day: icons, header, strip, hero, form, USPs */
(function () {
  const { useState } = React;

  const CFG = {
    phone: "01234 263050", tel: "+441234263050", email: "info@de-ientes.co.uk",
    name: "De-ientes Bedford", address: "Old Gaston House, 28 Lurke Street, Bedford, MK40 3HU",
    date: "Saturday 21st November 2026, 9am to 3pm",
    site: "https://thecosmeticdentalpractice.co.uk/",
    privacy: "https://thecosmeticdentalpractice.co.uk/privacy-policy/",
    privacyBox: "policy/privacy-policy-lightbox/",
    thanks: "thank-you.html",
    landing: "./",
  };

  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" />,
    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" /></>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 7-10 6L2 7" /></>,
    menu: <path d="M4 6h16M4 12h16M4 18h16" />,
    x: <path d="M18 6 6 18M6 6l12 12" />,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></>,
    check: <path d="M20 6 9 17l-5-5" />,
    plus: <path d="M12 5v14M5 12h14" />,
    clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
    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" /></>,
    arrowR: <path d="M5 12h14M13 6l6 6-6 6" />,
  };
  const DIcon = ({ name }) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{P[name]}</svg>
  );

  const Logo = () => (
    <a className="logo" href="#top" aria-label="De-ientes Family Dental Group - back to top">
      <img className="logo__full" src="dt/img/logo.png" alt="De-ientes Family Dental Group" width="147" height="58" />
    </a>
  );

  const Header = () => {
    const [open, setOpen] = useState(false);
    const links = [["The offer", "#offer"], ["Your journey", "#journey"], ["Pricing", "#finance"], ["FAQs", "#faq"]];
    return (
      <header className="hdr">
        <div className="wrap hdr__row">
          <button className="hdr__icon hdr__icon--menu" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen(!open)}>
            <DIcon name={open ? "x" : "menu"} />
          </button>
          <Logo />
          <nav className="nav" aria-label="Page sections">{links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}</nav>
          <div className="hdr__end">
            <a className="hdr__phone" href={"tel:" + CFG.tel}><DIcon name="phone" />{CFG.phone}</a>
            <a className="btn btn--primary" href="#book">Request your open day place</a>
            <a className="hdr__icon" href={"tel:" + CFG.tel} aria-label={"Call " + CFG.phone}><DIcon name="phone" /></a>
            <a className="hdr__icon hdr__icon--book" href="#book" aria-label="Request your open day place"><DIcon name="calendar" /></a>
          </div>
        </div>
        {open && (
          <div className="drawer" onClick={() => setOpen(false)}>
            {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
            <a href="#find-us">Find us</a>
          </div>
        )}
      </header>
    );
  };

  const Strip = () => (
    <div className="marquee marquee--static">
      <p className="marquee__item">Early Black <em>Friday</em> open day</p>
    </div>
  );

  /* The real ActiveCampaign form (de-ientes account, form 23). AC injects the
     <form> into ._form_23; ac-form.js loads the embed after this mounts and
     re-skins it with the design's .form classes. Treatment and location are
     answered by the page (data-preset) and hidden from the visitor. Memoised
     so React never re-renders over AC's markup. */
  const LeadForm = React.memo(() => {
    const ref = React.useRef(null);
    React.useEffect(() => { if (window.DtAcForm) window.DtAcForm.mount(ref.current); }, []);
    return (
      <div className="ac-form" ref={ref}
        data-submit-label="Request your open day place"
        data-thank-you={CFG.thanks}
        data-preset="field[13]=Teeth straightening|field[14]=Bedford"
        data-privacy={CFG.privacyBox}
        data-consent="By submitting your details you agree to our {link}.">
        <div className="_form_23"></div>
        <p className="ac-form__fallback">The form didn't load. Call <a href={"tel:" + CFG.tel}>{CFG.phone}</a> and we'll book you in over the phone instead.</p>
        <noscript><p className="form__legal">The form needs JavaScript. Call <a href={"tel:" + CFG.tel}>{CFG.phone}</a> and we'll book you in over the phone instead.</p></noscript>
      </div>
    );
  }, () => true);

  const USPS = ["Free whitening and retainers", "Free orthodontic assessment, worth £250", "A total savings package worth up to £1,425", "Cared for local families for 25 years"];

  const Hero = () => (
    <section className="hero" id="top" aria-labelledby="hero-h1">
      <div className="hero__bg"><video className="hero__video" src="dt/video/hero.mp4" poster="dt/img/hero-mirror.webp" autoPlay muted loop playsInline preload="auto" aria-hidden="true" tabIndex={-1}></video></div>
      <div className="wrap hero__grid">
        <div className="hero__side">
          <ul className="tabs">
            {USPS.map((t) => (
              <li className="tab" key={t}>
                <div className="tab__btn"><span className="tab__t">{t}</span><span className="tab__tick" aria-hidden="true"><DIcon name="check" /></span></div>
              </li>
            ))}
          </ul>
        </div>
        <div className="panel" id="book">
          <h1 id="hero-h1"><em>£500 off</em> aligners and lingual braces in Bedford</h1>
          <p className="panel__date"><DIcon name="calendar" /><span><b>{CFG.date}</b></span></p>
          <p className="panel__sub">One relaxed Saturday visit with Dr Saroshen Naidoo, a 3D look at your teeth and a plan made just for you.</p>
          <LeadForm />
        </div>
      </div>
    </section>
  );

  Object.assign(window, { DtCFG: CFG, DIcon, DtLogo: Logo, DtHeader: Header, DtStrip: Strip, DtHero: Hero });
})();