/* ============================================================
   STITCHES BY AIMEE — Collage Hero (4 panels)
   No real photography/video uploaded yet — each panel renders
   an on-brand placeholder block via Ph(). Swap in real stills/
   video once supplied (see images.js).
   ============================================================ */

const COLLAGE_LABELS = ["READY TO WEAR", "BESPOKE TAILORING", "FOR STANDOUT WOMEN", "MADE IN PORT HARCOURT"];
const COLLAGE_VIDS = (window.RB_VIDEOS || []);
const COLLAGE_POSTERS = COLLAGE_LABELS.map((l) => (window.RB_IMGS || {})[l] || "");

const SLIDES = [
{
  eyebrow: "Stitches by Aimee · Port Harcourt",
  h: ["For standout", "women."],
  cta: "Shop Ready to Wear",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "Bespoke Tailoring",
  h: ["Made for", "you alone."],
  cta: "Start a Custom Order",
  ctaFn: (nav) => nav("custom", {})
},
{
  eyebrow: "Nationwide Delivery",
  h: ["Show up.", "Stand out."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("shop", {})
}];

/* ── Single panel — looping brand video over a brand-photo poster ── */
function CollagePanel({ label, poster, video, delay }) {
  const ref = useRef(null);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.play && v.play().catch(() => {});
  }, []);
  return (
    <div className="hcol-strip">
      <div className="hcol-media hcol-poster" style={{ position: "absolute", inset: 0, backgroundImage: poster ? "url(" + poster + ")" : "none", backgroundSize: "cover", backgroundPosition: "center" }} aria-hidden="true" />
      {video && (
        <video
          ref={ref}
          className="hcol-media"
          src={video}
          poster={poster || undefined}
          autoPlay muted loop playsInline preload="metadata"
          style={{ objectFit: "cover", animationDelay: delay + "ms" }}
        />
      )}
    </div>);

}

function HeroCollage({ onNav }) {
  const INTERVAL = 6000;
  const [idx, setIdx] = useState(0);
  const [textIn, setTextIn] = useState(true);

  useEffect(() => {
    const t = setInterval(() => {
      setTextIn(false);
      setTimeout(() => {
        setIdx((i) => (i + 1) % SLIDES.length);
        setTextIn(true);
      }, 450);
    }, INTERVAL);
    return () => clearInterval(t);
  }, []);

  const slide = SLIDES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        {COLLAGE_LABELS.map((label, i) => <CollagePanel key={label} label={label} poster={COLLAGE_POSTERS[i]} video={COLLAGE_VIDS[i % (COLLAGE_VIDS.length || 1)]} delay={i * 200} />)}
      </div>

      <div className="hcol-overlay" aria-hidden="true" />
      <div className="hcol-top-rule" aria-hidden="true" />
      <div className="hcol-dividers" aria-hidden="true"><span /><span /><span /></div>

      <div
        className={"hcol-content" + (textIn ? " hcol-content-in" : " hcol-content-out")}
        key={idx}>
        <p className="hcol-eyebrow mono">{slide.eyebrow}</p>
        <h1 className="display hcol-h">
          <span className="hcol-hline">{slide.h[0]}</span>
          <span className="hcol-hline hcol-hem">{slide.h[1]}</span>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark"
          onClick={() => onNav("custom", {})}>
            Start a Custom Order
          </Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Stitches by Aimee") + " · " + ((window.BRAND && window.BRAND.regionLine) || "Port Harcourt")}
      </div>

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

}

Object.assign(window, { HeroCollage });