// Grupo JOMI — B2B distribution / contact page
function ContactPage({ onNav }) {
  const { Badge } = window.GrupoJOMIDesignSystem_7a96bd;
  const Icon = window.Icon;
  const SiteFooter = window.SiteFooter;
  return (
    <main>
      <section className="page-hero page-hero--brand">
        <div className="section__inner">
          <span className="jomi-eyebrow" style={{ color: 'var(--blue-300)' }}>Distribución B2B · Represente su marca</span>
          <h1>Hagamos crecer su marca en Centroamérica</h1>
          <p className="page-hero__sub">Somos el socio de distribución de laboratorios y marcas que buscan llegar a El Salvador y la región — con cobertura propia de farmacias y una droguería consolidada.</p>
        </div>
      </section>

      <section className="contact">
        <div className="contact__inner">
          <div className="contact__info">
            <h3>Por qué Grupo JOMI</h3>
            <ul className="contact__list">
              <li><Icon name="truckFast" size={20} /><div><strong>Red logística nacional</strong><span>Más de 600 clientes: cadenas de farmacias, supermercados, farmacias, tiendas, mayoristas, hospitales y más.</span></div></li>
              <li><Icon name="cross" size={20} /><div><strong>25 farmacias propias</strong><span>Punto de venta directo para su producto.</span></div></li>
              <li><Icon name="award" size={20} /><div><strong>Certificación GMP</strong><span>Manejo y manufactura bajo buenas prácticas.</span></div></li>
              <li><Icon name="globe" size={20} /><div><strong>Exportación comprobada</strong><span>Presencia en 5 países con nuestras marcas privadas y exclusividades.</span></div></li>
            </ul>
          </div>

          <div className="contact__people">
            <div className="contact-card">
              <div className="contact-card__tags">
                <Badge tone="brand">Alianzas comerciales</Badge>
                <Badge tone="brand">Distribución</Badge>
                <Badge tone="brand">Importaciones</Badge>
                <Badge tone="brand">B2B</Badge>
              </div>
              <div className="contact-card__person">
                <div className="contact-card__name">Lic. Josué García</div>
                <div className="contact-card__role">Director Comercial</div>
              </div>
              <div className="contact-card__methods">
                <a href="mailto:josuegarcia@grupojomi.com"><Icon name="mail" size={17} /> josuegarcia@grupojomi.com</a>
              </div>
            </div>

            <div className="contact-card">
              <div className="contact-card__tags">
                <Badge tone="drug">Atención comercial</Badge>
                <Badge tone="drug">Ventas corporativas</Badge>
                <Badge tone="drug">Customer Success</Badge>
                <Badge tone="drug">Relaciones comerciales</Badge>
              </div>
              <div className="contact-card__person">
                <div className="contact-card__name">Lic. Kirna Moya</div>
                <div className="contact-card__role">Gerente de Mercadeo</div>
              </div>
              <div className="contact-card__methods">
                <a href="https://wa.me/50376833226" target="_blank" rel="noopener"><Icon name="whatsapp" size={17} /> +503 7683-3226</a>
                <a href="mailto:mercadeo@grupojomi.com"><Icon name="mail" size={17} /> mercadeo@grupojomi.com</a>
              </div>
            </div>

            <div className="contact-card contact-card--office">
              <div className="contact-card__tags">
                <Badge tone="neutral">Oficina principal</Badge>
              </div>
              <div className="contact-card__methods">
                <a href="tel:+50321217676"><Icon name="phone" size={17} /> +503 2121-7676</a>
                <a href="https://maps.app.goo.gl/AzeMTNaBSr1zv8cEA" target="_blank" rel="noopener"><Icon name="pin" size={17} /> Quinta Figueroa, final, Pasaje Cosmos 6396, San Marcos</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter onNav={onNav} />
    </main>
  );
}
window.ContactPage = ContactPage;