// Case studies page with filters + lightbox

const CASES = [
  { id: 'c01', year: '2025', type: 'CONCERT',  zh: '某大型流行音樂演唱會',    en: 'STADIUM POP CONCERT',      venue: '臺北大巨蛋', cap: '40,000', sys: 'd&b KSL', tags: ['演唱會', 'LINE ARRAY', 'RF'] },
  { id: 'c02', year: '2025', type: 'FESTIVAL', zh: '戶外音樂節主舞台',        en: 'OUTDOOR FESTIVAL MAIN',    venue: '大佳河濱公園', cap: '18,000', sys: 'L-Acoustics K2', tags: ['音樂節', 'OUTDOOR', 'SUB-ARRAY'] },
  { id: 'c03', year: '2025', type: 'THEATRE',  zh: '現代劇場沉浸式演出',      en: 'IMMERSIVE THEATRE',        venue: '臺北表演藝術中心', cap: '1,500', sys: 'Meyer LEOPARD', tags: ['劇場', 'IMMERSIVE', '5.1'] },
  { id: 'c04', year: '2024', type: 'CORPORATE',zh: '科技年會品牌發表',        en: 'TECH BRAND KEYNOTE',       venue: '華山文創園區', cap: '800', sys: 'd&b V-Series', tags: ['會展', 'CORPORATE'] },
  { id: 'c05', year: '2024', type: 'CONCERT',  zh: '獨立樂團巡迴場',          en: 'INDIE BAND TOUR STOP',     venue: 'Legacy Taipei', cap: '1,200', sys: 'L-Acoustics Kara', tags: ['LIVEHOUSE', 'TOUR'] },
  { id: 'c06', year: '2024', type: 'FESTIVAL', zh: '跨年晚會倒數活動',        en: 'NYE COUNTDOWN',            venue: '信義區', cap: '50,000', sys: 'd&b KSL + SL-SUB', tags: ['戶外', '大型']},
  { id: 'c07', year: '2023', type: 'WORKSHOP', zh: '音響系統校正工作坊',      en: 'SYSTEM TUNING WORKSHOP',   venue: '鐵吹教室', cap: '24', sys: 'SMAART + ArrayCalc', tags: ['WORKSHOP', 'TRAINING'] },
  { id: 'c08', year: '2023', type: 'THEATRE',  zh: '國家劇院製作音響統籌',    en: 'NATIONAL THEATRE PRODUCTION', venue: '國家兩廳院', cap: '1,498', sys: 'Meyer ULTRA-X', tags: ['劇場', 'OPERA'] },
  { id: 'c09', year: '2023', type: 'CORPORATE',zh: '品牌發表與展覽',          en: 'PRODUCT LAUNCH EVENT',     venue: '松山文創園區', cap: '600', sys: 'd&b Y-Series', tags: ['品牌', '發表'] },
];

const FILTERS = [
  { id: 'all',      zh: '全部',   en: 'ALL' },
  { id: 'CONCERT',  zh: '演唱會', en: 'CONCERT' },
  { id: 'FESTIVAL', zh: '音樂節', en: 'FESTIVAL' },
  { id: 'THEATRE',  zh: '劇場',   en: 'THEATRE' },
  { id: 'CORPORATE',zh: '會展',   en: 'CORPORATE' },
  { id: 'WORKSHOP', zh: '講座',   en: 'WORKSHOP' },
];

function Lightbox({ case: c, onClose, onPrev, onNext, index, total }) {
  const [img, setImg] = React.useState(0);
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose, onPrev, onNext]);

  React.useEffect(() => { setImg(0); }, [c.id]);

  const thumbs = [0,1,2,3,4];
  return (
    <div className="lightbox" onClick={onClose}>
      <div className="lb-panel" onClick={(e) => e.stopPropagation()}>
        <div className="lb-head">
          <span>CASE {c.id.toUpperCase()} / {String(index+1).padStart(2,'0')} OF {String(total).padStart(2,'0')} · {c.type}</span>
          <button className="lb-close" onClick={onClose}>✕ CLOSE</button>
        </div>
        <div className="lb-main">
          <div className="lb-image">
            <Placeholder label={`${c.en} — FRAME ${String(img+1).padStart(2,'0')}`} />
            <button className="lb-nav prev" onClick={onPrev}>←</button>
            <button className="lb-nav next" onClick={onNext}>→</button>
          </div>
          <div className="lb-meta">
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.08em' }}>{c.year} / {c.type}</div>
            <h3 style={{ marginTop: 8 }}>{c.zh}</h3>
            <div className="sub">{c.en}</div>
            <p className="detail">
              完整的技術統籌流程：從前期場勘、3D 模擬、系統設計，到現場測量與校正，每個階段都有可追溯的數據紀錄，確保觀眾席各區域的聲音表現一致。
            </p>
            <dl>
              <dt>VENUE · 場地</dt><dd>{c.venue}</dd>
              <dt>CAPACITY · 座位</dt><dd>{c.cap}</dd>
              <dt>SYSTEM · 系統</dt><dd>{c.sys}</dd>
              <dt>COVERAGE · 涵蓋</dt><dd>±1.5 dB @ 2 kHz</dd>
              <dt>MAX SPL · 聲壓</dt><dd>103 dBA LEQ</dd>
              <dt>ROLE · 角色</dt><dd>系統設計 / FOH / 統籌</dd>
            </dl>
          </div>
        </div>
        <div className="lb-thumbs">
          {thumbs.map((i) => (
            <div key={i} className={`lb-thumb ${img === i ? 'active' : ''}`} onClick={() => setImg(i)}>
              <Placeholder label={`#${i+1}`} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CasesPage() {
  const [filter, setFilter] = React.useState('all');
  const [active, setActive] = React.useState(null);
  const filtered = filter === 'all' ? CASES : CASES.filter(c => c.type === filter);
  const openAt = (idx) => setActive(idx);
  const close = () => setActive(null);
  const prev = () => setActive(i => (i - 1 + filtered.length) % filtered.length);
  const next = () => setActive(i => (i + 1) % filtered.length);

  return (
    <div className="page shell">
      <div className="sec-head" style={{ marginTop: 24 }}>
        <div className="sec-label"><span className="sec-label-num">03</span>製作案例 / CASES</div>
        <div>
          <h2 className="sec-title">
            <span className="zh">每一場演出，都留下完整的紀錄</span>
            <span className="en">CASE LOG · 2023 – 2025</span>
          </h2>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <div className="case-filters">
          {FILTERS.map(f => (
            <button key={f.id}
              className={`case-filter ${filter === f.id ? 'active' : ''}`}
              onClick={() => setFilter(f.id)}>
              {f.zh} <span style={{ opacity: 0.5, marginLeft: 4 }}>{f.en}</span>
            </button>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em' }}>
          SHOWING <span style={{ color: 'var(--accent)' }}>{String(filtered.length).padStart(2,'0')}</span> / {String(CASES.length).padStart(2,'0')} ENTRIES
        </div>
      </div>

      <div className="cases-grid">
        {filtered.map((c, i) => (
          <div key={c.id} className="case-card" onClick={() => openAt(i)}>
            <div className="case-thumb">
              <Placeholder label={c.en} />
            </div>
            <div className="case-meta">
              <span>{c.id.toUpperCase()} · {c.year}</span>
              <span style={{ color: 'var(--accent)' }}>{c.type}</span>
            </div>
            <div>
              <div className="case-title">{c.zh}</div>
              <div className="case-sub mono" style={{ marginTop: 4, color: 'var(--muted)', fontSize: 11, letterSpacing: '0.06em' }}>
                {c.venue} · {c.cap} CAP · {c.sys}
              </div>
            </div>
            <div className="case-tags">
              {c.tags.map(t => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>
        ))}
      </div>

      {active !== null && (
        <Lightbox case={filtered[active]} index={active} total={filtered.length}
          onClose={close} onPrev={prev} onNext={next} />
      )}
    </div>
  );
}

Object.assign(window, { CasesPage });