// components2.jsx — BookingBlock, BookingModal, Location, Footer, Sub-pages.

const { Placeholder, SiteImage, StylistAvatar, HairCoLogo, Icon, Stars, SectionHead, t,
        usePortfolio, interceptCta } = window.Components;

// ── Booking block (in-page section) ─────────────────────────────────────
// Online card → goes straight to Fresha (no service picker — Fresha has one).
// WhatsApp card → opens the modal so the visitor selects services first; the
// modal builds the WhatsApp message body from those selections.
function BookingBlock({ lang, business, bookingProvider, hasWhatsapp, freshaUrl, onOpenWhatsAppModal }) {
  const C = window.SITE.COPY.booking;
  const provider = window.SITE.BOOKING_PROVIDERS[bookingProvider];
  const blockCta = interceptCta(undefined, lang);

  return (
    <section id="book" className="booking">
      <SectionHead eyebrow={t(C.eyebrow, lang)} title={t(C.title, lang)} align="center"/>
      <div className="booking-grid" data-reveal-group>
        {/* Online — direct Fresha link */}
        <div className="booking-card booking-card--primary" data-reveal="up">
          <div className="booking-card-num">01</div>
          <div className="booking-card-lbl">{t(C.onlineLbl, lang)}</div>
          <div className="booking-card-sub">{t(C.onlineSub, lang)}</div>
          <div className="booking-card-detail">
            <span className="booking-card-provider">via {provider.label}</span>
          </div>
          <a className="btn btn-primary booking-card-cta" href={freshaUrl}
             target="_blank" rel="noreferrer" onClick={blockCta}>
            {t(provider.cta, lang)} <Icon.arrow width={14} height={14}/>
          </a>
        </div>

        {/* WhatsApp — opens the service-picker modal */}
        {hasWhatsapp ? (
          <div className="booking-card" data-reveal="up">
            <div className="booking-card-num">02</div>
            <div className="booking-card-lbl">{t(C.whatsLbl, lang)}</div>
            <div className="booking-card-sub">{t(C.whatsSub, lang)}</div>
            <div className="booking-card-detail">{business.whatsappDisplay}</div>
            <button className="btn btn-outline booking-card-cta" onClick={onOpenWhatsAppModal}>
              <Icon.whatsapp width={16} height={16}/> WhatsApp <Icon.arrow width={14} height={14}/>
            </button>
          </div>
        ) : (
          <div className="booking-card booking-card--muted" data-reveal="up">
            <div className="booking-card-num">02</div>
            <div className="booking-card-lbl">{t(C.phoneLbl, lang)}</div>
            <div className="booking-card-sub">{t({ en: 'Landline, phone only', pt: 'Linha fixa, só telefone', es: 'Fijo, solo llamadas', fr: 'Ligne fixe, appels uniquement' }, lang)}</div>
            <div className="booking-card-detail">{business.phoneDisplay}</div>
            <a className="btn btn-outline booking-card-cta" href={`tel:${business.phone}`}
               onClick={blockCta}>
              <Icon.phone width={16} height={16}/> {t({ en: 'Call', pt: 'Ligar', es: 'Llamar', fr: 'Appeler' }, lang)} <Icon.arrow width={14} height={14}/>
            </a>
          </div>
        )}

        {/* Phone (always present when whatsapp exists) */}
        {hasWhatsapp && (
          <div className="booking-card" data-reveal="up">
            <div className="booking-card-num">03</div>
            <div className="booking-card-lbl">{t(C.phoneLbl, lang)}</div>
            <div className="booking-card-sub">{t(C.phoneSub, lang)}</div>
            <div className="booking-card-detail">{business.phoneDisplay}</div>
            <a className="btn btn-outline booking-card-cta" href={`tel:${business.phone}`}
               onClick={blockCta}>
              <Icon.phone width={16} height={16}/> {t({ en: 'Call', pt: 'Ligar', es: 'Llamar', fr: 'Appeler' }, lang)} <Icon.arrow width={14} height={14}/>
            </a>
          </div>
        )}
      </div>

      <div className="booking-walkin">
        <span className="booking-walkin-dot"/>
        {t(C.walkin, lang)}
      </div>
    </section>
  );
}

// ── Booking modal (multi-step) ──────────────────────────────────────────
// WhatsApp service-picker modal.
// The modal exists solely to assemble a WhatsApp message body from the
// services the visitor selected. Direct online booking goes to Fresha
// outside the modal — there is no Fresha confirm step here.
function BookingModal({ lang, category, bookingProvider, business, preset, onClose }) {
  const C = window.SITE.COPY.bookingModal;
  const cat = window.SITE.CATEGORIES[category];

  // Steps: 1=service, 2=stylist, 3=confirm
  const [step, setStep] = useState(preset?.service ? 2 : 1);
  // Multi-select: list of { svc, cat }
  const [chosenSvcs, setChosenSvcs] = useState(
    preset?.service ? [{ svc: preset.service, cat: preset.category }] : []);
  const [chosenStylist, setChosenStylist] = useState(preset?.stylist || null);
  const [closing, setClosing] = useState(false);
  const dialogRef = useRef(null);

  const toggleSvc = (svc, catGroup) => {
    setChosenSvcs(prev => {
      const exists = prev.some(c => c.svc === svc);
      return exists ? prev.filter(c => c.svc !== svc) : [...prev, { svc, cat: catGroup }];
    });
  };
  const hasSvcs = chosenSvcs.length > 0;

  // If preset.stylist with no service yet, still start at step 1
  useEffect(() => {
    if (preset?.stylist && !preset?.service) setStep(1);
  }, []);

  const close = () => {
    setClosing(true);
    setTimeout(onClose, 220);
  };

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

  // All services flat for the picker
  const allServices = cat.services.flatMap(group =>
    group.items.map(item => ({ ...item, group: group.name })));

  return (
    <div className={`modal ${closing ? 'is-closing' : ''}`} onClick={close}>
      <div className="modal-dialog" role="dialog" aria-modal="true" ref={dialogRef}
           onClick={(e) => e.stopPropagation()}>
        <header className="modal-head">
          <div className="modal-title-row">
            <h3 className="modal-title">{t(C.title, lang)}</h3>
            <button className="modal-x" onClick={close} aria-label="Close">
              <Icon.x width={18} height={18}/>
            </button>
          </div>
          <div className="modal-steps">
            {[1, 2, 3].map(n => (
              <div key={n} className={`modal-step ${step >= n ? 'is-done' : ''} ${step === n ? 'is-active' : ''}`}>
                <div className="modal-step-dot">{step > n ? <Icon.check width={11} height={11}/> : n}</div>
                <div className="modal-step-lbl">
                  {n === 1 && t(C.step1, lang)}
                  {n === 2 && t(C.step2, lang)}
                  {n === 3 && t(C.step3, lang)}
                </div>
              </div>
            ))}
          </div>
        </header>

        <div className="modal-body">
          {step === 1 && (
            <div className="bm-services">
              <div className="bm-multi-hint">
                {t({ en: 'Select one or more services', pt: 'Selecione um ou mais serviços', es: 'Elige uno o más tratamientos', fr: 'Choisissez un ou plusieurs soins' }, lang)}
                {chosenSvcs.length > 0 && (
                  <span className="bm-multi-count">
                    {chosenSvcs.length} {t({ en: 'selected', pt: 'selecionado(s)', es: 'seleccionado(s)', fr: 'sélectionné(s)' }, lang)}
                  </span>
                )}
              </div>
              {cat.services.map((group, gi) => (
                <div key={gi} className="bm-group">
                  <div className="bm-group-label">{t(group.name, lang)}</div>
                  <ul>
                    {group.items.map((it, i) => {
                      const sel = chosenSvcs.some(c => c.svc === it);
                      return (
                        <li key={i}>
                          <button className={`bm-svc ${sel ? 'is-selected' : ''}`}
                                  onClick={() => toggleSvc(it, group)}>
                            <span className="bm-svc-l">
                              <span className="bm-svc-name">{t(it.name, lang)}</span>
                              {it.note && <span className="bm-svc-note">{t(it.note, lang)}</span>}
                            </span>
                            <span className="bm-svc-dur">{it.duration} min</span>
                            <span className="bm-svc-price">{t(it.price, lang)}</span>
                            <span className="bm-svc-check"><Icon.check width={14} height={14}/></span>
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              ))}
            </div>
          )}

          {step === 2 && (
            <div className="bm-stylists">
              <button className={`bm-stylist bm-stylist--any ${chosenStylist === null ? 'is-selected' : ''}`}
                      onClick={() => setChosenStylist(null)}>
                <div className="bm-stylist-avatar bm-stylist-avatar--any">
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1-3 4-5 7-5s6 2 7 5"/></svg>
                </div>
                <div>
                  <div className="bm-stylist-name">{t(C.anyStylist, lang)}</div>
                  <div className="bm-stylist-meta">{t({ en: 'Earliest available slot', pt: 'Próximo horário disponível', es: 'El primer hueco disponible', fr: 'Le prochain créneau disponible' }, lang)}</div>
                </div>
                <span className="bm-svc-check"><Icon.check width={14} height={14}/></span>
              </button>
              {window.SITE.TEAM.map(m => (
                <button key={m.id} className={`bm-stylist ${chosenStylist?.id === m.id ? 'is-selected' : ''}`}
                        onClick={() => setChosenStylist(m)}>
                  <div className="bm-stylist-avatar">
                    <StylistAvatar member={m} ratio="1/1"/>
                  </div>
                  <div>
                    <div className="bm-stylist-name">{m.name}</div>
                    <div className="bm-stylist-meta">{t(m.role, lang)}</div>
                  </div>
                  <span className="bm-svc-check"><Icon.check width={14} height={14}/></span>
                </button>
              ))}
            </div>
          )}

          {step === 3 && (
            <div className="bm-confirm">
              <div className="bm-confirm-eyebrow">{t(C.summary, lang)}</div>
              {chosenSvcs.length === 1 ? (
                <>
                  <div className="bm-confirm-title">{t(chosenSvcs[0].svc.name, lang)}</div>
                  <div className="bm-confirm-meta">
                    <span>{chosenSvcs[0].svc.duration} {t(C.duration, lang).toLowerCase().split(' ')[0]}</span>
                    <span className="bm-confirm-dot"/>
                    <span>{t(chosenSvcs[0].svc.price, lang)}</span>
                    <span className="bm-confirm-dot"/>
                    <span>{t(C.with, lang)} {chosenStylist ? chosenStylist.name : t(C.anyStylist, lang).toLowerCase()}</span>
                  </div>
                </>
              ) : (
                <>
                  <div className="bm-confirm-title">
                    {chosenSvcs.length} {t({ en: 'services', pt: 'serviços', es: 'tratamientos', fr: 'soins' }, lang)}
                  </div>
                  <ul className="bm-confirm-list">
                    {chosenSvcs.map((c, i) => (
                      <li key={i} className="bm-confirm-list-item">
                        <span className="bm-confirm-list-name">{t(c.svc.name, lang)}</span>
                        <span className="bm-confirm-list-meta">{c.svc.duration} min · {t(c.svc.price, lang)}</span>
                      </li>
                    ))}
                  </ul>
                  <div className="bm-confirm-meta">
                    <span>{t(C.with, lang)} {chosenStylist ? chosenStylist.name : t(C.anyStylist, lang).toLowerCase()}</span>
                  </div>
                </>
              )}
              <div className="bm-confirm-note">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M3.5 20.5l1.5-4.7A8.5 8.5 0 1112 20.5a8.5 8.5 0 01-4.3-1.2l-4.2 1.2z"/></svg>
                <span>{t({ en: 'You\'ll open WhatsApp with your selection pre-filled.',
                            pt: 'Você abre o WhatsApp com sua seleção já pronta.', es: 'Se abrirá WhatsApp con tu selección ya escrita.', fr: 'WhatsApp s\'ouvrira avec votre sélection déjà rédigée.' }, lang)}</span>
              </div>
            </div>
          )}
        </div>

        <footer className="modal-foot">
          {step > 1 ? (
            <button className="btn btn-ghost" onClick={() => setStep(step - 1)}>
              <Icon.chevL width={14} height={14}/> {t(C.back, lang)}
            </button>
          ) : <div/>}
          {step < 3 ? (
            <button className="btn btn-primary" disabled={step === 1 && !hasSvcs}
                    onClick={() => setStep(step + 1)}>
              {t(C.next, lang)} <Icon.arrow width={14} height={14}/>
            </button>
          ) : business.whatsapp && (() => {
            const B = window.SITE.COPY.booking;
            const stylistTxt = chosenStylist
              ? ` ${t(B.waWith, lang)} ${chosenStylist.name}`
              : ` ${t(B.waAny, lang)}`;
            let body;
            if (chosenSvcs.length === 1) {
              body = `${t(B.waSingle, lang)} ${t(chosenSvcs[0].svc.name, lang)}${stylistTxt}.`;
            } else {
              const list = chosenSvcs
                .map(c => `• ${t(c.svc.name, lang)} (${c.svc.duration} min · ${t(c.svc.price, lang)})`)
                .join('\n');
              body = `${t(B.waMsg, lang)}\n${list}\n${stylistTxt.trim()}.`;
            }
            const waUrl = `https://wa.me/${business.whatsapp.replace(/\D/g,'')}?text=${encodeURIComponent(body)}`;
            return (
              <a className="btn btn-primary btn-wa" href={waUrl} target="_blank" rel="noreferrer"
                 onClick={(e) => {
                   const block = interceptCta(undefined, lang);
                   if (block) { block(e); return; }
                   setTimeout(close, 500);
                 }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M3.5 20.5l1.5-4.7A8.5 8.5 0 1112 20.5a8.5 8.5 0 01-4.3-1.2l-4.2 1.2z"/></svg>
                {t({ en: 'Send WhatsApp', pt: 'Enviar WhatsApp', es: 'Enviar WhatsApp', fr: 'Envoyer sur WhatsApp' }, lang)} <Icon.arrow width={14} height={14}/>
              </a>
            );
          })()}
        </footer>
      </div>
    </div>
  );
}

// ── Location ────────────────────────────────────────────────────────────
function Location({ lang, business, hasWhatsapp }) {
  const C = window.SITE.COPY.location;
  const todayIdx = (new Date().getDay() + 6) % 7; // Mon=0..Sun=6 (we stored Mon-first)
  const today = business.hours[todayIdx];
  const isOpen = today.open !== 'Closed';
  const waUrl = hasWhatsapp ? `https://wa.me/${business.whatsapp?.replace(/\D/g, '')}` : null;
  const blockCta = interceptCta(undefined, lang);

  return (
    <section id="visit" className="location">
      <SectionHead eyebrow={t(C.eyebrow, lang)} title={t(C.title, lang)}/>
      <div className="location-grid">
        <div className="location-info" data-reveal="left">
          <div className="location-block">
            <div className="location-block-lbl"><Icon.pin width={14} height={14}/> {t(C.addressLbl, lang)}</div>
            <div className="location-block-val">{business.address}</div>
            <a className="link-arrow" href={business.mapsUrl || `https://maps.google.com/?q=${encodeURIComponent(business.address)}`} target="_blank" rel="noreferrer"
               onClick={blockCta}>
              {t(C.directions, lang)} <Icon.arrow width={12} height={12}/>
            </a>
          </div>

          <div className="location-block">
            <div className="location-block-lbl"><Icon.clock width={14} height={14}/> {t(C.hoursLbl, lang)}</div>
            <div className={`location-status ${isOpen ? 'is-open' : 'is-closed'}`}>
              <span className="location-status-dot"/>
              {isOpen ? `${t(C.openNow, lang)} · ${t(C.todayOpen, lang)} ${today.close}` : t(C.todayClosed, lang)}
            </div>
            <table className="location-hours">
              <tbody>
                {business.hours.map((h, i) => (
                  <tr key={i} className={i === todayIdx ? 'is-today' : ''}>
                    <td>{t(h.day, lang)}</td>
                    <td>{h.open === 'Closed' ? t({ en: 'Closed', pt: 'Fechado', es: 'Cerrado', fr: 'Fermé' }, lang) : `${h.open} – ${h.close}`}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="location-block">
            <div className="location-block-lbl">{t({ en: 'Contact', pt: 'Contato', es: 'Contacto', fr: 'Contact' }, lang)}</div>
            <div className="location-contact-list">
              <a href={`tel:${business.phone}`} className="location-contact" onClick={blockCta}>
                <Icon.phone width={14} height={14}/> {business.phoneDisplay}
              </a>
              {waUrl && (
                <a href={waUrl} target="_blank" rel="noreferrer" className="location-contact"
                   onClick={blockCta}>
                  <Icon.whatsapp width={14} height={14}/> {business.whatsappDisplay}
                </a>
              )}
              {business.email && (
                <a href={`mailto:${business.email}`} className="location-contact" onClick={blockCta}>
                  <span style={{ fontSize: 14 }}>@</span> {business.email}
                </a>
              )}
            </div>
          </div>
        </div>

        <div className="location-map" data-reveal="right">
          <MapPlaceholder business={business}/>
        </div>
      </div>

      {business.studioImages && business.studioImages.length > 0 && (
        <div className="location-studio" data-reveal-group>
          <div className="location-studio-lbl" data-reveal="up">{t(C.studioLbl, lang)}</div>
          <div className="location-studio-grid">
          {business.studioImages.map((shot, i) => {
            const label = t(shot.label, lang);
            return (
              <figure key={i} className="location-studio-shot" data-reveal="scale">
                <SiteImage src={shot.imageUrl} ratio="3/4" kind="studio"
                           label={label} alt={`${business.name}, ${label}`} accent={i + 1}/>
                <figcaption>{label}</figcaption>
              </figure>
            );
          })}
          </div>
        </div>
      )}
    </section>
  );
}

// Location visual — Google Maps embed iframe (no API key needed with /maps?q= format).
function MapPlaceholder({ business }) {
  const q = encodeURIComponent(`${business.name}, ${business.address}`);
  const src = `https://maps.google.com/maps?q=${q}&t=&z=16&ie=UTF8&iwloc=&output=embed`;
  return (
    <div className="map-ph map-ph--embed">
      <iframe
        title={`${business.name} location`}
        src={src}
        width="100%" height="100%"
        style={{ border: 0, display: 'block' }}
        allowFullScreen
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"/>
    </div>
  );
}

// ── Footer ──────────────────────────────────────────────────────────────
function Footer({ lang, business, onNav }) {
  const C = window.SITE.COPY.footer;
  const N = window.SITE.COPY.nav;
  const blockCta = interceptCta(undefined, lang);
  return (
    <footer className="footer">
      {business.facadeImage && (
        <a className="footer-facade" data-reveal="scale"
           href={business.mapsUrl || `https://maps.google.com/?q=${encodeURIComponent(business.address)}`}
           target="_blank" rel="noreferrer"
           aria-label={`${business.name}, ${business.address}`}
           onClick={blockCta}>
          <img src={business.facadeImage} alt={`${business.name}, ${business.address}`}
               loading="lazy" decoding="async"/>
          <div className="footer-facade-cap">
            <span className="footer-facade-name">{business.name}</span>
            <span className="footer-facade-addr">{business.address}</span>
          </div>
        </a>
      )}
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="footer-logo">
            <HairCoLogo size="footer"/>
          </div>
          <p className="footer-tag">{t(C.tag, lang)}</p>
          <div className="footer-socials">
            <a href={business.instagram} target="_blank" rel="noreferrer" aria-label="Instagram" onClick={blockCta}><Icon.ig width={18} height={18}/></a>
            <a href={business.facebook} target="_blank" rel="noreferrer" aria-label="Facebook" onClick={blockCta}><Icon.fb width={18} height={18}/></a>
          </div>
        </div>

        <div>
          <div className="footer-col-lbl">{t(C.nav, lang)}</div>
          <ul className="footer-links">
            <li><a href="#services" onClick={(e) => { e.preventDefault(); onNav('home', 'services'); }}>{t(N.services, lang)}</a></li>
            <li><a href="#gallery"  onClick={(e) => { e.preventDefault(); onNav('home', 'gallery'); }}>{t(N.gallery, lang)}</a></li>
            <li><a href="#about"    onClick={(e) => { e.preventDefault(); onNav('home', 'about'); }}>{t(N.team, lang)}</a></li>
            <li><a href="#reviews"  onClick={(e) => { e.preventDefault(); onNav('home', 'reviews'); }}>{t(N.reviews, lang)}</a></li>
            <li><a href="#visit"    onClick={(e) => { e.preventDefault(); onNav('home', 'visit'); }}>{t(N.visit, lang)}</a></li>
          </ul>
        </div>

        <div>
          <div className="footer-col-lbl">{t(C.contact, lang)}</div>
          <ul className="footer-links">
            <li>{business.address}</li>
            <li><a href={`tel:${business.phone}`} onClick={blockCta}>{business.phoneDisplay}</a></li>
            {business.email && (
              <li><a href={`mailto:${business.email}`} onClick={blockCta}>{business.email}</a></li>
            )}
          </ul>
        </div>

        <div>
          <div className="footer-col-lbl">{t(C.legal, lang)}</div>
          <ul className="footer-links">
            <li><a href="#" onClick={(e) => e.preventDefault()}>{t(C.privacy, lang)}</a></li>
            <li><a href="#" onClick={(e) => e.preventDefault()}>{t(C.terms, lang)}</a></li>
            <li><a href="#" onClick={(e) => e.preventDefault()}>{t(C.cookies, lang)}</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} {business.name}. {t(C.rights, lang)}</span>
        <a href="pitch/" className="footer-built-link">{t(C.built, lang)}</a>
      </div>
    </footer>
  );
}

// ── /servicos page ──────────────────────────────────────────────────────
function ServicesPage({ lang, category, onBook, onBack }) {
  const cat = window.SITE.CATEGORIES[category];
  const P = window.SITE.COPY.pages;
  return (
    <article className="page-services">
      <button className="page-back" onClick={onBack}>{t(P.backHome, lang)}</button>
      <SectionHead eyebrow={t(window.SITE.COPY.services.eyebrow, lang)}
                   title={t(P.fullMenu, lang)} sub={t(P.menuSub, lang)}/>
      <div className="full-menu">
        {cat.services.map((group, gi) => (
          <div key={gi} className="full-menu-group">
            <div className="full-menu-head">
              <h3>{t(group.name, lang)}</h3>
              <div className="full-menu-rule"/>
              <span className="full-menu-count">{group.items.length} {t({ en: 'services', pt: 'serviços', es: 'tratamientos', fr: 'soins' }, lang)}</span>
            </div>
            {group.blurb && <p className="full-menu-blurb">{t(group.blurb, lang)}</p>}
            <ul>
              {group.items.map((it, i) => (
                <li key={i} className="full-menu-row">
                  <div className="full-menu-row-l">
                    <div className="full-menu-row-name">{t(it.name, lang)}</div>
                    {it.desc && <div className="full-menu-row-desc">{t(it.desc, lang)}</div>}
                    <div className="full-menu-row-dur">
                      <span>{it.duration} min</span>
                      {it.note && <span className="full-menu-row-note">{t(it.note, lang)}</span>}
                    </div>
                  </div>
                  <div className="full-menu-row-mid">
                    <div className="full-menu-row-price">{t(it.price, lang)}</div>
                  </div>
                  <button className="btn btn-outline btn-sm"
                          onClick={() => onBook({ service: it, category: group })}>
                    {t(window.SITE.COPY.services.bookThis, lang)} <Icon.arrow width={12} height={12}/>
                  </button>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </article>
  );
}

// ── /equipe/[id] page ───────────────────────────────────────────────────
function StylistPage({ lang, memberId, category, onBook, onBack }) {
  const m = window.SITE.TEAM.find(x => x.id === memberId) || window.SITE.TEAM[0];
  const P = window.SITE.COPY.pages;
  const specs = m.specialties[category] || m.specialties.hair_salon;
  const works = (m.workSamples || []).map((w, i) => (
    typeof w === 'string'
      ? { imageUrl: w,
          label: `${specs[i % specs.length]} · ${m.name.split(' ')[0]}`,
          kind: ['colour','cut','colour','cut'][i % 4],
          ratio: ['4/5','1/1','3/4','4/5'][i % 4] }
      : w
  ));

  return (
    <article className="page-stylist">
      <button className="page-back" onClick={onBack}>{t(P.backHome, lang)}</button>

      <div className="stylist-hero">
        <div className="stylist-hero-photo">
          <StylistAvatar member={m} ratio="3/4"/>
        </div>
        <div className="stylist-hero-info">
          <div className="sec-eyebrow">{t({ en: 'THE AESTHETICIAN', pt: 'A PROFISSIONAL', es: 'LA PROFESIONAL', fr: 'L\'ESTHÉTICIENNE' }, lang)}</div>
          <h1 className="stylist-hero-name">{m.name}</h1>
          <div className="stylist-hero-role">{t(m.role, lang)}</div>
          <div className="stylist-hero-meta">
            {m.years && <><span><strong>{m.years}</strong> {t(P.yearsExp, lang)}</span>
            <span className="stylist-hero-dot"/></>}
            <a href={`https://instagram.com/${m.instagram.replace('@','')}`} target="_blank" rel="noreferrer"
               onClick={interceptCta(undefined, lang)}>{m.instagram}</a>
          </div>

          <div className="stylist-hero-bio">
            <div className="sec-eyebrow">{t(P.aboutMe, lang)}</div>
            <p>{t(m.bio, lang)}</p>
          </div>

          <div className="stylist-hero-specs">
            <div className="sec-eyebrow">{t(P.specialties, lang)}</div>
            <div className="stylist-specs-chips">
              {specs.map((s, i) => <span key={i} className="chip">{s}</span>)}
            </div>
          </div>

          {m.credentials && m.credentials.length > 0 && (
            <div className="stylist-hero-creds">
              <div className="sec-eyebrow">{t(window.SITE.COPY.about.credentialsLbl, lang)}</div>
              <ul className="about-creds-list">
                {m.credentials.map((c, i) => (
                  <li key={i}>
                    <Icon.diploma width={15} height={15}/>
                    <span>{t(c, lang)}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          <button className="btn btn-primary btn-lg stylist-cta"
                  onClick={() => onBook({ stylist: m })}>
            {t(P.bookCta, lang)} {m.name.split(' ')[0]} <Icon.arrow width={16} height={16}/>
          </button>
        </div>
      </div>

      <div className="stylist-works">
        <SectionHead eyebrow={t(window.SITE.COPY.gallery.eyebrow, lang)}
                     title={t(window.SITE.COPY.gallery.title, lang)}/>
        <div className="stylist-works-grid">
          {works.map((w, i) => {
            const label = t(w.label, lang);
            return (
              <figure key={i} className="stylist-work">
                <SiteImage src={w.imageUrl} ratio={w.tileRatio || w.ratio}
                           fit={w.tileRatio ? 'contain' : 'cover'} kind={w.kind}
                           label={label} accent={(m.accent + i) % 4} alt={label}/>
                {w.beforeAfter && (
                  <figcaption className="stylist-work-cap">
                    {t(window.SITE.COPY.gallery.beforeLbl, lang)} <span className="stylist-work-sep">/</span> {t(window.SITE.COPY.gallery.afterLbl, lang)} · {label}
                  </figcaption>
                )}
              </figure>
            );
          })}
        </div>
      </div>
    </article>
  );
}

window.Components2 = {
  BookingBlock, BookingModal, Location, MapPlaceholder, Footer,
  ServicesPage, StylistPage,
};