@extends('layouts.frontend')

@section('title', 'Accueil')

@section('content')
    <!-- Hero Slider Section -->
    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button"data-bs-target="#heroCarousel"data-bs-slide-to="2"aria-label="Slide3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div style="height: 600px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{{ asset('images/slider-4.jpeg') }}') center/cover no-repeat;"></div>
                <div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0; bottom: 0;">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h2 class="mb-4">Nous sommes</h2>
                                <h1 class="fw-bold mb-4">AGRIPEACE</h1>
                                <p class="lead mb-5">
                                   Un cabinet Consulting multidisciplinaire engagé faveur de la construction de la paix, de la justice sociale et du développement durable.
                                </p>
                                <div class="d-flex justify-content-center gap-3">
                                    <a href="{{ route('who-we-are') }}" class="btn btn-primary btn-lg rounded-pill px-4">En Savoir Plus</a>
                                    {{-- <a href="" class="btn btn-outline-light btn-lg rounded-pill px-4">Nous contacter</a> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div style="height: 600px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{{ asset('images/slider-2.jpeg') }}') center/cover no-repeat;"></div>
                <div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0; bottom: 0;">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h1 class="fw-bold mb-4">Chez AGRIPEACE</h1>
                                <h2 class="mb-4">Notre attention particulière</h2>
                                <p class="lead mb-5">est portée à la résilience des communautés rurales affectées par les conflits dans l’Est de la République Démocratique du Congo</p>
                                <div class="d-flex justify-content-center gap-3">
                                    <a href="" class="btn btn-primary btn-lg rounded-pill px-4">Nos Services</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div style="height: 600px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('{{ asset('images/slider-5.jpeg') }}') center/cover no-repeat;"></div>
                <div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0; bottom: 0;">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h1 class="fw-bold mb-4">Chez AGRIPEACE</h1>
                                <h2 class="mb-4">travaille pour restaurer le tissu social</h2>
                                <p class="lead mb-5">et promouvoir un développement durable qui respecte la dignité humaine et les droits fondamentaux tels que le droit à l’alimentation, le droit à la santé, le droit à l’éducation, le droit à la paix et le droit à une gouvernance équitable des ressources naturelles</p>
                                <div class="d-flex justify-content-center gap-3">
                                    <a href="" class="btn btn-primary btn-lg rounded-pill px-4">Nos Services</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Précédent</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Suivant</span>
        </button>
    </div>

    <!-- Key Focus Areas -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold" style="color: var(--primary-color);">Qui sommes-nous?</h2>
                <p class="lead">{{ \Illuminate\Support\Str::words(strip_tags($company->about), 30, '...') }}</p>
            </div>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body text-center p-4">
                            <div class="mb-4">
                                <i class="fas fa-bullseye fa-3x" style="color: var(--primary-color);"></i>
                            </div>
                            <h4 class="card-title">Mission</h4>
                            <p class="card-text">{!! $company->mission !!}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body text-center p-4">
                            <div class="mb-4">
                                <i class="fas fa-eye fa-3x" style="color: var(--primary-color);"></i>
                            </div>
                            <h4 class="card-title">Vision</h4>
                            <p class="card-text">{!! $company->vision !!}</p>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-body text-center p-4">
                            <div class="mb-4">
                                <i class="fas fa-users fa-3x" style="color: var(--primary-color);"></i>
                            </div>
                            <h4 class="card-title">Autonomisation Communautaire</h4>
                            <p class="card-text">Bâtir des communautés rurales fortes grâce à l'éducation, aux ressources et au développement participatif.</p>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </section>

        <!-- Call to Action -->
    <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">Coopération et Partenariat</h2>
                    <p class="lead mb-0">{!! $company->cooperation !!}</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>

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold" style="color: var(--primary-color);">Ce que nous faisons</h2>
                <p class="lead">Nos actions actuelles qui transforment les communautés et apportent un véritable impact.</p>
            </div>
            <div class="row g-4">
                @foreach($services as $service)
                <div class="col-md-6 col-lg-4">
                    <div class="card service-card w-100">
                        <div class="service-icon mx-auto">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">{{ $service->title }}</h5>
                           <p class="card-text text-truncate">{{ strip_tags($service->description) }}</p>
                            <a href="{{ route('service',$service) }}" class="btn btn-sm btn-outline-primary">En Savoir Plus</a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="text-center mt-4">
                <a href="{{ route('what-we-do') }}" class="btn btn-primary rounded-pill px-4">Voir plus</a>
            </div>
        </div>
    </section>

    {{-- <!-- Featured Projects -->

    <!-- Testimonials -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold" style="color: var(--primary-color);">Success Stories</h2>
                <p class="lead">From the communities we serve</p>
            </div>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="card border-0 bg-transparent">
                                    <div class="card-body text-center">
                                        <p class="lead mb-4">"Working with Cabinet Agripeace has transformed my farm. Their expertise in sustainable practices has helped me increase yields while protecting my land for future generations."</p>
                                        <div>
                                            <h5 class="mb-1" style="color: var(--secondary-color);">Emmanuel Kouassi</h5>
                                            <p class="small text-muted">Cocoa Farmer, Western Region</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="card border-0 bg-transparent">
                                    <div class="card-body text-center">
                                        <p class="lead mb-4">"The women's agricultural cooperative formed with help from Cabinet Agripeace has given us a voice and economic independence. We are now leaders in our community."</p>
                                        <div>
                                            <h5 class="mb-1" style="color: var(--secondary-color);">Aminata Diallo</h5>
                                            <p class="small text-muted">Cooperative Leader, Eastern Region</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="card border-0 bg-transparent">
                                    <div class="card-body text-center">
                                        <p class="lead mb-4">"The legal support provided by Cabinet Agripeace helped our community secure land rights that had been disputed for generations. Now we can farm with confidence."</p>
                                        <div>
                                            <h5 class="mb-1" style="color: var(--secondary-color);">Jean-Pierre Mensah</h5>
                                            <p class="small text-muted">Community Elder, Northern Region</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners and Supporters -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold" style="color: var(--primary-color);">Our Partners</h2>
                <p class="lead">Working together for agricultural justice</p>
            </div>
            <div class="row align-items-center">
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner1.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner2.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner3.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner4.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner5.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
                <div class="col-6 col-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('images/partner6.png') }}" class="img-fluid" alt="Partner Logo">
                </div>
            </div>
        </div>
    </section> --}}


@endsection