@extends('layouts.app')

@section('title', $pageTitle ?? __('Home'))

@section('meta_description', $pageDescription ?? '')
@section('meta_keywords', $pageKeywords ?? '')

@section('content')
@php
    /*
    |--------------------------------------------------------------------------
    | Homepage presentation helpers
    |--------------------------------------------------------------------------
    */

    $storageUrl = static function (?string $path): ?string {
        if (blank($path)) {
            return null;
        }

        $path = trim($path);

        if (
            str_starts_with($path, 'http://') ||
            str_starts_with($path, 'https://')
        ) {
            return $path;
        }

        if (str_starts_with($path, '/storage/')) {
            return asset(ltrim($path, '/'));
        }

        if (str_starts_with($path, 'storage/')) {
            return asset($path);
        }

        return asset('storage/' . ltrim($path, '/'));
    };

    $safeLink = static function (?string $link): ?string {
        if (blank($link)) {
            return null;
        }

        $link = trim($link);

        if (str_starts_with($link, '/')) {
            return url($link);
        }

        if (
            filter_var($link, FILTER_VALIDATE_URL) !== false &&
            in_array(
                strtolower((string) parse_url($link, PHP_URL_SCHEME)),
                ['http', 'https'],
                true
            )
        ) {
            return $link;
        }

        return null;
    };

    $productTitle = static function ($product): string {
        return trim(
            (string) (
                $product->details->first()?->title
                ?? $product->slug
                ?? __('Product')
            )
        );
    };

    $productImage = static function ($product) use ($storageUrl): ?string {
        $image = $product->images->firstWhere('is_main', true)
            ?? $product->images->first();

        return $storageUrl(
            $image?->image_small
            ?? $image?->image_default
        );
    };

    $effectivePrice = static function ($product): float {
        $regularPrice = (float) $product->price;
        $discountedPrice = (float) $product->price_discounted;

        return $discountedPrice > 0 &&
            $discountedPrice < $regularPrice
                ? $discountedPrice
                : $regularPrice;
    };

    $productSections = [
        [
            'key' => 'special-offers',
            'title' => __('Special Offers'),
            'description' => __('Limited-time marketplace deals selected for you.'),
            'icon' => 'fa-bolt',
            'icon_class' => 'text-danger',
            'products' => $specialOffers ?? collect(),
        ],
        [
            'key' => 'promoted-products',
            'title' => __('Featured Products'),
            'description' => __('Discover products highlighted by trusted marketplace sellers.'),
            'icon' => 'fa-fire',
            'icon_class' => 'text-warning',
            'products' => $promotedProducts ?? collect(),
        ],
        [
            'key' => 'latest-products',
            'title' => __('Latest Products'),
            'description' => __('Explore the newest products and digital solutions on WebMarket.'),
            'icon' => 'fa-clock',
            'icon_class' => 'text-primary',
            'products' => $latestProducts ?? collect(),
        ],
    ];

    $applicationName = $generalSettings->application_name
        ?? config('app.name', 'WebMarket');

    $sliderItems = $sliderItems ?? collect();
    $featuredCategories = $featuredCategories ?? collect();
    $indexCategories = $indexCategories ?? collect();
    $homepageBanners = $homepageBanners ?? collect();
    $brands = $brands ?? collect();
    $blogPosts = $blogPosts ?? collect();

    $statistics = $marketplaceStatistics ?? [
        'products' => 0,
        'sellers' => 0,
        'categories' => 0,
    ];

    /*
     * Currency selected under Admin > Settings > Payments.
     */
    $storefrontCurrency = default_currency();
@endphp

{{-- Hero section --}}
<section class="wm-hero position-relative overflow-hidden">
    @if($sliderItems->isNotEmpty())
        <div
            id="homepageSlider"
            class="carousel slide carousel-fade"
            data-bs-ride="carousel"
        >
            @if($sliderItems->count() > 1)
                <div class="carousel-indicators">
                    @foreach($sliderItems as $slider)
                        <button
                            type="button"
                            data-bs-target="#homepageSlider"
                            data-bs-slide-to="{{ $loop->index }}"
                            class="{{ $loop->first ? 'active' : '' }}"
                            aria-current="{{ $loop->first ? 'true' : 'false' }}"
                            aria-label="{{ __('Slide :number', ['number' => $loop->iteration]) }}"
                        ></button>
                    @endforeach
                </div>
            @endif

            <div class="carousel-inner">
                @foreach($sliderItems as $slider)
                    @php
                        $desktopImage = $storageUrl($slider->image);
                        $mobileImage = $storageUrl($slider->image_mobile);
                        $sliderLink = $safeLink($slider->link);
                    @endphp

                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <div
                            class="wm-hero-slide"
                            @if($desktopImage)
                                style="--hero-image: url('{{ $desktopImage }}');"
                            @endif
                        >
                            @if($mobileImage)
                                <div
                                    class="wm-mobile-hero-image"
                                    style="background-image:url('{{ $mobileImage }}');"
                                ></div>
                            @endif

                            <div class="wm-hero-overlay"></div>

                            <div class="container position-relative">
                                <div class="row min-vh-hero align-items-center">
                                    <div class="col-xl-7 col-lg-8">
                                        <div class="wm-hero-content">
                                            <span class="wm-eyebrow">
                                                <i class="fas fa-shield-alt me-2"></i>
                                                {{ __('Secure Digital Marketplace') }}
                                            </span>

                                            @if(filled($slider->title))
                                                <h1 class="display-4 fw-bold text-white mt-3 mb-3">
                                                    {{ $slider->title }}
                                                </h1>
                                            @endif

                                            @if(filled($slider->description))
                                                <p class="lead text-white-75 mb-4">
                                                    {{ $slider->description }}
                                                </p>
                                            @endif

                                            <div class="d-flex flex-wrap gap-2">
                                                @if($sliderLink)
                                                    <a
                                                        href="{{ $sliderLink }}"
                                                        class="btn btn-primary btn-lg px-4"
                                                    >
                                                        {{ $slider->button_text ?: __('Explore Now') }}
                                                        <i class="fas fa-arrow-right ms-2"></i>
                                                    </a>
                                                @else
                                                    <a
                                                        href="{{ route('storefront.products.index') }}"
                                                        class="btn btn-primary btn-lg px-4"
                                                    >
                                                        {{ __('Explore Products') }}
                                                        <i class="fas fa-arrow-right ms-2"></i>
                                                    </a>
                                                @endif

                                                @guest
                                                    @if(Route::has('register'))
                                                        <a
                                                            href="{{ route('register') }}"
                                                            class="btn btn-outline-light btn-lg px-4"
                                                        >
                                                            <i class="fas fa-user-plus me-2"></i>
                                                            {{ __('Create Account') }}
                                                        </a>
                                                    @endif
                                                @endguest
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if($sliderItems->count() > 1)
                <button
                    class="carousel-control-prev"
                    type="button"
                    data-bs-target="#homepageSlider"
                    data-bs-slide="prev"
                    aria-label="{{ __('Previous slide') }}"
                >
                    <span class="carousel-control-prev-icon"></span>
                </button>

                <button
                    class="carousel-control-next"
                    type="button"
                    data-bs-target="#homepageSlider"
                    data-bs-slide="next"
                    aria-label="{{ __('Next slide') }}"
                >
                    <span class="carousel-control-next-icon"></span>
                </button>
            @endif
        </div>
    @else
        <div class="wm-hero-fallback">
            <div class="wm-hero-decoration wm-decoration-one"></div>
            <div class="wm-hero-decoration wm-decoration-two"></div>

            <div class="container position-relative">
                <div class="row align-items-center min-vh-hero g-5">
                    <div class="col-lg-7">
                        <span class="wm-eyebrow">
                            <i class="fas fa-star me-2"></i>
                            {{ __('Professional Digital Marketplace') }}
                        </span>

                        <h1 class="display-3 fw-bold text-white mt-3 mb-4">
                            {{ __('Build, buy and grow your digital business.') }}
                        </h1>

                        <p class="lead text-white-75 mb-4">
                            {{ $pageDescription ?: __('Discover professional websites, digital products and business services from trusted sellers.') }}
                        </p>

                        <div class="d-flex flex-wrap gap-3">
                            <a
                                href="{{ route('storefront.products.index') }}"
                                class="btn btn-light btn-lg px-4 fw-semibold"
                            >
                                <i class="fas fa-search me-2"></i>
                                {{ __('Browse Products') }}
                            </a>

                            @auth
                                @if(auth()->user()->isSeller() && Route::has('seller.dashboard'))
                                    <a
                                        href="{{ route('seller.dashboard') }}"
                                        class="btn btn-outline-light btn-lg px-4"
                                    >
                                        <i class="fas fa-store me-2"></i>
                                        {{ __('Seller Dashboard') }}
                                    </a>
                                @elseif(Route::has('seller.apply'))
                                    <a
                                        href="{{ route('seller.apply') }}"
                                        class="btn btn-outline-light btn-lg px-4"
                                    >
                                        <i class="fas fa-rocket me-2"></i>
                                        {{ __('Start Selling') }}
                                    </a>
                                @endif
                            @else
                                @if(Route::has('register'))
                                    <a
                                        href="{{ route('register') }}"
                                        class="btn btn-outline-light btn-lg px-4"
                                    >
                                        <i class="fas fa-user-plus me-2"></i>
                                        {{ __('Join WebMarket') }}
                                    </a>
                                @endif
                            @endauth
                        </div>
                    </div>

                    <div class="col-lg-5 d-none d-lg-block">
                        <div class="wm-hero-card">
                            <div class="wm-hero-card-icon">
                                <i class="fas fa-laptop-code"></i>
                            </div>

                            <h2 class="h4 fw-bold mb-3">
                                {{ __('Everything your business needs') }}
                            </h2>

                            <div class="wm-benefit">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ __('Ready-made professional websites') }}</span>
                            </div>

                            <div class="wm-benefit">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ __('Secure digital product delivery') }}</span>
                            </div>

                            <div class="wm-benefit">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ __('Experienced marketplace sellers') }}</span>
                            </div>

                            <div class="wm-benefit">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ __('Business support and customization') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</section>

{{-- Marketplace search --}}
<section class="wm-search-section">
    <div class="container">
        <div class="wm-search-card shadow-lg">
            <form
                method="GET"
                action="{{ route('storefront.products.index') }}"
                role="search"
            >
                <div class="row g-2 align-items-center">
                    <div class="col-lg">
                        <div class="input-group input-group-lg">
                            <span class="input-group-text bg-white border-0">
                                <i class="fas fa-search text-primary"></i>
                            </span>

                            <input
                                type="search"
                                name="q"
                                class="form-control border-0 shadow-none"
                                placeholder="{{ __('Search websites, digital products and services...') }}"
                                maxlength="255"
                                aria-label="{{ __('Search products') }}"
                            >
                        </div>
                    </div>

                    <div class="col-lg-auto">
                        <button
                            type="submit"
                            class="btn btn-primary btn-lg w-100 px-5"
                        >
                            {{ __('Search Marketplace') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

{{-- Marketplace statistics --}}
@if(array_sum(array_map('intval', $statistics)) > 0)
    <section class="py-4 border-bottom bg-white">
        <div class="container">
            <div class="row g-3 justify-content-center">
                <div class="col-6 col-lg-3">
                    <div class="wm-stat">
                        <div class="wm-stat-icon bg-primary-subtle text-primary">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <div>
                            <div class="h4 fw-bold mb-0">
                                {{ number_format((int) ($statistics['products'] ?? 0)) }}
                            </div>
                            <div class="small text-muted">
                                {{ __('Published Products') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="wm-stat">
                        <div class="wm-stat-icon bg-success-subtle text-success">
                            <i class="fas fa-store"></i>
                        </div>
                        <div>
                            <div class="h4 fw-bold mb-0">
                                {{ number_format((int) ($statistics['sellers'] ?? 0)) }}
                            </div>
                            <div class="small text-muted">
                                {{ __('Trusted Sellers') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="wm-stat">
                        <div class="wm-stat-icon bg-warning-subtle text-warning">
                            <i class="fas fa-th-large"></i>
                        </div>
                        <div>
                            <div class="h4 fw-bold mb-0">
                                {{ number_format((int) ($statistics['categories'] ?? 0)) }}
                            </div>
                            <div class="small text-muted">
                                {{ __('Categories') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="wm-stat">
                        <div class="wm-stat-icon bg-info-subtle text-info">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div>
                            <div class="h4 fw-bold mb-0">
                                {{ __('Secure') }}
                            </div>
                            <div class="small text-muted">
                                {{ __('Protected Checkout') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

{{-- Featured categories --}}
@if($featuredCategories->isNotEmpty())
    <section class="wm-section">
        <div class="container">
            <div class="wm-section-heading">
                <div>
                    <span class="wm-section-kicker">
                        {{ __('Browse Marketplace') }}
                    </span>
                    <h2 class="wm-section-title">
                        {{ __('Featured Categories') }}
                    </h2>
                    <p class="text-muted mb-0">
                        {{ __('Find the right product or service for your next project.') }}
                    </p>
                </div>

                <a
                    href="{{ route('storefront.products.index') }}"
                    class="btn btn-outline-primary"
                >
                    {{ __('View All Products') }}
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>

            <div class="row g-3">
                @foreach($featuredCategories as $category)
                    @php
                        $categoryName = $category->translations->first()?->name
                            ?? $category->slug
                            ?? __('Category');

                        $categoryImage = $storageUrl($category->image);
                    @endphp

                    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
                        <a
                            href="{{ route('storefront.categories.show', $category) }}"
                            class="wm-category-card"
                        >
                            <div class="wm-category-image">
                                @if($categoryImage)
                                    <img
                                        src="{{ $categoryImage }}"
                                        alt="{{ $categoryName }}"
                                        loading="lazy"
                                    >
                                @else
                                    <i class="fas fa-layer-group"></i>
                                @endif
                            </div>

                            <h3 class="h6 fw-bold mb-0 text-truncate">
                                {{ $categoryName }}
                            </h3>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- Homepage banners --}}
@if($homepageBanners->isNotEmpty())
    <section class="pb-4">
        <div class="container">
            @foreach($homepageBanners as $location => $banners)
                <div class="row g-3 mb-3">
                    @foreach($banners as $banner)
                        @php
                            $bannerImage = $storageUrl($banner->banner_image_path);
                            $bannerLink = $safeLink($banner->banner_url);
                            $columnClass = $banners->count() === 1
                                ? 'col-12'
                                : ($banners->count() === 2
                                    ? 'col-md-6'
                                    : 'col-md-6 col-lg-4');
                        @endphp

                        @if($bannerImage)
                            <div class="{{ $columnClass }}">
                                @if($bannerLink)
                                    <a
                                        href="{{ $bannerLink }}"
                                        class="wm-banner"
                                        rel="noopener"
                                    >
                                        <img
                                            src="{{ $bannerImage }}"
                                            alt="{{ __('Marketplace promotion') }}"
                                            loading="lazy"
                                        >
                                    </a>
                                @else
                                    <div class="wm-banner">
                                        <img
                                            src="{{ $bannerImage }}"
                                            alt="{{ __('Marketplace promotion') }}"
                                            loading="lazy"
                                        >
                                    </div>
                                @endif
                            </div>
                        @endif
                    @endforeach
                </div>
            @endforeach
        </div>
    </section>
@endif

{{-- Product sections --}}
@foreach($productSections as $section)
    @if($section['products']->isNotEmpty())
        <section
            id="{{ $section['key'] }}"
            class="wm-section {{ $loop->even ? 'bg-light' : '' }}"
        >
            <div class="container">
                <div class="wm-section-heading">
                    <div>
                        <span class="wm-section-kicker">
                            {{ __('Marketplace Collection') }}
                        </span>

                        <h2 class="wm-section-title">
                            <i class="fas {{ $section['icon'] }} {{ $section['icon_class'] }} me-2"></i>
                            {{ $section['title'] }}
                        </h2>

                        <p class="text-muted mb-0">
                            {{ $section['description'] }}
                        </p>
                    </div>

                    <a
                        href="{{ route('storefront.products.index') }}"
                        class="btn btn-outline-primary"
                    >
                        {{ __('Explore All') }}
                        <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>

                <div class="row g-4">
                    @foreach($section['products'] as $product)
                        @php
    $title = $productTitle($product);
    $image = $productImage($product);
    $sellingPrice = $effectivePrice($product);
    $regularPrice = (float) $product->price;

    $productCurrency = $storefrontCurrency;

    $hasDiscount =
        (float) $product->price_discounted > 0
        && (float) $product->price_discounted < $regularPrice;

    $categoryName =
        $product->category?->translations?->first()?->name
        ?? __('Uncategorized');
@endphp

                        <div class="col-sm-6 col-lg-4 col-xl-3">
                            <article class="card wm-product-card border-0 h-100">
                                <div class="wm-product-media">
                                    <a
                                        href="{{ route('storefront.products.show', $product) }}"
                                        aria-label="{{ $title }}"
                                    >
                                        @if($image)
                                            <img
                                                src="{{ $image }}"
                                                alt="{{ $title }}"
                                                loading="lazy"
                                            >
                                        @else
                                            <div class="wm-product-placeholder">
                                                <i class="fas fa-cube"></i>
                                            </div>
                                        @endif
                                    </a>

                                    <div class="wm-product-badges">
                                        @if(
                                            $product->is_promoted &&
                                            $product->promote_end_date?->isFuture()
                                        )
                                            <span class="badge bg-warning text-dark">
                                                <i class="fas fa-fire me-1"></i>
                                                {{ __('Featured') }}
                                            </span>
                                        @endif

                                        @if($product->is_special_offer)
                                            <span class="badge bg-danger">
                                                <i class="fas fa-bolt me-1"></i>
                                                {{ __('Special Offer') }}
                                            </span>
                                        @endif
                                    </div>

                                    <span class="wm-product-type">
                                        <i class="fas fa-{{
                                            $product->product_type === 'digital'
                                                ? 'download'
                                                : ($product->product_type === 'service'
                                                    ? 'briefcase'
                                                    : 'box')
                                        }} me-1"></i>

                                        {{ \Illuminate\Support\Str::headline($product->product_type) }}
                                    </span>
                                </div>

                                <div class="card-body d-flex flex-column p-3">
                                    <div class="small text-primary fw-semibold mb-2 text-truncate">
                                        {{ $categoryName }}
                                    </div>

                                    <h3 class="h6 fw-bold mb-2 product-title">
                                        <a
                                            href="{{ route('storefront.products.show', $product) }}"
                                            class="text-dark text-decoration-none"
                                        >
                                            {{ $title }}
                                        </a>
                                    </h3>

                                    @if(filled($product->details->first()?->short_description))
                                        <p class="small text-muted product-description mb-3">
                                            {{ \Illuminate\Support\Str::limit(
                                                strip_tags($product->details->first()->short_description),
                                                95
                                            ) }}
                                        </p>
                                    @endif

                                   <div class="mt-auto">
    <div
        class="d-flex align-items-center
               justify-content-between mb-3"
    >
        <div>
            <span class="h5 fw-bold text-primary mb-0">
                {{
                    money(
                        $sellingPrice,
                        $productCurrency
                    )
                }}
            </span>

            @if($hasDiscount)
                <small
                    class="text-muted
                           text-decoration-line-through
                           d-block"
                >
                    {{
                        money(
                            $regularPrice,
                            $productCurrency
                        )
                    }}
                </small>
            @endif
        </div>

        <div
            class="small text-muted"
            title="{{ __('Customer rating') }}"
        >
            <i class="fas fa-star text-warning"></i>

            {{
                number_format(
                    (float) $product->rating,
                    1
                )
            }}

            <span>
                ({{
                    number_format(
                        (int) (
                            $product->reviews_count ?? 0
                        )
                    )
                }})
            </span>
        </div>
    </div>

                                        <div class="d-flex gap-2">
                                            <a
                                                href="{{ route('storefront.products.show', $product) }}"
                                                class="btn btn-primary btn-sm flex-grow-1"
                                            >
                                                {{ __('View Product') }}
                                            </a>

                                            @if($product->seller && Route::has('sellers.show'))
                                                <a
                                                    href="{{ route('sellers.show', [
    'seller' => $product->seller->slug,
]) }}"
                                                    class="btn btn-outline-secondary btn-sm"
                                                    title="{{ __('View seller') }}"
                                                >
                                                    <i class="fas fa-store"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endforeach

{{-- Marketplace categories --}}
@if($indexCategories->isNotEmpty())
    <section class="wm-section">
        <div class="container">
            <div class="wm-section-heading">
                <div>
                    <span class="wm-section-kicker">
                        {{ __('Explore More') }}
                    </span>
                    <h2 class="wm-section-title">
                        {{ __('Marketplace Categories') }}
                    </h2>
                </div>
            </div>

            <div class="row g-3">
                @foreach($indexCategories as $category)
                    @php
                        $categoryName = $category->translations->first()?->name
                            ?? $category->slug
                            ?? __('Category');
                    @endphp

                    <div class="col-sm-6 col-lg-4">
                        <a
                            href="{{ route('storefront.categories.show', $category) }}"
                            class="wm-category-list-card"
                        >
                            <span class="wm-category-list-icon">
                                <i class="fas fa-folder-open"></i>
                            </span>

                            <span class="flex-grow-1 text-truncate fw-semibold">
                                {{ $categoryName }}
                            </span>

                            <i class="fas fa-chevron-right text-muted"></i>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- Why choose WebMarket --}}
<section class="wm-section bg-light">
    <div class="container">
        <div class="text-center mx-auto mb-5 wm-heading-width">
            <span class="wm-section-kicker">
                {{ __('Shop With Confidence') }}
            </span>

            <h2 class="wm-section-title">
                {{ __('Why choose :name?', ['name' => $applicationName]) }}
            </h2>

            <p class="text-muted mb-0">
                {{ __('A professional marketplace built for secure purchases, reliable sellers and growing businesses.') }}
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-xl-3">
                <div class="wm-feature-card">
                    <span class="wm-feature-icon text-primary bg-primary-subtle">
                        <i class="fas fa-shield-alt"></i>
                    </span>

                    <h3 class="h5 fw-bold">
                        {{ __('Secure Payments') }}
                    </h3>

                    <p class="text-muted mb-0">
                        {{ __('Protected checkout with trusted payment providers and transaction verification.') }}
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="wm-feature-card">
                    <span class="wm-feature-icon text-success bg-success-subtle">
                        <i class="fas fa-store"></i>
                    </span>

                    <h3 class="h5 fw-bold">
                        {{ __('Trusted Sellers') }}
                    </h3>

                    <p class="text-muted mb-0">
                        {{ __('Purchase professional products and services from marketplace sellers.') }}
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="wm-feature-card">
                    <span class="wm-feature-icon text-warning bg-warning-subtle">
                        <i class="fas fa-download"></i>
                    </span>

                    <h3 class="h5 fw-bold">
                        {{ __('Digital Delivery') }}
                    </h3>

                    <p class="text-muted mb-0">
                        {{ __('Access eligible digital purchases and licence information from your account.') }}
                    </p>
                </div>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="wm-feature-card">
                    <span class="wm-feature-icon text-info bg-info-subtle">
                        <i class="fas fa-headset"></i>
                    </span>

                    <h3 class="h5 fw-bold">
                        {{ __('Dedicated Support') }}
                    </h3>

                    <p class="text-muted mb-0">
                        {{ __('Open support tickets and communicate securely through your customer account.') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Brands --}}
@if($brands->isNotEmpty())
    <section class="wm-section">
        <div class="container">
            <div class="text-center mb-4">
                <span class="wm-section-kicker">
                    {{ __('Marketplace Partners') }}
                </span>

                <h2 class="wm-section-title">
                    {{ __('Brands on WebMarket') }}
                </h2>
            </div>

            <div class="wm-brand-grid">
                @foreach($brands as $brand)
                    @php
                        $brandImage = $storageUrl($brand->image_path);
                    @endphp

                    <div class="wm-brand-card">
                        @if($brandImage)
                            <img
                                src="{{ $brandImage }}"
                                alt="{{ $brand->name ?: __('Brand') }}"
                                loading="lazy"
                            >
                        @else
                            <span class="fw-bold text-muted">
                                {{ $brand->name ?: __('Brand') }}
                            </span>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- Blog --}}
@if($blogPosts->isNotEmpty())
    <section class="wm-section bg-light">
        <div class="container">
            <div class="wm-section-heading">
                <div>
                    <span class="wm-section-kicker">
                        {{ __('Resources and Insights') }}
                    </span>

                    <h2 class="wm-section-title">
                        {{ __('From Our Blog') }}
                    </h2>

                    <p class="text-muted mb-0">
                        {{ __('Marketplace news, business guidance and digital growth insights.') }}
                    </p>
                </div>

                <a
                    href="{{ route('blog.index') }}"
                    class="btn btn-outline-primary"
                >
                    {{ __('Visit Blog') }}
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>

            <div class="row g-4">
                @foreach($blogPosts->take(4) as $post)
                    @php
                        $postImage = $storageUrl(
                            $post->image_small
                            ?? $post->image_default
                        );
                    @endphp

                    <div class="col-md-6 col-xl-3">
                        <article class="card wm-blog-card border-0 h-100">
                            <a
                                href="{{ route('blog.show', $post->slug) }}"
                                class="wm-blog-image"
                            >
                                @if($postImage)
                                    <img
                                        src="{{ $postImage }}"
                                        alt="{{ $post->title }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div class="wm-blog-placeholder">
                                        <i class="fas fa-newspaper"></i>
                                    </div>
                                @endif
                            </a>

                            <div class="card-body p-4">
                                <div class="d-flex align-items-center gap-2 small text-muted mb-2">
                                    <i class="far fa-calendar-alt"></i>
                                    <span>
                                        {{ $post->created_at?->format('M d, Y') }}
                                    </span>

                                    @if($post->category)
                                        <span>•</span>
                                        <span>
                                            {{ $post->category->name }}
                                        </span>
                                    @endif
                                </div>

                                <h3 class="h5 fw-bold mb-3">
                                    <a
                                        href="{{ route('blog.show', $post->slug) }}"
                                        class="text-dark text-decoration-none"
                                    >
                                        {{ $post->title }}
                                    </a>
                                </h3>

                                @if(filled($post->summary))
                                    <p class="text-muted small mb-3">
                                        {{ \Illuminate\Support\Str::limit(
                                            strip_tags($post->summary),
                                            130
                                        ) }}
                                    </p>
                                @endif

                                <a
                                    href="{{ route('blog.show', $post->slug) }}"
                                    class="fw-semibold text-decoration-none"
                                >
                                    {{ __('Read Article') }}
                                    <i class="fas fa-arrow-right ms-1"></i>
                                </a>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- Final call to action --}}
<section class="wm-cta-section">
    <div class="container">
        <div class="wm-cta-card">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <span class="badge rounded-pill bg-white text-primary mb-3">
                        {{ __('Grow with WebMarket') }}
                    </span>

                    <h2 class="display-6 fw-bold text-white mb-3">
                        {{ __('Ready to move your digital business forward?') }}
                    </h2>

                    <p class="lead text-white-75 mb-0">
                        {{ __('Find professional products, launch your next website or connect with marketplace sellers today.') }}
                    </p>
                </div>

                <div class="col-lg-4">
                    <div class="d-grid gap-2 d-sm-flex d-lg-grid">
                        <a
                            href="{{ route('storefront.products.index') }}"
                            class="btn btn-light btn-lg"
                        >
                            <i class="fas fa-shopping-bag me-2"></i>
                            {{ __('Explore Marketplace') }}
                        </a>

                        @guest
                            @if(Route::has('register'))
                                <a
                                    href="{{ route('register') }}"
                                    class="btn btn-outline-light btn-lg"
                                >
                                    <i class="fas fa-user-plus me-2"></i>
                                    {{ __('Create Free Account') }}
                                </a>
                            @endif
                        @else
                            @if(Route::has('account.dashboard'))
                                <a
                                    href="{{ route('account.dashboard') }}"
                                    class="btn btn-outline-light btn-lg"
                                >
                                    <i class="fas fa-user-circle me-2"></i>
                                    {{ __('My Account') }}
                                </a>
                            @endif
                        @endguest
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Structured website data --}}
@php
    $structuredData = [
        '@context' => 'https://schema.org',
        '@type' => 'WebSite',
        'name' => $applicationName,
        'url' => route('home'),
        'description' => $pageDescription,
        'potentialAction' => [
            '@type' => 'SearchAction',
            'target' => route('storefront.products.index') . '?q={search_term_string}',
            'query-input' => 'required name=search_term_string',
        ],
    ];
@endphp

<script type="application/ld+json">
{!! json_encode(
    $structuredData,
    JSON_UNESCAPED_SLASHES |
    JSON_UNESCAPED_UNICODE |
    JSON_HEX_TAG |
    JSON_HEX_AMP |
    JSON_HEX_APOS |
    JSON_HEX_QUOT
) !!}
</script>
@endsection

@push('styles')
<style>
    :root {
        --wm-primary: #0d6efd;
        --wm-primary-dark: #084298;
        --wm-navy: #071a38;
        --wm-text: #172033;
        --wm-muted: #667085;
        --wm-border: #e7eaf0;
        --wm-radius: 1rem;
    }

    .text-white-75 {
        color: rgba(255, 255, 255, .78) !important;
    }

    .min-vh-hero {
        min-height: 610px;
    }

    .wm-hero {
        background: var(--wm-navy);
    }

    .wm-hero-slide {
        background-color: var(--wm-navy);
        background-image: var(--hero-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 610px;
        position: relative;
    }

    .wm-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 18, 43, .96) 0%,
                rgba(4, 18, 43, .82) 45%,
                rgba(4, 18, 43, .32) 100%
            );
        inset: 0;
        position: absolute;
    }

    .wm-mobile-hero-image {
        display: none;
    }

    .wm-hero-fallback {
        background:
            radial-gradient(circle at 85% 20%, rgba(13, 110, 253, .5), transparent 30%),
            linear-gradient(135deg, #06152f 0%, #0a387a 55%, #0d6efd 100%);
        min-height: 610px;
        overflow: hidden;
        position: relative;
    }

    .wm-hero-content {
        max-width: 760px;
        padding: 5rem 0 7rem;
        position: relative;
        z-index: 2;
    }

    .wm-eyebrow {
        align-items: center;
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 999px;
        color: #fff;
        display: inline-flex;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        padding: .6rem 1rem;
        text-transform: uppercase;
    }

    .wm-hero-card {
        backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 1.5rem;
        box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
        padding: 2rem;
        position: relative;
        z-index: 2;
    }

    .wm-hero-card-icon {
        align-items: center;
        background: rgba(13, 110, 253, .12);
        border-radius: 1rem;
        color: var(--wm-primary);
        display: flex;
        font-size: 2rem;
        height: 64px;
        justify-content: center;
        margin-bottom: 1.5rem;
        width: 64px;
    }

    .wm-benefit {
        align-items: center;
        color: var(--wm-text);
        display: flex;
        gap: .75rem;
        margin-top: 1rem;
    }

    .wm-benefit i {
        color: #198754;
    }

    .wm-hero-decoration {
        border-radius: 50%;
        position: absolute;
    }

    .wm-decoration-one {
        background: rgba(255, 255, 255, .07);
        height: 460px;
        right: -130px;
        top: -150px;
        width: 460px;
    }

    .wm-decoration-two {
        background: rgba(255, 255, 255, .05);
        bottom: -180px;
        height: 400px;
        left: 35%;
        width: 400px;
    }

    .wm-search-section {
        margin-top: -48px;
        position: relative;
        z-index: 10;
    }

    .wm-search-card {
        background: #fff;
        border: 1px solid rgba(13, 110, 253, .08);
        border-radius: 1rem;
        padding: 1rem;
    }

    .wm-section {
        padding: 5rem 0;
    }

    .wm-section-heading {
        align-items: end;
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        margin-bottom: 2rem;
    }

    .wm-section-kicker {
        color: var(--wm-primary);
        display: block;
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .1em;
        margin-bottom: .45rem;
        text-transform: uppercase;
    }

    .wm-section-title {
        color: var(--wm-text);
        font-size: clamp(1.7rem, 3vw, 2.35rem);
        font-weight: 800;
        margin-bottom: .5rem;
    }

    .wm-heading-width {
        max-width: 680px;
    }

    .wm-stat {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: center;
        padding: .75rem;
    }

    .wm-stat-icon {
        align-items: center;
        border-radius: .9rem;
        display: flex;
        flex: 0 0 auto;
        font-size: 1.25rem;
        height: 52px;
        justify-content: center;
        width: 52px;
    }

    .wm-category-card {
        background: #fff;
        border: 1px solid var(--wm-border);
        border-radius: 1rem;
        color: var(--wm-text);
        display: block;
        padding: 1rem;
        text-align: center;
        text-decoration: none;
        transition: .25s ease;
    }

    .wm-category-card:hover {
        border-color: rgba(13, 110, 253, .35);
        box-shadow: 0 15px 35px rgba(16, 24, 40, .1);
        color: var(--wm-primary);
        transform: translateY(-5px);
    }

    .wm-category-image {
        align-items: center;
        background: #f3f6fb;
        border-radius: .85rem;
        color: var(--wm-primary);
        display: flex;
        font-size: 2rem;
        height: 110px;
        justify-content: center;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .wm-category-image img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .wm-banner {
        border-radius: 1rem;
        display: block;
        overflow: hidden;
    }

    .wm-banner img {
        display: block;
        height: auto;
        transition: transform .35s ease;
        width: 100%;
    }

    .wm-banner:hover img {
        transform: scale(1.02);
    }

    .wm-product-card {
        border: 1px solid var(--wm-border) !important;
        border-radius: 1rem;
        box-shadow: 0 8px 25px rgba(16, 24, 40, .06);
        overflow: hidden;
        transition: .25s ease;
    }

    .wm-product-card:hover {
        box-shadow: 0 18px 45px rgba(16, 24, 40, .14);
        transform: translateY(-6px);
    }

    .wm-product-media {
        background: #f5f7fa;
        height: 220px;
        overflow: hidden;
        position: relative;
    }

    .wm-product-media > a,
    .wm-product-media img,
    .wm-product-placeholder {
        display: block;
        height: 100%;
        width: 100%;
    }

    .wm-product-media img {
        object-fit: cover;
        transition: transform .4s ease;
    }

    .wm-product-card:hover .wm-product-media img {
        transform: scale(1.05);
    }

    .wm-product-placeholder {
        align-items: center;
        color: rgba(13, 110, 253, .35);
        display: flex;
        font-size: 4rem;
        justify-content: center;
    }

    .wm-product-badges {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        left: .75rem;
        position: absolute;
        top: .75rem;
    }

    .wm-product-type {
        backdrop-filter: blur(8px);
        background: rgba(6, 21, 47, .8);
        border-radius: 999px;
        bottom: .75rem;
        color: #fff;
        font-size: .7rem;
        font-weight: 700;
        padding: .4rem .7rem;
        position: absolute;
        right: .75rem;
        text-transform: uppercase;
    }

    .product-title {
        line-height: 1.45;
        min-height: 2.9em;
    }

    .product-description {
        min-height: 3.8em;
    }

    .wm-category-list-card {
        align-items: center;
        background: #fff;
        border: 1px solid var(--wm-border);
        border-radius: .85rem;
        color: var(--wm-text);
        display: flex;
        gap: 1rem;
        padding: 1rem 1.15rem;
        text-decoration: none;
        transition: .2s ease;
    }

    .wm-category-list-card:hover {
        border-color: var(--wm-primary);
        color: var(--wm-primary);
        transform: translateX(4px);
    }

    .wm-category-list-icon {
        align-items: center;
        background: rgba(13, 110, 253, .1);
        border-radius: .7rem;
        color: var(--wm-primary);
        display: flex;
        height: 42px;
        justify-content: center;
        width: 42px;
    }

    .wm-feature-card {
        background: #fff;
        border: 1px solid var(--wm-border);
        border-radius: 1rem;
        height: 100%;
        padding: 2rem;
        transition: .25s ease;
    }

    .wm-feature-card:hover {
        box-shadow: 0 15px 40px rgba(16, 24, 40, .1);
        transform: translateY(-4px);
    }

    .wm-feature-icon {
        align-items: center;
        border-radius: 1rem;
        display: flex;
        font-size: 1.45rem;
        height: 58px;
        justify-content: center;
        margin-bottom: 1.25rem;
        width: 58px;
    }

    .wm-brand-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .wm-brand-card {
        align-items: center;
        background: #fff;
        border: 1px solid var(--wm-border);
        border-radius: .85rem;
        display: flex;
        height: 100px;
        justify-content: center;
        padding: 1rem;
    }

    .wm-brand-card img {
        filter: grayscale(100%);
        max-height: 58px;
        max-width: 100%;
        object-fit: contain;
        opacity: .7;
        transition: .25s ease;
    }

    .wm-brand-card:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    .wm-blog-card {
        border: 1px solid var(--wm-border) !important;
        border-radius: 1rem;
        box-shadow: 0 8px 25px rgba(16, 24, 40, .05);
        overflow: hidden;
        transition: .25s ease;
    }

    .wm-blog-card:hover {
        box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
        transform: translateY(-5px);
    }

    .wm-blog-image {
        background: #eef2f7;
        display: block;
        height: 205px;
        overflow: hidden;
    }

    .wm-blog-image img {
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
        width: 100%;
    }

    .wm-blog-card:hover .wm-blog-image img {
        transform: scale(1.05);
    }

    .wm-blog-placeholder {
        align-items: center;
        color: rgba(13, 110, 253, .3);
        display: flex;
        font-size: 3.5rem;
        height: 100%;
        justify-content: center;
    }

    .wm-cta-section {
        background: #fff;
        padding: 5rem 0;
    }

    .wm-cta-card {
        background:
            radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .2), transparent 30%),
            linear-gradient(135deg, #06152f 0%, #0d6efd 100%);
        border-radius: 1.5rem;
        box-shadow: 0 24px 65px rgba(13, 110, 253, .22);
        overflow: hidden;
        padding: 3rem;
        position: relative;
    }

    @media (max-width: 1199.98px) {
        .wm-brand-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .min-vh-hero,
        .wm-hero-slide,
        .wm-hero-fallback {
            min-height: 540px;
        }

        .wm-section {
            padding: 4rem 0;
        }

        .wm-section-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 1rem;
        }
    }

    @media (max-width: 767.98px) {
        .wm-mobile-hero-image {
            background-position: center;
            background-size: cover;
            display: block;
            inset: 0;
            position: absolute;
        }

        .wm-hero-overlay {
            background: rgba(4, 18, 43, .78);
        }

        .wm-search-section {
            margin-top: -30px;
        }

        .wm-section {
            padding: 3rem 0;
        }

        .wm-brand-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .wm-cta-card {
            padding: 2rem;
        }

        .wm-product-media {
            height: 200px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .wm-product-card,
        .wm-category-card,
        .wm-feature-card,
        .wm-blog-card,
        .wm-banner img,
        .wm-product-media img {
            transition: none !important;
        }
    }
</style>
@endpush