@extends("main")
@section("title", "Layanan Kami - Dino Logistics")

@push('styles')
{{-- Menggunakan style tracking untuk konsistensi Header Page --}}
<link rel="stylesheet" href="{{ asset('css/tracking.css') }}">
{{-- Memastikan style utama termuat --}}
<link rel="stylesheet" href="{{ asset('css/style.css') }}">

<style>
    /* RESET KHUSUS: Mengatasi masalah 'nempel' akibat content-box di style.css global */
    #services-list *, #services-list *::before, #services-list *::after {
        box-sizing: border-box;
    }

    /* Custom Breadcrumb Style untuk Header Biru */
    .breadcrumb-item + .breadcrumb-item::before {
        color: rgba(255, 255, 255, 0.5);
    }
    .breadcrumb-item a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-weight: 500;
    }
    .breadcrumb-item a:hover {
        color: #ffffff;
        text-decoration: underline;e
    }
    .breadcrumb-item.active {
        color: #ffffff;
        font-weight: 700;
    }
    
    /* Adjustment untuk page title agar breadcrumb pas */
    .page-title .container {
        position: relative;
        z-index: 2;
    }

    /* Service Card Styling - Mengikuti standar kerapihan Promo */
    .service-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(5, 84, 198, 0.15);
    }

    /* Service Image Container */
    .service-img-wrapper {
        width: 100%;
        height: 240px;
        position: relative;
        overflow: hidden;
    }

    .service-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .service-card:hover .service-img-wrapper img {
        transform: scale(1.05);
    }

    /* Service Content */
    .service-content {
        padding: 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .service-content h3 {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.3;
        margin: 0;
        color: #1f2937;
        transition: color 0.3s ease;
    }

    .service-card:hover .service-content h3 {
        color: #0554c6;
    }

    .service-desc {
        font-size: 15px;
        line-height: 1.6;
        margin: 0;
        flex: 1;
        color: #6b7280;
    }

    /* Service Footer */
    .service-footer {
        padding: 0 28px 28px 28px;
        border-top: 1px solid #f3f4f6;
        padding-top: 16px;
        margin-top: auto;
    }

    .btn-selengkapnya {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #0554c6;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-selengkapnya i {
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    .btn-selengkapnya:hover {
        color: #0442a0;
        gap: 12px;
    }

    .btn-selengkapnya:hover i {
        transform: translateX(5px);
    }

    /* Grid Layout - Sama persis dengan Promo */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 32px;
        margin-top: 40px;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 80px 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        grid-column: 1 / -1;
    }

    .empty-state i {
        font-size: 64px;
        color: #cbd5e1;
        margin-bottom: 20px;
    }

    @media (max-width: 768px) {
        .page-title {
            padding: 100px 0 120px !important;
        }
    }
</style>


@endpush

@section("content")

<main class="main">

<!-- HEADER PAGE (Blue Gradient) -->
<div class="page-title" style="background: linear-gradient(135deg, #0554c6 0%, #00d2ff 100%); padding: 120px 0 140px; color: white;">
  <div class="container text-center">
    <h1 style="font-weight: 800; font-size: 2.8rem; margin-bottom: 10px;">Layanan Kami</h1>
    <p style="font-size: 1.1rem; opacity: 0.9;">Solusi logistik terintegrasi untuk mendukung pertumbuhan bisnis Anda</p>
  </div>
</div>

<!-- SERVICES LIST SECTION -->
{{-- Di sini perubahannya: padding-top: 80px agar tidak mentok ke atas --}}
<section id="services-list" class="section bg-light" style="margin-top: -60px; position: relative; z-index: 10; padding-top: 80px;">
  <div class="container">
    
    <!-- Services Grid -->
    <div class="services-grid">

      @forelse($services as $service)
        <div class="service-card">
            <!-- Gambar Service -->
            <div class="service-img-wrapper">
                <img src="{{ $service->image_url ?? asset('storage/' . $service->icon) }}" 
                     alt="{{ $service->title }}" 
                     onerror="this.src='https://placehold.co/600x400?text=Layanan+Dino'"
                     loading="lazy">
            </div>

            <!-- Konten -->
            <div class="service-content">
                <h3>{{ $service->title }}</h3>
                <div class="service-desc">
                    {!! Str::limit(strip_tags($service->description), 130) !!}
                </div>
            </div>

            <!-- Footer Card (Tombol) -->
            <div class="service-footer">
                <a href="{{ route('services.show', $service->id) }}" class="btn-selengkapnya">
                    Selengkapnya <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
      @empty
        <div class="empty-state">
            <i class="fas fa-box-open"></i>
            <h4>Belum Ada Layanan</h4>
            <p>Saat ini belum ada data layanan yang tersedia.</p>
        </div>
      @endforelse

    </div>
  </div>
</section>

<!-- CALL TO ACTION -->

@php
$message = urlencode('Halo, saya ingin bertanya tentang layanan Anda.');
@endphp



<section class="section" style="padding: 60px 0;">
    <div class="container">
        <div class="wrapper-dark" style="background: #111827; color: white; border-radius: 20px; text-align: center; padding: 60px 40px;">
            <h2 style="margin-bottom: 15px; font-weight: 700;">Butuh Solusi Khusus?</h2>
           <p style="opacity: 0.9; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto;">
                   Tim kami siap membantu merancang solusi logistik yang paling efisien untuk kebutuhan spesifik perusahaan Anda.
                </p>
                @if(isset($globalContact) && $globalContact->whatsapp_formatted)
              <a href="https://wa.me/{{ $globalContact->whatsapp_formatted }}?text={{ $message }}"  class="btn-red-block" style="display: inline-block; width: auto; padding: 14px 40px; text-decoration: none;">
                    <i class="fas fa-headset me-2"></i> Hubungi Kami
                </a>
                @endif
        </div>
    </div>
</section>


</main>
@endsection