@extends('layouts.app')

@section('content')
@php
    $arrow = '<svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>';
    $featuredFrom = $featured && collect($featured['variants'])->contains(fn ($v) => $v['price'] != $featured['price']);
@endphp

{{-- 1. Hero slider (CMS "Slider" screen) --}}
<section class="hero" id="hero" aria-roledescription="carousel">
  @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</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 now</a></div></div></div>
  @endforelse
  @if (count($slides) > 1)
    <button type="button" class="hero-arrow prev" id="heroPrev" aria-label="Previous slide"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></button>
    <button type="button" class="hero-arrow next" id="heroNext" aria-label="Next slide"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button>
  @endif
  <div class="dots" id="dots"></div>
</section>

{{-- 2. Category tiles --}}
@if (count($categories))
<section class="container a-sec a-cats" id="categories">
  <div class="at-grid n{{ count($categories) }} rv">
    @foreach ($categories as $i => $cat)
      <a href="{{ collection_filter_url(['cat' => [$cat['slug']]]) }}" class="at-tile">
        <span class="at-img k{{ $i % 3 }}">@if ($cat['image'])<img src="{{ $cat['image'] }}" alt="{{ $cat['name'] }}" loading="lazy">@endif</span>
        <span class="at-cap"><b>{{ $cat['name'] }}</b><em>({{ $cat['count'] }} {{ $cat['count'] === 1 ? 'item' : 'items' }})</em></span>
      </a>
    @endforeach
  </div>
</section>
@endif

{{-- 3. Best sellers with category tabs --}}
@if (count($products))
<section class="container a-sec" id="best" data-list="best">
  <div class="a-head rv"><h2>Our Best Sellers</h2></div>
  @if (count($tabs) > 1)
  <div class="a-tabs rv" id="bestTabs" role="tablist">
    @foreach ($tabs as $t)
      <button type="button" role="tab" data-cat="{{ $t['slug'] }}" class="{{ $loop->first ? 'on' : '' }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}">{{ $t['name'] }}</button>
    @endforeach
  </div>
  @endif
  <div class="a-grid" id="bestGrid" aria-live="polite"></div>
</section>

{{-- 4. Signature block --}}
@if ($featured)
<section class="a-sig" id="signature">
  <div class="container a-sig-in rv">
    <div class="a-sig-txt">
      <small>Your signature piece</small>
      <h2>Find the perfect one to express your unique style.</h2>
      <p>{{ $featured['desc'] ? \Illuminate\Support\Str::limit($featured['desc'], 170) : 'Hand-picked favourites from ' . $company->name . ', made to be remembered.' }}</p>
      <a href="{{ route('collection') }}" class="btn">Explore the collection</a>
    </div>
    <a class="a-sig-media" href="{{ route('product', $featured['slug']) }}" aria-label="{{ $featured['name'] }}">
      @if ($featured['image'])<img src="{{ $featured['image'] }}" alt="{{ $featured['name'] }}" loading="lazy">@endif
      <span class="a-sig-tag"><b>{{ $featured['name'] }}</b><em>{{ $featuredFrom ? 'From ' : '' }}{{ $company->money($featured['price']) }}</em></span>
    </a>
  </div>
</section>
@endif

{{-- 5. Popular / new products --}}
<section class="container a-sec" id="popular" data-list="pop">
  <div class="a-head rv"><h2>Popular Picks</h2><p>Each piece crafted to complement your unique essence</p></div>
  <div class="a-grid" id="popGrid"></div>
  <div class="a-more rv"><a href="{{ route('collection') }}" class="btn">View all</a></div>
</section>
@endif

{{-- 6. Brands, or trust points when there are fewer than two brands --}}
<section class="a-strip" aria-label="{{ count($brands) ? 'Brands' : 'Why shop with us' }}">
  <div class="container a-strip-in">
    @if (count($brands))
      @foreach (array_slice($brands, 0, 6) as $b)<span class="a-brand">{{ $b }}</span>@endforeach
    @else
      <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>Free shipping on selected orders</span>
      <span><svg viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>100% authentic products</span>
      <span><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.300 5.700"/><path d="M20 5v5h-5"/></svg>{{ $company->return_days ?: 30 }} days easy returns</span>
      <span><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg>Secure online payment</span>
    @endif
  </div>
</section>

{{-- 7. Feature of the week with countdown --}}
@if ($featured)
<section class="container a-sec a-feat">
  <div class="a-feat-in rv">
    <a class="a-feat-img" href="{{ route('product', $featured['slug']) }}" aria-label="{{ $featured['name'] }}">
      @if ($lookImage)<img src="{{ $lookImage }}" alt="" loading="lazy">@elseif ($featured['image'])<img class="contain" src="{{ $featured['image'] }}" alt="{{ $featured['name'] }}" loading="lazy">@endif
    </a>
    <div class="a-feat-txt">
      <small>Featured product of the week</small>
      <h2>{{ $featured['name'] }}</h2>
      <div class="a-count" id="countdown" aria-label="Offer ends in">
        <div><b data-u="d">00</b><span>Days</span></div><i>:</i>
        <div><b data-u="h">00</b><span>Hrs</span></div><i>:</i>
        <div><b data-u="m">00</b><span>Min</span></div><i>:</i>
        <div><b data-u="s">00</b><span>Sec</span></div>
      </div>
      <p>@if ($featured['desc']){{ \Illuminate\Support\Str::limit($featured['desc'], 190) }}@else{{ $saleCount ? ($maxOff ? 'Up to ' . $maxOff . '% off' : 'Special prices') . ' on ' . $saleCount . ' ' . \Illuminate\Support\Str::plural('style', $saleCount) . ' right now.' : 'Our pick of the week.' }}@endif</p>
      <a href="{{ route('product', $featured['slug']) }}" class="btn">Shop now at {{ $company->money($featured['price']) }}</a>
    </div>
  </div>
</section>
@endif

{{-- 8. Lookbook --}}
@if (count($looks) >= 2)
<section class="container a-sec a-look">
  <div class="a-head rv"><h2>Shop The Lookbook</h2><p>Each piece crafted to complement your unique essence</p></div>
  <div class="a-look-grid rv">
    @foreach ($looks as $i => $l)
      <div class="card" data-id="{{ $l['id'] }}" data-static></div>
    @endforeach
    <a class="a-look-big" href="{{ route('collection') }}" aria-label="Shop the collection">
      @if ($lookImage)<img src="{{ $lookImage }}" alt="" loading="lazy">@elseif ($looks[0]['image'])<img class="contain" src="{{ $looks[0]['image'] }}" alt="" loading="lazy">@endif
      <span class="btn">Shop the look</span>
    </a>
  </div>
</section>
@endif

{{-- 9. Testimonials (approved customer reviews) --}}
@if (count($reviews))
<section class="a-testi">
  <div class="container">
    <div class="a-head rv"><h2>What Our Customers Say</h2></div>
    <div class="a-testi-grid rv">
      @foreach ($reviews as $r)
        <figure class="a-quote">
          <div class="stars" aria-label="{{ $r['rating'] }} out of 5">{!! str_repeat('&#9733;', $r['rating']) . str_repeat('&#9734;', 5 - $r['rating']) !!}</div>
          <blockquote>&ldquo;{{ \Illuminate\Support\Str::limit($r['text'], 220) }}&rdquo;</blockquote>
          <figcaption><b>{{ $r['author'] }}</b> <span><svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg> Verified buyer</span>
            <a href="{{ route('product', $r['slug']) }}">{{ $r['product'] }}</a></figcaption>
        </figure>
      @endforeach
    </div>
  </div>
</section>
@endif

{{-- 10. Blog --}}
@if ($blogs->count())
<section class="container a-sec a-blog">
  <div class="a-head rv"><h2>From The Journal</h2><p>Stories, guides and news from {{ $company->name }}</p></div>
  <div class="a-blog-grid rv">
    @foreach ($blogs as $b)
      <a class="a-post" href="{{ route('blog.show', $b->slug ?: $b->id) }}">
        <span class="a-post-img">@if ($b->image_url)<img src="{{ $b->image_url }}" alt="{{ $b->title }}" loading="lazy" onerror="this.remove()">@endif</span>
        <small>{{ \Illuminate\Support\Carbon::parse($b->created_at)->format('M d, Y') }}</small>
        <h3>{{ $b->title }}</h3>
        <p>{{ \Illuminate\Support\Str::limit($b->excerpt, 110) }}</p>
      </a>
    @endforeach
  </div>
  <div class="a-more rv"><a href="{{ route('blog') }}" class="btn">All articles</a></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