interface Props {
  onClose: () => void;
}

export default function RulesModal({ onClose }: Props) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 p-4 overflow-y-auto"
      onClick={onClose}
    >
      <div
        className="relative bg-slate-900 rounded-2xl w-full max-w-lg my-6 p-6 text-sm leading-relaxed"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-white text-xl leading-none"
        >
          ✕
        </button>

        <h1 className="text-xl font-bold mb-4">Pravidlá hry Bridžik</h1>

        <Section title="Karty">
          <p>Hrá sa s <b>32-kartovým balíčkom</b> sedmových (slovenských/nemeckých) kariet.</p>
          <p className="mt-2"><b>Farby:</b> červeň (♥), zeleň (♠), žaluď (♣), guľa (♦)</p>
          <p className="mt-1 text-red-400 font-semibold">Červeň je vždy tromf (adut) — prebíja každú inú farbu.</p>
          <p className="mt-2"><b>Hodnoty</b> od najnižšej: VII · VIII · IX · X · J · Q · K · A</p>
        </Section>

        <Section title="Štruktúra hry">
          <p>4 hráči · 4 série · 8 kôl v sérii</p>
          <p className="mt-1">V každom kole dostane každý hráč <b>8 − číslo_kola</b> kariet (8 až 1).</p>
          <p className="mt-1">Sériu otvára hráč s rovnakým číslom ako séria. Každé ďalšie kolo posúva začínajúceho hráča o jedného.</p>
        </Section>

        <Section title="Priebeh kola">
          <p className="font-semibold">1. Tipovanie</p>
          <p className="mt-1">Každý hráč tipuje, koľko kopiek v kole získa (0 až počet kopiek).</p>
          <p className="mt-1 text-yellow-300">Pravidlo bridžika: súčet tipov nesmie presne rovnať počtu kopiek v kole — posledný tipujúci nemôže zadať tip, ktorý by toto spôsobil.</p>

          <p className="font-semibold mt-3">2. Hranie kariet</p>
          <p className="mt-1">Prvú kopku otvára hráč s <b>najvyšším tipom</b>. Každú ďalšiu otvára víťaz predchádzajúcej kopky.</p>

          <p className="font-semibold mt-3">Povinnosť priznať farbu:</p>
          <ol className="mt-1 list-decimal list-inside space-y-1">
            <li>Máš farbu vynesenej karty → <b>musíš ju zahrať.</b></li>
            <li>Nemáš ju, ale máš červeň → <b>musíš zahrať červeň.</b></li>
            <li>Nemáš ani jedno → môžeš zahrať <b>ľubovoľnú</b> kartu.</li>
          </ol>

          <p className="font-semibold mt-3">Víťaz kopky:</p>
          <ul className="mt-1 list-disc list-inside space-y-1">
            <li>Ak padla červeň → vyhráva <b>najvyššia červeň.</b></li>
            <li>Ak nie → vyhráva <b>najvyššia karta vynesenej farby.</b></li>
          </ul>
        </Section>

        <Section title="Bodovanie">
          <p>Po každom kole: ak sa tip <b>presne zhoduje</b> s počtom získaných kopiek → <b>10 + tip</b> bodov, inak <b>0</b>.</p>
          <p className="mt-1 text-gray-400">Príklad: tipoval 3, získal 3 → 13 bodov. Tipoval 3, získal 2 → 0 bodov.</p>
          <p className="mt-2">Vyhráva hráč s najvyšším celkovým súčtom po 4 sériách.</p>
        </Section>

        <button
          onClick={onClose}
          className="mt-4 w-full py-2.5 rounded-xl bg-slate-700 hover:bg-slate-600 font-semibold"
        >
          Zavrieť
        </button>
      </div>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="mb-4">
      <h2 className="font-bold text-base text-green-400 mb-1">{title}</h2>
      <div className="text-gray-200">{children}</div>
    </div>
  );
}