@extends('layouts.public')
@section('content')
<main class="inner-page">
    <section class="inner-hero compact-hero">
        <div>
            <span class="section-badge">Services</span>
            <h1>Institutional Setup Solutions</h1>
            <p>Consultative support for laboratory, medical training, education infrastructure, GIS and custom institutional requirements.</p>
        </div>
    </section>
    <section class="inner-section">
        <div class="service-grid">
            @foreach($services as $service)
                <article class="service-card refined-service-card">
                    <div class="refined-card-image">
                        <img src="{{ $service->image_url ?: '/assets/images/products/lab-equipment.svg' }}" alt="{{ $service->title }}" loading="lazy">
                    </div>
                    <div class="refined-card-body">
                        <h2>{{ $service->title }}</h2>
                        <p>{{ $service->summary }}</p>
                        <a href="{{ route('services.show', $service->slug) }}">View service <span>→</span></a>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
</main>
@endsection