import Link from 'next/link'
import { ArrowRight, Phone, Mail } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { siteConfig } from '@/lib/site-config'

export function CtaBanner() {
  return (
    <section className="section-padding bg-gradient-to-br from-primary via-primary to-primary/90 relative overflow-hidden">
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 right-0 w-96 h-96 rounded-full bg-accent blur-3xl" />
      </div>
      <div className="container-wide relative">
        <div className="max-w-3xl mx-auto text-center">
          <p className="text-accent font-semibold text-sm uppercase tracking-[0.2em] mb-4">Get in Touch</p>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-foreground leading-tight text-balance mb-6">
            Ready to Transform Your Team&apos;s Capabilities?
          </h2>
          <p className="text-lg text-primary-foreground/80 mb-10 leading-relaxed">
            Whether you need a public course, bespoke programme, or executive coaching — our consultants are here to help.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Link href="/contact">
              <Button size="lg" className="bg-accent text-accent-foreground hover:bg-accent/90 font-semibold h-12 px-8 w-full sm:w-auto">
                Contact Us Today <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </Link>
            <Link href="/services/upcoming-courses">
              <Button size="lg" variant="outlineLight" className="font-semibold h-12 px-8 w-full sm:w-auto">
                Browse Courses
              </Button>
            </Link>
          </div>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-6 text-primary-foreground/70 text-sm">
            <a href={`tel:${siteConfig.phone.replace(/\s/g, '')}`} className="flex items-center gap-2 hover:text-white transition-colors">
              <Phone className="w-4 h-4 text-accent" />{siteConfig.phone}
            </a>
            <a href={`mailto:${siteConfig.email}`} className="flex items-center gap-2 hover:text-white transition-colors">
              <Mail className="w-4 h-4 text-accent" />{siteConfig.email}
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}