@extends('layouts.site')
@section('title', 'Granite, Marble & Terrazzo Products | VIPO Granite Uganda')
@section('description', 'Explore granite, marble and terrazzo for kitchens, floors, feature walls and architectural stonework in Kampala. Ask VIPO about available colours and finishes.')
@section('content')
@include('site.partials.page-hero', ['eyebrow'=>$copy['hero_eyebrow'], 'heading'=>$copy['hero_heading'], 'intro'=>$copy['hero_intro'], 'image'=>$copy['hero_image']])
<section class="section"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['catalog_eyebrow'] }}</span><h2 class="section-title">{{ $copy['catalog_heading'] }}</h2><p class="section-copy">{{ $copy['catalog_intro'] }}</p></div></div>
    <div class="material-grid catalog-index-grid">@forelse($materials as $material)
        <a href="{{ route('materials.show',$material->slug) }}" class="material-card"><div class="image img-zoom"><img src="{{ $material->image_url ?: asset('media/stone.jpg') }}" alt="{{ $material->title }} visual reference" loading="lazy"><span class="image-number">{{ sprintf('%02d',$loop->iteration) }}</span></div><div class="material-info"><div><small>{{ $material->category ?: 'Stone product' }}</small><h3>{{ $material->title }}</h3><p>{{ $material->summary }}</p><span class="text-link">View product details ↗</span></div><span>↗</span></div></a>
    @empty<p>Ask our team about current stone products and finishes.</p>@endforelse</div>
    <p class="editorial-note">{{ $copy['catalog_note'] }}</p><a href="{{ route('gallery') }}" class="text-link">Explore the stone photo & video gallery ↗</a>
</div></section>
<section class="section guidance-section"><div class="wrap two-grid"><div><span class="eyebrow">{{ $copy['guide_eyebrow'] }}</span><h2 class="section-title">{{ $copy['guide_heading'] }}</h2><p class="section-copy">{{ $copy['guide_intro'] }}</p></div><div class="guidance-list">
    @foreach(range(1,3) as $n)<div><span>{{ sprintf('%02d',$n) }}</span><div><h3>{{ $copy['guide_'.$n.'_heading'] }}</h3><p>{{ $copy['guide_'.$n.'_text'] }}</p></div></div>@endforeach
</div></div></section>
@include('site.partials.cta')
@endsection