@extends('layouts.master')

@section('meta')
<title>Pension Forke - Gemütliche Zimmer an der Nordseeküste</title>
<meta name="description" content="Genießen Sie Ihren Urlaub in der Pension Forke - ruhige und komfortable Gästezimmer nur wenige Minuten von Wilhelmshaven und dem Kurort Hooksiel entfernt.">
<meta name="keywords" content="Pension Forke, Pension, Wilhelmshaven, Hooksiel, Urlaub, Nordsee, Gästezimmer, Unterkunft">

<!-- Open Graph Tags -->
<meta property="og:title" content="Pension Forke - Gemütliche Zimmer an der Nordseeküste">
<meta property="og:description" content="Genießen Sie Ihren Urlaub in der Pension Forke - ruhige und komfortable Gästezimmer nur wenige Minuten von Wilhelmshaven und dem Kurort Hooksiel entfernt.">
<meta property="og:image" content="{{ asset('images/main/entrance.JPG') }}">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:type" content="website">
@endsection

@section('content')

<style>
.room-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.feature-icon {
  transition: transform 0.3s ease;
}
.feature-icon:hover {
  transform: scale(1.1);
}
.btn-book {
  transition: all 0.3s ease;
}
.btn-book:hover, .btn-book:focus {
  background-color: #4B5563;
  outline: none;
}
.btn-book:focus {
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.5);
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}
</style>

<a class="skip-link" href="#main-content">Zum Hauptinhalt springen</a>

<div class="bg_slider" role="banner">
        <img class="bg_slider object-cover" src="{{ asset('images/main/entrance.JPG') }}" alt="Eingang der Pension Forke - Außenansicht des Gebäudes">

        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl relative flex items-center justify-center top-1/3 home_title text-center">Seeluft genießen<br>in der Pension Forke</h1>
</div>
<div class="h-screen"></div>


<main id="main-content">
<section id="ueberuns" class="bg-white md:-mt-[90px] -mt-[70px] md:px-0 px-4" aria-labelledby="ueberuns-title">
<div class="h-[80px]"></div>
<h2 id="ueberuns-title" class="sr-only">Über uns</h2>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 place-items-center gap-6">
    <x-feature-card 
        title="Pension" 
        description="Unsere Pension Forke bietet Ihnen gemütliche, modern eingerichtete Zimmer in ruhiger Lage. Mit einer vollausgestatteten Gemeinschaftsküche, kostenfreiem WLAN und kostenlosen Parkplätzen direkt vor dem Haus finden Sie hier alles für einen erholsamen Aufenthalt."
        icon="images/main/hotel-building-svgrepo-com.svg"
        :delay="0"
    />
    
    <x-feature-card 
        title="Umgebung" 
        description="Genießen Sie die perfekte Mischung aus Erholung und Aktivität. Nur wenige Minuten entfernt von der Jadestadt Wilhelmshaven und dem Kurort Hooksiel, mit direktem Zugang zu Rad- und Wanderwegen sowie kurzen Wegen zum Strand."
        icon="images/main/lighthouse-shore-svgrepo-com.svg"
        :delay="0.2"
    />
    
    <div class="sm:col-span-2 lg:col-span-1">
        <x-feature-card 
            title="Zimmer" 
            description="Unsere komfortablen Gästezimmer sind mit allem ausgestattet, was Sie für einen angenehmen Aufenthalt benötigen. Der große Frühstücksraum mit vollausgestatteter Küche lädt zum gemeinsamen Kochen und Genießen ein."
            icon="images/main/room-svgrepo-com.svg"
            :delay="0.4"
        />
    </div>
</div>
</section>

<section id="galerie" class="bg-white" aria-labelledby="galerie-title">
    <div class="h-[80px]"></div>

    @php
    $images = [
        ['src' => 'images/main/spacer/trenn1.JPG', 'alt' => 'Pension Forke - Außenansicht im Sonnenlicht'],
        ['src' => 'images/main/spacer/trenn2.JPG', 'alt' => 'Pension Forke - Umgebung mit Blick auf die Küste'],
        ['src' => 'images/main/spacer/trenn3.JPG', 'alt' => 'Pension Forke - Gepflegter Garten mit Sitzgelegenheiten'],
        ['src' => 'images/main/spacer/trenn4.JPG', 'alt' => 'Pension Forke - Strandpromenade in der Nähe'],
        ['src' => 'images/main/entrance2.JPG', 'alt' => 'Pension Forke - Eingangsbereich mit Dekoration']
    ];
    @endphp

    <x-image-gallery :images="$images" />
</section>

<section id="rooms" class="bg-gray-50 px-4 md:px-8 py-16" aria-labelledby="rooms-title">
<div class="container mx-auto max-w-7xl">
    <h2 id="rooms-title" class="text_head text-center mb-8 fade-in">Unsere Zimmer</h2>
    <div class="text_normal text-center mt-4 mb-12 fade-in max-w-3xl mx-auto">
        Wohnen Sie in aller Ruhe in unseren gemütlichen und komfortablen Gästezimmern. 
        In dem großen Frühstücksraum lädt eine vollausgestattete Küche zum Selbstversorgen ein.
    </div>

    <div class="grid lg:grid-cols-2 grid-cols-1 justify-center place-items-center mx-auto gap-8 lg:gap-10">
        @foreach ($rooms as $room)
            <x-room-card :room="$room" :index="$loop->index" />
        @endforeach
    </div>
</div>
</section>

<!-- FAQ Section -->
<section id="faq" class="bg-white px-4 md:px-8 py-16" aria-labelledby="faq-title">
    <div class="container mx-auto max-w-4xl">
        <h2 id="faq-title" class="text_head text-center mb-12 fade-in">Häufig gestellte Fragen</h2>
        
        <div class="space-y-4">
            <!-- Check-in/Check-out -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
                <button class="w-full px-6 py-4 text-left focus:outline-none" onclick="toggleFAQ(this)">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-800">Check-in & Check-out</h3>
                        <svg class="w-6 h-6 text-gray-500 transform transition-transform duration-300" 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"></path>
                        </svg>
                    </div>
                </button>
                <div class="px-6 pb-4 hidden">
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700">Check-in</h4>
                            <p class="text-gray-600 mt-2">Anreise ist ab 15:00 Uhr möglich. Sollte Ihr Zimmer früher bezugsfertig sein, können Sie auch vorher einchecken.</p>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700">Check-out</h4>
                            <p class="text-gray-600 mt-2">Bitte räumen Sie Ihr Zimmer bis 10:00 Uhr am Abreisetag.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stornierung -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
                <button class="w-full px-6 py-4 text-left focus:outline-none" onclick="toggleFAQ(this)">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-800">Stornierungsbedingungen</h3>
                        <svg class="w-6 h-6 text-gray-500 transform transition-transform duration-300" 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"></path>
                        </svg>
                    </div>
                </button>
                <div class="px-6 pb-4 hidden">
                    <div class="space-y-4">
                        <p class="text-gray-600">Stornierungen müssen schriftlich erfolgen. Die Stornierungsgebühren sind wie folgt gestaffelt:</p>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>30. bis 15. Tag vor Anreise: 20% des Gesamtpreises</li>
                            <li>14. bis 8. Tag vor Anreise: 50% des Gesamtpreises</li>
                            <li>7. bis 3. Tag vor Anreise: 70% des Gesamtpreises</li>
                            <li>Innerhalb von 48 Stunden vor Anreise: 80% des Gesamtpreises</li>
                            <li>Bei Nichtanreise: 100% des Gesamtpreises</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Haustiere -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
                <button class="w-full px-6 py-4 text-left focus:outline-none" onclick="toggleFAQ(this)">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-800">Haustiere</h3>
                        <svg class="w-6 h-6 text-gray-500 transform transition-transform duration-300" 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"></path>
                        </svg>
                    </div>
                </button>
                <div class="px-6 pb-4 hidden">
                    <p class="text-gray-600">Haustiere sind in unserer Pension leider nicht erlaubt.</p>
                </div>
            </div>

            <!-- Parkplätze -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
                <button class="w-full px-6 py-4 text-left focus:outline-none" onclick="toggleFAQ(this)">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-800">Parkplätze</h3>
                        <svg class="w-6 h-6 text-gray-500 transform transition-transform duration-300" 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"></path>
                        </svg>
                    </div>
                </button>
                <div class="px-6 pb-4 hidden">
                    <p class="text-gray-600">Kostenfreie Parkplätze stehen direkt vor dem Haus zur Verfügung.</p>
                </div>
            </div>

            <!-- Bezahlmodalitäten -->
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-300">
                <button class="w-full px-6 py-4 text-left focus:outline-none" onclick="toggleFAQ(this)">
                    <div class="flex justify-between items-center">
                        <h3 class="text-xl font-semibold text-gray-800">Bezahlmodalitäten</h3>
                        <svg class="w-6 h-6 text-gray-500 transform transition-transform duration-300" 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"></path>
                        </svg>
                    </div>
                </button>
                <div class="px-6 pb-4 hidden">
                    <div class="space-y-4">
                        <p class="text-gray-600">Der gesamte Rechnungsbetrag ist spätestens am Tage der Abreise zu zahlen.</p>
                        <p class="text-gray-600">Wir akzeptieren Barzahlung und EC-Kartenzahlung.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Aktivitäten Section -->
<section id="aktivitaeten" class="bg-gray-50 px-4 md:px-8 py-16" aria-labelledby="aktivitaeten-title">
    <div class="container mx-auto max-w-7xl">
        <h2 id="aktivitaeten-title" class="text_head text-center mb-8 fade-in">Aktivitäten in der Umgebung</h2>
        
        <div class="grid md:grid-cols-2 gap-8">
            <!-- Wilhelmshaven -->
            <div class="bg-white rounded-lg p-6 shadow-sm">
                <h3 class="text-xl font-semibold text-gray-800 mb-4">Wilhelmshaven</h3>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700">Maritime Attraktionen</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Deutsches Marinemuseum</li>
                            <li>Küstenmuseum Wilhelmshaven</li>
                            <li>Aquarium Wilhelmshaven</li>
                            <li>JadeWeserPort InfoCenter</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700">Natur & Erholung</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Kaiser-Wilhelm-Brücke</li>
                            <li>Botanischer Garten</li>
                            <li>Stadtpark</li>
                            <li>Strandpromenade</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700">Kultur & Shopping</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Kulturzentrum Pumpwerk</li>
                            <li>Stadttheater Wilhelmshaven</li>
                            <li>Einkaufszentrum "City Center"</li>
                            <li>Fischmarkt am Südstrand</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Hooksiel -->
            <div class="bg-white rounded-lg p-6 shadow-sm">
                <h3 class="text-xl font-semibold text-gray-800 mb-4">Hooksiel</h3>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700">Strand & Meer</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Hooksieler Strand</li>
                            <li>Strandpromenade</li>
                            <li>Hafen Hooksiel</li>
                            <li>Wattwanderungen</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700">Aktivitäten</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Kurpark mit Spielplatz</li>
                            <li>Minigolf</li>
                            <li>Radwege entlang der Küste</li>
                            <li>Surfen und Kitesurfen</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700">Gastronomie</h4>
                        <ul class="list-disc pl-5 text-gray-600 space-y-2">
                            <li>Fischrestaurants</li>
                            <li>Strandcafés</li>
                            <li>Eisdielen</li>
                            <li>Kneipen und Bars</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</main>

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/custom.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('js/splide-init.js') }}"></script>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "LodgingBusiness",
        "name": "Pension Forke",
        "description": "Gemütliche Pension in der Nähe von Wilhelmshaven und dem Kurort Hooksiel",
        "image": "{{ asset('images/main/entrance.JPG') }}",
        "url": "{{ url('/') }}",
        "telephone": "04423 - 2305",
        "email": "info@pension-forke.com",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "Hauptstraße 49",
            "addressLocality": "Wilhelmshaven",
            "postalCode": "26388",
            "addressCountry": "DE"
        },
        "priceRange": "€€",
        "amenityFeature": [
            {
                "@type": "LocationFeatureSpecification",
                "name": "WLAN",
                "value": true
            },
            {
                "@type": "LocationFeatureSpecification",
                "name": "TV",
                "value": true
            },
            {
                "@type": "LocationFeatureSpecification",
                "name": "Küche",
                "value": true
            }
        ]
    }
    </script>
    <script>
    function toggleFAQ(button) {
        const content = button.nextElementSibling;
        const icon = button.querySelector('svg');
        
        // Toggle content visibility
        content.classList.toggle('hidden');
        
        // Rotate icon
        icon.classList.toggle('rotate-180');
        
        // Close other FAQs
        const allFAQs = document.querySelectorAll('#faq button');
        allFAQs.forEach(faq => {
            if (faq !== button) {
                const otherContent = faq.nextElementSibling;
                const otherIcon = faq.querySelector('svg');
                otherContent.classList.add('hidden');
                otherIcon.classList.remove('rotate-180');
            }
        });
    }
    </script>
@endpush
@stop