jaengseung-made/app/music/samples/page.tsx

import type { Metadata } from 'next';
import Link from 'next/link';

export const metadata: Metadata = {
  title: 'AI 음악·뮤비 샘플 갤러리',
  description: '쟁승메이드 AI 음악 팩으로 제작한 샘플 뮤직비디오 모음. 장르별 결과물을 직접 확인하세요.',
};

type Sample = {
  id: string;
  title: string;
  genre: string;
  duration: string;
  views?: string;
  featured?: boolean;
  embedId?: string;
};

const SAMPLES: Sample[] = [
  { id: 's1', title: 'K-POP 스타일 TOP 샘플', genre: 'K-POP', duration: '0:45', featured: true },
  { id: 's2', title: 'Lo-fi 감성 MV', genre: 'Lo-fi', duration: '1:02' },
  { id: 's3', title: '시티팝 무드 영상', genre: 'City Pop', duration: '0:58' },
  { id: 's4', title: 'EDM 쇼츠 훅', genre: 'EDM', duration: '0:30' },
  { id: 's5', title: '발라드 감성 컷', genre: 'Ballad', duration: '1:10' },
  { id: 's6', title: '트랩 비트 쇼츠', genre: 'Trap', duration: '0:35' },
];

export default function MusicSamplesPage() {
  return (
    <div className="px-6 py-20 lg:px-14" style={{ background: 'var(--jsm-bg)' }}>
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <span className="kx-label">SAMPLE GALLERY</span>
          <h1 className="kx-display text-3xl md:text-5xl font-bold mt-3 mb-4" style={{ color: 'var(--jsm-ink)' }}>
            AI 음악·뮤비 샘플 모음
          </h1>
          <p className="max-w-2xl mx-auto text-sm md:text-base" style={{ color: 'var(--jsm-ink-soft)' }}>
            팩 워크플로우로 제작된 결과물입니다. 장르별로 다양한 톤을 확인해보세요.
            <br className="hidden md:block" />
            <span className="text-xs" style={{ color: 'var(--jsm-ink-soft)' }}>
              일부 샘플은 런칭 직후 순차 공개됩니다.
            </span>
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
          {SAMPLES.map((s) => (
            <div
              key={s.id}
              className={`relative aspect-[9/16] rounded-2xl overflow-hidden border ${
                s.featured ? 'border-[var(--jsm-accent)] shadow-lg' : 'border-[var(--jsm-line)]'
              }`}
              style={{ background: 'var(--jsm-surface-alt)' }}
            >
              {s.featured && (
                <span
                  className="absolute top-3 left-3 z-10 text-[10px] px-2 py-1 rounded-full font-semibold tracking-widest"
                  style={{ background: 'var(--jsm-accent-soft)', color: 'var(--jsm-accent)', border: '1px solid var(--jsm-accent)' }}
                >
                  TOP
                </span>
              )}

              <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-5">
                <svg
                  className="w-10 h-10 mb-3 opacity-80"
                  fill="none"
                  stroke="var(--jsm-accent)"
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.75 10.5l4.72-2.72a.75.75 0 011.28.53v9.38a.75.75 0 01-1.28.53l-4.72-2.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
                </svg>
                <p className="text-[10px] md:text-xs font-mono tracking-widest mb-1" style={{ color: 'var(--jsm-accent)' }}>{s.genre.toUpperCase()}</p>
                <p className="text-sm md:text-base font-semibold" style={{ color: 'var(--jsm-ink)' }}>
                  {s.title}
                </p>
                <p className="text-xs mt-1" style={{ color: 'var(--jsm-ink-soft)' }}>{s.duration}</p>
                <p className="text-[10px] mt-3 opacity-60" style={{ color: 'var(--jsm-ink-soft)' }}>
                  {s.embedId ? '영상 재생' : '영상 준비 중'}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div
          className="mt-16 text-center px-8 py-16 rounded-3xl"
          style={{ background: 'var(--jsm-navy)' }}
        >
          <span className="text-[var(--jsm-accent-soft)] text-xs font-bold uppercase tracking-widest">NEXT</span>
          <h2 className="text-2xl md:text-3xl font-bold mt-3 mb-3 text-white">
            내 채널에도 이런 쇼츠 올리고 싶다면
          </h2>
          <p className="text-sm mb-6 text-white/70">
            동일 워크플로우 팩 ₩39,000부터.
          </p>
          <Link
            href="/music/packs#pricing"
            className="inline-flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-semibold transition-transform duration-200 hover:translate-y-[-1px]"
            style={{ color: 'var(--jsm-navy)' }}
          >
            팩 가격 보기
          </Link>
        </div>
      </div>
    </div>
  );
}