function Hero() {
  const openWA = () => window.open(window.WHATSAPP_URL, '_blank');
  const goProjects = () => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' });

  return (
    <section
      id="hero"
      className="relative min-h-screen flex items-center pt-24 pb-16"
      style={{
        backgroundImage: `linear-gradient(135deg, rgba(10,28,50,0.92), rgba(21,47,77,0.78)), url(${window.ASSETS.frontal})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <div className="container mx-auto px-4">
        <div className="max-w-4xl">
          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-1.5 mb-6 animate-fade-in">
            <span className="w-1.5 h-1.5 rounded-full bg-accent"></span>
            <span className="text-xs font-semibold tracking-widest uppercase text-white/90">
              Desde 1988 · Uberlândia, MG
            </span>
          </div>

          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white leading-[1.05] tracking-tight mb-6 animate-fade-in">
            Mini escavadeira <span className="text-accent">Bobcat E10</span>
            <br />
            <span className="text-white/95">
              para obras onde máquinas grandes não entram.
            </span>
          </h1>

          <p className="text-lg md:text-xl text-white/85 max-w-2xl leading-relaxed mb-10 animate-fade-in">
            Escavações rápidas e precisas em quintais, garagens, interiores de casas, fundações e áreas
            de difícil acesso em Uberlândia e região.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 sm:items-center animate-fade-in">
            <button
              onClick={openWA}
              className="inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent/90 transition-smooth text-white font-bold rounded-lg px-7 py-4 shadow-glow text-base"
            >
              <Icon name="message-circle" size={20} />
              Solicitar orçamento pelo WhatsApp
            </button>
            <button
              onClick={goProjects}
              className="inline-flex items-center justify-center gap-2 border-2 border-white/40 hover:bg-white hover:text-primary text-white font-semibold rounded-lg px-7 py-4 transition-smooth text-base"
            >
              <Icon name="play-circle" size={20} />
              Ver obras realizadas
            </button>
          </div>

          <div className="mt-12 flex flex-wrap gap-x-6 gap-y-3 text-white/80 text-sm animate-fade-in">
            {[
              { i: 'shield-check', t: '37+ anos de experiência' },
              { i: 'map-pin', t: 'Uberlândia e região' },
              { i: 'truck', t: 'Bobcat E10 compacta · 1.180 kg' },
            ].map((b) => (
              <div key={b.t} className="flex items-center gap-2">
                <Icon name={b.i} size={16} className="text-accent" />
                <span>{b.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom fade for legibility under TrustBar */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-b from-transparent to-black/30"></div>
    </section>
  );
}

window.Hero = Hero;