// HERO — 5-cirkel collage met gesynchroniseerde rotatie.
// Eén klok (4s tick). Alle cirkels wisselen tegelijk met een rustige 1,5s crossfade.
// Het Buiten Buddies-logo bezet elke tick een andere cirkel — zo komt het door alle 5.

const HERO_POOL = [
  { src: "assets/photos/klimnet-meiden.jpg",          alt: "Twee meiden in een touwparcours in het park",       focus: "center 35%" },
  { src: "assets/photos/voetballende-kinderen.jpg",   alt: "Vier kinderen voetballen samen in het park",        focus: "center 55%" },
  { src: "assets/photos/bal-tegen-muurtje.jpg",       alt: "Drie jongens spelen met een bal in de buurt",       focus: "center"     },
  { src: "assets/photos/urban-sports-park.jpg",       alt: "Kinderen klimmen op een buitenspeeltoestel",        focus: "center 45%" },
  { src: "assets/photos/softbal-haarlem-kids-2.jpg",  alt: "Buurtgroep komt samen in het park",                  focus: "center 30%" },
  { src: "assets/photos/bal-overgooiend-nova.jpg",    alt: "Meisje gooit een bal over in het gras",              focus: "center 40%" },
  { src: "assets/photos/voetballend.jpg",             alt: "Jongere voetbalt in het park",                       focus: "center"     },
  { src: "assets/photos/steppende-kinderen.jpg",      alt: "Kinderen op steppen in de buurt",                    focus: "center 40%" },
  { src: "assets/photos/stunt-steppend.png",          alt: "Stunt op een step bij de skatebaan",                 focus: "center"     },
  { src: "assets/photos/softbal-haarlem.jpg",         alt: "Softbalteam in een Haarlems park",                   focus: "center"     },
];

const TICK_MS       = 5000; // synchroon ritme — alle cirkels wisselen tegelijk
const CROSSFADE_MS  = 1500; // rustige fade

// Slot definities — 5 cirkels in 5 maten met flinke overlap. s5 is de middelste hub.
const SLOT_DEFS = [
  { id: 0, sizeCls: "s1" }, // grootste — top-left, logo-thuisbasis
  { id: 1, sizeCls: "s2" }, // top-right
  { id: 2, sizeCls: "s3" }, // bottom-right
  { id: 3, sizeCls: "s4" }, // bottom-left
  { id: 4, sizeCls: "s5" }, // MIDDLE HUB — tweede grootste, ligt over de rest heen
];

// Lichte permutatie van de pool per tweak-keuze
const POOL_SEEDS = { default: 0, active: 3, social: 6 };

function reduceMotionNow() {
  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
    || document.documentElement.classList.contains("bb-rm-force");
}

/* ---------------- One slot — crossfades whenever its content changes ---------------- */
function HeroSlot({ def, isLogoHere, photo, version }) {
  const currentKey = isLogoHere
    ? "LOGO-" + version
    : "p-" + photo.src + "-" + version;

  const [layers, setLayers] = useState(() => [{
    seq: 0, key: currentKey, photo, isLogo: isLogoHere,
  }]);
  const seqRef = useRef(0);

  // When content changes, push a new layer on top
  useEffect(() => {
    const last = layers[layers.length - 1];
    if (last && last.key === currentKey) return;
    seqRef.current += 1;
    setLayers((prev) => [
      ...prev,
      { seq: seqRef.current, key: currentKey, photo, isLogo: isLogoHere },
    ]);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentKey]);

  // Sweep older layers once the fade completes
  useEffect(() => {
    if (layers.length <= 1) return;
    const t = setTimeout(() => {
      setLayers((prev) => prev.slice(-1));
    }, CROSSFADE_MS + 100);
    return () => clearTimeout(t);
  }, [layers]);

  return (
    <figure
      className={
        "bb-hero__photo bb-hero__photo--" + def.sizeCls +
        (isLogoHere ? " bb-hero__photo--has-logo" : "")
      }
    >
      {layers.map((layer, i) => {
        const isCurrent = i === layers.length - 1;
        return (
          <div
            key={layer.seq}
            className={"bb-slot-layer " + (isCurrent ? "bb-slot-layer--in" : "bb-slot-layer--out")}
          >
            {layer.isLogo ? (
              <div className="bb-hero__logo-tile">
                <img
                  src="assets/logo/logo.png"
                  alt={isCurrent ? "Buiten Buddies. Log uit, beleef echt." : ""}
                  aria-hidden={!isCurrent}
                  loading="eager"
                />
              </div>
            ) : (
              <img
                src={layer.photo.src}
                alt={isCurrent ? layer.photo.alt : ""}
                aria-hidden={!isCurrent}
                loading={def.id === 0 ? "eager" : "lazy"}
                style={layer.photo.focus ? { objectPosition: layer.photo.focus } : null}
              />
            )}
          </div>
        );
      })}
    </figure>
  );
}

/* ---------------- Title — 1 s wait, then word-by-word write-on ---------------- */
function HeroTitle() {
  return (
    <h1 id="hero-title" className="bb-hero__title">
      <span className="bb-hero__title-line bb-hero__title-line--1">
        <span className="bb-word" style={{ animationDelay: "1000ms" }}>Log uit,</span>
      </span>
      <span className="bb-hero__title-line bb-hero__title-line--2">
        <span className="bb-word" style={{ animationDelay: "1500ms" }}>beleef </span>
        <span className="bb-word bb-word--accent" style={{ animationDelay: "2050ms" }}>echt.</span>
      </span>
    </h1>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ go, photoSet = "default", variant = "collage" }) {
  if (variant === "minimal") return <HeroMinimal go={go} />;

  const seed = POOL_SEEDS[photoSet] ?? 0;
  const [tick, setTick] = useState(0);

  useEffect(() => {
    if (reduceMotionNow()) return;
    const id = setInterval(() => setTick((t) => t + 1), TICK_MS);
    return () => clearInterval(id);
  }, []);

  const eff = tick + seed;
  const logoSlot = eff % SLOT_DEFS.length;

  return (
    <section className="bb-hero" aria-labelledby="hero-title" data-screen-label="Hero">
      <Container>
        <div className="bb-hero__inner">
          <div className="bb-hero__grid">
            <div>
              <HeroTitle />

              <FadeUp delay={1200}>
                <p className="bb-hero__lead">
                  Buiten Buddies helpt jongeren in Haarlem van 10 tot 16 jaar om makkelijker
                  buiten af te spreken in hun eigen buurt. Gratis, veilig en laagdrempelig.
                </p>
              </FadeUp>

              <FadeUp delay={1500}>
                <div className="bb-hero__cta-row">
                  <Button variant="primary" onClick={() => go("meedoen")}>
                    Meld je aan <Icon name="arrowRight" />
                  </Button>
                  <Button variant="secondary" onClick={() => go("hoe-werkt-het")}>
                    Hoe werkt het?
                  </Button>
                </div>
              </FadeUp>

              <FadeUp delay={1700}>
                <div className="bb-hero__trust">
                  <span><strong>10</strong> actieve buurten</span>
                  <span className="sep" aria-hidden="true"></span>
                  <span><strong>100+</strong> aangemelde jongeren</span>
                  <span className="sep" aria-hidden="true"></span>
                  <span><strong>10</strong> maanden actief</span>
                </div>
              </FadeUp>
            </div>

            <FadeUp delay={400}>
              <div
                className="bb-hero__collage"
                role="img"
                aria-label="Foto-collage van jongeren die samen buitenspelen in Haarlem, met het Buiten Buddies-logo"
              >
                {SLOT_DEFS.map((def, i) => {
                  const photoIdx = (i * 2 + eff) % HERO_POOL.length;
                  return (
                    <HeroSlot
                      key={def.id}
                      def={def}
                      isLogoHere={logoSlot === i}
                      photo={HERO_POOL[photoIdx]}
                      version={tick}
                    />
                  );
                })}
              </div>
            </FadeUp>
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---------------- Minimal hero variant ---------------- */
function HeroMinimal({ go }) {
  return (
    <section className="bb-hero bb-hero--minimal" aria-labelledby="hero-title" data-screen-label="Hero · minimal">
      <Container>
        <div className="bb-hero-min">
          <HeroTitle />

          <FadeUp delay={1200}>
            <p className="bb-hero__lead bb-hero-min__lead">
              Buiten Buddies helpt jongeren in Haarlem van 10 tot 16 jaar om makkelijker
              buiten af te spreken in hun eigen buurt. Gratis, veilig en laagdrempelig.
            </p>
          </FadeUp>

          <FadeUp delay={1500}>
            <div className="bb-hero__cta-row bb-hero-min__ctas">
              <Button variant="primary" onClick={() => go("meedoen")}>
                Meld je aan <Icon name="arrowRight" />
              </Button>
              <Button variant="secondary" onClick={() => go("hoe-werkt-het")}>
                Hoe werkt het?
              </Button>
            </div>
          </FadeUp>

          <FadeUp delay={1700}>
            <div className="bb-hero-min__banner">
              <img
                src="assets/photos/voetballende-kinderen.jpg"
                alt="Vier kinderen voetballen samen in het park"
                loading="eager"
              />
              <figure className="bb-hero-min__overlay">
                <img src="assets/photos/klimnet-meiden.jpg" alt="Twee meiden in een touwparcours" style={{ objectPosition: "center 35%" }} />
              </figure>
            </div>
          </FadeUp>

          <FadeUp delay={1900}>
            <div className="bb-hero__trust" style={{ justifyContent: "center", marginTop: 24 }}>
              <span><strong>10</strong> actieve buurten</span>
              <span className="sep" aria-hidden="true"></span>
              <span><strong>100+</strong> aangemelde jongeren</span>
              <span className="sep" aria-hidden="true"></span>
              <span><strong>10</strong> maanden actief</span>
            </div>
          </FadeUp>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, HeroMinimal, HeroTitle, HeroSlot, HERO_POOL });