import React from 'react';
import { ArrowRight, CheckCircle2 } from 'lucide-react';

export const Hero = () => {
  const scrollToForm = () => {
    document.getElementById('waitlist-form')?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section className="relative pt-24 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
      {/* Background Elements - Optimized with will-change-transform and contain-content for better performance */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 contain-content">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob will-change-transform"></div>
        <div className="absolute top-0 right-1/4 w-96 h-96 bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 will-change-transform"></div>
        <div className="absolute -bottom-8 left-1/3 w-96 h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 will-change-transform"></div>
      </div>

      <div className="container mx-auto px-4 text-center relative z-10">
        {/* Badge Otimizado: Texto Novo + Correção Mobile */}
        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-50 border border-purple-100 text-brand-purple text-xs md:text-sm font-medium mb-8 max-w-full text-left">
          <span className="relative flex h-2 w-2 shrink-0">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
            <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-purple"></span>
          </span>
          <span className="whitespace-normal leading-tight">
            Mais clientes no Google com <strong>Zero</strong> esforço.
          </span>
        </div>

        <h1 className="font-heading text-4xl md:text-6xl lg:text-7xl font-bold text-gray-900 leading-[1.1] mb-6 max-w-4xl mx-auto">
          O Google do seu Salão de Beleza no <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-purple to-indigo-600">Piloto Automático</span>
        </h1>

        <p className="text-lg md:text-xl text-gray-600 mb-6 max-w-2xl mx-auto leading-relaxed">
          Atraia mais clientes sem perder tempo no celular. Cuidamos das postagens e das respostas no Google para você.
        </p>

        {/* Ancoragem de Preço - Novo bloco */}
        <div className="mb-10 flex flex-wrap items-center justify-center gap-3">
          <div className="flex items-center gap-2 text-brand-purple font-medium bg-purple-50 py-2 px-4 rounded-lg border border-purple-100 shadow-sm">
            <span className="line-through text-gray-400 text-sm">R$ 1.500 em agência</span>
            <span className="font-bold text-gray-900">A partir de R$ 97/mês</span>
          </div>
          <span className="text-xs font-bold text-green-700 bg-green-100 px-3 py-1 rounded-full border border-green-200">
            Preço de um corte ✂️
          </span>
        </div>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
          <button 
            onClick={scrollToForm}
            className="w-full sm:w-auto px-8 py-4 bg-action-green hover:bg-action-hover text-white font-bold rounded-xl shadow-lg shadow-green-500/30 transition-all transform hover:-translate-y-0.5 flex items-center justify-center gap-2 text-lg"
          >
            Quero mais clientes pelo Google
            <ArrowRight className="w-5 h-5" />
          </button>
          <p className="text-sm text-gray-500 sm:hidden mt-2">Sem cartão de crédito necessário.</p>
        </div>

        <div className="flex flex-wrap justify-center gap-4 md:gap-8 text-sm font-medium text-gray-500">
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4 text-action-green" />
            Configuração em 2 min
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4 text-action-green" />
            Cancelamento a qualquer hora
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4 text-action-green" />
            Suporte via WhatsApp
          </div>
        </div>
      </div>
    </section>
  );
};