<x-layouts.store>
    @php
        $settings = app(\App\Support\AppSettings::class);
        $currency = $settings->get('currency', 'USD');
        $categoryIcons = [
            'accessories' => 'badge',
            'apparel' => 'shirt',
            'bags' => 'briefcase-medical',
            'scrubs' => 'stethoscope',
        ];
        $imageUrl = fn (?string $path, string $fallback) => filled($path)
            ? (Str::startsWith($path, ['http://', 'https://']) ? $path : asset($path))
            : $fallback;
        $heroImage = $imageUrl($settings->get('shop_hero_background_path'), 'https://images.unsplash.com/photo-1587854692152-cbe660dbde88?auto=format&fit=crop&w=2200&q=85');
        $introImage = $imageUrl($settings->get('shop_intro_image_path'), 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1300&q=85');
        $testimonialImage = $imageUrl($settings->get('shop_testimonial_background_path'), 'https://images.unsplash.com/photo-1576602976047-174e57a47881?auto=format&fit=crop&w=2200&q=85');
        $banners = \App\Models\ShopBanner::query()->active()->orderBy('sort_order')->orderBy('id')->get();
        $signalProducts = [
            [
                'name' => 'Signal Cap',
                'price' => 10,
                'category' => 'Accessories',
                'copy' => 'Adjustable unisex medical cap in Signal blue with breathable fabric and a clean branded finish.',
                'icon' => 'badge',
                'image' => 'https://images.unsplash.com/photo-1521369909029-2afed882baee?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal Nursing Bag',
                'price' => 45,
                'category' => 'Bags',
                'copy' => 'Multi-pocket utility bag built to organize daily medical essentials for patient care and emergencies.',
                'icon' => 'briefcase-medical',
                'image' => 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal PCA/HHA Bag',
                'price' => 10,
                'category' => 'Bags',
                'copy' => 'Compact care bag for PCA and HHA professionals who need essentials ready during client visits.',
                'icon' => 'shopping-bag',
                'image' => 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal Polo shirt',
                'price' => 25,
                'category' => 'Apparel',
                'copy' => 'Professional unisex polo with breathable fabric, classic collar, and embroidered Signal logo.',
                'icon' => 'shirt',
                'image' => 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal Scrub Bottom',
                'price' => 30,
                'category' => 'Scrubs',
                'copy' => 'Comfort-fit navy scrub pants with elastic waist, drawstring, durable fabric, and practical pockets.',
                'icon' => 'waves',
                'image' => 'https://images.unsplash.com/photo-1551601651-2a8555f1a136?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal Scrub Top',
                'price' => 15,
                'category' => 'Scrubs',
                'copy' => 'Essential unisex V-neck scrub top with durable fabric, short sleeves, and spacious pockets.',
                'icon' => 'stethoscope',
                'image' => 'https://images.unsplash.com/photo-1582750433449-648ed127bb54?auto=format&fit=crop&w=900&q=80',
            ],
            [
                'name' => 'Signal T-shirt',
                'price' => 30,
                'category' => 'Apparel',
                'copy' => 'Classic Signal team T-shirt for everyday comfort and easy-care wear in healthcare environments.',
                'icon' => 'shirt',
                'image' => 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=900&q=80',
            ],
        ];
        $starterProducts = $featured->take(3);
        $managedProducts = $featured->merge($latest)->unique('id')->values();
        $productImage = function ($product, string $fallback): string {
            if (! $product) {
                return $fallback;
            }

            if ($product->image_path) {
                return Str::startsWith($product->image_path, ['http://', 'https://'])
                    ? $product->image_path
                    : asset($product->image_path);
            }

            return $product->images->first()?->image_path
                ? asset($product->images->first()->image_path)
                : $fallback;
        };
        $poloProduct = $managedProducts->first(fn ($product) => Str::contains(Str::lower($product->brand_name), 'polo'));
        $nursingProduct = $managedProducts->first(fn ($product) => Str::contains(Str::lower($product->brand_name), 'nursing'));
        $dailyProduct = $managedProducts->first(fn ($product) => ! in_array($product->id, array_filter([$poloProduct?->id, $nursingProduct?->id]), true));
        $promoImage = $settings->get('shop_promo_image_path')
            ? $imageUrl($settings->get('shop_promo_image_path'), 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?auto=format&fit=crop&w=1400&q=85')
            : $productImage($poloProduct, 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?auto=format&fit=crop&w=1400&q=85');
    @endphp

    <section class="signal-hero">
        <img class="signal-hero__bg" src="{{ $heroImage }}" alt="Medical supplies in a pharmacy">
        <div class="signal-hero__overlay"></div>
        <div class="signal-container signal-hero__inner">
            <div class="signal-hero__content">
                <span class="signal-pill signal-pill--white"><i data-lucide="badge-percent"></i> Discount up to 35% for first purchase only this month</span>
                <p class="signal-eyebrow">Welcome to Signal Health Group</p>
                <h1>{{ $settings->get('shop_hero_title') }}</h1>
                <p class="signal-lead">{{ $settings->get('shop_hero_subtitle') }}</p>
                <div class="signal-actions">
                    <a class="signal-button" href="{{ route('store.products') }}">Discover more <i data-lucide="arrow-right"></i></a>
                    <a class="signal-button signal-button--soft" href="{{ route('store.products', ['q' => 'Signal Nursing Bag']) }}">Shop nurse bags</a>
                </div>
            </div>
            <div class="signal-hero__panel">
                <p class="signal-eyebrow">User's choice</p>
                <h2>Signal starter picks</h2>
                <div class="signal-mini-products">
                    @forelse ($starterProducts as $product)
                        @php
                            $miniImage = $product->image_path
                                ? (Str::startsWith($product->image_path, ['http://', 'https://']) ? $product->image_path : asset($product->image_path))
                                : ($product->images->first()?->image_path ? asset($product->images->first()->image_path) : 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?auto=format&fit=crop&w=500&q=80');
                        @endphp
                        <a href="{{ route('store.product', $product) }}">
                            <img src="{{ $miniImage }}" alt="{{ $product->brand_name }}">
                            <span>
                                <strong>{{ $product->brand_name }}</strong>
                                <small>{{ $currency }} {{ number_format((float) $product->price, 2) }}</small>
                            </span>
                            <i data-lucide="arrow-right"></i>
                        </a>
                    @empty
                        @foreach (array_slice($signalProducts, 0, 3) as $product)
                            <a href="{{ route('store.products', ['q' => $product['name']]) }}">
                                <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}">
                                <span>
                                    <strong>{{ $product['name'] }}</strong>
                                    <small>{{ $currency }} {{ number_format($product['price'], 2) }}</small>
                                </span>
                                <i data-lucide="arrow-right"></i>
                            </a>
                        @endforeach
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    @if ($banners->isNotEmpty())
        <section class="signal-managed-banners">
            <div class="signal-container">
                <div class="signal-section-head">
                    <div>
                        <p class="signal-eyebrow">Managed from admin</p>
                        <h2>Current homepage offers</h2>
                    </div>
                    <a href="{{ route('store.products') }}">Shop offers <i data-lucide="arrow-right"></i></a>
                </div>
                <div class="signal-banner-row">
                    @foreach ($banners as $banner)
                        <a class="signal-admin-banner" href="{{ $banner->link_url ?: route('store.products') }}">
                            <img src="{{ asset($banner->image_path) }}" alt="{{ $banner->title ?? 'Store banner' }}">
                            <span>
                                @if ($banner->title)
                                    <strong>{{ $banner->title }}</strong>
                                @endif
                                @if ($banner->subtitle)
                                    <small>{{ $banner->subtitle }}</small>
                                @endif
                                @if ($banner->button_text)
                                    <em>{{ $banner->button_text }} <i data-lucide="arrow-right"></i></em>
                                @endif
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="signal-service-strip">
        <div class="signal-container">
            @foreach ([['ship', 'International Shipment', 'Your orders are shipped seamlessly between countries.'], ['rotate-ccw', '30 Days Warranty', 'You have the right to return your orders within 30 days.'], ['shield-check', 'Secure Payment', 'Your payments are secure with our private security network.']] as [$icon, $title, $sub])
                <div>
                    <span><i data-lucide="{{ $icon }}"></i></span>
                    <strong>{{ $title }}</strong>
                    <p>{{ $sub }}</p>
                </div>
            @endforeach
        </div>
    </section>

    <section class="signal-section">
        <div class="signal-container signal-split">
            <div>
                <p class="signal-eyebrow">Why we do it</p>
                <h2>{{ $settings->get('shop_intro_title') }}</h2>
                <p>{{ $settings->get('shop_intro_body') }}</p>
                <div class="signal-stat-row">
                    @foreach ([['0+', 'Happy Customer'], ['0+', 'Product Sold'], ['0+', 'Years Experience']] as [$value, $label])
                        <div>
                            <strong>{{ $value }}</strong>
                            <span>{{ $label }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="signal-photo-card">
                <img src="{{ $introImage }}" alt="Healthcare professional helping a patient">
                <div>
                    <i data-lucide="heart-pulse"></i>
                    <span>High-quality supplies for everyday care</span>
                </div>
            </div>
        </div>
    </section>

    <section class="signal-section signal-section--soft">
        <div class="signal-container">
            <div class="signal-section-head">
                <div>
                    <p class="signal-eyebrow">User's choice</p>
                    <h2>Featured Signal products</h2>
                </div>
                <a href="{{ route('store.products') }}">Shop all <i data-lucide="arrow-right"></i></a>
            </div>

            @if ($featured->isNotEmpty())
                <div class="signal-feature-grid">
                    @foreach ($featured as $product)
                        @include('store.partials.product-card', ['product' => $product])
                    @endforeach
                </div>
            @else
                <div class="signal-product-grid">
                    @foreach (array_slice($signalProducts, 0, 4) as $product)
                        <a class="signal-product-card" href="{{ route('store.products', ['q' => $product['name']]) }}">
                            <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}">
                            <span>{{ $product['category'] }}</span>
                            <h3>{{ $product['name'] }}</h3>
                            <p>{{ $product['copy'] }}</p>
                            <strong>{{ $currency }} {{ number_format($product['price'], 2) }}</strong>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <section class="signal-section signal-section--compact">
        <div class="signal-container signal-promo-grid">
            <a class="signal-promo signal-promo--wide" href="{{ $poloProduct ? route('store.product', $poloProduct) : route('store.products', ['q' => 'Signal Polo shirt']) }}">
                <img src="{{ $promoImage }}" alt="Polo shirts">
                <div>
                    <span>Promo</span>
                    <h2>{{ $poloProduct ? $poloProduct->brand_name : 'Save up to $15 on selected Polo T-Shirts' }}</h2>
                    <p>{{ $poloProduct?->description ?: 'Collared, short-sleeved shirts; versatile, casual, and timeless fashion staple.' }}</p>
                    <em>Shop now</em>
                </div>
            </a>
            <a class="signal-promo" href="{{ $nursingProduct ? route('store.product', $nursingProduct) : route('store.products', ['q' => 'Signal Nursing Bag']) }}">
                <img src="{{ $productImage($nursingProduct, 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=900&q=85') }}" alt="Medical bag and supplies">
                <div>
                    <span>Nurse Bag</span>
                    <h3>{{ $nursingProduct ? $nursingProduct->brand_name : 'Carries essential medical supplies' }}</h3>
                    <em>Shop now</em>
                </div>
            </a>
            <a class="signal-promo" href="{{ $dailyProduct ? route('store.product', $dailyProduct) : route('store.products') }}">
                <img src="{{ $productImage($dailyProduct, 'https://images.unsplash.com/photo-1505751172876-fa1923c5c528?auto=format&fit=crop&w=900&q=85') }}" alt="Daily health routine supplies">
                <div>
                    <span>{{ $dailyProduct?->medicine?->category ?: 'Daily Routine' }}</span>
                    <h3>{{ $dailyProduct ? $dailyProduct->brand_name : 'Good health starts with everyday care' }}</h3>
                    <em>Shop now</em>
                </div>
            </a>
        </div>
    </section>

    @if ($categories->isNotEmpty())
        <section class="signal-section signal-section--compact">
            <div class="signal-container">
                <div class="signal-section-head">
                    <div>
                        <p class="signal-eyebrow">Browse by category</p>
                        <h2>Shop by Signal category</h2>
                    </div>
                    <a href="{{ route('store.products') }}">View all <i data-lucide="arrow-right"></i></a>
                </div>
                <div class="signal-category-grid">
                    @foreach ($categories as $category)
                        <a href="{{ route('store.products', ['category' => $category->category]) }}">
                            <span><i data-lucide="{{ $categoryIcons[strtolower($category->category)] ?? 'package' }}"></i></span>
                            <strong>{{ $category->category }}</strong>
                            <small>{{ $category->medicines_count }} {{ Str::plural('item', $category->medicines_count) }}</small>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="signal-section">
        <div class="signal-container">
            <div class="signal-section-head">
                <div>
                    <p class="signal-eyebrow">Latest Products</p>
                    <h2>All Signal store items</h2>
                </div>
            </div>
            @if ($latest->isNotEmpty())
                <div class="signal-feature-grid">
                    @foreach ($latest as $product)
                        @include('store.partials.product-card', ['product' => $product])
                    @endforeach
                </div>
            @else
                <div class="signal-product-grid signal-product-grid--all">
                    @foreach ($signalProducts as $product)
                        <a class="signal-product-card" href="{{ route('store.products', ['q' => $product['name']]) }}">
                            <img src="{{ $product['image'] }}" alt="{{ $product['name'] }}">
                            <span>{{ $product['category'] }}</span>
                            <h3>{{ $product['name'] }}</h3>
                            <p>{{ $product['copy'] }}</p>
                            <strong>{{ $currency }} {{ number_format($product['price'], 2) }}</strong>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <section class="signal-section signal-why">
        <div class="signal-container signal-split">
            <div>
                <p class="signal-eyebrow">Why choose us</p>
                <h2>Best services available for the best customers</h2>
                <img src="https://images.unsplash.com/photo-1581093458791-9d15482442f6?auto=format&fit=crop&w=1100&q=85" alt="Organized healthcare supplies">
            </div>
            <div class="signal-value-list">
                @foreach ([['scale', 'Honesty & transparency', 'Signal Health Group is a leading provider of high-quality medical supplies that are essential for ensuring patient health and well-being.'], ['badge-percent', 'Extra Discount', 'We take great care to ensure that our products are high quality, and we give extra discount as we can.'], ['building-2', 'Business to Business', 'Purchasing agents for hospitals, caregiver facilities, and retail buyers can connect with Signal for broader supply needs.']] as [$icon, $title, $sub])
                    <div>
                        <span><i data-lucide="{{ $icon }}"></i></span>
                        <strong>{{ $title }}</strong>
                        <p>{{ $sub }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="signal-testimonials">
        <img src="{{ $testimonialImage }}" alt="Medical supply shelves">
        <div class="signal-testimonials__overlay"></div>
        <div class="signal-container">
            <p class="signal-eyebrow">Testimonial</p>
            <h2>What they say about us</h2>
            <div class="signal-testimonial-grid">
                @foreach ([['Sandra Cleveland', 'There are not enough words to thank Tyler and Demi for what they are doing for me. They are caring, understanding, helpful, compassionate, and truly the best at what they do.'], ['Trevor Yuen', 'These guys have been instrumental in adapting to and providing a plan for our new home healthcare and home nursing situation. Could not recommend them highly enough.'], ['Signal Family Client', 'Outstanding service and care from our two homecare nurses Tyler and Diem. They go out of their way to ensure care is correct and complete.']] as [$name, $quote])
                    <figure>
                        <div>
                            @for ($i = 0; $i < 5; $i++)
                                <i data-lucide="star"></i>
                            @endfor
                        </div>
                        <blockquote>"{{ $quote }}"</blockquote>
                        <figcaption>{{ $name }}</figcaption>
                    </figure>
                @endforeach
            </div>
        </div>
    </section>
</x-layouts.store>