@extends('layouts.app')

@section('title', 'Elegant Home Décor & Decorative Pieces')

@section('content')

    <section class="hero-section py-5 py-lg-6">
        <div class="container py-4">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <span class="hero-eyebrow">Curated Home Décor</span>
                    <h1 class="font-serif mt-2 mb-3">Bring warmth &amp; character to every room</h1>
                    <p class="text-muted-soft fs-5 mb-4">Discover an elegant collection of decorative pieces, vases, wall art, lighting and accents — thoughtfully curated for modern Pakistani homes.</p>
                    <div class="d-flex gap-3">
                        <a href="{{ route('shop.index') }}" class="btn btn-terracotta btn-lg px-4">Shop the Collection</a>
                        <a href="{{ route('shop.index') }}" class="btn btn-outline-terracotta btn-lg px-4">New Arrivals</a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="https://placehold.co/700x560/f0e8dc/2b2622?text=Home+Heaven+Decors+PK" class="img-fluid rounded shadow-sm" alt="Home Heaven Decors">
                </div>
            </div>
        </div>
    </section>

    <section class="py-5" id="categories">
        <div class="container">
            <div class="section-title">
                <span class="eyebrow">Explore</span>
                <h2>Shop by Category</h2>
                <div class="section-divider"></div>
            </div>
            <div class="row g-4">
                @foreach($categories as $category)
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="{{ route('shop.index', ['category' => $category->slug]) }}" class="category-card">
                            <img src="{{ $category->image ? asset('storage/'.$category->image) : 'https://placehold.co/400x400/e8dcc8/2b2622?text='.urlencode($category->name) }}" alt="{{ $category->name }}">
                            <div class="category-overlay">
                                <p class="category-name">{{ $category->name }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @if($featuredProducts->count())
    <section class="py-5 bg-cream-dark">
        <div class="container">
            <div class="section-title">
                <span class="eyebrow">Handpicked</span>
                <h2>Featured Pieces</h2>
                <div class="section-divider"></div>
            </div>
            <div class="row g-4">
                @foreach($featuredProducts as $product)
                    <div class="col-6 col-md-4 col-lg-3">
                        @include('partials.product-card', ['product' => $product])
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <section class="py-5" id="about">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6">
                    <img src="{{ asset('storage/branding/vase3.jpg') }}" class="img-fluid rounded shadow-sm" alt="About Home Heaven Decors PK" style="width:100%;max-height:520px;object-fit:cover;">
                </div>
                <div class="col-lg-6">
                    <span class="hero-eyebrow">Our Story</span>
                    <h2 class="font-serif mt-2 mb-3">Pakistan First 🇵🇰</h2>
                    <p class="text-muted-soft fs-6">We are based on selling elegant &amp; beautiful home &amp; office decors at reasonable prices. Every piece in our collection is selected with care — blending timeless elegance with modern simplicity. Cash on Delivery only, across Pakistan.</p>
                    <div class="row mt-4 g-3">
                        <div class="col-6">
                            <i class="bi bi-truck fs-3 text-terracotta"></i>
                            <p class="small mb-0 mt-2">Nationwide Delivery</p>
                        </div>
                        <div class="col-6">
                            <i class="bi bi-cash-coin fs-3 text-terracotta"></i>
                            <p class="small mb-0 mt-2">Cash on Delivery</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($newArrivals->count())
    <section class="py-5 bg-cream-dark">
        <div class="container">
            <div class="section-title">
                <span class="eyebrow">Just In</span>
                <h2>New Arrivals</h2>
                <div class="section-divider"></div>
            </div>
            <div class="row g-4">
                @foreach($newArrivals as $product)
                    <div class="col-6 col-md-4 col-lg-3">
                        @include('partials.product-card', ['product' => $product])
                    </div>
                @endforeach
            </div>
            <div class="text-center mt-4">
                <a href="{{ route('shop.index') }}" class="btn btn-outline-terracotta px-4">View All Products</a>
            </div>
        </div>
    </section>
    @endif

@endsection
