@extends('layouts.app')

@section('title', $product->{locale_field('name')})

@push('styles')
<style>
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  [x-cloak] { display: none !important; }
  /* Product detail responsive grid */
  .product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  .product-detail-gallery {
    max-width: 600px;
  }
  @media (max-width: 900px) {
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-detail-gallery { max-width: 100%; }
  }
  /* Stats banner responsive */
  .stats-banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--grey-100);
    border: 1px solid var(--grey-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 900px) {
    .stats-banner-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .stats-banner-grid { grid-template-columns: 1fr; }
  }
  /* Commercial advantages grid */
  .advantages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
  }
  @media (max-width: 768px) {
    .advantages-grid { grid-template-columns: 1fr; }
  }
  /* Related products grid */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 24px);
  }
  @media (max-width: 1024px) { .related-grid { grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 768px)  { .related-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px)  { .related-grid { grid-template-columns: 1fr; } }
  /* Industries grid */
  .industries-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: clamp(12px,2vw,20px);
  }
  @media (max-width: 1024px) { .industries-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px)  { .industries-grid { grid-template-columns: 1fr; } }
  /* Highlight badges responsive */
  .highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--grey-200);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
  }
  @media (max-width: 480px) {
    .highlight-grid { grid-template-columns: 1fr; }
  }
  /* CTA buttons mobile */
  @media (max-width: 540px) {
    .prod-cta-btns { flex-direction: column !important; }
    .prod-cta-btns a { width: 100%; }
  }
  /* Gallery Thumbnails */
  .gallery-thumb {
    flex-shrink: 0;
    width: 72px;
    aspect-ratio: 3/2;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border-width: 2px;
    border-style: solid;
    transition: all 0.15s;
  }
  .gallery-thumb.is-active {
    border-color: #2684FF;
    box-shadow: 0 0 0 3px rgba(38,132,255,0.2);
    opacity: 1;
  }
  .gallery-thumb.is-inactive {
    border-color: #E2E8F0;
    opacity: 0.65;
  }
  .lightbox-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
  }
  .lightbox-thumb.is-active {
    border-color: #2684FF;
    opacity: 1;
  }
  .lightbox-thumb.is-inactive {
    opacity: 0.4;
  }
  /* Zoom hint — show on main card hover */
  .main-image-card:hover .zoom-hint,
  [x-data] .cursor-zoom-in:hover .zoom-hint {
    opacity: 1 !important;
  }
  /* Page buttons for product list pagination */
  .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    background: var(--white);
    border: 1.5px solid var(--grey-100);
    cursor: pointer;
    transition: all 0.15s;
  }
  .page-btn:hover { background: var(--blue-pale); border-color: var(--blue-light); color: var(--blue); }
  .page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
</style>
@endpush

@section('content')

{{-- ══ BREADCRUMB ══ --}}
<nav style="padding-top:clamp(100px,12vw,150px);padding-bottom:16px;background:var(--off-white);border-bottom:1px solid var(--grey-100);" aria-label="Breadcrumb">
  <div class="container">
    <div style="display:flex;gap:6px;font-size:12px;font-weight:var(--w-semibold);letter-spacing:0.05em;color:var(--grey-400);flex-wrap:wrap;align-items:center;">
      <a href="{{ route('home') }}" style="color:var(--blue-light);">Home</a>
      <span>/</span>
      <a href="{{ route('products.index') }}" style="color:var(--blue-light);">{{ is_locale_en() ? 'Products' : 'Produk' }}</a>
      @if($product->category)
      <span>/</span>
      <a href="{{ route('products.category', $product->category->slug) }}" style="color:var(--blue-light);">{{ $product->category->{locale_field('name')} }}</a>
      @endif
      <span>/</span>
      <span style="color:var(--grey-500);">{{ Str::limit(strip_tags($product->{locale_field('name')}), 40) }}</span>
    </div>
  </div>
</nav>

{{-- ══ HERO / INTRO ══ --}}
<section style="padding:clamp(32px,5vw,56px) 0 clamp(40px,6vw,64px);background:var(--off-white);">
  <div class="container">
    <div class="product-detail-grid">

      {{-- Left: Image Gallery --}}
      @php
        $galleryImages = $product->images->unique('image')->values();
        $mainImage = $galleryImages->firstWhere('is_primary', true) ?? $galleryImages->first();
        $mainImgUrl = $mainImage ? image_url($mainImage->image) : ($product->thumbnail ? image_url($product->thumbnail) : '');
        $allImages = $galleryImages->isNotEmpty() ? $galleryImages : collect();
      @endphp

      <div class="reveal product-detail-gallery"
           x-data="productGallery({{ json_encode($allImages->map(fn($i) => ['url' => image_url($i->image), 'alt' => $i->alt_text ?? $product->{locale_field('name')}])->values()) }}, '{{ $mainImgUrl }}')"
           x-init="$watch('lightboxOpen', v => { document.body.style.overflow = v ? 'hidden' : '' })">

        {{-- ── Main image card ── --}}
        <div x-show="images.length"
             class="relative rounded-2xl overflow-hidden bg-gray-50 cursor-zoom-in select-none"
             style="aspect-ratio:4/3;border:1px solid var(--grey-200);"
             @click="openLightbox(currentIndex)">

          {{-- Image --}}
          <img :src="currentImg" :alt="currentAlt"
               class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
               onerror="this.style.opacity='0'">

          {{-- Prev / Next --}}
          <button x-show="images.length > 1" @click.stop="prev()"
                  class="absolute left-2.5 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-white/90 shadow-md flex items-center justify-center transition hover:bg-white hover:scale-110 border-0 cursor-pointer">
            <svg class="w-4 h-4 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
          </button>
          <button x-show="images.length > 1" @click.stop="next()"
                  class="absolute right-2.5 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-white/90 shadow-md flex items-center justify-center transition hover:bg-white hover:scale-110 border-0 cursor-pointer">
            <svg class="w-4 h-4 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
          </button>

          {{-- Counter badge --}}
          <span x-show="images.length > 1"
                x-text="(currentIndex + 1) + ' / ' + images.length"
                class="absolute top-3 right-3 text-white text-[10px] font-mono px-2.5 py-1 rounded-full"
                style="background:rgba(10,25,47,0.65);backdrop-filter:blur(4px);"></span>

          {{-- Zoom hint --}}
          <span class="zoom-hint absolute bottom-3 left-3 flex items-center gap-1 text-[10px] font-mono px-2.5 py-1 rounded-full opacity-0 transition-opacity duration-200"
                style="background:rgba(255,255,255,0.9);color:var(--grey-500);">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            {{ is_locale_en() ? 'Click to zoom' : 'Klik untuk zoom' }}
          </span>
        </div>

        {{-- Empty state --}}
        <div x-show="!images.length"
             class="flex items-center justify-center rounded-2xl bg-gray-50"
             style="aspect-ratio:4/3;border:1px solid var(--grey-200);">
          <div class="text-center text-gray-400">
            <svg class="w-14 h-14 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="text-sm">{{ is_locale_en() ? 'No images' : 'Tidak ada gambar' }}</p>
          </div>
        </div>

        {{-- ── Thumbnail strip ── --}}
        <div x-show="images.length > 1" class="relative mt-3" x-data="{ sc: 0 }">
          {{-- scroll left --}}
          <button x-show="sc > 0" @click="$refs.strip.scrollLeft -= 120"
                  class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white/90 shadow flex items-center justify-center border-0 cursor-pointer">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/></svg>
          </button>

          <div class="flex gap-2 overflow-x-auto pb-1 scrollbar-hide px-0.5"
               x-ref="strip" @scroll="sc = $el.scrollLeft">
            <template x-for="(img, i) in images" :key="i">
              <button @click="select(i)"
                      class="flex-shrink-0 rounded-lg overflow-hidden border-2 transition-all duration-150 cursor-pointer bg-transparent p-0"
                      :class="i === currentIndex
                        ? 'border-blue-500 shadow-[0_0_0_3px_rgba(38,132,255,0.25)] opacity-100'
                        : 'border-gray-200 opacity-60 hover:opacity-90'"
                      style="width:72px;aspect-ratio:3/2;">
                <img :src="img.url" onerror="this.style.opacity='0'"
                     class="w-full h-full object-cover bg-gray-100">
              </button>
            </template>
          </div>

          {{-- scroll right --}}
          <button @click="$refs.strip.scrollLeft += 120"
                  class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white/90 shadow flex items-center justify-center border-0 cursor-pointer">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/></svg>
          </button>
        </div>

        {{-- ══ LIGHTBOX — teleported to <body> so nothing clips it ══ --}}
        <template x-teleport="body">
          <div x-show="lightboxOpen"
               x-cloak
               @keydown.escape.window="lightboxOpen = false"
               @keydown.arrow-left.window.prevent="prev()"
               @keydown.arrow-right.window.prevent="next()"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0"
               x-transition:enter-end="opacity-100"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="opacity-100"
               x-transition:leave-end="opacity-0"
               class="fixed inset-0 z-[99999] flex flex-col"
               style="background:rgba(0,0,0,0.97);backdrop-filter:blur(20px);">

            {{-- TOP BAR --}}
            <div class="absolute top-0 inset-x-0 z-10 flex items-center justify-between px-5 py-4"
                 style="background:linear-gradient(to bottom,rgba(0,0,0,0.7),transparent);">
              <div class="flex items-center gap-3">
                <span class="text-white/50 text-xs font-mono tracking-widest"
                      x-text="(currentIndex + 1) + ' / ' + images.length"></span>
                <span class="hidden sm:block text-white/30 text-[11px] font-mono">
                  {{ is_locale_en() ? 'ESC to close · ← → navigate' : 'ESC tutup · ← → navigasi' }}
                </span>
              </div>
              <button @click="lightboxOpen = false"
                      class="w-10 h-10 rounded-full flex items-center justify-center text-white cursor-pointer border border-white/15 transition hover:bg-white/20"
                      style="background:rgba(255,255,255,0.08);">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
              </button>
            </div>

            {{-- MAIN IMAGE AREA — flex:1 = takes ALL remaining height --}}
            <div class="flex-1 flex items-center justify-center relative overflow-hidden"
                 @click="lightboxOpen = false">

              {{-- Prev --}}
              <button x-show="images.length > 1"
                      @click.stop="prev()"
                      class="absolute left-3 sm:left-5 top-1/2 -translate-y-1/2 z-20 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center text-white cursor-pointer border border-white/15 transition hover:bg-white/20"
                      style="background:rgba(255,255,255,0.07);">
                <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
              </button>

              {{-- Image --}}
              <img :src="currentImg" :alt="currentAlt"
                   @click.stop
                   class="block object-contain rounded-sm cursor-default"
                   style="max-width:min(calc(100vw - 120px), 1200px);max-height:calc(100vh - 160px);width:auto;height:auto;box-shadow:0 24px 80px rgba(0,0,0,0.7);">

              {{-- Next --}}
              <button x-show="images.length > 1"
                      @click.stop="next()"
                      class="absolute right-3 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center text-white cursor-pointer border border-white/15 transition hover:bg-white/20"
                      style="background:rgba(255,255,255,0.07);">
                <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
              </button>
            </div>

            {{-- THUMBNAIL STRIP --}}
            <div x-show="images.length > 1"
                 class="flex-shrink-0 flex justify-center pb-4 pt-2"
                 style="background:linear-gradient(to top,rgba(0,0,0,0.7),transparent);"
                 @click.stop>
              <div class="flex gap-2 overflow-x-auto scrollbar-hide px-2 pb-1" style="max-width:min(90vw,800px);">
                <template x-for="(img, i) in images" :key="i">
                  <button @click.stop="select(i)"
                          class="flex-shrink-0 w-14 h-14 rounded-lg overflow-hidden border-2 transition-all duration-150 cursor-pointer bg-transparent p-0"
                          :class="i === currentIndex
                            ? 'border-blue-500 opacity-100 scale-105 shadow-[0_0_0_3px_rgba(38,132,255,0.45)]'
                            : 'border-white/20 opacity-50 hover:opacity-80'">
                    <img :src="img.url" onerror="this.style.opacity='0'"
                         class="w-full h-full object-cover">
                  </button>
                </template>
              </div>
            </div>

          </div>
        </template>

      </div>

      <script>
        function productGallery(images, defaultImg) {
          const idx = images.findIndex(i => i.url === defaultImg);
          return {
            images,
            currentIndex: idx >= 0 ? idx : 0,
            lightboxOpen: false,
            get currentImg()  { return this.images[this.currentIndex]?.url  || null; },
            get currentAlt()  { return this.images[this.currentIndex]?.alt  || '';   },
            select(i)         { this.currentIndex = i; },
            prev()            { this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length; },
            next()            { this.currentIndex = (this.currentIndex + 1) % this.images.length; },
            openLightbox(i)   { this.currentIndex = i; this.lightboxOpen = true; },
          };
        }
      </script>





      {{-- Right: Product Info --}}
      <div class="reveal">
        @if($product->brand)
        <div style="font-size:11px;font-weight:var(--w-bold);letter-spacing:0.15em;text-transform:uppercase;color:var(--blue-light);margin-bottom:10px;">{{ $product->brand->name }}</div>
        @endif
        <h1 style="font-size:clamp(20px,3.5vw,34px);font-weight:var(--w-black);color:var(--navy);line-height:1.15;letter-spacing:-0.01em;margin-bottom:12px;">{{ $product->{locale_field('name')} }}</h1>
        <div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;">
          @if($product->sku)
          <span style="font-size:11px;color:var(--grey-400);font-weight:var(--w-semibold);letter-spacing:0.05em;">SKU: <strong style="color:var(--navy);">{{ $product->sku }}</strong></span>
          @endif
          @if($product->category)
          <span style="font-size:11px;color:var(--grey-400);font-weight:var(--w-semibold);letter-spacing:0.05em;">{{ is_locale_en() ? 'Category' : 'Kategori' }}: <strong style="color:var(--navy);">{{ $product->category->{locale_field('name')} }}</strong></span>
          @endif
        </div>
        <p style="font-size:clamp(14px,1.5vw,16px);color:var(--grey-500);line-height:1.7;margin-bottom:24px;">{{ $product->{locale_field('short_description')} }}</p>

        {{-- SPAREPART: Part Number + Stock --}}
        @if($product->is_sparepart)
        <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;">
          @if($product->part_number)
          <span style="font-family:ui-monospace,monospace;font-size:12px;color:var(--grey-500);background:var(--off-white);padding:4px 12px;border-radius:50px;border:1px solid var(--grey-100);">Part #: <strong style="color:var(--navy);">{{ $product->part_number }}</strong></span>
          @endif
          @if($product->stock_status)
            @php $badge = $product->stock_badge; @endphp
            @if($badge)
            <span>{!! $badge !!}</span>
            @endif
          @endif
        </div>
        @endif

        {{-- Price (admin only for sparepart) --}}
        <div style="margin-bottom:20px;">
          @if($product->is_sparepart)
            <div style="font-size:12px;color:var(--grey-400);font-weight:var(--w-semibold);letter-spacing:0.05em;">{{ is_locale_en() ? 'Contact for Price' : 'Hubungi untuk Harga' }}</div>
          @else
          <div style="font-size:clamp(16px,2vw,20px);font-weight:var(--w-black);color:var(--accent);">{{ is_locale_en() ? 'Contact for Price' : 'Hubungi untuk Harga' }}</div>
          @endif
        </div>

        {{-- CTA Buttons --}}
        <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:24px;">
          <a href="{{ $product->whatsapp_link }}" target="_blank" rel="noopener" class="btn btn--accent btn--lg" style="width:100%;justify-content:center;">
            <svg fill="currentColor" viewBox="0 0 16 16" style="width:18px;height:18px;margin-right:8px;"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/></svg>
            {{ $product->is_sparepart ? (is_locale_en() ? 'Order via WhatsApp' : 'Pesan via WhatsApp') : (is_locale_en() ? 'Request Quote via WhatsApp' : 'Minta Penawaran via WhatsApp') }}
          </a>
          <a href="{{ route('contact.index') }}?product={{ $product->id }}" class="btn btn--primary btn--lg" style="width:100%;justify-content:center;">{{ is_locale_en() ? 'Send Inquiry' : 'Kirim Pertanyaan' }}</a>
        </div>

        {{-- SPAREPART: Compatibility --}}
        @if($product->is_sparepart && $product->compatibility)
        <div style="margin-bottom:24px;padding:16px;background:var(--off-white);border:1px solid var(--grey-100);border-radius:var(--radius-md);">
          <div style="font-size:10px;font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:0.12em;color:var(--blue-light);margin-bottom:8px;">{{ is_locale_en() ? 'Compatible With' : 'Cocok Untuk' }}</div>
          <div style="font-size:13px;color:var(--grey-700);line-height:1.6;">{{ $product->compatibility }}</div>
        </div>
        @endif

        {{-- Key Metric Highlights (compressor only) --}}
        @if(!$product->is_sparepart && $product->highlights->count() > 0)
        <div class="highlight-grid">
          @foreach($product->highlights as $hl)
          @php $hlSpec = $product->specs->where('key_id', $hl->value_id)->first(); @endphp
          <div style="text-align:center;padding:clamp(12px,2vw,18px) 8px;background:var(--white);">
            <div style="font-size:clamp(18px,2.5vw,24px);font-family:ui-monospace,monospace;font-weight:var(--w-bold);color:var(--blue-light);line-height:1.1;margin-bottom:4px;">{{ $hlSpec?->value ?? $hl->{locale_field('value')} }}</div>
            <div style="font-size:9px;font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:1px;color:var(--grey-500);">{{ $hl->{locale_field('value')} }}</div>
          </div>
          @endforeach
        </div>
        @endif

        {{-- Advantage Badges --}}
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:20px;border-top:1px solid var(--grey-100);">
          @php $advantages = [
            ['label' => is_locale_en() ? '24/7 Technical Support' : 'Dukungan Teknis 24/7', 'color' => 'blue'],
            ['label' => is_locale_en() ? '24-Hour Response Quote' : 'Respon 24 Jam', 'color' => 'accent'],
            ['label' => is_locale_en() ? 'CE & ISO Certified' : 'Tersertifikasi CE & ISO', 'color' => 'blue'],
            ['label' => is_locale_en() ? 'Global Logistics' : 'Logistik Global', 'color' => 'accent'],
            ['label' => is_locale_en() ? 'OEM & ODM Support' : 'Dukungan OEM & ODM', 'color' => 'blue'],
          ]; @endphp
          @foreach($advantages as $adv)
          <span style="font-size:10px;font-weight:var(--w-bold);letter-spacing:0.08em;text-transform:uppercase;padding:5px 12px;border-radius:50px;{{ $adv['color'] == 'blue' ? 'background:var(--blue-pale);color:var(--blue);' : 'background:var(--accent-dim);color:var(--accent-deep);' }}">{{ $adv['label'] }}</span>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ══ COMPRESSOR-ONLY SECTIONS ══ --}}
@if(!$product->is_sparepart)

{{-- ══ STATS BANNER ══ --}}
@if($product->specs->count() > 0)
@php
  $perfSpecs = $product->specs->where('spec_group', 'Performance');
  $highlightSpecs = $perfSpecs->take(4);
@endphp
@if($highlightSpecs->count() > 0)
<section style="padding:clamp(24px,4vw,40px) 0;background:var(--white);border-bottom:1px solid var(--grey-100);">
  <div class="container">
    <div class="stats-banner-grid">
      @foreach($highlightSpecs as $spec)
      <div style="text-align:center;background:var(--white);padding:clamp(16px,3vw,28px) 16px;">
        <div style="font-size:clamp(18px,3vw,32px);font-family:ui-monospace,monospace;font-weight:var(--w-black);color:var(--navy);line-height:1;">{{ $spec->value }} <span style="font-size:clamp(11px,1.2vw,14px);color:var(--grey-400);">{{ $spec->unit }}</span></div>
        <div style="font-size:10px;font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:1px;color:var(--grey-500);margin-top:8px;">{{ $spec->{locale_field('key')} }}</div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endif
@endif

{{-- ══ COMMERCIAL + TECHNICAL ══ --}}
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--white);">
  <div class="container">
    <div class="advantages-grid">
      <div class="reveal">
        <div class="eyebrow" style="color:var(--accent);">{{ is_locale_en() ? 'Commercial + Technical' : 'Keunggulan' }}</div>
        <h2 style="font-size:clamp(18px,2.5vw,28px);font-weight:var(--w-black);color:var(--navy);text-transform:uppercase;line-height:1.2;margin-bottom:20px;">{{ is_locale_en() ? 'Why Choose This Series' : 'Keunggulan Produk Ini' }}</h2>
        <ul style="display:flex;flex-direction:column;gap:12px;">
          @php $whyItems = [
            ['strong_id'=>'Desain optimal','strong_en'=>'Optimized design','desc_id'=>'screw airend yang dirancang khusus untuk efisiensi maksimal','desc_en'=>'screw airend designed specifically for maximum efficiency','color'=>'blue'],
            ['strong_id'=>'Suhu kerja lebih rendah','strong_en'=>'Lower discharge temperatures','desc_id'=>'untuk umur komponen yang lebih panjang','desc_en'=>'for extended component life and reliability','color'=>'accent'],
            ['strong_id'=>'Kapasitas udara besar','strong_en'=>'Massive FAD','desc_id'=>'(Free Air Delivery) lebih besar dari unit standar','desc_en'=>'Free Air Delivery compared to standard units','color'=>'blue'],
            ['strong_id'=>'Sistem kontrol canggih','strong_en'=>'Advanced control system','desc_id'=>'untuk stabilitas tekanan dan monitoring presisi','desc_en'=>'for precise pressure stability and monitoring','color'=>'accent'],
          ]; @endphp
          @foreach($whyItems as $wi)
          <li style="display:flex;align-items:flex-start;gap:10px;font-size:clamp(13px,1.3vw,14px);color:var(--grey-500);line-height:1.6;">
            <span style="width:22px;height:22px;border-radius:50%;background:{{ $wi['color']=='blue'?'var(--blue-pale)':'var(--accent-dim)' }};color:{{ $wi['color']=='blue'?'var(--blue-light)':'var(--accent)' }};display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:var(--w-bold);">✓</span>
            <span><strong style="color:var(--navy);">{{ is_locale_en() ? $wi['strong_en'] : $wi['strong_id'] }}</strong> {{ is_locale_en() ? $wi['desc_en'] : $wi['desc_id'] }}</span>
          </li>
          @endforeach
        </ul>
      </div>
      <div class="reveal">
        <div class="eyebrow" style="color:var(--accent);">30% {{ is_locale_en() ? 'Energy Saving' : 'Hemat Energi' }}</div>
        <h2 style="font-size:clamp(18px,2.5vw,28px);font-weight:var(--w-black);color:var(--navy);text-transform:uppercase;line-height:1.2;margin-bottom:20px;">{{ is_locale_en() ? 'What Users Face' : 'Masalah Umum' }} <span class="text-blue">VS</span> {{ is_locale_en() ? 'How We Solve' : 'Solusi Kami' }}</h2>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <div style="background:#FFF5F5;border:1px solid rgba(192,57,43,0.2);padding:clamp(16px,3vw,24px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);">
            <div style="font-size:10px;font-family:monospace;text-transform:uppercase;letter-spacing:1px;color:var(--danger);margin-bottom:10px;">[✗] {{ is_locale_en() ? 'Common Issue' : 'Masalah Umum' }}</div>
            <p style="font-size:clamp(12px,1.3vw,13px);color:var(--grey-700);line-height:1.6;font-weight:var(--w-medium);">{{ is_locale_en() ? 'Huge energy loss from reducing 7-bar air to 2-3 bar. High maintenance costs of running standard units at low load.' : 'Kehilangan energi besar dari reduksi tekanan 7-bar ke 2-3 bar. Biaya perawatan tinggi pada unit standar beban rendah.' }}</p>
          </div>
          <div style="background:var(--navy-deep);border:1px solid rgba(0,184,217,0.3);padding:clamp(16px,3vw,24px);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);">
            <div style="font-size:10px;font-family:monospace;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:10px;">[✓] {{ is_locale_en() ? 'Crius Solution' : 'Solusi Crius' }}</div>
            <p style="font-size:clamp(12px,1.3vw,13px);color:var(--white);line-height:1.6;font-weight:var(--w-medium);">{{ is_locale_en() ? 'Eliminate throttling loss and cut power bills by 30% or more. Increased air delivery ensures stable production.' : 'Hilangkan kerugian throttling dan potong biaya listrik hingga 30%+. Kapasitas udara meningkat memastikan produksi stabil.' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{-- ══ SPECS TABLE ══ --}}
@if($product->specs->count() > 0)
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--off-white);">
  <div class="container">
    <div class="section-header reveal">
      <div class="eyebrow">{{ is_locale_en() ? 'Technical Data' : 'Data Teknis' }}</div>
      <h2 class="heading-xl">{{ is_locale_en() ? 'Technical' : 'Spesifikasi' }} <span class="text-blue">{{ is_locale_en() ? 'Specifications' : 'Teknis' }}</span></h2>
      <p>{{ is_locale_en() ? 'Complete specifications for model comparison and project planning.' : 'Spesifikasi lengkap untuk perbandingan model dan perencanaan proyek.' }}</p>
    </div>
    @foreach($product->grouped_specs as $group => $specs)
    <div class="reveal" style="margin-bottom:32px;">
      <h3 style="font-size:clamp(14px,1.8vw,18px);font-weight:var(--w-bold);color:var(--blue-light);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:12px;">{{ $group }}</h3>
      <div style="overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--grey-200);box-shadow:var(--shadow-card);overflow:hidden;">
        <table style="width:100%;min-width:480px;border-collapse:collapse;background:var(--white);">
          <thead style="background:var(--grey-100);">
            <tr>
              <th style="width:40%;padding:clamp(10px,2vw,16px) clamp(12px,2vw,20px);font-family:monospace;text-transform:uppercase;letter-spacing:1px;font-size:clamp(11px,1.2vw,13px);text-align:left;color:var(--navy);">{{ is_locale_en() ? 'Parameter' : 'Parameter' }}</th>
              <th style="width:40%;padding:clamp(10px,2vw,16px) clamp(12px,2vw,20px);font-family:monospace;text-transform:uppercase;letter-spacing:1px;font-size:clamp(11px,1.2vw,13px);text-align:left;color:var(--navy);">{{ is_locale_en() ? 'Value' : 'Nilai' }}</th>
              <th style="width:20%;padding:clamp(10px,2vw,16px) clamp(12px,2vw,20px);font-family:monospace;text-transform:uppercase;letter-spacing:1px;font-size:clamp(11px,1.2vw,13px);text-align:left;color:var(--navy);">{{ is_locale_en() ? 'Unit' : 'Satuan' }}</th>
            </tr>
          </thead>
          <tbody>
            @foreach($specs as $spec)
            <tr style="border-bottom:1px solid var(--grey-50);background:var(--white);">
              <td style="padding:clamp(12px,1.8vw,18px) clamp(12px,2vw,20px);font-weight:var(--w-bold);color:var(--navy);font-size:clamp(14px,1.5vw,17px);">{{ $spec->{locale_field('key')} }}</td>
              <td style="padding:clamp(12px,1.8vw,18px) clamp(12px,2vw,20px);font-family:monospace;color:var(--grey-700);font-size:clamp(14px,1.5vw,17px);">{{ $spec->value }}</td>
              <td style="padding:clamp(12px,1.8vw,18px) clamp(12px,2vw,20px);font-family:monospace;color:var(--grey-500);font-size:clamp(14px,1.5vw,17px);">{{ $spec->unit }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
    @endforeach
  </div>
</section>
@endif

{{-- ══ DESCRIPTION ══ --}}
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--white);">
  <div class="container">
    <div class="reveal" style="max-width:860px;">
      <div class="eyebrow">{{ is_locale_en() ? 'Description' : 'Deskripsi' }}</div>
      <h2 class="heading-xl" style="margin-bottom:24px;">{{ is_locale_en() ? 'Product' : 'Deskripsi' }} <span class="text-blue">{{ is_locale_en() ? 'Description' : 'Produk' }}</span></h2>
      <div style="font-size:clamp(14px,1.5vw,16px);color:var(--grey-500);line-height:1.9;">
        <style>.prod-desc img{max-width:min(100%,340px);height:auto;display:block;border-radius:var(--radius-md);margin:16px 0;}</style>
        <div class="prod-desc">{!! $product->{locale_field('description')} !!}</div>
      </div>
    </div>
  </div>
</section>

{{-- ══ INDUSTRIES ══ --}}
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--navy-deep);">
  <div class="container">
    <div class="reveal" style="text-align:center;margin-bottom:clamp(28px,4vw,44px);">
      <div class="eyebrow" style="justify-content:center;color:var(--accent);">{{ is_locale_en() ? 'Best-Fit Industries' : 'Industri yang Cocok' }}</div>
      <h2 class="heading-xl" style="color:var(--white);">{{ is_locale_en() ? 'Recommended' : 'Aplikasi' }} <span style="color:var(--blue-light);">{{ is_locale_en() ? 'Applications' : 'Direkomendasikan' }}</span></h2>
    </div>
    <div class="industries-grid">
      @php $industries = [
        ['icon'=>'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z','title_id'=>'Pertambangan','title_en'=>'Mining & Quarry','desc_id'=>'Kompresor untuk tambang batu bara, nikel, dan emas dengan tekanan tinggi.','desc_en'=>'Compressors for coal, nickel, and gold mining with high pressure.'],
        ['icon'=>'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z','title_id'=>'Manufaktur','title_en'=>'Manufacturing','desc_id'=>'Kompresor screw industrial untuk pabrik, otomotif, dan elektronik.','desc_en'=>'Industrial screw compressors for factories, automotive, and electronics.'],
        ['icon'=>'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z','title_id'=>'Minyak & Gas','title_en'=>'Oil & Gas','desc_id'=>'Kompresor khusus eksplorasi migas untuk lingkungan ekstrem.','desc_en'=>'Specialized compressors for oil & gas exploration in extreme environments.'],
        ['icon'=>'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z','title_id'=>'Konstruksi','title_en'=>'Construction','desc_id'=>'Kompresor portable untuk konstruksi, tunneling, dan infrastruktur.','desc_en'=>'Portable compressors for construction, tunneling, and infrastructure.'],
      ]; @endphp
      @foreach($industries as $ind)
      <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-md);padding:clamp(16px,2.5vw,24px) clamp(14px,2vw,20px);transition:all 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.07)'" onmouseout="this.style.background='rgba(255,255,255,0.04)'">
        <div style="width:38px;height:38px;background:var(--accent-dim);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:14px;">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:18px;height:18px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $ind['icon'] }}"/></svg>
        </div>
        <h4 style="font-size:clamp(12px,1.3vw,14px);font-weight:var(--w-bold);color:var(--white);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;">{{ is_locale_en() ? $ind['title_en'] : $ind['title_id'] }}</h4>
        <p style="font-size:clamp(11px,1.2vw,12px);color:rgba(255,255,255,0.45);line-height:1.6;">{{ is_locale_en() ? $ind['desc_en'] : $ind['desc_id'] }}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ══ FAQ ══ --}}
@if($faqs->count() > 0)
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--white);">
  <div class="container" style="max-width:800px;">
    <div class="section-header section-header--center reveal">
      <div class="eyebrow eyebrow--center">FAQ</div>
      <h2 class="heading-xl">{{ is_locale_en() ? 'Frequently Asked' : 'Pertanyaan' }} <span class="text-blue">{{ is_locale_en() ? 'Questions' : 'Umum' }}</span></h2>
    </div>
    <div class="accordion reveal">
      @foreach($faqs as $faq)
      <div class="accordion-item">
        <button class="accordion-btn" onclick="toggleFaq(this)">
          <span class="accordion-btn__text">{{ $faq->{locale_field('question')} }}</span>
          <div class="accordion-btn__icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg></div>
        </button>
        <div class="accordion-body">
          <div class="accordion-body__inner">{{ $faq->{locale_field('answer')} }}</div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endif

@endif {{-- end compressor-only sections --}}

{{-- ══ RELATED PRODUCTS ══ --}}
@if($related->count() > 0)
<section style="padding:clamp(48px,7vw,72px) 0;background:var(--off-white);">
  <div class="container">
    <div class="section-header reveal">
      <div class="eyebrow">{{ is_locale_en() ? 'Related' : 'Produk' }}</div>
      <h2 class="heading-xl">{{ is_locale_en() ? 'Related' : 'Produk' }} <span class="text-blue">{{ is_locale_en() ? 'Products' : 'Terkait' }}</span></h2>
    </div>
    <div class="related-grid">
      @foreach($related as $rel)
      <a href="{{ route('products.show', [$rel->category->slug, $rel->slug]) }}" class="prod-card reveal" style="text-decoration:none;">
        <div class="prod-card__visual">
          @if($rel->thumbnail)
            <img src="{{ image_url($rel->thumbnail) }}" alt="{{ $rel->{locale_field('name')} }}" loading="lazy">
          @else
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          @endif
          @if($rel->category)
          <div class="prod-card__badge"><span class="badge badge--navy" style="font-size:9px;padding:3px 8px;border-radius:50px;">{{ $rel->category->{locale_field('name')} }}</span></div>
          @endif
        </div>
        <div class="prod-card__body">
          <div class="prod-card__title">{{ $rel->{locale_field('name')} }}</div>
          <div class="btn btn--primary btn--sm" style="margin-top:auto;border-radius:var(--radius-md);">{{ is_locale_en() ? 'Details' : 'Detail' }}</div>
        </div>
      </a>
      @endforeach
    </div>
  </div>
</section>
@endif

{{-- ══ CTA ══ --}}
<section style="padding:clamp(48px,7vw,72px) 0;text-align:center;background:var(--navy);">
  <div class="container" style="max-width:640px;">
    <div class="reveal">
      <div class="eyebrow" style="justify-content:center;color:var(--grey-400);">{{ is_locale_en() ? 'Get Started' : 'Mulai' }}</div>
      <h2 class="heading-xl" style="color:var(--white);margin-bottom:16px;">{{ is_locale_en() ? 'Ready to Optimize' : 'Siap Optimalkan' }} <span style="color:var(--blue-light);">{{ is_locale_en() ? 'Your System?' : 'Sistem Anda?' }}</span></h2>
      <p style="color:rgba(255,255,255,0.4);margin-bottom:32px;font-size:clamp(13px,1.5vw,15px);">{{ is_locale_en() ? 'Contact our engineering team for a custom solution tailored to your needs.' : 'Hubungi tim engineering kami untuk solusi kustom sesuai kebutuhan Anda.' }}</p>
      <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;" class="prod-cta-btns">
        <a href="{{ $product->whatsapp_link }}" target="_blank" rel="noopener" class="btn btn--accent btn--lg"><svg fill="currentColor" viewBox="0 0 16 16" style="width:18px;height:18px;margin-right:6px;"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/></svg>WhatsApp</a>
        <a href="{{ route('contact.index') }}" class="btn btn--outline-white btn--lg">{{ is_locale_en() ? 'Contact Us' : 'Hubungi Kami' }} →</a>
      </div>
    </div>
  </div>
</section>

@endsection