/* ============================================================
   KONDO — Collage Hero  (3-panel vertical video collage)
   ============================================================
   Three equal full-height vertical panels. Panel 1 plays the
   real Kondo product video (kc_vid 2); panels 2-3 use real Kondo
   product photography with a slow Ken Burns zoom (repeated where
   the catalogue doesn't have enough distinct stills).
   ============================================================ */

const PANELS = [
  { img: "uploads/kc_pic 10.jpg", video: "uploads/kc_vid 2.mp4" },
  { img: "uploads/kc_pic 9.jpg", video: "uploads/kc_vid 2 (1).mp4" },
  { img: "uploads/kc_pic 12.jpg", video: "" },
];

const SLIDES = [
  { eyebrow: "Kondo · Menswear", h: ["Everyday", "Essentials."], cta: "Shop the Collection", ctaFn: (nav) => nav("shop", {}) },
  { eyebrow: "New In", h: ["Dressed", "Your Way."], cta: "Shop New Arrivals", ctaFn: (nav) => nav("shop", {}) },
  { eyebrow: "Kondo Clothing", h: ["Style,", "Simplified."], cta: "Shop All", ctaFn: (nav) => nav("shop", {}) },
];

function CollagePanel({ i, panel }) {
  return (
    <div className="hcol-strip" style={{ animationDelay: (i * 120) + "ms" }}>
      {panel.video ? (
        <video className="hcol-slice-img" src={panel.video} poster={panel.img} autoPlay muted loop playsInline />
      ) : (
        <img className="hcol-slice-img" src={panel.img} alt="" style={{ animationDelay: (i * 1.8) + "s" }} />
      )}
    </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 hcol-strips-3" aria-hidden="true">
        {PANELS.map((panel, i) => (
          <CollagePanel key={i} i={i} panel={panel} />
        ))}
      </div>

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

      <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) || "Kondo"}
      </div>

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

    </section>);

}

Object.assign(window, { HeroCollage });