import TarotReadingClient from './TarotReadingClient';

// 타로 리딩 공개 라우트 — 서버 Hero(라이트 관용구, app/showcase 참고) + 클라이언트 리딩 마운트.

const KOR_BODY = { letterSpacing: '-0.01em' } as const;

export default function TarotPage() {
  return (
    <>
      <section style={{ background: 'var(--jsm-surface)' }}>
        <div className="mx-auto max-w-6xl px-6 pt-20 pb-16 lg:px-8 lg:pt-28 lg:pb-20">
          <div className="max-w-2xl">
            <span
              className="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.22em]"
              style={{ color: 'var(--jsm-accent)' }}
            >
              <span className="inline-block h-1 w-1 rounded-full" style={{ background: 'var(--jsm-accent)' }} />
              tarot reading
            </span>
            <h1
              className="mt-6 font-extrabold break-keep"
              style={{ color: 'var(--jsm-ink)', fontSize: 'clamp(2.3rem, 6vw, 3.6rem)', lineHeight: 1.1, letterSpacing: '-0.035em' }}
            >
              타로 리딩
              <span style={{ color: 'var(--jsm-accent)' }}>.</span>
            </h1>
            <p className="mt-7 break-keep text-lg leading-relaxed" style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}>
              3장의 카드로 과거·현재·미래의 흐름을 읽습니다.
            </p>
          </div>
        </div>
      </section>

      <TarotReadingClient />
    </>
  );
}