/* ============================================================
   HOOKAH — scroll-driven cinematic section + variants
   variant: "scroll" | "slider" | "video"
   ============================================================ */
function HookahScroll() {
  const t = useT();
  const { lang } = useLang();
  const flavors = window.PP.MENU.hookah;
  const wrapRef = useRef(null);
  const [active, setActive] = useState(0);
  const [prog, setProg] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current; if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = el.offsetHeight - window.innerHeight;
      const passed = Math.min(Math.max(-rect.top, 0), total);
      const p = total > 0 ? passed / total : 0;
      setProg(p);
      const idx = Math.min(flavors.length - 1, Math.floor(p * flavors.length + 0.0001));
      setActive(idx < 0 ? 0 : idx);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [flavors.length]);

  return (
    <section id="hookah" ref={wrapRef} className="relative bg-black" style={{ height: `${flavors.length * 95}vh` }}>
      <div className="sticky top-0 h-screen w-full overflow-hidden">
        {/* stacked backgrounds */}
        {flavors.map((f, i) => (
          <div key={i} className="absolute inset-0 transition-opacity duration-700"
            style={{ opacity: i === active ? 1 : 0 }}>
            <Photo src={window.PP.PHOTO(f.img, 1600, 1000)} alt={f.name} className="absolute inset-0 w-full h-full"
              imgClass="object-cover" style={{ transform: `scale(${1.08 + prog * 0.06})`, filter: "brightness(.5) saturate(1.1)" }} />
            <div className="absolute inset-0" style={{ background: `radial-gradient(120% 90% at 70% 50%, ${f.color}26 0%, transparent 55%)` }}></div>
          </div>
        ))}
        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/35 to-black/65"></div>

        {/* smoke wisp */}
        <div className="absolute inset-0 pointer-events-none opacity-30" style={{
          background: `radial-gradient(40% 60% at 50% 110%, ${flavors[active].color}33, transparent 70%)` }}></div>

        <div className="relative z-10 h-full container flex flex-col justify-center">
          <div className="max-w-3xl">
            <div className="label text-gold-soft mb-5 flex items-center gap-3">
              <Icon name="wind" className="w-4 h-4" /> {t("The Hookah Lounge", "El Lounge de Hookah")}
            </div>
            <div className="overflow-hidden">
              <div className="text-[11px] font-bold tracking-[0.4em] mb-3" style={{ color: flavors[active].color }}>
                {String(active + 1).padStart(2, "0")} / {String(flavors.length).padStart(2, "0")}
              </div>
              <h2 key={active} className="fade-view text-6xl md:text-8xl font-black uppercase leading-[0.9] mb-4">
                {flavors[active].name}
              </h2>
              <p key={"f" + active} className="fade-view serif-it text-2xl md:text-3xl mb-4" style={{ color: flavors[active].color }}>
                {L(flavors[active].flavor, lang)}
              </p>
              <p key={"d" + active} className="fade-view text-white/70 text-lg max-w-xl mb-7">{L(flavors[active].d, lang)}</p>
              <div className="flex items-center gap-5">
                <span className="serif text-4xl text-gold-soft">${flavors[active].price}</span>
                <span className="label text-white/45">{t("per bowl", "por cazoleta")}</span>
              </div>
            </div>
          </div>

          {/* progress rail */}
          <div className="absolute right-6 md:right-12 top-1/2 -translate-y-1/2 flex flex-col gap-4">
            {flavors.map((f, i) => (
              <div key={i} className="flex items-center gap-3 justify-end group cursor-default">
                <span className={"text-[10px] font-bold tracking-[0.2em] uppercase transition-all " + (i === active ? "opacity-100" : "opacity-0 group-hover:opacity-60")}
                  style={{ color: f.color }}>{f.name}</span>
                <span className="h-8 w-[2px] rounded-full overflow-hidden bg-white/15 relative">
                  <span className="absolute inset-x-0 bottom-0 transition-all duration-500" style={{ background: f.color, height: i < active ? "100%" : i === active ? `${(prog * flavors.length - active) * 100}%` : "0%" }}></span>
                </span>
              </div>
            ))}
          </div>

          <div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/40 label flex items-center gap-2 scroll-cue">
            <Icon name="mouse" className="w-4 h-4" /> {t("Scroll", "Desliza")}
          </div>
        </div>
      </div>
    </section>
  );
}

function HookahSlider() {
  const t = useT(); const { lang } = useLang();
  const flavors = window.PP.MENU.hookah;
  return (
    <section id="hookah" className="py-24 md:py-32 bg-black relative overflow-hidden">
      <div className="container mb-12">
        <div className="reveal label text-gold mb-5 flex items-center gap-3"><Icon name="wind" className="w-4 h-4" /> {t("The Hookah Lounge", "El Lounge de Hookah")}</div>
        <Heading>{t(<>Smoke, <span className="serif-it font-normal text-coral">Curated</span></>, <>Humo, <span className="serif-it font-normal text-coral">Curado</span></>)}</Heading>
      </div>
      <div className="flex gap-5 overflow-x-auto px-6 pb-6 snap-x snap-mandatory" style={{ scrollbarWidth: "thin" }}>
        {flavors.map((f, i) => (
          <div key={i} className="snap-center shrink-0 w-[78vw] sm:w-[420px] h-[520px] rounded-3xl overflow-hidden relative group">
            <Photo src={window.PP.PHOTO(f.img, 800, 1000)} alt={f.name} className="absolute inset-0 w-full h-full" imgClass="object-cover transition-transform duration-700 group-hover:scale-105" style={{ filter: "brightness(.7)" }} />
            <div className="absolute inset-0" style={{ background: `linear-gradient(to top, #000 5%, transparent 60%), radial-gradient(80% 60% at 70% 30%, ${f.color}33, transparent)` }}></div>
            <div className="absolute inset-x-0 bottom-0 p-7">
              <div className="text-[10px] font-bold tracking-[0.3em] mb-2" style={{ color: f.color }}>{L(f.flavor, lang)}</div>
              <h3 className="text-3xl font-black uppercase mb-2">{f.name}</h3>
              <p className="text-white/65 text-sm mb-4">{L(f.d, lang)}</p>
              <span className="serif text-2xl text-gold-soft">${f.price}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HookahVideo() {
  const t = useT(); const { lang } = useLang();
  const flavors = window.PP.MENU.hookah;
  return (
    <section id="hookah" className="relative min-h-screen flex items-center bg-black overflow-hidden py-28">
      <div className="absolute inset-0">
        <Photo src={window.PP.PHOTO("1470225620780-dba8ba36b745", 1600, 1000)} alt="Hookah lounge" className="absolute inset-0 w-full h-full" imgClass="object-cover floaty-slow" style={{ filter: "brightness(.4)" }} />
        <div className="absolute inset-0 bg-gradient-to-r from-black via-black/60 to-transparent"></div>
      </div>
      <div className="container relative z-10 grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <div className="label text-gold mb-5 flex items-center gap-3"><Icon name="wind" className="w-4 h-4" /> {t("The Hookah Lounge", "El Lounge de Hookah")}</div>
          <h2 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mb-6">{t(<>Clouds of <span className="serif-it font-normal text-coral">Luxury</span></>, <>Nubes de <span className="serif-it font-normal text-coral">Lujo</span></>)}</h2>
          <p className="text-white/70 text-lg max-w-md">{t("Hand-packed premium bowls, ceramic heads, and a curated flavor library — served tableside by our hookah sommeliers.", "Cazoletas premium armadas a mano, cabezas de cerámica y una biblioteca de sabores curada — servida en mesa por nuestros sommeliers de hookah.")}</p>
        </div>
        <div className="space-y-3">
          {flavors.map((f, i) => (
            <div key={i} className="flex items-center gap-4 p-4 rounded-2xl bg-white/[.04] border border-white/10 backdrop-blur-md hover:border-white/25 transition-colors">
              <span className="w-3 h-3 rounded-full shrink-0" style={{ background: f.color, boxShadow: `0 0 14px ${f.color}` }}></span>
              <div className="flex-1">
                <div className="font-bold uppercase tracking-wide">{f.name}</div>
                <div className="text-white/55 text-sm">{L(f.flavor, lang)}</div>
              </div>
              <span className="serif text-2xl text-gold-soft">${f.price}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HookahSection({ variant }) {
  if (variant === "slider") return <HookahSlider />;
  if (variant === "video") return <HookahVideo />;
  return <HookahScroll />;
}

Object.assign(window, { HookahSection });