---
import "../styles/components/Drinks.css"

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

    <p class="note">
        Ob frisch gezapftes Pint, edler Whisky oder ein gemütliches Glas Wein – bei uns genießt du das Leben in entspannter Atmosphäre. Auch Cocktails dürfen nicht fehlen: Vieles kreieren wir selbst. 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">
            <img src="/images/MonthlyHit.png" 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">
            <img src="/images/whiskey/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
            <span class="circle-label"></span>
        </div>
        <div class="circle whiskey-circle" title="Whiskey 2">
            <img src="/images/whiskey/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
            <span class="circle-label"></span>
        </div>
        <div class="circle whiskey-circle" title="Whiskey 3">
            <img src="/images/whiskey/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
            <span class="circle-label"></span>
        </div>
    </div>
</section>