import { CardView } from "./CardView";
import { DECK } from "./cards";
import { Game } from "./Game";

export default function Home() {
  return (
    <main>
      <header className="hero">
        <p className="kicker">Commander-Format · Bundestagsedition · Nicht turnierlegal</p>
        <h1>
          Merz <span>leck</span> Eier
        </h1>
        <p className="sub">
          Das einzige Magic-Deck, in dem der Commander mit 1.000.000 Widerstandskraft startet und trotzdem jede
          Abstimmung verliert.
        </p>
      </header>

      <Game />

      <section>
        <h2>Die komplette Decklist</h2>
        <div className="gallery">
          {DECK.map((c) => (
            <CardView key={c.name} card={c} />
          ))}
        </div>
      </section>

      <section className="rules">
        <h2>Regeln</h2>
        <ol>
          <li>Merz startet mit 25% Umfragewerten. Bring sie auf 0.</li>
          <li>Jede gewirkte Karte kostet ihn Zustimmung. „Leck Eier“ kostet ihn 10%.</li>
          <li>Merz darf keinen Mulligan nehmen. Das darfst nur du.</li>
          <li>Bierdeckel zählen nicht als Steuererklärung (außer für Merz).</li>
        </ol>
      </section>

      <footer>
        Satire. Keine echten Zitate außer denen, die er wirklich gesagt hat. Magic: The Gathering ist eine Marke von
        Wizards of the Coast — die haben damit nichts zu tun und wollen es auch nicht.
      </footer>
    </main>
  );
}