// Selected work — visual-first grid with cursor-follow preview kept subtle
const { useEffect: useEffectW, useRef: useRefW, useState: useStateW } = React;

function WorkList({ projects, density = "comfortable", onOpen, activeIdx, setActiveIdx }) {
  const [hovered, setHovered] = useStateW(null);

  return (
    <section className="work-v2" data-screen-label="02 Work" id="work">
      <div className="work-v2-head">
        <span className="mono dim">Selected Work — 2020 / 2024</span>
      </div>

      <div className={`work-v2-grid density-${density}`}>
        {projects.map((p, i) => (
          <a
            key={p.id}
            className={`wcard ${activeIdx === i ? "is-playing" : ""}`}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            onClick={(e) => { e.preventDefault(); setActiveIdx && setActiveIdx(i); onOpen && onOpen(p); }}
            data-cursor="view"
            href="#"
          >
            <div className="wcard-img" style={{ position: "relative" }}>
              <StillPlaceholder project={p} aspect="4/3" showMeta={false} />
              {p.youtube && hovered === i && (
                <iframe
                  src={`https://www.youtube.com/embed/${p.youtube}?autoplay=1&mute=1&controls=0&loop=1&playlist=${p.youtube}&rel=0&modestbranding=1&vq=hd1080`}
                  style={{
                    position: "absolute",
                    inset: 0,
                    width: "100%",
                    height: "100%",
                    border: "none",
                    objectFit: "cover",
                  }}
                  allow="autoplay"
                />
              )}
            </div>
            <div className="wcard-meta">
              <span className="mono dim">{p.id} · {p.year}</span>
              <span className="wcard-title">{p.title}</span>
              <span className="mono dim">{p.client}</span>
            </div>
          </a>
        ))}
      </div>

      <div className="work-v2-foot">
        <a className="link-arrow" href="#index" data-cursor="link">
          <span>Full index</span>
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none">
            <path d="M0 5 H17 M13 1 L18 5 L13 9" stroke="currentColor" strokeWidth="0.8" />
          </svg>
        </a>
      </div>
    </section>
  );
}

window.WorkList = WorkList;