@extends('themes.electronics.layouts.master')
@section('title', $setting->name ?? 'Master Ecommerce BD')

@section('content')

@if(!empty(trim($setting->homepage_content ?? '')))
    @include('frontEnd.partials.grapes-content')
@else

{{-- Hero Banner --}}
@if($banners->count() > 0)
<div id="heroBanner" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($banners as $i => $banner)
        <div class="carousel-item {{ $i == 0 ? 'active' : '' }}">
            <img src="{{ asset($banner->image) }}" class="d-block w-100" alt="{{ $banner->title }}"
                 style="max-height:500px;object-fit:cover;">
            @if($banner->title)
            <div class="carousel-caption">
                <h2 class="fw-bold">{{ $banner->title }}</h2>
                @if($banner->subtitle)<p>{{ $banner->subtitle }}</p>@endif
                @if($banner->link && $banner->button_text)
                <a href="{{ $banner->link }}" class="btn btn-primary btn-lg">{{ $banner->button_text }}</a>
                @endif
            </div>
            @endif
        </div>
        @endforeach
    </div>
    @if($banners->count() > 1)
    <button class="carousel-control-prev" data-bs-target="#heroBanner" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" data-bs-target="#heroBanner" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
    @endif
</div>
@else
{{-- Default Hero --}}
<div class="hero-section">
    <div class="container">
        <div class="text-center py-5">
            <h1 class="display-4 fw-bold">🌿 প্রাকৃতিক পণ্যের সেরা গন্তব্য</h1>
            <p class="lead text-muted mb-4">১০০% অর্গানিক ও আয়ুর্বেদিক পণ্য — সারাদেশে ডেলিভারি</p>
            <a href="#featured" class="btn btn-primary btn-lg me-2">
                <i class="fas fa-shopping-bag me-2"></i>কেনাকাটা শুরু করুন
            </a>
        </div>
    </div>
</div>
@endif

{{-- Trust Bar --}}
@include('themes.shared.trust-bar')

{{-- Categories --}}
@if($categories->count() > 0)
<section class="section-padding">
    <div class="container">
        <div class="section-header">
            <h2>পণ্যের ক্যাটাগরি</h2>
            <p>আপনার পছন্দের ক্যাটাগরি বেছে নিন</p>
        </div>
        <div class="row g-3">
            @foreach($categories->take(6) as $cat)
            <div class="col-4 col-md-2">
                <a href="{{ route('frontend.category', $cat->slug) }}" class="cat-card">
                    <div class="cat-icon">
                        <i class="{{ $cat->icon ?? 'fas fa-tag' }} fa-2x"></i>
                    </div>
                    <div class="cat-name">{{ $cat->name }}</div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Featured Products --}}
@if($featuredProducts->count() > 0)
<section class="section-padding bg-light" id="featured">
    <div class="container">
        <div class="section-header">
            <h2>⭐ ফিচার্ড পণ্য</h2>
            <p>আমাদের সেরা পণ্যগুলো দেখুন</p>
        </div>
        <div class="row g-3">
            @foreach($featuredProducts as $product)
            @include('themes.electronics.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- New Arrivals --}}
@if($newArrivals->count() > 0)
<section class="section-padding">
    <div class="container">
        <div class="section-header">
            <h2>🆕 নতুন পণ্য</h2>
            <p>সদ্য আসা পণ্যগুলো দেখুন</p>
        </div>
        <div class="row g-3">
            @foreach($newArrivals as $product)
            @include('themes.electronics.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

@endif

@endsection