/* ===== ACCESORIOS ===== */
const ACCESORIOS_DEMO = [
  { name: 'Tapetes premium en cuero', desc: 'Diseñados a medida según el modelo del vehículo. Resistentes, lavables y con acabado fino.' },
  { name: 'Cubre-volantes de cuero', desc: 'Ajuste perfecto y agarre seguro. Disponibles en múltiples colores y costuras.' },
  { name: 'Sensores de parqueo', desc: 'Sistema de alerta acústica y visual. Instalación profesional incluida.' },
  { name: 'Cámaras de reversa HD', desc: 'Visión nocturna y ángulo amplio. Compatibles con pantalla original o adicional.' },
  { name: 'Pantallas multimedia', desc: 'Android Auto / Apple CarPlay. Instalación con kit OEM cuando aplica.' },
  { name: 'Bandejas organizadoras', desc: 'Para baúl y consola central. Mantén tu vehículo ordenado.' },
  { name: 'Spoilers y aerodinámicos', desc: 'Detalles estéticos para mejorar el look del vehículo.' },
  { name: 'Estribos laterales', desc: 'Ideales para SUV y camionetas. Fáciles de instalar y resistentes.' },
];

function AccesoriosPage() {
  return (
    <>
      <PageHero
        eyebrow="Servicios · Accesorios"
        title="Catálogo completo de"
        accent="accesorios automotrices."
        subtitle="Todo lo que tu vehículo necesita para elevar su confort, seguridad y estética. Productos premium, instalación profesional incluida."
      />

      <section className="page-content">
        <div className="container">
          <div className="section-head reveal" style={{ marginBottom: 56 }}>
            <div>
              <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-flex' }}>Catálogo · destacados</span>
              <h2>Productos <span className="accent">seleccionados.</span></h2>
            </div>
            <p>Mostramos una selección de nuestro catálogo. Para consultar disponibilidad, precio o pedidos especiales, escríbenos por WhatsApp.</p>
          </div>

          <div className="acc-grid">
            {ACCESORIOS_DEMO.map((a, i) => (
              <div className="acc-card reveal" data-delay={String((i % 4) + 1)} key={a.name}>
                <MediaSlot label={a.name} ratio="1/1" mode="image" />
                <div className="acc-info">
                  <h3>{a.name}</h3>
                  <p>{a.desc}</p>
                  <a
                    href={`https://wa.me/573106018633?text=${encodeURIComponent('Hola, quisiera consultar precio y disponibilidad de: ' + a.name)}`}
                    className="acc-link"
                    target="_blank" rel="noopener"
                  >
                    Consultar por WhatsApp <Arrow />
                  </a>
                </div>
              </div>
            ))}
          </div>

          <div className="reveal" style={{ marginTop: 64, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://wa.me/573106018633" className="btn btn-whatsapp" target="_blank" rel="noopener">
              <Whatsapp /> Ver catálogo completo por WhatsApp
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

window.AccesoriosPage = AccesoriosPage;