/* hero.jsx — full-viewport crossfading slider, two treatments, Ken-Burns, dots */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

function Hero({ layout, motion }) {
  const slides = window.RIAD.hero;
  const riad = window.RIAD.riad;
  const rev = window.RIAD.reviews;
  const [i, setI] = useStateHero(0);
  const timer = useRefHero(null);
  const kb = motion !== false; // ken-burns + autoplay gate

  useEffectHero(() => {
    if (!kb) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    timer.current = setInterval(() => setI((p) => (p + 1) % slides.length), 6000);
    return () => clearInterval(timer.current);
  }, [kb, slides.length]);

  const jump = (n) => {
    setI(n);
    if (timer.current) clearInterval(timer.current);
    if (kb) timer.current = setInterval(() => setI((p) => (p + 1) % slides.length), 6000);
  };

  const meta = [
    ["Rooms", "Six, around the court"],
    ["The table", "Cooked by hand"],
    ["The medina", "Mouassine quarter"],
    ["Rating", rev.score + " · " + rev.count + " stays"]
  ];

  return (
    <section className={"hero" + (kb ? " kb" : "")} data-layout={layout || "centered"} id="top">
      {slides.map((s, idx) => (
        <div key={s.id} className={"hero-slide" + (idx === i ? " active" : "")}>
          <div className="img" style={{ backgroundImage: "url(" + window.PX(s.id, 1920) + ")" }}></div>
        </div>
      ))}
      <div className="hero-scrim"></div>

      <div className="hero-inner">
        <div className="hero-content">
          <div className="hero-lead">
            <p className="eyebrow hero-kicker">Mouassine &middot; Marrakech Medina</p>
            <h1>{riad.tagline}</h1>
            <p className="lede">{riad.blurb}</p>
            <div className="hero-rating">
              <Stars n={5} /> <span>{rev.score} &middot; {rev.count} guest reviews</span>
            </div>
            <div className="hero-ctas">
              <a className="btn-solid" href="#reservation" onClick={(e) => { e.preventDefault(); window.scrollToId("reservation"); }}>Check availability</a>
              <a className="btn-ghost" href="#rooms" onClick={(e) => { e.preventDefault(); window.scrollToId("rooms"); }}>View the rooms</a>
            </div>
          </div>

          {layout === "editorial" ? (
            <div className="hero-meta">
              {meta.map((m, k) => (
                <div className="mrow" key={k}><span>{m[0]}</span><span>{m[1]}</span></div>
              ))}
            </div>
          ) : null}
        </div>
      </div>

      <div className="hero-dots">
        {slides.map((s, idx) => (
          <button key={s.id} className={idx === i ? "on" : ""} aria-label={"Slide " + (idx + 1)} onClick={() => jump(idx)}></button>
        ))}
      </div>
      <div className="hero-scroll"><span className="bar"></span> Scroll</div>
    </section>
  );
}

window.Hero = Hero;