@section('seo')
@include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')


<div class="destination-detail-template">
	<!-- Hero Banner Section -->
	<div class="destination-detail-banner" style="background-image: url('{{$page->cover_image->getPath()}}')">
		<h1>{{$page->title}}</h1>
	</div>

	<section class="about-section" style= "margin:0 5%;padding-bottom: 0; ">
		<div class="destination-section-heading"style="
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 1143px;
    width: 100%;
">
		        <div class="section-heading" style="margin:0;padding:0;">
            <span class="section-title">{{$page->short_title}}</span>
            <h2 class="section-main-heading">{{$page->title}}</h2>
            <p class="section-description">
                {!!$page->description!!}
            </p>
        </div>
    </section>

	<!-- Add this after the destination-detail-item div -->
	<div class="destination-detail-image-grid" style="margin-top: 20px; margin-bottom: 20px;">
		<!-- Destination Items1 -->
<style>
    .view-btn:hover {
    background-color: #10418C !important; /* dark blue on hover */
    border: none !important;
    color: white !important;
    text-decoration: none;
}
</style>
		@foreach ($activities as $activity )
		<div class="destination-detail-item">
                        <a href="{{ route('activity-detail', $activity->slug) }}">
                            <img src="{{ $activity->feature_image->getPath() }}" alt="Destination" />
				<div class="destination-detail-overlay"></div>
				<div class="destination-detail-hover-border"></div>
                            <div class="package-badge">{{ $activity->packages()->count() }} Packages</div>
				<div class="destination-detail-content">
                                <h4 class="activities-title">{{ $activity->title }}</h4>
                                <a href="{{ route('activity-detail', $activity->slug) }}" class="view-btn">View Packages</a>
				</div>
			</a>
		</div>
		@endforeach
	</div>
<style>
    .cta-button:hover {
    background-color: #10418C !important;
    color: white !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

</style>
    <!--Customize your trip page-->
    @if($cta_banner)
    <div class="customize-trip-section" style="
        background-image: url('{{$cta_banner->feature_image->getPath()}}');
      ">
        <div class="background-overlay"></div>
        <div class="content-container">
            <div class="section-heading">
                <div class="homepage-section-title">{{$cta_banner->meta}}</div>
                <h2 class="section-main-heading">{{$cta_banner->name}}</h2>
                <p class="section-description">
                   {{$cta_banner->description}}
                </p>
            </div>
            <a href="/personalize-my-trip.html" class="cta-button">Personalize My Trip</a>
        </div>
    </div>
    @endif
</div>
@endsection
	<!--Customize your trip page-->
<!--  -->