@extends("main")

{{-- OPTIMASI 1: Title Tag yang lebih SEO friendly --}}
@section("title", (!empty($service->title) ? $service->title : $service->name) . " - Layanan Dino Logistics")

{{-- OPTIMASI 2: Inject Meta Tags & Schema AEO --}}
@push('styles')
    <meta name="description" content="{{ Str::limit(strip_tags($service->description), 160) }}">
    <link rel="canonical" href="{{ url()->current() }}">
    
    {{-- Open Graph untuk share ke WhatsApp / Sosmed --}}
    <meta property="og:title" content="{{ !empty($service->title) ? $service->title : $service->name }} - Dino Logistics">
    <meta property="og:description" content="{{ Str::limit(strip_tags($service->description), 160) }}">
    <meta property="og:image" content="{{ $service->image_url ?? ($service->media->first()?->original_url ?? asset('images/placeholder.png')) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="article">
@endpush

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

@section("content")

<section class="hero-red-section" style="padding: 120px 0 80px;">
  <div class="container hero-red-content">
    <span class="badge-white">Layanan Kami</span>
    {{-- H1 Utama Halaman (Hanya boleh ada 1) --}}
    <h1>{{ !empty($service->title) ? $service->title : $service->name }}</h1>
    <p>Solusi logistik terintegrasi untuk mendukung pertumbuhan bisnis Anda.</p>
  </div>
</section>

<div class="page-wrapper">
  <div class="container">
    <div class="page-grid">
      
      <div class="page-content">
        @if($service->image_url || $service->media->first())
          <img 
            src="{{ $service->image_url ?? $service->media->first()?->original_url ?? asset('images/placeholder.png') }}" 
            alt="Layanan {{ !empty($service->title) ? $service->title : $service->name }} Dino Logistics" 
            class="content-image"
            style="object-fit: cover; width: 100%; height: auto; border-radius: 12px; margin-bottom: 32px;"
          />
        @endif
        
        <div class="content-header">
          <div class="content-meta">
            <span><i class="far fa-folder"></i> Services</span>
            <span><i class="far fa-clock"></i> Updated: {{ $service->updated_at->format('M Y') }}</span>
          </div>
          {{-- OPTIMASI 3: Ubah H1 kedua menjadi H2 agar hierarki SEO tidak rusak --}}
          <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937;">{{ !empty($service->title) ? $service->title : $service->name }}</h2>
        </div>

        <div class="content-body">
          {!! $service->description !!}

          @if($contact && $contact->whatsapp_formatted)
            <a href="https://wa.me/{{ $contact->whatsapp_formatted }}?text=Saya%20ingin%20berkonsultasi%20tentang%20layanan%20{{ urlencode(!empty($service->title) ? $service->title : $service->name) }}" 
               target="_blank" 
               class="btn-whatsapp-large"
               style="display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 14px 28px; background: #25d366; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">
              <i class="fab fa-whatsapp"></i> Konsultasi via WhatsApp
            </a>
          @endif
        </div>

        <div style="margin-top: 48px; padding-top: 32px; border-top: 1px solid #e5e7eb;">
          <a href="{{ route('services.index') }}" class="btn-outline" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 2px solid #0554c6; color: #0554c6; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease;">
            <i class="fas fa-arrow-left"></i> Kembali ke Layanan
          </a>
        </div>
      </div>

      <aside class="page-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-title">
            <i class="fas fa-th-large"></i> Layanan Kami
          </div>
          <div class="sidebar-menu">
            @foreach($sidebarServices as $svc)
              <a href="{{ route('services.show', $svc) }}" 
                 class="sidebar-link {{ $svc->id === $service->id ? 'active' : '' }}"
                 style="display: block; padding: 12px 16px; border-radius: 6px; text-decoration: none; color: #a8a3a3; transition: all 0.3s ease; {{ $svc->id === $service->id ? 'background: #0554c6; color: white;' : '' }}">
                <span><i class="fas fa-caret-right"></i> {{ $svc->title }}</span>
                @if($svc->id === $service->id)
                  <i class="fas fa-check-circle" style="float: right;"></i>
                @endif
              </a>
            @endforeach
          </div>
        </div>

        @if($contact)
          <div class="sidebar-card consult-box" style="background: linear-gradient(135deg, #0554c6 0%, #00d2ff 100%); color: white; padding: 24px; border-radius: 12px; text-align: center;">
            <div class="consult-icon" style="font-size: 48px; margin-bottom: 16px;">
              <i class="fas fa-headset"></i>
            </div>
            <h4 style="margin: 0 0 12px; font-size: 18px; font-weight: 700;">Butuh Konsultasi?</h4>
            <p style="margin: 0 0 20px; font-size: 14px; opacity: 0.95;">Tim ahli kami siap membantu Anda menemukan solusi pengiriman terbaik.</p>
            @if($contact->whatsapp_formatted)
              <a href="https://wa.me/{{ $contact->whatsapp_formatted }}" 
                 target="_blank" 
                 class="btn-outline-white"
                 style="display: inline-block; padding: 10px 20px; border: 2px solid white; color: white; text-decoration: none; border-radius: 6px; font-weight: 600;"
                 onmouseover="this.style.background='white'; this.style.color='#0554c6';"
                 onmouseout="this.style.background='transparent'; this.style.color='white';">
                Hubungi Kami
              </a>
            @endif
          </div>
        @endif
      </aside>

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

@endsection