/* ===== PPF (Paint Protection Film) ===== */
const PPF_FAQS = [
  { q: '¿El PPF es un plástico?', a: 'No. Es una película termoplástica de poliuretano de alta tecnología. No tiene la apariencia ni las propiedades de un plástico convencional.' },
  { q: '¿Se puede instalar en todo el vehículo?', a: 'Sí. Puede cubrir toda la carrocería o solo las zonas más expuestas al desgaste. La elección depende del presupuesto y las prioridades del propietario.' },
  { q: '¿Cómo reconocer un PPF de alta calidad?', a: 'Los factores clave son: espesor, elasticidad, adhesivo de calidad, capacidad de autorreparación con calor, resistencia UV y la reputación del instalador. En Polarizados Ya trabajamos exclusivamente con 3M.' },
  { q: '¿Daña la pintura al retirarlo?', a: 'No, siempre y cuando la instalación y retiro sean realizados por profesionales. El adhesivo de 3M está formulado para no dejar residuos ni dañar la pintura original.' },
  { q: '¿Quién instala el PPF?', a: 'Nuestros instaladores profesionales especializados en PPF. Tu vehículo queda en las mejores manos.' },
];

function PPFPage() {
  return (
    <>
      <PageHero
        eyebrow="Servicios · Paint Protection Film"
        title="Una segunda piel"
        accent="invisible para tu pintura."
        subtitle="Película transparente termoplástica de poliuretano marca 3M que se aplica directamente sobre la pintura del vehículo. Absorbe los impactos antes de que lleguen a la laca original."
      />

      <section className="page-content">
        <div className="container">
          <div className="content-grid">
            <div className="content-media reveal">
              <MediaSlot label="PPF aplicado · vehículo" ratio="4/5" mode="image" />
            </div>
            <div className="content-info reveal" data-delay="2">
              <h2>Película termoplástica 3M con autorreparación</h2>
              <p>El Paint Protection Film (PPF) de Polarizados Ya actúa como una segunda piel invisible sobre tu pintura. Absorbe impactos, rayones y elementos ambientales antes de que lleguen a la laca original.</p>

              <div className="info-block">
                <h3>¿Qué protege?</h3>
                <div className="chip-row">
                  {['Rayaduras', 'Arañazos', 'Impactos de gravilla', 'Restos de insectos', 'Marcas de lavado', 'Elementos ambientales'].map((c) => (
                    <span className="pct-pill" key={c}>{c}</span>
                  ))}
                </div>
              </div>

              <div className="info-block">
                <h3>Ventajas clave</h3>
                <ul className="check-list">
                  <li>Capacidad de autorreparación con el calor — los rayones superficiales desaparecen solos</li>
                  <li>Protección UV para preservar el color original de la pintura</li>
                  <li>Adhesivo de alta calidad que no daña la pintura al retirar</li>
                  <li>Mayor durabilidad frente al desgaste diario y condiciones climáticas extremas</li>
                  <li>Completamente invisible una vez instalado</li>
                </ul>
              </div>

              <WACta message="Hola Polarizados Ya, quisiera cotizar PPF para mi vehículo." />
            </div>
          </div>

          <div className="info-block reveal" style={{ marginTop: 80 }}>
            <h3 className="block-h">Zonas de instalación más frecuentes</h3>
            <div className="zones-grid">
              {['Capó', 'Parachoques delantero', 'Parachoques trasero', 'Espejos laterales', 'Guardabarros', 'Faldones laterales', 'Pilares y marcos', 'Manijas', 'Borde del techo', '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="PPF —" accent="lo que debes saber." />
          <div className="faq-list reveal">
            {PPF_FAQS.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>
    </>
  );
}

window.PPFPage = PPFPage;