/* ===== NOSOTROS ===== */
function NosotrosPage() {
  return (
    <>
      <PageHero
        eyebrow="Nosotros"
        title="La historia de"
        accent="Polarizados Ya."
        subtitle="Llevar los más altos estándares del mundo en polarizados y películas de protección automotriz al mercado colombiano. Hoy somos la empresa mejor calificada en Google Colombia, con presencia en las principales ciudades del país y en Miami, Florida."
      />

      <section className="page-content">
        <div className="container">
          <div className="content-grid">
            <div className="content-info reveal">
              <h2>Nuestra historia</h2>
              <p>Polarizados Ya nació con el objetivo de llevar los más altos estándares del mundo en polarizados y películas de protección automotriz al mercado colombiano. Hoy somos la empresa de polarizados y películas de seguridad mejor calificada en Google en Colombia, con presencia en las principales ciudades del país y en Miami, Florida.</p>

              <h2 style={{ marginTop: 48 }}>Nuestra promesa</h2>
              <p>No vendemos productos genéricos. Manejamos exclusividades con las mejores marcas del planeta: Hüperoptik, Autobahn y 3M. Cada instalación la realiza un equipo de técnicos certificados y la respaldamos con garantías reales. Nuestro compromiso es la calidad comprobable, no la publicidad vacía.</p>
            </div>
            <div className="content-media reveal" data-delay="2">
              <MediaSlot label="Taller · cabina de instalación" ratio="4/5" mode="image" />
            </div>
          </div>

          <div className="cifras-grid reveal" style={{ marginTop: 96 }}>
            {[
              { num: '15+', label: 'Experiencia', desc: 'Años de trayectoria en el mercado automotriz colombiano' },
              { num: '7', label: 'Cobertura', desc: '7 sedes: 6 en Colombia + Miami, Florida' },
              { num: '★★★★★', label: 'Reputación', desc: 'La empresa de polarizados mejor calificada en Google Colombia' },
              { num: '3', label: 'Alcance', desc: 'Distribuidores en Guatemala, Puerto Rico y Estados Unidos' },
            ].map((c, i) => (
              <div className="cifra-card" key={i}>
                <div className="cifra-num">{c.num}</div>
                <span className="eyebrow">{c.label}</span>
                <p>{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="page-content" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead eyebrow="Alianzas y marcas" title="Trabajamos con las" accent="mejores del mundo." />
          <div className="brands-grid reveal">
            {window.BRANDS.map((b) => (
              <div className="brand-tile" key={b}>{b}</div>
            ))}
          </div>
        </div>
      </section>

      <section className="corporate">
        <div className="container">
          <div className="corporate-head reveal">
            <span className="eyebrow">Clientes corporativos</span>
            <h3>Empresas que confían en nosotros</h3>
          </div>
          <div className="corporate-marquee">
            <div className="corporate-track">
              {[...window.CORPORATE, ...window.CORPORATE].map((c, i) => (
                <div className="corp-logo" key={i}>{c}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="page-content">
        <div className="container">
          <SectionHead eyebrow="Distribuidores internacionales" title="Presencia" accent="más allá de Colombia." />
          <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.NosotrosPage = NosotrosPage;