import { Button } from "@/components/ui/button";
import { CheckCircle2, Phone, ArrowRight } from "lucide-react";

const Hero = () => {
  return (
    <section 
      className="relative min-h-screen flex items-center justify-center text-center px-4"
      style={{
        backgroundImage: "url('/lovable-uploads/f8f08a1a-0132-4376-af8a-c5bb86f0627e.png')",
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat"
      }}
    >
      {/* Overlay */}
      <div className="absolute inset-0 hero-overlay"></div>
      
      {/* Content */}
      <div className="relative z-10 max-w-4xl mx-auto">
        <h1 className="text-display-xl md:text-6xl lg:text-7xl font-display font-bold text-cream mb-6 leading-tight">
          Trusted CPA Services in Corpus Christi, TX
        </h1>
        
        <p className="text-body-lg md:text-xl text-cream/90 mb-8 max-w-2xl mx-auto leading-relaxed">
          From tax planning to business advisory, we provide discreet, tailored guidance for long-term financial confidence.
        </p>
        
        {/* CTAs */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
          <Button 
            size="lg" 
            className="bg-cream text-forest hover:bg-cream/90 btn-shadow text-lg px-8 py-3 rounded-2xl"
          >
            Schedule Free Consultation
            <ArrowRight className="ml-2 w-5 h-5" />
          </Button>
          <Button 
            variant="outline" 
            size="lg"
            className="border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl"
            onClick={() => window.open('tel:+13618543711')}
          >
            <Phone className="mr-2 w-5 h-5" />
            Call (361) 854-3711
          </Button>
        </div>
        
        {/* Trust Badges */}
        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center text-cream/80 text-sm">
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-brass" />
            <span>20+ Years Experience</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-brass" />
            <span>500+ Clients</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-brass" />
            <span>IRS Representation</span>
          </div>
        </div>
        
        {/* Microcopy */}
        <p className="text-cream/60 text-sm mt-6">
          No obligation • Same-day response • Confidential
        </p>
      </div>
    </section>
  );
};

export default Hero;