@extends('layouts.frontend')

@section('title', 'Nos stratégies')

@section('content')
<!-- En-tête -->
<section class="hero-section">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-4">Nos stratégies</h1>
        <p class="lead mb-4">cinq stratégies de gouvernance sécuritaire agroalimentaire</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 stratégies</li>
            </ol>
        </nav>
    </div>
</section>

    <!-- Services Section -->
    <section class="services-section">
        <div class="container">
            <h2 class="section-title">Stratégies de gouvernance sécuritaire</h2>
            <p class="lead">AGRIPEACE utilise une méthode qui favorise les triples effets de la justice restaurative dont les résultats de recherche débouchent sur les stratégies de gouvernance sécuritaire agroalimentaire suivantes :</p>
            <div class="row g-4">
                @foreach ( $strategies as $key=>$strategy )

                <!-- Service 1 -->
                <div class="col-lg-4 col-md-6 d-flex">
                    <div class="card service-card w-100">
                        <div class="number-icon rounded-circle text-white d-flex align-items-center justify-content-center  mx-auto" style="width: 50px; height: 50px; font-size: 1.5rem; background: #8b5a2b">
                            {{ $key+1 }}
                        </div>
                        <h5>{{ Str::limit(strip_tags($strategy->title), 100, '...') }}</h5>
                        <a href="{{ route('strategy',$strategy) }}" 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