@extends('layouts.app')

@section('title', is_locale_en() ? 'Products' : 'Produk')

@push('styles')
<style>
  /* ── Products Grid ── */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  @media (max-width: 1280px) { .products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
  @media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
  @media (max-width: 520px)  { .products-grid { grid-template-columns: 1fr; gap: 14px; } }

  /* ── Product Card ── */
  .pcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .pcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 82, 204, 0.13);
    border-color: rgba(38, 132, 255, 0.4);
  }

  /* Image area — fixed 3:2 ratio */
  .pcard__img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #F1F5F9;
    overflow: hidden;
    flex-shrink: 0;
  }
  .pcard__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
  }
  .pcard:hover .pcard__img img { transform: scale(1.05); }
  .pcard__img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
  }
  .pcard__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 25, 47, 0.7);
    padding: 3px 9px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
  }

  /* Card body */
  .pcard__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    border-top: 1px solid #F1F5F9;
  }

  /* SKU / Brand meta row */
  .pcard__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 7px;
  }
  .pcard__sku  { color: #2684FF; font-family: ui-monospace, monospace; }
  .pcard__sep  { color: #CBD5E1; }
  .pcard__brand { color: #94A3B8; }

  /* Title */
  .pcard__title {
    font-size: 15px;
    font-weight: 900;
    color: #0A192F;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Description */
  .pcard__desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
  }

  /* Specs bar */
  .pcard__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #E2E8F0;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    /* CRITICAL: prevents grid from expanding beyond card width */
    min-width: 0;
    width: 100%;
  }
  .pcard__spec-item {
    background: #fff;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s;
    /* CRITICAL: grid children need this to respect overflow */
    min-width: 0;
    overflow: hidden;
  }
  .pcard__spec-item:hover { background: #EFF6FF; }
  .pcard__spec-val {
    font-size: 11px;
    font-weight: 800;
    color: #0A192F;
    line-height: 1.2;
    font-family: 'Montserrat', ui-monospace, monospace;
    letter-spacing: -0.01em;
    /* clip long text with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    display: block;
  }
  .pcard__spec-key {
    font-size: 8px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    display: block;
  }

  /* CTA button */
  .pcard__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: #2684FF;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    margin-top: auto;
  }
  .pcard:hover .pcard__cta {
    background: #0052CC;
  }

  /* ── Filter tabs ── */
  .filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 20px;
    margin-bottom: 32px;
    border-bottom: 1px solid #E2E8F0;
  }
  .filter-tab {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    cursor: pointer;
    transition: all 0.18s;
    line-height: 1;
  }
  .filter-tab:hover { border-color: #2684FF; color: #2684FF; background: #EFF6FF; }
  .filter-tab.active { background: #2684FF; border-color: #2684FF; color: #fff; }

  /* ── Pagination ── */
  .pgn { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 48px; }
  .pgn-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border-radius: 10px; font-size: 13px; font-weight: 700;
    color: #334155; background: #fff; border: 1.5px solid #E2E8F0;
    cursor: pointer; transition: all 0.15s;
  }
  .pgn-btn:hover:not(:disabled) { background: #EFF6FF; border-color: #2684FF; color: #2684FF; }
  .pgn-btn.is-active { background: #2684FF; border-color: #2684FF; color: #fff; }
  .pgn-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* ── Loading spinner ── */
  @keyframes spin { to { transform: rotate(360deg); } }
  .spin { animation: spin 0.75s linear infinite; }

  /* ── Why-us mini grid ── */
  .perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px) { .perks-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .perks-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
</style>
@endpush

@section('content')

{{-- ══ HERO ══ --}}
<section class="hero" style="min-height:38vh;padding:clamp(110px,13vw,150px) 0 clamp(50px,7vw,90px);">
  <div class="hero__bg">
    <img src="https://i.pinimg.com/736x/ef/43/d4/ef43d4477fdefbbf27dfda02e11442da.jpg" alt="">
  </div>
  <div class="hero__grid"></div>
  <div class="hero__body">
    <div class="container">
      <div class="hero__content">
        <div class="hero__tag reveal">
          <div class="hero__tag-dot"></div>
          {{ is_locale_en() ? 'Our Products' : 'Katalog Produk' }}
        </div>
        <h1 class="hero__title reveal" style="font-size:clamp(26px,5vw,50px);">
          {{ is_locale_en() ? 'Industrial' : 'Kompresor' }}
          <span>{{ is_locale_en() ? 'Compressors' : 'Industrial' }}</span>
        </h1>
        <p class="hero__desc reveal">
          {{ is_locale_en()
            ? 'Complete range of industrial air compressors for mining, manufacturing, oil & gas, and more.'
            : 'Rangkaian lengkap kompresor udara industri untuk pertambangan, manufaktur, migas, dan lainnya.' }}
        </p>
      </div>
    </div>
  </div>
</section>

{{-- ══ PRODUCTS SECTION ══ --}}
<section class="section section--white" style="padding:clamp(40px,6vw,80px) 0;">
  <div class="container">

    {{-- Filter Tabs --}}
    <div class="filter-tabs">
      <a href="{{ route('products.index') }}" class="filter-tab active">
        {{ is_locale_en() ? 'All Products' : 'Semua Produk' }}
      </a>
      @foreach($categories as $cat)
      <a href="{{ route('products.category', $cat->slug) }}" class="filter-tab">
        {{ $cat->{locale_field('name')} }}
      </a>
      @endforeach
    </div>

    {{-- Grid --}}
    <div>
      @if($products->count() > 0)
      {{-- Cards --}}
      <div class="products-grid">
        @foreach($products as $p)
          @php
            $url = $p->category ? route('products.show', [$p->category->slug, $p->slug]) : '#';
            $thumbnail = $p->thumbnail ? image_url($p->thumbnail) : ($p->primaryImage ? image_url($p->primaryImage->image) : null);
          @endphp
          <a href="{{ $url }}" class="pcard">

            {{-- Image --}}
            <div class="pcard__img">
              @if($thumbnail)
                <img src="{{ $thumbnail }}" alt="{{ $p->{locale_field('name')} }}" loading="lazy">
              @else
                <div class="pcard__img-placeholder">
                  <svg style="width:48px;height:48px;" 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>
                </div>
              @endif
              @if($p->category)
                <div class="pcard__badge">{{ $p->category->{locale_field('name')} }}</div>
              @endif
            </div>

            {{-- Body --}}
            <div class="pcard__body">

              {{-- Meta --}}
              <div class="pcard__meta">
                <span class="pcard__sku">{{ $p->sku ?? 'Series' }}</span>
                <span class="pcard__sep">|</span>
                <span class="pcard__brand">{{ $p->brand->name ?? 'Crius' }}</span>
              </div>

              {{-- Title --}}
              <div class="pcard__title">{{ $p->{locale_field('name')} }}</div>

              {{-- Description --}}
              <p class="pcard__desc">{{ Str::limit(strip_tags($p->{locale_field('short_description')}), 90) }}</p>

              {{-- Specs (compressor) / Stock (sparepart) --}}
              @if($p->is_sparepart)
                <div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;">
                  @if($p->stock_status)
                    {!! $p->stock_badge !!}
                  @endif
                  @if($p->compatibility)
                    <span style="font-size:9px;color:var(--grey-400);font-family:ui-monospace,monospace;background:var(--off-white);border:1px solid var(--grey-100);padding:3px 8px;border-radius:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;">🔧 {{ Str::limit($p->compatibility, 30) }}</span>
                  @endif
                </div>
              @else
              @php $firstSpecs = $p->specs->take(3); @endphp
              @if($firstSpecs->count() > 0)
                <div class="pcard__specs" style="grid-template-columns: repeat({{ min($firstSpecs->count(), 3) }}, 1fr);">
                  @foreach($firstSpecs as $sp)
                    <div class="pcard__spec-item">
                      <div class="pcard__spec-val">{{ $sp->value }} {{ $sp->unit }}</div>
                      <div class="pcard__spec-key">{{ $sp->{locale_field('key')} }}</div>
                    </div>
                  @endforeach
                </div>
              @endif
              @endif

              {{-- CTA --}}
              <div class="pcard__cta">
                {{ is_locale_en() ? 'View Details' : 'Lihat Detail' }}
                <svg style="width:13px;height:13px;" 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>
              </div>

            </div>
          </a>
        @endforeach
      </div>
      @else
      {{-- Empty state --}}
      <div style="text-align:center;padding:80px 0;">
        <svg style="width:56px;height:56px;color:#CBD5E1;margin:0 auto 16px;display:block;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
        </svg>
        <p style="color:#94A3B8;font-size:15px;font-weight:500;">
          {{ is_locale_en() ? 'No products found.' : 'Tidak ada produk.' }}
        </p>
      </div>
      @endif

      {{-- Pagination --}}
      @if($products->lastPage() > 1)
      <div class="pgn">
        <a href="{{ $products->previousPageUrl() ?? '#' }}" class="pgn-btn" style="{{ $products->onFirstPage() ? 'opacity:0.3;pointer-events:none;' : '' }}">
          <svg style="width:14px;height:14px;" 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>
        </a>
        @for($i = 1; $i <= $products->lastPage(); $i++)
          <a href="{{ $products->url($i) }}" class="pgn-btn {{ $i == $products->currentPage() ? 'is-active' : '' }}">{{ $i }}</a>
        @endfor
        <a href="{{ $products->nextPageUrl() ?? '#' }}" class="pgn-btn" style="{{ !$products->hasMorePages() ? 'opacity:0.3;pointer-events:none;' : '' }}">
          <svg style="width:14px;height:14px;" 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>
        </a>
      </div>
      @endif

    </div>

  </div>
</section>

{{-- ══ WHY CRIUS ══ --}}
<section class="section section--off" style="padding:clamp(40px,6vw,80px) 0;">
  <div class="container" style="max-width:960px;">
    <div class="section-header section-header--center reveal" style="margin-bottom:clamp(24px,4vw,40px);">
      <div class="eyebrow eyebrow--center">{{ is_locale_en() ? 'Why Choose Crius' : 'Mengapa Memilih Crius' }}</div>
      <h2 class="heading-xl">
        {{ is_locale_en() ? 'The Crius' : 'Keunggulan' }}
        <span class="text-blue">{{ is_locale_en() ? 'Advantage' : 'Produk Crius' }}</span>
      </h2>
    </div>
    <div class="perks-grid">
      @php $perks = [
        ['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'=>'ISO 9001','desc_id'=>'Standar kualitas internasional.','desc_en'=>'International quality standard certified.','color'=>'blue'],
        ['icon'=>'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z','title'=>'OEM & ODM','desc_id'=>'Kustomisasi penuh tersedia.','desc_en'=>'Full customization available.','color'=>'accent'],
        ['icon'=>'M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4z','title'=>'2 Factories','desc_id'=>'Kapasitas produksi andal.','desc_en'=>'Reliable production capacity.','color'=>'blue'],
        ['icon'=>'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z','title'=>'24/7 Support','desc_id'=>'Layanan 24 jam non-stop.','desc_en'=>'Round-the-clock service.','color'=>'accent'],
      ]; @endphp
      @foreach($perks as $perk)
      <div class="reveal" style="text-align:center;padding:clamp(18px,2.5vw,28px) clamp(12px,1.5vw,20px);background:#fff;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,0.04);">
        <div style="width:48px;height:48px;background:{{ $perk['color']==='blue' ? '#EFF6FF' : '#FFFBEB' }};border-radius:12px;display:flex;align-items:center;justify-content:center;color:{{ $perk['color']==='blue' ? '#2684FF' : '#F59E0B' }};margin:0 auto 14px;">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:22px;height:22px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $perk['icon'] }}"/></svg>
        </div>
        <h4 style="font-size:11px;font-weight:800;color:#0A192F;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;">{{ $perk['title'] }}</h4>
        <p style="font-size:12px;color:#64748B;line-height:1.55;">{{ is_locale_en() ? $perk['desc_en'] : $perk['desc_id'] }}</p>
      </div>
      @endforeach
    </div>
  </div>
</section>

{{-- ══ CTA ══ --}}
<section class="section section--dark" style="text-align:center;padding:clamp(50px,7vw,90px) 0;">
  <div class="container" style="max-width:640px;">
    <div class="reveal">
      <div class="eyebrow" style="justify-content:center;color:rgba(255,255,255,0.35);">{{ is_locale_en() ? 'Get a Quote' : 'Dapatkan Penawaran' }}</div>
      <h2 class="heading-xl" style="color:#fff;margin-bottom:16px;">
        {{ is_locale_en() ? 'Need Help Choosing?' : 'Butuh Bantuan Memilih?' }}
        <span style="color:var(--blue-light);">{{ is_locale_en() ? 'Contact Us' : 'Hubungi Kami' }}</span>
      </h2>
      <p style="color:rgba(255,255,255,0.4);margin-bottom:32px;line-height:1.7;font-size:clamp(14px,1.5vw,16px);">
        {{ is_locale_en()
          ? 'Our team of experts will help you find the right compressor for your specific application.'
          : 'Tim ahli kami akan membantu Anda menemukan kompresor yang tepat untuk aplikasi spesifik Anda.' }}
      </p>
      <a href="{{ route('contact.index') }}" class="btn btn--accent btn--lg">
        {{ is_locale_en() ? 'Contact Us' : 'Hubungi Kami' }} →
      </a>
    </div>
  </div>
</section>



@endsection