'use client'

import Button from '@/components/ui/Button'
import { Phone, Shield } from 'lucide-react'

export default function ConsultationCTASection() {
  return (
    <section data-vula-section="consultationcta" id="consultation-cta" className="bg-[#000080] py-20">
      <div className="container mx-auto px-4 text-center">
        <div className="max-w-3xl mx-auto">
          <Shield className="mx-auto mb-6 h-12 w-12 text-[#d4af37]" />
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Facing a Criminal Charge? We&apos;re Here to Help.
          </h2>
          <p className="text-lg text-white/80 mb-8 leading-relaxed">
            With 32 years of experience, Mashobane &amp; Associate provides
            confidential, compassionate defence across Gauteng. Your freedom
            and reputation are at stake — let our seasoned team fight for you.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
            <Button size="lg" className="bg-[#d4af37] text-[#000080] font-bold px-8 py-3 rounded-lg hover:bg-[#e0c44a] transition-all duration-200">
              <a href="/services" className="flex items-center gap-2">
                Book a Consultation
              </a>
            </Button>
          </div>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 text-sm text-white/70">
            <span className="flex items-center gap-2">
              <Phone className="h-4 w-4 text-[#d4af37]" />
              24/7 Emergency Line: 0800 123 456
            </span>
            <span className="hidden sm:inline text-white/30">|</span>
            <span className="flex items-center gap-2">
              <Shield className="h-4 w-4 text-[#d4af37]" />
              Confidential &amp; compassionate advice
            </span>
          </div>
        </div>
      </div>
    </section>
  )
}