// WORKS — Cases (filterable grid)

const WCases = () => {
  const D = window.WORKS_DATA;
  const [filter, setFilter] = React.useState('ALL');

  const cats = ['ALL', 'BRAND', 'CAMPUS', 'CONCERT', 'EVENT', 'AUCTION'];
  const photoCases = D.cases.filter(c => Boolean(c.img));
  const list = filter === 'ALL' ? photoCases : photoCases.filter(c => c.cat === filter);
  const visibleCats = cats.filter(c => c === 'ALL' || photoCases.some(item => item.cat === c));

  return (
    <section id="w-case" className="w-section" style={{background: 'var(--w-ink)'}}>
      <style>{`
        .w-case-tools { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; flex-wrap:wrap; gap:24px; }
        .w-case-filters { display:flex; gap:8px; flex-wrap:wrap; }
        .w-case-filter { padding:10px 16px; background:transparent; border:1px solid var(--w-line); color:var(--w-text-soft); font-family:"Inter",sans-serif; font-size:11px; font-weight:500; letter-spacing:.18em; cursor:pointer; transition:.25s; }
        .w-case-filter:hover { border-color:var(--w-text); color:var(--w-text); }
        .w-case-filter.active { background:var(--w-accent); color:#0A1628; border-color:var(--w-accent); }
        .w-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
        .w-case { position:relative; background:var(--w-ink-2); border:1px solid var(--w-line); overflow:hidden; aspect-ratio:4/5; transition:transform .4s,border-color .25s; }
        .w-case:hover { transform:translateY(-6px); border-color:var(--w-accent); }
        .w-case-img { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; transition:transform .6s; display:flex; align-items:center; justify-content:center; background-color:#050505; }
        .w-case:hover .w-case-img { transform:scale(1.025); }
        .w-case-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 36%,rgba(10,22,40,.92) 100%); opacity:.84; }
        .w-case-content { position:absolute; inset:0; padding:24px; display:flex; flex-direction:column; justify-content:space-between; }
        .w-case-top { display:flex; justify-content:space-between; align-items:start; }
        .w-case-num { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; color:var(--w-accent); background:rgba(10,22,40,.7); padding:4px 8px; }
        .w-case-cat { font-family:"Inter",sans-serif; font-size:9px; font-weight:600; letter-spacing:.22em; padding:4px 10px; background:var(--w-accent); color:#0A1628; }
        .w-case-bot { z-index:2; }
        .w-case-zh { font-family:"Noto Serif TC",serif; font-weight:600; font-size:22px; line-height:1.3; color:var(--w-text); margin:0 0 6px; }
        .w-case-en { font-family:"Inter",sans-serif; font-size:10px; letter-spacing:.2em; color:var(--w-text-mute); text-transform:uppercase; }
        @media(max-width:900px){.w-case-grid{grid-template-columns:1fr 1fr}}
        @media(max-width:620px){.w-case-grid{grid-template-columns:1fr}}
      `}</style>

      <div className="w-section-head">
        <div><div className="w-eyebrow" style={{marginBottom:24}}>CASE · 歷年案例</div><h2><em>案例</em>，<br/>讓成果說話。</h2></div>
        <div className="right">從 DCARD 校園到中華電信燈節，從 Super Junior 周年快閃到藝術品拍賣會 — 每一場活動都是一次完整的演出。以下是部分代表案例。</div>
      </div>

      <div className="w-case-tools">
        <div className="w-case-filters">{visibleCats.map(c => <button key={c} className={'w-case-filter'+(filter===c?' active':'')} onClick={()=>setFilter(c)}>{c}</button>)}</div>
        <div className="w-meta">[ {String(list.length).padStart(2,'0')} OF {String(photoCases.length).padStart(2,'0')} ]</div>
      </div>

      <div className="w-case-grid">
        {list.map(c => {
          const fit = c.imgFit || 'cover';
          const pos = c.imgPosition || 'center';
          return (
            <article key={c.num} className="w-case">
              <div className="w-case-img" style={{backgroundImage:`url('${c.img}')`, backgroundSize:fit, backgroundPosition:pos}} />
              <div className="w-case-overlay" />
              <div className="w-case-content">
                <div className="w-case-top"><span className="w-case-num">#{c.num}</span><span className="w-case-cat">{c.cat}</span></div>
                <div className="w-case-bot"><h3 className="w-case-zh">{c.zh}</h3><div className="w-case-en">{c.en} · {c.year}</div></div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
};

window.WCases = WCases;