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

export default function Tarot() {
  const videoRef = useRef(null);
  useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const saveData = navigator.connection?.saveData;
    if ((reduced || saveData) && videoRef.current) {
      videoRef.current.pause();
      videoRef.current.style.display = 'none';
    }
  }, []);

  return (
    <div className="tarot tarot--landing">
      <video
        ref={videoRef}
        className="tarot__hero-video"
        src="/videos/tarot_hero.mp4"
        autoPlay loop muted playsInline preload="metadata"
        poster="/images/tarot_background.png"
      />
      <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
      <div className="tarot__hero-overlay" />

      <div className="tarot__hero-content">
        <header className="tarot__brand">
          <span>✦</span>
          <span>ARCANA TAROT</span>
        </header>

        <nav className="tarot__nav" aria-label="Tarot navigation">
          <Link to="/tarot/today">오늘의 카드</Link>
          <Link to="/tarot/reading">타로 리딩</Link>
          <Link to="/tarot/history">히스토리</Link>
        </nav>

        <h1 className="tarot__h1">당신의 오늘을<br />비추는 타로</h1>
        <p className="tarot__sub">
          카드를 펼쳐, 당신만의 인사이트를 받아보세요.
          라이더-웨이트 덱과 Claude Sonnet 4.6 해석이 함께합니다.
        </p>

        <div className="tarot__cta-row">
          <Link to="/tarot/reading" className="tarot__cta">지금 시작하기 →</Link>
          <Link to="/tarot/today" className="tarot__cta tarot__cta--secondary">오늘의 카드</Link>
        </div>

        <div className="tarot__tier-row">
          <article className="tarot__tier">
            <h3>🌙 오늘의 운세</h3>
            <p>매일 1장의 카드로 오늘의 흐름을 확인하세요.</p>
          </article>
          <article className="tarot__tier">
            <h3>🃏 3장 스프레드</h3>
            <p>과거·현재·미래의 흐름을 한눈에 읽어봅니다.</p>
          </article>
          <article className="tarot__tier">
            <h3>✨ AI 해석</h3>
            <p>Claude Sonnet 4.6이 카드 의미·위치·상호작용을 근거로 풀어줍니다.</p>
          </article>
        </div>
      </div>
    </div>
  );
}
