---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import ImageCarousel from '@app/website/features/ImageCarousel.svelte';
import Pixelblock1 from '@assets/img/features/pixelblocks/pixelblocks1.webp';
import Pixelblock2 from '@assets/img/features/pixelblocks/pixelblocks2.webp';
import Pixelblock3 from '@assets/img/features/pixelblocks/pixelblocks3.webp';
import Pixelblock4 from '@assets/img/features/pixelblocks/pixelblocks4.webp';
import PotionOfSniffer1 from '@assets/img/features/potionOfSniffer/potionOfSniffer1.webp';
import PotionOfSniffer2 from '@assets/img/features/potionOfSniffer/potionOfSniffer2.webp';
import PotionOfSniffer3 from '@assets/img/features/potionOfSniffer/potionOfSniffer3.webp';
import Voicemod1 from '@assets/img/features/voicechat/voicechat1.webp';
import Voicemod2 from '@assets/img/features/voicechat/voicechat2.webp';
import Bloodmoon1 from '@assets/img/features/bloodmoon/bloodmoon1.webp';
import Event1 from '@assets/img/features/events/events1.webp';
import Event2 from '@assets/img/features/events/events2.webp';
import Event3 from '@assets/img/features/events/events3.webp';
import Settings1 from '@assets/img/features/settings/settings1.webp';
import WanderingTraderMiniblock1 from '@assets/img/features/wanderingTraderMiniblocks/wanderingTraderMiniblocks1.webp';
import WanderingTraderMiniblock2 from '@assets/img/features/wanderingTraderMiniblocks/wanderingTraderMiniblocks2.webp';
import MinecartBlock1 from '@assets/img/features/minecartBlocks/minecraftBlocks1.webp';
import RecoveryCompass1 from '@assets/img/features/recoveryCompass/recoveryCompass1.webp';
import RecoveryCompassIcon1 from '@assets/img/features/recoveryCompass/recoveryCompassIcon1.webp';
import PvpMode1 from '@assets/img/features/pvpMode/pvpMode1.webp';

const features = [
  {
    name: 'Pixelblock',
    details: [
      `<p>Erstelle deinen eigenen Block im Miniformat. Du kannst einen leeren Block craften, den du anschließend frei
nach deinen Vorstellungen mit Inhalt füllen kannst! Ob die letzten Details zu deinem Bauwerk oder (sehr teure) vertikale
Stufen – pure Freiheit!</p>`,
      `<p>Leider sind Pixelblöcke für Bedrock-Spieler nicht nutzbar und auch nicht sichtbar!</p>`
    ],
    images: [{ path: Pixelblock1.src }, { path: Pixelblock2.src }, { path: Pixelblock3.src }, { path: Pixelblock4.src }]
  },
  {
    name: 'Trank des Schnüfflers',
    details: [
      `<p> Füttere einen Schnüffler mit Zucker. Er wird verrückt und rennt umher – und explodiert! Dabei droppt er aber
einen Trank, den Trank des Schnüfflers. Trink ihn, und du kannst für eine kurze Zeit alle Erze in deiner Umgebung
erschnüffeln!</p>`
    ],
    images: [{ path: PotionOfSniffer1.src }, { path: PotionOfSniffer2.src }, { path: PotionOfSniffer3.src }]
  },
  {
    name: 'Voicemod',
    details: [
      `<p>Auf unserem Server ist Simple-Voice-Chat verfügbar. Damit kannst du dich mit anderen Spielern im Spiel
unterhalten. Das Nutzen ist natürlich optional. Für Bedrock-Spieler ist Simple-Voice-Chat leider nicht verfügbar.</p>`,
      `<p>Tutorial für die Einrichtung:
<a class="link" href="https://www.youtube.com/watch?v=GQdEnX2Dkh4" target="_blank">https://www.youtube.com/watch?v=GQdEnX2Dkh4</a></p>`
    ],
    images: [{ path: Voicemod1.src }, { path: Voicemod2.src }]
  },
  {
    name: 'Blutmond',
    details: [
      `<p>Alle dreißig ingame-Tage solltest du nachts auf der Hut sein, denn die Monster sind in dieser Nacht deutlich
stärker als üblich, droppen aber auch besseren Loot.</p>`
    ],
    images: [{ path: Bloodmoon1.src }]
  },
  {
    name: 'Events',
    details: [
      `<p> Abends, meist gegen 18 Uhr, finden gelegentlich Events statt, bei denen du Items gewinnen kannst und in
kleinen Minispielen gegen deine Mitspieler antrittst. Die genauen Abläufe siehst du, wenn du abends auf dem Server
bist.</p>`,
      `<p>Du kannst dich auf neue Minispiele freuen!</p>`
    ],
    images: [{ path: Event1.src }, { path: Event2.src }, { path: Event3.src }]
  },
  {
    name: 'Erweiterte Spieleinstellungen',
    details: [
      `<p>Mit <code>/settings</code> erreichst du einige Quality-of-Life-Features welche dein Spielerlebnis verbessern.
Zum Beispiel das automatische Öffnen von Doppeltüren bis hin zum Ausblenden der Beitrittsnachrichten im Chat anderer
Spieler.</p>`
    ],
    images: [{ path: Settings1.src }]
  },
  {
    name: 'Miniblöcke des Wandernden Händlers',
    details: [
      `<p>Der wandernde Händler verkauft neben seinen normalen Items auch miniversionen von Blöcken, die sich als
Dekoration hervorragend eignen!</p>`
    ],
    images: [{ path: WanderingTraderMiniblock1.src }, { path: WanderingTraderMiniblock2.src }]
  },
  {
    name: 'Platzierbare Blöcke in Minecarts',
    details: [
      `<p>Du kannst jeden Vollen Block in ein leeres Minecart platzieren. Das ist zwar deutlich ineffizienter als ein
Kistenminecart, hat aber deutlich mehr Stil!</p>`
    ],
    images: [{ path: MinecartBlock1.src }]
  },
  {
    name: 'Recoverycompass bleiben nach Toden im Inventar',
    details: [
      `<p>Finde schneller zu deinem Todespunkt nach deinem Tod zurück – der Recoverykompass bleib im Inventar. Es ist
deine Entscheidung, ob du den Inventarplatz dafür opferst oder nicht. Zum Start erhältst du einen for Free!</p>`
    ],
    images: [{ path: RecoveryCompass1.src }],
    icons: [{ path: RecoveryCompassIcon1.src }]
  },
  {
    name: 'PVP-Modus',
    details: [
      `<p> Du suchst den Nervenkitzel? Im PVP-Modus (ehemals Vogelfrei) dürfen dich alle anderen Spieler, welche
ebenfalls im PVP-Modus sind angreifen und töten. Deine Items müssen nicht zurückerstattet werden. Bauwerke und Kisten
sind aber weiterhin geschützt. Aktivieren kannst du den Modus mit <code>/pvp</code>.</p>`
    ],
    images: [{ path: PvpMode1.src }]
  }
];
---

<WebsiteLayout title="Features">
  <div class="mx-4 my-6 sm:mx-12 sm:my-12 xl:mx-32 2xl:mx-64">
    <h1 class="text-3xl lg:text-5xl mb-16 text-center">Features</h1>
    <div class="space-y-8 md:space-y-12">
      {
        features.map((feature, i) => (
          <div
            class="flex flex-col gap-y-3 sm:gap-y-6 md:gap-x-6 lg:gap-x-18 xl:gap-x-24 2xl:gap-x-30 px-8 py-10 bg-base-200 rounded"
            class:list={{ 'md:flex-row': i % 2 == 0, 'md:flex-row-reverse': i % 2 != 0 }}
          >
            <div class="md:w-5/12 flex flex-col">
              <h3 class="text-xl mb-4 underline">{feature.name}</h3>
              <ol class="list-disc space-y-2 ml-3">
                {feature.details.map((detail) => (
                  <li class="text-base/7" set:html={detail} />
                ))}
              </ol>
              {feature.icons && (
                <div class="h-full flex justify-around items-center">
                  {feature.icons.map((icon) => (
                    <img class="w-16 h-16 mr-72 mb-25" src={icon.path} alt={icon.path} />
                  ))}
                </div>
              )}
            </div>
            <div class="md:w-7/12">
              <ImageCarousel images={feature.images} client:idle />
            </div>
          </div>
        ))
      }
    </div>
  </div>
</WebsiteLayout>