{{-- resources/views/storefront/home.blade.php --}}
@extends('storefront.layout')

@section('title', ($pageTitle ?? trans_key('storefront.pageTitles.home')).' - '.($appName ?? config('app.name', 'HyperLocal')))

@section('content')
@php
    $zoneQuery = $selectedZone?->slug ? ['zone' => $selectedZone->slug] : [];
    $storefrontQuery = array_filter([
        'zone' => $selectedZone?->slug,
        'service' => $selectedService ?? null,
    ]);
    $homeBranding = ($settings ?? collect())->get('branding', collect());
    $homeBrandLogo = \App\Support\StorefrontPresenter::mediaUrl(
        ($frontendBranding ?? collect())->get('brand_logo')
        ?? $homeBranding->get('logo')
        ?? $homeBranding->get('dark_logo')
    );
    $homeBrandName = trim((string) ($homeBranding->get('app_name') ?: config('app.name', 'FreshMart')));
    
    $frontendSectionsCollection = collect($frontendSections ?? []);
    $pwaProductRenderLimit = 8;
    $desktopProductRenderLimit = 14;
    
    // Service options for switcher
    $currentService = $selectedService ?? 'grocery';
    $serviceOptions = [
        'grocery' => ['label' => 'InstaKart', 'icon' => '🛒', 'color' => '#2daa37', 'bg' => '#e8f5e9', 'route' => route('storefront.services.show', ['service' => 'grocery'] + $storefrontQuery)],
        'food' => ['label' => 'Foods', 'icon' => '🍔', 'color' => '#6D28D9', 'bg' => '#E9D5FF', 'route' => route('storefront.services.show', ['service' => 'food'] + $storefrontQuery)],
        'parcel' => ['label' => 'Parcel', 'icon' => '📦', 'color' => '#F97316', 'bg' => '#FFEDD5', 'route' => route('storefront.services.show', ['service' => 'parcel'] + $storefrontQuery)],
    ];
    $currentServiceData = $serviceOptions[$currentService] ?? $serviceOptions['grocery'];
    $sectionToArray = function ($data) use (&$sectionToArray) {
        if (is_object($data)) {
            $data = get_object_vars($data);
        }
        if (is_array($data)) {
            foreach ($data as $key => $value) {
                if (is_object($value) || is_array($value)) {
                    $data[$key] = $sectionToArray($value);
                }
            }
        }
        return $data;
    };

    $normalizeStoreForSection = function ($store) use ($currentService) {
        $cuisines = collect((array) data_get($store, 'meta.cuisines', data_get($store, 'cuisine_names', [])))
            ->filter()
            ->take(3)
            ->join(', ');

        return [
            'id' => data_get($store, 'id'),
            'slug' => data_get($store, 'slug'),
            'name' => data_get($store, 'name', 'Store'),
            'banner_image' => data_get($store, 'cover_image') ?: data_get($store, 'banner_image') ?: data_get($store, 'image'),
            'logo_image' => data_get($store, 'logo_image') ?: data_get($store, 'logo'),
            'cuisine_text' => $cuisines ?: data_get($store, 'description', $currentService === 'food' ? 'Fresh meals' : 'Daily essentials'),
            'rating' => data_get($store, 'reviews_avg_rating') ?: data_get($store, 'rating'),
            'total_ratings' => data_get($store, 'reviews_count') ?: data_get($store, 'total_ratings'),
            'delivery_time' => data_get($store, 'meta.eta_label') ?: data_get($store, 'delivery_time') ?: ($currentService === 'food' ? '30-40 mins' : '10-15 mins'),
            'is_open_now' => data_get($store, 'is_open', true),
            'is_pure_veg' => data_get($store, 'is_pure_veg', false),
            'is_featured' => data_get($store, 'is_featured', false),
            'service_type' => data_get($store, 'service_type', $currentService),
        ];
    };

    $normalizeProductForSection = function ($product) use ($currentService) {
        $store = data_get($product, 'store');
        $price = data_get($product, 'base_price', data_get($product, 'final_price', data_get($product, 'discounted_price', data_get($product, 'price', 0))));
        $compare = data_get($product, 'compare_price');
        $rawPrice = data_get($product, 'price');
        $discounted = data_get($product, 'discounted_price');

        if ($compare === null && $rawPrice !== null && $discounted !== null && (float) $discounted < (float) $rawPrice) {
            $compare = (float) $rawPrice;
            $price = (float) $discounted;
        }

        return [
            'id' => data_get($product, 'id') ?: data_get($product, 'menu_item_id'),
            'menu_item_id' => data_get($product, 'menu_item_id', data_get($product, 'id')),
            'name' => data_get($product, 'name', 'Product'),
            'image' => data_get($product, 'image') ?: data_get($product, 'image_url'),
            'image_url' => data_get($product, 'image_url') ?: data_get($product, 'image'),
            'images' => array_values(array_filter([
                data_get($product, 'image') ?: data_get($product, 'image_url'),
            ])),
            'base_price' => (float) ($price ?? 0),
            'price' => (float) ($price ?? 0),
            'discounted_price' => $compare !== null ? (float) ($price ?? 0) : data_get($product, 'discounted_price'),
            'compare_price' => $compare,
            'restaurant_id' => data_get($product, 'restaurant_id') ?: data_get($store, 'id'),
            'restaurant_name' => data_get($product, 'restaurant_name') ?: data_get($store, 'name'),
            'brand_id' => data_get($product, 'brand_id') ?: data_get($product, 'brand.id'),
            'brand_name' => data_get($product, 'brand_name') ?: data_get($product, 'brand.name'),
            'is_veg' => data_get($product, 'is_veg', $currentService === 'grocery'),
            'sku' => data_get($product, 'sku') ?: data_get($product, 'unit') ?: '1 unit',
            'rating' => data_get($product, 'reviews_avg_rating') ?: data_get($product, 'rating'),
            'reviews_avg_rating' => data_get($product, 'reviews_avg_rating') ?: data_get($product, 'rating'),
            'reviews_count' => data_get($product, 'reviews_count') ?: data_get($product, 'total_orders', 0),
            'total_orders' => data_get($product, 'total_orders') ?: data_get($product, 'reviews_count', 0),
            'is_active' => data_get($product, 'is_active', data_get($product, 'is_available', true)),
            'is_available' => data_get($product, 'is_available', true),
        ];
    };

    $normalizeCategoryForSection = function ($category) use ($currentService) {
        return [
            'id' => data_get($category, 'id'),
            'name' => data_get($category, 'name', data_get($category, 'title', 'Category')),
            'slug' => data_get($category, 'slug'),
            'service_type' => data_get($category, 'service_type', $currentService),
            'description' => data_get($category, 'description'),
            'icon' => data_get($category, 'icon'),
            'image' => data_get($category, 'image') ?: data_get($category, 'image_url'),
            'image_url' => data_get($category, 'image_url') ?: data_get($category, 'image'),
        ];
    };

    $fallbackStoreItems = collect($stores ?? $foodRestaurants ?? [])
        ->map($normalizeStoreForSection)
        ->filter(fn ($store) => filled(data_get($store, 'id')))
        ->values()
        ->all();

    $fallbackProductItems = collect($products ?? $foodProducts ?? [])
        ->map($normalizeProductForSection)
        ->filter(fn ($product) => filled(data_get($product, 'menu_item_id')))
        ->values()
        ->all();

    $fallbackCategoryItems = collect($categories ?? $foodCuisines ?? [])
        ->map($normalizeCategoryForSection)
        ->filter(fn ($category) => filled(data_get($category, 'id')) || filled(data_get($category, 'slug')))
        ->values()
        ->all();

    $fallbackBrandItems = collect($fallbackProductItems)
        ->map(function ($product) {
            return [
                'brand_id' => data_get($product, 'brand_id'),
                'id' => data_get($product, 'brand_id'),
                'name' => data_get($product, 'brand_name'),
                'restaurant_id' => data_get($product, 'restaurant_id'),
                'image' => data_get($product, 'brand_image'),
                'logo' => data_get($product, 'brand_logo'),
            ];
        })
        ->filter(fn ($brand) => filled(data_get($brand, 'name')))
        ->unique(fn ($brand) => data_get($brand, 'brand_id') ?: data_get($brand, 'name'))
        ->values()
        ->all();

    $categorySectionTypes = ['categories', 'cuisine_grid', 'category_grid', 'category_scroller', 'shop_by_category', 'shop_by_categories'];
    $bannerSectionTypes = ['banner_carousel', 'banners', 'banner_strip', 'promotional_banners', 'promo_banner', 'offer_banner'];
    $restaurantSectionTypes = ['restaurant_grid', 'featured_restaurants', 'nearby_restaurants', 'popular_restaurants', 'new_arrivals', 'trending_near_you', 'restaurant_discovery', 'recommended_for_you', 'store_grid', 'nearby_stores', 'popular_stores', 'stores_near_you'];
    $subcategoryProductSectionTypes = ['subcategory_product_sections', 'subcategory_products', 'sub_category_products', 'subcategory_shelves'];
    $productSectionTypes = ['popular_dishes', 'popular_items', 'recommended_items', 'best_sellers', 'product_shelf', 'product_shelves', 'product_rail', 'product_grid', 'product_scroller', 'product_shelf_grid', 'product_shelf_scroller', 'shelf_products', 'menu_items', 'featured_products', 'featured_items', 'products_for_you'];
    $offerSectionTypes = ['admin_offers', 'offers', 'coupon_grid', 'promo_codes'];
    $brandSectionTypes = ['shop_by_brand', 'brands', 'brand_grid', 'shop_by_brands'];
    $debugHomeSections = request()->boolean('debug_sections')
        || request()->boolean('debug_home')
        || request()->boolean('debug')
        || request()->has('debug_sections')
        || request()->has('debug_home')
        || request()->has('debug');
    $sectionDebugRows = [];
    
    // Convert all sections to arrays and filter
    $sectionsData = [];
    foreach ($frontendSectionsCollection as $section) {
        $sectionArray = $sectionToArray($section);
        $sectionType = $sectionArray['type'] ?? $sectionArray['section_type'] ?? $sectionArray['token'] ?? 'unknown';
        $debugToken = $sectionArray['token'] ?? $sectionArray['home_section_id'] ?? null;
        $debugTitle = $sectionArray['title'] ?? '';
        
        // Ensure items is an array, not a Collection object
        if (isset($sectionArray['items'])) {
            // Check if it's an object before using method_exists
            if (is_object($sectionArray['items'])) {
                // If it's a Collection or similar, convert to array
                if (method_exists($sectionArray['items'], 'toArray')) {
                    $sectionArray['items'] = $sectionArray['items']->toArray();
                } else {
                    $sectionArray['items'] = $sectionToArray($sectionArray['items']);
                }
            } elseif (is_array($sectionArray['items'])) {
                // If it's already an array, recursively convert nested objects
                $sectionArray['items'] = $sectionToArray($sectionArray['items']);
            }
        }

        $sectionItems = $sectionArray['items'] ?? [];
        $usesClientFeed = (bool) ($sectionArray['client_feed'] ?? false);
        $strictItems = (bool) ($sectionArray['strict_items'] ?? false);
        $knownFallbackSection = in_array($sectionType, array_merge($categorySectionTypes, $restaurantSectionTypes, $productSectionTypes, $subcategoryProductSectionTypes, $brandSectionTypes), true);
        $shouldResolveFallback = empty($sectionItems) && ($usesClientFeed || ! $strictItems || $knownFallbackSection);
        $originalItemCount = is_countable($sectionItems) ? count($sectionItems) : 0;
        $fallbackSource = null;

        if ($shouldResolveFallback) {
            if (in_array($sectionType, $categorySectionTypes, true)) {
                $sectionItems = $fallbackCategoryItems;
                $fallbackSource = 'categories';
            } elseif (in_array($sectionType, $restaurantSectionTypes, true)) {
                $sectionItems = $fallbackStoreItems;
                $fallbackSource = 'stores';
            } elseif (in_array($sectionType, $productSectionTypes, true)) {
                $sectionItems = $fallbackProductItems;
                $fallbackSource = 'products';
            } elseif (in_array($sectionType, $brandSectionTypes, true)) {
                $sectionItems = $fallbackBrandItems;
                $fallbackSource = 'brands';
            }

            if (! empty($sectionItems)) {
                $sectionArray['items'] = $sectionItems;
            }
        }

        // Skip only sections that still have no renderable data.
        if (empty($sectionArray['items']) && !($sectionArray['client_feed'] ?? false)) {
            $sectionDebugRows[] = [
                'stage' => 'normalize',
                'status' => 'skipped_empty',
                'token' => $debugToken,
                'type' => $sectionType,
                'title' => $debugTitle,
                'original_items' => $originalItemCount,
                'items' => 0,
                'client_feed' => $usesClientFeed,
                'strict_items' => $strictItems,
                'fallback_source' => $fallbackSource,
            ];
            continue;
        }

        $sectionDebugRows[] = [
            'stage' => 'normalize',
            'status' => 'accepted',
            'token' => $debugToken,
            'type' => $sectionType,
            'title' => $debugTitle,
            'original_items' => $originalItemCount,
            'items' => is_countable($sectionArray['items'] ?? []) ? count($sectionArray['items']) : 0,
            'client_feed' => $usesClientFeed,
            'strict_items' => $strictItems,
            'fallback_source' => $fallbackSource,
        ];
        
        $sectionsData[] = $sectionArray;
    }
    
    // Extract section data
    $heroSection = null;
    $heroItems = [];
    $heroImage = null;
    $heroTitle = '';
    $heroSubtitle = '';
    $heroLink = '#';
    
    $categorySection = null;
    $homeSectionCategories = [];
    
    $bannerSections = [];
    $restaurantSections = [];
    $productSections = [];
    $offerSections = [];
    $brandSection = null;
    $brands = [];
    $orderedRenderableSections = [];
    $appendOrderedSection = function (array $section, string $renderType) use (&$orderedRenderableSections, &$sectionDebugRows) {
        $section['render_type'] = $renderType;
        $orderedRenderableSections[] = $section;
        $firstItem = collect($section['items'] ?? [])->first();
        $sectionDebugRows[] = [
            'stage' => 'render',
            'status' => 'queued',
            'token' => $section['token'] ?? $section['home_section_id'] ?? null,
            'type' => $section['type'] ?? $section['section_type'] ?? null,
            'title' => $section['title'] ?? '',
            'render_type' => $renderType,
            'items' => is_countable($section['items'] ?? []) ? count($section['items']) : 0,
            'client_feed' => (bool) ($section['client_feed'] ?? false),
            'strict_items' => (bool) ($section['strict_items'] ?? false),
            'first_banner_layout' => in_array($renderType, ['hero', 'banners'], true) ? data_get($firstItem, 'layout_mode') : null,
            'first_banner_ratio' => in_array($renderType, ['hero', 'banners'], true) ? data_get($firstItem, 'image_ratio') : null,
            'first_banner_media_type' => in_array($renderType, ['hero', 'banners'], true) ? data_get($firstItem, 'media_type') : null,
            'first_banner_redirect_type' => in_array($renderType, ['hero', 'banners'], true) ? data_get($firstItem, 'redirect_type') : null,
        ];
    };
    
    foreach ($sectionsData as $section) {
        $type = $section['type'] ?? $section['section_type'] ?? $section['token'] ?? 'unknown';
        $items = $section['items'] ?? [];
        $title = $section['title'] ?? '';
        $subtitle = $section['subtitle'] ?? '';
        
        // Skip empty sections
        if (empty($items) && !($section['client_feed'] ?? false)) {
            $sectionDebugRows[] = [
                'stage' => 'render',
                'status' => 'skipped_empty',
                'token' => $section['token'] ?? $section['home_section_id'] ?? null,
                'type' => $type,
                'title' => $title,
                'items' => 0,
                'client_feed' => (bool) ($section['client_feed'] ?? false),
                'strict_items' => (bool) ($section['strict_items'] ?? false),
            ];
            continue;
        }
        
        // Categorize by type
        if (in_array($type, ['hero_banner', 'hero'])) {
            $heroSection = $section;
            $heroItems = $items;
            $heroImage = !empty($items) ? ($items[0]['image'] ?? $items[0]['image_url'] ?? null) : null;
            $heroTitle = !empty($items) ? ($items[0]['title'] ?? $title) : '';
            $heroSubtitle = !empty($items) ? ($items[0]['description'] ?? $subtitle) : '';
            $heroLink = !empty($items) ? ($items[0]['link'] ?? $items[0]['link_url'] ?? '#') : '#';
            $appendOrderedSection($section, 'hero');
        } elseif (in_array($type, $categorySectionTypes, true)) {
            $categorySection = $section;
            $homeSectionCategories = $items;
            $appendOrderedSection($section, 'categories');
        } elseif (in_array($type, $bannerSectionTypes, true)) {
            $bannerSections[] = $section;
            $appendOrderedSection($section, 'banners');
        } elseif (in_array($type, $restaurantSectionTypes, true)) {
            $restaurantSections[] = $section;
            $appendOrderedSection($section, 'restaurants');
        } elseif (in_array($type, $subcategoryProductSectionTypes, true)) {
            $subcategoryShelves = [];
            foreach ($items as $subcategoryShelf) {
                $shelfProducts = collect(data_get($subcategoryShelf, 'products', []))
                    ->map($sectionToArray)
                    ->map($normalizeProductForSection)
                    ->filter(fn ($product) => filled(data_get($product, 'menu_item_id')) && filled(data_get($product, 'restaurant_id')))
                    ->values()
                    ->all();

                if (empty($shelfProducts)) {
                    continue;
                }

                $subcategoryShelves[] = [
                    'type' => 'subcategory_product_shelf',
                    'id' => data_get($subcategoryShelf, 'id') ?: data_get($subcategoryShelf, 'subcategory_id'),
                    'subcategory_id' => data_get($subcategoryShelf, 'subcategory_id') ?: data_get($subcategoryShelf, 'id'),
                    'title' => data_get($subcategoryShelf, 'title') ?: data_get($subcategoryShelf, 'name') ?: ($title ?: 'Shop By Subcategory'),
                    'subtitle' => data_get($subcategoryShelf, 'parent_name') ?: $subtitle,
                    'image' => data_get($subcategoryShelf, 'image') ?: data_get($subcategoryShelf, 'image_url'),
                    'items' => $shelfProducts,
                    'products' => $shelfProducts,
                    'strict_items' => true,
                ];
            }

            if (! empty($subcategoryShelves)) {
                $section['items'] = $subcategoryShelves;
                $productSections[] = $section;
                $appendOrderedSection($section, 'subcategory_products');
            }
        } elseif (in_array($type, $productSectionTypes, true)) {
            $productSections[] = $section;
            $appendOrderedSection($section, 'products');
        } elseif (in_array($type, $offerSectionTypes, true)) {
            $offerSections[] = $section;
            $appendOrderedSection($section, 'offers');
        } elseif (in_array($type, $brandSectionTypes, true)) {
            $brandSection = $section;
            $brands = $items;
            $appendOrderedSection($section, 'brands');
        } else {
            $firstItem = collect($items)->first();
            if (filled(data_get($firstItem, 'menu_item_id')) || data_get($firstItem, 'price') !== null) {
                $productSections[] = $section;
                $appendOrderedSection($section, 'products');
            } elseif (filled(data_get($firstItem, 'restaurant_id')) || filled(data_get($firstItem, 'rating'))) {
                $restaurantSections[] = $section;
                $appendOrderedSection($section, 'restaurants');
            } elseif (filled(data_get($firstItem, 'brand_id'))) {
                $brandSection = $section;
                $brands = $items;
                $appendOrderedSection($section, 'brands');
            } elseif (filled(data_get($firstItem, 'code'))) {
                $offerSections[] = $section;
                $appendOrderedSection($section, 'offers');
            } else {
                $sectionDebugRows[] = [
                    'stage' => 'render',
                    'status' => 'unrendered_unknown_shape',
                    'token' => $section['token'] ?? $section['home_section_id'] ?? null,
                    'type' => $type,
                    'title' => $title,
                    'items' => is_countable($items) ? count($items) : 0,
                    'first_item_keys' => is_array($firstItem) ? implode(',', array_slice(array_keys($firstItem), 0, 12)) : null,
                ];
            }
        }
    }

    if ($currentService === 'food') {
        $isFoodStoreNearbySection = function ($section) {
            $type = (string) data_get($section, 'type', data_get($section, 'section_type', ''));
            $title = strtolower((string) data_get($section, 'title'));

            return in_array($type, ['store_grid', 'nearby_stores', 'stores_near_you'], true)
                || (str_contains($title, 'store') && str_contains($title, 'near'));
        };

        $isFoodRestaurantNearbySection = function ($section) {
            $type = (string) data_get($section, 'type', data_get($section, 'section_type', ''));
            $title = strtolower((string) data_get($section, 'title'));

            return $type === 'nearby_restaurants'
                || (str_contains($title, 'restaurant') && str_contains($title, 'near'));
        };

        $normalizeFoodNearbySection = function (array $section) {
            $subtitle = strtolower((string) data_get($section, 'subtitle'));
            $section['type'] = 'nearby_restaurants';
            $section['title'] = 'Restaurant Near You';
            if ($subtitle === '' || str_contains($subtitle, 'store')) {
                $section['subtitle'] = 'Top-rated restaurants delivering around you';
            }

            return $section;
        };

        $storeNearbySectionKey = collect($orderedRenderableSections)->search(function ($section) use ($isFoodStoreNearbySection) {
            return ($section['render_type'] ?? '') === 'restaurants' && $isFoodStoreNearbySection($section);
        });

        if ($storeNearbySectionKey !== false) {
            $orderedRenderableSections[$storeNearbySectionKey] = $normalizeFoodNearbySection($orderedRenderableSections[$storeNearbySectionKey]);
            $restaurantSections = collect($restaurantSections)
                ->filter(fn ($section) => $isFoodStoreNearbySection($section) || ! $isFoodRestaurantNearbySection($section))
                ->map(fn ($section) => $isFoodStoreNearbySection($section) ? $normalizeFoodNearbySection($section) : $section)
                ->values()
                ->all();

            $orderedRenderableSections = collect($orderedRenderableSections)
                ->reject(function ($section, $key) use ($storeNearbySectionKey, $isFoodRestaurantNearbySection, $isFoodStoreNearbySection) {
                    return $key !== $storeNearbySectionKey
                        && ($section['render_type'] ?? '') === 'restaurants'
                        && $isFoodRestaurantNearbySection($section)
                        && ! $isFoodStoreNearbySection($section);
                })
                ->values()
                ->all();
        }

        $hasRestaurantNearYou = collect($restaurantSections)->contains(fn ($section) => $isFoodRestaurantNearbySection($section));
        $nearbyRestaurantItems = collect($stores ?? $foodRestaurants ?? [])
            ->map(function ($store) {
                $cuisines = collect((array) data_get($store, 'meta.cuisines', data_get($store, 'cuisine_names', [])))
                    ->filter()
                    ->take(3)
                    ->join(', ');

                return [
                    'id' => data_get($store, 'id'),
                    'slug' => data_get($store, 'slug'),
                    'name' => data_get($store, 'name', 'Restaurant'),
                    'banner_image' => data_get($store, 'cover_image') ?: data_get($store, 'banner_image'),
                    'logo_image' => data_get($store, 'logo_image') ?: data_get($store, 'logo'),
                    'cuisine_text' => $cuisines ?: data_get($store, 'description', 'Fresh meals'),
                    'rating' => data_get($store, 'reviews_avg_rating') ?: data_get($store, 'rating'),
                    'total_ratings' => data_get($store, 'reviews_count') ?: data_get($store, 'total_ratings'),
                    'delivery_time' => data_get($store, 'meta.eta_label') ?: data_get($store, 'delivery_time') ?: '30-40 mins',
                    'is_open_now' => data_get($store, 'is_open', true),
                    'is_pure_veg' => data_get($store, 'is_pure_veg', false),
                    'is_featured' => data_get($store, 'is_featured', false),
                ];
            })
            ->filter(fn ($store) => filled(data_get($store, 'id')))
            ->values()
            ->all();

        if (! $hasRestaurantNearYou && ! empty($nearbyRestaurantItems)) {
            $nearbyRestaurantSection = [
                'type' => 'nearby_restaurants',
                'title' => 'Restaurant Near You',
                'subtitle' => 'Top-rated restaurants delivering around you',
                'items' => $nearbyRestaurantItems,
            ];
            array_unshift($restaurantSections, $nearbyRestaurantSection);
            array_unshift($orderedRenderableSections, $nearbyRestaurantSection + ['render_type' => 'restaurants']);
        }
    }
    
    if (empty($homeSectionCategories) && ! empty($fallbackCategoryItems)) {
        $categorySection = $categorySection ?: [
            'type' => 'categories',
            'title' => $currentService === 'food' ? 'Explore Categories' : 'Shop by Category',
            'subtitle' => 'Discover popular categories',
        ];
        $homeSectionCategories = $fallbackCategoryItems;
        $appendOrderedSection($categorySection + ['items' => $homeSectionCategories], 'categories');
    }

    if (empty($restaurantSections) && ! empty($fallbackStoreItems)) {
        $fallbackRestaurantSection = [
            'type' => $currentService === 'food' ? 'nearby_restaurants' : 'restaurant_grid',
            'title' => $currentService === 'food' ? 'Restaurant Near You' : 'Stores Near You',
            'subtitle' => $currentService === 'food' ? 'Top-rated restaurants delivering around you' : 'Daily essentials from nearby stores',
            'items' => $fallbackStoreItems,
        ];
        $restaurantSections[] = $fallbackRestaurantSection;
        $appendOrderedSection($fallbackRestaurantSection, 'restaurants');
    }

    if (empty($productSections) && ! empty($fallbackProductItems)) {
        $fallbackProductSection = [
            'type' => 'popular_dishes',
            'title' => $currentService === 'food' ? 'Popular Dishes' : 'Popular Products',
            'subtitle' => 'Top ordered items from nearby stores',
            'items' => $fallbackProductItems,
        ];
        $productSections[] = $fallbackProductSection;
        $appendOrderedSection($fallbackProductSection, 'products');
    }

    if (empty($brands) && ! empty($fallbackBrandItems)) {
        $brandSection = $brandSection ?: [
            'type' => 'shop_by_brand',
            'title' => 'Shop By Brand',
            'subtitle' => 'Browse trusted brands',
        ];
        $brands = $fallbackBrandItems;
        $appendOrderedSection($brandSection + ['items' => $brands], 'brands');
    }

    $hasContent = !empty($orderedRenderableSections)
        || !empty($sectionsData)
        || !empty($homeSectionCategories)
        || !empty($bannerSections)
        || !empty($restaurantSections)
        || !empty($productSections)
        || !empty($offerSections)
        || !empty($brands);

    $homeSectionDebugPayload = [
        'service' => $currentService,
        'frontend_sections_count' => $frontendSectionsCollection->count(),
        'normalized_sections_count' => count($sectionsData),
        'ordered_render_sections_count' => count($orderedRenderableSections),
        'bucket_counts' => [
            'categories' => !empty($homeSectionCategories) ? 1 : 0,
            'banners' => count($bannerSections),
            'stores' => count($restaurantSections),
            'products' => count($productSections),
            'offers' => count($offerSections),
            'brands' => !empty($brands) ? 1 : 0,
        ],
        'rows' => $sectionDebugRows,
        'ordered' => collect($orderedRenderableSections)
            ->map(function ($section, $index) {
                $renderType = $section['render_type'] ?? null;
                $firstOrderedItem = collect($section['items'] ?? [])->first();
                $isBannerSection = in_array($renderType, ['hero', 'banners'], true);

                return [
                    'index' => $index,
                    'token' => $section['token'] ?? $section['home_section_id'] ?? null,
                    'type' => $section['type'] ?? $section['section_type'] ?? null,
                    'render_type' => $renderType,
                    'title' => $section['title'] ?? '',
                    'items' => is_countable($section['items'] ?? []) ? count($section['items']) : 0,
                    'client_feed' => (bool) ($section['client_feed'] ?? false),
                    'strict_items' => (bool) ($section['strict_items'] ?? false),
                    'first_banner_layout' => $isBannerSection ? data_get($firstOrderedItem, 'layout_mode') : null,
                    'first_banner_ratio' => $isBannerSection ? data_get($firstOrderedItem, 'image_ratio') : null,
                    'first_banner_media_type' => $isBannerSection ? data_get($firstOrderedItem, 'media_type') : null,
                    'first_banner_image' => $isBannerSection ? data_get($firstOrderedItem, 'image_url', data_get($firstOrderedItem, 'image')) : null,
                ];
            })
            ->values()
            ->all(),
    ];

    $storefrontBannerUrl = function ($banner) use ($storefrontQuery) {
        $redirect = data_get($banner, 'redirect');
        $redirectType = data_get($redirect, 'type') ?: data_get($banner, 'redirect_type');

        if (in_array($redirectType, ['restaurant', 'store'], true)) {
            $storeId = data_get($redirect, 'id') ?: data_get($banner, 'redirect_restaurant_id');
            if (filled($storeId)) {
                return route('storefront.stores.show', ['store' => $storeId] + $storefrontQuery);
            }
        }

        if ($redirectType === 'category') {
            $categoryId = data_get($redirect, 'id') ?: data_get($banner, 'redirect_category_id');
            if (filled($categoryId)) {
                return route('storefront.categories.show', ['category' => $categoryId] + $storefrontQuery);
            }
        }

        if (in_array($redirectType, ['menu_item', 'product'], true)) {
            $productId = data_get($redirect, 'id') ?: data_get($banner, 'redirect_menu_item_id');
            if (filled($productId)) {
                return route('storefront.products.show', ['product' => $productId] + $storefrontQuery);
            }
        }

        return data_get($banner, 'link')
            ?: data_get($banner, 'link_url')
            ?: data_get($banner, 'redirect_url')
            ?: '#';
    };

    $storefrontBannerMedia = function ($banner) {
        return data_get($banner, 'lottie_url')
            ?: data_get($banner, 'image')
            ?: data_get($banner, 'image_url');
    };

    $storefrontBannerIsLottie = function ($banner) use ($storefrontBannerMedia) {
        $media = (string) $storefrontBannerMedia($banner);
        return data_get($banner, 'media_type') === 'lottie'
            || \Illuminate\Support\Str::endsWith(\Illuminate\Support\Str::lower(parse_url($media, PHP_URL_PATH) ?: $media), '.json');
    };

    if ($debugHomeSections) {
        \Illuminate\Support\Facades\Log::info('Storefront home section debug', $homeSectionDebugPayload);
    }
@endphp

<style>
/* ==========================================
   FRESHMART HOME STYLES
   ========================================== */
:root {
    --fm-primary: #2daa37;
    --fm-primary-dark: #1e8a2a;
    --fm-primary-light: #e8f5e9;
    --fm-secondary: #ff6b00;
    --fm-accent: #ffc107;
    --fm-bg: #f5f7f8;
    --fm-card-bg: #ffffff;
    --fm-text: #1a1a2e;
    --fm-text-secondary: #6b7280;
    --fm-text-light: #9ca3af;
    --fm-border: #e5e7eb;
    --fm-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --fm-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --fm-radius: 10px;
    --fm-radius-sm: 6px;
    --fm-radius-full: 9999px;
    --fm-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --fm-safe-top: env(safe-area-inset-top, 0px);
    --fm-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.fm-home {
    background: var(--fm-bg);
    min-height: 100vh;
    padding-bottom: calc(70px + var(--fm-safe-bottom));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fm-home * {
    box-sizing: border-box;
}

.fm-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 12px;
}

/* ==========================================
   FLOATING SERVICE BUBBLE
   ========================================== */
.fm-service-float {
    position: fixed;
    bottom: calc(76px + var(--fm-safe-bottom));
    right: 16px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fm-service-float .fm-float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.92);
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.98) 0 18%, rgba(255,255,255,.42) 19% 32%, transparent 33%),
        linear-gradient(145deg, #ffffff, #eef3f8);
    box-shadow:
        0 18px 28px rgba(15, 23, 42, .22),
        0 6px 0 rgba(15, 23, 42, .12),
        inset 0 3px 3px rgba(255,255,255,.96),
        inset 0 -7px 12px rgba(15,23,42,.11);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform var(--fm-transition), box-shadow var(--fm-transition), filter var(--fm-transition);
    position: relative;
    color: var(--fm-text);
    overflow: visible;
}

.fm-service-float .fm-float-btn::after {
    content: "";
    position: absolute;
    inset: 8px 10px auto;
    height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    pointer-events: none;
}

.fm-service-float .fm-float-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 34px rgba(15, 23, 42, .24),
        0 7px 0 rgba(15, 23, 42, .13),
        inset 0 3px 3px rgba(255,255,255,.96),
        inset 0 -7px 12px rgba(15,23,42,.11);
}

.fm-service-float .fm-float-btn:active {
    transform: translateY(3px) scale(0.94);
    box-shadow:
        0 8px 14px rgba(15, 23, 42, .18),
        0 2px 0 rgba(15, 23, 42, .12),
        inset 0 4px 9px rgba(15,23,42,.16);
}

.fm-service-float .fm-float-btn .fm-float-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    background: linear-gradient(145deg, #ff8a35, var(--fm-secondary));
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--fm-radius-full);
    border: 2px solid white;
    box-shadow:
        0 6px 10px rgba(249, 115, 22, .3),
        inset 0 1px 1px rgba(255,255,255,.35);
}

.fm-service-float .fm-float-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--fm-text);
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,246,250,.92));
    backdrop-filter: blur(6px);
    padding: 3px 9px;
    border-radius: var(--fm-radius-full);
    border: 1px solid rgba(255,255,255,.86);
    box-shadow:
        0 8px 14px rgba(15, 23, 42, .14),
        inset 0 1px 1px rgba(255,255,255,.9);
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255,255,255,.86);
}

/* ==========================================
   SERVICE POPUP
   ========================================== */
.fm-service-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.fm-service-popup.is-visible {
    display: flex;
}

.fm-service-popup .fm-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fm-service-popup .fm-popup-panel {
    position: relative;
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius) var(--fm-radius) 0 0;
    padding: 20px 16px calc(20px + var(--fm-safe-bottom));
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    animation: fmSlideUp 0.35s ease;
}

@keyframes fmSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.fm-service-popup .fm-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fm-border);
}

.fm-service-popup .fm-popup-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0;
}

.fm-service-popup .fm-popup-header button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--fm-bg);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fm-text-secondary);
}

.fm-service-popup .fm-popup-options {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    margin: 0 -2px -10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.fm-service-popup .fm-popup-options::-webkit-scrollbar {
    display: none;
}

.fm-service-popup .fm-popup-option {
    flex: 0 0 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 128px;
    padding: 14px 10px;
    border-radius: var(--fm-radius);
    border: 2px solid var(--fm-border);
    text-decoration: none;
    color: var(--fm-text);
    transition: all var(--fm-transition);
    text-align: center;
    scroll-snap-align: start;
}

.fm-service-popup .fm-popup-option.is-active {
    border-color: var(--fm-primary);
    background: var(--fm-primary-light);
}

.fm-service-popup .fm-popup-option:active {
    transform: scale(0.95);
}

.fm-service-popup .fm-popup-option .fm-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.fm-service-popup .fm-popup-option strong {
    font-size: 13px;
    font-weight: 600;
}

.fm-service-popup .fm-popup-option small {
    font-size: 10px;
    color: var(--fm-text-secondary);
}

.fm-service-popup .fm-popup-option .fm-option-badge {
    font-size: 8px;
    font-weight: 700;
    color: white;
    padding: 1px 8px;
    border-radius: var(--fm-radius-full);
    margin-top: 2px;
}

/* ==========================================
   SECTION STYLES
   ========================================== */
.fm-section {
    margin: 16px 0 12px;
}

.fm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fm-section-head h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0;
}

.fm-section-head p {
    font-size: 12px;
    color: var(--fm-text-secondary);
    margin: 0;
}

.fm-section-subtitle {
    margin: -6px 0 12px;
    font-size: 12px;
    color: var(--fm-text-secondary);
}

.fm-section-debug {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #f59e0b;
    border-radius: var(--fm-radius);
    background: #fffbeb;
    color: #1f2937;
    font-size: 11px;
}

.fm-section-debug summary {
    cursor: pointer;
    font-weight: 800;
}

.fm-section-debug pre {
    max-height: 420px;
    margin: 10px 0 0;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.fm-section-head a,
.fm-section-head button {
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-primary);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* Category Grid */
.fm-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
}

.fm-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 5px 4px 7px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--fm-text);
    transition: transform var(--fm-transition), filter var(--fm-transition);
    text-align: center;
}

.fm-category-item:hover {
    transform: translateY(-2px);
}

.fm-category-item:active {
    transform: translateY(1px) scale(0.96);
}

.fm-category-item .fm-cat-icon {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,242,247,.94));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--fm-primary);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition), border-color var(--fm-transition);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.92);
    box-shadow:
        0 12px 18px rgba(15, 23, 42, .16),
        0 4px 0 rgba(15, 23, 42, .08),
        inset 0 2px 2px rgba(255, 255, 255, .95),
        inset 0 -5px 10px rgba(15, 23, 42, .08);
}

.fm-category-item .fm-cat-icon::after {
    content: "";
    position: absolute;
    inset: 5px 8px auto;
    height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.36);
    pointer-events: none;
}

.fm-category-item:hover .fm-cat-icon {
    transform: translateY(-2px);
    box-shadow:
        0 16px 24px rgba(15, 23, 42, .18),
        0 5px 0 rgba(15, 23, 42, .09),
        inset 0 2px 2px rgba(255, 255, 255, .95),
        inset 0 -5px 10px rgba(15, 23, 42, .08);
}

.fm-category-item:active .fm-cat-icon {
    transform: translateY(2px);
    box-shadow:
        0 6px 10px rgba(15, 23, 42, .14),
        0 1px 0 rgba(15, 23, 42, .08),
        inset 0 3px 7px rgba(15, 23, 42, .12);
}

.fm-category-item .fm-cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-category-item span {
    font-size: 11px;
    font-weight: 800;
    color: var(--fm-text);
    line-height: 1.2;
    max-width: 70px;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

/* Restaurant Grid */
.fm-restaurant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fm-restaurant-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    overflow: hidden;
    box-shadow: var(--fm-shadow);
    text-decoration: none;
    color: var(--fm-text);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition);
    border: 1px solid rgba(229, 231, 235, .72);
}

.fm-restaurant-card:active {
    transform: scale(0.97);
}

.fm-restaurant-card .fm-restaurant-image {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--fm-bg);
    overflow: hidden;
}

.fm-restaurant-card .fm-restaurant-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.58));
    pointer-events: none;
}

.fm-restaurant-card .fm-restaurant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-restaurant-card .fm-restaurant-info {
    padding: 10px 11px 12px;
}

.fm-restaurant-card .fm-restaurant-info .fm-restaurant-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-restaurant-card .fm-restaurant-info .fm-restaurant-cuisine {
    font-size: 12px;
    color: var(--fm-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-restaurant-card .fm-restaurant-info .fm-restaurant-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--fm-text-secondary);
}

.fm-restaurant-pill {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: var(--fm-radius-full);
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 8px;
    backdrop-filter: blur(8px);
}

.fm-restaurant-pill--rating {
    left: 7px;
    bottom: 7px;
    background: #0f9f4b;
}

.fm-restaurant-pill--eta {
    right: 7px;
    bottom: 7px;
}

.fm-restaurant-pill--closed {
    left: 7px;
    top: 7px;
    background: rgba(239, 68, 68, .92);
}

.fm-restaurant-logo {
    position: absolute;
    z-index: 2;
    right: 7px;
    top: 7px;
    width: 36px;
    height: 36px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.fm-restaurant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-restaurant-card .fm-restaurant-info .fm-restaurant-meta .fm-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f59e0b;
    font-weight: 600;
}

.fm-restaurant-card .fm-restaurant-info .fm-restaurant-meta .fm-rating svg {
    width: 12px;
    height: 12px;
    fill: #f59e0b;
}

/* Product Grid */
.fm-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fm-subcategory-stack {
    display: grid;
    gap: 16px;
}

.fm-subcategory-shelf {
    display: grid;
    gap: 10px;
}

.fm-subcategory-shelf__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.fm-subcategory-shelf__head h3 {
    margin: 0;
    color: var(--fm-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.fm-subcategory-shelf__head p {
    margin: 2px 0 0;
    color: var(--fm-text-secondary);
    font-size: 11px;
    line-height: 1.3;
}

.fm-subcategory-shelf__head a {
    flex: 0 0 auto;
    color: var(--fm-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.fm-product-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 10px;
    box-shadow: var(--fm-shadow);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.fm-product-card:active {
    transform: scale(0.97);
}

.fm-product-thumb {
    position: relative;
    border-radius: var(--fm-radius-sm);
    overflow: hidden;
    background: var(--fm-bg);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
}

.fm-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fm-product-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0 0 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    line-height: 1.3;
    min-height: 36px;
}

.fm-product-unit {
    font-size: 11px;
    color: var(--fm-text-light);
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fm-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: auto;
    padding-top: 3px;
}

.fm-product-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.fm-product-price strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--fm-text);
}

.fm-product-price small {
    font-size: 11px;
    color: var(--fm-text-light);
    text-decoration: line-through;
}

.fm-product-add {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fm-primary);
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--fm-transition), transform var(--fm-transition);
}

.fm-product-add:active {
    transform: scale(0.9);
}

.fm-product-add.is-out {
    background: var(--fm-text-light);
    cursor: not-allowed;
}

.fm-product-add .fm-add-label {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

.fm-product-add .fm-add-check {
    font-size: 12px;
    font-weight: 700;
    display: none;
}

.fm-product-add.is-added .fm-add-label {
    display: none;
}

.fm-product-add.is-added .fm-add-check {
    display: inline;
}

.fm-product-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--fm-primary-light);
    border-radius: var(--fm-radius-full);
    padding: 1px;
    height: 28px;
}

.fm-stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--fm-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-stepper-btn svg {
    width: 14px;
    height: 14px;
}

.fm-product-stepper strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-text);
    min-width: 16px;
    text-align: center;
}

/* Offer Grid */
.fm-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fm-offer-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 12px 14px;
    box-shadow: var(--fm-shadow);
    text-decoration: none;
    color: var(--fm-text);
    transition: transform var(--fm-transition);
    border-left: 3px solid var(--fm-primary);
}

.fm-offer-card:active {
    transform: scale(0.97);
}

.fm-offer-card strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-primary);
    display: block;
}

.fm-offer-card span {
    font-size: 11px;
    color: var(--fm-text-secondary);
}

.fm-offer-card small {
    font-size: 10px;
    color: var(--fm-text-light);
    display: block;
    margin-top: 2px;
}

/* Brand Grid */
.fm-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.fm-brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 5px 4px 7px;
    border-radius: 15px;
    text-decoration: none;
    color: var(--fm-text);
    transition: transform var(--fm-transition), filter var(--fm-transition);
    text-align: center;
}

.fm-brand-item:hover {
    transform: translateY(-2px);
}

.fm-brand-item:active {
    transform: translateY(1px) scale(0.96);
}

.fm-brand-item .fm-brand-icon {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        linear-gradient(145deg, #ffffff, #eef3f8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.92);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition), border-color var(--fm-transition);
    box-shadow:
        0 10px 16px rgba(15, 23, 42, .15),
        0 4px 0 rgba(15, 23, 42, .08),
        inset 0 2px 2px rgba(255,255,255,.95),
        inset 0 -5px 10px rgba(15,23,42,.08);
}

.fm-brand-item .fm-brand-icon::after {
    content: "";
    position: absolute;
    inset: 5px 7px auto;
    height: 17px;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    pointer-events: none;
}

.fm-brand-item:hover .fm-brand-icon {
    transform: translateY(-2px);
    box-shadow:
        0 14px 22px rgba(15, 23, 42, .17),
        0 5px 0 rgba(15, 23, 42, .09),
        inset 0 2px 2px rgba(255,255,255,.95),
        inset 0 -5px 10px rgba(15,23,42,.08);
}

.fm-brand-item:active .fm-brand-icon {
    transform: translateY(2px);
    box-shadow:
        0 5px 9px rgba(15, 23, 42, .13),
        0 1px 0 rgba(15, 23, 42, .08),
        inset 0 3px 7px rgba(15,23,42,.12);
}

.fm-brand-item .fm-brand-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.fm-brand-item span {
    font-size: 10px;
    font-weight: 800;
    color: var(--fm-text);
    line-height: 1.2;
    max-width: 56px;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.fm-home-modal[hidden] {
    display: none;
}

.fm-home-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.fm-home-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(8px);
}

.fm-home-modal__panel {
    position: relative;
    width: min(600px, 100%);
    max-height: 82vh;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: var(--fm-card-bg);
    box-shadow: 0 -18px 48px rgba(15, 23, 42, .24);
}

.fm-home-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--fm-border);
}

.fm-home-modal__head span {
    color: var(--fm-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fm-home-modal__head h2 {
    margin: 2px 0 0;
    color: var(--fm-text);
    font-size: 20px;
    font-weight: 900;
}

.fm-home-modal__head button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--fm-border);
    border-radius: 14px;
    background: #fff;
    color: var(--fm-text-secondary);
}

.fm-home-modal__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: calc(82vh - 76px);
    overflow-y: auto;
    padding: 16px 14px calc(18px + var(--fm-safe-bottom));
    background: var(--fm-bg);
}

/* Hero Banner */
.fm-hero {
    margin: 6px -12px 0;
    padding: 0 12px;
    position: relative;
}

.fm-hero-main {
    display: block;
    border-radius: var(--fm-radius);
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1a8a2a, #2daa37);
    min-height: 170px;
    text-decoration: none;
    color: white;
}

.fm-hero-main.is-text-image {
    display: flex;
    min-height: 170px;
    background: linear-gradient(135deg, #fff2e8, #ffdeca);
    color: var(--fm-text);
}

.fm-hero-main.is-full-image {
    background: #111;
}

.fm-hero-main img,
.fm-hero-main lottie-player {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

.fm-banner-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.fm-banner-media img,
.fm-banner-media lottie-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fm-hero-main.is-text-image .fm-banner-media {
    width: var(--banner-image-ratio, 46%);
    padding: 12px;
}

.fm-hero-main.is-text-image .fm-banner-media img,
.fm-hero-main.is-text-image .fm-banner-media lottie-player {
    object-fit: contain;
}

.fm-hero-copy {
    position: absolute;
    inset: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 70%);
}

.fm-hero-main.is-text-image .fm-hero-copy {
    position: relative;
    inset: auto;
    width: var(--banner-text-ratio, 54%);
    padding: 18px 16px;
    background: transparent;
    color: var(--fm-text);
}

.fm-hero-main.is-full-image .fm-hero-copy {
    display: none;
}

.fm-hero-copy h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.2;
    color: white;
}

.fm-hero-main.is-text-image .fm-hero-copy h1 {
    color: var(--fm-secondary);
}

.fm-hero-copy p {
    font-size: 13px;
    opacity: 0.9;
    margin: 0 0 8px;
    color: rgba(255,255,255,0.9);
}

.fm-hero-main.is-text-image .fm-hero-copy p {
    color: var(--fm-text);
    opacity: 1;
}

.fm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    padding: 3px 12px 3px 8px;
    border-radius: var(--fm-radius-full);
    font-size: 10px;
    font-weight: 600;
    width: fit-content;
    color: white;
}

.fm-hero-main.is-text-image .fm-hero-badge {
    background: linear-gradient(135deg, #ff6b00, #ff7a00);
    color: #fff;
}

/* Banner Carousel */
.fm-banner-carousel {
    overflow: hidden;
    border-radius: var(--fm-radius);
    margin: 6px 0 12px;
}

.fm-banner-slide {
    display: block;
    border-radius: var(--fm-radius);
    overflow: hidden;
    position: relative;
    min-height: 150px;
    text-decoration: none;
    color: white;
}

.fm-banner-slide.is-text-image {
    display: flex;
    min-height: 150px;
    background: linear-gradient(135deg, #fff2e8, #ffdeca);
    color: var(--fm-text);
}

.fm-banner-slide.is-full-image {
    background: #111;
}

.fm-banner-slide > img,
.fm-banner-slide > lottie-player {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.fm-banner-slide.is-text-image .fm-banner-media {
    width: var(--banner-image-ratio, 46%);
    padding: 10px;
}

.fm-banner-slide.is-text-image .fm-banner-media img,
.fm-banner-slide.is-text-image .fm-banner-media lottie-player {
    object-fit: contain;
}

.fm-banner-slide .fm-banner-copy {
    position: absolute;
    inset: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 70%);
}

.fm-banner-slide.is-text-image .fm-banner-copy {
    position: relative;
    inset: auto;
    width: var(--banner-text-ratio, 54%);
    padding: 14px 16px;
    background: transparent;
    color: var(--fm-text);
}

.fm-banner-slide.is-full-image .fm-banner-copy {
    display: none;
}

.fm-banner-slide .fm-banner-copy h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 2px;
    color: white;
}

.fm-banner-slide.is-text-image .fm-banner-copy h3 {
    color: var(--fm-secondary);
}

.fm-banner-slide .fm-banner-copy p {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
    color: rgba(255,255,255,0.9);
}

.fm-banner-slide.is-text-image .fm-banner-copy p {
    color: var(--fm-text);
    opacity: 1;
}

/* Toast */
#toast-container {
    position: fixed;
    top: calc(70px + var(--fm-safe-top));
    right: 12px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 300px;
    width: 100%;
    pointer-events: none;
}

#toast-container .toast {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 10px 14px;
    box-shadow: var(--fm-shadow-lg);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid var(--fm-primary);
}

#toast-container .toast.show {
    transform: translateX(0);
    opacity: 1;
}

#toast-container .toast.success { border-left-color: #22c55e; }
#toast-container .toast.error { border-left-color: #ef4444; }
#toast-container .toast.warning { border-left-color: #f59e0b; }

/* Responsive */
@media (max-width: 380px) {
    .fm-container { padding: 0 8px; }
    .fm-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .fm-product-card { padding: 8px; }
    .fm-product-name { font-size: 13px; min-height: 34px; }
    .fm-product-price strong { font-size: 14px; }
    .fm-product-add { width: 28px; height: 28px; font-size: 15px; }
    .fm-product-stepper { height: 24px; }
    .fm-stepper-btn { width: 20px; height: 20px; }
    .fm-stepper-btn svg { width: 12px; height: 12px; }
    .fm-product-stepper strong { font-size: 11px; min-width: 14px; }
    .fm-category-grid { gap: 8px 6px; }
    .fm-category-item .fm-cat-icon { width: 60px; height: 60px; }
    .fm-category-item span { font-size: 10px; max-width: 62px; }
    .fm-restaurant-grid { grid-template-columns: 1fr; }
    .fm-offer-grid { grid-template-columns: 1fr; }
    .fm-brand-grid { grid-template-columns: repeat(3, 1fr); }
    .fm-service-float .fm-float-btn { width: 48px; height: 48px; font-size: 20px; }
    .fm-service-float { bottom: calc(60px + var(--fm-safe-bottom)); right: 12px; }
}

@media (min-width: 481px) {
    .fm-container { max-width: 600px; padding: 0 16px; }
    .fm-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .fm-product-card { padding: 10px; }
    .fm-restaurant-grid { grid-template-columns: 1fr 1fr; }
    .fm-brand-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 900px) {
    .fm-home .fm-product-grid > .fm-product-card:nth-of-type(n + {{ $pwaProductRenderLimit + 1 }}) {
        display: none !important;
    }
}
</style>

<div class="fm-home" role="main">
    <div class="fm-container">
        @if($debugHomeSections)
            <details class="fm-section-debug" open>
                <summary>Home section debug: {{ $homeSectionDebugPayload['ordered_render_sections_count'] }} rendered / {{ $homeSectionDebugPayload['frontend_sections_count'] }} received</summary>
                <pre>{{ json_encode($homeSectionDebugPayload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
            </details>
        @endif

        {{-- ORDERED HOME SECTIONS: follows Admin > Home Sections reorder exactly --}}
        @foreach($orderedRenderableSections as $orderedSection)
            @php
                $renderType = $orderedSection['render_type'] ?? '';
                $sectionTitle = $orderedSection['title'] ?? '';
                $sectionSubtitle = $orderedSection['subtitle'] ?? '';
                $items = $orderedSection['items'] ?? [];
            @endphp

            @if($renderType === 'hero')
                @php
                    $heroItem = $items[0] ?? [];
                    $orderedHeroImage = $storefrontBannerMedia($heroItem);
                    $orderedHeroTitle = ($heroItem['title'] ?? $sectionTitle) ?: 'Fresh Groceries Delivered Fast';
                    $orderedHeroSubtitle = ($heroItem['description'] ?? $heroItem['subtitle'] ?? $sectionSubtitle) ?: 'Get your daily essentials at your doorstep';
                    $orderedHeroLink = $storefrontBannerUrl($heroItem);
                    $orderedHeroLayout = ($heroItem['layout_mode'] ?? 'text_image') === 'full_image' ? 'full_image' : 'text_image';
                    $orderedHeroImageRatio = max(35, min(70, (int) ($heroItem['image_ratio'] ?? 46)));
                    $orderedHeroTextRatio = 100 - $orderedHeroImageRatio;
                    $orderedHeroIsLottie = $storefrontBannerIsLottie($heroItem);
                @endphp
                @if($orderedHeroImage)
                    <section class="fm-hero" aria-label="Featured offers">
                        <a href="{{ $orderedHeroLink }}" class="fm-hero-main is-{{ str_replace('_', '-', $orderedHeroLayout) }}" style="--banner-image-ratio: {{ $orderedHeroImageRatio }}%; --banner-text-ratio: {{ $orderedHeroTextRatio }}%;">
                            @if($orderedHeroLayout === 'text_image')
                                <div class="fm-hero-copy">
                                    <h1>{{ $orderedHeroTitle }}</h1>
                                    <p>{{ $orderedHeroSubtitle }}</p>
                                    <span class="fm-hero-badge">Order now</span>
                                </div>
                                <div class="fm-banner-media">
                                    @if($orderedHeroIsLottie)
                                        <lottie-player src="{{ \App\Support\StorefrontPresenter::mediaUrl($orderedHeroImage) }}" background="transparent" speed="1" loop autoplay></lottie-player>
                                    @else
                                        <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($orderedHeroImage) }}" alt="{{ $orderedHeroTitle }}" fetchpriority="high" width="480" height="140">
                                    @endif
                                </div>
                            @else
                                @if($orderedHeroIsLottie)
                                    <lottie-player src="{{ \App\Support\StorefrontPresenter::mediaUrl($orderedHeroImage) }}" background="transparent" speed="1" loop autoplay></lottie-player>
                                @else
                                    <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($orderedHeroImage) }}" alt="{{ $orderedHeroTitle }}" fetchpriority="high" width="480" height="140">
                                @endif
                            @endif
                            @if($orderedHeroLayout === 'full_image')
                            <div class="fm-hero-copy">
                                <h1>{{ $orderedHeroTitle }}</h1>
                                <p>{{ $orderedHeroSubtitle }}</p>
                                <span class="fm-hero-badge">Fast delivery</span>
                            </div>
                            @endif
                        </a>
                    </section>
                @endif

            @elseif($renderType === 'categories')
                @if(!empty($items))
                    <section class="fm-section" aria-label="{{ $sectionTitle ?: 'Shop by category' }}">
                        <div class="fm-section-head">
                            <h2>{{ $sectionTitle ?: trans_key('storefront.fallbacks.shopByCategory') }}</h2>
                            <button type="button" data-category-modal-open>See All</button>
                        </div>
                        @if($sectionSubtitle)
                            <p class="fm-section-subtitle">{{ $sectionSubtitle }}</p>
                        @endif
                        <div class="fm-category-grid">
                            @foreach(array_slice($items, 0, 8) as $category)
                                @php
                                    $catId = $category['id'] ?? null;
                                    $catName = $category['name'] ?? $category['title'] ?? trans_key('storefront.fallbacks.category');
                                    $catImage = $category['image'] ?? $category['image_url'] ?? $category['icon'] ?? null;
                                    $catSlug = $category['slug'] ?? null;
                                @endphp
                                <a href="{{ route('storefront.categories.show', ['category' => $catSlug ?: $catId] + $storefrontQuery) }}" class="fm-category-item">
                                    <span class="fm-cat-icon">
                                        @if($catImage)
                                            <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($catImage) }}" alt="{{ $catName }}" loading="lazy" width="66" height="66">
                                        @else
                                            {{ Str::upper(Str::substr($catName, 0, 1)) }}
                                        @endif
                                    </span>
                                    <span>{{ $catName }}</span>
                                </a>
                            @endforeach
                        </div>
                    </section>
                @endif

            @elseif($renderType === 'banners')
                @if(!empty($items))
                    <section class="fm-banner-carousel">
                        @foreach(array_slice($items, 0, 3) as $banner)
                            @php
                                $bannerImage = $storefrontBannerMedia($banner);
                                $bannerTitle = $banner['title'] ?? '';
                                $bannerSubtitle = $banner['description'] ?? $banner['subtitle'] ?? '';
                                $bannerLink = $storefrontBannerUrl($banner);
                                $bannerLayout = ($banner['layout_mode'] ?? 'text_image') === 'full_image' ? 'full_image' : 'text_image';
                                $bannerImageRatio = max(35, min(70, (int) ($banner['image_ratio'] ?? 46)));
                                $bannerTextRatio = 100 - $bannerImageRatio;
                                $bannerIsLottie = $storefrontBannerIsLottie($banner);
                            @endphp
                            <a href="{{ $bannerLink }}" class="fm-banner-slide is-{{ str_replace('_', '-', $bannerLayout) }}" style="--banner-image-ratio: {{ $bannerImageRatio }}%; --banner-text-ratio: {{ $bannerTextRatio }}%;">
                                @if($bannerLayout === 'text_image')
                                    <div class="fm-banner-copy">
                                        @if($bannerTitle)
                                            <h3>{{ $bannerTitle }}</h3>
                                        @endif
                                        @if($bannerSubtitle)
                                            <p>{{ $bannerSubtitle }}</p>
                                        @endif
                                    </div>
                                    <div class="fm-banner-media">
                                        @if($bannerImage)
                                            @if($bannerIsLottie)
                                                <lottie-player src="{{ \App\Support\StorefrontPresenter::mediaUrl($bannerImage) }}" background="transparent" speed="1" loop autoplay></lottie-player>
                                            @else
                                                <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($bannerImage) }}" alt="{{ $bannerTitle }}" loading="lazy" width="480" height="120">
                                            @endif
                                        @endif
                                    </div>
                                @else
                                    @if($bannerImage)
                                        @if($bannerIsLottie)
                                            <lottie-player src="{{ \App\Support\StorefrontPresenter::mediaUrl($bannerImage) }}" background="transparent" speed="1" loop autoplay></lottie-player>
                                        @else
                                            <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($bannerImage) }}" alt="{{ $bannerTitle }}" loading="lazy" width="480" height="120">
                                        @endif
                                    @endif
                                @endif
                                @if($bannerLayout === 'full_image')
                                    <div class="fm-banner-copy">
                                        @if($bannerTitle)
                                            <h3>{{ $bannerTitle }}</h3>
                                        @endif
                                        @if($bannerSubtitle)
                                            <p>{{ $bannerSubtitle }}</p>
                                        @endif
                                    </div>
                                @endif
                            </a>
                        @endforeach
                    </section>
                @endif

            @elseif($renderType === 'restaurants')
                @php $sectionItems = $currentService === 'food' ? $items : array_slice($items, 0, 4); @endphp
                @if(!empty($sectionItems))
                    <section class="fm-section">
                        <div class="fm-section-head">
                            <div>
                                <h2>{{ $sectionTitle ?: trans_key('storefront.fallbacks.storesNearYou') }}</h2>
                                @if($sectionSubtitle)
                                    <p>{{ $sectionSubtitle }}</p>
                                @endif
                            </div>
                            <a href="{{ route('storefront.stores.index', $storefrontQuery) }}">View all -></a>
                        </div>
                        <div class="fm-restaurant-grid">
                            @foreach($sectionItems as $item)
                                @php
                                    $restaurantId = $item['id'] ?? null;
                                    $restaurantName = $item['name'] ?? trans_key('storefront.fallbacks.restaurant');
                                    $restaurantImage = $item['banner_image'] ?? $item['image'] ?? $item['logo_image'] ?? $item['logo'] ?? null;
                                    $restaurantLogo = $item['logo_image'] ?? $item['logo'] ?? null;
                                    $restaurantCuisine = $item['cuisine_text'] ?? $item['cuisine'] ?? trans_key('storefront.fallbacks.variousCuisines');
                                    $restaurantRating = $item['rating'] ?? 0;
                                    $restaurantReviews = $item['total_ratings'] ?? $item['reviews_count'] ?? 0;
                                    $restaurantEta = $item['eta_minutes'] ?? $item['delivery_time'] ?? 30;
                                    $restaurantEtaLabel = is_numeric($restaurantEta) ? ((int) $restaurantEta).' min' : (string) $restaurantEta;
                                    $restaurantIsVeg = $item['is_pure_veg'] ?? false;
                                    $restaurantIsOpen = $item['is_open_now'] ?? $item['is_open'] ?? true;
                                    $restaurantSlug = $item['slug'] ?? null;
                                @endphp
                                <a href="{{ route('storefront.stores.show', ['store' => $restaurantSlug ?: $restaurantId] + $storefrontQuery) }}" class="fm-restaurant-card">
                                    <div class="fm-restaurant-image">
                                        @if($restaurantImage)
                                            <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($restaurantImage) }}" alt="{{ $restaurantName }}" loading="lazy" width="280" height="160">
                                        @else
                                            <div style="width:100%;height:100%;background:var(--fm-bg);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--fm-text-light);">
                                                {{ Str::upper(Str::substr($restaurantName, 0, 1)) }}
                                            </div>
                                        @endif
                                        @if($restaurantIsVeg)
                                            <span class="fm-veg-badge" style="position:absolute;top:6px;left:6px;background:rgba(0,0,0,0.6);color:white;font-size:8px;font-weight:700;padding:1px 6px;border-radius:var(--fm-radius-sm);">Pure Veg</span>
                                        @endif
                                        @if($restaurantLogo)
                                            <span class="fm-restaurant-logo">
                                                <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($restaurantLogo) }}" alt="">
                                            </span>
                                        @endif
                                        @if(!$restaurantIsOpen)
                                            <span class="fm-restaurant-pill fm-restaurant-pill--closed">Closed</span>
                                        @endif
                                        @if($restaurantRating > 0)
                                            <span class="fm-restaurant-pill fm-restaurant-pill--rating">* {{ number_format($restaurantRating, 1) }}</span>
                                        @endif
                                        <span class="fm-restaurant-pill fm-restaurant-pill--eta">{{ $restaurantEtaLabel }}</span>
                                    </div>
                                    <div class="fm-restaurant-info">
                                        <span class="fm-restaurant-name">{{ $restaurantName }}</span>
                                        <span class="fm-restaurant-cuisine">{{ $restaurantCuisine }}</span>
                                        <div class="fm-restaurant-meta">
                                            @if($restaurantRating > 0)
                                                <span class="fm-rating">
                                                    <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                    {{ number_format($restaurantRating, 1) }}
                                                </span>
                                                <span class="fm-dot">.</span>
                                            @endif
                                            <span>{{ $restaurantReviews }} reviews</span>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </section>
                @endif

            @elseif($renderType === 'subcategory_products')
                @if(!empty($items))
                    <section class="fm-section" aria-label="{{ $sectionTitle ?: 'Shop by subcategory' }}">
                        <div class="fm-section-head">
                            <div>
                                <h2>{{ $sectionTitle ?: 'Shop By Subcategory' }}</h2>
                                @if($sectionSubtitle)
                                    <p>{{ $sectionSubtitle }}</p>
                                @endif
                            </div>
                            <a href="{{ route('storefront.search', $storefrontQuery) }}">View all -></a>
                        </div>
                        <div class="fm-subcategory-stack">
                            @foreach(array_slice($items, 0, 8) as $subcategoryShelf)
                                @php
                                    $shelfTitle = $subcategoryShelf['title'] ?? $subcategoryShelf['name'] ?? 'Products';
                                    $shelfSubtitle = $subcategoryShelf['subtitle'] ?? $subcategoryShelf['parent_name'] ?? '';
                                    $shelfProducts = $subcategoryShelf['products'] ?? $subcategoryShelf['items'] ?? [];
                                @endphp
                                @if(!empty($shelfProducts))
                                    <div class="fm-subcategory-shelf">
                                        <div class="fm-subcategory-shelf__head">
                                            <div>
                                                <h3>{{ $shelfTitle }}</h3>
                                                @if($shelfSubtitle)
                                                    <p>{{ $shelfSubtitle }}</p>
                                                @endif
                                            </div>
                                            <a href="{{ route('storefront.search', array_merge($storefrontQuery, ['q' => $shelfTitle])) }}">View all</a>
                                        </div>
                                        <div class="fm-product-grid">
                                            @foreach(array_slice($shelfProducts, 0, $desktopProductRenderLimit) as $product)
                                                @php
                                                    $sectionProduct = is_array($product) ? $product : [
                                                        'id' => data_get($product, 'id'),
                                                        'menu_item_id' => data_get($product, 'menu_item_id'),
                                                        'name' => data_get($product, 'name'),
                                                        'image' => data_get($product, 'image'),
                                                        'image_url' => data_get($product, 'image_url'),
                                                        'price' => data_get($product, 'price'),
                                                        'discounted_price' => data_get($product, 'discounted_price'),
                                                        'compare_price' => data_get($product, 'compare_price'),
                                                        'restaurant_name' => data_get($product, 'restaurant_name'),
                                                        'sku' => data_get($product, 'sku'),
                                                        'rating' => data_get($product, 'rating'),
                                                        'reviews_count' => data_get($product, 'reviews_count'),
                                                        'total_orders' => data_get($product, 'total_orders'),
                                                        'is_active' => data_get($product, 'is_active'),
                                                        'is_available' => data_get($product, 'is_available'),
                                                    ];

                                                    $sectionProductId = data_get($sectionProduct, 'id') ?: data_get($sectionProduct, 'menu_item_id');
                                                    $sectionProductPrice = data_get($sectionProduct, 'base_price', data_get($sectionProduct, 'discounted_price', data_get($sectionProduct, 'price', 0)));
                                                    $sectionProductCompare = data_get($sectionProduct, 'compare_price');

                                                    if ($sectionProductCompare === null && data_get($sectionProduct, 'discounted_price') !== null && data_get($sectionProduct, 'price') !== null && (float) data_get($sectionProduct, 'discounted_price') < (float) data_get($sectionProduct, 'price')) {
                                                        $sectionProductCompare = data_get($sectionProduct, 'price');
                                                    }

                                                    $sectionProduct['id'] = $sectionProductId;
                                                    $sectionProduct['menu_item_id'] = data_get($sectionProduct, 'menu_item_id') ?: $sectionProductId;
                                                    $sectionProduct['base_price'] = $sectionProductPrice;
                                                    $sectionProduct['compare_price'] = $sectionProductCompare;
                                                    $sectionProduct['reviews_avg_rating'] = data_get($sectionProduct, 'reviews_avg_rating', data_get($sectionProduct, 'rating', 0));
                                                    $sectionProduct['reviews_count'] = data_get($sectionProduct, 'reviews_count', data_get($sectionProduct, 'total_orders', 0));
                                                    $sectionProduct['is_active'] = data_get($sectionProduct, 'is_active', data_get($sectionProduct, 'is_available', true));
                                                    $sectionProduct['is_available'] = data_get($sectionProduct, 'is_available', true);
                                                    $sectionProduct['images'] = data_get($sectionProduct, 'images', array_values(array_filter([
                                                        data_get($sectionProduct, 'image'),
                                                        data_get($sectionProduct, 'image_url'),
                                                    ])));
                                                @endphp
                                                @include('storefront.partials.product-card', [
                                                    'product' => $sectionProduct,
                                                    'storefrontQuery' => $storefrontQuery,
                                                    'cartLookup' => $cartLookup ?? [],
                                                ])
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>
                @endif

            @elseif($renderType === 'products')
                @php $sectionItems = array_slice($items, 0, $desktopProductRenderLimit); @endphp
                @if(!empty($sectionItems))
                    <section class="fm-section">
                        <div class="fm-section-head">
                            <div>
                                <h2>{{ $sectionTitle ?: trans_key('storefront.fallbacks.popularDishes') }}</h2>
                                @if($sectionSubtitle)
                                    <p>{{ $sectionSubtitle }}</p>
                                @endif
                            </div>
                            <a href="{{ route('storefront.search', $storefrontQuery) }}">View all -></a>
                        </div>
                        <div class="fm-product-grid">
                            @foreach($sectionItems as $product)
                                @php
                                    $sectionProduct = is_array($product) ? $product : [
                                        'id' => data_get($product, 'id'),
                                        'menu_item_id' => data_get($product, 'menu_item_id'),
                                        'name' => data_get($product, 'name'),
                                        'image' => data_get($product, 'image'),
                                        'image_url' => data_get($product, 'image_url'),
                                        'price' => data_get($product, 'price'),
                                        'discounted_price' => data_get($product, 'discounted_price'),
                                        'compare_price' => data_get($product, 'compare_price'),
                                        'restaurant_name' => data_get($product, 'restaurant_name'),
                                        'sku' => data_get($product, 'sku'),
                                        'rating' => data_get($product, 'rating'),
                                        'reviews_count' => data_get($product, 'reviews_count'),
                                        'total_orders' => data_get($product, 'total_orders'),
                                        'is_active' => data_get($product, 'is_active'),
                                        'is_available' => data_get($product, 'is_available'),
                                    ];

                                    $sectionProductId = data_get($sectionProduct, 'id') ?: data_get($sectionProduct, 'menu_item_id');
                                    $sectionProductPrice = data_get($sectionProduct, 'base_price', data_get($sectionProduct, 'discounted_price', data_get($sectionProduct, 'price', 0)));
                                    $sectionProductCompare = data_get($sectionProduct, 'compare_price');

                                    if ($sectionProductCompare === null && data_get($sectionProduct, 'discounted_price') !== null && data_get($sectionProduct, 'price') !== null && (float) data_get($sectionProduct, 'discounted_price') < (float) data_get($sectionProduct, 'price')) {
                                        $sectionProductCompare = data_get($sectionProduct, 'price');
                                    }

                                    $sectionProduct['id'] = $sectionProductId;
                                    $sectionProduct['menu_item_id'] = data_get($sectionProduct, 'menu_item_id') ?: $sectionProductId;
                                    $sectionProduct['base_price'] = $sectionProductPrice;
                                    $sectionProduct['compare_price'] = $sectionProductCompare;
                                    $sectionProduct['reviews_avg_rating'] = data_get($sectionProduct, 'reviews_avg_rating', data_get($sectionProduct, 'rating', 0));
                                    $sectionProduct['reviews_count'] = data_get($sectionProduct, 'reviews_count', data_get($sectionProduct, 'total_orders', 0));
                                    $sectionProduct['is_active'] = data_get($sectionProduct, 'is_active', data_get($sectionProduct, 'is_available', true));
                                    $sectionProduct['is_available'] = data_get($sectionProduct, 'is_available', true);
                                    $sectionProduct['images'] = data_get($sectionProduct, 'images', array_values(array_filter([
                                        data_get($sectionProduct, 'image'),
                                        data_get($sectionProduct, 'image_url'),
                                    ])));
                                @endphp
                                @include('storefront.partials.product-card', [
                                    'product' => $sectionProduct,
                                    'storefrontQuery' => $storefrontQuery,
                                    'cartLookup' => $cartLookup ?? [],
                                ])
                            @endforeach
                        </div>
                    </section>
                @endif

            @elseif($renderType === 'offers')
                @php $sectionItems = array_slice($items, 0, 4); @endphp
                @if(!empty($sectionItems))
                    <section class="fm-section">
                        <div class="fm-section-head">
                            <div>
                                <h2>{{ $sectionTitle ?: trans_key('storefront.fallbacks.offersForYou') }}</h2>
                                @if($sectionSubtitle)
                                    <p>{{ $sectionSubtitle }}</p>
                                @endif
                            </div>
                            <a href="{{ route('storefront.offers', $storefrontQuery) }}">View all -></a>
                        </div>
                        <div class="fm-offer-grid">
                            @foreach($sectionItems as $offer)
                                @php
                                    $offerCode = $offer['code'] ?? '';
                                    $offerTitle = $offer['title'] ?? trans_key('storefront.fallbacks.specialOffer');
                                    $offerDiscount = $offer['discount_value'] ?? 0;
                                    $offerType = $offer['discount_type'] ?? 'percentage';
                                    $discountLabel = $offerType === 'percentage' ? $offerDiscount.'% OFF' : 'Rs '.$offerDiscount.' OFF';
                                    $minOrder = $offer['min_order_value'] ?? $offer['min_order_amount'] ?? null;
                                @endphp
                                <div class="fm-offer-card">
                                    <strong>{{ $discountLabel }}</strong>
                                    <span>{{ $offerTitle }}</span>
                                    @if($minOrder)
                                        <small>Min order Rs {{ $minOrder }}</small>
                                    @endif
                                    @if($offerCode)
                                        <small style="font-weight:600;color:var(--fm-primary);margin-top:4px;">Code: {{ $offerCode }}</small>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif

            @elseif($renderType === 'brands')
                @if(!empty($items))
                    <section class="fm-section">
                        <div class="fm-section-head">
                            <div>
                                <h2>{{ $sectionTitle ?: trans_key('storefront.fallbacks.shopByBrand') }}</h2>
                                @if($sectionSubtitle)
                                    <p>{{ $sectionSubtitle }}</p>
                                @endif
                            </div>
                            <button type="button" data-brand-modal-open>View all -></button>
                        </div>
                        <div class="fm-brand-grid">
                            @foreach(array_slice($items, 0, 8) as $brand)
                                @php
                                    $brandId = $brand['brand_id'] ?? $brand['id'] ?? null;
                                    $brandName = $brand['name'] ?? trans_key('storefront.fallbacks.brand');
                                    $brandImage = $brand['image'] ?? $brand['logo'] ?? $brand['image_url'] ?? null;
                                    $brandRestaurantId = $brand['restaurant_id'] ?? null;
                                @endphp
                                <a href="{{ $brandRestaurantId ? route('storefront.stores.show', ['store' => $brandRestaurantId] + $storefrontQuery) : route('storefront.search', array_merge($storefrontQuery, ['brand' => $brandName])) }}" class="fm-brand-item">
                                    <span class="fm-brand-icon">
                                        @if($brandImage)
                                            <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($brandImage) }}" alt="{{ $brandName }}" loading="lazy" width="40" height="40">
                                        @else
                                            {{ Str::upper(Str::substr($brandName, 0, 1)) }}
                                        @endif
                                    </span>
                                    <span>{{ $brandName }}</span>
                                </a>
                            @endforeach
                        </div>
                    </section>
                @endif
            @endif
        @endforeach

        @if(false)
        {{-- HERO BANNER --}}
        @if($heroImage)
            <section class="fm-hero" aria-label="Featured offers">
                <a href="{{ $heroLink }}" class="fm-hero-main">
                    <img src="{{ $heroImage }}" alt="{{ $heroTitle }}" fetchpriority="high" width="480" height="140">
                    <div class="fm-hero-copy">
                        <h1>{{ $heroTitle ?: 'Fresh Groceries Delivered Fast' }}</h1>
                        <p>{{ $heroSubtitle ?: 'Get your daily essentials at your doorstep' }}</p>
                        <span class="fm-hero-badge">⚡ 10-15 mins</span>
                    </div>
                </a>
            </section>
        @endif

        {{-- CATEGORIES --}}
        @if(!empty($homeSectionCategories))
            <section class="fm-section" aria-label="Shop by category">
                <div class="fm-section-head">
                    <h2>{{ $categorySection['title'] ?? trans_key('storefront.fallbacks.shopByCategory') }}</h2>
                    <button type="button" data-category-modal-open>See All</button>
                </div>
                <div class="fm-category-grid">
                    @foreach(array_slice($homeSectionCategories, 0, 8) as $category)
                        @php
                            $catId = $category['id'] ?? null;
                            $catName = $category['name'] ?? $category['title'] ?? trans_key('storefront.fallbacks.category');
                            $catImage = $category['image'] ?? $category['image_url'] ?? $category['icon'] ?? null;
                            $catSlug = $category['slug'] ?? null;
                        @endphp
                        <a href="{{ route('storefront.categories.show', ['category' => $catSlug ?: $catId] + $storefrontQuery) }}" class="fm-category-item">
                            <span class="fm-cat-icon">
                                @if($catImage)
                                    <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($catImage) }}" alt="{{ $catName }}" loading="lazy" width="66" height="66">
                                @else
                                    {{ Str::upper(Str::substr($catName, 0, 1)) }}
                                @endif
                            </span>
                            <span>{{ $catName }}</span>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- BANNER CAROUSEL --}}
        @foreach($bannerSections as $bannerSection)
            @if(!empty($bannerSection['items']))
                <section class="fm-banner-carousel">
                    @foreach(array_slice($bannerSection['items'], 0, 3) as $banner)
                        @php
                            $bannerImage = $banner['image'] ?? $banner['image_url'] ?? null;
                            $bannerTitle = $banner['title'] ?? '';
                            $bannerSubtitle = $banner['description'] ?? $banner['subtitle'] ?? '';
                            $bannerLink = $banner['link'] ?? $banner['link_url'] ?? '#';
                        @endphp
                        <a href="{{ $bannerLink }}" class="fm-banner-slide">
                            @if($bannerImage)
                                <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($bannerImage) }}" alt="{{ $bannerTitle }}" loading="lazy" width="480" height="120">
                            @endif
                            <div class="fm-banner-copy">
                                @if($bannerTitle)
                                    <h3>{{ $bannerTitle }}</h3>
                                @endif
                                @if($bannerSubtitle)
                                    <p>{{ $bannerSubtitle }}</p>
                                @endif
                            </div>
                        </a>
                    @endforeach
                </section>
            @endif
        @endforeach

        {{-- RESTAURANT SECTIONS --}}
        @foreach($restaurantSections as $section)
            @php
                $sectionTitle = $section['title'] ?? trans_key('storefront.fallbacks.storesNearYou');
                $sectionSubtitle = $section['subtitle'] ?? '';
                $items = array_slice($section['items'], 0, 4);
            @endphp
            @if(!empty($items))
                <section class="fm-section">
                    <div class="fm-section-head">
                        <div>
                            <h2>{{ $sectionTitle }}</h2>
                            @if($sectionSubtitle)
                                <p>{{ $sectionSubtitle }}</p>
                            @endif
                        </div>
                        <a href="{{ route('storefront.stores.index', $storefrontQuery) }}">View all →</a>
                    </div>
                    <div class="fm-restaurant-grid">
                        @foreach($items as $item)
                            @php
                                $restaurantId = $item['id'] ?? null;
                                $restaurantName = $item['name'] ?? trans_key('storefront.fallbacks.restaurant');
                                $restaurantImage = $item['banner_image'] ?? $item['image'] ?? $item['logo_image'] ?? $item['logo'] ?? null;
                                $restaurantLogo = $item['logo_image'] ?? $item['logo'] ?? null;
                                $restaurantCuisine = $item['cuisine_text'] ?? $item['cuisine'] ?? trans_key('storefront.fallbacks.variousCuisines');
                                $restaurantRating = $item['rating'] ?? 0;
                                $restaurantReviews = $item['total_ratings'] ?? $item['reviews_count'] ?? 0;
                                $restaurantEta = $item['eta_minutes'] ?? $item['delivery_time'] ?? 30;
                                $restaurantEtaLabel = is_numeric($restaurantEta) ? ((int) $restaurantEta).' min' : (string) $restaurantEta;
                                $restaurantIsVeg = $item['is_pure_veg'] ?? false;
                                $restaurantIsOpen = $item['is_open_now'] ?? $item['is_open'] ?? true;
                                $restaurantSlug = $item['slug'] ?? null;
                            @endphp
                            <a href="{{ route('storefront.stores.show', ['store' => $restaurantSlug ?: $restaurantId] + $storefrontQuery) }}" class="fm-restaurant-card">
                                <div class="fm-restaurant-image">
                                    @if($restaurantImage)
                                        <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($restaurantImage) }}" alt="{{ $restaurantName }}" loading="lazy" width="280" height="160">
                                    @else
                                        <div style="width:100%;height:100%;background:var(--fm-bg);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--fm-text-light);">
                                            {{ Str::upper(Str::substr($restaurantName, 0, 1)) }}
                                        </div>
                                    @endif
                                    @if($restaurantIsVeg)
                                        <span class="fm-veg-badge" style="position:absolute;top:6px;left:6px;background:rgba(0,0,0,0.6);color:white;font-size:8px;font-weight:700;padding:1px 6px;border-radius:var(--fm-radius-sm);">🌿 Pure Veg</span>
                                    @endif
                                    @if($restaurantLogo)
                                        <span class="fm-restaurant-logo">
                                            <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($restaurantLogo) }}" alt="">
                                        </span>
                                    @endif
                                    @if(!$restaurantIsOpen)
                                        <span class="fm-restaurant-pill fm-restaurant-pill--closed">Closed</span>
                                    @endif
                                    @if($restaurantRating > 0)
                                        <span class="fm-restaurant-pill fm-restaurant-pill--rating">★ {{ number_format($restaurantRating, 1) }}</span>
                                    @endif
                                    <span class="fm-restaurant-pill fm-restaurant-pill--eta">{{ $restaurantEtaLabel }}</span>
                                </div>
                                <div class="fm-restaurant-info">
                                    <span class="fm-restaurant-name">{{ $restaurantName }}</span>
                                    <span class="fm-restaurant-cuisine">{{ $restaurantCuisine }}</span>
                                    <div class="fm-restaurant-meta">
                                        @if($restaurantRating > 0)
                                            <span class="fm-rating">
                                                <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                                {{ number_format($restaurantRating, 1) }}
                                            </span>
                                            <span class="fm-dot">•</span>
                                        @endif
                                        <span>{{ $restaurantReviews }} reviews</span>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </section>
            @endif
        @endforeach

        {{-- PRODUCT SECTIONS --}}
        @foreach($productSections as $section)
            @php
                $sectionTitle = $section['title'] ?? trans_key('storefront.fallbacks.popularDishes');
                $sectionSubtitle = $section['subtitle'] ?? '';
                $items = array_slice($section['items'], 0, $desktopProductRenderLimit);
            @endphp
            @if(!empty($items))
                <section class="fm-section">
                    <div class="fm-section-head">
                        <div>
                            <h2>{{ $sectionTitle }}</h2>
                            @if($sectionSubtitle)
                                <p>{{ $sectionSubtitle }}</p>
                            @endif
                        </div>
                        <a href="{{ route('storefront.search', $storefrontQuery) }}">View all →</a>
                    </div>
                    <div class="fm-product-grid">
                        @foreach($items as $product)
                            @php
                                $sectionProduct = is_array($product) ? $product : [
                                    'id' => data_get($product, 'id'),
                                    'menu_item_id' => data_get($product, 'menu_item_id'),
                                    'name' => data_get($product, 'name'),
                                    'image' => data_get($product, 'image'),
                                    'image_url' => data_get($product, 'image_url'),
                                    'price' => data_get($product, 'price'),
                                    'discounted_price' => data_get($product, 'discounted_price'),
                                    'compare_price' => data_get($product, 'compare_price'),
                                    'restaurant_name' => data_get($product, 'restaurant_name'),
                                    'sku' => data_get($product, 'sku'),
                                    'rating' => data_get($product, 'rating'),
                                    'reviews_count' => data_get($product, 'reviews_count'),
                                    'total_orders' => data_get($product, 'total_orders'),
                                    'is_active' => data_get($product, 'is_active'),
                                    'is_available' => data_get($product, 'is_available'),
                                ];

                                $sectionProductId = data_get($sectionProduct, 'id') ?: data_get($sectionProduct, 'menu_item_id');
                                $sectionProductPrice = data_get($sectionProduct, 'base_price', data_get($sectionProduct, 'discounted_price', data_get($sectionProduct, 'price', 0)));
                                $sectionProductCompare = data_get($sectionProduct, 'compare_price');

                                if ($sectionProductCompare === null && data_get($sectionProduct, 'discounted_price') !== null && data_get($sectionProduct, 'price') !== null && (float) data_get($sectionProduct, 'discounted_price') < (float) data_get($sectionProduct, 'price')) {
                                    $sectionProductCompare = data_get($sectionProduct, 'price');
                                }

                                $sectionProduct['id'] = $sectionProductId;
                                $sectionProduct['menu_item_id'] = data_get($sectionProduct, 'menu_item_id') ?: $sectionProductId;
                                $sectionProduct['base_price'] = $sectionProductPrice;
                                $sectionProduct['compare_price'] = $sectionProductCompare;
                                $sectionProduct['reviews_avg_rating'] = data_get($sectionProduct, 'reviews_avg_rating', data_get($sectionProduct, 'rating', 0));
                                $sectionProduct['reviews_count'] = data_get($sectionProduct, 'reviews_count', data_get($sectionProduct, 'total_orders', 0));
                                $sectionProduct['is_active'] = data_get($sectionProduct, 'is_active', data_get($sectionProduct, 'is_available', true));
                                $sectionProduct['is_available'] = data_get($sectionProduct, 'is_available', true);
                                $sectionProduct['images'] = data_get($sectionProduct, 'images', array_values(array_filter([
                                    data_get($sectionProduct, 'image'),
                                    data_get($sectionProduct, 'image_url'),
                                ])));
                            @endphp
                            @include('storefront.partials.product-card', [
                                'product' => $sectionProduct,
                                'storefrontQuery' => $storefrontQuery,
                                'cartLookup' => $cartLookup ?? [],
                            ])
                            {{--
                                        <span class="fm-add-check">✓</span>
                                    </button>
                                </div>
                            </article>
                            --}}
                        @endforeach
                    </div>
                </section>
            @endif
        @endforeach

        {{-- OFFER SECTIONS --}}
        @foreach($offerSections as $section)
            @php
                $sectionTitle = $section['title'] ?? trans_key('storefront.fallbacks.offersForYou');
                $sectionSubtitle = $section['subtitle'] ?? '';
                $items = array_slice($section['items'], 0, 4);
            @endphp
            @if(!empty($items))
                <section class="fm-section">
                    <div class="fm-section-head">
                        <div>
                            <h2>{{ $sectionTitle }}</h2>
                            @if($sectionSubtitle)
                                <p>{{ $sectionSubtitle }}</p>
                            @endif
                        </div>
                        <a href="{{ route('storefront.offers', $storefrontQuery) }}">View all →</a>
                    </div>
                    <div class="fm-offer-grid">
                        @foreach($items as $offer)
                            @php
                                $offerCode = $offer['code'] ?? '';
                                $offerTitle = $offer['title'] ?? trans_key('storefront.fallbacks.specialOffer');
                                $offerDiscount = $offer['discount_value'] ?? 0;
                                $offerType = $offer['discount_type'] ?? 'percentage';
                                $discountLabel = $offerType === 'percentage' ? $offerDiscount.'% OFF' : '₹'.$offerDiscount.' OFF';
                                $minOrder = $offer['min_order_value'] ?? $offer['min_order_amount'] ?? null;
                            @endphp
                            <div class="fm-offer-card">
                                <strong>{{ $discountLabel }}</strong>
                                <span>{{ $offerTitle }}</span>
                                @if($minOrder)
                                    <small>Min order ₹{{ $minOrder }}</small>
                                @endif
                                @if($offerCode)
                                    <small style="font-weight:600;color:var(--fm-primary);margin-top:4px;">Code: {{ $offerCode }}</small>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif
        @endforeach

        {{-- BRAND SECTION --}}
        @if(!empty($brands))
            <section class="fm-section">
                <div class="fm-section-head">
                    <div>
                        <h2>{{ $brandSection['title'] ?? trans_key('storefront.fallbacks.shopByBrand') }}</h2>
                        @if(isset($brandSection['subtitle']))
                            <p>{{ $brandSection['subtitle'] }}</p>
                        @endif
                    </div>
                    <button type="button" data-brand-modal-open>View all →</button>
                </div>
                <div class="fm-brand-grid">
                    @foreach(array_slice($brands, 0, 8) as $brand)
                        @php
                            $brandId = $brand['brand_id'] ?? $brand['id'] ?? null;
                            $brandName = $brand['name'] ?? trans_key('storefront.fallbacks.brand');
                            $brandImage = $brand['image'] ?? $brand['logo'] ?? $brand['image_url'] ?? null;
                            $brandRestaurantId = $brand['restaurant_id'] ?? null;
                        @endphp
                        <a href="{{ $brandRestaurantId ? route('storefront.stores.show', ['store' => $brandRestaurantId] + $storefrontQuery) : route('storefront.search', array_merge($storefrontQuery, ['brand' => $brandName])) }}" class="fm-brand-item">
                            <span class="fm-brand-icon">
                                @if($brandImage)
                                    <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($brandImage) }}" alt="{{ $brandName }}" loading="lazy" width="40" height="40">
                                @else
                                    {{ Str::upper(Str::substr($brandName, 0, 1)) }}
                                @endif
                            </span>
                            <span>{{ $brandName }}</span>
                        </a>
                    @endforeach
                </div>
            </section>
            <div id="brandModal" class="fm-home-modal" hidden>
                <button type="button" class="fm-home-modal__backdrop" data-brand-modal-close aria-label="Close brands"></button>
                <section class="fm-home-modal__panel" role="dialog" aria-modal="true" aria-labelledby="brandModalTitle">
                    <div class="fm-home-modal__head">
                        <div>
                            <span>Browse</span>
                            <h2 id="brandModalTitle">{{ $brandSection['title'] ?? trans_key('storefront.fallbacks.shopByBrand') }}</h2>
                        </div>
                        <button type="button" data-brand-modal-close aria-label="Close brands">x</button>
                    </div>
                    <div class="fm-home-modal__grid">
                        @foreach($brands as $brand)
                            @php
                                $brandId = $brand['brand_id'] ?? $brand['id'] ?? null;
                                $brandName = $brand['name'] ?? trans_key('storefront.fallbacks.brand');
                                $brandImage = $brand['image'] ?? $brand['logo'] ?? $brand['image_url'] ?? null;
                                $brandRestaurantId = $brand['restaurant_id'] ?? null;
                                $brandUrl = $brandRestaurantId
                                    ? route('storefront.stores.show', ['store' => $brandRestaurantId] + $storefrontQuery)
                                    : route('storefront.search', array_merge($storefrontQuery, ['brand' => $brandId ?: $brandName]));
                            @endphp
                            <a href="{{ $brandUrl }}" class="fm-brand-item">
                                <span class="fm-brand-icon">
                                    @if($brandImage)
                                        <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($brandImage) }}" alt="{{ $brandName }}" loading="lazy" width="40" height="40">
                                    @else
                                        {{ Str::upper(Str::substr($brandName, 0, 1)) }}
                                    @endif
                                </span>
                                <span>{{ $brandName }}</span>
                            </a>
                        @endforeach
                    </div>
                </section>
            </div>
        @endif
        @endif

        @if(!empty($brands))
            <div id="brandModal" class="fm-home-modal" hidden>
                <button type="button" class="fm-home-modal__backdrop" data-brand-modal-close aria-label="Close brands"></button>
                <section class="fm-home-modal__panel" role="dialog" aria-modal="true" aria-labelledby="brandModalTitle">
                    <div class="fm-home-modal__head">
                        <div>
                            <span>Browse</span>
                            <h2 id="brandModalTitle">{{ $brandSection['title'] ?? trans_key('storefront.fallbacks.shopByBrand') }}</h2>
                        </div>
                        <button type="button" data-brand-modal-close aria-label="Close brands">x</button>
                    </div>
                    <div class="fm-home-modal__grid">
                        @foreach($brands as $brand)
                            @php
                                $brandId = $brand['brand_id'] ?? $brand['id'] ?? null;
                                $brandName = $brand['name'] ?? trans_key('storefront.fallbacks.brand');
                                $brandImage = $brand['image'] ?? $brand['logo'] ?? $brand['image_url'] ?? null;
                                $brandRestaurantId = $brand['restaurant_id'] ?? null;
                                $brandUrl = $brandRestaurantId
                                    ? route('storefront.stores.show', ['store' => $brandRestaurantId] + $storefrontQuery)
                                    : route('storefront.search', array_merge($storefrontQuery, ['brand' => $brandId ?: $brandName]));
                            @endphp
                            <a href="{{ $brandUrl }}" class="fm-brand-item">
                                <span class="fm-brand-icon">
                                    @if($brandImage)
                                        <img src="{{ \App\Support\StorefrontPresenter::mediaUrl($brandImage) }}" alt="{{ $brandName }}" loading="lazy" width="40" height="40">
                                    @else
                                        {{ Str::upper(Str::substr($brandName, 0, 1)) }}
                                    @endif
                                </span>
                                <span>{{ $brandName }}</span>
                            </a>
                        @endforeach
                    </div>
                </section>
            </div>
        @endif

        {{-- FALLBACK: No sections configured --}}
        @if(!$hasContent)
            <div style="text-align:center;padding:40px 20px;color:var(--fm-text-secondary);">
                <div style="font-size:48px;margin-bottom:12px;">🛒</div>
                <h3 style="font-size:16px;font-weight:700;color:var(--fm-text);margin:0 0 4px;">Welcome to {{ $homeBrandName }}</h3>
                <p style="font-size:13px;">No sections configured yet. Add sections from the admin panel.</p>
            </div>
        @endif
    </div>

    {{-- FLOATING SERVICE BUBBLE --}}
    <div class="fm-service-float" id="serviceFloat">
        <button type="button" class="fm-float-btn" id="serviceFloatTrigger" aria-label="Switch service">
            <span>{{ $currentServiceData['icon'] }}</span>
            @if($currentService === 'parcel')
                <span class="fm-float-badge">NEW</span>
            @endif
        </button>
        <span class="fm-float-label">{{ $currentServiceData['label'] }}</span>
    </div>

    {{-- SERVICE POPUP --}}
    <div class="fm-service-popup" id="servicePopup">
        <button type="button" class="fm-popup-backdrop" id="servicePopupBackdrop" aria-label="Close"></button>
        <div class="fm-popup-panel" role="dialog" aria-modal="true" aria-labelledby="servicePopupTitle">
            <div class="fm-popup-header">
                <h3 id="servicePopupTitle">Choose a service</h3>
                <button type="button" id="servicePopupClose" aria-label="Close">✕</button>
            </div>
            <div class="fm-popup-options">
                @foreach($serviceOptions as $key => $option)
                    @php
                        $isActive = $currentService === $key;
                        $route = $option['route'];
                        $badge = $key === 'parcel' ? 'NEW' : ($key === 'grocery' ? 'POPULAR' : '');
                    @endphp
                    <a href="{{ $route }}" class="fm-popup-option {{ $isActive ? 'is-active' : '' }}">
                        <span class="fm-option-icon" style="background:{{ $option['bg'] }};color:{{ $option['color'] }};">
                            {{ $option['icon'] }}
                        </span>
                        <strong>{{ $option['label'] }}</strong>
                        <small>{{ ucfirst($key) }}</small>
                        @if($badge)
                            <span class="fm-option-badge" style="background:{{ $key === 'parcel' ? '#F97316' : '#2daa37' }};">
                                {{ $badge }}
                            </span>
                        @endif
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- TOAST CONTAINER --}}
<div id="toast-container"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    @if($debugHomeSections)
    const homeSectionDebug = @json($homeSectionDebugPayload);
    console.groupCollapsed('[StorefrontHome] section debug');
    console.log(homeSectionDebug);
    console.table(homeSectionDebug.ordered || []);
    console.table(homeSectionDebug.rows || []);
    console.groupEnd();
    @endif

    // ==========================================
    // TOAST
    // ==========================================
    function showToast(message, type = 'info', duration = 3000) {
        const container = document.getElementById('toast-container');
        if (!container) return;
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', warning: 'fa-triangle-exclamation', info: 'fa-info-circle' };
        toast.innerHTML = `
            <i class="fas ${icons[type] || icons.info}"></i>
            <span>${message}</span>
            <button onclick="this.closest('.toast').remove()"><i class="fas fa-times"></i></button>
        `;
        container.appendChild(toast);
        requestAnimationFrame(() => toast.classList.add('show'));
        setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 400); }, duration);
    }

    window.showToast = showToast;

    // ==========================================
    // UPDATE CART BADGE
    // ==========================================
    function updateCartBadge(count) {
        const total = Number(count || 0);
        document.querySelectorAll('[data-storefront-cart-badge]').forEach((badge) => {
            badge.textContent = total;
            badge.hidden = total <= 0;
        });
        document.querySelectorAll('[data-storefront-cart-dot]').forEach((dot) => {
            dot.hidden = total <= 0;
        });
    }

    // ==========================================
    // ADD TO CART
    // ==========================================
    document.addEventListener('click', async function(e) {
        const addBtn = e.target.closest('[data-add-to-cart]');
        if (!addBtn) return;
        if (addBtn.dataset.cartPending === 'true') return;
        e.preventDefault();
        e.stopPropagation();
        addBtn.dataset.cartPending = 'true';
        addBtn.disabled = true;

        const productId = addBtn.dataset.productId;
        const variantId = addBtn.dataset.variantId || '';
        const card = addBtn.closest('[data-product-card]');
        const addLabel = addBtn.querySelector('.fm-add-label');
        const checkLabel = addBtn.querySelector('.fm-add-check');

        try {
            if (addLabel) addLabel.style.display = 'none';
            if (checkLabel) checkLabel.style.display = 'inline';
            addBtn.classList.add('is-added');

            const response = await fetch('{{ route('storefront.cart.items.store') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ product_id: productId, product_variant_id: variantId, quantity: 1 })
            });

            const data = await response.json();

            if (response.status === 401 && data.login_url) {
                window.location.href = data.login_url;
                return;
            }

            if (response.ok && data.success) {
                updateCartBadge(data.cart_count ?? data.data?.cart_count ?? 0);

                const actions = card?.querySelector('[data-product-actions]');
                if (actions) {
                    const cartItemId = data.cart_item_id || data.data?.cart_item_id || '';
                    actions.innerHTML = `
                        <div class="fm-product-stepper" data-cart-stepper>
                            <button type="button" class="fm-stepper-btn" data-cart-decrement data-cart-item-id="${cartItemId}" data-product-id="${productId}" data-variant-id="${variantId}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            </button>
                            <strong data-cart-quantity>1</strong>
                            <button type="button" class="fm-stepper-btn" data-cart-increment data-cart-item-id="${cartItemId}" data-product-id="${productId}" data-variant-id="${variantId}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            </button>
                        </div>
                    `;
                    bindStepperEvents(actions);
                }

                showToast('Added to cart!', 'success');
                setTimeout(() => {
                    if (addLabel) addLabel.style.display = 'inline';
                    if (checkLabel) checkLabel.style.display = 'none';
                    addBtn.classList.remove('is-added');
                    delete addBtn.dataset.cartPending;
                    addBtn.disabled = false;
                }, 1500);
            } else {
                showToast(data.message || 'Failed to add', 'error');
                if (addLabel) addLabel.style.display = 'inline';
                if (checkLabel) checkLabel.style.display = 'none';
                addBtn.classList.remove('is-added');
                delete addBtn.dataset.cartPending;
                addBtn.disabled = false;
            }
        } catch (error) {
            showToast('Network error', 'error');
            if (addLabel) addLabel.style.display = 'inline';
            if (checkLabel) checkLabel.style.display = 'none';
            addBtn.classList.remove('is-added');
            delete addBtn.dataset.cartPending;
            addBtn.disabled = false;
        }
    });

    // ==========================================
    // STEPPER EVENTS
    // ==========================================
    function bindStepperEvents(container) {
        const decrement = container.querySelector('[data-cart-decrement]');
        const increment = container.querySelector('[data-cart-increment]');
        if (decrement) decrement.addEventListener('click', function(e) { e.preventDefault(); e.stopImmediatePropagation(); handleQuantityChange(this, -1); });
        if (increment) increment.addEventListener('click', function(e) { e.preventDefault(); e.stopImmediatePropagation(); handleQuantityChange(this, 1); });
    }

    async function handleQuantityChange(button, delta) {
        const stepper = button.closest('[data-cart-stepper]');
        const quantityDisplay = stepper?.querySelector('[data-cart-quantity]');
        const cartItemId = button.dataset.cartItemId;
        const productId = button.dataset.productId;
        const variantId = button.dataset.variantId;
        const card = button.closest('[data-product-card]');

        let current = parseInt(quantityDisplay?.textContent || 0);
        let newQty = Math.max(0, current + delta);

        if (newQty === 0) {
            try {
                const response = await fetch(`/cart/items/${cartItemId}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                });
                if (response.ok) {
                    const data = await response.json();
                    updateCartBadge(data.cart_count ?? data.data?.cart_count ?? 0);
                    const actions = card?.querySelector('[data-product-actions]');
                    if (actions) {
                        actions.innerHTML = `
                            <button type="button" class="fm-product-add" data-add-to-cart data-product-id="${productId}" data-variant-id="${variantId}">
                                <span class="fm-add-label">+</span>
                                <span class="fm-add-check">✓</span>
                            </button>
                        `;
                    }
                    showToast('Removed from cart', 'success');
                }
            } catch (error) { showToast('Failed to update', 'error'); }
            return;
        }

        if (quantityDisplay) quantityDisplay.textContent = newQty;

        try {
            const response = await fetch(`/cart/items/${cartItemId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ quantity: newQty })
            });
            if (response.ok) {
                const data = await response.json();
                updateCartBadge(data.cart_count ?? data.data?.cart_count ?? 0);
            }
        } catch (error) { showToast('Failed to update', 'error'); }
    }

    // ==========================================
    // FLOATING SERVICE BUBBLE
    // ==========================================
    const popup = document.getElementById('servicePopup');
    const floatTrigger = document.getElementById('serviceFloatTrigger');
    const backdrop = document.getElementById('servicePopupBackdrop');
    const closeBtn = document.getElementById('servicePopupClose');

    function openPopup() {
        if (!popup) return;
        popup.classList.add('is-visible');
        document.body.classList.add('sf-modal-open', 'sf-service-popup-open');
        document.body.style.overflow = 'hidden';
    }

    function closePopup() {
        if (!popup) return;
        popup.classList.remove('is-visible');
        document.body.classList.remove('sf-service-popup-open');
        if (!brandModal || brandModal.hasAttribute('hidden')) {
            document.body.classList.remove('sf-modal-open');
        }
        document.body.style.overflow = '';
    }

    if (floatTrigger) {
        floatTrigger.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            openPopup();
        });
    }

    if (backdrop) backdrop.addEventListener('click', closePopup);
    if (closeBtn) closeBtn.addEventListener('click', closePopup);

    const brandModal = document.getElementById('brandModal');
    const openBrandButtons = document.querySelectorAll('[data-brand-modal-open]');
    const closeBrandButtons = document.querySelectorAll('[data-brand-modal-close]');

    function openBrandModal() {
        if (!brandModal) return;
        brandModal.removeAttribute('hidden');
        document.body.classList.add('sf-modal-open', 'sf-brand-modal-open');
        document.body.style.overflow = 'hidden';
    }

    function closeBrandModal() {
        if (!brandModal) return;
        brandModal.setAttribute('hidden', '');
        document.body.classList.remove('sf-brand-modal-open');
        if (!popup || !popup.classList.contains('is-visible')) {
            document.body.classList.remove('sf-modal-open');
        }
        document.body.style.overflow = '';
    }

    openBrandButtons.forEach((button) => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            openBrandModal();
        });
    });
    closeBrandButtons.forEach((button) => button.addEventListener('click', closeBrandModal));

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closePopup();
            closeBrandModal();
        }
    });

    // ==========================================
    // BIND EXISTING STEPPERS
    // ==========================================
    document.querySelectorAll('[data-cart-stepper]').forEach((stepper) => {
        bindStepperEvents(stepper.parentElement || stepper);
    });

});
</script>
@endsection