{{ define "main" }}
<div class="min-h-screen">
    <!-- Hero Section with Background -->
    <div class="relative h-[40vh] mb-16">
        <div class="absolute inset-0 bg-[url('/images/pizza-hero.jpg')] bg-cover bg-center">
            <div class="absolute inset-0 bg-black/50"></div>
        </div>
        <div class="relative container mx-auto h-full flex items-center justify-center px-4">
            <div class="text-center text-white space-y-4">
                <h1 class="text-5xl md:text-6xl font-bold">{{ .Site.Data.about.hero.title }}</h1>
                <p class="text-xl md:text-2xl max-w-2xl mx-auto">{{ .Site.Data.about.hero.description }}</p>
            </div>
        </div>
    </div>

    <!-- Story Section -->
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto space-y-16">
            <!-- Our Story -->
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div class="space-y-6">
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">{{ .Site.Data.about.story.title }}</h2>
                    <div class="prose dark:prose-invert">
                        <p class="text-lg text-gray-600 dark:text-gray-300">
                            {{ .Site.Data.about.story.content }}
                        </p>
                    </div>
                    <ul class="space-y-3">
                        {{ range .Site.Data.about.story.features }}
                        <li class="flex items-center space-x-3 text-gray-600 dark:text-gray-300">
                            <svg class="w-5 h-5 text-pizza-red" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
                            </svg>
                            <span>{{ . }}</span>
                        </li>
                        {{ end }}
                    </ul>
                </div>
                <div class="relative h-80 rounded-xl overflow-hidden">
                    <img src="/images/pizza-innen.webp" alt="Restaurant Interior" 
                         class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>

            <!-- Team Section -->
            <div class="space-y-8">
                <div class="text-center">
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">{{ .Site.Data.about.team.title }}</h2>
                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                        {{ .Site.Data.about.team.description }}
                    </p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {{ range .Site.Data.about.team.members }}
                    <div class="group">
                        <div class="relative overflow-hidden rounded-xl aspect-square mb-4">
                            <img src="/images/{{ .image }}" alt="{{ .name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                        </div>
                        <div class="text-center">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ .name }}</h3>
                            <p class="text-pizza-red">{{ .role }}</p>
                            <p class="mt-2 text-gray-600 dark:text-gray-300">
                                {{ .description }}
                            </p>
                        </div>
                    </div>
                    {{ end }}
                </div>
            </div>

            <!-- Contact Section -->
            <div class="bg-white/5 dark:bg-pizza-darker/5 backdrop-blur-sm rounded-xl p-8 shadow-lg">
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="space-y-4">
                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white">{{ .Site.Data.about.contact.title }}</h3>
                        <div class="space-y-2 text-gray-600 dark:text-gray-300">
                            <p class="flex items-center">
                                <svg class="w-5 h-5 mr-2 text-pizza-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                {{ .Site.Data.about.contact.address }}
                            </p>
                            <p class="flex items-center">
                                <svg class="w-5 h-5 mr-2 text-pizza-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                          d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                </svg>
                                {{ .Site.Params.contact.phone }}
                            </p>
                        </div>
                    </div>
                    <div class="h-64 rounded-xl overflow-hidden">
                        <img src="/images/pizza-aussen.webp" alt="Restaurant Exterior" 
                             class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}