@extends('layouts.app')

@section('content')
@php
    $heroSlides = $storeConfig['heroSlides'] ?? [];
    $spotlight = $storeConfig['spotlightBanner'] ?? [];
    $budgetTiles = $storeConfig['budgetTiles'] ?? [];
    $trustPillars = $storeConfig['trustPillars'] ?? [];
@endphp

{{-- ========================================================================
     SECTION 1: EDITORIAL SPLIT / PORTRAIT HERO SHOWCASE (Above the Fold)
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.1)
     Desktop (1025px+): 42% Left Story & CTA Box | 58% Right 4:3 Uncropped Saree
     Mobile (320–767px): Full-width 4:5 Vertical Portrait Image on top | Story Box below
     ======================================================================== --}}
@if(count($heroSlides) > 0)
<section x-data="{
            activeSlide: 0,
            totalSlides: {{ count($heroSlides) }},
            paused: false,
            timer: null,
            slides: @js($heroSlides),

            init() {
                const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                if (!prefersReducedMotion && this.totalSlides > 1) {
                    this.startAutoPlay();
                }
            },
            startAutoPlay() {
                this.timer = setInterval(() => {
                    if (!this.paused) {
                        this.activeSlide = (this.activeSlide + 1) % this.totalSlides;
                    }
                }, 5000);
            },
            goToSlide(idx) {
                this.activeSlide = idx;
            }
         }"
         @mouseenter="paused = true"
         @mouseleave="paused = false"
         class="lg:pt-[24px] pb-[40px] md:pb-[52px] lg:pb-[64px]">

    <div class="max-w-container mx-auto lg:px-[24px]">
        <div class="bg-bg-surface border-b lg:border border-border-subtle">

            {{-- A. Desktop & Tablet Split Layout (lg:flex) --}}
            <div class="hidden lg:flex items-stretch">
                {{-- Left Column (42% Width — Story & CTA Box, 48px Padding) --}}
                <div class="w-[42%] p-[48px] flex flex-col justify-center space-y-[18px]">
                    <p class="type-eyebrow" x-text="slides[activeSlide].eyebrow"></p>
                    <h1 class="type-h1" x-text="slides[activeSlide].title"></h1>
                    <p class="type-body" x-text="slides[activeSlide].subtitle"></p>
                    <div class="pt-[8px]">
                        <a :href="slides[activeSlide].link"
                           class="btn-primary px-[32px]"
                           x-text="slides[activeSlide].buttonText"></a>
                    </div>
                </div>

                {{-- Right Column (58% Width — 4:3 Uncropped Saree Showcase, 1600x1200) --}}
                <div class="w-[58%] relative aspect-hero-desktop bg-bg-main border-l border-border-subtle overflow-hidden">
                    @foreach($heroSlides as $idx => $slide)
                        <div x-show="activeSlide === {{ $idx }}"
                             x-transition:enter="transition-opacity ease-out duration-300"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             x-transition:leave="transition-opacity ease-in duration-200"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0"
                             class="absolute inset-0">
                            <img src="{{ $slide['desktopImage'] }}"
                                 alt="{{ $slide['title'] }}"
                                 class="w-full h-full object-cover object-center">
                        </div>
                    @endforeach

                    {{-- Bottom Pagination Dots ([●] ○ ○ in --brand-primary / --brand-accent) --}}
                    @if(count($heroSlides) > 1)
                        <div class="absolute bottom-[16px] inset-x-0 flex items-center justify-center gap-[8px] z-10">
                            @foreach($heroSlides as $idx => $slide)
                                <button type="button"
                                        @click="goToSlide({{ $idx }})"
                                        aria-label="Go to hero slide {{ $idx + 1 }}"
                                        :class="activeSlide === {{ $idx }}
                                            ? 'w-[24px] h-[8px] bg-brand-primary'
                                            : 'w-[8px] h-[8px] bg-brand-accent hover:bg-brand-primary'"
                                        class="rounded-full transition-all duration-200 cursor-pointer"></button>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- B. Mobile & Tablet Portrait Hero Layout (lg:hidden) --}}
            <div class="lg:hidden">
                {{-- Top Image Frame: Dedicated 4:5 Vertical Portrait Image (1080x1350) with zero text covering the saree --}}
                <div class="relative w-full aspect-hero-mobile bg-bg-main overflow-hidden">
                    @foreach($heroSlides as $idx => $slide)
                        <div x-show="activeSlide === {{ $idx }}"
                             x-transition:enter="transition-opacity ease-out duration-300"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             class="absolute inset-0">
                            <img src="{{ $slide['mobilePortraitImage'] }}"
                                 alt="{{ $slide['title'] }}"
                                 class="w-full h-full object-cover object-top">
                        </div>
                    @endforeach

                    @if(count($heroSlides) > 1)
                        <div class="absolute bottom-[12px] inset-x-0 flex items-center justify-center gap-[8px] z-10">
                            @foreach($heroSlides as $idx => $slide)
                                <button type="button"
                                        @click="goToSlide({{ $idx }})"
                                        aria-label="Go to hero slide {{ $idx + 1 }}"
                                        :class="activeSlide === {{ $idx }}
                                            ? 'w-[22px] h-[7px] bg-brand-primary'
                                            : 'w-[7px] h-[7px] bg-brand-accent'"
                                        class="rounded-full transition-all duration-200 cursor-pointer"></button>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Bottom Story Box (--bg-surface, 1px --border-subtle top border, 20px 16px padding) --}}
                <div class="bg-bg-surface border-t border-border-subtle px-[16px] py-[20px] space-y-[10px]">
                    <p class="type-eyebrow" x-text="slides[activeSlide].eyebrow"></p>
                    <h1 class="type-h1" x-text="slides[activeSlide].title"></h1>
                    <p class="type-body line-clamp-2" x-text="slides[activeSlide].subtitle"></p>
                    <div class="pt-[6px]">
                        <a :href="slides[activeSlide].link"
                           class="btn-primary w-full"
                           x-text="slides[activeSlide].buttonText"></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 2: "SHOP BY SAREE WEAVE" — VISUAL PORTRAIT CATEGORY CARDS
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.2)
     Desktop: 6 Vertical 3:4 Portrait Cards in a single row (gap: 20px)
     Mobile: Horizontal touch-swipe row showing ~2.3 cards per screen width (gap: 12px)
     ======================================================================== --}}
@if(count($activeCategories) > 0)
<section class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main space-y-[20px] lg:space-y-[28px]">
        {{-- Section Header --}}
        <div class="space-y-[4px]">
            <h2 class="type-h2">Shop by Saree Weave</h2>
            <p class="type-body">Select your favorite fabric handcrafted by Bangladeshi artisans</p>
        </div>

        {{-- Responsive 3:4 Portrait Category Cards Row --}}
        <div class="flex lg:grid lg:grid-cols-6 gap-[12px] md:gap-[16px] lg:gap-[20px] overflow-x-auto no-scrollbar snap-x snap-mandatory pb-[4px]">
            @foreach($activeCategories as $category)
                <a href="{{ url('/category/' . $category['slug']) }}"
                   class="group shrink-0 snap-start w-[41.5%] sm:w-[30%] lg:w-full bg-bg-surface border border-border-subtle hover:border-brand-primary active:border-brand-primary transition-colors duration-200 flex flex-col">
                    {{-- Top: Strict 3:4 Portrait Image (Gently zooms 1.04x on desktop hover) --}}
                    <div class="w-full aspect-saree overflow-hidden bg-bg-main">
                        <img src="{{ $category['coverImage'] }}"
                             alt="{{ $category['name'] }}"
                             loading="lazy"
                             class="w-full h-full object-cover object-top group-hover:scale-[1.04] transition-transform duration-250 ease-out">
                    </div>

                    {{-- Bottom: 12px Padding, Centered --}}
                    <div class="p-[12px] text-center space-y-[2px]">
                        <h3 class="type-h4 text-text-primary group-hover:text-brand-primary transition-colors duration-200">
                            {{ $category['shortName'] ?? $category['name'] }}
                        </h3>
                        <p class="font-body text-[12px] text-text-muted">
                            {{ $category['productCount'] }} {{ $category['productCount'] === 1 ? 'Saree' : 'Sarees' }}
                        </p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 3: "NEW ARRIVALS — FRESH OFF THE LOOM" (Responsive Product Slider)
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.3)
     ======================================================================== --}}
@if(count($newArrivals) > 0)
<section class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main space-y-[20px] lg:space-y-[24px]">
        {{-- Section Header Bar --}}
        <div class="flex items-baseline justify-between gap-[12px]">
            <h2 class="type-h2">New Arrivals</h2>
            <a href="{{ url('/collections/new-arrivals') }}" class="link-brand shrink-0">
                <span>View All New</span>
                <span class="text-brand-accent" aria-hidden="true">→</span>
            </a>
        </div>

        {{-- Responsive Product Slider (Desktop 4-Card + 3-Dot | Mobile 2-Card + Peek + Progress Bar + End Card) --}}
        <x-product.slider
            :products="$newArrivals"
            sliderId="home-new-arrivals"
            viewAllUrl="/collections/new-arrivals"
            viewAllLabel="View All New Arrivals"
            :totalCount="count($newArrivals)"
        />
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 4: FEATURED SPOTLIGHT BANNER ("THE FESTIVE & BRIDAL EDIT")
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.4)
     Desktop: 2-Column Split (55% Left Dual 3:4 Photo Collage | 45% Right Story & CTA)
     Mobile: Portrait image stacked on top, story & full-width button below
     ======================================================================== --}}
@if(!empty($spotlight['enabled']))
<section class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main">
        <div class="bg-bg-surface border border-border-subtle overflow-hidden">
            <div class="flex flex-col lg:flex-row items-stretch">

                {{-- Left Column (55% Desktop): Dual 3:4 Photo Collage --}}
                <div class="w-full lg:w-[55%] grid grid-cols-2 gap-[8px] md:gap-[12px] p-[12px] md:p-[20px] lg:p-[24px] bg-bg-main border-b lg:border-b-0 lg:border-r border-border-subtle">
                    @foreach(($spotlight['images'] ?? []) as $img)
                        <div class="aspect-saree bg-bg-surface border border-border-subtle overflow-hidden">
                            <img src="{{ $img['url'] }}"
                                 alt="{{ $img['alt'] }}"
                                 loading="lazy"
                                 class="w-full h-full object-cover object-top">
                        </div>
                    @endforeach
                </div>

                {{-- Right Column (45% Desktop): Editorial Story & CTA Box --}}
                <div class="w-full lg:w-[45%] p-[20px] md:p-[32px] lg:p-[44px] flex flex-col justify-center space-y-[14px] lg:space-y-[18px]">
                    <p class="type-eyebrow">{{ $spotlight['eyebrow'] ?? 'ARTISAN SPOTLIGHT' }}</p>
                    <h2 class="type-h2">{{ $spotlight['title'] }}</h2>
                    <p class="type-body">{{ $spotlight['description'] }}</p>
                    <div class="pt-[6px]">
                        <a href="{{ url($spotlight['link'] ?? '/collections/festive-edit') }}"
                           class="btn-primary w-full lg:w-auto lg:px-[32px]">
                            {{ $spotlight['buttonText'] ?? 'SHOP FESTIVE EDIT →' }}
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 5: "MOST LOVED SAREES" — BEST SELLERS SLIDER
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.5)
     ======================================================================== --}}
@if(count($mostLoved) > 0)
<section class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main space-y-[20px] lg:space-y-[24px]">
        {{-- Section Header Bar --}}
        <div class="flex items-baseline justify-between gap-[12px]">
            <h2 class="type-h2">Most Loved Sarees</h2>
            <a href="{{ url('/collections/best-sellers') }}" class="link-brand shrink-0">
                <span>View All</span>
                <span class="text-brand-accent" aria-hidden="true">→</span>
            </a>
        </div>

        {{-- Responsive Product Slider --}}
        <x-product.slider
            :products="$mostLoved"
            sliderId="home-most-loved"
            viewAllUrl="/collections/best-sellers"
            viewAllLabel="View All Most Loved"
            :totalCount="count($mostLoved)"
        />
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 6: "SHOP BY BUDGET & OCCASION" — 4 NON-OVERLAPPING PRICE TILES
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.6)
     Desktop: 4 columns in a single row (gap: 20px)
     Mobile: 2 x 2 Grid (gap: 12px)
     On hover/tap: tile fills with --brand-primary and text flips to --text-light
     ======================================================================== --}}
@if(count($budgetTiles) > 0)
<section class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main space-y-[20px] lg:space-y-[28px]">
        <h2 class="type-h2 text-center">Shop by Budget & Occasion</h2>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-[12px] md:gap-[16px] lg:gap-[20px]">
            @foreach($budgetTiles as $tile)
                <a href="{{ url('/collections/all?price=' . $tile['slug']) }}"
                   class="group bg-bg-surface border border-border-subtle hover:bg-brand-primary hover:border-brand-primary active:bg-brand-primary px-[14px] py-[24px] lg:px-[24px] lg:py-[32px] text-center flex flex-col items-center justify-center gap-[8px] transition-colors duration-200">
                    <h3 class="type-h4 text-brand-primary group-hover:text-text-light group-active:text-text-light transition-colors duration-200">
                        {{ $tile['label'] }}
                    </h3>
                    <p class="font-body text-[12px] lg:text-[13px] text-text-muted group-hover:text-text-light group-active:text-text-light transition-colors duration-200">
                        {{ $tile['subtext'] }}
                    </p>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 7: "LOVED BY WOMEN ACROSS BANGLADESH" — CUSTOMER DRAPE STORIES
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.7)
     & frontend/reviews_chat_and_social_sharing_plan.md (Section 1C)
     Desktop: 4 Testimonial Cards in a row
     Mobile: Horizontal touch-swipe showing ~1.2 cards + slim progress bar
     ======================================================================== --}}
@if(count($featuredReviews) > 0)
<section x-data="{
            thumbWidth: 35,
            thumbOffset: 0,
            updateReviewScroll() {
                const el = this.$refs.reviewTrack;
                if (!el) return;
                const max = Math.max(0, el.scrollWidth - el.clientWidth);
                const cur = Math.max(0, el.scrollLeft);
                if (el.scrollWidth > 0) {
                    const ratio = Math.min(1, el.clientWidth / el.scrollWidth);
                    this.thumbWidth = Math.max(25, Math.round(ratio * 100));
                    const prog = max > 0 ? Math.min(1, cur / max) : 0;
                    this.thumbOffset = prog * (100 - this.thumbWidth);
                }
            }
         }"
         x-init="$nextTick(() => updateReviewScroll())"
         class="pb-[40px] md:pb-[52px] lg:pb-[64px]">
    <div class="container-main space-y-[20px] lg:space-y-[28px]">
        <div class="space-y-[4px]">
            <h2 class="type-h2">Loved by Women Across Bangladesh</h2>
            <p class="type-body">Real drape moments and verified reviews from our customers</p>
        </div>

        {{-- Responsive Testimonial Cards Row --}}
        <div x-ref="reviewTrack"
             @scroll.passive="updateReviewScroll()"
             class="flex lg:grid lg:grid-cols-4 gap-[14px] md:gap-[18px] lg:gap-[20px] overflow-x-auto no-scrollbar snap-x snap-mandatory pb-[4px]">
            @foreach($featuredReviews as $review)
                <article class="shrink-0 snap-start w-[82%] sm:w-[46%] lg:w-full bg-bg-surface border border-border-subtle flex flex-col justify-between">
                    {{-- Top: 4:5 Customer Drape Photo --}}
                    <div class="w-full aspect-hero-mobile bg-bg-main border-b border-border-subtle overflow-hidden">
                        <img src="{{ $review['photoUrl'] ?? $review['sareeThumb'] }}"
                             alt="Customer wearing {{ $review['sareeTitle'] }}"
                             loading="lazy"
                             class="w-full h-full object-cover object-top">
                    </div>

                    {{-- Bottom Content (16px padding) --}}
                    <div class="p-[16px] flex-1 flex flex-col justify-between space-y-[12px]">
                        <div class="space-y-[8px]">
                            {{-- 5 Stars in --brand-primary --}}
                            <div class="text-brand-primary text-[14px] tracking-[2px]" aria-label="{{ $review['rating'] }} out of 5 stars">
                                ★★★★★
                            </div>

                            {{-- Review Quote --}}
                            <p class="font-body text-[14px] leading-[1.55] text-text-primary">
                                “{{ $review['comment'] }}”
                            </p>
                        </div>

                        <div class="space-y-[8px] pt-[6px] border-t border-border-subtle">
                            <div class="flex items-center justify-between flex-wrap gap-[4px]">
                                <span class="font-body font-semibold text-[13px] text-text-primary">
                                    {{ $review['reviewerName'] }}, {{ $review['city'] }}
                                </span>
                                @if(!empty($review['verified']))
                                    <span class="font-body text-[12px] text-text-muted inline-flex items-center gap-[3px]">
                                        <span class="text-state-success font-bold" aria-hidden="true">✓</span>
                                        <span>Verified Buyer</span>
                                    </span>
                                @endif
                            </div>

                            {{-- Link directly to the reviewed Saree PDP --}}
                            <a href="{{ url('/product/' . $review['sareeSlug']) }}"
                               class="block font-body font-medium text-[12px] text-brand-primary hover:underline decoration-brand-accent truncate">
                                Viewed: {{ $review['sareeTitle'] }} →
                            </a>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>

        {{-- Mobile & Tablet Slim Progress Bar --}}
        <div class="flex lg:hidden justify-center mt-[12px]" aria-hidden="true">
            <div class="relative w-[120px] md:w-[160px] h-[3px] bg-border-subtle overflow-hidden rounded-full">
                <div class="absolute top-0 bottom-0 bg-brand-primary rounded-full transition-all duration-150 ease-out"
                     :style="`width: ${thumbWidth}%; left: ${thumbOffset}%;`"></div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ========================================================================
     SECTION 8: ALL COLLECTIONS GATEWAY CTA & BANGLADESH BUYER ASSURANCE STRIP
     Reference: frontend/homepage_layout_and_section_flow_plan.md (Section 3.8)
     ======================================================================== --}}
<section>
    {{-- 1. Centered Catalog Gateway --}}
    <div class="container-main pb-[40px] md:pb-[52px] lg:pb-[64px] text-center space-y-[14px]">
        <p class="font-body text-[15px] text-text-muted">
            Explore every saree fabric, color, and weave in our complete showcase
        </p>
        <div>
            <a href="{{ url('/sarees') }}" class="btn-primary w-full sm:w-auto sm:px-[36px]">
                VIEW ALL SAREE COLLECTIONS →
            </a>
        </div>
    </div>

    {{-- 2. 4-Pillar Bangladesh Trust Strip (Directly Above Footer) --}}
    @if(count($trustPillars) > 0)
    <div class="w-full bg-bg-surface border-t border-b border-border-subtle py-[28px] lg:py-[36px]">
        <div class="container-main">
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-[16px] gap-y-[24px] lg:gap-x-[24px]">
                @foreach($trustPillars as $pillar)
                    <div class="space-y-[4px]">
                        <h3 class="font-body font-semibold text-[14px] text-brand-primary flex items-center gap-[6px]">
                            <span class="text-state-success font-bold" aria-hidden="true">✓</span>
                            <span>{{ $pillar['title'] }}</span>
                        </h3>
                        <p class="font-body font-normal text-[13px] leading-[1.5] text-text-muted">
                            {{ $pillar['subtext'] }}
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</section>
@endsection