const PORTFOLIOS = [
  { id: 1, num: 'N°041', title: '색의 문법, 계절의 일기', client: 'K. — 국민대 시각디자인', cat: 'Graphic', tag: 'Type A', cls: 'ph-coral', size: 'lg', year: 2025, desc: '졸업 프로젝트 12점을 한 편의 에세이처럼 엮어낸 원페이지.' },
  { id: 2, num: 'N°040', title: '빈 방, 두 개의 창', client: 'J. — 홍익대 회화', cat: 'Fine Art', tag: 'Type A', cls: 'ph-stripe', size: 'sm', year: 2025, desc: '개인전 도록을 위한 웹 아카이브.' },
  { id: 3, num: 'N°039', title: 'Motion & Commerce', client: 'S. — 프리랜서 UX', cat: 'UX/UI', tag: 'Type B', cls: 'ph-ink', size: 'md', year: 2025, dark: true, desc: '이직용 케이스 스터디 5편, 모바일 최적화.' },
  { id: 4, num: 'N°038', title: 'Low Light Diary', client: 'H. — 중앙대 사진', cat: 'Photo', tag: 'Type A', cls: 'ph-sage', size: 'sm', year: 2025, desc: '야간 스트릿 포토 50컷 큐레이션.' },
  { id: 5, num: 'N°037', title: '여섯 개의 변주', client: 'P. — 한예종 작곡', cat: 'Music', tag: 'Type C', cls: 'ph-blue', size: 'md', year: 2025, desc: '자작곡 음원 스트리밍이 가능한 오디오 포트폴리오.' },
  { id: 6, num: 'N°036', title: '한 장면, 서른 번', client: 'L. — 동덕여대 영상', cat: 'Film', tag: 'Type B', cls: 'ph-plum', size: 'lg', year: 2025, desc: '광고 단편 릴과 비하인드를 엮은 매거진 포맷.' },
];

const CATS = ['All', 'Graphic', 'Fine Art', 'UX/UI', 'Photo', 'Music', 'Film'];

function Portfolios() {
  const [active, setActive] = React.useState('All');
  const filtered = PORTFOLIOS.filter(p => active === 'All' || p.cat === active);

  const sizeMap = { lg: { gc: 'span 8', h: 520 }, md: { gc: 'span 5', h: 440 }, sm: { gc: 'span 4', h: 440 } };

  return (
    <section id="portfolio" style={{ paddingTop: 140, paddingBottom: 100 }}>
      <div className="max">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>§ 03 — Portfolio Index</div>
            <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              모든 작업을 <em>한 자리에.</em>
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: 540, justifyContent: 'flex-end' }}>
            {CATS.map(c => (
              <button key={c} onClick={() => setActive(c)} style={{
                padding: '8px 14px', fontSize: 12, borderRadius: 999,
                border: '1px solid ' + (active === c ? 'var(--ink)' : 'var(--line)'),
                background: active === c ? 'var(--ink)' : 'transparent',
                color: active === c ? 'var(--bg)' : 'var(--ink-soft)',
              }}>{c}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 28 }}>
          {filtered.map(p => {
            const sz = sizeMap[p.size];
            return (
              <article key={p.id} style={{ gridColumn: sz.gc }}>
                <div className={p.cls} style={{
                  height: sz.h, position: 'relative', padding: 28,
                  color: p.dark ? 'var(--bg)' : 'var(--ink)', overflow: 'hidden',
                  transition: 'transform .3s ease',
                }}
                onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-6px)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span className="mono" style={{ fontSize: 11, opacity: 0.75 }}>{p.num} · {p.year}</span>
                    <span className="chip" style={{ background: p.dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)', borderColor: p.dark ? 'rgba(255,255,255,0.25)' : 'var(--line)', color: p.dark ? 'var(--bg)' : 'var(--ink-soft)' }}>{p.tag}</span>
                  </div>
                  <div style={{ position: 'absolute', bottom: 28, left: 28, right: 28 }}>
                    <div className="kicker" style={{ opacity: 0.65, marginBottom: 10 }}>{p.cat}</div>
                    <div className="serif" style={{ fontSize: p.size === 'lg' ? 40 : 28, lineHeight: 1.05, letterSpacing: '-0.02em' }}>{p.title}</div>
                  </div>
                </div>
                <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'start' }}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{p.client}</div>
                    <p style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>{p.desc}</p>
                  </div>
                  <button style={{ fontSize: 12, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 999, color: 'var(--ink-soft)', whiteSpace: 'nowrap' }}>Read →</button>
                </div>
              </article>
            );
          })}
        </div>

        <div style={{ marginTop: 60, textAlign: 'center' }}>
          <button className="btn-ghost">전체 포트폴리오 보기 ({PORTFOLIOS.length * 7}+) →</button>
        </div>
      </div>
    </section>
  );
}

window.Portfolios = Portfolios;