@extends('layouts.public')

@section('content')
<div class="grid md:grid-cols-2 gap-10 items-center">
    <div>
        <h1 class="text-4xl font-extrabold leading-tight">
            Boost your results with our product
        </h1>
        <p class="mt-4 text-gray-600">
            Simple landing page with product video, login, cart, and checkout (FPX ready).
        </p>

        {{-- <div class="mt-6 flex gap-3">
            <a href="#products" class="px-5 py-3 rounded bg-black text-white">View Product</a>
            @guest
                <a href="{{ route('register') }}" class="px-5 py-3 rounded border">Create account</a>
            @endguest
        </div> --}}
    </div>

    <div class="bg-white rounded-xl shadow p-4">
        <div class="aspect-video w-full bg-gray-200 rounded overflow-hidden flex items-center justify-center">
            <span class="text-gray-600 text-sm">Hero Video / Image Placeholder</span>
        </div>
        <p class="mt-3 text-sm text-gray-500">
            Replace this with your best marketing video/image.
        </p>
    </div>
</div>

<hr class="my-12">

<h2 id="products" class="text-2xl font-bold mb-4">Products</h2>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach($products as $product)
        <a href="{{ route('products.show', $product->slug) }}" class="block bg-white rounded-xl shadow hover:shadow-lg transition p-5">
            <div class="aspect-video bg-gray-100 rounded mb-4"></div>
            <div class="font-semibold">{{ $product->name }}</div>
            <div class="text-sm text-gray-600 mt-1">{{ $product->short_description }}</div>
            <div class="mt-3 font-bold">{{ $product->price_formatted }}</div>
        </a>
    @endforeach
</div>
@endsection