@extends('layout.user')

@section('title', 'সব ক্যাটাগরি')
@section('meta_description', 'অনলাইন শপের সব ক্যাটাগরি ব্রাউজ করুন এবং দ্রুত আপনার পছন্দের প্রোডাক্ট খুঁজে নিন।')
@section('meta_keywords', 'সব ক্যাটাগরি, product category, online shop, ecommerce, Bangladesh')
@section('meta_robots', 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1')

@section('content')
@php
  $gs  = \App\Models\GeneralSetting::first();
  $g1  = $gs->icon_color       ?? '#2563eb';
  $g2  = $gs->hover_color      ?? '#1d4ed8';
  $g3  = $gs->accent_color     ?? '#E4002B';
  $bgc = $gs->background_color ?? '#f8fafc';

  $slides = [
    ['src'=>asset('images/e-commerce/product-banner/top/1.png'),'title'=>'নন-স্টপ কেনাকাটা','subtitle'=>'নতুন ডিল, স্মার্ট প্রাইস, ফাস্ট ডেলিভারি','cta'=>'ডিল দেখুন'],
    ['src'=>asset('images/e-commerce/product-banner/top/2.png'),'title'=>'আজকের জনপ্রিয়','subtitle'=>'লাস্ট-মুহূর্তের অফার—মিস করবেন না','cta'=>'এখনই শপ করুন'],
    ['src'=>asset('images/e-commerce/product-banner/top/3.png'),'title'=>'ট্রেন্ডিং কালেকশন','subtitle'=>'সিজনের বেস্ট পিকস আপনার জন্য','cta'=>'কলেকশন দেখুন'],
  ];
@endphp

<style>
  .no-underline, .no-underline *{ text-decoration:none !important }
  .soft-page{ background:{{ $bgc }} }
  .hero-shell{
    border-radius:22px;
    border:1.5px solid rgba(37,99,235,.35);
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow:0 14px 30px rgba(2,6,23,.06);
    overflow:hidden;
  }
  .hero-media{ position:relative; height:220px }
  @media (min-width:640px){ .hero-media{ height:300px } }
  @media (min-width:768px){ .hero-media{ height:360px } }
  .hero-media img{ width:100%; height:100%; object-fit:cover; display:block }
  .hero-tint{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.00) 55%);
  }
  .hero-card{
    position:absolute;
    left:14px; right:14px; bottom:14px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(37,99,235,.22);
    box-shadow:0 12px 24px rgba(2,6,23,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  @media (min-width:640px){
    .hero-card{ left:18px; right:auto; bottom:18px; width:min(520px, calc(100% - 36px)); padding:16px }
  }
  .hero-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; font-weight:800;
    padding:6px 10px; border-radius:999px;
    background:linear-gradient(90deg, {{ $g1 }}22, {{ $g2 }}22);
    color:#1e293b;
    border:1px solid rgba(37,99,235,.18);
  }
  .hero-title{ margin-top:10px; font-size:20px; font-weight:1000; color:#0f172a; line-height:1.15 }
  @media (min-width:640px){ .hero-title{ font-size:26px } }
  @media (min-width:768px){ .hero-title{ font-size:32px } }
  .hero-sub{ margin-top:6px; color:#475569; font-size:13px; font-weight:700; line-height:1.45 }
  @media (min-width:640px){ .hero-sub{ font-size:15px } }
  .hero-cta{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap }
  .btn-primary{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px;
    border-radius:14px;
    color:#fff;
    font-weight:900;
    font-size:14px;
    background:linear-gradient(90deg, {{ $g1 }}, {{ $g2 }});
    box-shadow:0 12px 22px rgba(37,99,235,.22);
  }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px;
    border-radius:14px;
    font-weight:900;
    font-size:14px;
    background:#fff;
    color:#0f172a;
    border:1px solid rgba(37,99,235,.22);
  }
  .btn-circle{
    height:40px;width:40px;display:grid;place-items:center;border-radius:999px;
    border:1px solid rgba(37,99,235,.22);
    background:#fff;
    box-shadow:0 10px 18px rgba(2,6,23,.08);
  }
  @media (min-width:640px){ .btn-circle{height:44px;width:44px} }
  .slider-dot{ height:8px;border-radius:999px;cursor:pointer;transition:all .2s }
  .hero-progress{
    height:4px; background:rgba(37,99,235,.10);
  }
  .hero-progress > div{
    height:100%;
    background:linear-gradient(90deg, {{ $g1 }}, {{ $g2 }});
  }

  .page-head{
    display:flex; align-items:center; justify-content:space-between;
    margin:10px 0 10px;
  }
  .page-head h1{
    font-size:16px; font-weight:1000; color:#0f172a; letter-spacing:-.2px;
  }
  .back-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px;
    border-radius:14px;
    background:#fff;
    border:1.5px solid rgba(37,99,235,.25);
    color:#0f172a;
    font-weight:900;
    font-size:13px;
  }

  .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
  @media (min-width:768px){ .cat-grid{ grid-template-columns:repeat(4,1fr) } }
  @media (min-width:1024px){ .cat-grid{ grid-template-columns:repeat(6,1fr) } }

  .cat-card{
    border-radius:16px;
    background:#fff;
    border:1.5px solid rgba(37,99,235,.22);
    box-shadow:0 10px 18px rgba(2,6,23,.05);
    overflow:hidden;
    transition:.2s;
  }
  .cat-card:hover{ transform:translateY(-2px); box-shadow:0 14px 24px rgba(2,6,23,.08) }
  .cat-media{
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    background:linear-gradient(180deg, rgba(239,246,255,.85), rgba(255,255,255,1));
  }
  .cat-media img{
    width:92%;
    height:92%;
    object-fit:contain;
    transition:transform .2s;
  }
  .cat-card:hover .cat-media img{ transform:scale(1.04) }
  .cat-name{
    padding:10px 10px 12px;
    text-align:center;
    font-size:12px;
    font-weight:900;
    color:#111827;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cat-bar{ height:3px; background:linear-gradient(90deg, {{ $g1 }}, {{ $g2 }}) }
</style>

<div class="mx-auto max-w-6xl px-2 sm:px-3 md:px-4 mt-2 pb-10 no-underline soft-page">

  @include('shop._reselling_policy_banner')

  <div class="hero-shell mb-4">

    <div
      x-data="{
        i: 0,
        n: {{ count($slides) }},
        pause:false,
        speed: 5000,
        timer: 0,
        start(){ this.timer = setInterval(()=>{ if(!this.pause){ this.next() } }, this.speed) },
        stop(){ clearInterval(this.timer) },
        next(){ this.i = (this.i+1)%this.n },
        prev(){ this.i = (this.i-1+this.n)%this.n },
      }"
      x-init="start()"
      @mouseenter="pause=true" @mouseleave="pause=false"
      @keydown.right.prevent="next()" @keydown.left.prevent="prev()"
      tabindex="0"
      class="relative outline-none"
    >

      <div class="hero-media">
        @foreach($slides as $idx => $s)
          <div x-show="i === {{ $idx }}" x-transition.opacity.duration.350ms class="absolute inset-0">
            <img src="{{ $s['src'] }}" alt="Slide {{ $idx+1 }}">
            <div class="hero-tint"></div>

            <div class="hero-card">
              <div class="hero-pill">
                <i class="fa-solid fa-bolt" style="color:{{ $g3 }}"></i>
                ফ্ল্যাশ সেল
              </div>

              <div class="hero-title">{{ $s['title'] }}</div>
              <div class="hero-sub">{{ $s['subtitle'] }}</div>

              <div class="hero-cta">
                <a href="{{ route('shop.search') }}" class="btn-primary">
                  <i class="fa-solid fa-bag-shopping text-[12px]"></i> {{ $s['cta'] }}
                </a>
                <a href="{{ route('shop.categories.all') }}" class="btn-ghost">
                  <i class="fa-solid fa-grid-2 text-[12px]"></i> ক্যাটাগরি
                </a>
              </div>
            </div>
          </div>
        @endforeach

        <button @click="prev()" class="btn-circle absolute left-3 top-1/2 -translate-y-1/2 text-slate-700">
          <i class="fa-solid fa-angle-left text-sm"></i>
        </button>
        <button @click="next()" class="btn-circle absolute right-3 top-1/2 -translate-y-1/2 text-slate-700">
          <i class="fa-solid fa-angle-right text-sm"></i>
        </button>

        <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
          @foreach($slides as $idx => $_)
            <span
              @click="i = {{ $idx }}"
              :style="i === {{ $idx }}
                ? 'width:28px;background:linear-gradient(90deg,{{ $g1 }},{{ $g2 }})'
                : 'width:10px;background:rgba(37,99,235,.28)'"
              class="slider-dot"></span>
          @endforeach
        </div>
      </div>

      <div class="hero-progress">
        <div :style="`width:${(i+1)/n*100}%; transition:width ${speed/1000}s linear;`"></div>
      </div>

    </div>
  </div>

  <div class="page-head">
    <h1>সকল ক্যাটাগরি</h1>
    <a href="{{ route('shop.index') }}" class="back-btn">
      <i class="fa-solid fa-arrow-left text-[12px]"></i> Back
    </a>
  </div>

  @if($categories->count())
    <div class="cat-grid">
      @foreach($categories as $cat)
        @php
          $thumb = $cat->photo_url ?? asset('images/default-banner.jpg');
        @endphp

        <a href="{{ route('shop.category', $cat->slug) }}" class="cat-card">
          <div class="cat-media">
            <img src="{{ $thumb }}" alt="{{ $cat->name }}" loading="lazy">
          </div>
          <div class="cat-name">{{ $cat->name }}</div>
          <div class="cat-bar"></div>
        </a>
      @endforeach
    </div>
  @else
    <div class="rounded-xl bg-white p-4 text-center text-gray-500" style="border:1.5px solid rgba(37,99,235,.18)">
      কোনো ক্যাটাগরি পাওয়া যায়নি।
    </div>
  @endif

</div>
@endsection
