<!-- Menu Section -->
<div id="menu-section" class="mt-8 sm:mt-16">
    <h2 class="text-2xl sm:text-3xl font-bold mb-4 sm:mb-8">{{ i18n "menu" }}</h2>

    <!-- Mobile Horizontal Scroll -->
    <div class="md:hidden overflow-x-auto whitespace-nowrap pb-2 mb-4 scrollbar-hide">
        <div class="inline-flex gap-2">
            {{ $categories := .Site.Data.menu.categories }}
            {{ $sortedCategories := sort $categories "sort_order" "asc" }}
            {{ range $sortedCategories }}
                <button 
                    data-tab="{{ .id }}" 
                    class="tab-button inline-block px-3 py-1.5 text-sm rounded-full transition-colors duration-200 whitespace-nowrap
                           {{ if eq .id "pizzas" }}
                               bg-pizza-red text-white
                           {{ else }}
                               bg-gray-200 dark:bg-pizza-darker text-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-pizza-dark
                           {{ end }}">
                    {{ .name }}
                </button>
            {{ end }}
        </div>
    </div>

    <!-- Desktop Menu Tabs -->
    <div class="hidden md:flex flex-wrap gap-4 mb-8">
        {{ $categories := .Site.Data.menu.categories }}
        {{ $sortedCategories := sort $categories "sort_order" "asc" }}
        {{ range $sortedCategories }}
            <button 
                data-tab="{{ .id }}" 
                class="tab-button px-8 py-2 text-base rounded-full transition-colors duration-200
                       {{ if eq .id "pizzas" }}
                           bg-pizza-red text-white
                       {{ else }}
                           bg-gray-200 dark:bg-pizza-darker text-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-pizza-dark
                       {{ end }}">
                {{ .name }}
            </button>
        {{ end }}
    </div>

    <!-- Price Legend -->
    <div class="legend-container fixed bottom-4 right-4 z-50 group">
        <!-- The actual legend -->
        <div class="price-legend bg-white/90 dark:bg-pizza-dark/90 backdrop-blur-sm shadow-lg rounded-lg p-4 
                    transition-all duration-300 group-hover:opacity-0 group-hover:translate-y-1">
            <div class="flex flex-col space-y-3">
                <div class="flex items-center">
                    <span class="w-3 h-3 bg-status-green rounded-full mr-2 animate-pulse"></span>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Abholung</span>
                </div>
                <div class="flex items-center">
                    <span class="w-3 h-3 bg-status-red rounded-full mr-2 animate-pulse"></span>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Lieferung</span>
                </div>
            </div>
        </div>

        <!-- Info icon -->
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 
                    transition-all duration-300 group-hover:-translate-y-1";
                    title="Zeigt die Preise für Abholung und Lieferung">
            <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
    </div>

    <!-- Menu Content -->
    {{ $categories := .Site.Data.menu.categories }}
    {{ $sortedCategories := sort $categories "sort_order" "asc" }}
    {{ range $sortedCategories }}
        <div id="{{ .id }}-content" class="menu-content {{ if ne .id "pizzas" }}hidden{{ end }} space-y-4 sm:space-y-6">
            {{ if eq .id "pizzas" }}
                {{ range .price_groups }}
                    <div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
                        <div class="flex justify-between items-center mb-8 cursor-pointer price-group-header">
                            <h3 class="text-xl font-bold">{{ .name }}</h3>
                            <svg class="w-6 h-6 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>

                        <div class="price-group-content hidden">
                            <!-- Size Options -->
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                                {{ range .prices }}
                                    <div class="text-center">
                                        <h4 class="font-medium mb-2">{{ .size }}</h4>
                                        <div class="flex justify-center space-x-4">
                                            <span class="text-emerald-400">{{ printf "%.2f" .pickup }}€</span>
                                            <span class="text-pizza-red">/</span>
                                            <span class="text-pizza-red">{{ printf "%.2f" .delivery }}€</span>
                                        </div>
                                    </div>
                                {{ end }}
                            </div>

                            <!-- Menu Items -->
                            <div class="space-y-4 mt-6 border-t border-gray-200 dark:border-pizza-dark pt-6">
                                {{ range .items }}
                                    <div class="flex justify-between">
                                        <div>
                                            <h4 class="font-medium">{{ .name }}</h4>
                                            <p class="text-gray-600 dark:text-pizza-gray text-sm">{{ .description }}</p>
                                        </div>
                                    </div>
                                {{ end }}
                            </div>
                        </div>
                    </div>
                {{ end }}
            {{ else if eq .id "menus" }}
                {{ range .price_groups }}
                    <div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-bold">{{ .name }}</h3>
                        </div>
                        
                        <!-- Menu Description -->
                        <p class="text-gray-600 dark:text-pizza-gray mb-4">{{ .description }}</p>
                        
                        <!-- Included Items -->
                        <ul class="list-disc list-inside text-gray-600 dark:text-pizza-gray mb-6 space-y-2">
                            {{ range .included }}
                                <li>{{ . }}</li>
                            {{ end }}
                        </ul>

                        <!-- Price Options -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 border-t border-gray-200 dark:border-pizza-dark pt-4">
                            {{ range .prices }}
                                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-pizza-dark last:border-0">
                                    <span class="font-medium">{{ .base }}</span>
                                    <div class="font-medium">
                                        {{ if and (isset . "pickup") (isset . "delivery") }}
                                            <span class="text-status-green">{{ printf "%.2f" .pickup }}€</span>
                                            <span class="text-gray-400 mx-1">/</span>
                                            <span class="text-status-red">{{ printf "%.2f" .delivery }}€</span>
                                        {{ else }}
                                            <span class="text-gray-600 dark:text-gray-400">{{ printf "%.2f" .price }}€</span>
                                        {{ end }}
                                    </div>
                                </div>
                            {{ end }}
                        </div>
                    </div>
                {{ end }}
            {{ else }}
                <div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
                    <div class="space-y-4">
                        {{ range .items }}
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-medium">{{ .name }}</h4>
                                    <p class="text-gray-600 dark:text-pizza-gray text-sm">{{ .description }}</p>
                                </div>
                                <div class="font-medium">
                                    {{ if and (isset . "pickup") (isset . "delivery") }}
                                        <span class="text-status-green">{{ printf "%.2f" .pickup }}€</span>
                                        <span class="text-gray-400 mx-1">/</span>
                                        <span class="text-status-red">{{ printf "%.2f" .delivery }}€</span>
                                    {{ else if and (isset . "price_small") (isset . "price_large") }}
                                    <span class="text-gray-600 dark:text-gray-400 text-sm">{{ i18n "portion_small"}}: {{ printf "%.2f" .price_small }}€</span>
                                    <span class="text-gray-600 mx-1">/</span>
                                    <span class="text-gray-600 dark:text-gray-400 text-base">{{ i18n "portion_large"}}: {{ printf "%.2f" .price_large }}€</span>
                                    {{ else }}
                                        <span class="text-gray-600 dark:text-gray-400">{{ printf "%.2f" .price }}€</span>
                                    {{ end }}
                                </div>
                            </div>
                        {{ end }}
                    </div>
                </div>
            {{ end }}
        </div>
    {{ end }}
</div> 