@extends("main")

{{-- OPTIMASI 1: Title Spesifik --}}
@section("title", $promo->name . " - Promo Dino Logistics")

{{-- OPTIMASI 2: Meta Tags SEO & Open Graph --}}
@push('styles')
    <meta name="description" content="{{ Str::limit(strip_tags($promo->description), 160) }}">
    <link rel="canonical" href="{{ url()->current() }}">
    
    <meta property="og:title" content="{{ $promo->name }} - Promo Dino Logistics">
    <meta property="og:description" content="{{ Str::limit(strip_tags($promo->description), 160) }}">
    <meta property="og:image" content="{{ $promo->image_url ?? asset('img/logo-dino.png') }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="article">
@endpush

{{-- OPTIMASI 3: Inject Schema SaleEvent --}}
@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">Promo Spesial</span>
    {{-- H1 UTAMA --}}
    <h1>{{ $promo->name }}</h1>
    <p>Manfaatkan penawaran terbatas untuk penghematan ongkos kirim Anda.</p>
  </div>
</section>

<div class="page-wrapper">
  <div class="container">
    <div class="page-grid">
      
      <div class="page-content">
        @if($promo->image_url)
          <img 
            src="{{ $promo->image_url }}" 
            alt="Promo Spesial {{ $promo->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> Promo</span>
            <span><i class="far fa-clock"></i> Berlaku hingga: {{ $promo->end_date->format('d M Y') }}</span>
          </div>
          {{-- OPTIMASI 4: Ubah dari <h1> menjadi <h2> --}}
          <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937;">{{ $promo->name }}</h2>
        </div>

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

          @if($contact && $contact->whatsapp_formatted)
            <a href="https://wa.me/{{ $contact->whatsapp_formatted }}?text=Saya%20ingin%20berkonsultasi%20tentang%20promo%20{{ urlencode($promo->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> Klaim Promo Sekarang
            </a>
          @endif
        </div>

        <div style="margin-top: 48px; padding-top: 32px; border-top: 1px solid #e5e7eb;">
          <a href="{{ route('promos.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 Promo
          </a>
        </div>
      </div>

      <aside class="page-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-title">
            <i class="fas fa-gift"></i> Promo Lainnya
          </div>
          <div class="sidebar-menu">
            @forelse($sidebarPromos as $sidebarPromo)
              <a href="{{ route('promos.show', $sidebarPromo->id) }}" 
                 class="sidebar-link {{ $sidebarPromo->id === $promo->id ? 'active' : '' }}"
                 style="display: block; padding: 12px 16px; border-radius: 6px; text-decoration: none; color: #a8a3a3; transition: all 0.3s ease; {{ $sidebarPromo->id === $promo->id ? 'background: #0554c6; color: white;' : '' }}">
                <span><i class="fas fa-caret-right"></i> {{ $sidebarPromo->name }}</span>
                @if($sidebarPromo->id === $promo->id)
                  <i class="fas fa-check-circle" style="float: right;"></i>
                @endif
              </a>
            @empty
              <div style="padding: 12px 16px; color: #999; font-size: 14px;">Tidak ada promo aktif lainnya.</div>
            @endforelse
          </div>
        </div>

        <div class="sidebar-card" style="background: #0b1120; padding: 20px; border-radius: 12px; color: white;">
          <h5 style="margin: 0 0 16px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;">
            <i class="fas fa-calendar-alt" style="color: #0554c6;"></i> Periode Promo
          </h5>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div>
              <small style="color: #999; font-size: 12px; display: block; margin-bottom: 4px;">Mulai:</small>
              <strong style="font-size: 14px;">{{ $promo->start_date->format('d M Y') }}</strong>
            </div>
            <div>
              <small style="color: #999; font-size: 12px; display: block; margin-bottom: 4px;">Berakhir:</small>
              <strong style="font-size: 14px;">{{ $promo->end_date->format('d M Y') }}</strong>
            </div>
          </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 Bantuan?</h4>
            <p style="margin: 0 0 20px; font-size: 14px; opacity: 0.95;">Tim CS kami siap membantu Anda 24/7 untuk informasi promo lebih lanjut.</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';">
                Chat via WhatsApp
              </a>
            @endif
          </div>
        @endif
      </aside>

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

@endsection