export default function StartScreen({ onStart }) {
  return (
    <main className="start-screen">
      <div className="start-grid" aria-hidden="true" />
      <div className="start-shell">
        <div className="start-terminal">
          <span>andre@kursprojekt:~$ ./kernel-panic</span>
          <span>scan: 9 modules missing</span>
          <span className="start-warning">status: SYSTEM NICHT BOOTFÄHIG</span>
        </div>

        <p className="project-label">LPIC-1 // INTERAKTIVE PROJEKTARBEIT</p>
        <h1>
          KERNEL
          <br />
          <em>PANIC</em>
        </h1>
        <p className="start-lead">
          Baue dir ein Linux. Zehn Kapitel, hundert Fragen und zwei Spielmodi
          führen von der Hardware bis zum sicheren Systembetrieb.
        </p>

        <div className="start-specs">
          <div>
            <strong>10 × 10</strong>
            <span>Fragenpool</span>
          </div>
          <div>
            <strong>101→102</strong>
            <span>LPIC-Schwerpunkt</span>
          </div>
          <div>
            <strong>2</strong>
            <span>Spielmodi</span>
          </div>
        </div>

        <div className="mode-selection" aria-label="Spielmodus wählen">
          <button
            type="button"
            className="start-button"
            onClick={() => onStart("course")}
          >
            <span>
              <strong>Kurslauf starten</strong>
              <small>30 Fragen · 3 zufällig je Kapitel · ca. 30 Minuten</small>
            </span>
            <span aria-hidden="true">↗</span>
          </button>
          <button
            type="button"
            className="start-button secondary"
            onClick={() => onStart("learning")}
          >
            <span>
              <strong>Lernmodus starten</strong>
              <small>alle 100 Fragen · vollständiger Themencheck</small>
            </span>
            <span aria-hidden="true">∞</span>
          </button>
        </div>

        <p className="start-note">
          Kein Login · kein Tracking · keine echte Shell · Fortschritt nur in
          diesem Browser
        </p>
        <div className="start-resources">
          <a
            href="/kernel-panic/kernel-panic-projektarbeit.pdf"
            target="_blank"
          >
            Projektdokumentation
          </a>
          <a
            href="/kernel-panic/kernel-panic-lpic-projekt.zip"
            download
          >
            Projekt als ZIP
          </a>
          <a
            href="https://codeberg.org/andremadstop/lpic-kernel-panic"
            target="_blank"
            rel="noreferrer"
          >
            Quellcode · MIT
          </a>
        </div>
      </div>
    </main>
  );
}
