@extends('frontend.app')
@section('content')

{{-- =========================================================
     PREMIUM MINIMAL (International) — Home
     Tone: airy spacing, big type, neutral palette, clear hierarchy
========================================================= --}}
<style>
:root{
  --brand:#111827; /* slate-900 */
  --accent:#2563eb; /* blue-600 */
  --muted:#6b7280; /* gray-500 */
  --soft:#f8fafc;  /* slate-50 */
  --line:#e5e7eb;  /* gray-200 */
}
*{scroll-behavior:smooth}
.section-title{font-family:'Hind Siliguri',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Ubuntu,'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-weight:800;color:var(--brand);letter-spacing:.2px}
.lead-sub{color:var(--muted);font-size:1rem}
.card-clean{background:#fff;border:1px solid var(--line);border-radius:18px}
.hover-lift{transition:transform .18s ease, box-shadow .18s ease}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,.10)}
.ratio-1x1{position:relative;width:100%;padding-top:100%}
.ratio-1x1>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.badge-soft{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe;border-radius:999px;padding:.2rem .6rem;font-size:.75rem}
.btn-accent{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#1d4ed8;--bs-btn-hover-border-color:#1d4ed8;--bs-btn-color:#fff}
.btn-outline-accent{--bs-btn-color:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:var(--accent);--bs-btn-hover-color:#fff}
.grid-tight>[class^=col]{padding-left:.6rem;padding-right:.6rem}
@media(min-width:1200px){.col-xl-8th{flex:0 0 12.5%;max-width:12.5%}}
@media(min-width:992px){.only-mb{display:none!important}}
@media(max-width:991.98px){.only-dt{display:none!important}}
/* hero search */
.hero-search{backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.75); border:1px solid var(--line)}
.hero-chip{display:inline-flex;gap:.5rem;align-items:center;padding:.55rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.85rem;color:var(--muted)}
</style>

<main class="main-wrapper">

  {{-- ===================== HERO ===================== --}}
  <section class="container-xl mt-3 mt-lg-4">
    <div class="position-relative card-clean overflow-hidden" style="min-height:460px">
      <div id="heroSlider" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="4500">
        <div class="carousel-inner h-100">
          @foreach($sliders as $key=>$s)
          <div class="carousel-item h-100 {{ $key===0 ? 'active' : '' }}">
            <a href="{{ $s->link }}" class="d-block h-100">
              <img src="{{ getImage('sliders', $s->image) }}" class="w-100 h-100" alt="Hero" loading="lazy" decoding="async" style="object-fit:cover">
            </a>
          </div>
          @endforeach
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button>
      </div>

      {{-- search overlay --}}
      <div class="hero-search position-absolute start-50 translate-middle-x" style="bottom:28px; width:min(960px,94%) ; border-radius:16px">
        <form class="d-flex gap-2 p-2 p-md-3" action="{{ route('front.products.index') }}" method="get">
          <input name="q" type="search" class="form-control form-control-lg" placeholder="Search products, brands & categories" />
          <button class="btn btn-accent btn-lg px-4 rounded-3" type="submit">Search</button>
        </form>
        <div class="px-3 pb-3 d-flex flex-wrap gap-2">
          <span class="hero-chip"><i class="bi bi-lightning"></i>Trending</span>
          <span class="hero-chip"><i class="bi bi-star"></i>Top Rated</span>
          <span class="hero-chip"><i class="bi bi-bag"></i>Best Deals</span>
        </div>
      </div>
    </div>
  </section>

  {{-- ============== TRUST BADGES ============== --}}
  <section class="container-xl py-3 py-lg-4">
    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-3"><div class="card-clean p-3 d-flex align-items-center gap-2"><i class="bi bi-truck fs-4 text-primary"></i><div><div class="fw-semibold">Fast Delivery</div><div class="text-muted small">Nationwide</div></div></div></div>
      <div class="col-6 col-md-3"><div class="card-clean p-3 d-flex align-items-center gap-2"><i class="bi bi-shield-check fs-4 text-primary"></i><div><div class="fw-semibold">Genuine Products</div><div class="text-muted small">Brand warranty</div></div></div></div>
      <div class="col-6 col-md-3"><div class="card-clean p-3 d-flex align-items-center gap-2"><i class="bi bi-arrow-repeat fs-4 text-primary"></i><div><div class="fw-semibold">Easy Returns</div><div class="text-muted small">7-day policy</div></div></div></div>
      <div class="col-6 col-md-3"><div class="card-clean p-3 d-flex align-items-center gap-2"><i class="bi bi-headset fs-4 text-primary"></i><div><div class="fw-semibold">24/7 Support</div><div class="text-muted small">We’re here</div></div></div></div>
    </div>
  </section>

  {{-- ============== CATEGORIES (clean) ============== --}}
  <section class="container-xl py-2 py-lg-4">
    <div class="d-flex align-items-end justify-content-between mb-3 mb-lg-4">
      <div>
        <h3 class="section-title mb-1">Shop by Category</h3>
        <div class="lead-sub">Browse top picks from every department</div>
      </div>
      <a href="{{ route('front.categories') }}" class="btn btn-sm btn-outline-accent rounded-3">All Categories</a>
    </div>

    <div class="row g-3 g-lg-4">
      @foreach($cats as $cat)
      <div class="col-6 col-md-4 col-lg-3 col-xl-8th">
        <a href="{{ route('front.subCategories1', [$cat->url]) }}" class="d-block card-clean p-3 h-100 hover-lift text-decoration-none">
          <div class="ratio-1x1 mb-2"><img src="{{ getImage('categories', $cat->image) }}" alt="{{ $cat->name }}" loading="lazy" decoding="async"></div>
          <div class="d-flex justify-content-between align-items-center">
            <span class="fw-semibold text-dark" style="font-family:'Hind Siliguri',sans-serif">{{ $cat->name }}</span>
            <span class="badge-soft">Explore</span>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </section>

  {{-- ============== FEATURE STRIP ============== --}}
  <section class="container-xl pb-2 pb-lg-4">
    <div class="row g-3 g-lg-4">
      <div class="col-md-4">
        <a href="{{ route('front.products.index') }}?tag=trending" class="card-clean p-4 d-block text-decoration-none hover-lift" style="background:linear-gradient(135deg,#eef2ff,#ffffff)">
          <h4 class="h5 mb-1">Trending Now</h4>
          <div class="lead-sub">Most viewed this week</div>
        </a>
      </div>
      <div class="col-md-4">
        <a href="{{ route('front.products.index') }}?tag=deal" class="card-clean p-4 d-block text-decoration-none hover-lift" style="background:linear-gradient(135deg,#ecfeff,#ffffff)">
          <h4 class="h5 mb-1">Hot Deals</h4>
          <div class="lead-sub">Limited-time offers</div>
        </a>
      </div>
      <div class="col-md-4">
        <a href="{{ route('front.products.index') }}?sort=rating" class="card-clean p-4 d-block text-decoration-none hover-lift" style="background:linear-gradient(135deg,#f0fdf4,#ffffff)">
          <h4 class="h5 mb-1">Top Rated</h4>
          <div class="lead-sub">Customer favorites</div>
        </a>
      </div>
    </div>
  </section>

  {{-- ============== PRODUCTS BY CATEGORY ============== --}}
  @foreach ($homeProducts as $categoryId => $products)
    @php $catObj = optional($products->first())->category; @endphp
    <section class="container-xl py-3">
      @if(!empty($catObj?->id))
      <div class="d-flex align-items-center justify-content-between mb-2 mb-lg-3">
        <a href="{{ route('front.subCategories1', [$catObj->url]) }}" class="text-decoration-none">
          <h4 class="section-title h5 mb-0">{{ $catObj->name }}</h4>
        </a>
        <a href="{{ route('front.subCategories1', [$catObj->url]) }}" class="btn btn-sm btn-outline-accent rounded-3" style="font-family:'Hind Siliguri',sans-serif">View All</a>
      </div>
      @endif

      <div class="row grid-tight">
        @foreach($products as $product)
          <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
            @include('frontend.products.partials.product_section')
          </div>
        @endforeach
      </div>
    </section>
  @endforeach

  {{-- ============== BRANDS ============== --}}
  @if(count($brands))
  <section class="container-xl py-4 py-lg-5">
    <div class="d-flex align-items-end justify-content-between mb-3">
      <div>
        <h3 class="section-title mb-1">Top Brands</h3>
        <div class="lead-sub">Shop by your favourite brand</div>
      </div>
    </div>
    <div class="row g-3 g-lg-4">
      @foreach($brands as $item)
      <div class="col-6 col-sm-4 col-lg-2">
        <a title="{{ $item->name }}" href="{{ route('front.products.index') }}?brand_id={{ $item->id }}" class="d-block card-clean p-3 text-center hover-lift">
          <img src="{{ getImage('types', $item->image) }}" alt="{{ $item->name }}" class="img-fluid" loading="lazy" decoding="async" style="max-height:70px;object-fit:contain">
        </a>
      </div>
      @endforeach
    </div>
  </section>
  @endif

  {{-- ============== NEWSLETTER ============== --}}
  <section class="container-xl py-5">
    <div class="card-clean p-4 p-lg-5 text-center">
      <h3 class="section-title mb-2">Get the latest drops & deals</h3>
      <p class="lead-sub mb-4">Subscribe and receive a 10% welcome coupon</p>
      <form class="row g-2 justify-content-center" action="#" method="post">
        <div class="col-md-4"><input type="email" class="form-control form-control-lg" placeholder="Your email address"></div>
        <div class="col-md-auto"><button class="btn btn-accent btn-lg rounded-3" type="button">Subscribe</button></div>
      </form>
    </div>
  </section>

</main>

@endsection

@push('js')
<script>
  // GA4 view_item push on product click (unchanged)
  document.addEventListener('click', function(e){
    const a = e.target.closest('a#product_show');
    if(!a) return; e.preventDefault();
    const card = a.closest('.axil-product');
    const priceText = card?.querySelector('.product-price-variant .current-price')?.textContent || '0';
    const sell_price = parseFloat(priceText.replace(/[^\\d.]/g,'')) || 0;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event:'view_item',
      ecommerce:{currency:'BDT',value:sell_price,items:[{item_id:a.dataset.productid,item_name:a.dataset.productname,item_category:a.dataset.categoryid,price:sell_price,quantity:1}]}
    });
    const url = a.getAttribute('href'); if(url) location.href = url;
  }, {passive:false});
</script>
@endpush