@extends('layouts.app')

@section('content')
    <x-page-hero title="Products" :subtitle="config('products.intro')" :breadcrumbs="[['label' => 'Products']]" />

    <section class="section">
        <div class="container-page grid gap-6 md:grid-cols-3">
            @foreach (config('products.items') as $slug => $product)
                <x-card :title="$product['name']" :eyebrow="$product['full_name']" :href="route('products.show', $slug)" link-label="View details">
                    <x-slot:icon><x-product-icon :product="$product" size="lg" /></x-slot:icon>
                    <p>{{ $product['summary'] }}</p>
                    <p class="mt-3 text-xs text-slate-500">Ideal for: {{ $product['ideal_for'] }}</p>
                </x-card>
            @endforeach
        </div>
    </section>
@endsection