import './FutureClienteleSection.css'

export default function FutureClientsSection() {
  return (
    <div className='FutureClientsContainer-header'>
      <div className="FutureClientsContainer">
        <section className="FutureClientsStatsSection">
          <h1 className="FutureClientsMainHeading">
            <span className="FutureClientsHeadingRed">On parle de qui ?</span>
            <span className="FutureClientsHeadingBlack">De votre future clientèle</span>
          </h1>
          
          <p className="FutureClientsDescription">
            Notre communauté ? Des milliers de passionnés qui ne se contentent pas de regarder un événement... ils veulent le vivre à fond !
            <br />
            Ce sont des curieux, des aventuriers et des gens qui aiment se faire plaisir. Ils sont déjà en mode "recherche". À vous de jouer.
          </p>

          {/* Decorative curved lines */}
          <img 
            src="/advert-info/Fluid_shape2_section2.png" 
            alt="" 
            className="FutureClientsDecorativeLineLeft"
          />
          <img 
            src="/advert-info/Fluid_shape_section2.png" 
            alt="" 
            className="FutureClientsDecorativeLineRight"
          />

          <div className="FutureClientsStatsRow">
            <div className="FutureClientsStatCard">
              <div className="FutureClientsIconWrapper">
                <img src="/advert-info/Asset 2.svg" alt="" className="FutureClientsIcon"/>
              </div>
              <div className="FutureClientsStatNumber">85%</div>
              <div className="FutureClientsStatLabel">
                Planifient leurs activités<br />autour de l'événement
              </div>
            </div>

            <div className="FutureClientsStatCard">
              <div className="FutureClientsIconWrapper">
                <img src="/advert-info/Asset 3.svg" alt="" className="FutureClientsIcon" />
              </div>
              <div className="FutureClientsStatNumber">70€</div>
              <div className="FutureClientsStatLabel">
                Prêts à dépenser pour<br />bien manger et dormir
              </div>
            </div>

            <div className="FutureClientsStatCard">
              <div className="FutureClientsIconWrapper">
                <img src="/advert-info/Asset 4.svg" alt="" className="FutureClientsIcon" />
              </div>
              <div className="FutureClientsStatNumber">3/4</div>
              <div className="FutureClientsStatLabel">
                Consultent le site<br />sur mobile sur place
              </div>
            </div>

            <div className="FutureClientsStatCard">
              <div className="FutureClientsIconWrapper">
                <img src="/advert-info/Asset 6.svg" alt="" className="FutureClientsIcon"/>
              </div>
              <div className="FutureClientsStatNumber">90%</div>
              <div className="FutureClientsStatLabel">
                Recherchent 'où manger/<br />que faire' près de l'événement
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}