@extends('layouts.app')

@section('content')
    <header class="shop-hero">
        <div class="container shop-hero-grid reveal active">
            <div class="shop-hero-copy">
                <span class="shop-kicker">
                    <i class="fas fa-microchip"></i>
                    Hardware Store
                </span>
                <h1>Physische Produkte f&uuml;r <span>echte Projekte.</span></h1>
                <p class="lead">
                    Kits, Werkzeuge und Messger&auml;te im Stil von kotsch.tech: klar erkl&auml;rt, schnell bestellbar
                    und sauber in die bestehende Website integriert.
                </p>
                <div class="shop-inline-form">
                    <a href="#shop-grid" class="shop-button">Produkte ansehen</a>
                    <a href="{{ route('shop.cart.index') }}" class="shop-button-light">Zum Warenkorb</a>
                </div>
            </div>

            <div class="shop-hero-panel reveal">
                <div class="shop-stat-row">
                    <div class="shop-stat-card">
                        <span>Produkte</span>
                        <strong>{{ $products->count() }}</strong>
                    </div>
                    <div class="shop-stat-card">
                        <span>Versand</span>
                        <strong>{{ number_format(($shippingConfig['flat_rate_cents'] ?? 0) / 100, 2, ',', '.') }} EUR</strong>
                    </div>
                    <div class="shop-stat-card">
                        <span>Zahlarten</span>
                        <strong>{{ count($paymentMethods) }}</strong>
                    </div>
                </div>

                <ul class="shop-feature-list" style="margin-top: 22px;">
                    <li>
                        <i class="fas fa-circle-check"></i>
                        <span>Gast-Checkout ohne Konto, direkt &uuml;ber die bestehende Website.</span>
                    </li>
                    <li>
                        <i class="fas fa-location-dot"></i>
                        <span>Deutschland zuerst: Versand, Checkout und Kommunikation sind f&uuml;r den lokalen Verkauf optimiert.</span>
                    </li>
                    <li>
                        <i class="fas fa-screwdriver-wrench"></i>
                        <span>Klare Produktseiten, schnelle Vorkasse-Abwicklung und Bestellbest&auml;tigung direkt nach dem Kauf.</span>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <section id="shop-grid" class="shop-section">
        <div class="container">
            <div class="shop-filter-bar">
                <div>
                    <span class="shop-muted-label">Sortiment</span>
                    <h2 style="font-size: 2.4rem; margin-top: 12px;">Ausgew&auml;hlte Produkte f&uuml;r echte Eins&auml;tze</h2>
                </div>
                <div class="shop-filter-pills">
                    <a href="{{ route('shop.index') }}" class="shop-filter-pill {{ $selectedCategory === '' ? 'is-active' : '' }}">
                        Alle
                    </a>
                    @foreach ($categories as $category)
                        <a href="{{ route('shop.index', ['category' => $category]) }}" class="shop-filter-pill {{ $selectedCategory === $category ? 'is-active' : '' }}">
                            {{ $category }}
                        </a>
                    @endforeach
                </div>
            </div>

            @if ($products->isEmpty())
                <div class="shop-empty-state">
                    <i class="fas fa-box-open"></i>
                    <h2 style="font-size: 2rem; margin-bottom: 12px;">Noch keine Produkte in dieser Kategorie</h2>
                    <p class="shop-copy">Bitte w&auml;hle eine andere Kategorie oder schau dir das komplette Sortiment an.</p>
                </div>
            @else
                <div class="shop-product-grid">
                    @foreach ($products as $product)
                        <article class="shop-card reveal">
                            <div class="shop-card-media">
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
                            </div>

                            <div class="shop-card-body">
                                <div class="shop-card-meta">
                                    @if ($product->badge)
                                        <span class="shop-badge">{{ $product->badge }}</span>
                                    @endif
                                    @if ($product->category)
                                        <span class="shop-muted-label">{{ $product->category }}</span>
                                    @endif
                                </div>

                                <div>
                                    <h2 class="shop-card-title">{{ $product->name }}</h2>
                                    <p class="shop-card-copy" style="margin-top: 12px;">{{ $product->short_description }}</p>
                                </div>

                                <div class="shop-price-row">
                                    <strong class="shop-price-current">{{ $product->price_formatted }}</strong>
                                    @if ($product->compare_at_price_formatted)
                                        <span class="shop-price-compare">{{ $product->compare_at_price_formatted }}</span>
                                    @endif
                                </div>

                                <div class="shop-inline-meta">
                                    <span class="shop-note">{{ $product->stock_label }}</span>
                                    <span class="shop-note">SKU: {{ $product->sku ?: 'noch offen' }}</span>
                                </div>

                                <div class="shop-inline-form">
                                    <a href="{{ route('shop.show', $product) }}" class="shop-button-light">Details</a>

                                    <form method="POST" action="{{ route('shop.cart.store', $product) }}" class="shop-inline-form">
                                        @csrf
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit" class="shop-button" {{ $product->is_in_stock ? '' : 'disabled' }}>
                                            <i class="fas fa-bag-shopping"></i>
                                            In den Warenkorb
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    @if ($featuredProducts->isNotEmpty())
        <section class="shop-section" style="padding-top: 0;">
            <div class="container shop-surface" style="padding: 32px;">
                <div class="shop-filter-bar" style="margin-bottom: 24px;">
                    <div>
                        <span class="shop-muted-label">Empfohlen</span>
                        <h2 style="font-size: 2.2rem; margin-top: 12px;">Beliebte Produkte im Shop</h2>
                    </div>
                </div>

                <div class="shop-related-grid">
                    @foreach ($featuredProducts as $featuredProduct)
                        <div class="shop-detail-card">
                            <div class="shop-inline-meta">
                                <span class="shop-badge">{{ $featuredProduct->badge ?: 'Featured' }}</span>
                                <span class="shop-note">{{ $featuredProduct->stock_label }}</span>
                            </div>
                            <h3 class="shop-panel-title" style="font-size: 1.45rem; margin-top: 18px;">{{ $featuredProduct->name }}</h3>
                            <p class="shop-copy" style="margin-top: 12px;">{{ $featuredProduct->short_description }}</p>
                            <div class="shop-form-actions" style="margin-top: 20px;">
                                <a href="{{ route('shop.show', $featuredProduct) }}" class="shop-button-light">Produktseite</a>
                                <form method="POST" action="{{ route('shop.cart.store', $featuredProduct) }}" class="shop-inline-form">
                                    @csrf
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="shop-button-secondary" {{ $featuredProduct->is_in_stock ? '' : 'disabled' }}>
                                        Direkt in den Warenkorb
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection