@extends('layouts.frontend')

@section('title', 'Ce que nous faisons')

@section('content')
<!-- En-tête -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Nos activités</h1>
        <p class="lead mb-4">Nos activités s’articulent autour de trois axes majeurs</p>
        <nav aria-label="fil d'ariane">
            <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Nos activités</li>
            </ol>
        </nav>
    </div>
</section>

    <!-- Services Section -->
    <section class="services-section">
        <div class="container">
            <h2 class="section-title">Nos activités principales</h2>

            <div class="row g-4">
                @foreach ( $services as $service )

                <!-- Service 1 -->
                <div class="col-lg-4 col-md-6 d-flex">
                    <div class="card service-card w-100">
                        <div class="service-icon mx-auto">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <h5>{{ Str::limit(strip_tags($service->title), 100, '...') }}</h5>
                        <a href="{{ route('service',$service) }}" class="btn btn-outline-primary mt-3">En savoir plus</a>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </section>

    <section class="py-5" style="background-color: var(--primary-color); color: white;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-4 mb-lg-0">
                    <h2 class="fw-bold">Quid Salon Agripeace&nbsp;?</h2>
                    <p class="lead mb-0">Un cadre de rencontre nationale, régionale et internationale adaptée aux décideurs.</p>

                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="{{ route('contact') }}" class="btn btn-light btn-lg me-2 mb-2 mb-md-0">Contactez-nous</a>
                </div>
            </div>
        </div>
    </section>

@endsection