// Grupo JOMI — Unidades de negocio page
function UnitsPage({ onNav }) {
  const { DivisionCard, Stat, Badge, Tabs } = window.GrupoJOMIDesignSystem_7a96bd;
  const Icon = window.Icon;
  const SiteFooter = window.SiteFooter;
  return (
    <main>
      <section className="page-hero">
        <div className="section__inner">
          <span className="jomi-eyebrow">Unidades de negocio</span>
          <h1>Cuatro unidades, un mismo estándar de calidad</h1>
          <p className="page-hero__sub">Fabricamos nuestras marcas privadas en laboratorio y planta de alimentos, las distribuimos junto a marcas de terceros a través de la droguería, y las acercamos al cliente final en Farmacias La Vida.</p>
        </div>
      </section>

      {/* SYMLAB */}
      <section className="unit" id="symlab">
        <div className="unit__inner">
          <div className="unit__media unit__media--brand" style={{ background: 'var(--div-lab-tint)' }}>
            <img className="unit__logo" src="assets/logos/symlab.png" alt="Logo SYMLAB" />
          </div>
          <div className="unit__body">
            <span className="unit__eyebrow" style={{ color: 'var(--div-lab)' }}><Icon name="flask" size={18} /> SYMLAB · Laboratorio farmacéutico</span>
            <h2>Marcas propias, fabricadas bajo certificación GMP</h2>
            <p>Más de 30 años de experiencia elaborando más de 50 líneas de producto en El Salvador y América. Nuestra manufactura cuenta con certificación de Buenas Prácticas de Manufactura.</p>
            <div className="unit__tags">
              {['Antiparasitarios', 'Antitusivos', 'Antigripales', 'Analgésicos', 'Gastrointestinales', 'Expectorantes', 'Vitamínicos'].map((t) => (
                <Badge key={t} tone="lab">{t}</Badge>
              ))}
            </div>
            <div className="unit__stats">
              <Stat prefix="+" value="50" label="Productos en catálogo" size={36} />
              <Stat value="5" label="Presencia en 5 países" size={36} />
              <Stat value="GMP" label="Manufactura certificada" size={36} color="var(--div-lab)" />
            </div>
            <a className="unit__link" href="https://www.laboratoriosym.com" target="_blank" rel="noopener" style={{ color: 'var(--div-lab)' }}>
              Visitar laboratoriosym.com
              <Icon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* INNOVAFOODS */}
      <section className="unit unit--alt" id="innova">
        <div className="unit__inner unit__inner--rev">
          <div className="unit__media unit__media--brand" style={{ background: 'var(--div-foods-tint)' }}>
            <img className="unit__logo" src="assets/logos/innovafoods.png" alt="Logo Innova Foods" />
          </div>
          <div className="unit__body">
            <span className="unit__eyebrow" style={{ color: 'var(--div-foods)' }}><Icon name="wheat" size={18} /> INNOVAFOODS · Planta de alimento</span>
            <h2>Alimentos y suplementos de altos estándares</h2>
            <p>Desarrollamos y fabricamos alimentos y suplementos alimenticios con altos estándares de calidad, ampliando el portafolio de marcas propias del grupo.</p>
            <div className="unit__tags">
              <Badge tone="foods">Suplementos</Badge>
              <Badge tone="foods">Alimentos funcionales</Badge>
              <Badge tone="foods">Marca privada</Badge>
            </div>
          </div>
        </div>
      </section>

      {/* DROGUERÍA */}
      <section className="unit" id="drogueria">
        <div className="unit__inner">
          <div className="unit__media unit__media--brand" style={{ background: 'var(--div-drug-tint)' }}>
            <img className="unit__logo" src="assets/logos/drogueria.png" alt="Logo Droguería JOMI" />
          </div>
          <div className="unit__body">
            <span className="unit__eyebrow" style={{ color: 'var(--div-drug)' }}><Icon name="truck" size={18} /> DROGUERÍA JOMI · Distribución</span>
            <h2>Distribución de medicamentos y alimentos</h2>
            <p>Distribuimos medicamentos de prestigiosos laboratorios nacionales e internacionales, así como alimentos y suplementos nutricionales, en supermercados y mercados modernos en todo El Salvador.</p>
            <Tabs defaultValue="otc" tabs={[
              { id: 'otc', label: 'Medicamentos', content: <p style={{ margin: 0, color: 'var(--text-muted)' }}>Medicamentos de marcas nacionales e internacionales.</p> },
              { id: 'etico', label: 'Alimentos', content: <p style={{ margin: 0, color: 'var(--text-muted)' }}>Alimentos y suplementos nutricionales distribuidos en supermercados y mercados modernos en todo El Salvador.</p> },
              { id: 'bebe', label: 'Línea bebé', content: <p style={{ margin: 0, color: 'var(--text-muted)' }}>Artículos de bebé de alta calidad e innovación.</p> },
              { id: 'rep', label: 'Representaciones', content: <p style={{ margin: 0, color: 'var(--text-muted)' }}>Representamos marcas internacionales que buscan crecer en la región.</p> },
            ]} />
          </div>
        </div>
      </section>

      {/* FARMACIAS */}
      <section className="unit unit--alt" id="lavida">
        <div className="unit__inner unit__inner--rev">
          <div className="unit__media unit__media--brand" style={{ background: 'var(--div-pharmacy-tint)' }}>
            <img className="unit__logo" src="assets/logos/lavida.png" alt="Logo Farmacias La Vida" />
          </div>
          <div className="unit__body">
            <span className="unit__eyebrow" style={{ color: 'var(--div-pharmacy)' }}><Icon name="cross" size={18} /> FARMACIAS LA VIDA · Retail</span>
            <h2>25 sucursales al servicio del país</h2>
            <p>Nuestra cadena de farmacias cuenta con veinticinco sucursales distribuidas en todo el país. Cada una ofrece servicio a domicilio gratis y vende tanto nuestras marcas como las de terceros.</p>
            <div className="unit__stats">
              <Stat prefix="+" value="25" label="Sucursales en el país" size={36} color="var(--div-pharmacy)" />
              <Stat value="Gratis" label="Servicio a domicilio" size={36} color="var(--div-pharmacy)" />
              <Stat value="VIDA PLENA" label="Programa de fidelidad" size={30} color="var(--div-pharmacy)" />
            </div>
            <a className="unit__link" href="https://www.facebook.com/share/1FEQvUiaDu/" target="_blank" rel="noopener" style={{ color: 'var(--div-pharmacy)' }}>
              <Icon name="facebook" size={17} />
              Síguenos en Facebook
            </a>
          </div>
        </div>
      </section>

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