/* ===== HOME (Inicio) ===== */
const HERO_SLIDES = [
  { title: 'La empresa de polarizados mejor calificada de Colombia', sub: 'Marcas exclusivas — Hüperoptik, Autobahn y 3M — con garantía de por vida.' },
  { title: 'Protege tu vehículo con la película más resistente', sub: 'UltraSecure: hasta 1500 micras de resistencia. Únicos instaladores autorizados en Colombia.' },
  { title: 'Atendemos donde estás', sub: '7 sedes en Colombia + Miami, Florida. Agenda tu cita hoy.' },
];

const WHY_US = [
  { title: 'Marcas exclusivas', desc: 'Únicos distribuidores autorizados de Hüperoptik y Autobahn en Colombia.' },
  { title: 'Garantía de por vida', desc: 'Respaldo total en todos nuestros polarizados y películas premium.' },
  { title: 'Instaladores certificados', desc: 'Equipo profesional especializado en cada servicio automotriz.' },
  { title: 'Mejor calificados en Google', desc: 'La empresa de polarizados mejor reseñada de Colombia en Google Maps.' },
];

const PRUEBAS = [
  { title: 'Prueba TSR', desc: 'Medición del porcentaje de rechazo solar total en tiempo real.' },
  { title: 'Prueba del chocolate', desc: 'Demostración de rechazo de calor con chocolate sobre el vidrio.' },
  { title: 'Prueba de calidad total', desc: 'Comparación de rendimiento entre distintas líneas de producto.' },
  { title: 'Cómo elegir un polarizado', desc: 'Guía educativa para el cliente sobre qué evaluar al comprar.' },
];

/* Hero — video first, slides indicator, text below */
function HomeHero() {
  const [slideIdx, setSlideIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setSlideIdx((i) => (i + 1) % HERO_SLIDES.length), 6500);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="home-hero">
      <div className="hero-video-bg">
        <video autoPlay muted loop playsInline poster="" data-needs-src="true">
          {/* When ready, add <source src="path/to/video.mp4" type="video/mp4" /> */}
        </video>
        <div className="placeholder" aria-hidden="true" />
      </div>
      <div className="aurora" aria-hidden="true">
        <div className="wave wave-1"></div>
        <div className="wave wave-2"></div>
        <div className="wave wave-3"></div>
        <div className="wave wave-4"></div>
      </div>
      <div className="hero-overlay" aria-hidden="true" />

      <div className="hero-video-meta-top">
        <span className="mono">REEL · HERO</span>
        <span className="mono">Polarizados Ya — 2026</span>
      </div>

      <div className="hero-video-cta">
        <button className="hero-play-cta" aria-label="Play reel">
          <svg viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1"/>
            <path d="M10 8.5L16 12L10 15.5V8.5Z" fill="currentColor"/>
          </svg>
        </button>
      </div>

      <div className="hero-slides-indicator">
        {HERO_SLIDES.map((_, i) => (
          <button
            key={i}
            className={`slide-dot ${i === slideIdx ? 'active' : ''}`}
            onClick={() => setSlideIdx(i)}
            aria-label={`Slide ${i + 1}`}
          />
        ))}
      </div>

      <div className="scroll-indicator" aria-hidden="true">
        <span>Scroll</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

/* Text intro section right after video */
function HeroText() {
  const [slideIdx, setSlideIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setSlideIdx((i) => (i + 1) % HERO_SLIDES.length), 6500);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero-text">
      <div className="container">
        <div className="reveal hero-top">
          <span className="eyebrow">Especialistas en polarizados &amp; películas · desde 2010</span>
          <div className="hero-meta">
            <span className="mono">7 sedes · Colombia + Miami</span>
            <span>Citas abiertas esta semana</span>
          </div>
        </div>

        <div className="slides-wrap">
          {HERO_SLIDES.map((s, i) => (
            <div key={i} className={`slide ${i === slideIdx ? 'active' : ''}`}>
              <h1 className="hero-text-title">
                {s.title}<span className="accent">.</span>
              </h1>
              <p className="hero-text-sub">{s.sub}</p>
            </div>
          ))}
        </div>

        <div className="hero-text-actions reveal" data-delay="3">
          <a href="contacto.html" className="btn btn-primary">Agenda tu cita <Arrow /></a>
          <a href="polarizados.html" className="btn btn-ghost">Ver servicios</a>
        </div>
      </div>
    </section>
  );
}

/* Por qué elegirnos */
function WhyUs() {
  return (
    <section className="why-us" data-parallax="0.05">
      <div className="container">
        <SectionHead
          eyebrow="Por qué elegirnos"
          title="Calidad comprobable,"
          accent="no publicidad vacía."
          subtitle="No vendemos productos genéricos. Manejamos exclusividades con las mejores marcas del planeta y respaldamos cada instalación con garantías reales."
        />
        <div className="why-grid">
          {WHY_US.map((w, i) => (
            <div className="why-card reveal" data-delay={String((i % 4) + 1)} key={w.title}>
              <div className="why-num">0{i + 1}</div>
              <h3>{w.title}</h3>
              <p>{w.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Services section */
function HomeServices() {
  return (
    <section className="services" id="servicios">
      <div className="container">
        <SectionHead
          eyebrow="Nuestros servicios"
          title="Seis servicios."
          accent="Un solo estándar."
          subtitle="Cada vehículo entra a un proceso controlado, con instaladores certificados por fábrica. Sin atajos, sin sustituciones de material."
        />
        <div className="services-grid">
          {window.SERVICES.map((s) => (
            <ServiceCard key={s.slug} num={s.num} title={s.title} desc={s.desc} tags={s.tags} href={`${s.slug}.html`} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* Pruebas de calidad */
function Pruebas() {
  return (
    <section className="pruebas">
      <div className="container">
        <SectionHead
          eyebrow="Pruebas de calidad"
          title="Resultados que"
          accent="puedes ver."
          subtitle="Demostraciones en video del rendimiento real de nuestras películas. Sin trucos de cámara, sin marketing."
        />
        <div className="pruebas-grid">
          {PRUEBAS.map((p, i) => (
            <div className="prueba-card reveal" data-delay={String((i % 4) + 1)} key={p.title}>
              <MediaSlot label={p.title} ratio="16/10" mode="video" />
              <div className="prueba-info">
                <h4>{p.title}</h4>
                <p>{p.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Comparativa ETR */
function ETR() {
  return (
    <section className="etr">
      <div className="container">
        <SectionHead
          eyebrow="Comparativa ETR"
          title="Energía Total Rechazada."
          accent="Autobahn y Hüperoptik vs el resto."
          subtitle="Manejamos la más alta y exclusiva calidad del mercado. Datos técnicos reales, indexables para motores de búsqueda."
        />

        <div className="etr-table reveal">
          <div className="etr-row etr-head">
            <div>Línea / Marca</div>
            <div>ETR (Energía Total Rechazada)</div>
            <div>UV Block</div>
            <div>Visibilidad</div>
          </div>
          <div className="etr-row">
            <div><strong>Hüperoptik Ceramic IR</strong></div>
            <div className="etr-bar"><span style={{ width: '97%' }}>97%</span></div>
            <div>99%</div>
            <div>Excelente</div>
          </div>
          <div className="etr-row">
            <div><strong>Hüperoptik Ceramic I3</strong></div>
            <div className="etr-bar"><span style={{ width: '93%' }}>93%</span></div>
            <div>99%</div>
            <div>Excelente</div>
          </div>
          <div className="etr-row">
            <div><strong>Autobahn Premium</strong></div>
            <div className="etr-bar"><span style={{ width: '85%' }}>85%</span></div>
            <div>99%</div>
            <div>Excelente</div>
          </div>
          <div className="etr-row">
            <div>Marca global A (referencia)</div>
            <div className="etr-bar"><span style={{ width: '70%' }}>70%</span></div>
            <div>95%</div>
            <div>Buena</div>
          </div>
          <div className="etr-row">
            <div>Marca global B (referencia)</div>
            <div className="etr-bar"><span style={{ width: '55%' }}>55%</span></div>
            <div>90%</div>
            <div>Aceptable</div>
          </div>
          <div className="etr-row">
            <div>Polarizado genérico</div>
            <div className="etr-bar"><span style={{ width: '30%' }}>30%</span></div>
            <div>70%</div>
            <div>Limitada</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Testimonios */
function Testimonios() {
  return (
    <section className="testimonials">
      <div className="container">
        <SectionHead
          eyebrow="Testimonios"
          title="Lo que dicen"
          accent="quienes ya pasaron por nuestras cabinas."
          subtitle="Reseñas reales de clientes en Bogotá, Cali, Medellín, Villavicencio, Chía y Miami."
        />
        <div className="testi-grid">
          {window.TESTIMONIOS.map((t, i) => (
            <div className="testi reveal" data-delay={String(i + 1)} key={i}>
              <div className="testi-stars">{'★'.repeat(t.stars)}</div>
              <p className="testi-quote">"{t.text}"</p>
              <div className="testi-foot">
                <div className="testi-avatar">{t.name.charAt(0)}</div>
                <div className="testi-meta">
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-car">{t.city} · {t.vehicle}</div>
                </div>
              </div>
              <a href="https://www.google.com/maps" className="testi-link" target="_blank" rel="noopener">
                Ver en Google Reviews <Arrow />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Clientes corporativos */
function Corporate() {
  return (
    <section className="corporate">
      <div className="container">
        <div className="corporate-head reveal">
          <span className="eyebrow">Clientes corporativos</span>
          <h3>Empresas que confían en nosotros</h3>
        </div>
        <div className="corporate-marquee">
          <div className="corporate-track">
            {[...window.CORPORATE, ...window.CORPORATE].map((c, i) => (
              <div className="corp-logo" key={i}>{c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Sedes resumen */
function SedesResumen() {
  return (
    <section className="sedes-resumen">
      <div className="container">
        <SectionHead
          eyebrow="Sedes"
          title="Atendemos"
          accent="donde estás."
          subtitle="7 sedes en Colombia + Miami, Florida. Cada locación opera bajo el mismo protocolo, los mismos materiales y la misma garantía."
        />
        <div className="loc-grid">
          {window.SEDES.map((s, i) => (
            <div key={s.slug} className="loc reveal" data-delay={String((i % 4) + 1)}>
              <a href={`sedes.html#${s.slug}`} className="loc-link" aria-label={`Ir a ${s.city}`} />
              <div className="loc-flag">{s.city === 'Miami, FL' ? 'US · Florida' : 'CO'}</div>
              <Arrow className="loc-arrow" />
              <div className="loc-city">{s.city}</div>
              <div className="loc-addr">{s.addr}</div>
              <div className="loc-phones">
                {s.phones.map((p) => <a key={p} href={`tel:${p.replace(/\s/g, '')}`}>{p}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="sedes-cta reveal">
          <a href="sedes.html" className="btn btn-ghost">Ver todas las sedes y cómo llegar <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

/* Final CTA banner */
function HomeCTA() {
  return (
    <section className="home-cta">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow">Agenda tu cita</span>
        </div>
        <h2 className="reveal" data-delay="1">
          ¿Listo para <span className="accent">proteger</span><br />
          tu vehículo?
        </h2>
        <div className="home-cta-actions reveal" data-delay="2">
          <a href="contacto.html" className="btn btn-primary">Cotiza tu vehículo <Arrow /></a>
          <a href="https://wa.me/573106018633" className="btn btn-whatsapp" target="_blank" rel="noopener">
            <Whatsapp /> WhatsApp · respuesta inmediata
          </a>
        </div>
      </div>
    </section>
  );
}

/* HOME assembly */
function HomePage() {
  return (
    <>
      <HomeHero />
      <HeroText />
      <WhyUs />
      <HomeServices />
      <Pruebas />
      <ETR />
      <Testimonios />
      <Corporate />
      <SedesResumen />
      <HomeCTA />
    </>
  );
}

window.HomePage = HomePage;