/* ============================================================
   DIOTBRAND — Hero Collage (4 real photo panels, Ken Burns)
   ============================================================ */

const POSTERS = [
  (window.RB_IMGS && window.RB_IMGS["HERO · BRIDAL STAIRCASE"]) || "",
  (window.RB_IMGS && window.RB_IMGS["HERO · BRIDAL LACE SLEEVES"]) || "",
  (window.RB_IMGS && window.RB_IMGS["HERO · EVENINGWEAR ROOFTOP"]) || "",
  (window.RB_IMGS && window.RB_IMGS["HERO · BRIDAL VANITY"]) || "",
];
const LABELS = ["BRIDAL · STAIRCASE", "BRIDAL · LACE SLEEVES", "EVENINGWEAR · ROOFTOP", "BRIDAL · VANITY"];
const VIDEOS = [
  "uploads/db_vid 1-d406ea18.mp4",
  "uploads/db_vid 2-6f640a49.mp4",
  "uploads/db_vid 3-129cbf6a.mp4",
  "uploads/db_vid 4-a1b39f90.mp4",
];

const SLIDES = [
  {
    eyebrow: "Diotbrand · Lagos Studio",
    h: ["Bridal &", "Eveningwear."],
    cta: "Enquire",
    ctaFn: (nav) => nav("contact", {}),
  },
  {
    eyebrow: "Made to Measure",
    h: ["Built on the", "Bodice."],
    cta: "See Corsetry",
    ctaFn: (nav) => nav("shop", { cat: "Corsetry" }),
  },
  {
    eyebrow: "Custom Commissions",
    h: ["Your gown,", "your vision."],
    cta: "Start a Custom Order",
    ctaFn: (nav) => nav("custom", {}),
  },
];

function ImageStrip({ src, videoSrc, label, delay }) {
  const [failed, setFailed] = useState(false);
  const show = src && !failed;
  return (
    <div className="hcol-strip">
      {show && (
        <img
          className="hcol-media hcol-poster hcol-kenburns"
          src={src}
          alt={label || ""}
          onError={() => setFailed(true)}
          style={{ animationDelay: delay + "ms" }}
        />
      )}
      {videoSrc && (
        <video
          className="hcol-media hcol-video"
          src={videoSrc}
          autoPlay
          muted
          loop
          playsInline
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
        />
      )}
      {!show && !videoSrc && <span className="ph-label" style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>{label}</span>}
    </div>
  );
}

function HeroCollage({ onNav, headline, sub }) {
  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 base = SLIDES[idx];
  const slide = idx === 0 && headline ? { ...base, h: headline.split(",").map((s) => s.trim()).slice(0, 2), sub } : base;

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        {POSTERS.map((src, i) => (
          <ImageStrip key={i} src={src} videoSrc={VIDEOS[i]} label={LABELS[i]} 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>
          <em className="hcol-hline hcol-hem">{slide.h[1]}</em>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Diotbrand") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "Made in Lagos")}
      </div>
      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>
  );
}

Object.assign(window, { HeroCollage });