@extends('layouts.app')

@section('content')

<section class="hero" id="hero">
  @forelse ($slides as $i => $slide)
    <a class="slide {{ $i === 0 ? 'active' : '' }}" href="{{ $slide['url'] }}" aria-label="{{ $slide['title'] }}">
      <picture>
        <source media="(max-width: 767px)" srcset="{{ $slide['mobile'] }}">
        <img class="slide-img" src="{{ $slide['desktop'] }}" alt="{{ $slide['title'] }}" @if ($i > 0) loading="lazy" @endif>
      </picture>
      <span class="slide-cta btn">Shop now <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
    </a>
  @empty
    <div class="slide active s1"><div class="container"><div class="hero-txt">
      <small>Welcome</small><h1>{{ $company->name }}</h1>
      <a href="{{ route('collection') }}" class="btn">Shop the collection</a></div></div></div>
  @endforelse
  <div class="dots" id="dots"></div>
</section>

@if (count($categories))
<div class="ticker" aria-hidden="true"><div class="ticker-in">
  @for ($r = 0; $r < 2; $r++)
    <span>@foreach ($categories as $cat){{ $cat['name'] }} <i>&#10022;</i> @endforeach @foreach ($showcase as $col){{ $col['name'] }} <i>&#10022;</i> @endforeach</span>
  @endfor
</div></div>
@endif

{{-- Policy strip (Free Shipping / Support / Returns): switched off. Remove this comment wrapper to show it again.
<section class="policy container">
  <div><span><svg viewBox="0 0 24 24"><path d="M2 6h12v10H2z"/><path d="M14 9h4l3 3v4h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span><p><b>Free Shipping</b> on selected orders</p></div>
  <div><span><svg viewBox="0 0 24 24"><path d="M4 14v-2a8 8 0 0116 0v2"/><rect x="3" y="14" width="4" height="6" rx="1"/><rect x="17" y="14" width="4" height="6" rx="1"/></svg></span><p><b>Support</b> {{ $company->hours ?: 'Contact us any time' }}</p></div>
  <div><span><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.3 5.7"/><path d="M20 5v5h-5"/></svg></span><p><b>{{ $company->return_days ?: 30 }} Days Return</b> Simply return for an exchange</p></div>
</section>
--}}

@if (count($categories))
<section class="cs2" id="categories">
  <div class="cs2-inner">
    <div class="cs2-left">
      <span class="cs2-num" aria-hidden="true">01</span>
      <small class="cs2-label">Shop by category</small>
      <h2>Find Your<br>Perfect Piece</h2>
      <p>Explore our curated collections and find the perfect jewellery for every moment.</p>
      <a href="{{ route('collections') }}" class="cs2-all">Shop all collections <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
    </div>
    <div class="cs2-track">
      @foreach ($categories as $i => $cat)
        <a href="{{ collection_filter_url(['cat' => [$cat['slug']]]) }}" class="cs2-card k{{ $i % 4 }}{{ $cat['image'] ? ' has-img' : '' }}">
          @if ($cat['image'])<img src="{{ $cat['image'] }}" alt="{{ $cat['name'] }}" loading="lazy">@endif
          <span class="cs2-tag">{{ $cat['count'] ? $cat['count'] . ' ' . \Illuminate\Support\Str::plural('design', $cat['count']) : 'Explore' }}</span>
          <span class="cs2-name">{{ $cat['name'] }}<i><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></i></span>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endif

@if (count($showcase))
<section class="container section sc" id="collections">
  <div class="sec-head rv">
    <div><small>Curated for you</small><h2 class="sc-title">Our Collections</h2>
    <p class="sc-sub">Hand-picked edits from {{ $company->name }}, put together for every mood and occasion.</p></div>
    <a href="{{ route('collections') }}" class="sec-link">View all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </div>
  <div class="sc-grid n{{ count($showcase) }}">
    @foreach ($showcase as $i => $col)
      <a href="{{ collection_filter_url(['col' => [$col['slug']]]) }}" class="sc-tile t{{ $i }} k{{ $i % 4 }}">
        @if ($col['image'])<picture>@if ($col['mobile'])<source media="(max-width: 700px)" srcset="{{ $col['mobile'] }}">@endif<img src="{{ $col['image'] }}" alt="{{ $col['name'] }}" loading="lazy"></picture>@endif
        <span class="sc-text">
          @if ($col['count'])<small class="sc-n">{{ $col['count'] }} {{ \Illuminate\Support\Str::plural('style', $col['count']) }}</small>@endif
          <b>{{ $col['name'] }}</b>
          <em>{{ $col['text'] ? \Illuminate\Support\Str::limit($col['text'], 70) : ($col['count'] ? $col['count'] . ' ' . \Illuminate\Support\Str::plural('piece', $col['count']) : 'Coming soon') }}</em>
          <u>Explore <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></u>
        </span>
      </a>
    @endforeach
  </div>
</section>
@endif

@if (count($genders) > 1)
<section class="container section hp-gender">
  <div class="sec-head rv"><div><small>Shop for everyone</small><h2 class="title">Women, Men &amp; Kids</h2></div></div>
  <div class="hg-grid rv">
    @foreach ($genders as $g)
      <a href="{{ collection_filter_url(['cat' => [$g['slug']]]) }}" class="hg-tile">
        @if ($g['image'])<img src="{{ $g['image'] }}" alt="{{ $g['name'] }}" loading="lazy">@endif
        <span class="hg-cap"><b>{{ $g['name'] }}</b><em>{{ $g['count'] }} {{ \Illuminate\Support\Str::plural('style', $g['count']) }}</em><u>Shop now <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></u></span>
      </a>
    @endforeach
  </div>
</section>
@endif

@if (count($products))
<section class="container section hp-sec" id="products" data-list="new">
  <div class="sec-head rv">
    <div><small>Just landed</small><h2 class="title">New Arrivals</h2></div>
    <a href="{{ collection_filter_url(['sort' => 'new']) }}" class="sec-link">View all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </div>
  <div class="hp-grid" id="newGrid"></div>
</section>

<section class="hp-band" id="best" data-list="best">
  <div class="container section">
    <div class="sec-head rv">
      <div><small>Customer favourites</small><h2 class="title">Best Sellers</h2></div>
      <a href="{{ collection_filter_url(['sort' => 'best']) }}" class="sec-link">View all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
    </div>
    <div class="hp-grid" id="bestGrid"></div>
  </div>
</section>

@if ($saleCount)
<section class="hp-promo rv" style="background-image:url('{{ asset('images/promo.jpg') }}')">
  <div class="hp-promo-in">
    <small>Limited time</small>
    <h2>{{ $maxOff ? 'Up to ' . $maxOff . '% off' : 'Special prices' }} on festive favourites</h2>
    <p>{{ $saleCount }} {{ \Illuminate\Support\Str::plural('style', $saleCount) }} on sale right now. Grab your size before it is gone.</p>
    <a href="{{ collection_filter_url(['sort' => 'low']) }}" class="btn">Shop the sale <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </div>
</section>
<section class="container section hp-sec" data-list="sale">
  <div class="sec-head rv">
    <div><small>Special prices</small><h2 class="title">On Sale</h2></div>
    <a href="{{ collection_filter_url(['sort' => 'low']) }}" class="sec-link">View all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
  </div>
  <div class="hp-grid" id="saleGrid"></div>
</section>
@endif
@endif

@if ($featured)
<section class="featured rv">
  <div class="container feat-in">
    <a class="feat-img ph p3" href="{{ route('product', $featured['slug']) }}">
      @if ($featured['image'])<img src="{{ $featured['image'] }}" alt="{{ $featured['name'] }}" loading="lazy">@endif
      @if ($featured['old'])<span class="badge">Sale</span>@endif
    </a>
    <div class="feat-info">
      <small>Featured product</small>
      <h2>{{ $featured['name'] }}</h2>
      <p class="price">@if (collect($featured['variants'])->contains(fn ($v) => $v['price'] != $featured['price']))From @endif @if ($featured['old'])<s>{{ $company->money($featured['old']) }}</s> @endif<b>{{ $company->money($featured['price']) }}</b></p>
      @if ($featured['desc'])<p class="muted">{{ \Illuminate\Support\Str::limit($featured['desc'], 220) }}</p>@endif
      @if (count($featured['variants']) > 1)
        <a href="{{ route('product', $featured['slug']) }}" class="btn add-link">Choose options</a>
      @else
        <button class="btn add" data-name="{{ $featured['name'] }}" data-price="{{ $featured['price'] }}" data-image="{{ $featured['image'] }}" data-url="{{ route('product', $featured['slug']) }}">Add to cart</button>
      @endif
    </div>
  </div>
</section>
@endif

@if (count($looks) >= 5)
<section class="hp-look">
  <div class="container">
    <div class="sec-head rv"><div><small>The lookbook</small><h2 class="title">Styled for the season</h2></div>
    <a href="{{ route('collection') }}" class="sec-link">Shop all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
    <div class="hl-grid rv">
      @foreach ($looks as $i => $l)
        <a href="{{ route('product', $l['slug']) }}" class="hl-tile n{{ $i }}">
          <img src="{{ $l['image'] }}" alt="{{ $l['name'] }}" loading="lazy">
          <span><b>{{ $l['name'] }}</b><em>{{ $company->money($l['price']) }}</em></span>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endif
@endsection

@push('scripts')
<script>var PRODUCTS = @json($products);</script>
<script src="{{ asset_v('js/data.js') }}"></script>
<script src="{{ asset_v('js/main.js') }}"></script>
@endpush