@extends('public.layout.app')
@section('title','Services | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">
        <div class="pill mb-3"><i class="fa-solid fa-sparkles brand-dot"></i> Services</div>
        <h2 class="fw-bold mb-2">Everything you need for perfect finishing</h2>
        <p class="muted mb-4">From product selection to application guidance — we support your project.</p>

        <div class="row g-3">
            @foreach([
                ['t'=>'Color Consultation','d'=>'Choose best colors for lighting & room size.','i'=>'fa-palette'],
                ['t'=>'Product Recommendation','d'=>'Best paint type for interior/exterior surfaces.','i'=>'fa-handshake'],
                ['t'=>'Surface Preparation Guide','d'=>'Primer/putty selection with steps.','i'=>'fa-layer-group'],
                ['t'=>'Site Support','d'=>'Guidance for painters and contractors.','i'=>'fa-helmet-safety'],
                ['t'=>'Bulk Supply','d'=>'For projects, shops and contractors.','i'=>'fa-truck-fast'],
                ['t'=>'After-Sales Care','d'=>'Maintenance tips for long durability.','i'=>'fa-shield-heart'],
            ] as $s)
            <div class="col-md-6 col-lg-4">
                <div class="cardx p-3 h-100">
                    <div class="d-flex gap-2 align-items-center">
                        <div class="btn btn-outline-brand btn-sm"><i class="fa-solid {{ $s['i'] }}"></i></div>
                        <div class="fw-bold">{{ $s['t'] }}</div>
                    </div>
                    <div class="muted mt-2">{{ $s['d'] }}</div>
                    <div class="mt-3">
                        <a class="btn btn-outline-brand btn-sm" href="{{ route('front.contact') }}">Request Service</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>
@endsection