import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Counter } from "@/components/counter"
import { TestimonialsMarquee } from "@/components/testimonials-marquee"
import { ClientsMarquee } from "@/components/clients-marquee"
import { TrustBadges } from "@/components/trust-badges"
import {
  ArrowRight,
  Building2,
  Globe,
  CheckCircle2,
  TrendingUp,
  Award,
  Users,
  Shield,
  Target,
  Zap,
  BarChart3,
  Briefcase,
  FileText,
  Calculator,
  Phone,
  Clock,
  MapPin,
  Star,
  PlayCircle,
} from "lucide-react"

const whatsappUrl =
  "https://wa.me/918796625333?text=Hello%2C%20I%20am%20interested%20in%20Agmont%20Advisory%27s%20services.%20Please%20guide%20me."

const calendarUrl = "https://advisory-in.youcanbook.me/"

export default function HomePage() {
  const services = [
    {
      title: "Business Setup",
      href: "/services/business-setup",
      icon: Building2,
      color: "bg-blue-600",
      description: "Company registration, LLP formation, sole proprietorship setup",
    },
    {
      title: "GST Services",
      href: "/services/gst",
      icon: Calculator,
      color: "bg-emerald-600",
      description: "GST registration, returns filing, audit and compliance",
    },
    {
      title: "Audit & Assurance",
      href: "/services/audit-assurance",
      icon: Shield,
      color: "bg-indigo-600",
      description: "Statutory audit, internal audit, tax audit services",
    },
    {
      title: "Project Financing",
      href: "/services/project-financing",
      icon: TrendingUp,
      color: "bg-amber-600",
      description: "Loan syndication, project reports, funding assistance",
    },
    {
      title: "Accounting",
      href: "/services/accounting",
      icon: FileText,
      color: "bg-teal-600",
      description: "Bookkeeping, financial statements, MIS reports",
    },
    {
      title: "IPR Services",
      href: "/services/ipr",
      icon: Award,
      color: "bg-rose-600",
      description: "Trademark, copyright, patent registration and protection",
    },
  ]

  const features = [
    {
      icon: Shield,
      title: "Certified Professionals",
      description: "CA, CMA, CS, and CISA-certified experts",
    },
    {
      icon: Globe,
      title: "Global Network",
      description: "Operations across 3 continents",
    },
    {
      icon: Target,
      title: "Tailored Solutions",
      description: "Customized for your business needs",
    },
    {
      icon: Zap,
      title: "Fast Turnaround",
      description: "Efficient delivery, quality assured",
    },
  ]

  const industries = [
    { name: "Manufacturing", icon: Building2 },
    { name: "Technology", icon: Zap },
    { name: "Healthcare", icon: Shield },
    { name: "Retail", icon: Briefcase },
    { name: "Finance", icon: BarChart3 },
    { name: "Real Estate", icon: Building2 },
  ]

  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative min-h-[90vh] flex items-center bg-gradient-to-br from-slate-900 via-slate-800 to-teal-900 text-white overflow-hidden">
        {/* Animated background */}
        <div className="absolute inset-0">
          <div className="absolute top-20 left-10 w-72 h-72 bg-teal-500/30 rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-20 right-10 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl animate-pulse delay-1000" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-teal-600/10 rounded-full blur-3xl" />
        </div>

        {/* Grid pattern */}
        <div className="absolute inset-0 opacity-[0.03]">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            }}
          />
        </div>

        <div className="container mx-auto px-4 md:px-6 relative z-10 py-20">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left content */}
            <div className="space-y-6 text-center lg:text-left">
              <div className="inline-flex items-center gap-2 px-4 py-2 bg-teal-500/20 backdrop-blur-sm rounded-full text-sm border border-teal-400/30 animate-fade-in">
                <Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                <span className="text-teal-100">{"Trusted by 500+ Businesses"}</span>
              </div>

              <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight text-balance animate-fade-in-up delay-100">
                {"Your Partner in"}
                <span className="block text-transparent bg-clip-text bg-gradient-to-r from-teal-400 via-cyan-400 to-blue-400 animate-gradient-x">
                  {"Business Success"}
                </span>
              </h1>

              <p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-xl animate-fade-in-up delay-200">
                {
                  "Premium financial, legal, and business advisory services. From company formation to global expansion, we are your one-stop solution."
                }
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-2 animate-fade-in-up delay-300">
                <Button
                  asChild
                  size="lg"
                  className="bg-teal-600 hover:bg-teal-500 text-white text-lg px-8 h-14 shadow-xl shadow-teal-900/30 hover:shadow-2xl transition-all hover:scale-105"
                >
                  <a href={calendarUrl} target="_blank" rel="noopener noreferrer">
                    {"Talk to Expert"} <ArrowRight className="ml-2 h-5 w-5" />
                  </a>
                </Button>
                <Button
                  asChild
                  size="lg"
                  variant="outline"
                  className="border-2 border-white/30 text-white hover:bg-white hover:text-slate-900 text-lg px-8 h-14 bg-transparent transition-all hover:scale-105"
                >
                  <Link href="/services">{"Our Services"}</Link>
                </Button>
              </div>

              {/* Quick stats */}
              <div className="grid grid-cols-3 gap-4 pt-8 animate-fade-in-up delay-400">
                <div className="text-center lg:text-left">
                  <div className="text-3xl md:text-4xl font-bold text-teal-400">{"500+"}</div>
                  <div className="text-sm text-slate-400">{"Clients Served"}</div>
                </div>
                <div className="text-center lg:text-left">
                  <div className="text-3xl md:text-4xl font-bold text-teal-400">{"15+"}</div>
                  <div className="text-sm text-slate-400">{"Years Experience"}</div>
                </div>
                <div className="text-center lg:text-left">
                  <div className="text-3xl md:text-4xl font-bold text-teal-400">{"98%"}</div>
                  <div className="text-sm text-slate-400">{"Satisfaction"}</div>
                </div>
              </div>
            </div>

            {/* Right image */}
            <div className="relative hidden lg:block animate-fade-in delay-500">
              <div className="relative h-[550px] rounded-3xl overflow-hidden shadow-2xl border border-white/10">
                <Image
                  src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-28%20at%2011.00.40%20AM%20%281%29.jpeg"
                  alt="Agmont Advisory Team"
                  fill
                  className="object-cover"
                  priority
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent" />
              </div>

              {/* Floating card */}
              <div className="absolute -bottom-6 -left-6 bg-white text-slate-900 p-5 rounded-2xl shadow-2xl animate-float">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-teal-600 rounded-xl flex items-center justify-center">
                    <TrendingUp className="h-6 w-6 text-white" />
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-teal-600">{"98%"}</div>
                    <div className="text-sm text-slate-500">{"Client Satisfaction"}</div>
                  </div>
                </div>
              </div>

              {/* Second floating card */}
              <div className="absolute -top-4 -right-4 bg-white text-slate-900 p-4 rounded-xl shadow-2xl animate-float delay-300">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center">
                    <CheckCircle2 className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-slate-900">{"Certified"}</div>
                    <div className="text-xs text-slate-500">{"CA | CMA | CS"}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 animate-bounce hidden md:block">
          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex items-start justify-center p-1.5">
            <div className="w-1 h-2 bg-white rounded-full animate-scroll" />
          </div>
        </div>
      </section>

      {/* Clients Marquee */}
      <ClientsMarquee />

      {/* Trust Badges */}
      <TrustBadges />

      {/* About Section with Image */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-center max-w-7xl mx-auto">
            {/* Image */}
            <div className="relative animate-fade-in-left">
              <div className="relative h-[450px] rounded-2xl overflow-hidden shadow-xl">
                <Image
                  src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/IMG_5032.JPG.jpeg"
                  alt="Professional consultation"
                  fill
                  className="object-cover"
                />
              </div>
              <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-teal-600 rounded-2xl -z-10" />
              <div className="absolute -top-4 -left-4 w-24 h-24 bg-slate-200 rounded-2xl -z-10" />
            </div>

            {/* Content */}
            <div className="space-y-6 animate-fade-in-right">
              <div className="inline-block px-4 py-1.5 bg-teal-100 text-teal-700 text-sm font-semibold rounded-full">
                {"About Agmont Advisory"}
              </div>
              <h2 className="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
                {"Your Trusted Partner for Complete Business Solutions"}
              </h2>
              <p className="text-slate-600 leading-relaxed">
                {
                  "Agmont Advisory is a premier consulting firm with 15+ years of experience. Partnered with Agmont Advisory Limited (England & Wales), we provide comprehensive services across Europe, Asia, and North America."
                }
              </p>
              <p className="text-slate-600 leading-relaxed">
                {
                  "Our team of CA, CMA, CS, and CISA-certified professionals ensures your business stays compliant, competitive, and profitable. From startup to enterprise, we scale with you."
                }
              </p>

              <div className="grid grid-cols-2 gap-4 pt-4">
                {["Registered with ICAI", "Global Partner Network", "One-Stop Solution", "Transparent Pricing"].map(
                  (point, i) => (
                    <div key={i} className="flex items-center gap-2">
                      <CheckCircle2 className="h-5 w-5 text-teal-600 flex-shrink-0" />
                      <span className="text-slate-700 text-sm font-medium">{point}</span>
                    </div>
                  )
                )}
              </div>

              <div className="flex gap-4 pt-4">
                <Button asChild size="lg" className="bg-teal-600 hover:bg-teal-700">
                  <Link href="/about">
                    {"Learn More"} <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="border-slate-300 bg-transparent">
                  <a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
                    <Phone className="mr-2 h-4 w-4" /> {"Call Us"}
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="py-20 bg-slate-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center max-w-3xl mx-auto mb-12 space-y-4">
            <div className="inline-block px-4 py-1.5 bg-slate-900 text-white text-sm font-semibold rounded-full">
              {"Our Services"}
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">{"Comprehensive Business Solutions"}</h2>
            <p className="text-slate-600">
              {"End-to-end services to help your business start, grow, and thrive in today's competitive landscape"}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
            {services.map((service, i) => {
              const Icon = service.icon
              return (
                <Link key={service.href} href={service.href} className="group">
                  <Card className="h-full transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-0 shadow-md bg-white">
                    <CardContent className="p-6 space-y-4">
                      <div
                        className={`w-14 h-14 rounded-xl ${service.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform`}
                      >
                        <Icon className="h-7 w-7 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-slate-900 group-hover:text-teal-600 transition-colors">
                        {service.title}
                      </h3>
                      <p className="text-slate-500 text-sm leading-relaxed">{service.description}</p>
                      <div className="flex items-center text-teal-600 font-medium text-sm pt-2 group-hover:gap-2 gap-1 transition-all">
                        {"Learn More"} <ArrowRight className="h-4 w-4" />
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </div>

          <div className="text-center mt-10">
            <Button asChild size="lg" variant="outline" className="border-2 border-teal-600 text-teal-600 hover:bg-teal-600 hover:text-white bg-transparent">
              <Link href="/services">
                {"View All Services"} <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 bg-gradient-to-br from-slate-900 via-slate-800 to-teal-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-20 right-20 w-96 h-96 bg-teal-500 rounded-full blur-3xl" />
          <div className="absolute bottom-20 left-20 w-96 h-96 bg-blue-500 rounded-full blur-3xl" />
        </div>

        <div className="container mx-auto px-4 md:px-6 relative z-10">
          <div className="text-center mb-12 space-y-4">
            <div className="inline-block px-4 py-1.5 bg-teal-500/20 text-teal-300 text-sm font-semibold rounded-full border border-teal-500/30">
              {"Why Choose Us"}
            </div>
            <h2 className="text-3xl md:text-4xl font-bold">{"Your Growth, Our Expertise"}</h2>
            <p className="text-slate-300 max-w-2xl mx-auto">
              {"We combine global standards with local expertise to deliver exceptional results for your business"}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-12">
            {features.map((feature, i) => {
              const Icon = feature.icon
              return (
                <div
                  key={i}
                  className="text-center space-y-4 p-6 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-all"
                >
                  <div className="w-14 h-14 mx-auto rounded-xl bg-teal-600 flex items-center justify-center">
                    <Icon className="h-7 w-7 text-white" />
                  </div>
                  <h3 className="text-lg font-bold">{feature.title}</h3>
                  <p className="text-slate-400 text-sm">{feature.description}</p>
                </div>
              )
            })}
          </div>

          {/* Images Row */}
          <div className="grid md:grid-cols-3 gap-4 max-w-5xl mx-auto">
            <div className="relative h-48 rounded-xl overflow-hidden">
              <Image
                src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/IMG_5034.JPG.jpeg"
                alt="Financial planning"
                fill
                className="object-cover hover:scale-105 transition-transform duration-500"
              />
            </div>
            <div className="relative h-48 rounded-xl overflow-hidden">
              <Image
                src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/IMG_5035.JPG.jpeg"
                alt="Business solutions"
                fill
                className="object-cover hover:scale-105 transition-transform duration-500"
              />
            </div>
            <div className="relative h-48 rounded-xl overflow-hidden">
              <Image
                src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/IMG_5036.JPG.jpeg"
                alt="Advisory services"
                fill
                className="object-cover hover:scale-105 transition-transform duration-500"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Industries Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center max-w-3xl mx-auto mb-12 space-y-4">
            <div className="inline-block px-4 py-1.5 bg-teal-100 text-teal-700 text-sm font-semibold rounded-full">
              {"Industries We Serve"}
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">{"Specialized Expertise Across Sectors"}</h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 max-w-5xl mx-auto">
            {industries.map((industry, i) => {
              const Icon = industry.icon
              return (
                <div
                  key={i}
                  className="text-center space-y-3 p-5 rounded-xl bg-slate-50 hover:bg-teal-50 hover:shadow-md transition-all border border-slate-100"
                >
                  <div className="w-12 h-12 mx-auto rounded-lg bg-teal-600 flex items-center justify-center">
                    <Icon className="h-6 w-6 text-white" />
                  </div>
                  <div className="font-medium text-slate-800 text-sm">{industry.name}</div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section className="py-20 bg-slate-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="text-center max-w-3xl mx-auto mb-12 space-y-4">
            <div className="inline-block px-4 py-1.5 bg-slate-900 text-white text-sm font-semibold rounded-full">
              {"Our Process"}
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">{"How We Work With You"}</h2>
          </div>

          <div className="grid md:grid-cols-4 gap-6 max-w-5xl mx-auto">
            {[
              { step: "01", title: "Consultation", description: "Understanding your needs and goals", icon: Phone },
              { step: "02", title: "Strategy", description: "Creating tailored solutions", icon: Target },
              { step: "03", title: "Implementation", description: "Executing with precision", icon: Zap },
              { step: "04", title: "Support", description: "Ongoing guidance and optimization", icon: Shield },
            ].map((item, i) => {
              const Icon = item.icon
              return (
                <div key={i} className="relative text-center space-y-4 p-6 bg-white rounded-xl shadow-sm border border-slate-100">
                  <div className="w-14 h-14 mx-auto rounded-full bg-teal-100 flex items-center justify-center">
                    <Icon className="h-7 w-7 text-teal-600" />
                  </div>
                  <div className="text-xs font-bold text-teal-600 uppercase tracking-wider">{`Step ${item.step}`}</div>
                  <h3 className="text-xl font-bold text-slate-900">{item.title}</h3>
                  <p className="text-slate-500 text-sm">{item.description}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Meet Our Team Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-center max-w-7xl mx-auto">
            {/* Content */}
            <div className="space-y-6 order-2 lg:order-1">
              <div className="inline-block px-4 py-1.5 bg-teal-100 text-teal-700 text-sm font-semibold rounded-full">
                {"Meet Our Team"}
              </div>
              <h2 className="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
                {"Expert Professionals Dedicated to Your Success"}
              </h2>
              <p className="text-slate-600 leading-relaxed">
                {
                  "Our team comprises highly qualified CA, CMA, CS, and CISA-certified professionals with decades of combined experience. We bring diverse expertise across industries to deliver comprehensive solutions for your business challenges."
                }
              </p>
              <div className="grid grid-cols-2 gap-4 pt-2">
                <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                  <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center">
                    <Award className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-slate-900">{"15+ Years"}</div>
                    <div className="text-sm text-slate-500">{"Experience"}</div>
                  </div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                  <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center">
                    <Users className="h-5 w-5 text-white" />
                  </div>
                  <div>
                    <div className="font-bold text-slate-900">{"500+"}</div>
                    <div className="text-sm text-slate-500">{"Happy Clients"}</div>
                  </div>
                </div>
              </div>
              <Button asChild size="lg" className="bg-teal-600 hover:bg-teal-700 mt-4">
                <a href={calendarUrl} target="_blank" rel="noopener noreferrer">
                  {"Talk to Our Experts"} <ArrowRight className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>

            {/* Team Image */}
            <div className="relative order-1 lg:order-2">
              <div className="relative h-[450px] rounded-2xl overflow-hidden shadow-2xl">
                <Image
                  src="https://mfu28oz3nowbyahh.public.blob.vercel-storage.com/WhatsApp%20Image%202026-01-28%20at%2011.00.40%20AM%20%281%29.jpeg"
                  alt="Agmont Advisory Team"
                  fill
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-transparent to-transparent" />
              </div>
              <div className="absolute -bottom-4 -left-4 w-32 h-32 bg-teal-600 rounded-2xl -z-10" />
              <div className="absolute -top-4 -right-4 w-24 h-24 bg-slate-200 rounded-2xl -z-10" />
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Marquee */}
      <TestimonialsMarquee />

      {/* Contact Info Strip */}
      <section className="py-16 bg-teal-600 text-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto text-center">
            <div className="space-y-2">
              <Phone className="h-8 w-8 mx-auto opacity-80" />
              <h3 className="font-bold text-lg">{"Call Us"}</h3>
              <a href="tel:+918796625333" className="text-teal-100 hover:text-white transition-colors block">
                {"+91 8796625333"}
              </a>
              <a href="tel:+912534061165" className="text-teal-100 hover:text-white transition-colors block">
                {"+91 0253 4061165"}
              </a>
            </div>
            <div className="space-y-2">
              <MapPin className="h-8 w-8 mx-auto opacity-80" />
              <h3 className="font-bold text-lg">{"Visit Us"}</h3>
              <p className="text-teal-100 text-sm">
                {"4, Maa Saraswati Valley CHS, Rachna High School Road, Canada Corner, Nashik"}
              </p>
            </div>
            <div className="space-y-2">
              <Clock className="h-8 w-8 mx-auto opacity-80" />
              <h3 className="font-bold text-lg">{"Business Hours"}</h3>
              <p className="text-teal-100 text-sm">{"Mon-Fri: 10AM - 6PM"}</p>
              <p className="text-teal-100 text-sm">{"Sat: 10:30AM - 4PM"}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-20 bg-slate-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-teal-500 rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl animate-pulse delay-1000" />
        </div>

        <div className="container mx-auto px-4 md:px-6 relative z-10">
          <div className="max-w-3xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-5xl font-bold">{"Ready to Transform Your Business?"}</h2>
            <p className="text-xl text-slate-300">
              {"Join 500+ successful businesses. Get expert guidance from certified professionals today."}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-6">
              <Button
                asChild
                size="lg"
                className="bg-teal-600 hover:bg-teal-500 text-white text-lg px-8 h-14 shadow-xl"
              >
                <a href={calendarUrl} target="_blank" rel="noopener noreferrer">
                  {"Schedule Free Consultation"} <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button
                asChild
                size="lg"
                variant="outline"
                className="border-2 border-white/30 text-white hover:bg-white hover:text-slate-900 text-lg px-8 h-14 bg-transparent"
              >
                <Link href="/contact">{"Contact Us"}</Link>
              </Button>
            </div>

            <div className="flex flex-wrap gap-6 justify-center pt-6 text-slate-400 text-sm">
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-teal-500" />
                <span>{"Free Consultation"}</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-teal-500" />
                <span>{"No Hidden Charges"}</span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5 text-teal-500" />
                <span>{"Expert Support"}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}