/* global React */
function Hero({ onCta }) {
  return (
    <section className="fn-hero">
      <div className="fn-hero-grid">
        <div className="fn-hero-copy">
          <span className="eyebrow">Agence FENNEC · Communication digitale CHR</span>
          <h1 className="fn-hero-title">
            Votre talent mérite<br/>
            une vitrine à la hauteur<br/>
            de votre <span className="accent">excellence</span>.
          </h1>
          <p className="lead fn-hero-lead">
            Nous aidons les professionnels du CHR et de l'artisanat à créer
            une image de marque d'excellence pour leur vitrine digitale —
            de la création de contenu à la distribution.
          </p>
          <div className="fn-hero-ctas">
            <button className="btn btn--primary" onClick={onCta}>
              Travaillons ensemble
              <img src="assets/arrow-fennec.png" alt="" className="fn-arrow"/>
            </button>
            <button className="btn btn--ghost">Voir nos réalisations →</button>
          </div>
        </div>
        <div className="fn-hero-media">
          <img src="assets/photo-beaumaniere-1.jpg" alt=""/>
          <div className="fn-hero-cap">
            <span className="caption">Baumanière · Glenn Viel · 2025</span>
          </div>
        </div>
      </div>

      <div className="fn-hero-marquee">
        <span>Glenn Viel</span><span>·</span>
        <span>Régis Marcon</span><span>·</span>
        <span>Emmanuel Renaut</span><span>·</span>
        <span>Pierre Gagnaire</span><span>·</span>
        <span>Mauro Colagreco</span><span>·</span>
        <span>Dominique Crenn</span><span>·</span>
        <span>Marc Veyrat</span><span>·</span>
        <span>Alexandre Mazzia</span><span>·</span>
        <span>Édouard Loubet</span><span>·</span>
        <span>Bocuse d'Or</span><span>·</span>
        <span>Baumanière</span><span>·</span>
        <span>Le Phébus</span>
      </div>
    </section>
  );
}

window.Hero = Hero;