import React from 'react';

// Import de l'image de la section télétravail exportée de Figma
import teletravailImg from '../../img/teletravail.png';

export default function TeletravailCompetence() {
    return (
        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
            <div className="max-w-[1240px] mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center">

                    {/* ========================================================= */}
                    {/* 1. Colonne GAUCHE : Textes et compétences (5 cols)        */}
                    {/* ========================================================= */}
                    <div className="lg:col-span-5 text-left">
                        {/* Trait vert horizontal */}
                        <div className="w-12 h-1 bg-[#4B6A4A] rounded-full mb-6" />

                        {/* Titre principal en gras/majuscules */}
                        <h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold uppercase text-[#111827] leading-tight mb-5">
                            LE TÉLÉTRAVAIL COMME COMPÉTENCE
                        </h2>

                        {/* Paragraphe d'introduction */}
                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
                            Depuis plus de vingt ans, gaea21 développe des méthodes de collaboration à distance.
                        </p>
                        <p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
                            Les participants apprennent notamment à :
                        </p>

                        {/* Liste à puces */}
                        <ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
                            {[
                                'organiser leur travail ;',
                                'gérer leur temps ;',
                                'communiquer efficacement ;',
                                'collaborer à distance ;',
                                'développer leur autonomie ;',
                                'maintenir leur efficacité dans un environnement distribué.',
                            ].map((point, idx) => (
                                <li key={idx} className="flex items-start gap-2">
                                    <span className="text-[#111827] text-xs leading-none mt-1">•</span>
                                    <span>{point}</span>
                                </li>
                            ))}
                        </ul>

                        {/* Phrase de conclusion en gras */}
                        <p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
                            Ces compétences sont aujourd’hui recherchées dans de nombreux secteurs.
                        </p>
                    </div>

                    {/* ========================================================= */}
                    {/* 2. Colonne DROITE : Visuel télétravail / visio (7 cols)    */}
                    {/* ========================================================= */}
                    <div className="lg:col-span-7 flex justify-center lg:justify-end">
                        <div className="w-full max-w-[620px] rounded-2xl overflow-hidden shadow-xs">
                            <img
                                src={teletravailImg}
                                alt="Le télétravail comme compétence chez gaea21"
                                className="w-full h-auto object-cover block select-none"
                            />
                        </div>
                    </div>

                </div>
            </div>
        </section>
    );
}