@extends('themes.jewelry.layouts.master')
@section('title', ($setting->name ?? 'Kunjo Jewellers') . ' – Best Jewellery Shop In BD')

@section('content')

@php
    $hp = $hp ?? ($homepageSettings ?? []);
    $useBuilder = \App\Services\HomepageSettingsService::usesPageBuilder();
    $sliderMs = max(2000, min(15000, (int) ($hp['slider_interval'] ?? 5000)));
    $goldPrices = $goldPrices ?? ($hp['gold_prices'] ?? config('jewelry-home.gold_prices', []));
    $mediaUrl = function ($path) {
        if (!$path) return null;
        if (str_starts_with($path, 'http://') || str_starts_with($path, 'https://')) return $path;
        return asset($path);
    };
@endphp

@if($useBuilder)
    @include('frontEnd.partials.grapes-content')
@else

{{-- Hero Slider --}}
@if($banners->count() > 0)
<section class="kunjo-hero" data-section="hero">
    <div id="kunjoHero" class="carousel slide" data-bs-ride="carousel" data-bs-interval="{{ $sliderMs }}">
        <div class="carousel-inner">
            @foreach($banners as $i => $banner)
            <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                @php $bannerSrc = $mediaUrl($banner->image); @endphp
                <img src="{{ $bannerSrc }}" alt="{{ $banner->title }}" class="kunjo-hero-img">
                @if($banner->title || $banner->subtitle)
                <div class="kunjo-hero-caption">
                    @if($banner->title)<h2>{{ $banner->title }}</h2>@endif
                    @if($banner->subtitle)<p>{{ $banner->subtitle }}</p>@endif
                    @if($banner->link && $banner->button_text)
                    <a href="{{ $banner->link }}" class="kunjo-btn-gold">{{ $banner->button_text }}</a>
                    @endif
                </div>
                @endif
            </div>
            @endforeach
        </div>
        @if($banners->count() > 1)
        <button class="carousel-control-prev" type="button" data-bs-target="#kunjoHero" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
        <button class="carousel-control-next" type="button" data-bs-target="#kunjoHero" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
        @endif
    </div>
</section>
@endif

@if(!empty($hp['show_trust_bar']))
@include('themes.shared.trust-bar', ['hp' => $hp, 'colClass' => 'col-6 col-lg-3'])
@endif

{{-- Popular Categories --}}
@if(!empty($hp['show_categories']) && $categories->count() > 0)
<section class="kunjo-section" data-section="categories">
    <div class="container">
        <h2 class="kunjo-sec-title">Popular Categories</h2>
        <div class="kunjo-cat-grid">
            @foreach($categories->take(6) as $cat)
            <a href="{{ route('frontend.category', $cat->slug) }}" class="kunjo-cat-card">
                <div class="kunjo-cat-img">
                    @if($cat->image)
                        <img src="{{ $mediaUrl($cat->image) }}" alt="{{ $cat->name }}" loading="lazy">
                    @else
                        <span class="kunjo-cat-icon"><i class="fas {{ $cat->icon ?? 'fa-gem' }}"></i></span>
                    @endif
                </div>
                <span class="kunjo-cat-name">{{ $cat->name }}</span>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Trendy Collection --}}
@if(!empty($hp['show_trending']) && ($trendingProducts ?? collect())->count() > 0)
<section class="kunjo-section kunjo-section-alt" data-section="trendy">
    <div class="container">
        <div class="kunjo-sec-head">
            <h2 class="kunjo-sec-title mb-1">Trendy Collection</h2>
            <p class="kunjo-sec-sub">Collect your loves with our newest arrivals.</p>
        </div>
        <div class="row g-3">
            @foreach($trendingProducts as $product)
                @include('themes.jewelry.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Autumn Collection --}}
@if(!empty($hp['show_new_arrivals']) && ($newArrivals ?? collect())->count() > 0)
<section class="kunjo-section" data-section="autumn">
    <div class="container">
        <div class="kunjo-sec-head">
            <h2 class="kunjo-sec-title mb-1">Autumn Collection</h2>
            <p class="kunjo-sec-sub">Collect your loves with our autumn arrivals.</p>
        </div>
        <div class="row g-3">
            @foreach($newArrivals as $product)
                @include('themes.jewelry.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Featured Products tabs --}}
@if(($trendingProducts ?? collect())->count() || ($newArrivals ?? collect())->count() || ($bestSellers ?? collect())->count())
<section class="kunjo-section kunjo-section-alt" data-section="featured">
    <div class="container">
        <h2 class="kunjo-sec-title">Featured Products</h2>
        <ul class="nav kunjo-tabs" role="tablist">
            <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#featNew" type="button">New Arrivals</button></li>
            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#featFeatured" type="button">Featured</button></li>
            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#featBest" type="button">Best Seller</button></li>
        </ul>
        <div class="tab-content pt-4">
            <div class="tab-pane fade show active" id="featNew">
                <div class="row g-3">
                    @forelse($newArrivals ?? collect() as $product)
                        @include('themes.jewelry.layouts.product-card', compact('product'))
                    @empty
                        <div class="col-12 text-muted text-center py-4">No new arrivals yet.</div>
                    @endforelse
                </div>
            </div>
            <div class="tab-pane fade" id="featFeatured">
                <div class="row g-3">
                    @forelse($trendingProducts ?? collect() as $product)
                        @include('themes.jewelry.layouts.product-card', compact('product'))
                    @empty
                        <div class="col-12 text-muted text-center py-4">No featured products yet.</div>
                    @endforelse
                </div>
            </div>
            <div class="tab-pane fade" id="featBest">
                <div class="row g-3">
                    @forelse($bestSellers ?? collect() as $product)
                        @include('themes.jewelry.layouts.product-card', compact('product'))
                    @empty
                        <div class="col-12 text-muted text-center py-4">No best sellers yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- Today's Gold Price --}}
@if(!empty($hp['show_gold_price']) && count($goldPrices) > 0)
<section class="kunjo-gold-section" data-section="gold-price">
    <div class="container">
        <h2 class="kunjo-sec-title text-white mb-4">Today's Gold Price</h2>
        <div class="row g-3 justify-content-center">
            @foreach($goldPrices as $rate)
            <div class="col-md-4 col-sm-6">
                <div class="kunjo-gold-card">
                    <div class="kunjo-gold-label">{{ $rate['label'] ?? '' }}</div>
                    <div class="kunjo-gold-price">{{ number_format($rate['price'] ?? 0) }} BDT</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@endif
@endsection