const SAMPLES = [
  { n: '01', cat: 'Graphic Design', kor: '그래픽디자인', title: '감각 있는 타이포 아카이브', sub: '국민대 · 시각디자인', cls: 'ph-cream', tag: '원페이지' },
  { n: '02', cat: 'Fine Art',       kor: '회화 · 순수미술', title: '유화 연작 전시 도록', sub: '홍익대 · 회화과', cls: 'ph-coral', tag: '원페이지' },
  { n: '03', cat: 'UX / UI',        kor: 'UX·UI 디자인', title: '모바일 앱 케이스 스터디', sub: '프리랜서 · 6년차', cls: 'ph-stripe', tag: '브랜드' },
  { n: '04', cat: 'Photography',    kor: '사진',        title: '도시 스트릿 포토 에세이', sub: '중앙대 · 사진학과', cls: 'ph-ink', tag: '원페이지', dark: true },
  { n: '05', cat: 'Music',          kor: '작곡 · 연주', title: '피아노 자작곡 앨범 소개', sub: '한예종 · 작곡', cls: 'ph-sage', tag: '시스템' },
  { n: '06', cat: 'Film / Motion',  kor: '영상',        title: '광고 단편 릴 모음', sub: '동덕여대 · 영상', cls: 'ph-blue', tag: '브랜드' },
  { n: '07', cat: 'Illustration',   kor: '일러스트',    title: '캐릭터 IP 브랜딩북', sub: '개인 · 프리랜서', cls: 'ph-plum', tag: '원페이지' },
  { n: '08', cat: 'Performance',    kor: '공연 · 무용',  title: '무용 공연 아카이브', sub: '이화여대 · 무용', cls: 'ph-cream', tag: '원페이지' },
];

function SampleCard({ s }) {
  return (
    <div style={{ flex: '0 0 420px', scrollSnapAlign: 'start' }}>
      <div className={s.cls} style={{
        height: 520, position: 'relative', padding: 24,
        color: s.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', alignItems: 'flex-start' }}>
          <span className="mono" style={{ fontSize: 11, opacity: 0.75 }}>N° {s.n}</span>
          <span className="chip" style={{
            background: s.dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.7)',
            borderColor: s.dark ? 'rgba(255,255,255,0.2)' : 'var(--line)',
            color: s.dark ? 'var(--bg)' : 'var(--ink-soft)',
          }}>{s.tag}</span>
        </div>
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
          <div className="eng" style={{ fontSize: 11, letterSpacing: '0.08em', opacity: 0.7, marginBottom: 4 }}>{s.cat.toUpperCase()}</div>
          <div className="kicker" style={{ color: 'inherit', opacity: 0.65, marginBottom: 10 }}>{s.kor}</div>
          <div className="serif" style={{ fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.02em' }}>{s.title}</div>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16 }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>{s.sub}</div>
          <div className="eng" style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>Client Project · 2025</div>
        </div>
        <button style={{
          fontSize: 12, padding: '6px 12px', border: '1px solid var(--line)',
          borderRadius: 999, color: 'var(--ink-soft)',
        }}>View →</button>
      </div>
    </div>
  );
}

function Samples() {
  const ref = React.useRef(null);
  const scroll = (dir) => {
    if (!ref.current) return;
    ref.current.scrollBy({ left: dir * 448, behavior: 'smooth' });
  };

  return (
    <section id="samples" style={{ paddingTop: 120, paddingBottom: 100, borderTop: '1px solid var(--line-soft)' }}>
      <div className="max" style={{ paddingBottom: 40 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="kicker" style={{ marginBottom: 16 }}>§ 01 — Portfolio Samples</div>
            <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
              살아있는 <em>샘플 아카이브.</em>
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', marginTop: 18, maxWidth: 520 }}>
              최근 완성된 실제 작업 일부입니다. 전공·매체·톤에 따라 저희가 제안드리는 방향도 조금씩 달라져요.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => scroll(-1)} style={arrowBtn}>←</button>
            <button onClick={() => scroll(1)} style={arrowBtn}>→</button>
          </div>
        </div>
      </div>

      <div ref={ref} className="hscroll">
        <div className="hscroll-inner" style={{ paddingRight: 56 }}>
          {SAMPLES.map(s => <SampleCard key={s.n} s={s} />)}
          <div style={{ flex: '0 0 280px', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 20 }}>
            <div className="serif" style={{ fontSize: 28, lineHeight: 1.15 }}>
              더 많은<br />샘플이 준비되어 있어요.
            </div>
            <button style={{ alignSelf: 'flex-start', marginTop: 20, fontSize: 13, padding: '10px 16px', borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)' }}>
              전체 보기 →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

const arrowBtn = {
  width: 44, height: 44, borderRadius: '50%',
  border: '1px solid var(--line)', fontSize: 16,
  color: 'var(--ink)', transition: 'all .15s ease',
};

window.Samples = Samples;