/* global React, GamacaPrimitives */
const { Btn } = GamacaPrimitives;

function Hero() {
  return (
    <section className="pt-40 pb-24 bg-white relative overflow-hidden">
      <div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-stone-100 opacity-50 blur-3xl"></div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <span className="inline-block py-1 px-3 rounded-full bg-stone-100 text-stone-600 text-xs font-semibold tracking-wide uppercase mb-6 border border-stone-200">
          Fractional AI Lead &amp; Stratégie
        </span>
        <h1 className="text-5xl tracking-tight font-bold text-stone-900 sm:text-6xl md:text-7xl mb-8 leading-tight" style={{fontFamily: "'Inter', sans-serif", letterSpacing: '-0.025em'}}>
          Conseil &amp; ingénierie IA<br />
          <span className="gamaca-gradient">pour entreprises</span>
        </h1>
        <p className="mt-4 max-w-md mx-auto text-base text-stone-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl font-light">
          Une <strong>stratégie IA</strong> claire d'abord. Ancrée dans les <strong>besoins réels de vos utilisateurs</strong>. La technologie n'est qu'une variable d'ajustement.
        </p>
        <div className="mt-10 max-w-md mx-auto sm:flex sm:justify-center gap-4">
          <Btn href="#contact" variant="primary">Démarrer un projet</Btn>
          <Btn href="#services" variant="secondary" className="mt-3 sm:mt-0">Voir l'offre</Btn>
        </div>
      </div>
    </section>
  );
}

window.GamacaHero = Hero;