@extends('layouts.app')

@section('title', '15 Porte de Droite')

@section('content')
    <section class="py-5 py-xl-6"></section>

	@include('components.hero-banner', [
		'title' => 'Table d’hôte gastronomique',
		'subtitle' => 'Partagez un moment hors du temps chez Justine',
		'text' => 'Justine vous accueille à sa table pour vous faire vivre un moment convivial rare où chaque assiette est cuisinée sous vos yeux.',
		'image' => asset('img/15/COOK_170424054.jpg'),
		'imageAlt' => 'Table d’hôte secondaire',
		'imageClass' => 'ms-auto',
		'imageStyle' => 'max-width:85%; height:auto;'
	])

	@php
		$tableCardImages = config('offers.table_cards');
	@endphp

	<section class="pt-3">
		<div class="container mt-7" id="table-menus">
			<div class="card bg-antique-white m-0 p-3 p-md-4 border-round-sm">
				<h2 class="text-center text-dark mb-4 h4">Nos offres de privatisation</h2>
				<div class="row g-4">
					<div class="col-md-6">
						<div class="h-100 d-flex flex-column text-center">
						<div class="ratio ratio-4x3 d-block overflow-hidden border-round-sm w-50 mx-auto">
							<img src="{{ asset($tableCardImages['invitation'] ?? 'img/15/JUST IN COOK 170424001.png') }}" alt="Menu Invitation"
								class="w-100 h-100 object-fit-cover">
						</div>
							<div class="mt-4">
								<h2 class="text-dark mb-4 menu-duo-title">Invitation</h2>
								<p class="fw-medium mb-4 text-muted">En cinq temps</p>
								<p class="fw-semibold mb-0">110€ TTC / personne</p>
							</div>
						</div>
					</div>
					<div class="col-12 d-md-none text-center mt-4">
						<img src="{{ asset('img/logos/logo_justine_piluso_orange.svg') }}" alt="Logo Justine Piluso" style="max-width:70px;">
					</div>
					<div class="col-md-6">
						<div class="h-100 d-flex flex-column text-center">
						<div class="ratio ratio-4x3 d-block overflow-hidden border-round-sm w-50 mx-auto">
							<img src="{{ asset($tableCardImages['voyage'] ?? 'img/15/COOK_170424013.jpg') }}" alt="Menu Voyage"
								class="w-100 h-100 object-fit-cover">
						</div>
							<div class="mt-4">
								<h2 class="text-dark mb-4 menu-duo-title">Voyage</h2>
								<p class="fw-medium mb-4 text-muted">En sept temps</p>
								<p class="fw-semibold mb-0">140€ TTC / personne</p>
							</div>
						</div>
					</div>
					<div class="col-12 d-md-none text-center mt-4">
						<img src="{{ asset('img/logos/logo_justine_piluso_orange.svg') }}" alt="Logo Justine Piluso"
							style="max-width:70px;">
					</div>
				</div>
				<div class="mt-4">
					@include('shared.table-experience')
				</div>
			</div>
			</div>
		</div>
	</section>

	<section class="py-0">
        <div class="container-fluid text-center">
            <img class="text-center" src="{{ asset('img/footer.svg')}}" alt="">
        </div>
    </section>

@endsection