/* ===== PELÍCULA DE SEGURIDAD (UltraSecure) ===== */
const ESPESORES = [
  { id: '300', name: '300 Micras', tag: 'Entrada', ideal: 'Protección básica anti-smash en ventanas laterales', power: 35 },
  { id: '500', name: '500 Micras', tag: 'Alta resistencia', ideal: 'Vehículos particulares en zonas urbanas', power: 55 },
  { id: '700', name: '700 Micras', tag: 'Resistencia superior', ideal: 'SUVs, camionetas y vehículos de trabajo', power: 72 },
  { id: '1000', name: '1000 Micras', tag: 'Protección reforzada', ideal: 'Zonas de alto riesgo o uso intensivo', power: 86 },
  { id: '1500', name: '1500 Micras', tag: 'Máxima protección', ideal: 'Protección máxima disponible en película de seguridad', power: 100 },
];

const SEC_FAQS = [
  { q: '¿Funciona como blindaje?', a: 'No. No es un sistema balístico. Sin embargo, su alta resistencia dificulta y retrasa significativamente el ingreso forzado al vehículo, lo que en la mayoría de los casos desmotiva al delincuente.' },
  { q: '¿En qué ventanas se instala?', a: 'En las ventanas laterales y custodias del vehículo. Los vidrios panorámicos que ya son laminados de fábrica requieren un sistema diferente.' },
  { q: '¿Afecta el rendimiento o el peso del vehículo?', a: 'En absoluto. Es de peso ligero y no requiere ninguna modificación ni alteración estructural del vehículo.' },
  { q: '¿Cuánto tarda la instalación?', a: 'Aproximadamente 1 día. Sujeto a disponibilidad de agenda.' },
  { q: '¿Por qué Polarizados Ya?', a: 'Contamos con contrato de exclusividad de esta película. Somos los únicos instaladores autorizados en todo el territorio nacional, con equipo profesional especializado.' },
];

function PeliculaSeguridadPage() {
  const [tab, setTab] = React.useState('300');
  const active = ESPESORES.find((e) => e.id === tab);

  return (
    <>
      <PageHero
        eyebrow="Servicios · Película de Seguridad"
        title="UltraSecure — protección"
        accent="que sí se siente."
        subtitle="Sistema de alta resistencia para proteger los vidrios laterales y custodias de tu vehículo. No es blindaje balístico, pero crea una barrera física eficaz que dificulta y retrasa significativamente el ingreso no autorizado. Polarizados Ya tiene contrato de exclusividad: únicos instaladores autorizados en Colombia."
      />

      <section className="tab-section">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-flex' }}>5 espesores disponibles</span>
              <h2>Elige el nivel <span className="accent">según tu necesidad.</span></h2>
            </div>
            <p>Tabla comparativa por micras. A mayor micraje, mayor resistencia. Todas las instalaciones incluyen el mismo nivel de profesionalismo y certificación.</p>
          </div>

          <div className="thickness-table reveal">
            <div className="th-row th-head">
              <div>Espesor</div>
              <div>Característica</div>
              <div>Ideal para</div>
              <div>Resistencia</div>
            </div>
            {ESPESORES.map((e) => (
              <div key={e.id} className={`th-row ${tab === e.id ? 'active' : ''}`} onClick={() => setTab(e.id)}>
                <div><strong>{e.name}</strong></div>
                <div>{e.tag}</div>
                <div>{e.ideal}</div>
                <div className="etr-bar"><span style={{ width: e.power + '%' }}>{e.power}%</span></div>
              </div>
            ))}
          </div>

          <div className="tabs-bar reveal" style={{ marginTop: 48 }}>
            {ESPESORES.map((e) => (
              <button key={e.id} className={`tab-btn ${tab === e.id ? 'active' : ''}`} onClick={() => setTab(e.id)}>
                <span className="tab-num">{e.id}µ</span>
                <span>{e.tag}</span>
              </button>
            ))}
          </div>

          <div className="tab-content reveal" key={tab}>
            <div className="tab-layout">
              <div className="tab-media">
                <MediaSlot label={`UltraSecure ${active.name}`} ratio="4/5" mode="image" />
              </div>
              <div className="tab-info">
                <h2 className="tab-title">{active.name}</h2>
                <p className="tab-desc">{active.tag} · {active.ideal}.</p>

                <div className="info-block">
                  <h3>Especificaciones</h3>
                  <ul className="check-list">
                    <li>Espesor: {active.name}</li>
                    <li>Resistencia relativa: {active.power}%</li>
                    <li>Aplicación: vidrios laterales y custodias</li>
                    <li>Compatible con polarizados sobrepuestos</li>
                    <li>Sin alteración de la estructura del vehículo</li>
                  </ul>
                </div>

                <div className="info-block">
                  <h3>Tiempo de instalación</h3>
                  <p className="info-text">Aproximadamente 1 día. Sujeto a disponibilidad de agenda.</p>
                </div>

                <WACta message={`Hola Polarizados Ya, quisiera cotizar UltraSecure ${active.name}.`} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="faq-section">
        <div className="container">
          <SectionHead eyebrow="Preguntas frecuentes" title="Película de" accent="seguridad." />
          <div className="faq-list reveal">
            {SEC_FAQS.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>
    </>
  );
}

window.PeliculaSeguridadPage = PeliculaSeguridadPage;