/* global React, MEG_DATA */
const { useState: useS2, useEffect: useE2 } = React;

/* ===================== STUDIO GALLERY ===================== */
function Gallery() {
  const layout = [
    ["ba-card--strip"],
    ["ba-card--strip"],
    ["ba-card--strip"],
    ["ba-card--strip"],
  ];
  const studioMoments = MEG_DATA.beforeAfter.slice(0, 4);
  return (
    <section id="results" className="section section--studio-strip" data-screen-label="04 Studio">
      <div className="container">
        <div className="s-head s-head--compact">
          <div className="s-head__left">
            <div className="s-head__num">— 04 / Studio</div>
            <h2 className="s-head__title">Inside <em>the studio.</em></h2>
          </div>
          <p style={{maxWidth: 340, color: "var(--ink-2)"}}>
            A quick look at the space, prep, and details before you book.
          </p>
        </div>
        <div className="ba-grid ba-grid--condensed">
          {studioMoments.map((b, i) => (
            <div key={b.id} className={`ba-card ${layout[i][0]}`} data-cursor={b.service}>
              <image-slot id={b.id} shape="rect" fit="cover" src={b.image} placeholder={b.label}></image-slot>
              <div className="ba-card__cap">
                <span>{b.service}</span>
                <em>{b.units}</em>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== TESTIMONIALS ===================== */
function Testimonials() {
  const [i, setI] = useS2(0);
  const t = MEG_DATA.testimonials;
  useE2(() => {
    const id = setInterval(() => setI(p => (p + 1) % t.length), 7000);
    return () => clearInterval(id);
  }, [t.length]);
  const cur = t[i];
  return (
    <section id="testimonials" className="section testimonials" data-screen-label="05 Testimonials">
      <div className="container">
        <div className="s-head">
          <div className="s-head__left">
            <div className="s-head__num">— 05 / Reviews</div>
            <h2 className="s-head__title">Verified <em>client reviews.</em></h2>
          </div>
          <a href={MEG_DATA.brand.googleMapsUrl} target="_blank" rel="noopener" className="eyebrow eyebrow-dot review-link">
            {MEG_DATA.brand.googleRating} Google · {MEG_DATA.brand.googleReviewCount} reviews
          </a>
        </div>
        <div className="t-track">
          <p className="t-quote" key={i}>{cur.quote}</p>
          <div className="t-meta">
            <strong>{cur.name}</strong>
            <span style={{opacity: .5}}>·</span>
            <span>{cur.meta}</span>
          </div>
        </div>
        <div className="t-controls">
          <div className="t-dots">
            {t.map((_, k) => (
              <button key={k} aria-label={`Quote ${k+1}`}
                className={`t-dot ${k === i ? "is-on" : ""}`} onClick={() => setI(k)} />
            ))}
          </div>
          <div className="t-arrows">
            <button className="t-arrow" onClick={() => setI(p => (p - 1 + t.length) % t.length)} aria-label="Previous">←</button>
            <button className="t-arrow" onClick={() => setI(p => (p + 1) % t.length)} aria-label="Next">→</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== INSTAGRAM ===================== */
function Instagram() {
  const profileUrl = `https://instagram.com/${MEG_DATA.brand.instagram.replace("@", "")}`;
  const igLogo = (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>
  );

  return (
    <section id="instagram" className="section section--paper" data-screen-label="06 Instagram">
      <div className="container">
        <div className="ig-head s-head" style={{marginBottom: 32}}>
          <div className="s-head__left">
            <div className="s-head__num">— 06 / Instagram</div>
            <h2 className="s-head__title">Follow along <em>{MEG_DATA.brand.instagram}.</em></h2>
          </div>
          <p style={{maxWidth: 360, color: "var(--ink-2)"}}>
            Treatment prep, client education, studio details, and the softer side of medical aesthetics.
            For live transformations and current updates, follow along.
          </p>
        </div>

        <a
          href={profileUrl}
          target="_blank"
          rel="noopener"
          className="ig-banner"
          aria-label={`Follow ${MEG_DATA.brand.instagram} on Instagram`}
        >
          <span className="ig-banner__avatar">
            <img src={MEG_DATA.photos.glovePortrait} alt="Megan Lawrence, RN" loading="lazy" />
          </span>
          <span className="ig-banner__text">
            <span className="ig-banner__handle">
              {igLogo}
              <span>{MEG_DATA.brand.instagram}</span>
            </span>
            <span className="ig-banner__name">Megan Lawrence, RN · Nurse Injector</span>
          </span>
          <span className="ig-banner__cta">
            Follow <span className="arr">→</span>
          </span>
        </a>

        <div className="ig-grid">
          {MEG_DATA.instagramFeed.map((p) => (
            <a
              key={p.id}
              href={p.url || profileUrl}
              target="_blank"
              rel="noopener"
              className="ig-tile"
              data-cursor="↗ ig"
              aria-label={`${p.caption} — open on Instagram`}
              style={{textDecoration: "none", color: "inherit", display: "block"}}
            >
              <image-slot id={p.id} shape="rect" fit="cover" src={p.image} placeholder={p.caption}></image-slot>
              <div className="ig-tile__overlay">
                <span>{p.caption}</span>
              </div>
            </a>
          ))}
        </div>

        <div style={{marginTop: 40, textAlign: "center"}}>
          <a href={profileUrl} target="_blank" rel="noopener" className="btn btn--rose">
            View Instagram <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ===================== FAQ ===================== */
function FAQ() {
  const [open, setOpen] = useS2(0);
  return (
    <section id="faq" className="section" data-screen-label="07 FAQ">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="s-head__num">— 07 / FAQ</div>
            <h2 className="s-head__title" style={{marginTop: 14}}>Questions, <em>answered.</em></h2>
            <p style={{marginTop: 24, color: "var(--ink-2)", maxWidth: 32 + "ch"}}>
              Can't find what you're looking for? Send a DM — Meg replies to every one personally.
            </p>
          </div>
          <div className="faq-list">
            {MEG_DATA.faq.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
                <button className="faq-item__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-item__plus" />
                </button>
                <div className="faq-item__body"><div><p>{f.a}</p></div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== CONTACT / VISIT ===================== */
function Visit() {
  return (
    <section id="visit" className="section section--bg2" data-screen-label="08 Visit / Book">
      <div className="container">
        <div className="s-head">
          <div className="s-head__left">
            <div className="s-head__num">— 08 / Visit</div>
            <h2 className="s-head__title">Come <em>visit.</em></h2>
          </div>
          <p style={{maxWidth: 380, color: "var(--ink-2)"}}>
            By appointment only. Book online, or DM, text, or email with questions before your visit.
          </p>
        </div>

        <div className="contact-grid">
          <div>
            <div className="contact-block">
              <div className="contact-block__lab">Studio</div>
              <div className="contact-block__val">
                {MEG_DATA.brand.location}<br />
                <span style={{color: "var(--ink-2)"}}>{MEG_DATA.brand.city}</span>
                <span style={{color: "var(--ink-2)", display: "block", fontSize: 18, marginTop: 8}}>{MEG_DATA.brand.venue}</span>
              </div>
              <a href={MEG_DATA.brand.googleMapsUrl} target="_blank" rel="noopener" className="link-underline" style={{marginTop: 16, display: "inline-block", fontSize: 13}}>
                Open in Maps →
              </a>
            </div>

            <div className="map-card">
              <iframe
                src={MEG_DATA.brand.mapEmbedUrl}
                title="Map showing Meg's Injectables at 20 Leslie St, Unit 15, Toronto"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
              <div className="map-card__meta">
                <strong>Meg's Injectables by Nurse Megan</strong>
                <a href={MEG_DATA.brand.googleMapsUrl} target="_blank" rel="noopener">
                  {MEG_DATA.brand.googleRating} on Google · {MEG_DATA.brand.googleReviewCount} reviews →
                </a>
              </div>
            </div>

            <div className="contact-block">
              <div className="contact-block__lab">Reach out</div>
              <div className="contact-block__val" style={{fontSize: 24}}>
                <a href={`mailto:${MEG_DATA.brand.email}`}>{MEG_DATA.brand.email}</a><br />
                <a href={`tel:+1${MEG_DATA.brand.phone.replace(/[^0-9]/g, "")}`}>{MEG_DATA.brand.phone}</a><br />
                <a href={`https://instagram.com/${MEG_DATA.brand.instagram.replace('@','')}`} target="_blank" rel="noopener">
                  {MEG_DATA.brand.instagram}
                </a>
              </div>
            </div>
          </div>

          <div className="book-card">
            <span className="eyebrow eyebrow-dot">New here?</span>
            <h3 className="book-card__title" style={{marginTop: 14}}>Book a <em>visit.</em></h3>
            <p>
              Book online for the latest availability, services, and intake
              forms. You can also text or DM before booking if you want help
              choosing the right appointment type.
            </p>
            <div className="book-card__actions">
              <a className="btn btn--rose" href={MEG_DATA.brand.bookingUrl} target="_blank" rel="noopener">
                Book appointment <span className="arr">→</span>
              </a>
              <a className="btn btn--ghost" href={`tel:+1${MEG_DATA.brand.phone.replace(/[^0-9]/g, "")}`}>
                Call <span className="arr">→</span>
              </a>
            </div>
            <div className="book-card__hours">
              <div className="contact-block__lab">Appointment hours</div>
              <ul className="hours-list">
                {MEG_DATA.brand.hours.map(([d, h]) => (
                  <li key={d}><span className="lab">{d}</span><span>{h}</span></li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== FOOTER ===================== */
function Footer() {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="footer__top">
        <div>
          <div className="footer__brand">{MEG_DATA.brand.nameDisplay}<em>{MEG_DATA.brand.nameDisplaySuffix}</em>.</div>
          <p style={{maxWidth: 360, opacity: 0.7, fontSize: 14, lineHeight: 1.5}}>
            A nurse-led injection studio in Leslieville, Toronto.
            Honest aesthetics. By appointment.
          </p>
        </div>
        <div className="footer__col">
          <h5>Treatments</h5>
          <ul>
            {MEG_DATA.services.slice(0, 5).map(s => (
              <li key={s.id}><a href="#services">{s.name}</a></li>
            ))}
          </ul>
        </div>
        <div className="footer__col">
          <h5>Studio</h5>
          <ul>
            <li><a href="#about">About Meg</a></li>
            <li><a href="#results">Studio gallery</a></li>
            <li><a href="#testimonials">Reviews</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#visit">Visit</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h5>Find us</h5>
          <ul>
            <li><a href="https://instagram.com/nurse.injector.megan" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href={`mailto:${MEG_DATA.brand.email}`}>Email</a></li>
            <li><a href={MEG_DATA.brand.googleMapsUrl} target="_blank" rel="noopener">Map</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Megs Injectables · 20 Leslie St, Unit 15, Toronto</span>
        <span>Registered Nurse · College of Nurses of Ontario</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Gallery, Testimonials, Instagram, FAQ, Visit, Footer });