/* WELT — Materials
 * Three crops: case, cloth, engraved temple.
 */
function Materials() {
  const items = [
    {
      img: 'assets/product/case-deboss.jpg',
      alt: 'Funda WELT con logotipo en relieve',
      title: 'Funda con deboss',
      body: 'Estuche negro de tacto suave con el logotipo WELT en relieve. Forma rígida, cierre magnético interior.',
    },
    {
      img: 'assets/product/microfiber-cloth.jpg',
      alt: 'Paño de microfibra WELT',
      title: 'Paño de microfibra',
      body: 'Alta densidad, borde dentado. Logotipo WELT impreso en gris claro. Limpia sin dejar marcas.',
    },
    {
      img: 'assets/product/yellow-side-right.jpeg',
      alt: 'Grabado WELT en el interior de la patilla',
      title: 'Grabado discreto',
      body: 'Logotipo WELT solo en el interior de la patilla derecha. El exterior queda limpio — sin logos visibles.',
    },
  ];
  return (
    <section className="materials" id="materiales">
      <div className="container">
        <header className="head">
          <span className="eyebrow" style={{display:'block', marginBottom:'var(--s-5)'}}>Packaging · Detalle</span>
          <h2>Cada unidad llega como debería llegar.</h2>
          <p>Funda con deboss, paño de microfibra, gafa. Nada más, nada menos.</p>
        </header>

        <div className="materials-grid">
          {items.map((item) => (
            <div className="material" key={item.title}>
              <div className="frame">
                <img src={item.img} alt={item.alt} />
              </div>
              <h3>{item.title}</h3>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Materials = Materials;