import React from 'react';
import heroImg from '../../img/rejoindre-hero.png';

export default function ParcoursHero() {
    return (
        <section className="relative w-full min-h-[90vh] flex items-center overflow-hidden bg-[#0b1320]">
            {/* 1. Image de fond Figma */}
            <img
                src={heroImg}
                alt="Rejoindre gaea21"
                className="absolute inset-0 w-full h-full object-cover object-[70%_center] md:object-right z-0 pointer-events-none select-none"
            />

            {/* 2. Overlay sombre latéral */}
            <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/60 to-transparent z-10 pointer-events-none" />

            {/* 3. Textes Figma (REJOINDRE gaea21 + accroche) */}
            <div className="relative z-20 max-w-[1440px] w-full mx-auto px-6 md:px-12 lg:px-16 pt-24 pb-12">
                <div className="max-w-xl">
                    <h1 className="text-white text-5xl sm:text-6xl font-extrabold tracking-tight leading-none mb-6">
                        <span className="block uppercase">REJOINDRE</span>
                        <span className="block lowercase font-extrabold">gaea21</span>
                    </h1>

                    <p className="text-white/95 text-sm sm:text-base font-normal leading-relaxed drop-shadow-sm">
                        Développer des compétences.<br />
                        Acquérir de l'expérience. Construire une trajectoire.
                    </p>
                </div>
            </div>
        </section>
    );
}