@extends('layouts.app')

@section('title', 'IZONE Africa × Magic City — Two brands, one gateway')

@section('content')

    <x-hero.grid :main-hero-slides="$shop['hero_slides'] ?? []" :magic-city-slides="$shop['hero_slides_magic'] ?? []" :izone-africa-slides="$shop['hero_slides_izone'] ?? []"  :brands="$shop['brands'] ?? []" :site-tagline="$shop['site']['site_tagline'] ?? ''" />

    <section class="deals-section" id="trend-categories">
        <div class="deals-head">
            <div>
                <h2>Trend Categories</h2>
                <p>Browse real categories from the live catalogue — every tile leads to the shop.</p>
            </div>
        </div>
        <x-sections.brand-switch />

        <div class="category-tiles">
            @forelse($shop['trend_categories'] as $category)
                <a class="category-tile" href="{{ url('/shop?cat=' . $category['key']) }}">
                    <span class="ct-icon">{{ $category['icon'] }}</span>
                    <span class="ct-name">{{ $category['name'] }}</span>
                    <span class="ct-arrow">→</span>
                </a>
            @empty
                <div class="deals-empty">
                    <div class="deals-empty-emoji">📦</div>
                    <div class="deals-empty-title">No categories yet</div>
                    <div class="deals-empty-text">Categories will appear here once products are added from the admin panel.</div>
                </div>
            @endforelse
        </div>
    </section>

    <section class="deals-section" id="deals">
        <div class="deals-head">
            <div>
                <h2>Deals of the Day</h2>
                <p>{{ $shop['promotional_message'] ?? 'Mixed picks from Izone Africa & Magic City.' }}</p>
            </div>
            <div class="countdown">
                <span class="cd-label">⏳ Hurry, offer ends in</span>
                <div class="cd-box"><div class="n" id="cd-h">06</div><div class="l">Hrs</div></div>
                <div class="cd-box"><div class="n" id="cd-m">00</div><div class="l">Min</div></div>
                <div class="cd-box"><div class="n" id="cd-s">00</div><div class="l">Sec</div></div>
            </div>
        </div>
        <x-sections.brand-switch />

        <div class="deals-quick-row" id="dealsQuickRow">
            <div class="deals-tags">
                <a class="flash" href="#deals">⚡ Flash</a>
                <a class="arrivals" href="#new-imports">✨ New</a>
                <a class="super" href="#featured-showcase">🔥 Super</a>
                <a class="outlet" href="#popular-on-demand">🏷️ Outlet</a>
            </div>
        </div>

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap">
            <button class="deals-arrow prev" id="dealsPrev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track" id="dealsTrack">

                @forelse(($shop['homepage'] ?? $shop['products']) as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No deals yet</div>
                        <div class="deals-empty-text">Products will appear here once the store is stocked from the admin panel.</div>
                    </div>
                @endforelse

            </div>

            <button class="deals-arrow next" id="dealsNext" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

    <section class="deals-section" id="best-selling">
        <div class="deals-head">
            <div>
                <h2>Best Selling This Week</h2>
                <p>Top movers from real orders — quality-checked picks you can trust.</p>
            </div>
            <a class="section-view-all" href="{{ route('collections.best_selling') }}">View All →</a>
        </div>
        <x-sections.brand-switch />

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap">
            <button class="deals-arrow prev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track">
                @forelse($shop['best_selling'] as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No bestsellers yet</div>
                        <div class="deals-empty-text">Best sellers will appear here once products are stocked and orders come in.</div>
                    </div>
                @endforelse
            </div>

            <button class="deals-arrow next" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

<section class="deals-section" id="popular-on-demand">
        <div class="deals-head">
            <div>
                <h2>Popular On-Demand</h2>
                <p>Requested favourites — in stock and ready to go.</p>
            </div>
            <a class="section-view-all" href="{{ route('collections.popular_on_demand') }}">View All →</a>
        </div>
        <x-sections.brand-switch />

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap">
            <button class="deals-arrow prev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track">
                @forelse($shop['popular_on_demand'] as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No on-demand picks yet</div>
                        <div class="deals-empty-text">Popular on-demand products will appear here once the store is stocked.</div>
                    </div>
                @endforelse
            </div>

            <button class="deals-arrow next" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

    <section class="deals-section" id="new-imports">
        <div class="deals-head">
            <div>
                <h2>New Imports</h2>
                <p>Fresh arrivals, newest first — sourced from trusted global partners.</p>
            </div>
            <a class="section-view-all" href="{{ route('collections.new_imports') }}">View All →</a>
        </div>
        <x-sections.brand-switch />

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap">
            <button class="deals-arrow prev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track">
                @forelse($shop['new_imports'] as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No new imports yet</div>
                        <div class="deals-empty-text">New arrivals will appear here once products are added from the admin panel.</div>
                    </div>
                @endforelse
            </div>

            <button class="deals-arrow next" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

    <section class="deals-section" id="featured-showcase">
        <div class="deals-head">
            <div>
                <h2>Featured Showcase</h2>
                <p>Highlights from the catalogue marked featured by the store.</p>
            </div>
        </div>
        <x-sections.brand-switch />

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap">
            <button class="deals-arrow prev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track">
                @forelse($shop['featured_showcase'] as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No featured picks yet</div>
                        <div class="deals-empty-text">Featured products will appear here once marked featured in the admin panel.</div>
                    </div>
                @endforelse
            </div>

            <button class="deals-arrow next" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

    <section class="deals-section" id="popular-products">
        <div class="deals-head">
            <div>
                <h2>Popular Products</h2>
                <p>Customer favourites across our most-loved categories.</p>
            </div>
            <a class="section-view-all" href="{{ url('/shop') }}">View All →</a>
        </div>

        <div class="popular-tabs" id="popularTabs">
            @foreach($shop['popular_tabs'] as $tab)
                <button class="pp-tab {{ $loop->first ? 'active' : '' }}" data-pp-cat="{{ $tab['key'] }}">{{ $tab['icon'] }} {{ $tab['name'] }}</button>
            @endforeach
        </div>

        <div class="section-empty" hidden></div>

        <div class="deals-track-wrap pp-wrap">
            <button class="deals-arrow prev" aria-label="Scroll left">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            </button>

            <div class="deals-track" id="popularTrack">
                @forelse($shop['popular_products'] as $product)
                    <x-product.card :product="$product" />
                @empty
                    <div class="deals-empty">
                        <div class="deals-empty-emoji">📦</div>
                        <div class="deals-empty-title">No popular picks yet</div>
                        <div class="deals-empty-text">Popular products will appear here once the store is stocked.</div>
                    </div>
                @endforelse
            </div>

            <button class="deals-arrow next" aria-label="Scroll right">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
        </div>
    </section>

    <x-sections.campaign-carousel :campaigns="$shop['campaigns'] ?? []" />

    <x-sections.daily-calendar :themes="$shop['daily_themes'] ?? []" />

    <x-sections.quick-deals :deals="$shop['quick_deals'] ?? []" :threshold="$shop['threshold'] ?? 34000" />

    <x-sections.projects :projects="$shop['projects'] ?? []" :marquee-speed="$shop['projects_marquee_speed'] ?? 30" />

@endsection