// work.jsx — full portfolio

const { useState: useStateW, useMemo: useMemoW } = React;

function Work({ setRoute }) {
  const [filter, setFilter] = useStateW("All");
  const [active, setActive] = useStateW(null);
  const [view, setView] = useStateW("mosaic"); // mosaic | grid

  const filters = ["All", "Minimal", "Kinetic", "3D"];

  const items = useMemoW(() => {
    if (filter === "All") return VM_PORTFOLIO;
    return VM_PORTFOLIO.filter((it) => it.style === filter);
  }, [filter]);

  return (
    <main style={{ paddingTop: 88 }}>
      {/* header */}
      <section style={{ padding: "60px 0 48px" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 20 }}>—  Index of work</div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "1.6fr 1fr",
            gap: 48, alignItems: "flex-end",
            marginBottom: 56
          }}>
            <h1 style={{ fontSize: "clamp(56px, 7.2vw, 132px)" }}>
              <span style={{ color: "var(--ink)" }}>Recent</span>{" "}
              <span className="serif spectrum">work</span>
              <br />
              <span style={{ color: "var(--ink)" }}>logos </span>
              <span className="serif" style={{ color: "var(--ink-2)" }}>in motion.</span>
            </h1>
            <p style={{
              color: "var(--ink-2)", fontSize: 18, lineHeight: 1.5,
              margin: 0, maxWidth: 420
            }}>
              Every project below was animated from scratch in After Effects.
              Hover to preview · click to open full-quality.
            </p>
          </div>

          {/* controls */}
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            gap: 24, flexWrap: "wrap",
            padding: "20px 0",
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)"
          }}>
            <div style={{ display: "flex", gap: 8 }}>
              {filters.map((f) => {
                const active = filter === f;
                return (
                  <button
                    key={f}
                    onClick={() => setFilter(f)}
                    style={{
                      padding: "8px 16px", borderRadius: 999,
                      background: active ? "var(--ink)" : "transparent",
                      color: active ? "var(--void)" : "var(--ink-2)",
                      border: "1px solid",
                      borderColor: active ? "var(--ink)" : "var(--line-2)",
                      fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500,
                      cursor: "pointer",
                      transition: "background 200ms, color 200ms"
                    }}>
                    
                    {f}
                    <span style={{
                      marginLeft: 8,
                      color: active ? "rgba(0,0,0,0.4)" : "var(--ink-4)",
                      fontFamily: "var(--font-mono)", fontSize: 11
                    }}>
                      {f === "All" ? VM_PORTFOLIO.length : VM_PORTFOLIO.filter((i) => i.style === f).length}
                    </span>
                  </button>);

              })}
            </div>

            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.12em" }}>
                VIEW —
              </span>
              <button
                onClick={() => setView("mosaic")}
                aria-label="mosaic"
                style={iconBtnStyle(view === "mosaic")}>
                
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <rect x="0" y="0" width="8" height="14" fill="currentColor" />
                  <rect x="10" y="0" width="4" height="6" fill="currentColor" />
                  <rect x="10" y="8" width="4" height="6" fill="currentColor" />
                </svg>
              </button>
              <button
                onClick={() => setView("grid")}
                aria-label="grid"
                style={iconBtnStyle(view === "grid")}>
                
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <rect x="0" y="0" width="6" height="6" fill="currentColor" />
                  <rect x="8" y="0" width="6" height="6" fill="currentColor" />
                  <rect x="0" y="8" width="6" height="6" fill="currentColor" />
                  <rect x="8" y="8" width="6" height="6" fill="currentColor" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* grid */}
      <section style={{ padding: "0 0 var(--d-section)" }}>
        <div className="wrap-wide">
          {view === "mosaic" ?
          <MosaicGrid items={items} onPlay={setActive} /> :

          <PlainGrid items={items} onPlay={setActive} />
          }
        </div>
      </section>

      <ExplainersSection onPlay={setActive} setRoute={setRoute} />

      {/* CTA strip */}
      <section style={{ padding: "0 0 var(--d-block)" }}>
        <div className="wrap-wide">
          <Reveal>
            <div className="glass" style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "32px 40px", borderRadius: "var(--radius-lg)", gap: 24, flexWrap: "wrap"
            }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>—  Next slot opens June 3</div>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 500,
                  letterSpacing: "-0.025em"
                }}>
                  Want yours <span className="serif">in the next batch?</span>
                </div>
              </div>
              <button onClick={() => setRoute("order")} className="btn btn-primary" style={{ fontSize: 15 }}>
                Reserve a slot <span className="arr">→</span>
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      {active && <Lightbox src={active.src} onClose={() => setActive(null)} />}
    </main>);

}

function iconBtnStyle(active) {
  return {
    width: 32, height: 32, borderRadius: 8,
    display: "flex", alignItems: "center", justifyContent: "center",
    background: active ? "var(--glass-hi)" : "transparent",
    color: active ? "var(--ink)" : "var(--ink-3)",
    border: "1px solid",
    borderColor: active ? "var(--line-2)" : "transparent",
    cursor: "pointer"
  };
}

function MosaicGrid({ items, onPlay }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(6, 1fr)",
      gridAutoRows: "240px",
      gap: 24
    }}>
      {items.map((it, i) => {
        const span = mosaicSpan(i);
        return (
          <Reveal
            key={it.id} delay={i % 4 * 60}
            style={{ gridColumn: `span ${span.c}`, gridRow: `span ${span.r}` }}>

            <VideoTile item={it} fill onClick={() => onPlay(it)} big={span.c >= 4} />
          </Reveal>);

      })}
    </div>);

}

function mosaicSpan(i) {
  const pattern = [
    { c: 4, r: 2 }, { c: 2, r: 1 }, { c: 2, r: 1 },
    { c: 3, r: 2 }, { c: 3, r: 2 },
    { c: 3, r: 2 }, { c: 3, r: 2 },
    { c: 6, r: 2 },
  ];
  return pattern[i % pattern.length];
}

function ExplainersSection({ onPlay, setRoute }) {
  const mobile = useMobile();
  const items = window.VM_EXPLAINERS || [];
  if (!items.length) return null;

  // With an odd count the first video goes full-width so the 2-column rows never leave a gap.
  const featureFirst = !mobile && items.length % 2 === 1;

  return (
    <section style={{ padding: "0 0 var(--d-section)" }}>
      <div className="wrap-wide">
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1.6fr 1fr",
          gap: mobile ? 16 : 48, alignItems: "flex-end",
          padding: "40px 0 32px",
          borderTop: "1px solid var(--line)",
          marginBottom: 8
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>—  Beyond the logo</div>
            <h2 style={{ fontSize: "clamp(40px, 5vw, 84px)" }}>
              <span style={{ color: "var(--ink)" }}>Explainers &amp; </span>
              <span className="serif spectrum">SaaS reels.</span>
            </h2>
          </div>
          <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.5, margin: 0, maxWidth: 420 }}>
            Product explainers, launch films and UI animation for software teams.
            Scoped and quoted per project.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(2, 1fr)",
          gap: 24
        }}>
          {items.map((it, i) => {
            const feature = featureFirst && i === 0;
            const tile = { ...it, year: it.duration, style: it.type };
            return (
              <Reveal key={it.id} delay={i % 2 * 80}
                style={{ gridColumn: feature ? "span 2" : "auto" }}>
                <VideoTile item={tile} aspect="16/9" big={feature}
                  onClick={() => onPlay({ src: it.src })} />
              </Reveal>);
          })}
        </div>

        <div style={{ marginTop: 28, display: "flex", justifyContent: "flex-end" }}>
          <button onClick={() => setRoute("contact")} className="btn btn-ghost" style={{ fontSize: 14 }}>
            Need a product explainer? Let's talk <span className="arr">→</span>
          </button>
        </div>
      </div>
    </section>);
}

function PlainGrid({ items, onPlay }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(3, 1fr)",
      gap: 20
    }}>
      {items.map((it, i) =>
      <Reveal key={it.id} delay={i % 3 * 60}>
          <VideoTile item={it} aspect="4/3" onClick={() => onPlay(it)} />
        </Reveal>
      )}
    </div>);

}

Object.assign(window, { Work });