/* global React, MEG_DATA */
const { useState, useEffect, useRef } = React;

/* ===================== NAV ===================== */
function Nav({ overHero, onBook }) {
  const links = [
    ["About", "#about"],
    ["Services", "#services"],
    ["Instagram", "#instagram"],
    ["Reviews", "#testimonials"],
    ["Studio", "#results"],
    ["FAQ", "#faq"],
    ["Visit", "#visit"],
  ];
  return (
    <header className={`nav ${overHero ? "nav--over-hero" : "nav--scrolled"}`}>
      <a href="#top" className="nav__logo">
        {MEG_DATA.brand.nameDisplay}<span className="dot" /><em>{MEG_DATA.brand.nameDisplaySuffix}</em>
      </a>
      <nav className="nav__links">
        {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
      </nav>
      <a href={MEG_DATA.brand.bookingUrl} target="_blank" rel="noopener" className={`btn nav__cta ${overHero ? "nav__cta--over-hero" : ""}`}>
        Book <span className="arr">→</span>
      </a>
    </header>
  );
}

/* ===================== HERO ===================== */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Home">
      <div className="hero__media">
        <image-slot id="hero-photo" shape="rect" src={MEG_DATA.photos.hero} placeholder="Drop a hero photo — Meg in the studio, soft lighting" data-parallax="0.22"></image-slot>
      </div>
      <div className="hero__content">
        <div className="hero__eyebrow">
          <span className="rule" />
          <span>Toronto · est. 2025</span>
          <span>·</span>
          <span>by appointment</span>
          <span>·</span>
          <a
            href="https://instagram.com/nurse.injector.megan"
            target="_blank"
            rel="noopener"
            style={{color: "inherit", textDecoration: "underline", textUnderlineOffset: 3}}
          >
            @nurse.injector.megan
          </a>
        </div>
        <h1 className="hero__title">
          <span className="lock">honest</span><br />
          <em>aesthetics,</em> in <br />
          a nurse's hands.
        </h1>
        <div className="hero__row">
          <p className="hero__sub">
            <strong>Megs Injectables</strong> is a nurse-led studio in Leslieville,
            located inside Suite House Salon & Wellness Suites. Botox, filler,
            microneedling, PRP/PRF and IV drips —
            planned around your face, not a trend.
          </p>
          <div className="hero__meta">
            <span>Botox</span><span className="dot" />
            <span>Filler</span><span className="dot" />
            <span>Microneedling</span><span className="dot" />
            <span>PRP/PRF</span><span className="dot" />
            <span>IV Drips</span>
          </div>
        </div>
      </div>
      <div className="hero__scroll">scroll</div>
    </section>
  );
}

/* ===================== MARQUEE ===================== */
function Marquee() {
  const items = ["Botox", "Dermal Filler", "Microneedling", "PRP / PRF", "IV Drips", "Lip Hydration", "Skin Treatments"];
  const block = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span className="star">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {block}{block}{block}
      </div>
    </div>
  );
}

/* ===================== ABOUT ===================== */
function About() {
  return (
    <section id="about" className="section" data-screen-label="02 About Meg">
      <div className="container">
        <div className="about__grid">
          <div className="about__photo">
            <image-slot id="meg-portrait" shape="rect" src={MEG_DATA.photos.scrubsCouch} placeholder="Drop a portrait of Meg"></image-slot>
          </div>
          <div>
            <span className="eyebrow eyebrow-dot">Meet Meg</span>
            <h2 className="about__heading">
              Hi, I'm <em>Megan</em><br />Lawrence, RN.
            </h2>
            <div className="about__body">
              <p>
                I'm a Cosmetic Nurse Injector, BScN, RN and the owner of
                Megs Injectables, working out of a small, sunlit studio on
                Leslie Street.
              </p>
              <p>
                The clients I see want a thoughtful
                second opinion before they commit to a treatment.
                We sit down, look in the mirror together, and build a plan that
                makes sense for your face — not a face on Instagram.
              </p>
              <p>
                Subtle. Reversible. Honest about what's worth it and what isn't.
                That's the whole thing.
              </p>
            </div>
            <div className="about__sig">— xo, Meg</div>
            <div className="about__creds">
              <div className="about__cred">
                <div className="num">5.0</div>
                <div className="lab">Google rating · 11 reviews</div>
              </div>
              <div className="about__cred">
                <div className="num"><em>RN</em></div>
                <div className="lab">Registered Nurse · CNO</div>
              </div>
              <div className="about__cred">
                <div className="num">1<em>:1</em></div>
                <div className="lab">One client at a time</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== SERVICES ===================== */
function Services({ onOpen }) {
  return (
    <section id="services" className="section section--paper" data-screen-label="03 Services">
      <div className="container">
        <div className="s-head">
          <div className="s-head__left">
            <div className="s-head__num">— 03 / Services</div>
            <h2 className="s-head__title">What we <em>do here.</em></h2>
          </div>
          <p style={{maxWidth: 360, color: "var(--ink-2)"}}>
            Start with the treatment you are curious about, then book online
            or message Meg if you are unsure what fits.
          </p>
        </div>

        <div className="svc-list">
          {MEG_DATA.services.map((s, i) => (
            <div key={s.id} className="svc-row" onClick={() => onOpen(s)}>
              <div className="svc-row__num">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="svc-row__name">{s.name}</div>
                <div className="svc-row__short">{s.short}</div>
              </div>
              <div className="svc-row__blurb">{s.blurb}</div>
              <div className="svc-row__meta">{s.duration}</div>
              <div className="svc-row__price">
                {s.from}
                <em>{s.priceNote || ""}</em>
              </div>
              <div className="svc-row__arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== SERVICE DETAIL MODAL ===================== */
function ServiceModal({ service, onClose }) {
  useEffect(() => {
    const esc = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", esc);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [onClose]);

  if (!service) return null;
  return (
    <div className="svc-modal" onClick={onClose}>
      <div className="svc-modal__panel" onClick={(e) => e.stopPropagation()}>
        <div className="svc-modal__close">
          <span>Treatment Details</span>
          <button onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="svc-modal__hero">
          <image-slot id={`svc-${service.id}`} shape="rect" fit="contain" src={service.image || MEG_DATA.photos.productsPinkBlazer} placeholder={`${service.name} — drop a photo`}></image-slot>
        </div>
        <span className="eyebrow eyebrow-dot">{service.short}</span>
        <h3 className="svc-modal__title" style={{marginTop: 12}}>{service.name}</h3>
        <div className="svc-modal__meta">
          <div>
            <span className="lab">Duration</span>
            <span className="val">{service.duration}</span>
          </div>
          <div>
            <span className="lab">From</span>
            <span className="val">{service.from}</span>
          </div>
          <div>
            <span className="lab">Downtime</span>
            <span className="val">Minimal</span>
          </div>
        </div>
        <div className="svc-modal__body">
          <p>{service.long}</p>

          <h4>What we treat</h4>
          <ul className="areas">
            {service.areas.map(a => <li key={a}>{a}</li>)}
          </ul>

          <h4>How a visit goes</h4>
          <ol className="protocol">
            {service.protocol.map(p => <li key={p}>{p}</li>)}
          </ol>

          <div style={{marginTop: 36}}>
            <a className="btn btn--rose" href={MEG_DATA.brand.bookingUrl} target="_blank" rel="noopener" onClick={onClose}>
              Book appointment <span className="arr">→</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, About, Services, ServiceModal });