/* 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; Strategy
        </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'}}>
          AI consulting &amp; engineering<br />
          <span className="gamaca-gradient">for enterprises</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">
          A clear <strong>AI strategy</strong> first. Grounded in your <strong>users' real needs</strong>. Technology is just an adjustment variable.
        </p>
        <div className="mt-10 max-w-md mx-auto sm:flex sm:justify-center gap-4">
          <Btn href="#contact" variant="primary">Start a project</Btn>
          <Btn href="#services" variant="secondary" className="mt-3 sm:mt-0">See our offering</Btn>
        </div>
      </div>
    </section>
  );
}

window.GamacaHero = Hero;