import React from 'react';
import { Link } from 'react-router-dom';
import './Tarot.css';

export default function Tarot() {
  return (
    <div className="tarot tarot--landing">
      <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
      <div className="tarot__hero-overlay" />
      <div className="tarot__corner tarot__corner--left" aria-hidden />
      <div className="tarot__corner tarot__corner--right" aria-hidden />

      <div className="tarot__hero-content">
        <header className="tarot__brand" aria-label="Arcana Tarot">
          <span className="tarot__brand-spark" aria-hidden>✦</span>
          <span className="tarot__brand-mark" aria-hidden>A</span>
          <span className="tarot__brand-name">ARCANA TAROT</span>
          <span className="tarot__brand-spark" aria-hidden>✦</span>
        </header>

        <section className="tarot__hero-copy" aria-labelledby="tarot-landing-title">
          <h1 id="tarot-landing-title" className="tarot__h1">
            당신의<br />
            오늘을 비추는 타로
          </h1>
          <div className="tarot__ornament" aria-hidden>
            <span />
            <b>✶</b>
            <span />
          </div>
          <p className="tarot__sub">
            카드를 뽑고, 당신만을 위한 인사이트를 받아보세요.<br />
            운명은 이미 당신 안에 있습니다.
          </p>

          <div className="tarot__cta-row">
            <Link to="/tarot/reading" className="tarot__cta">
              <span aria-hidden>✦</span>
              지금 시작하기
              <span className="tarot__cta-arrow" aria-hidden>→</span>
            </Link>
            <Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">
              <span className="tarot__card-icon" aria-hidden />
              오늘의 카드
            </Link>
          </div>
        </section>

        <div id="tarot-guide" className="tarot__tier-row" aria-label="Tarot features">
          <article className="tarot__tier">
            <span className="tarot__tier-icon tarot__tier-icon--sun" aria-hidden />
            <h3>오늘의 운세</h3>
            <p>매일 한 장의 카드로<br />오늘의 흐름을 확인하세요.</p>
          </article>
          <article className="tarot__tier">
            <span className="tarot__tier-icon tarot__tier-icon--cards" aria-hidden />
            <h3>3장 스프레드</h3>
            <p>과거·현재·미래를 통해<br />더 깊은 해답을 얻어보세요.</p>
          </article>
          <article className="tarot__tier">
            <span className="tarot__tier-icon tarot__tier-icon--moon" aria-hidden />
            <h3>AI 해석</h3>
            <p>AI가 전하는 통찰로<br />나만의 리딩을 완성하세요.</p>
          </article>
        </div>

        <div className="tarot__scroll-cue" aria-hidden>
          <span>SCROLL TO DISCOVER</span>
          <b>⌄</b>
        </div>
      </div>
    </div>
  );
}