/* WELT — Why WELT
 * Minimalist 3-column grid of differentiators.
 */
function WhyWelt() {
  const items = [
    { num: '01', title: 'Acetato premium', body: 'El mismo material que usan las marcas de óptica italiana. Ligero, flexible, duradero. No es plástico técnico de inyección.' },
    { num: '02', title: 'Certificación real',  body: 'Filtro y categoría medidos por laboratorio independiente. EN/ISO 12312-1:2015 con marcado CE.' },
    { num: '03', title: 'Diseño atemporal',  body: 'Montura rectangular clásica que no caduca. Funciona igual en una reunión que un sábado por la mañana.' },
    { num: '04', title: 'Branding discreto', body: 'Logo grabado solo en el interior de la patilla. Exterior limpio, sin logos visibles ni adornos.' },
    { num: '05', title: 'Presentación cuidada', body: 'Funda negra con logotipo en relieve y paño de microfibra. El packaging acompaña al producto.' },
    { num: '06', title: 'Para todo tu día',    body: 'Dos variantes pensadas para dos momentos: la lente amarilla para el trabajo, la roja para las horas previas al sueño.' },
  ];

  return (
    <section className="why paper" id="por-que">
      <div className="container">
        <header className="head">
          <h2>Por qué WELT.</h2>
          <p>
            No vendemos protección a base de adjetivos. Cada diferenciador
            tiene una razón concreta — el acetato, el certificado, la discreción,
            el packaging. Seis decisiones de diseño tomadas con calma.
          </p>
        </header>

        <div className="why-grid">
          {items.map(item => (
            <div className="cell" key={item.num}>
              <div className="num">{item.num}</div>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhyWelt = WhyWelt;