@extends('front.layout.master')

@section('meta_tags')
    <link rel="canonical" href="{{ url()->current() }}" />
    <meta name="keywords" content="{{ isset($seoset) ? $seoset->metadata_key : '' }}">
    <meta property="og:title" content="{{ isset($seoset) ? $seoset->project_name : config('app.name') }}" />
    <meta property="og:description" content="{{ isset($seoset) ? $seoset->metadata_des : '' }}" />
    <meta property="og:type" content="WebPage" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:image" content="{{ url('images/genral/' . $front_logo) }}" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:image" content="{{ url('images/genral/' . $front_logo) }}" />
    <meta name="twitter:description" content="{{ isset($seoset) ? $seoset->metadata_des : '' }}" />
    <meta name="twitter:site" content="{{ url()->current() }}" />
@endsection

@section('body')
@php
    $lang = $data['lang'] ?? 'en';
    $fallback = $data['fallback_local'] ?? 'en';
    $tr = function($val) use ($lang, $fallback) {
        if (is_array($val)) return $val[$lang] ?? $val[$fallback] ?? reset($val);
        return $val;
    };
    $sliderList = $sliders['sliders'] ?? collect();
    $sliderEnable = $sliders['enable'] ?? '1';
    $featuredCats = isset($cats) ? $cats->where('featured', '1')->take(12) : collect();
    $allCats = isset($cats) ? $cats->take(12) : collect();
    $primarySlider = $sliderList->first();
    $secondarySliders = $sliderList->skip(1)->take(2);

    // Per-page widget toggles (managed in /admin/widget/settings)
    $widgetFlags = collect(\App\Widgetsetting::all())->keyBy('name');
    $showCategory = optional($widgetFlags->get('category'))->home == '1';
    $showHotdeals = optional($widgetFlags->get('hotdeals'))->home == '1';

    $featuredpros = isset($featuredproducts) ? collect($featuredproducts)->filter()->take(10) : collect();
    $newProductList = isset($newproduct['all']['products']) ? $newproduct['all']['products'] : (isset($newproduct) && is_iterable($newproduct) ? $newproduct : []);
    $newpros = collect($newProductList)->filter()->take(10);
@endphp

{{-- ============= HERO SECTION ============= --}}
@if($sliderEnable == '1' && count($sliderList))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-4 lg:mt-6">
    <div class="grid grid-cols-12 gap-4">
        {{-- Big hero --}}
        <div class="col-span-12 lg:col-span-8 relative rounded-2xl overflow-hidden mesh-1 text-white min-h-[380px] lg:min-h-[440px]">
            @if($primarySlider)
                @php $sl = (object) $primarySlider; @endphp
                <img src="{{ $sl->image }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-40 mix-blend-luminosity">
                <div class="absolute inset-0 bg-gradient-to-r from-deep via-deep/80 to-transparent"></div>
                <div class="relative h-full p-8 lg:p-12 flex flex-col justify-between">
                    <div>
                        <div class="inline-flex items-center gap-2 bg-saffron text-deep px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider">
                            <span class="w-1.5 h-1.5 bg-deep rounded-full animate-pulse"></span>
                            <span style="color: {{ $sl->subheadingcolor ?? '#0a1430' }};">{{ $tr($sl->topheading) }}</span>
                        </div>
                        <h1 class="font-display font-extrabold text-3xl md:text-5xl lg:text-6xl mt-5 leading-[1.05]" style="color: {{ $sl->headingtextcolor ?? '#ffffff' }};">
                            {{ $tr($sl->heading) }}
                        </h1>
                        <p class="text-white/80 text-[15px] mt-4 max-w-md" style="color: {{ $sl->descriptionTextColor ?? '#ffffff' }};">{{ $sl->moredescription }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-3">
                        <a href="{{ $sl->linkedTo }}" class="bg-white text-deep px-7 py-3.5 rounded-full font-semibold hover:bg-saffron transition-colors flex items-center gap-2"
                           style="background: {{ $sl->btnbgcolor ?? '#ffffff' }}; color: {{ $sl->btntextcolor ?? '#0a1430' }};">
                            {{ $tr($sl->buttonname) ?: __('Shop now') }}
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                        </a>
                    </div>
                </div>
            @endif
        </div>

        {{-- Side promos --}}
        <div class="col-span-12 lg:col-span-4 grid grid-cols-2 lg:grid-cols-1 gap-4">
            @foreach($secondarySliders as $idx => $sl)
                @php
                    $sl = (object) $sl;
                    $bgs   = ['bg-emerald-500', 'bg-fuchsia-600'];
                    $grads = ['from-emerald-700/95 via-emerald-700/70', 'from-fuchsia-800/95 via-fuchsia-700/65'];
                @endphp
                <div class="relative rounded-2xl overflow-hidden {{ $bgs[$idx] ?? 'bg-brand-500' }} text-white min-h-[180px] lg:min-h-[212px]">
                    {{-- Image fills the entire card; gradient overlay keeps the left text readable --}}
                    <img src="{{ $sl->image }}" alt="" loading="lazy" class="absolute inset-0 w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-r {{ $grads[$idx] ?? 'from-brand-800/95 via-brand-700/65' }} to-transparent"></div>
                    <div class="relative p-6">
                        <div class="text-[11px] font-bold uppercase tracking-wider opacity-90">{{ $tr($sl->topheading) }}</div>
                        <h3 class="font-display font-bold text-2xl lg:text-3xl mt-1 leading-tight max-w-[60%]">{{ $tr($sl->heading) }}</h3>
                        <a href="{{ $sl->linkedTo ?? url('shop') }}" class="inline-block mt-3 bg-white text-deep px-4 py-1.5 rounded-full text-[13px] font-semibold hover:bg-yellow-300">{{ $tr($sl->buttonname) ?: __('Shop now') }} →</a>
                    </div>
                </div>
            @endforeach

            {{-- Fill placeholder cards if fewer than 2 secondary sliders --}}
            @if($secondarySliders->count() < 2)
                @for($i = $secondarySliders->count(); $i < 2; $i++)
                    @php $bgs = ['bg-emerald-500','bg-fuchsia-600']; @endphp
                    <a href="{{ url('shop') }}" class="relative rounded-2xl overflow-hidden {{ $bgs[$i] }} text-white p-6 min-h-[180px] lg:min-h-[212px] block">
                        <div class="relative">
                            <div class="text-[11px] font-bold uppercase tracking-wider opacity-90">{{ $i == 0 ? __('Special offer') : __('Trending') }}</div>
                            <h3 class="font-display font-bold text-2xl lg:text-3xl mt-1 leading-tight">{{ $i == 0 ? __('Up to 60% off') : __('New arrivals') }}</h3>
                            <span class="inline-block mt-3 bg-white text-deep px-4 py-1.5 rounded-full text-[13px] font-semibold">{{ __('Shop now') }} →</span>
                        </div>
                    </a>
                @endfor
            @endif
        </div>
    </div>
</section>
@endif

{{-- ============= QUICK BENEFITS ============= --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-6">
    <div class="grid grid-cols-2 md:grid-cols-4 bg-white rounded-2xl shadow-card divide-y md:divide-y-0 md:divide-x divide-slate-100 overflow-hidden">
        <div class="flex items-center gap-3 p-4 lg:p-5">
            <div class="w-11 h-11 bg-brand-50 rounded-lg grid place-items-center text-brand-600 shrink-0"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></div>
            <div class="leading-tight"><div class="font-semibold text-[14px]">{{ $footer3_widget->shiping ?? __('Free shipping') }}</div><div class="text-[12px] text-slate-500">{{ __('On orders over $50') }}</div></div>
        </div>
        <div class="flex items-center gap-3 p-4 lg:p-5">
            <div class="w-11 h-11 bg-emerald-50 rounded-lg grid place-items-center text-emerald-600 shrink-0"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg></div>
            <div class="leading-tight"><div class="font-semibold text-[14px]">{{ $footer3_widget->return ?? __('30-day returns') }}</div><div class="text-[12px] text-slate-500">{{ __('Hassle-free policy') }}</div></div>
        </div>
        <div class="flex items-center gap-3 p-4 lg:p-5">
            <div class="w-11 h-11 bg-amber-50 rounded-lg grid place-items-center text-amber-600 shrink-0"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></svg></div>
            <div class="leading-tight"><div class="font-semibold text-[14px]">{{ $footer3_widget->money ?? __('Secure payments') }}</div><div class="text-[12px] text-slate-500">{{ __('100% protected') }}</div></div>
        </div>
        <div class="flex items-center gap-3 p-4 lg:p-5">
            <div class="w-11 h-11 bg-fuchsia-50 rounded-lg grid place-items-center text-fuchsia-600 shrink-0"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg></div>
            <div class="leading-tight"><div class="font-semibold text-[14px]">{{ $footer3_widget->mobile ?? __('24/7 support') }}</div><div class="text-[12px] text-slate-500">{{ __('Real humans') }}</div></div>
        </div>
    </div>
</section>

{{-- ============= SHOP BY CATEGORY ============= --}}
@if($showCategory && (count($featuredCats) || count($allCats)))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="flex items-end justify-between mb-6">
        <div>
            <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Shop by category') }}</h2>
            <p class="text-slate-500 text-[14px] mt-1">{{ __('Explore products across departments') }}</p>
        </div>
        <a href="{{ url('categories') }}" class="text-brand-600 font-semibold text-[14px] hover:underline hidden md:inline">{{ __('View all') }} →</a>
    </div>

    <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3 lg:gap-4">
        @foreach(($featuredCats->count() ? $featuredCats : $allCats)->take(6) as $cat)
            <a href="javascript:void(0)" onclick="changeCategory({{ $cat->id }}, 'main')" class="cat-tile group bg-white rounded-2xl p-3 lg:p-4 text-center shadow-card hover:shadow-hover transition-shadow">
                <div class="aspect-square overflow-hidden rounded-xl bg-slate-100">
                    @if($cat->image && file_exists(public_path() . '/images/category/' . $cat->image))
                        <img src="{{ url('images/category/' . $cat->image) }}" alt="{{ $cat->title }}" loading="lazy" class="w-full h-full object-cover">
                    @elseif($cat->icon && file_exists(public_path() . '/images/category/' . $cat->icon))
                        <img src="{{ url('images/category/' . $cat->icon) }}" alt="{{ $cat->title }}" loading="lazy" class="w-full h-full object-contain p-4">
                    @else
                        <div class="w-full h-full grid place-items-center bg-gradient-to-br from-brand-50 to-fuchsia-50 text-brand-600 font-display font-extrabold text-3xl">{{ strtoupper(substr($cat->title, 0, 1)) }}</div>
                    @endif
                </div>
                <div class="mt-3 font-semibold text-[13px] line-clamp-1">{{ $cat->title }}</div>
                <div class="text-[11px] text-slate-500">{{ $cat->subcategory->count() }} {{ __('subcategories') }}</div>
            </a>
        @endforeach
    </div>
</section>
@endif

{{-- ============= DEAL OF THE DAY ============= --}}
@php
    try {
        $flashSale = App\FlashSale::with('products')->where('status', '1')->orderBy('id', 'DESC')->first();
        $flashProducts = $flashSale ? $flashSale->products->take(8) : collect();
    } catch (\Throwable $e) { $flashSale = null; $flashProducts = collect(); }
@endphp
@if($flashSale)
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="mesh-deals rounded-2xl text-white overflow-hidden">
        <div class="grid lg:grid-cols-12 items-center">
            <div class="lg:col-span-4 p-6 lg:p-10">
                <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider">
                    <span class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span> {{ __('Deal of the day') }}
                </div>
                <h2 class="font-display font-extrabold text-2xl lg:text-4xl mt-3 leading-tight">{{ $flashSale->title ?? __('Lightning deals, every hour.') }}</h2>
                <p class="text-white/90 text-[14px] mt-2">{{ __('Up to 70% off — only while stocks last.') }}</p>
                <a href="{{ url('flashdeals/list') }}" class="inline-block mt-6 bg-white text-deep px-6 py-2.5 rounded-full font-semibold hover:bg-yellow-300 transition-colors">{{ __('View all deals') }} →</a>
            </div>
            <div class="lg:col-span-8 bg-white/5 p-4 lg:p-6">
                <div class="flex gap-4 overflow-x-auto no-scrollbar scroll-snap-x">
                    @foreach($flashProducts as $fp)
                        @php
                            try {
                                $fpName = is_object($fp) && method_exists($fp, 'getTranslations') ? ($fp->getTranslations('name')[$lang] ?? $fp->name) : ($fp->name ?? '');
                                $fpUrl = is_object($fp) && method_exists($fp, 'getURL') ? '#' : '#';
                                $fpImg = $fp->image ?? null;
                            } catch (\Throwable $e) { $fpName=''; $fpUrl='#'; $fpImg=null; }
                        @endphp
                        <a href="{{ $fpUrl }}" class="snap-start shrink-0 w-44 bg-white rounded-xl overflow-hidden hover:shadow-hover transition-shadow">
                            <div class="aspect-square bg-slate-50 relative overflow-hidden">
                                @if($fpImg)
                                    <img src="{{ url('images/products/' . $fpImg) }}" loading="lazy" class="w-full h-full object-cover">
                                @endif
                            </div>
                            <div class="p-2.5">
                                <h4 class="text-[12px] font-semibold line-clamp-2 text-deep min-h-[32px]">{{ $fpName }}</h4>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ============= HOT DEALS ============= --}}
@if($showHotdeals)
@isset($hotdeals)
@if($hotdeals->count())
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="bg-gradient-to-br from-rose-50 via-white to-amber-50 rounded-2xl shadow-card p-5 lg:p-7 border border-rose-100">
        <div class="flex items-end justify-between mb-5 flex-wrap gap-3">
            <div class="flex items-center gap-3">
                <span class="w-12 h-12 rounded-xl grid place-items-center bg-rose-500 text-white shadow-card">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1 4 5 5 5 9a5 5 0 1 1-10 0c0-1.5.5-3 1.5-4-.3 2 1 3 1.5 3 0-3 1-5 2-8z"/></svg>
                </span>
                <div>
                    <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Hot Deals') }}</h2>
                    <p class="text-slate-500 text-[14px] mt-1">{{ __('Hand-picked products with limited-time discounts') }}</p>
                </div>
            </div>
            <a href="{{ url('flashdeals/list') }}" class="text-brand-600 font-semibold text-[14px] hover:underline">{{ __('See all deals') }} →</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($hotdeals->take(10) as $p)
                @include('front.partials.product-card', ['p' => $p, 'lang' => $lang])
            @endforeach
        </div>
    </div>
</section>
@endif
@endisset
@endif

{{-- ============= FEATURED PRODUCTS ============= --}}
@if(count($featuredpros))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <div class="flex items-end justify-between mb-5 flex-wrap gap-3">
            <div>
                <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Featured Products') }}</h2>
                <p class="text-slate-500 text-[14px] mt-1">{{ __('Top-rated picks just for you') }}</p>
            </div>
            <a href="{{ url('featured/products') }}" class="text-brand-600 font-semibold text-[14px] hover:underline">{{ __('See more') }} →</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($featuredpros as $p)
                @include('front.partials.product-card', ['p' => $p, 'lang' => $lang])
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============= MID BANNER STRIP ============= --}}
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="grid md:grid-cols-3 gap-4">
        @php
            $bannerCats = $allCats->take(3);
            $bannerColors = [
                ['bg' => 'bg-indigo-600', 'grad' => 'from-indigo-700', 'btn' => 'text-indigo-700'],
                ['bg' => 'bg-rose-500', 'grad' => 'from-rose-600', 'btn' => 'text-rose-600'],
                ['bg' => 'bg-emerald-700', 'grad' => 'from-emerald-800', 'btn' => 'text-emerald-700'],
            ];
        @endphp
        @foreach($bannerCats as $idx => $bcat)
            @php $col = $bannerColors[$idx] ?? $bannerColors[0]; @endphp
            <a href="javascript:void(0)" onclick="changeCategory({{ $bcat->id }}, 'main')" class="relative rounded-2xl overflow-hidden {{ $col['bg'] }} text-white p-6 min-h-[180px] block">
                @if($bcat->image && file_exists(public_path() . '/images/category/' . $bcat->image))
                    <img src="{{ url('images/category/' . $bcat->image) }}" class="absolute right-0 top-0 bottom-0 w-3/5 object-cover opacity-70">
                @endif
                <div class="absolute inset-0 bg-gradient-to-r {{ $col['grad'] }} to-transparent"></div>
                <div class="relative">
                    <div class="text-[11px] font-bold uppercase tracking-wider opacity-90">{{ __('Shop') }}</div>
                    <h3 class="font-display font-bold text-2xl mt-1">{{ $bcat->title }}</h3>
                    <span class="inline-block mt-3 bg-white {{ $col['btn'] }} px-4 py-1.5 rounded-full text-[13px] font-semibold">{{ __('Shop now') }} →</span>
                </div>
            </a>
        @endforeach
    </div>
</section>

{{-- ============= NEW ARRIVALS / TABBED PRODUCTS ============= --}}
@if(count($newpros))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
        <div class="flex items-end justify-between mb-5 flex-wrap gap-3">
            <div>
                <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('New Arrivals') }}</h2>
                <p class="text-slate-500 text-[14px] mt-1">{{ __('Latest products from your favorite brands') }}</p>
            </div>
            <a href="{{ url('shop') }}" class="text-brand-600 font-semibold text-[14px] hover:underline">{{ __('See more') }} →</a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
            @foreach($newpros as $p)
                @include('front.partials.product-card', ['p' => $p, 'lang' => $lang])
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============= TOP CATEGORY PRODUCTS ============= --}}
@if(!empty($topcatgoryproducts))
    @foreach($topcatgoryproducts as $cgIdx => $catGroup)
        @php
            $catName = is_array($catGroup['category_name']) ? ($catGroup['category_name'][$lang] ?? reset($catGroup['category_name'])) : $catGroup['category_name'];
            $catProducts = isset($catGroup['products']) ? collect($catGroup['products'])->filter()->take(10) : collect();
        @endphp
        @if(count($catProducts))
        <section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
            <div class="bg-white rounded-2xl shadow-card p-5 lg:p-7">
                <div class="flex items-end justify-between mb-5 flex-wrap gap-3">
                    <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Best of') }} {{ $catName }}</h2>
                    <a href="{{ url('shop') }}" class="text-brand-600 font-semibold text-[14px] hover:underline">{{ __('See more') }} →</a>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 lg:gap-4">
                    @foreach($catProducts as $p)
                        @include('front.partials.product-card', ['p' => $p, 'lang' => $lang])
                    @endforeach
                </div>
            </div>
        </section>
        @endif
    @endforeach
@endif

{{-- ============= TESTIMONIALS ============= --}}
@if(isset($testimonials) && $testimonials->count())
@php
    $tonePalette = [
        ['bg-brand-500',   'fuchsia-500'],
        ['emerald-500',    'brand-500'],
        ['rose-500',       'amber-500'],
        ['indigo-500',     'sky-500'],
        ['violet-500',     'rose-500'],
        ['amber-500',      'emerald-500'],
    ];
    $avgRating = $testimonials->avg('rating') ?: 5;
@endphp
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="flex items-end justify-between mb-6 flex-wrap gap-3">
        <div>
            <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Loved by shoppers worldwide') }}</h2>
            <div class="flex items-center gap-2 text-[14px] text-slate-600 mt-1">
                <span class="text-star flex">@for($i=1;$i<=5;$i++){{ $avgRating >= $i - 0.5 ? '★' : '☆' }}@endfor</span>
                <span class="font-semibold tabular">{{ number_format($avgRating, 1) }} / 5</span>
                <span class="text-slate-400">·</span>
                <span>{{ $testimonials->count() }} {{ __('happy customers') }}</span>
            </div>
        </div>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($testimonials->take(6) as $idx => $t)
            @php
                $tone = $tonePalette[$idx % count($tonePalette)];
                $rating = max(1, min(5, (int) ($t->rating ?: 5)));
                $hasImage = $t->image && file_exists(public_path('images/testimonial/' . $t->image));
                $initial = strtoupper(mb_substr($t->name ?: 'C', 0, 1));
            @endphp
            <figure class="bg-white rounded-2xl shadow-card p-6 flex flex-col">
                <div class="text-star text-lg leading-none mb-3">
                    @for($i = 1; $i <= 5; $i++){{ $i <= $rating ? '★' : '☆' }}@endfor
                </div>
                <p class="text-[14px] text-slate-600 leading-relaxed flex-1">"{{ \Illuminate\Support\Str::limit(strip_tags((string) ($t->des ?? '')), 240) }}"</p>
                <div class="flex items-center gap-3 mt-5 pt-4 border-t border-slate-100">
                    @if($hasImage)
                        <img src="{{ url('images/testimonial/' . $t->image) }}" alt="{{ $t->name }}" loading="lazy" class="w-10 h-10 rounded-full object-cover">
                    @else
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-{{ $tone[0] }} to-{{ $tone[1] }} grid place-items-center text-white font-bold">{{ $initial }}</div>
                    @endif
                    <div class="min-w-0">
                        <div class="text-[13px] font-semibold truncate">{{ $t->name }}</div>
                        <div class="text-[12px] text-slate-500 truncate">{{ $t->post ?: __('Verified buyer') }}</div>
                    </div>
                </div>
            </figure>
        @endforeach
    </div>
</section>
@endif

{{-- ============= BLOG SECTION ============= --}}
@if(isset($blogs) && count($blogs))
<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-12">
    <div class="flex items-end justify-between mb-6">
        <div>
            <h2 class="font-display font-extrabold text-2xl lg:text-3xl">{{ __('Latest from our blog') }}</h2>
            <p class="text-slate-500 text-[14px] mt-1">{{ __('Tips, guides, and inspiration') }}</p>
        </div>
        <a href="{{ url('blog') }}" class="text-brand-600 font-semibold text-[14px] hover:underline">{{ __('All posts') }} →</a>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach($blogs->take(3) as $blog)
            <a href="{{ $blog->url ?? '#' }}" class="group bg-white rounded-2xl shadow-card hover:shadow-hover overflow-hidden transition-shadow">
                <div class="aspect-[16/10] overflow-hidden bg-slate-100">
                    <img src="{{ $blog->image }}" alt="" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-5">
                    <div class="text-[11px] text-slate-500 uppercase tracking-wider">{{ $blog->created_on }} · {{ $blog->read_time ?? '3 min read' }}</div>
                    <h3 class="font-display font-bold text-lg mt-2 line-clamp-2">{{ is_array($blog->heading) ? ($blog->heading[$lang] ?? (array_values($blog->heading)[0] ?? '')) : $blog->heading }}</h3>
                    <p class="text-[13px] text-slate-600 mt-2 line-clamp-2">{{ \Illuminate\Support\Str::limit($blog->des, 120) }}</p>
                </div>
            </a>
        @endforeach
    </div>
</section>
@endif

@endsection

@push('script')
@endpush