@extends('frontend.jpt.layout.mainlayout')


@section('content')
    <!-- === HEADER === -->
    <header>
        <h1>{{ __('excursions.title') }}</h1>
        <p>{{ __('excursions.subtitle') }}</p>
    </header>

    <!-- CONTENU PRINCIPAL -->
    <div class="container">
        <!-- MÉDINA DE TUNIS -->
        <section id="medina">
            <h2 class="section-title">{{ __('excursions.medina.title') }}</h2>
            <div class="excursion">
                <div class="excursion-image">
                    <img src="{{ URL::asset('assets/frontend/jpt/images/medina.jpg') }}" alt="Médina de Tunis">
                </div>
                <div class="excursion-content">
                    <h3 class="excursion-title">{{ __('excursions.medina.excursion_title') }}</h3>
                    <p class="excursion-description">
                        {{ __('excursions.medina.description') }}
                    </p>
                    <span class="excursion-duration">{{ __('excursions.medina.duration') }}</span>
                    {{-- <a href="#reservation" class="btn">Réserver maintenant</a> --}}
                </div>
            </div>
        </section>

        <!-- CARTHAGE & SIDI BOU SAÏD -->
        <section id="carthage">
            <h2 class="section-title">{{ __('excursions.carthage.title') }}</h2>
            <div class="excursion">
                <div class="excursion-image">
                    <img src="{{ URL::asset('assets/frontend/jpt/images/sidibousaid.jpg') }}" alt="Sidi Bou Saïd">
                </div>
                <div class="excursion-content">
                    <h3 class="excursion-title">{{ __('excursions.carthage.excursion_title') }}</h3>
                    <p class="excursion-description">
                        {{ __('excursions.carthage.description') }}
                    </p>
                    <span class="excursion-duration">{{ __('excursions.carthage.duration') }}</span>
                    {{-- <a href="#reservation" class="btn">Réserver maintenant</a> --}}
                </div>
            </div>
        </section>

        <!-- RÉSERVATION -->
        <section id="reservation">
            <h2 class="section-title">{{ __('excursions.reservation.title') }}</h2>
            <div
                style="background: var(--blanc); border-radius: 15px; padding: 40px; box-shadow: var(--ombre); text-align: center;">
                <h3 class="section-subtitle">
                    {{ __('excursions.reservation.heading') }}</h3>
                <p style="margin-bottom: 30px;">{{ __('excursions.reservation.description') }}
                </p>

                <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 30px;">
                    <div style="text-align: center;">
                        <i class="fas fa-envelope" style="font-size: 2em; color: var(--vert); margin-bottom: 10px;"></i>
                        <p style="font-weight: 600;">Email</p>
                        <p>{{ __('excursions.reservation.contact_email') }}</p>
                    </div>
                    <div style="text-align: center;">
                        <i class="fab fa-whatsapp" style="font-size: 2em; color: var(--vert); margin-bottom: 10px;"></i>
                        <p style="font-weight: 600;">WhatsApp</p>
                        <p>{{ __('excursions.reservation.contact_phone') }}</p>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

<script>
    // Script pour le menu hamburger (optionnel)
    document.addEventListener('DOMContentLoaded', function() {
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');

        if (hamburger) {
            hamburger.addEventListener('click', function() {
                navLinks.classList.toggle('active');
            });
        }

        // Fermer le menu en cliquant sur un lien
        const navItems = document.querySelectorAll('.nav-links a');
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                navLinks.classList.remove('active');
            });
        });
    });
</script>

@section('css')
    <link rel="stylesheet" href="{{ url('assets/frontend/jpt/css/style_2.css') }}" />
@endsection