/* ===== POLARIZADOS ===== */
const HUPER = {
  desc: "Hüperoptik es la línea de polarizado automotriz más exclusiva del mundo. Su tecnología europea avanzada y su tinte único la convierten en la opción más completa y premium del mercado. Polarizados Ya es el ÚNICO distribuidor autorizado en Colombia para el sector automotriz.",
  beneficios: [
    'Visibilidad perfecta de adentro hacia afuera en cualquier porcentaje de opacidad',
    'Privacidad total desde el exterior, ajustable según el nivel elegido',
    'Tinte europeo exclusivo — el liner está contramarcado con el logo de la marca',
    'Superior rechazo de calor, UV y luz visible frente a cualquier otra línea del mercado',
    'Garantía de por vida',
  ],
  porcentajes: ['70%', '50%', '35%', '20%', '5%'],
  tiempo: 'Aproximadamente 4 horas. Sujeto a disponibilidad de agenda.',
  lineas: [
    { name: 'Ceramic I3', desc: 'Tecnología cerámica de triple capa. Máximo rechazo de calor sin afectar la señal de celular ni GPS.' },
    { name: 'Ceramic IR', desc: 'Bloquea rayos infrarrojos hasta en un 97%. Mantiene el interior del vehículo significativamente más fresco.' },
    { name: 'Black Ceramic', desc: 'Oscuridad máxima combinada con tecnología cerámica. Privacidad total con el mejor rendimiento térmico.' },
  ],
  faqs: [
    { q: '¿Cómo verifico que me están instalando Hüperoptik real?', a: 'El liner debe estar contramarcado con el logo de la marca. Además, su tono único lo hace distinguible de cualquier imitación. En Polarizados Ya somos los únicos autorizados en Colombia, lo que garantiza autenticidad.' },
    { q: '¿Puedo instalar el porcentaje que yo quiera?', a: 'Sí. Manejamos desde 70% (muy claro, ideal para mantener visibilidad con mínima privacidad) hasta 5% (máxima privacidad y reducción de calor).' },
    { q: '¿Veo bien de adentro hacia afuera con porcentajes oscuros?', a: 'Sí. La tecnología avanzada de Hüperoptik permite excelente visibilidad desde el interior hacia el exterior incluso en los porcentajes más oscuros.' },
    { q: '¿Por qué elegir Polarizados Ya para esta instalación?', a: 'Somos los únicos distribuidores autorizados de Hüperoptik en el sector automotriz en todo el territorio colombiano. Respaldamos cada instalación con garantía de por vida.' },
  ],
};

const AUTOBAHN = {
  desc: "Autobahn es nuestra segunda línea premium, con alta tecnología de rechazo solar y un rendimiento sobresaliente en claridad visual. Exclusiva para Polarizados Ya en Colombia, con garantía de por vida.",
  beneficios: [
    'Alto rechazo de calor y rayos UV',
    'Claridad visual excepcional desde el interior',
    'Garantía de por vida',
    'Tecnología de película multicapa de alta durabilidad',
    'Instalación profesional certificada',
  ],
  faqs: [
    { q: '¿Qué diferencia hay entre Autobahn y Hüperoptik?', a: 'Ambas son líneas premium de altísima calidad. Hüperoptik tiene tecnología de tinte europeo exclusivo y es la más avanzada del mundo. Autobahn ofrece un rendimiento excelente en la gama alta con garantía de por vida.' },
    { q: '¿Tiene garantía?', a: 'Sí. Garantía de por vida en materiales e instalación.' },
  ],
};

const AMERICANO = {
  desc: "Nuestro polarizado americano es una excelente opción para quienes buscan privacidad, reducción de calor y un acabado profesional con el respaldo de instalación de Polarizados Ya.",
  beneficios: [
    'Buena reducción de calor y rayos UV',
    'Privacidad efectiva en varios niveles de opacidad',
    'Instalación profesional garantizada',
    'Varios porcentajes disponibles',
  ],
  faqs: [
    { q: '¿El polarizado americano es de menor calidad?', a: 'Es una línea diferente a las premium europeas, pero instalada con el mismo nivel de profesionalismo y cuidado que todas nuestras líneas. Ideal para quienes buscan una relación calidad-precio más accesible.' },
    { q: '¿Tiene garantía?', a: 'Sí, incluye garantía de instalación.' },
  ],
};

function PolarizadosPage() {
  const [tab, setTab] = React.useState('huper');
  const data = tab === 'huper' ? HUPER : tab === 'autobahn' ? AUTOBAHN : AMERICANO;
  const title = tab === 'huper' ? 'Hüperoptik' : tab === 'autobahn' ? 'Autobahn' : 'Polarizado Americano';

  return (
    <>
      <PageHero
        eyebrow="Servicios · Polarizados"
        title="Polarizados premium con"
        accent="garantía de por vida."
        subtitle="Tres líneas exclusivas. Hüperoptik europeo, Autobahn premium y polarizado americano. Cada vehículo entra a un proceso controlado, en cabina cerrada, con instaladores certificados."
      />

      <section className="tab-section">
        <div className="container">
          <div className="tabs-bar reveal">
            <button className={`tab-btn ${tab === 'huper' ? 'active' : ''}`} onClick={() => setTab('huper')}>
              <span className="tab-num">01</span>
              <span>Hüperoptik</span>
            </button>
            <button className={`tab-btn ${tab === 'autobahn' ? 'active' : ''}`} onClick={() => setTab('autobahn')}>
              <span className="tab-num">02</span>
              <span>Autobahn</span>
            </button>
            <button className={`tab-btn ${tab === 'americano' ? 'active' : ''}`} onClick={() => setTab('americano')}>
              <span className="tab-num">03</span>
              <span>Americano</span>
            </button>
          </div>

          <div className="tab-content reveal" key={tab}>
            <div className="tab-layout">
              <div className="tab-media">
                <MediaSlot label={`${title} — instalación`} ratio="4/5" mode="image" />
              </div>

              <div className="tab-info">
                <h2 className="tab-title">{title}</h2>
                <p className="tab-desc">{data.desc}</p>

                <div className="info-block">
                  <h3>Beneficios clave</h3>
                  <ul className="check-list">
                    {data.beneficios.map((b) => <li key={b}>{b}</li>)}
                  </ul>
                </div>

                {data.porcentajes && (
                  <div className="info-block">
                    <h3>Porcentajes disponibles</h3>
                    <div className="pct-row">
                      {data.porcentajes.map((p) => <span key={p} className="pct-pill">{p}</span>)}
                    </div>
                  </div>
                )}

                {data.tiempo && (
                  <div className="info-block">
                    <h3>Tiempo de instalación</h3>
                    <p className="info-text">{data.tiempo}</p>
                  </div>
                )}

                <WACta message={`Hola Polarizados Ya, quisiera cotizar ${title}.`} />
              </div>
            </div>

            {data.lineas && (
              <div className="sublines reveal">
                <h3 className="block-h">Sub-productos {title}</h3>
                <div className="sublines-grid">
                  {data.lineas.map((l) => (
                    <div className="subline-card" key={l.name}>
                      <h4>{l.name}</h4>
                      <p>{l.desc}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="faq-section">
        <div className="container">
          <SectionHead
            eyebrow={`Preguntas frecuentes · ${title}`}
            title="Resolvemos tus"
            accent="dudas."
          />
          <div className="faq-list reveal">
            {data.faqs.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>
    </>
  );
}

window.PolarizadosPage = PolarizadosPage;