const STYLISTS = [
  {
    id: 's3',
    name: 'JD',
    role: 'Stylist',
    spec: 'Treatments · Post-transplant care · Scalp health',
    badge: 'Stylist',
    img: 'assets/jd.webp',
    bio: "JD is HAYRE's treatment authority — the force behind scalp health, keratin sessions, and Abu Dhabi's only dedicated post-hair-transplant maintenance service. Meticulous. Trusted. Unmatched.",
    stats: [{ n: '12+', l: 'Years' }, { n: '400+', l: 'Clients' }, { n: 'Hair & Scalp', l: 'Craft' }],
    specs: ['Post-transplant care', 'Scalp health', 'Keratin treatment', 'Hair protein'],
  },
  {
    id: 's1',
    name: 'Pravin',
    role: 'Stylist',
    spec: 'Haircuts · Beard grooming · Styling',
    badge: 'Stylist',
    img: 'assets/pravin.webp',
    bio: "Pravin is part of the HAYRE styling team, focused on clean consultations, polished finishes, and grooming that feels considered from the first cut to the final detail.",
    stats: [{ n: 'Hair', l: 'Craft' }, { n: 'Beard', l: 'Detail' }, { n: 'Style', l: 'Finish' }],
    specs: ['Haircut', 'Beard grooming', 'Styling', 'Consultation'],
  },
  {
    id: 's2',
    name: 'Nadeem',
    role: 'Stylist',
    spec: 'Haircuts · Grooming · Finishing',
    badge: 'Stylist',
    img: 'assets/nadeem.webp',
    bio: "Nadeem brings a precise, composed approach to the chair, shaping each service around the client and finishing with the quiet sharpness HAYRE is built for.",
    stats: [{ n: 'Cut', l: 'Shape' }, { n: 'Care', l: 'Detail' }, { n: 'Finish', l: 'Polish' }],
    specs: ['Haircut', 'Grooming', 'Finishing', 'Style upkeep'],
  },
];

const StylistModal = ({ stylist, onClose }) => {
  React.useEffect(() => {
    if (!stylist) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [stylist]);

  return (
    <div className={'modal-backdrop' + (stylist ? ' open' : '')} onClick={onClose}>
      {stylist && (
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <button className="modal-close" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
          <div className="modal-img">
            <img
              src={stylist.img}
              alt={stylist.name}
              loading="eager"
              decoding="async"
            />
          </div>
          <div className="modal-body">
            <div className="role">{stylist.role}</div>
            <h3 className="name">{stylist.name}</h3>
            <p className="bio">{stylist.bio}</p>

            <div className="modal-stats">
              {stylist.stats.map((st, i) => (
                <div className="modal-stat" key={i}>
                  <div className="num">{st.n}</div>
                  <div className="lbl">{st.l}</div>
                </div>
              ))}
            </div>

            <div className="modal-spec-list">
              {stylist.specs.map((sp) => <span key={sp}>{sp}</span>)}
            </div>

            <a href="https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking" target="_blank" rel="noopener noreferrer" className="modal-cta">
              Book with {stylist.name.split(' ')[0]}
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
          </div>
        </div>
      )}
    </div>
  );
};

const Stylists = () => {
  const [open, setOpen] = React.useState(null);

  const openStylist = (stylist) => {
    window.HayreAnalytics?.track('view_stylist', {
      cta_location: 'stylist_section',
      content_type: 'stylist_profile',
      item_id: stylist.name.toLowerCase().replace(/[^a-z0-9]+/g, '_'),
      item_name: stylist.name,
    });
    setOpen(stylist);
  };

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }),
      { threshold: 0.1 }
    );
    document.querySelectorAll('#stylists .reveal').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section className="stylists" id="stylists" data-screen-label="04 Studio">
      {/* ── Section intro — mirrors the Services intro pattern ────── */}
      <header className="studio-intro">
        <div>
          <div className="eyebrow">Studio</div>
          <h2 className="studio-title">The hands<br/><span className="it">behind the chair.</span></h2>
        </div>
        <p className="studio-lede">
          A small, deliberate team — each chair led by a specialist with a clearly-defined craft.
        </p>
      </header>

      <div className="studio-layout">
        <div className="studio-team">
          <div className="studio-head">
            <div className="eyebrow">Meet our stylists</div>
          </div>

          <div className="stylists-grid">
            {STYLISTS.map((s) => (
              <article
                key={s.id}
                className="stylist-card"
                onClick={() => openStylist(s)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    openStylist(s);
                  }
                }}
                role="button"
                tabIndex={0}
                aria-label={`View ${s.name}'s profile`}
              >
                <div className="stylist-img">
                  <img
                    src={s.img}
                    alt={s.name}
                    loading="lazy"
                    decoding="async"
                  />
                </div>
                <div className="stylist-meta">
                  <div className="stylist-meta-top">
                    <h3 className="stylist-name">{s.name}</h3>
                    <span className="stylist-plus" aria-hidden="true"></span>
                  </div>
                  <div className="stylist-role">{s.role}</div>
                </div>
              </article>
            ))}
          </div>
        </div>

        <aside className="studio-story" aria-labelledby="studio-story-title">
          <div className="eyebrow">Our story</div>
          <h3 className="studio-story-title" id="studio-story-title">
            Crafted from<br/><span>conviction.</span>
          </h3>
          <p className="studio-story-lead">
            HAYRE was built on a single principle: every man in Abu Dhabi deserves specialist-level grooming, executed with precision and delivered with discretion.
          </p>
          <p className="studio-story-body">
            Every detail of the studio — the environment, tools, and people — is chosen deliberately. HAYRE sits above the transient barbershop and below the overpriced hotel salon: specialist craft for men who value their time and appearance equally.
          </p>
        </aside>
      </div>

      <StylistModal stylist={open} onClose={() => setOpen(null)} />
    </section>
  );
};

window.Stylists = Stylists;