/* videos.jsx — YouTube video carousel with lightbox modal */

const VIDEOS = [
  {
    id: "XuiSB-NvadU",
    title: "Lahmee — modern matrimony, your way.",
    label: "01 · Brand film",
    duration: "1:24",
  },
  {
    id: "qOYG6tumbEs",
    title: "Privacy you can actually feel.",
    label: "02 · How it works",
    duration: "0:58",
  },
  {
    id: "1YuZN2Q-ieI",
    title: "Couples who found each other on Lahmee.",
    label: "03 · Stories",
    duration: "1:12",
  },
];

const ytThumb = (id) => `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;

function VideoCarousel() {
  const [active, setActive] = React.useState(0);
  const [open, setOpen] = React.useState(false);

  const v = VIDEOS[active];

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const prev = () => setActive((i) => (i - 1 + VIDEOS.length) % VIDEOS.length);
  const next = () => setActive((i) => (i + 1) % VIDEOS.length);

  return (
    <section id="watch" className="section">
      <div className="container">
        <SectionHead
          eyebrow="Watch"
          title={<>Three short films,<br/><span style={{ fontStyle: "italic", color: "var(--primary)" }}>and you'll get it.</span></>}
          lead="A brand film, a privacy walkthrough, and a few couples telling their own story. Tap any one to play."
        />

        {/* Featured player */}
        <div className="vc-stage reveal is-in">
          <button className="vc-nav vc-nav--prev" onClick={prev} aria-label="Previous video">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 6 9 12 15 18"/></svg>
          </button>

          <button className="vc-feature" onClick={() => setOpen(true)} aria-label={`Play: ${v.title}`}>
            <img className="vc-feature__img" src={ytThumb(v.id)} alt={v.title} key={v.id} />
            <div className="vc-feature__veil"></div>
            <div className="vc-feature__play">
              <span className="vc-play-ring">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7L8 5z"/></svg>
              </span>
            </div>
            <div className="vc-feature__meta">
              <div className="vc-feature__label">{v.label}</div>
              <h3 className="vc-feature__title">{v.title}</h3>
              <div className="vc-feature__row">
                <span>YouTube</span>
                <span className="dot">·</span>
                <span>{v.duration}</span>
                <span className="dot">·</span>
                <span>Tap to play</span>
              </div>
            </div>
          </button>

          <button className="vc-nav vc-nav--next" onClick={next} aria-label="Next video">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 6 15 12 9 18"/></svg>
          </button>
        </div>

        {/* Thumbnail strip */}
        <div className="vc-strip">
          {VIDEOS.map((vid, i) => (
            <button
              key={vid.id}
              className={"vc-thumb" + (i === active ? " is-active" : "")}
              onClick={() => setActive(i)}
              aria-label={vid.title}
            >
              <img src={ytThumb(vid.id)} alt="" />
              <div className="vc-thumb__veil"></div>
              <div className="vc-thumb__meta">
                <div className="vc-thumb__label">{vid.label}</div>
                <div className="vc-thumb__title">{vid.title}</div>
              </div>
              <span className="vc-thumb__play">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7L8 5z"/></svg>
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* Lightbox */}
      {open && (
        <div className="vc-lightbox" onClick={() => setOpen(false)} role="dialog" aria-modal="true">
          <button className="vc-close" onClick={() => setOpen(false)} aria-label="Close">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
          </button>
          <div className="vc-lightbox__frame" onClick={(e) => e.stopPropagation()}>
            <iframe
              src={`https://www.youtube.com/embed/${v.id}?autoplay=1&rel=0&modestbranding=1`}
              title={v.title}
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
        </div>
      )}
    </section>
  );
}

Object.assign(window, { VideoCarousel });