@extends("main")
@section("title","Welcome to Company")

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    /* =========================================
       1. SELECT2 CUSTOMIZATION (Form Cek Tarif)
       ========================================= */
    
    /* --- Style Input (Transparan & Borderless) --- */
    .select2-container--default .select2-selection--single {
        border: none !important;
        background-color: transparent !important;
        font-weight: 700 !important;
        height: auto !important;
        padding-top: 5px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
        color: #05081d !important; /* Navy Gelap */
        font-size: 1.1rem;
    }

    /* Hilangkan panah default */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: none; 
    }

    /* --- Style Dropdown List --- */
    .select2-dropdown {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        padding: 5px 0;
        z-index: 9999;
    }

    /* Teks Opsi */
    .select2-results__option {
        color: #1a202c !important; /* Hitam Gelap */
        font-weight: 500;
        padding: 10px 15px !important;
        font-size: 0.95rem;
    }

    /* Hover State (Merah Dino) */
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #fd1414 !important;
        color: #ffffff !important;
    }
    
    /* Input Search di Dropdown */
    .select2-search__field {
        border: 1px solid #ccc !important;
        border-radius: 5px !important;
        padding: 5px 10px !important;
    }


    /* =========================================
       2. HERO & CAROUSEL SECTION
       ========================================= */
    #hero-carousel, 
    .carousel-item {
        height: 75vh;
        min-height: 500px;
    }

    .carousel-caption {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-bottom: 50px;
    }


    /* =========================================
       3. TRACKING SYSTEM (Resi / AWB)
       ========================================= */

    /* --- Tracking V2 (Fix Layout Mobile Sejajar) --- */
    .tracking-v2-box {
        display: flex !important;
        flex-direction: row !important; /* Kunci agar sejajar */
        align-items: center;
        background: #ffffff;
        padding: 5px 5px 5px 25px !important;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        width: 100%;
        max-width: 800px;
        position: relative;
        margin: 0 auto; /* Tengah secara horizontal */
    }

    .tracking-v2-input {
        flex: 1;
        border: none !important;
        outline: none !important;
        background: transparent;
        padding: 12px 15px;
        font-size: 14px;
        color: #333;
        border-radius: 50px 0 0 50px;
        width: 100%;
    }

    .tracking-v2-input::placeholder {
        color: #adb5bd;
        font-weight: 400;
    }

    .tracking-v2-btn {
        background: #fd1414;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .tracking-v2-btn:hover {
        background: #d60b0b;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(253, 20, 20, 0.3);
    }

    /* --- Legacy/General Tracking Styles --- */
    .tracking-wrapper button:hover {
        transform: scale(1.02);
        filter: brightness(1.1);
        box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
    }
    
    .btn-track {
        transition: all 0.3s ease;
        letter-spacing: 0.5px;
    }

    .btn-track:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 0, 0, 0.2);
    }


    /* =========================================
       4. SERVICES & FEATURES
       ========================================= */
    .features-overlap {
        margin-top: -80px;
        position: relative;
        z-index: 10;
    }

    .service-img-container {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 15px;
        margin-bottom: 20px;
    }

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

    .card-custom:hover .service-img-container img {
        transform: scale(1.1);
    }


    /* =========================================
       5. CLIENT LOGOS & MARQUEE
       ========================================= */
    .client-logo {
        height: 80px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

    .client-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
    }

    .marquee-wrapper {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .marquee-track {
        display: flex;
        align-items: center;
        gap: 3rem;
        width: max-content;
        animation: scroll-left 40s linear infinite;
    }

    .marquee-track:hover {
        animation-play-state: paused;
    }


    /* =========================================
       6. ANIMATIONS & KEYFRAMES
       ========================================= */
    @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }


/* =========================================
       7. RESPONSIVE MEDIA QUERIES (UPDATED)
       ========================================= */
    
    /* Mobile General (Width < 576px) */
    @media (max-width: 576px) {
        /* 1. Atur Ulang Hero Section Tinggi */
        #hero-carousel, 
        .carousel-item {
            height: 85vh; /* Sedikit lebih tinggi biar muat */
            min-height: auto;
        }

        /* 2. Kecilkan Font Judul & Deskripsi */
        .carousel-caption h1 {
            font-size: 1.8rem !important; /* Judul lebih kecil */
            margin-bottom: 0.5rem;
        }
        
        .carousel-caption p.lead {
            font-size: 0.9rem !important; /* Deskripsi lebih kecil */
            margin-bottom: 1rem !important;
            line-height: 1.4;
        }

        /* 3. Perbaikan Tampilan Tracking Box di HP */
        .tracking-v2-box { 
            padding: 3px; 
            max-width: 95%; /* Hampir full layar */
            border-radius: 50px;
        }
        
        .tracking-v2-input { 
            padding: 10px 15px !important; 
            font-size: 13px; 
        }
        
        .tracking-v2-btn { 
            min-width: auto;
            font-size: 11px; 
            padding: 10px 15px !important; 
            margin-right: 2px;
        }
    }

    /* =========================================
       8. STATIC TRACKING FORM (NEW)
       ========================================= */
    .hero {
        position: relative; /* Container utama harus relative */
    }

    .tracking-static-overlay {
        position: absolute;
        bottom: 25%; /* Jarak dari bawah layar */
        left: 0;
        width: 100%;
        z-index: 20; /* Pastikan di atas gambar carousel */
    }

    /* Penyesuaian Mobile */
    @media (max-width: 576px) {
        .tracking-static-overlay {
            bottom: 20%; /* Di HP jaraknya agak beda */
        }
    }

    /* =========================================
       RESPONSIVE TRACKING (JNE STYLE)
       ========================================= */
   /* =========================================
       7. RESPONSIVE MEDIA QUERIES (FINAL HP)
       ========================================= */
    @media (max-width: 576px) {
        
        /* --- 1. BAGIAN TEKS (Solusi Biar Gak Sumpek) --- */
        .carousel-caption {
            top: 45%; /* Naikkan posisi teks ke tengah agak atas */
            transform: translateY(-50%);
            bottom: auto !important;
            padding-left: 20px;
            padding-right: 20px;
        }

        .carousel-caption h1 {
            font-size: 1.8rem !important; /* Judul pas, gak kegedean */
            margin-bottom: 5px;
            font-weight: 800;
            text-shadow: 0 2px 4px rgba(0,0,0,0.6);
        }
        
        /* KUNCI SUPAYA ALAMAT PANJANG HILANG OTOMATIS */
        .carousel-caption .lead {
            font-size: 0.9rem !important;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            
            /* Memotong teks sisa (alamat/email hilang) */
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Cuma ambil 2 baris pertama */
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 0 !important;
        }

        /* --- 2. BAGIAN FORM TRACKING (Gaya JNE) --- */
        .tracking-static-overlay {
            bottom: 15%; /* Jarak dari bawah layar */
        }

        /* Kotak Putih */
        .tracking-v2-box { 
            padding: 4px 4px 4px 15px; /* Padding kiri disesuaikan */
            max-width: 90%; 
            border-radius: 50px; 
            background: #fff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        
        /* Input Field */
        .tracking-v2-input { 
            padding: 10px 0 !important; 
            font-size: 14px; 
            width: 100%;
        }

        /* Tombol 'LACAK' jadi Bulat */
        .tracking-v2-btn { 
            width: 45px;      
            height: 45px;     
            padding: 0 !important;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: unset;
            margin-left: 10px;
        }

        /* Teks "LACAK PAKET" Hilang */
        .btn-text { display: none; }

        /* Icon Kaca Pembesar Muncul */
        .btn-icon {
            display: block !important;
            font-size: 1.2rem;
        }
    }

    /* =========================================
       9. NEW: LABEL BUBBLE & CEK TARIF BTN
       ========================================= */
    
    /* Style untuk Bubble Label (Kotak Biru di atas) */
    .tracking-label-bubble {
        background: #05081d; /* Warna Navy Gelap */
        color: #ffffff;
        padding: 8px 20px;
        border-radius: 12px;
        display: inline-block;
        font-weight: 700;
        font-size: 0.85rem;
        position: relative;
        margin-bottom: 10px; /* Jarak ke Input */
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        letter-spacing: 0.5px;

        opacity: 0;                 /* Transparan */
        visibility: hidden;         /* Tidak bisa diklik saat hilang */
        transform: translateY(10px);/* Geser sedikit ke bawah */
        transition: all 0.3s ease;  /* Animasi halus */
    }

    .tracking-label-bubble.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);   /* Kembali ke posisi asal */
    }
    /* Bikin Panah Kecil di Bawah Bubble */
    .tracking-label-bubble::after {
        content: '';
        position: absolute;
        bottom: -6px; /* Posisi panah */
        left: 20px;   /* Jarak dari kiri */
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #05081d; /* Warna sama dengan bubble */
    }

    /* Style untuk Tombol Cek Tarif (Pill Putih di bawah) */
    .btn-cek-tarif {
        background: rgba(255, 255, 255, 0.95);
        color: #d60b0b; /* Merah Dino */
        border: none;
        padding: 10px 25px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        margin-top: 15px; /* Jarak dari Input */
    }

    .btn-cek-tarif:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.3);
        color: #ff0000;
    }

    /* Agar Scroll ke bawahnya mulus */
    html {
        scroll-behavior: smooth;
    }
    .tracking-label-container {
        width: 100%;
        max-width: 800px; /* Samakan dengan max-width .tracking-v2-box */
        margin: 0 auto;   /* Agar container tetap di tengah layar */
        text-align: left; /* Paksa isi (bubble) ke kiri */
        padding-left: 25px; /* Memberi jarak agar pas dengan lekukan border-radius box */
    }

    /* Penyesuaian Mobile: Geser Bubble & Tombol ke Tengah */
  @media (max-width: 576px) {
        .tracking-label-container {
            max-width: 95%; /* Samakan dengan mobile tracking box */
            padding-left: 15px;
        }
    }
        
        .btn-cek-tarif {
            font-size: 0.85rem;
            padding: 8px 20px;
        }
    

    .carousel-caption h1 {
        text-shadow: 2px 2px 8px #000000 !important; /* Bayangan hitam pekat */
        font-weight: 800; /* Tebalkan huruf */
    }

    /* Agar Alamat/Deskripsi kebaca jelas */
    .carousel-caption .lead {
        text-shadow: 1px 1px 5px #000000 !important;
        font-weight: 500;
        color: #ffffff !important; /* Pastikan putih */
        
        /* Opsional: Kasih latar hitam transparan SANGAT TIPIS cuma di area teks */
        background-color: rgba(0, 0, 0, 0.3); 
        display: inline-block; /* Supaya background ngikutin panjang teks */
        padding: 5px 15px;
        border-radius: 10px;
    }
</style>
@endpush

@section("content")

    <!-- Hero Section -->
  <section class="hero position-relative">
  
  <div id="hero-carousel" class="carousel slide carousel-fade w-100" data-bs-ride="carousel">
    
    <div class="carousel-inner">
      @foreach($banners as $banner)
      <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        
        <div style="position:absolute; inset:0; background: rgba(0,0,0,0.4); z-index:1;"></div>

        <img src="{{ $banner->image_url }}" 
             class="d-block w-100" 
             style="object-fit: cover; height: 100%;"
             alt="{{ $banner->title }}"
             @if($loop->first) fetchpriority="high" loading="eager" @else loading="lazy" @endif>

        <div class="carousel-caption" style="z-index: 2; padding-bottom: 100px;"> <div class="container text-white text-center">
            
            <h1 class="animate-fade-up delay-1 display-4 fw-bold text-shadow">
              {{ $banner->title }}
            </h1>
            
            @if($banner->description)
            <div class="lead text-readable mx-auto animate-fade-up delay-2 mb-4 text-white">
              {!! $banner->description !!}
            </div>
            @endif

          </div>
        </div>
      </div>
      @endforeach
    </div>

    <button class="carousel-control-prev d-none d-md-flex" type="button" data-bs-target="#hero-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </button>
    <button class="carousel-control-next d-none d-md-flex" type="button" data-bs-target="#hero-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </button>

  </div>
<div class="tracking-static-overlay animate-fade-up delay-3">
    <div class="container">
        
        <div class="col-lg-8 mx-auto">
            
           <div class="tracking-label-container ms-3 ms-md-4">
        <div class="tracking-label-bubble">
            Lacak Pengiriman
        </div>
    </div>
            <form action="{{ route('tracking.standard') }}" method="GET">
                <div class="tracking-v2-box mx-auto d-flex align-items-center">
                  
                  <div class="text-danger me-2 d-flex align-items-center">
                     <i class="bi bi-geo-alt-fill fs-5"></i>
                  </div>

                  <input
                    type="text"
                    name="awb"
                    class="tracking-v2-input border-0 bg-transparent flex-grow-1 shadow-none"
                    placeholder="Masukkan Nomor Resi..."
                    required
                    style="outline: none;"
                  />

                  <button type="submit" class="tracking-v2-btn shadow-sm border-0 bg-danger text-white fw-bold">
                    <span class="btn-text d-none d-sm-block px-3">LACAK PAKET</span>
                    <i class="bi bi-search btn-icon d-block d-sm-none"></i>
                  </button>

                </div>
            </form>

            <!-- <div class="text-center">
                <a href="#cek-tarif" class="btn-cek-tarif">
                    <i class="bi bi-calculator-fill"></i> Cek Tarif
                </a>
            </div> -->

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

</section>

    <!-- Overlap Features (Dynamic Services - Images Enlarged) -->
    <section class="features-overlap">
      <div class="container">
        <div class="row g-4">
          @foreach($services as $item)
          <div class="col-lg-4 col-md-6 animate-fade-up">
            <div class="card-custom text-center h-100">
              <div class="service-img-container">
                  <img src="{{ $item->image_url }}" alt="{{ $item->title }}">
              </div>
              <h3>{{ $item->title }}</h3>
              <p class="text-readable small">
                {{ Str::limit(strip_tags($item->description), 120) }}
              </p>
              <a href="{{ route('services.show', $item->id) }}" class="text-accent fw-bold small">
                  More Info <i class="bi bi-arrow-right"></i>
              </a>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>

    <!-- Cek Tarif Section (Dynamic Form) -->
  <section id="cek-tarif" class="light-section mb-5 ">
      <div class="container py-4">
        <div class="rates-card mx-auto">
          <div class="text-center mb-4">
            <h3 class="fw-bold" style="color: #05081d">CEK TARIF PENGIRIMAN</h3>
            <p class="text-muted small">
              Silakan pilih kota asal dan tujuan untuk melihat estimasi biaya pengiriman Anda.
            </p>
          </div>
          
          <form action="{{ route('shipping.check') }}" method="GET">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="custom-input-group">
                        <label>KOTA ASAL</label>
                        <select name="origin" id="origin" class="form-select select2 border-0 bg-transparent fw-bold shadow-none" required>
                            <option value="">PILIH KOTA ASAL...</option>
                            @foreach($origins as $origin)
                                <option value="{{ $origin->id }}">{{ $origin->type }} {{ $origin->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="custom-input-group">
                        <label>KOTA TUJUAN</label>
                        <select name="destination_city" id="destination_city" class="form-select select2 border-0 bg-transparent fw-bold shadow-none" required>
                            <option value="">PILIH KOTA TUJUAN...</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="custom-input-group">
                        <label>KECAMATAN TUJUAN</label>
                        <select name="destination_district" id="destination_district" class="form-select select2 border-0 bg-transparent fw-bold shadow-none" required>
                            <option value="">PILIH KECAMATAN...</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="custom-input-group">
                        <label>KELURAHAN TUJUAN</label>
                        <select name="destination_village" id="destination_village" class="form-select select2 border-0 bg-transparent fw-bold shadow-none" required>
                            <option value="">PILIH KELURAHAN...</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="custom-input-group">
                        <label>BERAT (KG)</label>
                        <input type="number" name="weight" value="1" min="1" class="form-control border-0 bg-transparent fw-bold shadow-none" />
                    </div>
                </div>

                <div class="col-12 mt-4 text-center">
                    <button type="submit" class="btn btn-accent py-3 px-5 fw-bold shadow-sm btn-accent-lg">
                        CEK HARGA SEKARANG <i class="bi bi-calculator ms-2"></i>
                    </button>
                </div>
            </div>
          </form>
        </div>

        
    @if($promos->count() > 0)
    <section id="promo" class="py-5">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold text-black">PROMO SPESIAL BULAN INI</h2>
          <div class="mx-auto" style="width: 70px; height: 4px; background: var(--accent); margin-top: 15px;"></div>
        </div>
        <div class="row g-4">
          @foreach($promos as $promo)
          <div class="col-lg-6">
            <div class="promo-card" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{{ $promo->image_url }}'); background-size: cover;">
              <div class="promo-badge">HOT DEAL</div>
              <h4 class="text-white fw-bold mb-3">{{ $promo->name }}</h4>
              <p class="text-readable">
                Berlaku s/d {{ $promo->end_date->format('d M Y') }}
              </p>
              <div class="mt-4">
                <a href="{{ route('promos.show', $promo->id) }}" class="btn btn-sm btn-accent rounded-pill px-4">Lihat Promo</a>
              </div>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif
        
      </div>
    </section>

    <!-- Promo Section (Dynamic) -->


     <div class="row mt-5 pt-5 text-center">
          <div class="col-lg-10 mx-auto">
            <h2 class="fw-bold mb-4" style="color: #ffffff">
              Mengapa Memilih Dino Logistics?
            </h2>
            <p class="lead text-white">
              Kami memahami bahwa setiap detik sangat berharga dalam dunia
              bisnis. Dino Logistics hadir untuk memberikan solusi yang efisien,
              transparan, dan dapat diandalkan.
            </p>
          </div>
        </div>

        <div class="row mt-5 g-4 text-center">
          <div class="col-md-4">
            <i class="bi bi-shield-check text-accent fs-1 mb-3"></i>
            <h5 class="fw-bold">Keamanan Terjamin</h5>
            <p class="small text-readable">Barang Anda dilindungi oleh sistem keamanan tinggi dan opsi asuransi terbaik.</p>
          </div>
          <div class="col-md-4">
            <i class="bi bi-lightning-charge text-accent fs-1 mb-3"></i>
            <h5 class="fw-bold">Pengiriman Cepat</h5>
            <p class="small text-readable">Optimasi rute dan armada yang handal menjamin barang sampai tepat waktu.</p>
          </div>
          <div class="col-md-4">
            <i class="bi bi-currency-dollar text-accent fs-1 mb-3"></i>
            <h5 class="fw-bold">Tarif Kompetitif</h5>
            <p class="small text-readable">Kami menawarkan harga yang transparan dan bersaing di seluruh kategori layanan.</p>
          </div>
        </div>
      </div>


    <!-- How It Works Section (Restored) -->
    <section class="py-5 bg-surface">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold text-white">CARA KERJA KAMI</h2>
          <p class="text-readable small">Alur pengiriman barang Anda dari awal hingga sampai di tujuan.</p>
          <div class="mx-auto" style="width: 60px; height: 3px; background: var(--accent); margin-top: 15px;"></div>
        </div>
        <div class="row g-4 text-center">
          <div class="col-md-3">
            <div class="p-4">
              <div class="process-icon mb-4"><i class="bi bi-clipboard-check"></i><span class="step-number">1</span></div>
              <h5 class="text-white">Pesan & Booking</h5>
              <p class="small text-readable">Tentukan jenis layanan dan jadwal jemput/antar barang Anda.</p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="p-4">
              <div class="process-icon mb-4"><i class="bi bi-box-seam"></i><span class="step-number">2</span></div>
              <h5 class="text-white">Pengambilan Barang</h5>
              <p class="small text-readable">Tim kami akan menjemput paket langsung ke lokasi Anda (Door-to-Door).</p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="p-4">
              <div class="process-icon mb-4"><i class="bi bi-truck"></i><span class="step-number">3</span></div>
              <h5 class="text-white">Proses Pengiriman</h5>
              <p class="small text-readable">Barang dikirim melalui jalur terbaik dengan pantauan real-time.</p>
            </div>
          </div>
          <div class="col-md-3">
            <div class="p-4">
              <div class="process-icon mb-4"><i class="bi bi-house-check"></i><span class="step-number">4</span></div>
              <h5 class="text-white">Barang Diterima</h5>
              <p class="small text-readable">Paket sampai di tujuan dengan aman dan konfirmasi bukti kirim.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials (Restored) -->
   <section class="py-5">
  <div class="container text-center">
    <h2 class="fw-bold text-white mb-5">APA KATA PELANGGAN?</h2>
    
    <div class="row g-4 justify-content-center"> @foreach($testimonials as $testi)
      <div class="col-md-4">
        <div class="testimonial-card text-start h-100 p-4" style="background: rgba(255,255,255,0.05); border-radius: 15px; border: 1px solid rgba(255,255,255,0.1);">
          
          <div class="mb-3 text-warning">
            @for($i = 0; $i < 5; $i++)
                <i class="bi bi-star-fill"></i>
            @endfor
          </div>
          
          <p class="small text-readable fst-italic text-white-50" style="line-height: 1.6;">
            "{{ $testi['quote'] }}"
          </p>
          
          <hr class="opacity-25 border-white my-4" />
          
          <div class="d-flex align-items-center gap-3">
            <div>
                <div class="fw-bold text-white">{{ $testi['name'] }}</div>
                <small class="text-danger fw-bold" style="font-size: 0.8rem;">— {{ $testi['role'] }}</small>
            </div>
          </div>

        </div>
      </div>
      @endforeach

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

    <!-- Network Section (Reverted to Old Map Design) -->
    <section id="branches" class="py-5 bg-surface">
      <div class="container">
        <div class="text-center mb-5">
          <h2 class="fw-bold text-white">JARINGAN CABANG & AGEN</h2>
          <p class="text-readable small">Kami hadir di kota-kota strategis untuk memudahkan akses pengiriman kargo Anda.</p>
          <div class="mx-auto" style="width: 60px; height: 3px; background: var(--accent); margin-top: 15px;"></div>
        </div>
        
        <div class="row align-items-center gy-4">
          <div class="col-lg-7">
             <img src="{{ asset('img/peta-cabang.jpg') }}" class="img-fluid rounded shadow-sm w-100" alt="Peta Sebaran Cabang">
          </div>

           <div class="col-lg-5">
            <div class="content ps-lg-4">
                <div class="row">
                    @if(count($chunkedBranches) > 0)
                        
                        @foreach($chunkedBranches as $columnBranches)
                            
                            <div class="col-6 col-md-3"> 
                                
                                @foreach($columnBranches as $branch)
                                    <div class="mb-2"> 
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-caret-right-fill text-danger me-2" style="font-size: 0.8rem;"></i> 
                                            <span class="fw-medium text-secondary">{{ $branch['name'] }}</span> 
                                        </div>
                                    </div>
                                @endforeach
                                
                            </div>
                        @endforeach
                    @else
                        <div class="col-12">
                            <p>Data cabang sedang diperbarui.</p>
                        </div>
                    @endif
                </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ Section (Restored) -->
  <section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-white">PERTANYAAN UMUM</h2>
            <div class="mx-auto" style="width: 50px; height: 3px; background: var(--accent); margin-top: 15px;"></div>
        </div>
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="accordion faq-accordion" id="faqHome">
                    
                    {{-- PERBAIKAN: @forelse diletakkan SEBELUM accordion-item --}}
                    @forelse($faqs as $index => $faq)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button 
                                class="accordion-button {{ $index === 0 ? '' : 'collapsed' }}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#faq-{{ $faq->id }}"
                                aria-expanded="{{ $index === 0 ? 'true' : 'false' }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="faq-{{ $faq->id }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" data-bs-parent="#faqHome">
                            <div class="accordion-body small">
                                {!! $faq->answer !!}
                            </div>
                        </div>
                    </div> 
                    {{-- Penutup accordion-item harus DI DALAM loop --}}
                    
                    @empty
                    <div class="text-center text-white">
                        <p>Belum ada data FAQ.</p>
                    </div>
                    @endforelse

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

    <!-- Client Section (Dynamic Partners) -->
<section class="py-5 bg-white">
  <div class="container text-center">
    <h6 class="fw-bold text-muted small letter-spacing-2 mb-5">OUR TRUSTED PARTNERS</h6>
    <div class="row align-items-center justify-content-center g-4 g-md-5">
      @foreach($clients as $client)
      <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-center">
        <img src="{{ $client->image_url }}" 
             alt="{{ $client->name }}" 
             class="client-logo client-logo-img img-fluid" 
             style="transition: transform 0.3s ease; cursor: pointer;"
             onmouseover="this.style.transform='scale(1.1)'"
             onmouseout="this.style.transform='scale(1)'">
      </div>
      @endforeach
    </div>
  </div>
</section>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Inisialisasi Select2
    $('.select2').select2({ 
        width: '100%', 
        placeholder: "Pilih...", 
        allowClear: true 
    });


    const $trackingInput  = $('.tracking-v2-input');
    const $trackingBubble = $('.tracking-label-bubble');
    const $trackingBox    = $('.tracking-v2-box');

    // 1. Saat Input di Klik/Fokus -> Munculkan Label
    $trackingInput.on('focus', function() {
        $trackingBubble.addClass('show');
    });

    // 2. Saat Input kehilangan Fokus (Blur) -> Hilangkan Label
    $trackingInput.on('blur', function() {
        // Cek dulu apakah mouse masih ada di dalam area box, kalau tidak baru hilangkan
        if (!$trackingBox.is(':hover')) {
            $trackingBubble.removeClass('show');
        }
    });

    // 3. Opsional: Muncul saat Mouse Hover di area Form
    $trackingBox.hover(
        function() { // Mouse Enter
            $trackingBubble.addClass('show');
        },
        function() { // Mouse Leave
            // Hanya hilangkan jika input sedang TIDAK fokus
            if (!$trackingInput.is(':focus')) {
                $trackingBubble.removeClass('show');
            }
        }
    );

    // 1. Ketika Kota Asal diubah -> Ambil Kota Tujuan
    $('#origin').on('change', function() {
        let originId = $(this).val();
        let $destCity = $('#destination_city');
        
        $destCity.empty().append('<option value="">Loading...</option>').trigger('change');

        if(originId) {
            $.ajax({
                url: '/api/destinations',
                type: 'GET',
                data: { origin_id: originId },
                success: function(data) {
                    $destCity.empty().append('<option value="">PILIH KOTA TUJUAN...</option>');
                    $.each(data, function(key, item) {
                        let fullName = (item.type ? item.type + ' ' : '') + item.name;
                        $destCity.append(`<option value="${item.id}">${fullName}</option>`);
                    });
                    $destCity.trigger('change'); // PENTING: Update tampilan Select2
                },
                error: function() {
                    $destCity.empty().append('<option value="">Gagal memuat data</option>').trigger('change');
                }
            });
        }
    });

    // 2. Ketika Kota Tujuan diubah -> Ambil Kecamatan
    $('#destination_city').on('change', function() {
        let cityId = $(this).val();
        let $destDistrict = $('#destination_district');

        $destDistrict.empty().append('<option value="">Loading...</option>').trigger('change');

        if (cityId) {
            $.ajax({
                url: '/api/districts/' + cityId,
                type: 'GET',
                success: function(data) {
                    $destDistrict.empty().append('<option value="">PILIH KECAMATAN...</option>');
                    $.each(data, function(key, item) {
                        $destDistrict.append(`<option value="${item.id}">${item.name}</option>`);
                    });
                    $destDistrict.trigger('change'); // Update Select2
                }
            });
        }
    });

    // 3. Ketika Kecamatan diubah -> Ambil Kelurahan
    $('#destination_district').on('change', function() {
        let districtId = $(this).val();
        let $destVillage = $('#destination_village');

        $destVillage.empty().append('<option value="">Loading...</option>').trigger('change');

        if (districtId) {
            $.ajax({
                url: '/api/villages/' + districtId,
                type: 'GET',
                success: function(data) {
                    $destVillage.empty().append('<option value="">PILIH KELURAHAN...</option>');
                    $.each(data, function(key, item) {
                        $destVillage.append(`<option value="${item.id}">${item.name}</option>`);
                    });
                    $destVillage.trigger('change'); // Update Select2
                }
            });
        }
    });
});
</script>
@endpush

@endsection