@extends('layouts.app')
@section('seo')
    <meta name="description"
          content="Dans le monde entier, de nombreux producteurs nous font confiance et nous confient la distribution de leurs produits.">
    <meta name="title" content="Diffusions Aromatiques - Nos distributeurs">
@endsection

@section('pageTitle', __("Nos engagements RSE"))

@section('menu')
    <x-menu background="bg-white"></x-menu>
@endsection

@section('content')
    <div>
        <div class="relative overflow-hidden h-96 text-white h-110"
             style="background-image: url('/images/certifications/bg-da.png');background-size: 100%; background-position: 50% 45%">
            {{\Diglactic\Breadcrumbs\Breadcrumbs::render('rse')}}
        </div>
        <section class="py-20 max-w-6xl mx-auto">
            <x-container class="flex flex-col items-center">
                <h1 class="text-blue uppercase text-5xl leading-none font-bold w-full mb-10">@lang('rse.title')</h1>
                <h2 class="w-full text-blue-contrast mb-2 font-semibold">@lang('Notre approche collective')</h2>
                <div class="text-blue text-xl text-justify">
                    @lang('rse.content')
                </div>
            </x-container>
        </section>
        <section class="mb-30">
            <x-container class="flex flex-col items-center gap-6 ">
                <div class="text-center relative">
                    <h2 class="text-blue uppercase text-2xl leading-none font-bold mb-1">
                        @lang('rse.more')
                    </h2>
                    <p class="uppercase mt-1 text-blue-pastel">@lang('Notre politique RSE')</p>
                    <img src="/images/fleche.png" alt="arrow - diffusions aromatiques" class="absolute top-2 -left-20 w-16">
                </div>
                @if(app()->getLocale() === "en")
                <a href="documents/rse/rapport_rse_2023.pdf" target="_blank"
                   class="flex-shrink-0 border border-blue-contrast text-blue-contrast hover:border-none hover:bg-blue-contrast hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                    {{ __('Télécharger') }}</a>
                @else
                    <a href="documents/rse/rapport_rse_2023.pdf" target="_blank"
                       class="flex-shrink-0 border border-blue-contrast text-blue-contrast hover:border-none hover:bg-blue-contrast hover:text-white transition-colors py-2.5 px-5 rounded-full inline-flex items-center space-x-3 ">
                        {{ __('Télécharger') }}</a>
                @endif
            </x-container>
        </section>
    </div>
@endsection