/* NEO Orthodontics - Black Friday open week: icons, header, marquee, hero, form, countdown, USPs */
(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" />,
    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" /></>,
    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" />,
    award: <><circle cx="12" cy="8" r="6" /><path d="M15.48 12.89 17 22l-5-3-5 3 1.52-9.11" /></>,
    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" /></>,
    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="M8 12h8" /></>,
    sparkles: <path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z" />,
    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" />,
    clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
    car: <><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2" /><circle cx="7" cy="17" r="2" /><path d="M9 17h6" /><circle cx="17" cy="17" r="2" /></>,
    phoneDevice: <><rect x="5" y="2" width="14" height="20" rx="2" /><path d="M12 18h.01" /></>,
    wallet: <><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" /><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" /></>,
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></>,
    tag: <><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r="1" /></>,
    file: <><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8" /></>,
    smile: <><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" /></>,
  };
  const NIcon = ({ 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 = ({ onDark }) => (
    <a className={"logo" + (onDark ? " on-dark" : "")} href="#top" aria-label="NEO Orthodontics - back to top">
      <img src={onDark ? "neo/img/mandala.webp" : "neo/img/mandala-dark.webp"} alt="" width="40" height="40" />
      <span className="logo__wm"><b>NEO</b><span>Orthodontics</span></span>
    </a>
  );

  const Header = ({ cfg }) => {
    const [open, setOpen] = useState(false);
    const links = [["The offer", "#offer"], ["Treatments", "#treatments"], ["How it works", "#journey"], ["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)}>
            <NIcon 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.loc.tel}><NIcon name="phone" />{cfg.loc.phone}</a>
            <a className="btn btn--primary" href="#book">Book a consultation</a>
            <a className="hdr__icon" href={"tel:" + cfg.loc.tel} aria-label={"Call " + cfg.loc.phone}><NIcon name="phone" /></a>
            <a className="hdr__icon hdr__icon--book" href="#book" aria-label="Book a consultation"><NIcon 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 Marquee = () => (
    <div className="marquee marquee--static">
      <p className="marquee__item">Black <em>Friday</em> open week</p>
    </div>
  );

  const Countdown = ({ end }) => {
    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, isNaN(target) ? 0 : target - now);
    const d = Math.floor(left / 864e5), h = Math.floor(left / 36e5) % 24, m = Math.floor(left / 6e4) % 60, s = Math.floor(left / 1e3) % 60;
    const cells = [[d, "Days"], [h, "Hours"], [m, "Minutes"], [s, "Seconds"]];
    return (
      <div className="count" role="timer" aria-label={"Open week ends in " + d + " days and " + h + " hours"}>
        <p className="count__label">Open week ends in</p>
        <div className="count__grid">
          {cells.map(([n, u]) => <div key={u}><div className="count__n">{n}</div><div className="count__u">{u}</div></div>)}
        </div>
      </div>
    );
  };

  /* The real ActiveCampaign form (neoorthodontics, form 23). AC injects its
     <form> into ._form_23; ac-form.js loads the embed after this mounts and
     restyles it with the page's own .form classes. React never re-renders
     inside the wrapper, so AC keeps ownership of the fields. */
  const LeadForm = React.memo(({ cfg }) => {
    const ref = React.useRef(null);
    useEffect(() => { if (window.NeoAcForm) window.NeoAcForm.mount(ref.current); }, []);
    return (
      <div className="ac-form" ref={ref}
        data-submit-label="Claim up to £550 off"
        data-thank-you="thank-you.html"
        data-treatments="Clear aligners|Fixed braces|Not sure yet"
        data-legend="Which treatment are you interested in?"
        data-privacy="https://www.neo-orthodontics.co.uk/privacy-policy-lightbox"
        data-consent="By submitting your details you agree to our {link}. Offer terms are shown further down this page.">
        <div className="_form_23"></div>
        <p className="ac-form__fallback">The form didn't load. Call <a href={"tel:" + cfg.loc.tel}>{cfg.loc.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.loc.tel}>{cfg.loc.phone}</a> and we'll book you in over the phone instead.</p></noscript>
      </div>
    );
  }, () => true);

  const HERO_USPS = [
    ["shield", "Specialist Orthodontist-led", "Your treatment is planned by our Specialist Orthodontist, Preet, who completed three additional years of postgraduate training."],
    ["award", "Invisalign Platinum Elite", "One of the highest Invisalign provider tiers, awarded on case volume and clinical experience."],
    ["scan", "iTero smile simulation", "See a 3D preview of your potential new smile at your consultation, before you decide anything."],
    ["wallet", "Interest-free finance", "Spread the cost with 0% interest over 12 months and no deposit. Finance subject to status."],
  ];

  const UspTabs = () => {
    const [open, setOpen] = useState(null);
    return (
      <ul className="tabs" onMouseLeave={() => setOpen(null)}>
        {HERO_USPS.map(([ic, t, d], i) => {
          const on = open === i;
          return (
            <li className={"tab" + (on ? " is-open" : "")} key={t} onMouseEnter={() => setOpen(i)}>
              <button type="button" className="tab__btn" aria-expanded={on} aria-controls={"usp-" + i} onClick={() => setOpen(on ? null : i)} onFocus={() => setOpen(i)}>
                <span className="tab__t">{t}</span>
                <span className="tab__plus" aria-hidden="true"><NIcon name="plus" /></span>
              </button>
              <div className="tab__body" id={"usp-" + i} role="region" aria-label={t}><p>{d}</p></div>
            </li>
          );
        })}
      </ul>
    );
  };

  const Hero = ({ cfg }) => (
    <section className="hero" id="top" aria-labelledby="hero-h1">
      <div className="hero__bg"><img src="neo/img/patient-arrival.webp" alt="A smiling teenage patient with fixed braces arriving at NEO Orthodontics" /></div>
      <div className="wrap hero__grid">
        <div className="hero__side">
          {cfg.showCountdown && <Countdown end={cfg.countdownEnd} />}
          <UspTabs />
        </div>
        <div className="panel" id="book">
          <h1 id="hero-h1">Up to <em>£550 off</em> a straighter smile in {cfg.loc.town}</h1>
          <p className="panel__date"><NIcon name="calendar" /><span>Open week: <b>{cfg.openWeek}</b> at our {cfg.loc.site} practice</span></p>
          <p className="panel__sub">Book your consultation, start treatment at that appointment and receive up to £550 off, as part of a Black Friday package worth up to £1,383.</p>
          <LeadForm cfg={cfg} />
        </div>
      </div>
    </section>
  );

  const Usps = () => {
    const items = [
      ["shield", "Specialist Orthodontist-led", "Your treatment is planned by our Specialist Orthodontist, Preet."],
      ["award", "Invisalign Platinum Elite", "One of the highest Invisalign provider tiers, based on case volume and clinical experience."],
      ["scan", "iTero smile simulation", "See a 3D preview of your potential new smile at your consultation."],
      ["wallet", "Interest-free finance", "Spread the cost with 0% interest over 12 months and no deposit. Finance subject to status."],
    ];
    return (
      <section className="sec sec--cream" aria-label="Why patients choose us">
        <div className="wrap usps">
          {items.map(([ic, t, d]) => (
            <div className="usp" key={t}><div className="ic"><NIcon name={ic} /></div><h3 className="h3">{t}</h3><p>{d}</p></div>
          ))}
        </div>
      </section>
    );
  };

  Object.assign(window, { NIcon, Logo, NeoHeader: Header, NeoMarquee: Marquee, NeoHero: Hero, NeoUsps: Usps });
})();