// MEGALIS — Works grid with category filter + hover-scrub placeholder

const worksStyles = `
  .works-section { border-bottom: 1px solid var(--line); }

  .works-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 24px var(--pad);
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .filter-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-right: 16px;
  }
  .filter-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--line);
    color: var(--fg-2);
    transition: all 0.25s var(--easing);
    background: transparent;
  }
  .filter-chip:hover { color: var(--fg); border-color: var(--fg-3); }
  .filter-chip[data-active="true"] {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }
  .filter-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--fg-3);
  }

  .works-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
  }
  .works-grid > * { background: var(--bg); }
  .work-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: opacity 0.35s var(--easing);
  }
  .work-card.dim { opacity: 0.18; }
  .work-card .thumb {
    flex: 1;
    background-image: repeating-linear-gradient(
      45deg,
      var(--bg-2) 0,
      var(--bg-2) 14px,
      var(--bg-3) 14px,
      var(--bg-3) 28px
    );
    position: relative;
    overflow: hidden;
  }
  .work-card .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--bg) 65%, transparent) 100%);
    pointer-events: none;
  }
  .work-card .ph-label {
    position: absolute;
    top: 10px; left: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--fg-3);
    text-transform: uppercase;
    z-index: 1;
  }
  .work-card .scrub {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--line);
    overflow: hidden;
    z-index: 2;
  }
  .work-card .scrub::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.2s linear;
  }
  .work-card:hover .scrub::after { width: 100%; transition: width 4s linear; }

  .work-card .info {
    padding: 16px 20px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
  }
  .work-card .title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
  }
  .work-card .client {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 6px;
  }
  .work-card .cat {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--fg-2);
    text-transform: uppercase;
    text-align: right;
  }
  .work-card .num {
    position: absolute;
    top: 16px; right: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg-3);
    letter-spacing: 0.14em;
  }

  /* Grid spans */
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 4; }
  .span-8 { grid-column: span 8; }
  .span-3 { grid-column: span 3; }
  .span-5 { grid-column: span 5; }
  .span-7 { grid-column: span 7; }
  .span-12 { grid-column: span 12; }

  @media (max-width: 900px) {
    .works-grid { grid-template-columns: repeat(6, 1fr); }
    .span-6, .span-4, .span-8, .span-3, .span-5, .span-7 { grid-column: span 6; }
  }

  .works-foot {
    padding: 24px var(--pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .btn-load {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 24px;
    border: 1px solid var(--fg);
    color: var(--fg);
    transition: all 0.25s var(--easing);
  }
  .btn-load:hover { background: var(--fg); color: var(--bg); }
`;

const CATEGORIES = ["All", "Animation", "Commercial", "Film & TV", "VFX Sup.", "CG"];

const WORKS = [
  { title: "Oni — Devil on the Doorstep", client: "Netflix",  cat: "Animation",  span: 8, ph: "// oni · hero shot" },
  { title: "Kakigōri",                     client: "Shiseido", cat: "Commercial", span: 4, ph: "// kakigori · spot" },
  { title: "Tokyo at Dawn",                client: "TBS",       cat: "Film & TV",  span: 4, ph: "// tokyo · matte" },
  { title: "Provence — Wind & Light",      client: "Canal+",    cat: "VFX Sup.",   span: 4, ph: "// provence · plates" },
  { title: "Adidas — Origin",              client: "Adidas",    cat: "Commercial", span: 4, ph: "// adidas · spot" },
  { title: "Yōkai Bridge",                 client: "NHK",       cat: "CG",         span: 6, ph: "// yokai · cg env" },
  { title: "M6 — Ident 2025",              client: "M6",        cat: "Commercial", span: 6, ph: "// m6 · ident" },
  { title: "Prime — The Lighthouse",       client: "Prime",     cat: "Film & TV",  span: 4, ph: "// lighthouse · plate" },
  { title: "Dragon Ride",                  client: "Warner",    cat: "VFX Sup.",   span: 8, ph: "// dragon · vfx" },
];

function Works() {
  const [active, setActive] = React.useState("All");
  const filtered = active === "All" ? WORKS : WORKS.filter(w => w.cat === active);

  return (
    <>
      <style>{worksStyles}</style>
      <section className="works-section" id="works" data-screen-label="Works">
        <header className="sec-head">
          <div>
            <div className="sec-num">003 / Works</div>
            <h2 className="sec-title">Selected<br/>Works</h2>
          </div>
          <div className="sec-kana">作品集 — 抜粋</div>
        </header>

        <div className="works-filter" role="tablist">
          <span className="filter-label">Filter ↘</span>
          {CATEGORIES.map(c => (
            <button key={c}
              className="filter-chip"
              data-active={active === c}
              onClick={() => setActive(c)}>
              {c}
            </button>
          ))}
          <span className="filter-count">
            {filtered.length.toString().padStart(2, "0")} / {WORKS.length.toString().padStart(2, "0")}
          </span>
        </div>

        <div className="works-grid">
          {WORKS.map((w, i) => {
            const isVisible = active === "All" || w.cat === active;
            return (
              <article key={i}
                className={`work-card span-${w.span} ${isVisible ? '' : 'dim'}`}
                aria-hidden={!isVisible}>
                <span className="num">№ {(i+1).toString().padStart(2, "0")}</span>
                <div className="thumb">
                  <span className="ph-label">{w.ph}</span>
                </div>
                <div className="scrub"></div>
                <div className="info">
                  <div>
                    <h3 className="title">{w.title}</h3>
                    <div className="client">{w.client}</div>
                  </div>
                  <div className="cat">{w.cat}</div>
                </div>
              </article>
            );
          })}
        </div>

        <div className="works-foot">
          <span className="micro">↘ Hover to scrub · click to open case study</span>
          <button className="btn-load">View Archive (140+ projects) →</button>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Works });