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

export const metadata: Metadata = {
  title: "ReadUp — 영어 읽기의 시작부터 완성까지",
  description:
    "알파벳과 단어부터 비즈니스 및 전문 분야의 글까지, 나에게 맞는 단계에서 영어 읽기 능력을 키워보세요.",
};

const levels = [
  { number: "01", label: "SOUNDS", word: "phonics" },
  { number: "04", label: "STORIES", word: "meaning" },
  { number: "07", label: "IDEAS", word: "context" },
  { number: "10", label: "ADVANCED", word: "insight" },
];

export default function Home() {
  return (
    <main className="landing-shell">
      <header className="site-header" aria-label="주요 메뉴">
        <a className="header-brand" href="#home" aria-label="ReadUp 홈">
          <img src="/readup-logo.png" alt="ReadUp" />
        </a>
        <nav className="auth-nav" aria-label="계정 메뉴">
          <Link className="login-link" href="/login">로그인</Link>
          <Link className="signup-link" href="/start">회원가입</Link>
        </nav>
      </header>

      <section className="hero" id="home">
        <div className="hero-main">
          <p className="hero-kicker">ENGLISH READING FOR EVERY LEVEL</p>
          <h1>
            Your reading,
            <br />
            <span>leveled up.</span>
          </h1>
          <p className="hero-korean">
            영어 읽기, 어디서부터 시작해도 괜찮아요.
          </p>
          <p className="hero-description">
            알파벳과 단어부터 일상적인 글, 나아가 비즈니스 및 전문 분야의
            글까지. 지금 나에게 맞는 단계에서 시작해 보세요.
          </p>
          <div className="hero-actions">
            <Link className="primary-cta" href="/start">지금 시작하기 <span>↗</span></Link>
            <span className="no-level">현재 수준을 몰라도 괜찮아요</span>
          </div>
        </div>

        <div className="level-rail" aria-label="ReadUp의 학습 단계 예시">
          <div className="rail-progress" aria-hidden="true"><span /></div>
          {levels.map((level) => (
            <div className="rail-level" key={level.number}>
              <span className="rail-number">{level.number}</span>
              <div>
                <span className="rail-label">{level.label}</span>
                <strong>{level.word}</strong>
              </div>
            </div>
          ))}
        </div>

        <a className="scroll-cue" href="#path">
          <span>SCROLL</span><i aria-hidden="true">↓</i>
        </a>
      </section>

      <section className="path" id="path" aria-labelledby="path-title">
        <div className="path-sticky">
          <div className="path-intro">
            <p>ONE PATH · EVERY READER</p>
            <h2 id="path-title">한 걸음씩,<br />영어의 세계가 넓어집니다.</h2>
          </div>

          <div className="path-stage" aria-hidden="true">
            <div className="path-track"><span /></div>
            <article className="path-card card-sound">
              <small>01</small><strong>sound</strong><span>/saʊnd/</span>
            </article>
            <article className="path-card card-word">
              <small>04</small><strong>word</strong><span>meaning</span>
            </article>
            <article className="path-card card-idea">
              <small>10</small><strong>idea</strong><span>understanding</span>
            </article>
          </div>

          <div className="path-caption">
            <span>소리와 글자</span><span>문장과 문맥</span><span>복잡한 생각</span>
          </div>
        </div>
      </section>

      <section className="explanation" aria-labelledby="explanation-title">
        <div className="explanation-mark" aria-hidden="true">Aa</div>
        <div className="explanation-content">
          <p className="section-kicker">FROM PHONICS TO PROFESSIONAL ENGLISH</p>
          <h2 id="explanation-title">처음 읽는 단어부터,<br />깊이 있는 글까지.</h2>
          <p>
            알파벳과 단어의 소리를 익히고, 문맥 속에서 새로운 단어를 발견하며,
            깊이 있는 글을 스스로 이해하는 단계까지 성장하세요. ReadUp은
            학습자의 수준에 맞춰 이어지는 체계적인 영어 읽기 여정을 제공합니다.
          </p>
          <Link href="/start">나의 읽기 여정 시작하기 <span>→</span></Link>
        </div>
      </section>

      <section className="join" id="signup">
        <span className="join-step">START AT YOUR LEVEL</span>
        <h2>오늘, 한 문장부터<br />시작하세요.</h2>
        <Link href="/start">ReadUp 시작하기 <span>↗</span></Link>
      </section>

      <footer className="site-footer">
        <p>© 2026 SpeakUp. All rights reserved.</p>
        <p className="app-status"><span /> iOS 및 Android 앱을 준비하고 있습니다.</p>
      </footer>
    </main>
  );
}