/* global React, ImgSlot, VideoSlot */
const { useState: useStP, useEffect: useEfP, useRef: useRfP } = React;

/* ===================== Sticky CTA ===================== */
function StickyCta() {
  const [hidden, setHidden] = useStP(true);
  useEfP(() => {
    function onScroll() {
      setHidden(window.scrollY < 240);
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="https://wa.me/34642606395?text=Hola%20Vibelami%2C%20me%20gustar%C3%ADa%20solicitar%20mi%20valoraci%C3%B3n%20gratuita%20para%20VIBROWS."
       target="_blank" rel="noopener noreferrer"
       className={"sticky-cta " + (hidden ? "is-hidden" : "")}
       aria-label="Solicitar valoración gratuita por WhatsApp">
      <svg width="18" height="18" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" className="text-[#7AD49E]">
        <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.46 1.66 6.34L3 29l6.84-1.62A12.93 12.93 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3z"/>
      </svg>
      <span>Solicitar valoración gratuita</span>
      <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
        <path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
      </svg>
    </a>
  );
}

/* ===================== Promoción / Landing VIBROWS ===================== */
function PagePromocion({ onNavigate }) {
  const WA = "https://wa.me/34642606395?text=Hola%20Vibelami%2C%20me%20gustar%C3%ADa%20solicitar%20mi%20valoraci%C3%B3n%20gratuita%20para%20VIBROWS.";

  const testimonios = [
    {
      name: "Laura S.",
      city: "Castellón",
      stars: 5,
      quote: "Llevaba años cubriendo mis cejas con maquillaje. Hoy me levanto y mi cara ya está. El resultado es tan natural que mis amigas no saben qué he hecho — solo notan que estoy mejor."
    },
    {
      name: "Andrea M.",
      city: "Valencia",
      stars: 5,
      quote: "Vine con una micropigmentación antigua mal hecha. Bela y Vivian me explicaron el plan con honestidad. Tres meses después: cejas nuevas, naturales y simétricas. Profesionales de verdad."
    },
    {
      name: "Cristina V.",
      city: "Valencia",
      stars: 5,
      quote: "El atelier es precioso, el trato impecable y la técnica de otro nivel. Te explican cada paso. Salí emocionada y, sobre todo, segura del resultado. Vuelvo seguro."
    },
    {
      name: "Marta R.",
      city: "Castellón",
      stars: 5,
      quote: "Soy maquilladora profesional y soy muy exigente. Bela hizo un trabajo de orfebrería con mis cejas. Hiperrealismo de verdad, no un dibujo. Sin duda las mejores."
    },
  ];

  return (
    <>
      {/* ---------- HERO ---------- */}
      <section aria-labelledby="promo-title" className="relative bg-ink text-ivory on-dark overflow-hidden">
        {/* Background video + image fallback */}
        <div className="absolute inset-0 hero-zoom" aria-hidden="true">
          <video autoPlay loop muted playsInline
                 poster={window.siteMedia.landingPromo.heroBackground.image}
                 className="absolute inset-0 w-full h-full object-cover opacity-55">
            {(window.siteMedia.landingPromo.heroBackground.videoSources || []).map((v, i) => (
              <source key={i} src={v.src} type={v.type} />
            ))}
          </video>
          <img src={window.siteMedia.landingPromo.heroBackground.image}
               alt="" className="absolute inset-0 w-full h-full object-cover opacity-55"
               onError={(e) => { e.currentTarget.style.display = "none"; }} />
          <div className="absolute inset-0 bg-gradient-to-b from-ink/70 via-ink/55 to-ink/95"></div>
          <div className="absolute inset-0 promo-vignette"></div>
        </div>

        <div className="relative mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 min-h-[88vh] flex flex-col justify-end pb-16 md:pb-20 pt-28 md:pt-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 lg:col-span-9">
              <p className="text-[11px] tracking-widest-2 uppercase text-ivory/70 mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-ivory/50"></span>
                Edición limitada · Técnica VIBROWS
              </p>
              <h1 id="promo-title"
                  className="font-serif-display text-ivory text-[44px] sm:text-[64px] md:text-[88px] lg:text-[112px] leading-[0.98] tracking-[-0.02em]">
                Transforma tu mirada
                <br />
                <em className="italic font-light">en 3 horas</em>.
              </h1>
              <p className="mt-8 max-w-[60ch] text-[16px] md:text-[19px] leading-[1.55] text-ivory/85">
                Cejas <span className="text-ivory">hiperrealistas</span> pelo a pelo, hechas por las únicas españolas premiadas en Dubai y Arabia. Sin maquillaje. Sin retoques. Sin compromiso para reservar tu valoración.
              </p>
            </div>

            <div className="col-span-12 lg:col-span-3 flex flex-col gap-3">
              <a href={WA} target="_blank" rel="noopener noreferrer"
                 className="pulse-cta inline-flex items-center justify-center gap-3 bg-ivory text-ink px-8 py-5 text-[12px] tracking-[0.22em] uppercase rounded-full transition-transform hover:scale-[1.03]">
                Reservar mi valoración
                <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                  <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                </svg>
              </a>
              <p className="text-center text-[10px] tracking-widest-2 uppercase text-ivory/55">
                Plazas limitadas este mes
              </p>
            </div>
          </div>

          {/* Trust strip */}
          <div className="mt-16 md:mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 border-t border-ivory/20 pt-8 fade-up delay-5">
            <div>
              <p className="font-serif-display text-ivory text-2xl md:text-3xl">3 premios</p>
              <p className="mt-1 text-[10px] tracking-widest-2 uppercase text-ivory/55">Internacionales</p>
            </div>
            <div>
              <p className="font-serif-display text-ivory text-2xl md:text-3xl">+800 clientas</p>
              <p className="mt-1 text-[10px] tracking-widest-2 uppercase text-ivory/55">Atendidas en cabina</p>
            </div>
            <div>
              <p className="font-serif-display text-ivory text-2xl md:text-3xl">2 sedes</p>
              <p className="mt-1 text-[10px] tracking-widest-2 uppercase text-ivory/55">Castellón · Valencia</p>
            </div>
            <div>
              <p className="font-serif-display text-ivory text-2xl md:text-3xl italic">100 %</p>
              <p className="mt-1 text-[10px] tracking-widest-2 uppercase text-ivory/55">Resultado garantizado</p>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- ANTES / DESPUÉS ---------- */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-36">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 lg:col-span-7">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Antes &amp; después
              </p>
              <h2 className="font-serif-display text-ink text-[40px] sm:text-[56px] md:text-[72px] leading-[1.04] tracking-[-0.015em]">
                De cejas dudosas
                <br />
                a <em className="italic font-light">cejas que enmarcan tu cara</em>.
              </h2>
            </div>
            <div className="col-span-12 lg:col-span-5">
              <p className="text-[15px] md:text-[16px] leading-[1.75] text-charcoal max-w-[44ch]">
                La técnica VIBROWS dibuja pelo a pelo con una densidad y dirección imposibles de imitar con maquillaje. El resultado se ve real porque <span className="text-ink">imita la naturaleza, no la sustituye</span>.
              </p>
            </div>
          </div>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 stagger">
            <article className="relative">
              <ImgSlot
                src={window.siteMedia.landingPromo.before.image}
                alt={window.siteMedia.landingPromo.before.alt}
                label="Antes"
                badge="01"
                aspect="aspect-[4/5]" />
              <div className="absolute top-5 left-5 z-10 bg-ivory/95 backdrop-blur px-4 py-2 rounded-full">
                <span className="text-[10px] tracking-widest-2 uppercase text-ink">Sin VIBROWS</span>
              </div>
              <div className="mt-5">
                <h3 className="font-serif-display text-ink text-[26px] md:text-[30px]">Cejas despobladas, sin estructura</h3>
                <ul className="mt-4 space-y-2 text-[14px] text-charcoal leading-[1.7]">
                  <li className="flex gap-3"><span aria-hidden="true" className="text-mute">—</span>Asimetría natural acentuada con el tiempo.</li>
                  <li className="flex gap-3"><span aria-hidden="true" className="text-mute">—</span>Maquillaje diario que se desdibuja con el sudor.</li>
                  <li className="flex gap-3"><span aria-hidden="true" className="text-mute">—</span>Sin "marco" facial — la mirada se apaga.</li>
                </ul>
              </div>
            </article>

            <article className="relative">
              <ImgSlot
                src={window.siteMedia.landingPromo.after.image}
                alt={window.siteMedia.landingPromo.after.alt}
                label="Después"
                badge="02"
                aspect="aspect-[4/5]" />
              <div className="absolute top-5 left-5 z-10 bg-ink text-ivory px-4 py-2 rounded-full">
                <span className="text-[10px] tracking-widest-2 uppercase">Con VIBROWS</span>
              </div>
              <div className="mt-5">
                <h3 className="font-serif-display text-ink text-[26px] md:text-[30px]">Cejas hiperrealistas, pelo a pelo</h3>
                <ul className="mt-4 space-y-2 text-[14px] text-charcoal leading-[1.7]">
                  <li className="flex gap-3"><span aria-hidden="true" className="text-nude">●</span>Densidad uniforme y dirección de pelo real.</li>
                  <li className="flex gap-3"><span aria-hidden="true" className="text-nude">●</span>Mapping facial personalizado y simétrico.</li>
                  <li className="flex gap-3"><span aria-hidden="true" className="text-nude">●</span>Despierta lista 24/7 durante 1–2 años.</li>
                </ul>
              </div>
            </article>
          </div>

          <div className="mt-14 text-center">
            <a href={WA} target="_blank" rel="noopener noreferrer"
               className="pulse-cta inline-flex items-center gap-3 bg-ink text-ivory px-8 py-[18px] text-[12px] tracking-[0.22em] uppercase rounded-full transition-transform hover:scale-[1.03]">
              Quiero estas cejas
              <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
              </svg>
            </a>
          </div>
        </div>
      </section>

      {/* ---------- MEDIA REEL ---------- */}
      <section className="bg-cream">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Vídeos · Casos reales
              </p>
              <h2 className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[64px] leading-[1.04] tracking-[-0.015em]">
                El antes y el después
                <br />
                <em className="italic font-light">en movimiento</em>.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-4">
              <p className="text-[15px] leading-[1.75] text-charcoal max-w-[40ch]">
                Clips reales de cabina sin filtros. Mira la diferencia con tus propios ojos antes de decidir.
              </p>
            </div>
          </div>

          <div className="mt-14 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-5 stagger">
            {window.siteMedia.landingPromo.reels.map((r, i) => (
              <VideoSlot key={i} label={r.label} poster={r.poster} srcs={r.videoSources || []} aspect="aspect-[9/16]" />
            ))}
          </div>
        </div>
      </section>

      {/* ---------- PRUEBA SOCIAL ---------- */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end stagger">
            <div className="col-span-12 md:col-span-7">
              <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
                Lo que dicen de nosotras
              </p>
              <h2 className="font-serif-display text-ink text-[40px] sm:text-[52px] md:text-[60px] leading-[1.04] tracking-[-0.015em]">
                Más de 800 clientas,
                <br />
                <em className="italic font-light">una sola palabra</em>: confianza.
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:text-right">
              <div className="inline-flex flex-col items-start md:items-end gap-2">
                <div className="flex items-center gap-1">
                  {[0,1,2,3,4].map(i => (
                    <svg key={i} width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-nude" aria-hidden="true">
                      <path d="M12 2l3 6.9 7.6.6-5.8 4.9 1.8 7.4L12 17.8 5.4 21.8l1.8-7.4L1.4 9.5 9 8.9 12 2z"/>
                    </svg>
                  ))}
                </div>
                <p className="text-[11px] tracking-widest-2 uppercase text-mute">4.9 / 5 en Google · 200+ reseñas</p>
              </div>
            </div>
          </div>

          <ul className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6 stagger">
            {testimonios.map((t, i) => (
              <li key={i} className="bg-cream/60 border border-line/70 rounded-2xl p-7 md:p-8 flex flex-col">
                <div className="flex items-center gap-1">
                  {Array.from({ length: t.stars }).map((_, j) => (
                    <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-nude" aria-hidden="true">
                      <path d="M12 2l3 6.9 7.6.6-5.8 4.9 1.8 7.4L12 17.8 5.4 21.8l1.8-7.4L1.4 9.5 9 8.9 12 2z"/>
                    </svg>
                  ))}
                </div>
                <p className="mt-6 font-serif-display text-ink text-[20px] md:text-[22px] leading-[1.35] italic">"{t.quote}"</p>
                <div className="mt-auto pt-8 border-t border-line/80">
                  <p className="font-serif-display text-ink text-[18px]">{t.name}</p>
                  <p className="text-[10px] tracking-widest-2 uppercase text-mute mt-1">Cliente · {t.city}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ---------- GARANTÍAS ---------- */}
      <section className="bg-charcoal text-ivory on-dark">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-20 md:py-28">
          <div className="grid grid-cols-12 gap-6 md:gap-10 items-end mb-12 stagger">
            <div className="col-span-12 md:col-span-8">
              <p className="text-[11px] tracking-widest-2 uppercase text-ivory/60 mb-6 flex items-center gap-4">
                <span aria-hidden="true" className="inline-block w-10 h-px bg-ivory/40"></span>
                Por qué reservar hoy
              </p>
              <h2 className="font-serif-display text-ivory text-[36px] sm:text-[48px] md:text-[56px] leading-[1.04] tracking-[-0.015em]">
                Una decisión segura,
                <br className="hidden md:block" />
                <em className="italic font-light">no un riesgo estético</em>.
              </h2>
            </div>
          </div>

          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-ivory/15 stagger">
            {[
              { t: "Valoración gratuita", d: "Estudio de caso, diseño y simulación sin compromiso." },
              { t: "Retoque incluido",    d: "Cita de afianzamiento incluida en cada tratamiento." },
              { t: "Pigmentos premium",   d: "Marcas hipoalergénicas certificadas a nivel europeo." },
              { t: "Plan de pago flexible", d: "Facilidades de pago, sin recargos ni letra pequeña." },
            ].map((g, i) => (
              <li key={i} className="bg-charcoal p-7 md:p-8">
                <p className="text-[10px] tracking-widest-2 uppercase text-ivory/55">0{i + 1}</p>
                <h3 className="mt-4 font-serif-display text-ivory text-[22px] md:text-[24px]">{g.t}</h3>
                <p className="mt-3 text-[13.5px] leading-[1.7] text-ivory/75">{g.d}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ---------- FINAL CTA ---------- */}
      <section className="bg-ivory">
        <div className="mx-auto max-w-[1400px] px-6 md:px-10 lg:px-14 py-24 md:py-32">
          <div className="border border-line/80 rounded-3xl p-10 md:p-16 lg:p-20 bg-cream/40 text-center fade-up">
            <p className="text-[11px] tracking-widest-2 uppercase text-mute mb-8 inline-flex items-center gap-4">
              <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
              Último paso
              <span aria-hidden="true" className="inline-block w-10 h-px bg-mute"></span>
            </p>
            <h2 className="font-serif-display text-ink text-[40px] sm:text-[56px] md:text-[72px] lg:text-[88px] leading-[1.02] tracking-[-0.02em] max-w-[18ch] mx-auto">
              Tu próxima cara al espejo,
              <em className="italic font-light"> empieza con un mensaje</em>.
            </h2>
            <p className="mt-8 text-[15px] md:text-[16px] leading-[1.75] text-charcoal max-w-[52ch] mx-auto">
              Escríbenos por WhatsApp y reservamos tu valoración gratuita esta misma semana. Sin compromiso, sin presión, sin sorpresas.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
              <a href={WA} target="_blank" rel="noopener noreferrer"
                 className="pulse-cta inline-flex items-center justify-center gap-3 bg-ink text-ivory px-9 py-5 text-[12px] tracking-[0.22em] uppercase rounded-full transition-transform hover:scale-[1.03]">
                Solicitar valoración gratuita
                <svg width="16" height="10" viewBox="0 0 16 10" fill="none" aria-hidden="true">
                  <path d="M1 5h13M10 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/>
                </svg>
              </a>
              <button onClick={() => onNavigate("contacto")}
                      className="inline-flex items-center justify-center gap-3 border border-ink text-ink bg-transparent px-9 py-5 text-[12px] tracking-[0.22em] uppercase rounded-full transition-colors hover:bg-ink hover:text-ivory">
                Prefiero email
              </button>
            </div>
            <p className="mt-8 text-[10px] tracking-widest-2 uppercase text-mute">
              Castellón · Valencia · Por cita previa
            </p>
          </div>
        </div>
      </section>

      <StickyCta />
    </>
  );
}

Object.assign(window, { PagePromocion, StickyCta });