// 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 list = filter === 'ALL' ? D.cases : D.cases.filter(c => c.cat === filter);

  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-img.no-photo { background-image:repeating-linear-gradient(135deg,rgba(244,241,234,.05) 0 8px,rgba(244,241,234,.01) 8px 16px); background-color:var(--w-ink-3); }
        .w-case-img-tag { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; color:var(--w-text-mute); padding:4px 10px; border:1px solid var(--w-line); }
        .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">{cats.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(D.cases.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'+(c.img?'':' no-photo')} style={c.img ? {backgroundImage:`url('${c.img}')`, backgroundSize:fit, backgroundPosition:pos} : {}}>
                {!c.img && <span className="w-case-img-tag">{c.cat} · {c.year}</span>}
              </div>
              <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;