/* ============================================================
   ABBAS — 5 alternate hero variants
   ============================================================
   Variants: video · aghomi · luxsplit · typo · mosaic
   All use Ph() + window.RB_IMGS; no external deps.
   ============================================================ */

/* ─── helpers ─────────────────────────────────────────────── */
const img = (label) => (window.RB_IMGS || {})[label] || "";


/* ══════════════════════════════════════════════════════════
   1. CINEMATIC HERO
   Full-bleed image with slow Ken Burns zoom, dark vignette,
   staggered text reveal.
   ══════════════════════════════════════════════════════════ */
const HERO_STILL_LABELS = [
  "SHOWPIECE · SCULPTURAL ARMOUR",
  "EVENING GOWN · GALA",
  "BRIDAL · WHITE CORSET GOWN",
  "SHOWPIECE · ARCHITECTURAL",
];

function HeroVideo({ onNav }) {
  const [vi, setVi] = useState(0);
  const poster = img(HERO_STILL_LABELS[0]);

  useEffect(() => {
    const t = setInterval(() => setVi((i) => (i + 1) % HERO_STILL_LABELS.length), 6000);
    return () => clearInterval(t);
  }, []);

  const curSrc = img(HERO_STILL_LABELS[vi]);

  return (
    <section className="hero hv-root" aria-label="Hero: Cinematic">
      {/* Poster fallback */}
      <div className="hv-bg loaded"
        style={{ backgroundImage: poster ? `url(${poster})` : "none" }} />
      {/* Cross-fading stills, or a graceful placeholder if none are set */}
      {curSrc ? (
        <img
          key={vi}
          className="hv-video"
          src={curSrc}
          alt=""
          aria-hidden="true"
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center top",
            opacity: 1, transition: "opacity 600ms ease",
          }}
        />
      ) : (
        <Ph label={HERO_STILL_LABELS[vi]} ratio="cinema" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} />
      )}
      <div className="hv-vignette" aria-hidden="true" />

      {/* Thin rule */}
      <div className="hv-rule" aria-hidden="true" />

      {/* Content */}
      <div className="hv-content wrap">
        <p className="hv-eyebrow mono">#TheKingOfCorset · Lagos, Nigeria</p>
        <h1 className="display hv-h">
          <span className="hv-word">Sculpted</span>{" "}
          <span className="hv-word">to</span>{" "}
          <em className="hv-word hv-gold">Hold</em>{" "}
          <span className="hv-word">a</span>{" "}
          <em className="hv-word hv-gold">Room.</em>
        </h1>
        <p className="hv-sub lede">
          Corseted evening gowns, avant-garde showpieces and bridal-white gowns —<br />
          sculpted by hand in the ABBAS atelier.
        </p>
        <div className="hv-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Atelier</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark"
            onClick={() => onNav("custom", {})}>Enquire Bespoke</Btn>
        </div>
      </div>

      {/* Scroll cue */}
      <div className="hv-scroll" aria-hidden="true">
        <span className="mono hv-scroll-label">Scroll</span>
        <span className="hv-scroll-line" />
      </div>

      {/* Corner label */}
      <div className="hv-corner mono" aria-hidden="true">
        ABBAS
      </div>
    </section>
  );
}


/* ══════════════════════════════════════════════════════════
   2. MINIMAL SLIDER
   Full-bleed, sparse UI, thin progress lines, side counter.
   ══════════════════════════════════════════════════════════ */
function HeroAghomi({ onNav }) {
  const DURATION = 5400;
  const SLIDES = [
    {
      label: "EVENING GOWN · CORSETED BODICE",
      eyebrow: "Corseted Evening Gowns",
      h1: "Sculpted",
      h2: "With Purpose.",
      cta: "Shop Evening Gowns",
      fn: () => onNav("shop", { cat: "Evening Gown" }),
    },
    {
      label: "BRIDAL · WHITE CORSET GOWN",
      eyebrow: "The Bridal Atelier",
      h1: "Dressed for",
      h2: "The Grand Moment.",
      cta: "Explore Bridal",
      fn: () => onNav("shop", { cat: "Bridal" }),
    },
    {
      label: "SHOWPIECE · SCULPTURAL ARMOUR",
      eyebrow: "Avant-Garde Showpieces",
      h1: "Wearable,",
      h2: "Sculpture.",
      cta: "Shop Showpieces",
      fn: () => onNav("shop", { cat: "Showpiece" }),
    },
    {
      label: "SHOWPIECE · SCULPTED ORGANZA",
      eyebrow: "Custom & Bespoke",
      h1: "Commissioned,",
      h2: "Entirely for You.",
      cta: "Start a Custom Enquiry",
      fn: () => onNav("custom", {}),
    },
  ];

  const [cur, setCur] = useState(0);
  const [rev, setRev] = useState(0);           /* key to re-trigger animations */
  const pausedRef = useRef(false);
  const rootRef   = useRef(null);

  useEffect(() => {
    const t = setInterval(() => {
      if (!pausedRef.current) advance(1);
    }, DURATION);
    return () => clearInterval(t);
  }, [cur]);

  /* touch swipe */
  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    let sx = 0;
    const ts = (e) => { sx = e.touches[0].clientX; };
    const te = (e) => {
      const dx = e.changedTouches[0].clientX - sx;
      if (Math.abs(dx) > 50) advance(dx < 0 ? 1 : -1);
    };
    el.addEventListener("touchstart", ts, { passive: true });
    el.addEventListener("touchend",   te, { passive: true });
    return () => { el.removeEventListener("touchstart", ts); el.removeEventListener("touchend", te); };
  }, [cur]);

  const advance = (dir) => {
    setCur(c => (c + dir + SLIDES.length) % SLIDES.length);
    setRev(r => r + 1);
  };

  const s = SLIDES[cur];

  return (
    <section
      ref={rootRef}
      className="hero ha-root"
      onMouseEnter={() => { pausedRef.current = true; }}
      onMouseLeave={() => { pausedRef.current = false; }}
      aria-label="Minimal hero slider"
    >
      {/* Stacked background images */}
      {SLIDES.map((sl, i) => (
        <div
          key={i}
          className={"ha-bg" + (i === cur ? " active" : "")}
          style={{ backgroundImage: img(sl.label) ? `url(${img(sl.label)})` : "none" }}
        />
      ))}
      <div className="ha-overlay" aria-hidden="true" />

      {/* Content — re-keyed for entrance on each slide */}
      <div className="ha-content" key={rev}>
        <p className="ha-eyebrow mono">{s.eyebrow}</p>
        <h1 className="display ha-h">
          <span className="ha-h-line">{s.h1}</span>
          <em className="ha-h-line ha-h-em">{s.h2}</em>
        </h1>
        <button className="ha-cta-link mono" onClick={s.fn}>
          {s.cta}
          <svg width="22" height="10" viewBox="0 0 22 10" fill="none" aria-hidden="true">
            <path d="M1 5h20M16 1l5 4-5 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>

      {/* Side counter */}
      <div className="ha-counter" aria-hidden="true">
        <span className="mono">{String(cur + 1).padStart(2, "0")}</span>
        <span className="ha-count-bar" />
        <span className="mono ha-count-total">{String(SLIDES.length).padStart(2, "0")}</span>
      </div>

      {/* Thin progress lines */}
      <div className="ha-lines" role="tablist">
        {SLIDES.map((_, i) => (
          <button
            key={i}
            role="tab"
            aria-selected={i === cur}
            aria-label={"Slide " + (i + 1)}
            className="ha-line-btn"
            onClick={() => { setCur(i); setRev(r => r + 1); }}
          >
            <span className="ha-line-track">
              {i === cur && (
                <span
                  key={rev}
                  className="ha-line-fill"
                  style={{ "--ha-dur": DURATION + "ms" }}
                />
              )}
            </span>
          </button>
        ))}
      </div>
    </section>
  );
}


/* ══════════════════════════════════════════════════════════
   3. LUXURY SPLIT HERO
   Deep panel with accent vertical divider; tall right-side
   portrait + two small thumbnail strips.
   ══════════════════════════════════════════════════════════ */
function HeroLuxSplit({ headline, sub, onNav }) {
  return (
    <section className="hero hls-root">
      {/* Left: text panel */}
      <div className="hls-panel">
        <div className="hls-panel-inner">
          <p className="hls-eyebrow mono">#TheKingOfCorset</p>
          <h1 className="display hls-h">{headline}</h1>
          <div className="hls-rule" aria-hidden="true" />
          <p className="lede hls-sub">{sub}</p>
          <div className="hls-cta">
            <Btn onClick={() => onNav("shop", {})}>Shop the Atelier</Btn>
            <Btn variant="ghost" arrow={false} className="on-dark"
              onClick={() => onNav("custom", {})}>Enquire Bespoke</Btn>
          </div>
        </div>
        {/* Accent vertical divider */}
        <div className="hls-vline" aria-hidden="true" />
      </div>

      {/* Right: large image + thumbnail strip */}
      <div className="hls-media">
        <div className="hls-main-img zoomable">
          <Ph label="EVENING GOWN · CORSETED BODICE" ratio="tall" />
        </div>
        <div className="hls-thumbs">
          <div className="hls-thumb zoomable"><Ph label="BRIDAL · WHITE CORSET GOWN" ratio="portrait" /></div>
          <div className="hls-thumb zoomable"><Ph label="SHOWPIECE · SCULPTURAL ARMOUR" ratio="portrait" /></div>
        </div>
      </div>
    </section>
  );
}


/* ══════════════════════════════════════════════════════════
   4. MINIMAL TYPOGRAPHIC HERO
   Oversized headline dominates; background image bleeds in
   softly from the right.
   ══════════════════════════════════════════════════════════ */
function HeroTypo({ headline, sub, onNav }) {
  const words = (headline || "Sculpted to hold a room.").split(" ");
  return (
    <section className="hero ht-root">
      {/* Soft background image — right side only */}
      <div className="ht-bg-wrap" aria-hidden="true">
        <Ph label="SHOWPIECE · SCULPTURAL ARMOUR" ratio="portrait" />
      </div>
      <div className="ht-bg-fade" aria-hidden="true" />

      <div className="wrap ht-content">
        {/* Badge */}
        <div className="ht-badge">
          <span className="mono">#THEKINGOFCORSET</span>
          <span className="ht-badge-line" />
          <span className="mono">LAGOS, NIGERIA</span>
        </div>

        {/* Giant headline */}
        <h1 className="display ht-h" aria-label={headline}>
          {words.map((w, i) => (
            <span key={i} className="ht-word" style={{ animationDelay: `${i * 0.08}s` }}>
              {i % 4 === 3 ? <em>{w}</em> : w}
            </span>
          ))}
        </h1>

        {/* Bottom strip */}
        <div className="ht-footer">
          <p className="ht-sub">{sub}</p>
          <div className="ht-foot-cta">
            <Btn onClick={() => onNav("shop", {})}>Shop Now</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("custom", {})}>Enquire Bespoke</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}


/* ══════════════════════════════════════════════════════════
   5. MOSAIC / PARALLAX HERO
   Four floating image cards with mouse-driven parallax depth.
   Central editorial text on top.
   ══════════════════════════════════════════════════════════ */
function HeroMosaic({ onNav }) {
  const rootRef = useRef(null);
  const rafRef  = useRef(null);
  const posRef  = useRef({ x: 0, y: 0 });
  const curRef  = useRef({ x: 0, y: 0 });

  /* Smooth parallax via lerp */
  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;

    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      posRef.current = {
        x: ((e.clientX - r.left) / r.width  - 0.5) * 2,
        y: ((e.clientY - r.top)  / r.height - 0.5) * 2,
      };
    };
    const onLeave = () => { posRef.current = { x: 0, y: 0 }; };

    const loop = () => {
      curRef.current.x += (posRef.current.x - curRef.current.x) * 0.06;
      curRef.current.y += (posRef.current.y - curRef.current.y) * 0.06;
      const { x, y } = curRef.current;
      el.querySelectorAll("[data-depth]").forEach((c) => {
        const d = parseFloat(c.dataset.depth);
        c.style.transform = `translate(${x * d * 22}px, ${y * d * 14}px)`;
      });
      rafRef.current = requestAnimationFrame(loop);
    };

    rafRef.current = requestAnimationFrame(loop);
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      cancelAnimationFrame(rafRef.current);
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  const MOSAIC_LABELS = [
    "EVENING GOWN · CORSETED BODICE",
    "BRIDAL · WHITE CORSET GOWN",
    "SHOWPIECE · SCULPTED ORGANZA",
    "SHOWPIECE · ARCHITECTURAL",
  ];

  return (
    <section className="hero hm-root" ref={rootRef} aria-label="Mosaic hero">
      {/* Floating image cards */}
      <div className="hm-card hm-c1" data-depth="0.7"><Ph label={MOSAIC_LABELS[0]} style={{ width: "100%", height: "100%" }} /></div>
      <div className="hm-card hm-c2" data-depth="1.4"><Ph label={MOSAIC_LABELS[1]} style={{ width: "100%", height: "100%" }} /></div>
      <div className="hm-card hm-c3" data-depth="0.5"><Ph label={MOSAIC_LABELS[2]} style={{ width: "100%", height: "100%" }} /></div>
      <div className="hm-card hm-c4" data-depth="1.1"><Ph label={MOSAIC_LABELS[3]} style={{ width: "100%", height: "100%" }} /></div>

      {/* Dark scrim behind text */}
      <div className="hm-scrim" aria-hidden="true" />

      {/* Central content */}
      <div className="hm-content">
        <p className="mono hm-eyebrow">#TheKingOfCorset</p>
        <h1 className="display hm-h">
          Sculpted<br /><em>to Hold.</em>
        </h1>
        <p className="hm-sub lede">Lagos. Sculpted. Yours.</p>
        <div className="hm-cta">
          <Btn onClick={() => onNav("shop", {})}>Explore Now</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark"
            onClick={() => onNav("custom", {})}>Enquire Bespoke</Btn>
        </div>
      </div>

      {/* Decorative corner text */}
      <div className="hm-corner-tl mono" aria-hidden="true">ABBAS</div>
      <div className="hm-corner-br mono" aria-hidden="true">Lagos Atelier</div>
    </section>
  );
}


/* ─── export to global scope ─────────────────────────────── */
Object.assign(window, { HeroVideo, HeroAghomi, HeroLuxSplit, HeroTypo, HeroMosaic });