---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import Scroll from '@app/website/index/Scroll.svelte';
import Teams from '@app/website/index/Teams.svelte';
import Countdown from '@app/website/index/Countdown.svelte';
import Varo from '@assets/img/varo.webp';
import Background from '@assets/img/background.webp';
import { START_DATE } from 'astro:env/server';
import { getSetting, SettingKey } from '@util/settings';
import { db } from '@db/database.ts';

const teams = await db.getTeams({});
const deaths = await db.getDeaths({});

const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);

const information = [
  {
    title: 'Was ist Varo?',
    description:
      'Varo ist ein spannendes Vanilla-Minecraft-PvP-Projekt, bei dem Zweier-Teams im Kampf ums Überleben gegeneinander antreten. Wer stirbt – ganz gleich auf welche Weise – scheidet endgültig aus. Das letzte verbleibende Team gewinnt Varo!'
  },
  {
    title: 'Warum Varo?',
    description:
      'Varo 5 ist unser erstes großes Sommerprojekt – ein PvP-Format, das für frische Abwechslung sorgt und die Wartezeit auf das nächsten CraftAttack verkürzt.\n' +
      'Tatsächlich ist es schon das fünfte Varo – auch wenn das viele überraschen dürfte.\n' +
      'Zum ersten Mal veranstalten wir es jedoch in dieser offenen Form für alle Teilnehmenden.\n' +
      'Wenn es euch gefällt, könnte Varo künftig als feste Sommerreihe weitergeführt werden.\n' +
      'Und natürlich gilt: Im Winter sehen wir uns wie gewohnt bei CraftAttack wieder!'
  },
  {
    title: 'Wer kann mitspielen?',
    description:
      'Alle Spieler mit einem Minecraft Java-Account sind herzlich eingeladen, mitzumachen. Wenn du dabei sein willst, brauchst du nur einen Teampartner – gemeinsam könnt ihr euch direkt hier auf unserer Website anmelden.'
  }
];
---

<WebsiteLayout title="Varo 5">
  <div class="bg-base-200 flex flex-col min-h-screen relative">
    <div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full">
      <div class="flex flex-col w-full xl:h-3/4 my-10">
        <div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
          <div class="w-2/3 m-auto">
            <img src={Varo.src} alt="Varo 5" />
          </div>
          <div>
            <div class="divider"></div>
            <div class="flex flex-col md:flex-row xl:flex-col gap-5">
              {
                information.map((info) => (
                  <div>
                    <h4 class="mb-1 font-bold">{info.title}</h4>
                    <p>{info.description}</p>
                  </div>
                ))
              }
            </div>
            <div class="divider"></div>
          </div>
          <div class="flex justify-center">
            <a class="btn btn-outline btn-accent hover:bg-white" href="signup"
              >{signupEnabled ? 'Jetzt registrieren' : 'Infos zur Anmeldung'}</a
            >
          </div>
        </div>
      </div>
    </div>
    <div
      class="hidden xl:block absolute top-0 left-0 h-full w-full"
      style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
    >
      <img src={Background.src} alt="" loading="lazy" width="100%" height="100%" />
    </div>
    <div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
      <Countdown end={Date.parse(START_DATE)} client:load />
    </div>
  </div>

  <div class="fixed bottom-0 sm:right-0 m-5 hidden sm:block">
    <Scroll href="#teams" client:load />
  </div>

  <div class="bg-base-100 flex flex-col space-y-10 items-center py-10">
    <h2 id="teams" class="text-4xl">Teams</h2>
    <Teams {teams} {deaths} />
  </div>
</WebsiteLayout>