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

export const metadata: Metadata = {
  title: '음악 — 나의 이야기를 음악으로',
};

const CARDS = [
  {
    href: '/music/studio',
    label: 'AI 스튜디오',
    desc: '스토리를 입력하면 가사·음악을 자동 생성 — 로그인 무료',
    key: 'studio',
  },
  {
    href: '/music/samples',
    label: '샘플 갤러리',
    desc: '실제 결과물 — 장르별 데모와 가사',
    key: 'samples',
  },
];

export default function MusicHub() {
  return (
    <div className="min-h-screen bg-[var(--jsm-bg)]">
      <section className="relative w-full min-h-[60vh] flex items-center justify-center px-6 bg-[var(--jsm-navy)]">
        <div className="relative z-10 max-w-3xl mx-auto text-center">
          <p className="font-mono text-[11px] tracking-widest uppercase text-[var(--jsm-accent-soft)] mb-4">
            Music
          </p>
          <h1
            className="kx-display text-4xl md:text-6xl font-bold mb-5 text-white"
            style={{ wordBreak: 'keep-all', letterSpacing: '-0.02em' }}
          >
            나의 이야기를 음악으로
          </h1>
          <p className="text-base md:text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
            당신의 이야기를 들려주면 AI가 가사와 음악으로 만들어 드립니다. 로그인하면 무료로 만들고 보관하세요.
          </p>
        </div>
      </section>

      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-5">
          {CARDS.map((c) => (
            <Link
              key={c.key}
              href={c.href}
              className="rounded-2xl border border-[var(--jsm-line)] bg-[var(--jsm-surface)] p-7 transition-colors hover:border-[var(--jsm-accent)] hover:bg-[var(--jsm-surface-alt)] flex flex-col"
              style={{ textDecoration: 'none' }}
            >
              <h2 className="kx-display text-xl md:text-2xl font-bold text-[var(--jsm-ink)] mb-3">
                {c.label}
              </h2>
              <p className="text-sm md:text-base text-[var(--jsm-ink-soft)] leading-relaxed flex-1">
                {c.desc}
              </p>
              <span aria-hidden="true" className="mt-4 text-[var(--jsm-ink-faint)] text-xs">→</span>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}