@extends('layouts.app')

@section('title', 'Ulfat Collection - Handmade Paintings & Custom Wall Art')

@section('content')
    <!-- Hero Section -->
    <section class="hero-section" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('{{ asset('images/hero-bg.jpg') }}') center/cover no-repeat; height: 80vh;">
        <div class="container h-100 d-flex align-items-center">
            <div class="text-white text-center w-100">
                <h1 class="display-3 fw-bold">Turn Your Walls Into Art</h1>
                <p class="lead">Discover handmade paintings, custom artwork, and elegant wall decor created with creativity and passion.</p>
                <div class="mt-4">
                    <a href="{{ route('shop') }}" class="btn btn-lg btn-outline-light me-3">Shop Now</a>
                    <a href="{{ route('custom.order') }}" class="btn btn-lg btn-light">Order Custom Painting</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Collections -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Featured Collections</h2>
            <div class="row g-4">
                @foreach($featuredCategories as $category)
                <div class="col-md-4 col-lg-2">
                    <a href="{{ route('shop', ['category' => $category->id]) }}" class="text-decoration-none">
                        <div class="card border-0 shadow-sm text-center">
                            @if($category->image)
                                <img src="{{ asset('storage/'.$category->image) }}" class="card-img-top" alt="{{ $category->name }}">
                            @else
                                <div class="bg-light p-4">No Image</div>
                            @endif
                            <div class="card-body">
                                <h5 class="card-title">{{ $category->name }}</h5>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Best Selling Paintings -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Best Selling Paintings</h2>
            <div class="row g-4">
                @foreach($bestSelling as $product)
                <div class="col-md-6 col-lg-3">
                    @include('partials.product-card', ['product' => $product])
                </div>
                @endforeach
            </div>
            <div class="text-center mt-4">
                <a href="{{ route('shop') }}" class="btn btn-outline-dark">View All</a>
            </div>
        </div>
    </section>

    <!-- New Arrivals -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">New Arrivals</h2>
            <div class="row g-4">
                @foreach($newArrivals as $product)
                <div class="col-md-6 col-lg-3">
                    @include('partials.product-card', ['product' => $product])
                </div>
                @endforeach
            </div>
            <div class="text-center mt-4">
                <a href="{{ route('shop') }}" class="btn btn-outline-dark">View All</a>
            </div>
        </div>
    </section>

    <!-- Custom Painting Promotion -->
    <section class="py-5 bg-dark text-white">
        <div class="container text-center">
            <h2>Create Your Own Masterpiece</h2>
            <p class="lead">Order a custom painting tailored to your vision. From portraits to abstract, we bring your ideas to life.</p>
            <a href="{{ route('custom.order') }}" class="btn btn-outline-light btn-lg mt-3">Request Custom Artwork</a>
        </div>
    </section>

    <!-- Why Choose Us -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Why Choose Ulfat Collection</h2>
            <div class="row g-4 text-center">
                <div class="col-md-4">
                    <i class="fas fa-paintbrush fa-3x mb-3"></i>
                    <h5>100% Handmade</h5>
                    <p>Every piece is crafted with passion by skilled artists.</p>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-certificate fa-3x mb-3"></i>
                    <h5>Premium Quality</h5>
                    <p>High-quality materials and attention to detail.</p>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-lock fa-3x mb-3"></i>
                    <h5>Secure Checkout</h5>
                    <p>Safe and secure payment processing.</p>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-star fa-3x mb-3"></i>
                    <h5>Unique Artwork</h5>
                    <p>Exclusive designs you won't find elsewhere.</p>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-pen-fancy fa-3x mb-3"></i>
                    <h5>Custom Orders Available</h5>
                    <p>Personalized artwork to match your style.</p>
                </div>
                <div class="col-md-4">
                    <i class="fas fa-box fa-3x mb-3"></i>
                    <h5>Safe Packaging</h5>
                    <p>Carefully packed to ensure safe delivery.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Showcase -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Art in Interiors</h2>
            <div class="row g-3">
                <!-- Add gallery images from settings or a separate gallery table -->
                <div class="col-md-4"><img src="{{ asset('images/gallery1.jpg') }}" class="img-fluid rounded" alt="Gallery"></div>
                <div class="col-md-4"><img src="{{ asset('images/gallery2.jpg') }}" class="img-fluid rounded" alt="Gallery"></div>
                <div class="col-md-4"><img src="{{ asset('images/gallery3.jpg') }}" class="img-fluid rounded" alt="Gallery"></div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">How It Works</h2>
            <div class="row text-center g-4">
                <div class="col-md-3">
                    <div class="step-number">1</div>
                    <h5>Choose Artwork</h5>
                    <p>Browse our collection or request custom design.</p>
                </div>
                <div class="col-md-3">
                    <div class="step-number">2</div>
                    <h5>Place Order</h5>
                    <p>Select size, framing, and checkout securely.</p>
                </div>
                <div class="col-md-3">
                    <div class="step-number">3</div>
                    <h5>We Prepare With Care</h5>
                    <p>Our artists create and pack your art with love.</p>
                </div>
                <div class="col-md-3">
                    <div class="step-number">4</div>
                    <h5>Delivered to Your Door</h5>
                    <p>Receive your masterpiece and enjoy.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">What Our Customers Say</h2>
            <div class="row g-4">
                @foreach($testimonials as $testimonial)
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body">
                            <div class="mb-3">
                                @for($i=1; $i<=5; $i++)
                                    @if($i <= $testimonial->rating)
                                        <i class="fas fa-star text-warning"></i>
                                    @else
                                        <i class="far fa-star text-warning"></i>
                                    @endif
                                @endfor
                            </div>
                            <p class="card-text">"{{ $testimonial->content }}"</p>
                            <div class="mt-3">
                                <strong>{{ $testimonial->name }}</strong>
                                @if($testimonial->position)<br><small>{{ $testimonial->position }}</small>@endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="py-5 bg-dark text-white">
        <div class="container text-center">
            <h3>Subscribe to Our Newsletter</h3>
            <p>Get updates on new arrivals, exclusive offers, and art tips.</p>
            <form action="{{ route('newsletter.subscribe') }}" method="POST" class="row justify-content-center">
                @csrf
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="email" name="email" class="form-control" placeholder="Your email address" required>
                        <button class="btn btn-outline-light" type="submit">Subscribe</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection