---
import { Image } from "astro:assets";
import "../styles/components/Drinks.css"
import MonthlyHit from "../assets/images/MonthlyHit.png";
import Whiskey1 from "../assets/images/whiskey/Whiskey1.png";
import Whiskey2 from "../assets/images/whiskey/Whiskey2.png";
import Whiskey3 from "../assets/images/whiskey/Whiskey3.png";

const { id } = Astro.props;
---
<section id={id} class="Drinks">
    <h2 class="title">Drinks</h2>

    <p class="note">
        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
    </p>

    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>

    <h3 class="monats-hit">Monats Hit</h3>

    <div class="mate-vodka">
        <div class="circle" title="Mate Vodka">
            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
            <span class="circle-label"></span>
        </div>
        <div>Mate Vodka</div>
    </div>

    <p class="note">
        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
    </p>

    <div class="circle-row">
        <div class="circle whiskey-circle" title="Whiskey 1">
            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
            <span class="circle-label"></span>
        </div>
        <div class="circle whiskey-circle" title="Whiskey 2">
            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
            <span class="circle-label"></span>
        </div>
        <div class="circle whiskey-circle" title="Whiskey 3">
            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
            <span class="circle-label"></span>
        </div>
    </div>
</section>