@extends("main")
@section("title","Dino Logistics - Jasa Pengiriman Barang & Cargo Terpercaya di Indonesia")

@push('structured_data')
<script type="application/ld+json">
{!! json_encode($structuredData, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT) !!}
</script>
@endpush




{{-- PRELOAD KODE UNTUK MEMPERCEPAT GAMBAR PERTAMA (LCP) --}}
@push('styles')
    <link rel="stylesheet" href="{{ asset('css/dino-map.css') }}">
        <link rel="stylesheet" href="{{ asset('css/preloader.css') }}">
    @if(isset($banners[0]))
    <link rel="preload" as="image" href="{{ asset('storage/' . $banners[0]->image) }}">
    @endif
@endpush

 <!-- PRELOADER OVERLAY -->
<!-- PRELOADER OVERLAY (Fix Anti-Pojok Kiri Atas) -->
    <div id="dino-preloader" style="position: fixed; inset: 0; background-color: #f8fafc; z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh;">
        
        <div class="preloader-animation-container" style="position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 160px;">
            <!-- Gambar diberi style width statis awal -->
            <img src="{{ asset('img/dino_fly.webp') }}" alt="Loading Dino" class="dino-mascot" style="width: 130px; height: auto;">
            <div class="dino-shadow"></div>
        </div>
        
        <div class="preloader-text" style="margin-top: 30px;">DINO LOGISTICS</div>
    </div>
@section("content")

    <!-- MODERN HERO SECTION -->
    <section id="home" class="hero-section-modern">
      
      <!-- 1. LAYER BACKGROUND SLIDER -->
      <div class="hero-bg-slider">
        @forelse($banners as $index => $banner)
            <div class="hero-slide-item {{ $index == 0 ? 'active' : '' }}" 
                 style="background-image: url('{{ asset('storage/' . $banner->image) }}');"
                 @if($index > 0) loading="lazy" @endif>
            </div>
        @empty
            <div class="hero-slide-item active" 
                 style="background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1950&q=80');">
            </div>
        @endforelse
        
        <!-- Overlay Gradient -->
        <div class="hero-overlay-mask"></div>
      </div>

      <!-- 2. LAYER KONTEN (STATIS) -->
      <div class="hero-content-front">
        <div class="container">
            <div class="hero-layout-grid">
                
                <!-- KOLOM KIRI: TEKS & BUTTON -->
                <div class="hero-text-col">
                    <!-- Badge -->
                    <div class="hero-badge">
                        <span class="pulse-dot"></span> {{ $heroText->badge_text ?? '#1 Solusi Logistik Indonesia' }}
                    </div>
                    
                    <!-- Judul -->
                    <h1 class="animate-text-up">
                        {!! $heroText->title ?? 'Kirim Barang <br>
                        <span class="text-highlight">Lebih Mudah & Aman</span>' !!}
                    </h1>
                    
                    <!-- Deskripsi -->
                    <div class="hero-desc animate-text-up delay-1">
                        {!! $heroText->subtitle ?? 'Jangkauan pengiriman terluas ke seluruh pelosok negeri dengan jaminan keamanan dan harga yang kompetitif.' !!}
                    </div>

                    <!-- Tombol Branding -->
                    <div class="hero-actions animate-text-up delay-2">
                        @if(!empty($heroText->button_secondary_link))
                        <a href="{{ $heroText->button_secondary_link }}" class="btn-primary-glow">
                            {{ $heroText->button_secondary_text ?? 'Lihat Layanan' }}
                        </a>
                        @endif
                    </div>

                    <!-- SOCIAL MEDIA SECTION -->
                    @if(isset($globalSocials) && $globalSocials->count() > 0)
                    <div class="hero-social-links animate-text-up delay-3">
                        <span class="social-label">Ikuti Kami:</span>
                        <div class="social-icons-hero">
                            @foreach($globalSocials as $social)
                                <a href="{{ $social->link }}" target="_blank" title="{{ $social->name }}">
                                    <i class="{{ $social->icon }}"></i>
                                </a>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>

                <!-- KOLOM KANAN: GAMBAR (LEPAS) - SLIDER PROMO -->
                <div class="hero-card-col">
                    <div class="hero-image-free">
                        <div class="hero-promo-slider">
                            @php
                                $promoImages = [];
                                if(isset($promos) && $promos->count() > 0) {
                                    foreach($promos as $promo) {
                                        if($promo->image_url) $promoImages[] = $promo->image_url;
                                    }
                                }
                                if(empty($promoImages) && isset($heroText->promo_image) && $heroText->promo_image) {
                                    $promoImages[] = asset('storage/' . $heroText->promo_image);
                                }
                                if(empty($promoImages)) {
                                    $promoImages[] = 'https://cdn-icons-png.flaticon.com/512/3063/3063822.png';
                                }
                            @endphp
                            
                            @foreach($promoImages as $index => $image)
                                <img src="{{ $image }}" 
                                     alt="Promo Logistics {{ $index + 1 }}" 
                                     class="hero-promo-image {{ $index === 0 ? 'active' : '' }}" 
                                     {{-- Optimasi: fetchpriority high hanya untuk gambar pertama, sisanya lazy --}}
                                     loading="{{ $index === 0 ? 'eager' : 'lazy' }}" 
                                     @if($index === 0) fetchpriority="high" @endif
                                     width="500" 
                                     height="500">
                            @endforeach
                        </div>
                    </div>
                </div>

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

      <!-- Navigasi Slider -->
      <div class="hero-nav-controls">
          <button class="nav-btn prev-slide" aria-label="Previous"><i class="fas fa-arrow-left"></i></button>
          <div class="slide-dots">
            @foreach($banners as $index => $banner)
                <span class="dot {{ $index == 0 ? 'active' : '' }}" onclick="goToSlide({{ $index }})"></span>
            @endforeach
          </div>
          <button class="nav-btn next-slide" aria-label="Next"><i class="fas fa-arrow-right"></i></button>
      </div>
    </section>

    <!-- TRACKING SECTION -->
<section id="tracking" class="section">
  <div class="container">
    <div class="floating-box">

      <div class="box-header">
        <button class="tab-btn active" onclick="openTab('tarif')">
          <i class="fas fa-calculator"></i> Cek Tarif
        </button>
        <button class="tab-btn" onclick="openTab('resi')">
          <i class="fas fa-search"></i> Lacak Paket
        </button>
      </div>

      <!-- RESI (DISEMBUNYIKAN) -->
      <div class="box-body hidden" id="tab-resi">
        <form action="{{ route('tracking.standard') }}" method="GET">
          <div class="input-group">
            <input type="text" name="resi"
              placeholder="Masukkan Nomor Resi (Contoh: DINO12345678)" required>
            <button type="submit" class="btn-action">
              LACAK SEKARANG
            </button>
          </div>
        </form>
        <p class="helper-text">
          *Gunakan koma (,) untuk melacak lebih dari satu resi.
        </p>
      </div>

      <!-- TARIF (AKTIF) -->
      <div class="box-body" id="tab-tarif">
        <div class="tarif-widget-header"
             style="text-align:center; margin-bottom:20px;">
          <h3 style="font-size:24px; font-weight:800; color:#1f2937;">
            CEK TARIF PENGIRIMAN
          </h3>
          <p style="color:#6b7280; font-size:14px;">
            Pilih kota asal dan tujuan untuk estimasi biaya pengiriman.
          </p>
        </div>

        <form action="{{ route('shipping.check') }}" method="GET">
          <div class="grid-form">

            <div class="grid-form-row grid-two">
              <div class="form-col">
                <label>Kota Asal</label>
                <select name="origin" class="select-light" required>
                  <option value="">Pilih Asal...</option>
                  @foreach($origins as $origin)
                    <option value="{{ $origin->id }}">
                      {{ $origin->type }} {{ $origin->name }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div class="form-col">
                <label>Kota Tujuan</label>
                <select name="destination_city" class="select-light" required>
                  <option value="">Pilih Asal Dulu...</option>
                </select>
              </div>
            </div>

            <div class="grid-form-row grid-three">
              <div class="form-col">
                <label>Kecamatan Tujuan</label>
                <select name="destination_district" class="select-light">
                  <option value="">Pilih Kota Dulu...</option>
                </select>
              </div>

              <div class="form-col">
                <label>Kelurahan Tujuan</label>
                <select name="destination_village" class="select-light">
                  <option value="">Pilih Kec. Dulu...</option>
                </select>
              </div>

              <div class="form-col">
                <label>Berat (Kg)</label>
                <input type="number" name="weight" class="input-light" value="1" min="1">
              </div>
            </div>

          </div>

          <div style="display:flex; justify-content:center; margin-top:20px;">
            <button type="submit" class="btn-red-block" style="max-width:360px;">
              <i class="fas fa-calculator"></i> CEK HARGA SEKARANG
            </button>
          </div>

        </form>
      </div>

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

<!-- ACHIEVEMENTS SECTION -->
<section class="achievements-modern">
  <div class="achievements-container">
    <div class="section-title text-center">
      <h2>Pencapaian Dino Logistik</h2>
      <p>Kepercayaan pelanggan adalah bukti dedikasi kami dalam memberikan layanan terbaik.</p>
    </div>
    
    <div class="achievements-grid-modern">
      <div class="achievement-card-modern">
        <div class="achievement-icon"><i class="fas fa-boxes"></i></div>
        <div class="achievement-number-modern" data-target="1000">0</div>
        <div class="achievement-label-modern">Resi (AWB)</div>
        <div class="achievement-desc">Pengiriman berhasil diproses</div>
      </div>
      
      <div class="achievement-card-modern">
        <div class="achievement-icon"><i class="fas fa-plane"></i></div>
        <div class="achievement-number-modern" data-target="10000000">0</div>
        <div class="achievement-label-modern">Total Tonase (Kg)</div>
        <div class="achievement-desc">Barang terkirim</div>
      </div>
      
      <div class="achievement-card-modern">
        <div class="achievement-icon"><i class="fas fa-map-marker-alt"></i></div>
        <div class="achievement-number-modern" data-target="900">0</div>
        <div class="achievement-label-modern">Coverage Area</div>
        <div class="achievement-desc">Melayani kota & daerah</div>
      </div>
    </div>
  </div>
</section>

    <!-- SERVICES SECTION -->
    <section id="services" class="zigzag-section bg-blue services-modern">
      <div class="zigzag-inner">
        <div class="section-title text-center">
          <h2>Layanan Unggulan Kami</h2>
          <p>Pilih kategori layanan yang paling sesuai dengan kebutuhan logistik Anda.</p>
        </div>
        
        <div class="services-grid-modern">
          @foreach($services as $service)
          <a href="{{ route('services.show', $service) }}" class="service-card-modern">
            <div class="service-image-overlay">
              <img src="{{ $service->image_url ?? asset('storage/' . $service->icon) }}" alt="{{ $service->name }}" loading="lazy">
              <div class="service-gradient-overlay"></div>
              <div class="service-text-overlay">
                <h3>{{ $service->title ?? $service->name }}</h3>
                <!-- <div class="service-arrow"><i class="fas fa-arrow-right"></i></div> -->
              </div>
            </div>
          </a>
          @endforeach
        </div>
      </div>
    </section>

    <!-- FLEET SECTION (OPTIMIZED: LAZY LOAD BACKGROUNDS) -->
    <section id="fleet" class="zigzag-section bg-blue fleet-hero-section">

  <!-- Dynamic Background -->
  <div class="fleet-dynamic-bg active"
       data-fleet="truck"
       style="background-image: url('/img/armadas/truck-1.webp');"></div>

  <div class="fleet-dynamic-bg"
       data-fleet="tronton"
       data-bg="/img/armadas/tronton-1.webp"></div>

  <div class="fleet-dynamic-bg"
       data-fleet="mobilvan"
       data-bg="/img/armadas/mobilvan-1.webp"></div>


  <div class="zigzag-inner">

    <div class="section-title text-center">
      <h2>Armada Kami</h2>
      <p>Berbagai jenis kendaraan kami siap memenuhi kebutuhan pengiriman Anda.</p>
    </div>

    <!-- HERO CARD -->
    <div class="fleet-hero-card" data-fleet="truck">
      <img src="/img/armadas/truck-1.webp"
           alt="Truck"
           fetchpriority="low">

      <div class="fleet-hero-content">
        <h3>Truck</h3>
        <div class="fleet-hero-specs">
          <span><i class="fas fa-weight-hanging"></i> Kapasitas: 3 - 7 Ton</span>
          <span><i class="fas fa-box"></i> Volume: 15 - 30 m³</span>
        </div>
      </div>
    </div>

    <!-- GRID ARMADA -->
    <div class="fleet-grid-compact">

      <!-- Truck -->
      <div class="fleet-card-compact"
           data-fleet="truck"
           data-title="Truck"
           data-capacity="3 - 7 Ton"
           data-volume="15 - 30 m³"
           data-image="/img/armadas/truck-1.webp">

        <div class="fleet-card-img">
          <img src="/img/armadas/truck-1.webp"
               alt="Truck"
              loading="lazy" width="225" height="150" class="img-optimized"">
        </div>

        <div class="fleet-card-content">
          <h4>Truck</h4>
        </div>
      </div>

      <!-- Tronton -->
      <div class="fleet-card-compact"
           data-fleet="tronton"
           data-title="Tronton"
           data-capacity="16 - 20 Ton"
           data-volume="40 - 50 m³"
           data-image="/img/armadas/tronton-1.webp">

        <div class="fleet-card-img">
          <img src="/img/armadas/tronton-1.webp"
               alt="Tronton"
               loading="lazy" width="225" height="150" class="img-optimized">
        </div>

        <div class="fleet-card-content">
          <h4>Tronton</h4>
        </div>
      </div>

      <!-- Mobil Van -->
      <div class="fleet-card-compact"
           data-fleet="mobilvan"
           data-title="Mobil Van"
           data-capacity="1 - 2 Ton"
           data-volume="8 - 12 m³"
           data-image="/img/armadas/mobilvan-1.webp">

        <div class="fleet-card-img">
          <img src="/img/armadas/mobilvan-1.webp"
               alt="Mobil Van"
               loading="lazy" width="225" height="150" class="img-optimized">
        </div>

        <div class="fleet-card-content">
          <h4>Mobil Van</h4>
        </div>
      </div>

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



    <!-- CLIENTS SECTION -->
<section class="zigzag-section bg-white clients-static-grid">
    <div class="section-title text-center">
        <h2>Partner Terpercaya Kami</h2>
        <p>Dipercaya oleh berbagai perusahaan terkemuka di Indonesia</p>
    </div>

    <div class="clients-outer-wrapper">
        <div class="clients-grid-container">
            @foreach($clients as $client)
                <div class="client-logo-item">
                    <div class="logo-inner">
                        <img src="{{ asset('storage/' . $client->image) }}" alt="{{ $client->name }}" loading="lazy">
                    </div>
                    <span class="client-name">{{ $client->name }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- <div class="clients-footer text-center">
        <p class="and-others">and many others...</p>
    </div> -->
</section>

    <!-- ABOUT SECTION -->
    <section id="about" class="about-modern-slider">
      <div class="about-slider-container">
        <div class="about-slides-wrapper">
          @foreach($abouts as $key => $about)
          <div class="about-slide {{ $key === 0 ? 'active' : '' }}" data-slide="{{ $key }}">
            <div class="about-slide-inner">
              <div class="about-text-section">
                @if($loop->first)
                <span class="about-subtitle">TENTANG DINO LOGISTICS</span>
                @endif
                <h2 class="about-title">{{ $about->title }}</h2>
                <div class="about-description">{!! $about->content !!}</div>
                
                @if($about->point_1 || $about->point_2 || $about->point_3)
                <div class="about-highlights">
                  @if($about->point_1)
                  <div class="highlight-item"><i class="fas fa-check-circle"></i><span>{{ $about->point_1 }}</span></div>
                  @endif
                  @if($about->point_2)
                  <div class="highlight-item"><i class="fas fa-check-circle"></i><span>{{ $about->point_2 }}</span></div>
                  @endif
                  @if($about->point_3)
                  <div class="highlight-item"><i class="fas fa-check-circle"></i><span>{{ $about->point_3 }}</span></div>
                  @endif
                </div>
                @endif
                
                @if($loop->first && ($about->button_link ?? false))
                <div class="about-cta">
                  <a href="{{ $about->button_link }}" class="btn-about-primary">
                    {{ $about->button_text ?? 'Hubungi Kami' }} <i class="fas fa-arrow-right"></i>
                  </a>
                </div>
                @endif
              </div>
              
              @if(!empty($about->image))
              <div class="about-image-section">
                <div class="about-image-wrapper">
                  <img src="{{ asset('storage/' . $about->image) }}" alt="{{ $about->title }}" loading="lazy">
                </div>
              </div>
              @endif
            </div>
          </div>
          @endforeach
        </div>
        
        @if($abouts->count() > 1)
        <button class="about-nav-btn about-prev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
        <button class="about-nav-btn about-next" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
        <div class="about-dots">
          @foreach($abouts as $key => $about)
          <span class="about-dot {{ $key === 0 ? 'active' : '' }}" data-slide="{{ $key }}"></span>
          @endforeach
        </div>
        @endif
      </div>
    </section>


    <!-- PROMO SECTION -->
    <section id="promo" class="zigzag-section bg-white">
      <div class="zigzag-inner">
        <div class="section-title">
          <h2>Promo Terbatas</h2>
          <p>Manfaatkan penawaran spesial untuk penghematan ongkos kirim Anda.</p>
        </div>
        <div class="promo-grid">
          @foreach($promos as $promo)
          <div class="promo-card">
            <div class="promo-img" style="background-image: url('{{ $promo->image_url }}');" loading="lazy">
              <span class="badge">Promo</span>
            </div>
            <div class="promo-content">
              <h3>{{ $promo->name }}</h3>
              <p>{{ Str::limit(strip_tags($promo->description), 100) }}</p>
              <a href="{{ route('promos.show', $promo->id) }}" class="link-promo">Lihat Detail</a>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>

    <!-- WHY US SECTION -->
    <section class="zigzag-section bg-blue">
      <div class="zigzag-inner">
        <div class="section-header">
          <h2>Kenapa Memilih Kami?</h2>
          <p>Keunggulan yang kami tawarkan untuk kenyamanan pengiriman Anda.</p>
        </div>
        <div class="why-us-grid">
          <div class="why-item">
            <i class="fas fa-shield-halved"></i>
            <h4>Keamanan Maksimal</h4>
            <p>Barang dilindungi sistem segel digital dan asuransi penuh.</p>
          </div>
          <div class="why-item">
            <i class="fas fa-clock"></i>
            <h4>Tepat Waktu</h4>
            <p>Komitmen kami adalah barang sampai sesuai estimasi jadwal.</p>
          </div>
          <div class="why-item">
            <i class="fas fa-tag"></i>
            <h4>Harga Bersaing</h4>
            <p>Biaya kirim yang kompetitif tanpa ada biaya tersembunyi.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- TESTIMONIALS -->
    <section class="zigzag-section bg-white">
        <div class="zigzag-inner">
            <div class="section-title">
                <h2>Apa Kata Mereka?</h2>
                <p>Kepuasan pelanggan adalah prioritas utama kami.</p>
            </div>
            <div class="services-grid">
                @foreach($testimonials as $testi)
                <div class="card" style="padding: 30px;">
                    <p style="font-style: italic; color: #6b7280; margin-bottom: 20px;">"{{ $testi['quote'] }}"</p>
                    <h4 style="margin-bottom: 5px; color: #0554c6;">{{ $testi['name'] }}</h4>
                    <small>{{ $testi['role'] }}</small>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- FAQ SECTION -->
    <section class="zigzag-section bg-blue">
      <div class="zigzag-inner">
        <div class="section-header">
          <h2>Pertanyaan Umum</h2>
          <p>Jawaban untuk pertanyaan yang sering diajukan.</p>
        </div>
        <div class="faq-wrapper">
          @foreach($faqs as $index => $faq)
          <div class="faq-item">
            <input type="checkbox" id="faq{{ $index }}" class="faq-toggle" />
            <label for="faq{{ $index }}" class="faq-header">
                {{ $faq->question }} <i class="fas fa-chevron-down"></i>
            </label>
            <div class="faq-body">{!! $faq->answer !!}</div>
          </div>
          @endforeach
        </div>
      </div>
    </section>


<!-- =========================================
   DINO LOGISTICS MAP + STATS (FULL BLEED)
========================================= -->
<section class="dmap" id="coverage">
  <div class="dmap__bleed">
    <div class="dmap__wrap">

      <!-- LEFT : MAP CARD -->
      <div class="dmap__card dmap__card--map">
        <div class="dmap__cardHead">
          <div class="dmap__kicker dmap__kicker--blue">COVERAGE AREA</div>
          <div class="dmap__headline">Jangkauan Dino Logistics</div>
          <div class="dmap__sub">Melayani pengiriman logistik darat, laut, dan udara ke berbagai kota besar dan pelosok daerah.</div>
        </div>

        <div class="dmap__map">
          <!-- Gambar Peta -->
          <img
            class="dmap__mapImg"
            src="{{ asset('/img/maps_dino.webp') }}"
            onerror="this.src='http://vireo-new.sisapp.com/wp-content/uploads/2026/01/WhatsApp_Image_2026-01-23_at_11.12.14-removebg-preview.png'"
            alt="Peta Jangkauan Dino Logistics"
            loading="lazy"
          />
        </div>

        <div class="dmap__note">
          Jaringan operasional Dino Logistics siap melayani hingga lebih dari <b>500 Kota & Kabupaten</b> di Indonesia.
        </div>
      </div>

      <!-- RIGHT : STATS CARD (Dynamic Data from Home) -->
      <div class="dmap__card dmap__card--stats">
        <div class="dmap__cardHead">
          <div class="dmap__kicker dmap__kicker--red">KAPASITAS & PENGALAMAN</div>
          <h2 class="dmap__title">Terpercaya di Seluruh Indonesia</h2>
          <p class="dmap__desc">
            Dipercaya oleh ribuan pelanggan, mulai dari UMKM hingga perusahaan multinasional, untuk pengiriman barang yang aman, tepat waktu, dan terjangkau.
          </p>
        </div>

        <div class="dmap__stats">
          <!-- Data Provinsi -->
          <div class="dmap__stat">
            <div class="dmap__num">34</div>
            <div class="dmap__lbl">Provinsi</div>
          </div>
          
          <!-- Data Cabang Dinamis -->
          <div class="dmap__stat">
            <div class="dmap__num">{{ isset($branches) ? $branches->count() : '30+' }}</div>
            <div class="dmap__lbl">Kantor Cabang</div>
          </div>
          
          <!-- Data Lokasi Dinamis -->
          <div class="dmap__stat">
            <div class="dmap__num">{{ isset($branchesWithCoordinates) ? $branchesWithCoordinates->count() : '500+' }}</div>
            <div class="dmap__lbl">Titik Lokasi</div>
          </div>
          
          <!-- Data Marketing -->
          <div class="dmap__stat">
            <div class="dmap__num">1 Jt+</div>
            <div class="dmap__lbl">Paket Terkirim</div>
          </div>
        </div>
      </div>

      <div class="dmap__cta-bottom">
        Jika lokasi belum terjangkau, <a href="https://wa.me/6281234567890" target="_blank">hubungi kami <i class="fab fa-whatsapp" style="font-size: 1.1em; margin-left: 2px;"></i></a>
      </div>

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

    <!-- CONTACT SECTION -->
    <section id="contact" class="zigzag-section bg-blue contact-modern">
      <div class="zigzag-inner">
        <div class="section-header">
          <h2>{{ $contact->title ?? 'Hubungi Kami' }}</h2>
          <p>{{ $contact->subtitle ?? 'Tim dukungan pelanggan kami siap membantu Anda setiap hari.' }}</p>
        </div>
        @if($contact)
        
        <div class="contact-modern-layout">
          <!-- LEFT COLUMN: Contact Information -->
          <div class="contact-info-modern">
            <div class="contact-modern-item">
              <div class="contact-modern-icon"><i class="fas fa-map-marker-alt"></i></div>
              <div class="contact-modern-text">
                <h4>Alamat Kantor</h4><p>{{ $contact->address }}</p>
              </div>
            </div>

            <a href="tel:{{ preg_replace('/[^0-9]/', '', $contact->phone) }}" class="contact-modern-item contact-modern-link">
              <div class="contact-modern-icon"><i class="fas fa-phone"></i></div>
              <div class="contact-modern-text">
                <h4>Telepon</h4><p>{{ $contact->phone }}</p>
              </div>
            </a>

            @if($contact->whatsapp)
            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contact->whatsapp) }}" target="_blank" class="contact-modern-item contact-modern-link contact-whatsapp">
              <div class="contact-modern-icon"><i class="fab fa-whatsapp"></i></div>
              <div class="contact-modern-text">
                <h4>WhatsApp</h4><p>{{ $contact->whatsapp }}</p>
              </div>
            </a>
            @endif

            <a href="mailto:{{ $contact->email }}" class="contact-modern-item contact-modern-link">
              <div class="contact-modern-icon"><i class="fas fa-envelope"></i></div>
              <div class="contact-modern-text">
                <h4>Email Kami</h4><p>{{ $contact->email }}</p>
              </div>
            </a>

            @if($contact->working_hours)
            <div class="contact-modern-item">
              <div class="contact-modern-icon"><i class="fas fa-clock"></i></div>
              <div class="contact-modern-text">
                <h4>Jam Operasional</h4><p>{{ $contact->working_hours }}</p>
              </div>
            </div>
            @endif
          </div>

          <!-- RIGHT COLUMN: Modern Map Card -->
          @if($contact->google_maps_embed)
          <div class="contact-map-modern">
            <div class="map-card-modern">
              <div class="map-gradient-overlay"></div>
              <div class="map-embed-wrapper">
                {!! $contact->google_maps_embed !!}
              </div>
              <a href="https://maps.google.com/?q={{ urlencode($contact->address) }}" target="_blank" class="map-open-btn">
                <i class="fas fa-external-link-alt"></i> Buka di Google Maps
              </a>
            </div>
          </div>
          @endif
        </div>

        @if(isset($contact->description) && !empty($contact->description))
        <div class="contact-description">
          <p>{{ Str::limit($contact->description, 200) }}</p>
        </div>
        @endif

        @else
        <div class="contact-empty-state">
          <i class="fas fa-info-circle"></i>
          <p>Informasi kontak belum tersedia.</p>
        </div>
        @endif
      </div>
    </section>

@push("scripts")
    <script>

    // PRELOADER SCRIPT (Menunggu semua gambar & aset selesai loading)
window.addEventListener('load', function() {
    const preloader = document.getElementById('dino-preloader');
    if (preloader) {
        // Kasih jeda dikit (300ms) biar maskotnya sempat eksis walau internet super cepat
        setTimeout(() => {
            preloader.classList.add('loaded');
            // Hapus dari DOM setelah efek transisi CSS (0.6s) selesai
            setTimeout(() => {
                preloader.style.display = 'none';
            }, 600); 
        }, 300);
    }
});

        // ANIMASI COUNTER ACHIEVEMENTS (DIPERCEPAT)
        document.addEventListener('DOMContentLoaded', function() {
            const achievementNumbers = document.querySelectorAll('.achievement-number-modern');
            let hasAnimated = false;

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                if (entry.isIntersecting && !hasAnimated) {
                    hasAnimated = true;
                    animateCounters();
                }
                });
            }, { threshold: 0.1 }); // Diubah jadi 0.1 agar lebih cepat memicu animasi

            const section = document.querySelector('.achievements-modern');
            if(section) observer.observe(section);

            function animateCounters() {
                achievementNumbers.forEach(number => {
                const target = parseInt(number.getAttribute('data-target'));
                const duration = 1500; // Animasi dipercepat dari 2000 ke 1500ms
                const increment = target / (duration / 16);
                let current = 0;

                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                    current = target;
                    clearInterval(timer);
                    }
                    if (target >= 1000000) {
                    number.textContent = (current / 1000000).toFixed(1) + 'M+';
                    } else if (target >= 1000) {
                    number.textContent = Math.floor(current).toLocaleString() + '+';
                    } else {
                    number.textContent = Math.floor(current) + '+';
                    }
                }, 16);
                });
            }
        });

        // HERO SLIDER SCRIPT
      document.addEventListener("DOMContentLoaded", function() {
    // 1. HERO SLIDER LAZY BACKGROUND
    let slides = document.querySelectorAll('.hero-slide-item');
    let currentSlide = 0;

    function showSlide(n) {
        slides[currentSlide].classList.remove('active');
        currentSlide = (n + slides.length) % slides.length;
        
        // Lazy load background image saat slide akan ditampilkan
        let activeSlide = slides[currentSlide];
        if (activeSlide.dataset.bg && !activeSlide.style.backgroundImage) {
            activeSlide.style.backgroundImage = `url('${activeSlide.dataset.bg}')`;
        }
        
        activeSlide.classList.add('active');
    }

    // Ganti background slide pertama segera
    if(slides[0] && slides[0].dataset.bg) {
        slides[0].style.backgroundImage = `url('${slides[0].dataset.bg}')`;
    }

    setInterval(() => showSlide(currentSlide + 1), 5000);

    // 2. PRELOADER OPTIMIZATION (CEPAT HILANG)
    const preloader = document.getElementById('dino-preloader');
    if (preloader) {
        // Alih-alih menunggu window.onload (yang menunggu semua gambar bawah),
        // kita hilangkan setelah Hero/DOM siap + jeda singkat.
        setTimeout(() => {
            preloader.classList.add('loaded');
            setTimeout(() => { preloader.style.display = 'none'; }, 600);
        }, 800); 
    }

    // 3. FLEET DYNAMIC BACKGROUND LAZY LOAD
    const fleetCards = document.querySelectorAll('.fleet-card-compact');
    const backgrounds = document.querySelectorAll('.fleet-dynamic-bg');
    
    fleetCards.forEach(card => {
        card.addEventListener('click', function() {
            const fleetId = this.getAttribute('data-fleet');
            backgrounds.forEach(bg => {
                if(bg.dataset.fleet === fleetId) {
                    if(!bg.style.backgroundImage && bg.dataset.bg) {
                        bg.style.backgroundImage = `url('${bg.dataset.bg}')`;
                    }
                    bg.classList.add('active');
                } else {
                    bg.classList.remove('active');
                }
            });
        });
    });
});
        // HERO PROMO IMAGE SLIDER
        document.addEventListener("DOMContentLoaded", function() {
            const promoImages = document.querySelectorAll('.hero-promo-image');
            if(promoImages.length > 1) {
                let currentPromoIndex = 0;
                setInterval(() => {
                    promoImages[currentPromoIndex].classList.remove('active');
                    currentPromoIndex = (currentPromoIndex + 1) % promoImages.length;
                    promoImages[currentPromoIndex].classList.add('active');
                }, 4000);
            }
        });

        // FLEET SECTION - OPTIMIZED DYNAMIC BACKGROUND LAZY LOAD
        document.addEventListener("DOMContentLoaded", function() {
            const fleetCards = document.querySelectorAll('.fleet-card-compact');
            const heroCard = document.querySelector('.fleet-hero-card');
            const backgrounds = document.querySelectorAll('.fleet-dynamic-bg');
            
            fleetCards.forEach(card => {
                card.addEventListener('click', function() {
                    const fleetId = this.getAttribute('data-fleet');
                    const title = this.getAttribute('data-title');
                    const capacity = this.getAttribute('data-capacity');
                    const volume = this.getAttribute('data-volume');
                    const image = this.getAttribute('data-image');
                    
                    fleetCards.forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    
                    backgrounds.forEach(bg => {
                        if(bg.getAttribute('data-fleet') === fleetId) {
                            // OPTIMASI: Lazy Load background image ketika diklik saja!
                            if(!bg.style.backgroundImage && bg.getAttribute('data-bg')) {
                                bg.style.backgroundImage = `url('${bg.getAttribute('data-bg')}')`;
                            }
                            bg.classList.add('active');
                        } else {
                            bg.classList.remove('active');
                        }
                    });
                    
                    if(heroCard) {
                        heroCard.style.opacity = '0';
                        heroCard.style.transform = 'scale(0.95)';
                        
                        setTimeout(() => {
                            heroCard.querySelector('img').src = image;
                            heroCard.querySelector('h3').textContent = title;
                            heroCard.querySelector('.fleet-hero-specs').innerHTML = `
                                <span><i class="fas fa-weight-hanging"></i> Kapasitas: ${capacity}</span>
                                <span><i class="fas fa-box"></i> Volume: ${volume}</span>
                            `;
                            heroCard.setAttribute('data-fleet', fleetId);
                            heroCard.style.opacity = '1';
                            heroCard.style.transform = 'scale(1)';
                        }, 300);
                    }
                });
            });
        });

        // ABOUT SECTION - MODERN SLIDER
        document.addEventListener("DOMContentLoaded", function() {
            const slides = document.querySelectorAll('.about-slide');
            const dots = document.querySelectorAll('.about-dot');
            const prevBtn = document.querySelector('.about-prev');
            const nextBtn = document.querySelector('.about-next');
            if(slides.length <= 1) return;
            
            let currentSlide = 0;
            
            function showSlide(index) {
                slides.forEach(slide => slide.classList.remove('active'));
                dots.forEach(dot => dot.classList.remove('active'));
                slides[index].classList.add('active');
                if(dots[index]) dots[index].classList.add('active');
            }
            
            if(nextBtn) nextBtn.addEventListener('click', () => { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); });
            if(prevBtn) prevBtn.addEventListener('click', () => { currentSlide = (currentSlide - 1 + slides.length) % slides.length; showSlide(currentSlide); });
            
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => { currentSlide = index; showSlide(currentSlide); });
            });
        });

        // Client Logo Tooltip Follow Cursor
        document.addEventListener("DOMContentLoaded", function() {
            const clientTooltip = document.createElement('div');
            clientTooltip.className = 'client-tooltip';
            document.body.appendChild(clientTooltip);

            document.querySelectorAll('.client-logo-item').forEach(item => {
                const clientName = item.querySelector('.client-name')?.textContent || item.querySelector('img')?.alt || 'Partner';
                
                item.addEventListener('mouseenter', function() {
                    clientTooltip.textContent = clientName;
                    clientTooltip.classList.add('show');
                });

                item.addEventListener('mousemove', function(e) {
                    clientTooltip.style.left = e.clientX + 'px';
                    clientTooltip.style.top = e.clientY + 'px';
                });

                item.addEventListener('mouseleave', function() {
                    clientTooltip.classList.remove('show');
                });
            });
        });


        
    </script>
@endpush
@endsection