/* Work.jsx — "Projects": all of Neel's InFocus videos, filterable.
   Real YouTube thumbnails (grayscale → color on hover), real embeds. */
const { useState: useWorkState } = React;

const NEEL_VIDEOS = [
  { id: "9w3XC3_iG14", cat: "Other",      title: "InFocus 2025–2026 Recap", date: "MAY 2026" },
  { id: "6Qi2wEQVKno", cat: "Other",      title: "InFocus 2025\u201326 Semester Recap", date: "DEC 2025" },
  { id: "87CF411PLfo", cat: "Feature",    title: "Palo Alto Airport Day", date: "OCT 2025", featured: true, blurb: "Palo Alto Airport Day connects the community with aviation, a feature on the people and planes that drew the crowds." },
  { id: "Jb9dqVkwqLc", cat: "Other",      title: "Spirit Week 2025 Recap", date: "OCT 2025" },
  { id: "BPaK8HRV1jQ", cat: "Other",      title: "Spirit Week 2025 \u2014 Day 4", date: "OCT 2025" },
  { id: "pvuWaPQgRjE", cat: "Other",      title: "Spirit Week 2025 \u2014 Day 2", date: "OCT 2025" },
  { id: "fn0o3p3FoFQ", cat: "Commentary", title: "How did Apple do with the iPhone 17 launch?", date: "SEP 2025" },
  { id: "A_OoOQaY_9E", cat: "Other",      title: "Camp MAC 2025 Recap", date: "AUG 2025" },
  { id: "sbk7kAz7QKY", cat: "Other",      title: "Camp MAC 2025 \u2014 Day 4", date: "AUG 2025" },
  { id: "t70dsgT53Do", cat: "Other",      title: "Camp MAC 2025 \u2014 Day 3", date: "AUG 2025" },
  { id: "hMLVVqJPVqo", cat: "Other",      title: "Camp MAC 2025 \u2014 Day 2", date: "AUG 2025" },
  { id: "jzdM5JDoE5o", cat: "Other",      title: "Camp MAC 2025 \u2014 Day 1", date: "AUG 2025" },
  { id: "mEC3MHUWVOc", cat: "News",       title: "How Tariffs are Affecting Local Businesses", date: "MAY 2025" },
  { id: "YWC-hCegqT4", cat: "Feature",    title: "Antiques on the Seattle Waterfront", date: "APR 2025" },
  { id: "CxqSqFqAzpk", cat: "Feature",    title: "SF's Cherry Blossom Festival", date: "APR 2025" },
  { id: "A50ndwWyH9w", cat: "Feature",    title: "Youth Discover Careers at Aviation Exploration Day", date: "APR 2025" },
  { id: "F2xsvzKFKew", cat: "News",       title: "MAC 10th Anniversary", date: "MAR 2025" },
  { id: "xQfstV0dOVs", cat: "Feature",    title: "San Francisco Cable Cars", date: "FEB 2025" },
  { id: "LDRcQYFlqXM", cat: "News",       title: "An In-Depth Analysis of the 2024 Election", date: "DEC 2024" },
  { id: "-sTFmR-U_x8", cat: "News",       title: "What Happened During Election Night", date: "NOV 2024" },
  { id: "0Kc1-uPUnnA", cat: "News",       title: "NorCal Media Day", date: "OCT 2024" },
  { id: "GU4kfJl0XeY", cat: "News",       title: "Caltrain Electrification Project (Update)", date: "SEP 2024" },
  { id: "FH5srMrsaSI", cat: "Feature",    title: "Palo Alto's Milkman", date: "MAR 2024" },
  { id: "Tf0ZD-VhOKE", cat: "News",       title: "Maui Fires", date: "SEP 2023" },
];
const CATS = ["All", "News", "Feature", "Commentary", "Other"];
const THUMBNAIL_QUALITIES = ["maxresdefault", "sddefault", "hqdefault"];
const thumb = (id, quality = 0) => `https://img.youtube.com/vi/${id}/${THUMBNAIL_QUALITIES[quality]}.jpg`;

function Work({ onPlay }) {
  const [cat, setCat] = useWorkState("All");
  const featured = NEEL_VIDEOS.find((v) => v.featured);
  const grid = NEEL_VIDEOS.filter((v) => !v.featured && (cat === "All" || v.cat === cat));
  const showFeatured = cat === "All" || cat === featured.cat;
  return (
    <Section id="work" style={{ paddingTop: 96, paddingBottom: 96 }}>
      <div className="work-head" style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
        <div>
          <Kicker>[ 01 ] Selected work</Kicker>
          <h2 className="h1" style={{ margin: "14px 0 0" }}>Projects</h2>
        </div>
        <div className="chip-row" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {CATS.map((c) => <Chip key={c} active={cat === c} onClick={() => setCat(c)}>{c}</Chip>)}
        </div>
      </div>

      {showFeatured && <FeatureTile v={featured} onPlay={onPlay} />}

      <div className="video-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, marginTop: showFeatured ? 1 : 0, background: "var(--border)", border: "1px solid var(--border)" }}>
        {grid.map((v) => <VideoCard key={v.id} v={v} onPlay={onPlay} />)}
      </div>
    </Section>
  );
}

function FeatureTile({ v, onPlay }) {
  const [h, setH] = useWorkState(false);
  return (
    <div className="feature-tile" onClick={() => onPlay(v)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "relative", border: `1px solid ${h ? "var(--border-strong)" : "var(--border)"}`, cursor: "pointer", aspectRatio: "21/9", background: "var(--bg-deep)", transition: "border-color var(--dur) var(--ease)", overflow: "hidden" }}>
      <VideoThumbnail id={v.id} style={{ filter: h ? "grayscale(0)" : "grayscale(1)", transition: "filter var(--dur) var(--ease)" }} />
      <div style={{ position: "absolute", inset: 0, background: h ? "linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.25) 70%)" : "linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.5) 70%)", transition: "background var(--dur) var(--ease)" }} />
      <PlaySquare big hover={h} />
      <span className="label" style={{ position: "absolute", left: 20, top: 18, color: "#fff" }}>FEATURED — {v.cat}</span>
      <span className="timecode" style={{ position: "absolute", right: 18, top: 16, color: "var(--fg-2)" }}>{v.date}</span>
      <div style={{ position: "absolute", left: 20, bottom: 22, maxWidth: 560 }}>
        <h3 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 34, color: "#fff", margin: "0 0 8px", lineHeight: 1.06, letterSpacing: "-.01em" }}>{v.title}</h3>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--fg-2)", margin: 0, maxWidth: 460 }}>{v.blurb}</p>
      </div>
    </div>
  );
}

function VideoCard({ v, onPlay }) {
  const [h, setH] = useWorkState(false);
  return (
    <div className="video-card" onClick={() => onPlay(v)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ cursor: "pointer", background: h ? "var(--surface-1)" : "var(--bg)", transition: "background var(--dur) var(--ease)" }}>
      <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--bg-deep)", borderBottom: "1px solid var(--border)", overflow: "hidden" }}>
        <VideoThumbnail id={v.id} style={{ filter: h ? "grayscale(0)" : "grayscale(1)", opacity: h ? 1 : 0.7, transition: "all var(--dur) var(--ease)" }} />
        <PlaySquare hover={h} />
        <span className="label" style={{ position: "absolute", left: 12, top: 12, fontSize: 11, color: "#fff" }}>{v.cat}</span>
      </div>
      <div style={{ padding: "16px 16px 20px" }}>
        <h4 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 18, color: "var(--fg)", margin: "0 0 8px", lineHeight: 1.2 }}>{v.title}</h4>
        <span className="timecode" style={{ fontSize: 12 }}>{v.date}</span>
      </div>
    </div>
  );
}

function VideoThumbnail({ id, style }) {
  const [quality, setQuality] = useWorkState(0);
  const tryNextThumbnail = () => setQuality((current) => Math.min(current + 1, THUMBNAIL_QUALITIES.length - 1));
  return (
    <img
      src={thumb(id, quality)}
      alt=""
      onError={() => quality < THUMBNAIL_QUALITIES.length - 1 && tryNextThumbnail()}
      onLoad={(e) => {
        if (quality < THUMBNAIL_QUALITIES.length - 1 && e.currentTarget.naturalWidth <= 120) tryNextThumbnail();
      }}
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", ...style }}
    />
  );
}

function PlaySquare({ big, hover }) {
  const s = big ? 60 : 48;
  return (
    <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: s, height: s, border: `1px solid ${hover ? "#fff" : "var(--border-strong)"}`, background: hover ? "#fff" : "rgba(0,0,0,0.35)", display: "flex", alignItems: "center", justifyContent: "center", transition: "all var(--dur) var(--ease)" }}>
      <Icon name="play" size={big ? 22 : 18} style={{ color: hover ? "var(--on-white)" : "#fff", marginLeft: 2 }} />
    </div>
  );
}

Object.assign(window, { Work, NEEL_VIDEOS });