// Grupo JOMI — Nosotros (about) page: history timeline, mission/vision/values
function AboutPage({ onNav }) {
  const { Card } = window.GrupoJOMIDesignSystem_7a96bd;
  const Icon = window.Icon;
  const SiteFooter = window.SiteFooter;
  const milestones = [
    { y: '1986', t: 'Don Óscar y doña Miriam García invierten en productos de consumo en el Mercado Tineti.' },
    { y: '1995', t: 'Adquieren Farmacia Guadalupe, en el centro de San Salvador.' },
    { y: '2005', t: 'Inicia Droguería JOMI.' },
    { y: '2008', t: 'Adquieren la totalidad de Laboratorios S&M.' },
    { y: '2010', t: 'Inician las cadenas de farmacias: 8 sucursales en el área metropolitana.' },
    { y: '2014', t: 'Inician exportaciones a Estados Unidos y Centroamérica.' },
    { y: '2016', t: 'Unificación de Grupo JOMI; Farmacias Guadalupe pasa a ser Farmacias La Vida.' },
    { y: '2019', t: 'Certificación de Buenas Prácticas de Manufactura (GMP).' },
    { y: '2020', t: 'Se adquiere Laboratorio Cosmos.' },
    { y: '2025', t: 'Inauguración de la planta de alimento INNOVAFOODS.' },
  ];
  const values = [
    { h: 'Compromiso', q: '"Yo cumplo."', d: 'Responsabilidad en cada cosa que se hace.' },
    { h: 'Pasión', q: '"Siempre entrego lo mejor de mí."', d: 'Entregarse con entusiasmo.' },
    { h: 'Confiabilidad', q: '"Yo soy honesto y capaz."', d: 'Sinceridad y creer en la capacidad propia y de otros.' },
  ];
  return (
    <main>
      <section className="page-hero">
        <div className="section__inner">
          <span className="jomi-eyebrow">Nosotros</span>
          <h1>Cómo inicia nuestra historia</h1>
          <p className="page-hero__sub">De un puesto en el mercado a un grupo farmacéutico integral con presencia regional. Cuatro décadas de trayectoria, calidad y confianza.</p>
        </div>
      </section>

      {/* MISSION / VISION */}
      <section className="section" id="mision-vision">
        <div className="section__inner mv-grid">
          <Card accentColor="var(--brand-primary)">
            <span className="jomi-eyebrow">Misión</span>
            <p className="mv-text">Entregamos lo mejor día a día, haciendo de la felicidad nuestra recompensa más gratificante.</p>
          </Card>
          <Card accentColor="var(--brand-accent)">
            <span className="jomi-eyebrow">Visión</span>
            <p className="mv-text">Ser un referente en servicio al cliente, desarrollador de marcas regionales y líder en propuestas impactantes — en producción, comercialización y distribución.</p>
          </Card>
        </div>
      </section>

      {/* TIMELINE */}
      <section className="section section--sunken" id="trayectoria">
        <div className="section__inner">
          <div className="section__head">
            <span className="jomi-eyebrow">Trayectoria</span>
            <h2>Nuestra línea de tiempo</h2>
          </div>
          <ol className="timeline">
            {milestones.map((m) => (
              <li key={m.y} className="timeline__item">
                <div className="timeline__year">{m.y}</div>
                <div className="timeline__dot"></div>
                <div className="timeline__text">{m.t}</div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* VALUES */}
      <section className="section">
        <div className="section__inner">
          <div className="section__head">
            <span className="jomi-eyebrow">Valores</span>
            <h2>Lo que nos sostiene</h2>
          </div>
          <div className="values-grid">
            {values.map((v) => (
              <Card key={v.h}>
                <h3 style={{ margin: 0 }}>{v.h}</h3>
                <p className="values__q">{v.q}</p>
                <p style={{ margin: 0, color: 'var(--text-muted)' }}>{v.d}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="endorse">
        <div className="endorse__inner">
          <img className="endorse__logo" src="assets/logos/grupo-jomi.png" alt="Grupo JOMI" />
          <p className="endorse__text">Respaldado por <strong>Grupo JOMI</strong></p>
          <p className="endorse__sub">Cuatro unidades de negocio, un mismo estándar de calidad y confianza.</p>
        </div>
      </section>

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