/* ===== WRAPS ===== */
const WRAPS_FAQS = [
  { q: '¿El wrap daña la pintura original?', a: 'No. Si la instalación y el retiro son realizados por profesionales, la pintura original queda intacta. De hecho, el wrap la protege.' },
  { q: '¿Cómo saber si un wrap es de alta calidad?', a: 'Los factores clave son: espesor, adhesivo de calidad, conformabilidad para adaptarse a las curvas del vehículo, resistencia UV y la experiencia del instalador. En Polarizados Ya trabajamos con 3M.' },
  { q: '¿Cuánto dura un wrap?', a: 'En condiciones normales de uso y con cuidado apropiado, entre 3 y 7 años dependiendo de la exposición al sol y el mantenimiento.' },
  { q: '¿Puedo lavar el vehículo normalmente con wrap?', a: 'Sí, aunque recomendamos lavado a mano o lavadero sin cepillos rotativos para preservar mejor el acabado.' },
  { q: '¿Quién instala el wrap?', a: 'Nuestro equipo de instaladores profesionales especializados en wrap. Tu vehículo quedará en las mejores manos.' },
];

function WrapsPage() {
  return (
    <>
      <PageHero
        eyebrow="Servicios · Wraps Vehiculares"
        title="Cambia el look de tu auto."
        accent="100% reversible."
        subtitle="Técnica de personalización más versátil del mercado. Películas adhesivas 3M sobre la carrocería. Cientos de colores, patrones y acabados. La pintura original queda intacta."
      />

      <section className="page-content">
        <div className="container">
          <div className="content-grid">
            <div className="content-media reveal">
              <MediaSlot label="Wrap aplicado · color change" ratio="4/5" mode="image" />
            </div>
            <div className="content-info reveal" data-delay="2">
              <h2>Personalización completa con 3M</h2>
              <p>El wrap vehicular consiste en aplicar una película adhesiva de alta calidad marca 3M sobre la carrocería. Disponible en cientos de colores y acabados. Totalmente reversible.</p>

              <div className="info-block">
                <h3>Acabados disponibles</h3>
                <div className="chip-row">
                  {['Mate', 'Brillante', 'Satinado', 'Metálico', 'Cromado', 'Texturizado', 'Carbon Fiber'].map((a) => (
                    <span className="pct-pill" key={a}>{a}</span>
                  ))}
                </div>
              </div>

              <div className="info-block">
                <h3>¿Por qué wrap sobre pintura convencional?</h3>
                <ul className="check-list">
                  <li>100% reversible — en cualquier momento vuelves al color original</li>
                  <li>Protege la pintura subyacente del desgaste diario</li>
                  <li>Mayor variedad estética: colores y acabados imposibles con pintura</li>
                  <li>Más económico que una pintura de carrocería completa</li>
                  <li>Duración de 3 a 7 años en condiciones normales de uso</li>
                </ul>
              </div>

              <WACta message="Hola Polarizados Ya, quisiera cotizar un wrap." />
            </div>
          </div>

          <div className="info-block reveal" style={{ marginTop: 80 }}>
            <h3 className="block-h">Zonas más populares</h3>
            <div className="zones-grid">
              {['Techo', 'Capó', 'Espejos laterales', 'Pilares', 'Spoiler', 'Parachoques', 'Carrocería completa'].map((z, i) => (
                <div className="zone-card" key={z}>
                  <span className="zone-num">{String(i + 1).padStart(2, '0')}</span>
                  <span>{z}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="brand-stamp reveal" style={{ marginTop: 80 }}>
            <span className="eyebrow">Marca</span>
            <h3>3M — instalación por técnicos certificados de Polarizados Ya.</h3>
          </div>
        </div>
      </section>

      <section className="faq-section">
        <div className="container">
          <SectionHead eyebrow="Preguntas frecuentes" title="Wraps —" accent="todo lo que debes saber." />
          <div className="faq-list reveal">
            {WRAPS_FAQS.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>
    </>
  );
}

window.WrapsPage = WrapsPage;