import { Link } from 'react-router-dom'
import './Home.css'

export default function Home() {
  return (
    <div className="home">
      <div className="home-hero">
        <h1>Mathe im Alltag</h1>
        <p className="home-subtitle">
          Lerne Mathematik anhand echter Situationen — Zinsen, Rabatte,
          Energiekosten und mehr. Mit Punkten, Levels und Wettbewerb.
        </p>
        <div className="home-actions">
          <Link to="/register" className="btn btn-primary">Kostenlos starten</Link>
          <Link to="/login" className="btn btn-secondary">Anmelden</Link>
        </div>
      </div>

      <div className="home-features">
        <div className="feature-card">
          <span className="feature-icon">📈</span>
          <h3>Alltagsmathe</h3>
          <p>Aufgaben aus dem echten Leben — Kredit, Strom, Einkauf, Reisen</p>
        </div>
        <div className="feature-card">
          <span className="feature-icon">🏆</span>
          <h3>Punkte & Level</h3>
          <p>Sammle XP, steige auf und halte deinen Streak am Leben</p>
        </div>
        <div className="feature-card">
          <span className="feature-icon">⚔️</span>
          <h3>Rangliste</h3>
          <p>Miss dich mit anderen und klettere in der Bestenliste nach oben</p>
        </div>
      </div>
    </div>
  )
}