/* ===== SEDES ===== */
function SedesPage() {
  return (
    <>
      <PageHero
        eyebrow="Sedes"
        title="Encuéntranos."
        accent="7 sedes a tu servicio."
        subtitle="6 sedes en Colombia + 1 en Miami, Florida. Cada locación opera bajo el mismo protocolo, materiales y garantía. Distribuidores oficiales en Guatemala, Puerto Rico y Estados Unidos."
      />

      <section className="page-content">
        <div className="container">
          <div className="map-placeholder reveal">
            <MediaSlot label="Mapa interactivo · Google Maps" ratio="21/9" mode="image" />
          </div>

          <div className="sedes-list" style={{ marginTop: 56 }}>
            {window.SEDES.map((s, i) => (
              <div id={s.slug} className="sede-card reveal" data-delay={String((i % 3) + 1)} key={s.slug}>
                <div className="sede-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="sede-info">
                  <span className="eyebrow">{s.city === 'Miami, FL' ? 'EE.UU. · Florida' : 'Colombia'}</span>
                  <h3>{s.city}</h3>
                  <p className="sede-addr">{s.addr}</p>
                </div>
                <div className="sede-contact">
                  <div className="sede-phones">
                    {s.phones.map((p) => (
                      <a key={p} href={`tel:${p.replace(/[^+\d]/g, '')}`} className="sede-phone">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                          <path d="M3.5 3.5l2-1 2 3-1.5 1.5c.5 1.5 1.5 2.5 3 3l1.5-1.5 3 2-1 2c-4.5 0-9-4.5-9-9z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        {p}
                      </a>
                    ))}
                  </div>
                  <a href={s.wa} className="btn btn-whatsapp" target="_blank" rel="noopener">
                    <Whatsapp /> WhatsApp
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="page-content" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead eyebrow="Distribuidores internacionales" title="Presencia" accent="internacional." />
          <div className="dist-grid reveal">
            {window.DISTRIBUTORS.map((d) => (
              <div className="dist-card" key={d.country}>
                <span className="eyebrow">{d.country}</span>
                <h3>{d.name}</h3>
                <p className="dist-contact">{d.contact}</p>
                <p className="dist-addr">{d.addr}</p>
                <div className="dist-phones">
                  {d.phones.map((p) => <a key={p} href={`tel:${p.replace(/[^+\d]/g, '')}`}>{p}</a>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.SedesPage = SedesPage;