import './App.css'

function App() {
  return (
    <main className="app-shell">
      <section className="hero-panel">
        <div className="hero-copy">
          <span className="eyebrow">Vite + React + TypeScript</span>
          <h1>羽毛球記分板</h1>
          <p className="hero-text">
            專案已完成初始化，接下來可以往單打、雙打、發球權切換、局數統計與賽事模式繼續擴充。
          </p>
        </div>

        <div className="status-strip" aria-label="專案狀態">
          <span>即時比分</span>
          <span>局數追蹤</span>
          <span>Docker Ready</span>
        </div>
      </section>

      <section className="scoreboard-card" aria-label="比賽記分板預覽">
        <div className="board-header">
          <div>
            <p className="label">友誼賽</p>
            <h2>中央球場</h2>
          </div>
          <div className="match-meta">
            <span>第 2 局</span>
            <span>21 分制</span>
          </div>
        </div>

        <div className="score-grid">
          <article className="team-card">
            <p className="team-tag">A 隊</p>
            <h3>林 / 陳</h3>
            <strong>18</strong>
            <p>上一局 21 : 16</p>
          </article>

          <article className="team-card team-card-active">
            <p className="team-tag">B 隊</p>
            <h3>王 / 黃</h3>
            <strong>21</strong>
            <p>目前發球權</p>
          </article>
        </div>

        <div className="detail-grid">
          <div>
            <span className="label">本局節奏</span>
            <p>多拍相持偏多，比分進入收尾階段。</p>
          </div>
          <div>
            <span className="label">下一步</span>
            <p>把計分控制、局數規則與賽事資料模型串起來。</p>
          </div>
        </div>
      </section>
    </main>
  )
}

export default App