@extends('frontend.layouts.app')

@section('title', 'Home Page')
@section('content')
    <section class="hero">
        <div class="hero-content">
            <h1>Curated for You.</h1>
            <p>Discover our exclusive collection of premium products.</p>
            <a href="#" class="btn">Explore Now</a>
        </div>
    </section>
    <main class="container">
        <h2 class="section-title">Our Best Sellers</h2>
        <div class="product-grid row">
            @foreach ($products as $product)
                <div class="product-card col-md-4">
                    {{-- Product Image --}}
                    <img src="{{ asset($product->image) }}" alt="{{ $product->name }}">
                    
                    <div class="product-info">
                        <h3>{{ $product->name }}</h3>
                        
                        {{-- Product Description --}}
                        <p>{{ Str::limit($product->description, 50) }}</p>

                        {{-- Product Price --}}
                        <div class="price">₹{{ number_format($product->price, 2) }}</div>
                        
                        <a href="{{ url('product/' . $product->slug) }}" class="btn">View Details</a>
                    </div>
                </div>
            @endforeach
            
        </div>
    </main>

@endsection