@include('header')

<div class="mj-dark-theme-wrapper" style="background-color: #080A0E; color: #C4CDD9; min-height: 100vh;">

    <!-- Service Details Main Hero Section -->
    <section class="mj-service-details-section" style="padding-bottom: 70px;">
        <div class="container">

            <div class="mb-5">
                <div class="p-4 rounded-4 wow zoomIn" data-wow-delay="0.1s" style="background: linear-gradient(135deg, rgba(212, 167, 98, 0.15) 0%, rgba(14, 19, 31, 0.98) 100%); border: 1.5px solid #D4A762; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);">
                    <div class="row align-items-center g-3">
                        <div class="col-lg-8">
                            <span class="badge" style="background: #D4A762; color: #080A0E; font-weight: 700; font-size: 12px;">READY TO TRAVEL?</span>
                            <h1 class="text-white mt-2 mb-1" style="font-family: 'Cinzel', serif; font-size: clamp(22px, 2.8vw, 30px); font-weight: 700;">Book Your {{ $service['title'] ?? 'Ride' }} with MJ Travels</h1>
                            <p class="mb-0" style="color: #CBD5E1; font-size: 14px;">
                                {{ $service['before_travel_note'] ?? 'Experience transparent per-km billing, courteous drivers, and 100% on-time guarantee across Tamil Nadu.' }}
                            </p>
                        </div>
                        <div class="col-lg-4 text-lg-end">
                            <a href="{{ url('/contact-mj-car-rentals') }}?service={{ urlencode($service['title'] ?? 'Travel Service') }}&tab=packages#enquiry-form-section" class="mj-btn-gold" style="padding: 12px 28px !important; font-size: 15px !important; font-weight: 700; display: inline-block;">
                                <span>Book This Service</span>
                                <i class="fa-solid fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Row: Banner Image & Overview Card -->
            <div class="row g-4 align-items-stretch mb-5">
                <div class="col-lg-7 wow fadeInLeft" data-wow-delay="0.15s">
                    <div class="rounded-4 overflow-hidden position-relative h-100" style="border: 1.5px solid #D4A762; min-height: 360px; box-shadow: 0 15px 40px rgba(0,0,0,0.6);">
                        <img src="{{ asset($service['image'] ?? 'images/service_local_city.jpg') }}" alt="{{ $service['title'] }}" class="w-100 h-100" style="object-fit: cover; transition: transform 0.5s ease;">
                        <div class="position-absolute bottom-0 start-0 end-0 p-4" style="background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 14, 0.95) 100%);">
                            <span class="badge" style="background: #D4A762; color: #080A0E; font-weight: 700; font-size: 12px;">TRICHY &bull; SOUTH INDIA</span>
                            <h3 class="text-white mt-2 mb-0" style="font-family: 'Cinzel', serif; font-size: 22px;">{{ $service['title'] }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5 wow fadeInRight" data-wow-delay="0.15s">
                    <div class="mj-intro-card h-100 d-flex flex-column justify-content-between" style="border: 1px solid #D4A762 !important; padding: 28px; background: #0E131F; transition: all 0.35s ease;">
                        <div>
                            <span class="mj-tagline-badge mb-2">Service Overview</span>
                            <h3 style="color: #FFFFFF; font-family: 'Cinzel', serif; font-size: 20px; margin-bottom: 12px;">
                                Why Choose MJ Travels for {{ $service['short_title'] ?? 'This Service' }}?
                            </h3>
                            <p style="color: #94A3B8; font-size: 14px; line-height: 1.7; margin-bottom: 18px;">
                                {{ $service['full_desc'] ?? $service['short_desc'] ?? '' }}
                            </p>

                            @if(!empty($service['highlights']))
                                <div class="d-flex flex-column gap-2 mb-4">
                                    @foreach($service['highlights'] as $hl)
                                        <div class="d-flex align-items-center gap-2" style="font-size: 13.5px; color: #E2E8F0;">
                                            <i class="fa-solid fa-circle-check" style="color: #D4A762; font-size: 14px; flex-shrink: 0;"></i>
                                            <span>{{ $hl }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        <div class="d-flex gap-3 pt-3 border-top" style="border-color: rgba(255,255,255,0.1) !important;">
                            <a href="https://wa.me/918526548059?text={{ urlencode('Hello MJ Travels, I would like to enquire about ' . ($service['title'] ?? 'your services')) }}" target="_blank" class="btn btn-success flex-fill" style="border-radius: 10px; font-weight: 700; font-size: 14px;">
                                <i class="fa-brands fa-whatsapp me-1"></i> WhatsApp
                            </a>
                            <a href="{{ url('/contact-mj-car-rentals') }}?service={{ urlencode($service['title'] ?? 'Travel Service') }}&tab=packages#enquiry-form-section" class="mj-btn-gold flex-fill text-center" style="border-radius: 10px; font-size: 14px; padding: 10px 16px !important;">
                                <span>Book Now</span> <i class="fa-solid fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Service Options & Variations -->
            @if(!empty($service['options']))
                <div class="mb-5">
                    <div class="text-center mb-4 wow fadeInDown" data-wow-delay="0.1s">
                        <span class="mj-tagline-badge">Available Options</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: 26px; color: #FFFFFF; margin-top: 8px;">
                            Flexible Packages &amp; Travel Choices
                        </h2>
                    </div>

                    <div class="row g-4 justify-content-center">
                        @foreach($service['options'] as $index => $opt)
                            <div class="col-lg-3 col-md-6 col-12 wow fadeInUp" data-wow-delay="{{ 0.1 + ($index % 4) * 0.1 }}s">
                                <div class="p-4 rounded-4 h-100 mj-sd-option-card" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.3); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;">
                                    <div class="mj-sd-icon" style="width: 44px; height: 44px; border-radius: 10px; background: rgba(212, 167, 98, 0.15); display: flex; align-items: center; justify-content: center; color: #D4A762; font-size: 18px; margin-bottom: 14px; transition: all 0.3s ease;">
                                        <i class="fa-solid fa-car-side"></i>
                                    </div>
                                    <h4 style="color: #FFFFFF; font-size: 17px; font-weight: 700; margin-bottom: 4px;">{{ $opt['title'] }}</h4>
                                    <p style="color: #D4A762; font-size: 12.5px; font-weight: 600; margin-bottom: 8px;">{{ $opt['subtitle'] }}</p>
                                    <p style="color: #94A3B8; font-size: 13px; line-height: 1.6; margin-bottom: 0;">{{ $opt['desc'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Recommended Fleet Section -->
            @if(!empty($service['fleet']))
                <div class="mb-5">
                    <div class="text-center mb-4 wow fadeInDown" data-wow-delay="0.1s">
                        <span class="mj-tagline-badge">Recommended Vehicles</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: 26px; color: #FFFFFF; margin-top: 8px;">
                            Pristine AC Fleet for This Service
                        </h2>
                    </div>

                    <div class="row g-4 justify-content-center">
                        @foreach($service['fleet'] as $index => $veh)
                            <div class="col-lg-4 col-md-6 col-12 wow fadeInUp" data-wow-delay="{{ 0.1 + ($index % 3) * 0.12 }}s">
                                <div class="rounded-4 overflow-hidden h-100 mj-sd-fleet-card" style="background: #0E131F; border: 1.5px solid rgba(212, 167, 98, 0.35); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;">
                                    <div style="height: 190px; overflow: hidden; position: relative;">
                                        <img src="{{ asset($veh['image']) }}" alt="{{ $veh['name'] }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;" class="mj-sd-fleet-img">
                                        <span class="badge position-absolute top-0 end-0 m-3" style="background: rgba(8, 10, 14, 0.88); border: 1px solid #D4A762; color: #D4A762; font-size: 11px;">
                                            {{ $veh['tag'] }}
                                        </span>
                                    </div>
                                    <div class="p-3">
                                        <h4 style="color: #FFFFFF; font-size: 18px; font-weight: 700; margin-bottom: 4px;">{{ $veh['name'] }}</h4>
                                        <p style="color: #D4A762; font-size: 13px; font-weight: 600; margin-bottom: 6px;">{{ $veh['type'] }}</p>
                                        <p style="color: #94A3B8; font-size: 12.5px; margin-bottom: 12px;"><i class="fa-solid fa-users me-1"></i> {{ $veh['capacity'] }}</p>
                                        <a href="{{ url('/contact-mj-car-rentals') }}?service={{ urlencode($service['title'] ?? 'Service') }}&tab=packages&vehicle={{ urlencode($veh['name']) }}#enquiry-form-section" class="btn btn-outline-warning w-100 btn-sm" style="border-color: #D4A762; color: #D4A762; font-weight: 700; border-radius: 8px;">
                                            Select {{ $veh['name'] }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- FAQs Section -->
            @if(!empty($service['faqs']))
                <div class="mb-5">
                    <div class="text-center mb-4 wow fadeInDown" data-wow-delay="0.1s">
                        <span class="mj-tagline-badge">Common Questions</span>
                        <h2 style="font-family: 'Cinzel', serif; font-size: 24px; color: #FFFFFF; margin-top: 8px;">
                            Frequently Asked Questions
                        </h2>
                    </div>

                    <div class="row g-3 justify-content-center">
                        @foreach($service['faqs'] as $index => $faq)
                            <div class="col-lg-6 col-12 wow fadeInUp" data-wow-delay="{{ 0.08 + ($index % 2) * 0.1 }}s">
                                <div class="p-3 rounded-3 h-100 mj-sd-faq-card" style="background: #0E131F; border: 1px solid rgba(212, 167, 98, 0.25); transition: transform 0.3s ease, border-color 0.3s ease;">
                                    <h5 style="color: #FFFFFF; font-size: 15px; font-weight: 700; margin-bottom: 6px;">
                                        <i class="fa-solid fa-circle-question me-2" style="color: #D4A762;"></i>{{ $faq['q'] }}
                                    </h5>
                                    <p style="color: #94A3B8; font-size: 13px; line-height: 1.6; margin-bottom: 0;">{{ $faq['a'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            </div>

        </div>
    </section>

    <style>
    .mj-sd-option-card:hover {
        transform: translateY(-5px);
        border-color: #D4A762 !important;
        box-shadow: 0 12px 30px rgba(212, 167, 98, 0.18);
    }
    .mj-sd-option-card:hover .mj-sd-icon {
        transform: scale(1.1) rotate(5deg);
        background: rgba(212, 167, 98, 0.25);
    }
    .mj-sd-fleet-card:hover {
        transform: translateY(-5px);
        border-color: #D4A762 !important;
        box-shadow: 0 14px 35px rgba(212, 167, 98, 0.22);
    }
    .mj-sd-fleet-card:hover .mj-sd-fleet-img {
        transform: scale(1.05);
    }
    .mj-sd-faq-card:hover {
        border-color: #D4A762 !important;
        transform: translateY(-3px);
    }
    </style>

</div>

@include('footer')