// Grupo JOMI — Home page
function HomePage({ onNav }) {
  const { Button, DivisionCard, Stat } = window.GrupoJOMIDesignSystem_7a96bd;
  const Icon = window.Icon;
  const SiteFooter = window.SiteFooter;
  const divisions = [
    { division: 'lab', icon: 'flask', title: 'Laboratorio farmacéutico', eyebrow: 'SYMLAB',
      description: 'Más de 30 años fabricando más de 50 líneas de producto propias con certificación GMP.' },
    { division: 'foods', icon: 'wheat', title: 'Planta de alimento', eyebrow: 'INNOVAFOODS',
      description: 'Desarrollamos y fabricamos alimentos y suplementos alimenticios de altos estándares.' },
    { division: 'drug', icon: 'truck', title: 'Droguería y distribución', eyebrow: 'DROGUERÍA JOMI',
      description: 'Distribuimos medicamentos OTC y éticos de laboratorios nacionales e internacionales.' },
    { division: 'pharmacy', icon: 'cross', title: 'Red de farmacias', eyebrow: 'FARMACIAS LA VIDA',
      description: '25 sucursales con servicio a domicilio gratis y programa de fidelidad.' },
  ];
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero__inner">
          <div className="hero__copy">
            <span className="jomi-eyebrow hero__eyebrow">Grupo farmacéutico integral · El Salvador</span>
            <h1 className="hero__title">Salud que se fabrica, distribuye y entrega con confianza.</h1>
            <p className="hero__lead">Integramos laboratorio, planta de alimentos, droguería y una red de farmacias para llevar bienestar a Centroamérica — bajo un mismo estándar de calidad.</p>
            <div className="hero__actions">
              <Button size="lg" variant="primary" onClick={() => onNav('contact')} iconRight={<Icon name="arrow" size={18} />}>Distribuya con nosotros</Button>
              <Button size="lg" variant="inverse" onClick={() => onNav('units')}>Ver unidades</Button>
            </div>
            <div className="hero__trust">
              <span><Icon name="shield" size={16} /> Certificación GMP</span>
              <span><Icon name="globe" size={16} /> Presencia en 5 países</span>
              <span><Icon name="clock" size={16} /> +30 años de trayectoria</span>
            </div>
          </div>
          <div className="hero__art">
            <img src="assets/illustrations/symlab-duo.jpg" alt="Equipo de laboratorio SYMLAB" />
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="stats-bar">
        <div className="stats-bar__inner">
          <Stat prefix="+" value="30" label="Años en la industria farmacéutica" />
          <Stat prefix="+" value="25" label="Sucursales Farmacias La Vida" />
          <Stat prefix="+" value="50" label="Líneas de producto propias" />
          <Stat value="5" label="Países con presencia regional" />
        </div>
      </section>

      {/* DIVISIONS */}
      <section className="section">
        <div className="section__inner">
          <div className="section__head">
            <span className="jomi-eyebrow">Unidades de negocio</span>
            <h2>Una cadena de valor completa, de la fórmula al mostrador</h2>
            <p className="section__sub">Fabricamos nuestras marcas propias, distribuimos las nuestras y las de terceros, y las acercamos al consumidor final.</p>
          </div>
          <div className="div-grid">
            {divisions.map((d) => (
              <DivisionCard key={d.division} {...d}
                icon={<Icon name={d.icon} size={24} />}
                onClick={() => onNav('units')} href="#" />
            ))}
          </div>
        </div>
      </section>

      {/* NUESTRAS MARCAS */}
      <section className="section section--sunken brands">
        <div className="section__inner">
          <div className="brands__head">
            <span className="jomi-eyebrow">Nuestras marcas</span>
            <h2>Marcas propias que fabricamos y distribuimos</h2>
            <p className="section__sub">Un portafolio desarrollado por SYMLAB e Innova Foods, presente en farmacias y canales modernos de la región.</p>
          </div>
          <div className="brands__grid">
            {['vitasym','astaki','ambrosym','pull-nutrition','ipatol','sigue-biem','expectosym','nerviosina','innovakids','first-essentials','viu','savore'].map((b) => (
              <div className="brands__cell" key={b}>
                <img src={`assets/brands/${b}.png`} alt={b} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* B2B BAND */}
      <section className="band">
        <div className="band__inner">
          <div className="band__copy">
            <span className="jomi-eyebrow" style={{ color: 'var(--blue-300)' }}>Para marcas y laboratorios</span>
            <h2>¿Busca un distribuidor confiable en Centroamérica?</h2>
            <p>Representamos y distribuimos marcas internacionales a través de nuestra droguería y 25 farmacias propias. Logística puntual, cobertura regional y trayectoria comprobada.</p>
            <Button size="lg" variant="inverse" onClick={() => onNav('contact')} iconRight={<Icon name="arrow" size={18} />}>Represente su marca</Button>
          </div>
          <ul className="band__points">
            <li><Icon name="truckFast" size={20} /><div><strong>Red logística regional</strong><span>Entrega puntual y producto en buen estado.</span></div></li>
            <li><Icon name="package" size={20} /><div><strong>OTC y éticos</strong><span>Portafolio nacional e internacional.</span></div></li>
            <li><Icon name="award" size={20} /><div><strong>Buenas Prácticas (GMP)</strong><span>Manufactura y manejo certificados.</span></div></li>
          </ul>
        </div>
      </section>

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