/* WELT — Collection
 * Two variants. Editorial gallery cards.
 */

function ProductCard({ variant }) {
  return (
    <article className="product-card">
      <div className="photo">
        <img src={variant.image} alt={variant.alt} />
        <span className="corner-label">{variant.label}</span>
      </div>
      <div className="meta-row">
        <h3>{variant.name}</h3>
        <span className="price">{variant.price}</span>
      </div>
      <p className="desc">{variant.desc}</p>
      <dl className="specs">
        <div>
          <dt>Bloqueo</dt>
          <dd>{variant.block}</dd>
        </div>
        <div>
          <dt>Transmitancia</dt>
          <dd>{variant.tv}</dd>
        </div>
        <div>
          <dt>Conducción</dt>
          <dd>{variant.driving}</dd>
        </div>
      </dl>
      <div className="cta-row">
        <a href="https://amazon.es" target="_blank" rel="noopener" className="btn btn--ghost">
          Comprar en Amazon <span className="arrow">→</span>
        </a>
      </div>
    </article>
  );
}

function Collection() {
  const yellow = {
    name: 'WELT Día',
    label: 'Día · Lente Amarilla',
    price: '32,99 €',
    image: 'assets/product/yellow-front.jpeg',
    alt: 'WELT FCO1040 lente amarilla',
    desc: 'Para la jornada laboral frente a pantallas. Visión nítida, sin distorsión cromática. Apta para conducir (Cat. 0).',
    block: '81,56 %',
    tv: '84,40 %',
    driving: 'Apta · Cat. 0',
  };
  const red = {
    name: 'WELT Noche',
    label: 'Noche · Lente Roja',
    price: '32,99 €',
    image: 'assets/product/red-front.jpeg',
    alt: 'WELT FCO1040 lente roja',
    desc: 'Para las dos horas previas al descanso. Bloqueo casi total del espectro azul. Uso en interior.',
    block: '99,37 %',
    tv: '54,86 %',
    driving: 'No apta · Cat. 1',
  };

  return (
    <section className="collection" id="coleccion">
      <div className="container">
        <header className="section-head">
          <h2>La colección.<br/>Una montura, dos momentos.</h2>
          <p className="lede">
            Misma silueta. Mismo acetato premium. Cambia la lente —
            y con ella el momento del día en que se usan.
          </p>
        </header>

        <div className="products">
          <ProductCard variant={yellow} />
          <ProductCard variant={red} />
        </div>
      </div>
    </section>
  );
}

window.Collection = Collection;
window.ProductCard = ProductCard;