// 1. IMPORTATIONS DES MODULES ET DES ASSETS
import React from 'react';

// Import de l'image de bannière principale via Webpack Encore
// Webpack génère automatiquement le bon chemin d'accès avec hachage pour le cache
import heroBg from '../../img/hero-banner.png';

/**
 * 2. COMPOSANT PRINCIPAL : Hero
 * 
 * Rôle fonctionnel et visuel :
 * - Première section visible sous le Header (zone "Above the Fold").
 * - Transmet la proposition de valeur principale de gaea21 via un titre H1 percutant.
 * - Propose un bouton d'action (Call-to-Action) guidant l'utilisateur vers la découverte de l'écosystème.
 */
export default function Hero() {
    return (
        /* 
          SECTION ENGOBANTE DU HERO :
          - className="hero-section" : applique les dimensions (hauteur minimale/100vh), 
            le positionnement d'arrière-plan (background-size: cover, background-position: center)
            et le positionnement relatif pour caler les calques enfants.
          - style={{ backgroundImage: ... }} : injection dynamique de l'URL de l'image 
            traitée par le bundler Webpack.
        */
        <section
            className="hero-section"
            style={{ backgroundImage: `url("${heroBg}")` }}
        >
            {/* 
        CALQUE D'OVERLAY SOMBRE :
        - Élément positionné en absolu couvrant toute la surface de la section.
        - Applique un gradient ou un filtre semi-transparent sombre afin d'assurer
          un contraste suffisant (normes d'accessibilité WCAG) entre le texte blanc
          et les zones claires de l'image d'arrière-plan.
      */}
            <div className="hero-overlay"></div>

            {/* 
        CONTENEUR DE CONTENU CENTRÉ :
        - Assure le centrage horizontal du bloc de texte sur la largeur maximale de la page.
        - z-index supérieur à l'overlay pour que les textes et boutons restent cliquables et visibles.
      */}
            <div className="hero-content">

                {/* 
          BLOC TEXTUEL :
          - Limite la largeur maximale du texte pour éviter qu'il ne s'étale trop sur grands écrans,
            ce qui garantit un confort de lecture optimal.
        */}
                <div className="hero-text-block">

                    {/* 
            TITRE PRINCIPAL H1 :
            - Balise unique et essentielle pour le référencement naturel (SEO).
            - Les balises <br /> forcent des retours à la ligne précis pour sculpter 
              la silhouette du texte exactement comme sur la maquette Figma.
          */}
                    <h1 className="hero-title">
                        Construire <br />
                        les infrastructures <br />
                        humaines, économiques <br />
                        et territoriales de demain
                    </h1>

                    {/* 
            PARAGRAPHE D'INTRODUCTION :
            - Résume succinctement les axes d'impact et la légitimité historique (20 ans) de gaea21.
          */}
                    <p className="hero-description">
                        Depuis plus de 20 ans, gaea21 relie insertion professionnelle, santé mentale,
                        économie locale, transition durable, recherche appliquée et innovation systémique.
                    </p>

                    {/* 
            BOUTON D'APPEL À L'ACTION (CTA) :
            - Lien d'ancrage vers la section "#ecosysteme".
            - Composé d'un label textuel et d'une flèche SVG vectorielle indiquant l'action/la direction.
          */}
                    <a href="#ecosysteme" className="btn-hero">
                        <span>Explorer l'écosystème</span>
                        {/* Flèche droite indicative (alignée horizontalement avec le texte) */}
                        <svg
                            width="18"
                            height="18"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            // Masque l'icône purement décorative des lecteurs d'écran
                            aria-hidden="true"
                        >
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </a>

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