@extends('layouts.content')

@section('content')
    <main>
        <section class="hero-section">
            <img class="hero-bg" src="{{ asset('assets/img/hero.png') }}" alt="Greenhouse interior" />
            <div class="container-custom hero-content">
                <div class="row justify-content-start">
                    <div class="col-md-7 col-lg-6 text-on-primary">
                        <h1 class="fw-bold" style="font-family: 'Montserrat'; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2;">
                            Hasil Panen Segar <br /><span class="text-tertiary-fixed">Langsung dari Greenhouse</span>
                        </h1>
                        <p class="lead mt-3 opacity-90">
                            Kami menghadirkan kualitas premium sayuran dan buah organik yang
                            ditanam dengan teknologi hidroponik modern untuk kesehatan keluarga
                            Anda.
                        </p>
                        <div class="d-flex flex-wrap gap-3 mt-4 pt-2">
                            <a href="{{ url('/product-catalog') }}"
                                class="btn btn-primary-custom text-decoration-none d-inline-flex align-items-center justify-content-center">Belanja
                                Sekarang</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-4 py-md-5 bg-surface-container">
            <div class="container-custom">
                <div class="row text-center g-4">
                    <div class="col-6 col-md-3">
                        <span class="material-symbols-outlined stat-icon">eco</span>
                        <h5 class="fw-bold text-primary-custom mt-2">100% Organik</h5>
                        <p class="text-on-surface-variant small">Tanpa Pestisida Kimia</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <span class="material-symbols-outlined stat-icon">local_shipping</span>
                        <h5 class="fw-bold text-primary-custom mt-2">Pengiriman Cepat</h5>
                        <p class="text-on-surface-variant small">Panen & Kirim di Hari Sama</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <span class="material-symbols-outlined stat-icon">verified</span>
                        <h5 class="fw-bold text-primary-custom mt-2">Kualitas Premium</h5>
                        <p class="text-on-surface-variant small">Standar Greenhouse Modern</p>
                    </div>
                    <div class="col-6 col-md-3">
                        <span class="material-symbols-outlined stat-icon">payments</span>
                        <h5 class="fw-bold text-primary-custom mt-2">Harga Terbaik</h5>
                        <p class="text-on-surface-variant small">Langsung Dari Petani</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-4 py-md-5 bg-background">
            <div class="container-custom">
                <div class="text-center mb-5">
                    <h2 class="display-6 fw-bold text-primary-custom">Kategori Produk</h2>
                    <p class="text-on-surface-variant mx-auto" style="max-width: 500px">
                        Pilih berdasarkan kebutuhan nutrisi Anda
                    </p>
                </div>
                <div class="row g-4 justify-content-center">
                    @php
                        $categoryIcons = ['eco', 'grass', 'nutrition', 'local_florist', 'spa', 'yard', 'park', 'forest', 'water_drop', 'agriculture'];
                    @endphp
                    @forelse($categories as $index => $category)
                        <div class="col-6 col-md-4 col-lg-3">
                            <a href="{{ url('/product-catalog') }}?category={{ $category->category_id }}" class="text-decoration-none">
                                <div class="category-card-home">
                                    <div class="category-icon-home">
                                        <span class="material-symbols-outlined">{{ $categoryIcons[$index % count($categoryIcons)] }}</span>
                                    </div>
                                    <h5 class="fw-bold text-primary-custom mb-1">{{ $category->category_name }}</h5>
                                    @if($category->description)
                                        <p class="text-on-surface-variant small mb-2">{{ Str::limit($category->description, 40) }}</p>
                                    @endif
                                    <span class="category-product-count">{{ $category->products_count }} Produk</span>
                                </div>
                            </a>
                        </div>
                    @empty
                        <div class="col-12 text-center text-on-surface-variant">Belum ada kategori.</div>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="py-4 py-md-5 bg-surface-container-high">
            <div class="container-custom">
                <div class="text-center mb-5">
                    <h2 class="display-6 fw-bold text-primary-custom">
                        Produk Terlaris Minggu Ini
                    </h2>
                    <p class="text-on-surface-variant mx-auto" style="max-width: 600px">
                        Dipanen pagi ini, siap menghiasi meja makan Anda dengan kesegaran
                        maksimal.
                    </p>
                </div>
                <div class="row g-4">
                    {{-- PERBAIKAN: Memastikan hanya mengambil 4 produk terlaris teratas --}}
                    @forelse($featuredProducts->take(4) as $product)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="product-card h-100 d-flex flex-column">
                                <div class="position-relative">
                                    @php
                                        $photoExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'heic'];

                                        $productPhotos = $product->media->filter(function ($mediaItem) use (
                                            $photoExtensions,
                                        ) {
                                            $ext = strtolower(pathinfo($mediaItem->file_url, PATHINFO_EXTENSION));
                                            return in_array($ext, $photoExtensions);
                                        });

                                        $displayPhoto =
                                            $productPhotos->firstWhere('is_main', true) ?? $productPhotos->first();
                                    @endphp

                                    @if ($displayPhoto)
                                        <img src="{{ $displayPhoto->file_url }}" class="product-img"
                                            alt="{{ $product->product_name }}" />
                                    @else
                                        <img src="{{ asset('assets/img/selada.png') }}" class="product-img"
                                            alt="Placeholder" />
                                    @endif

                                    {{-- PERBAIKAN: Badge tulisan TERLARIS sudah dihapus dari sini --}}
                                </div>

                                <div class="mt-3 d-flex flex-column flex-grow-1">
                                    @if ($product->reviews->count() > 0 || $product->total_sold > 0)
                                        <div class="d-flex align-items-center gap-1 mb-1">
                                            @if ($product->reviews->count() > 0)
                                                <i class="bi bi-star-fill rating-star"></i>
                                                <span
                                                    class="small text-on-surface-variant ms-1">{{ number_format($product->average_rating, 1) }}</span>
                                            @endif

                                            @if ($product->reviews->count() > 0 && $product->total_sold > 0)
                                                <span class="small text-on-surface-variant ms-1"> | </span>
                                            @endif

                                            @if ($product->total_sold > 0)
                                                <span class="small text-on-surface-variant ms-1">{{ $product->total_sold }}
                                                    Terjual</span>
                                            @endif
                                        </div>
                                    @else
                                        <div class="d-flex align-items-center gap-1 mb-1" style="visibility: hidden;">
                                            <i class="bi bi-star-fill rating-star"></i>
                                            <span class="small text-on-surface-variant ms-1">0.0</span>
                                        </div>
                                    @endif

                                    <h5 class="fw-semibold fs-6">{{ $product->product_name }}</h5>
                                    <div class="d-flex justify-content-between align-items-center mt-auto pt-3">
                                        <span class="fw-bold fs-5 text-primary-custom">
                                            @if ($product->packages->isNotEmpty())
                                                Rp {{ number_format($product->packages->min('price'), 0, ',', '.') }}
                                            @else
                                                Rp -
                                            @endif
                                        </span>
                                        @php
                                            $totalStock = $product->packages->sum('stock');
                                        @endphp
                                        @if($totalStock > 0)
                                            <a href="{{ route('product.show', $product->product_id) }}" class="btn-add-cart"
                                                style="text-decoration:none; display:flex; align-items:center; justify-content:center;">
                                                <span class="material-symbols-outlined">add_shopping_cart</span>
                                            </a>
                                        @else
                                            <span class="badge bg-secondary px-3 py-2 rounded-pill opacity-75">Habis</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center text-on-surface-variant">Belum ada produk terlaris.</div>
                    @endforelse
                </div>
                <div class="text-center mt-5">
                    <a href="{{ url('/product-catalog') }}"
                        class="btn btn-outline-secondary-border text-decoration-none">Lihat Semua Produk</a>
                </div>
            </div>
        </section>

        <section class="py-4 py-md-5 bg-primary-custom text-on-primary overflow-hidden">
            <div class="container-custom">
                <div class="row align-items-center g-5">
                    <div class="col-md-6">
                        <h2 class="display-5 fw-bold">Dari Greenhouse, Langsung ke Meja Anda</h2>
                        <p class="lead mt-3 opacity-90">
                            Kami percaya bahwa makanan sehat dimulai dari cara menanam yang benar.
                            Dengan teknologi hidroponik modern, kami menghemat penggunaan air
                            hingga 90% dan memastikan setiap helai sayuran bebas dari pestisida
                            berbahaya.
                        </p>
                        <div class="d-flex flex-wrap gap-3 mt-4">
                            <a href="{{ url('/contact') }}"
                                class="btn btn-light text-primary-custom fw-bold rounded-pill px-4 py-2 text-decoration-none d-inline-flex align-items-center justify-content-center">
                                Tentang Kami
                            </a>
                            <div class="d-flex align-items-center gap-2">
                                <span class="material-symbols-outlined">eco</span>
                                <span>Pertanian Berkelanjutan</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 position-relative">
                        <div class="rounded-4 overflow-hidden shadow-lg border-4 border-white border-opacity-25">
                            <img src="{{ asset('assets/img/hero.png') }}" alt="Greenhouse Technology"
                                class="img-fluid w-100" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection