'use client'

import { Button } from '@/components/ui/button'
import { Icon } from '@iconify/react'
import Link from 'next/link'

interface CTASectionProps {
  domain?: any
}

const CTASection = ({ domain }: CTASectionProps) => {
  if (!domain?.cta_title && !domain?.cta_description) return null;

  const whatsappNumber = domain?.whatsapp?.replace(/\D/g, '') || '';
  const whatsappUrl = whatsappNumber ? `https://wa.me/${whatsappNumber}` : '#';

  return (
    <section className="w-full py-16 lg:py-24 bg-background overflow-hidden">
      <div className="container mx-auto px-4 md:px-6 max-w-7xl">
        <div className="relative group">
          {/* Decorative background elements */}
          <div className="absolute -inset-1 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-[2rem] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
          
          <div className="relative flex flex-col lg:flex-col items-center justify-between gap-3 p-6 md:p-6 lg:p-6 rounded-[2rem] bg-white border border-gray-100 overflow-hidden">
            
            {/* Background pattern */}
            <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
            <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-64 h-64 bg-secondary/5 rounded-full blur-3xl"></div>

            {/* Content */}
            <div className="flex-1 space-y-3 text-center lg:text-center z-10">
              <h2 className="text-xl font-bold tracking-tight sm:text-2xl md:text-2xl text-gray-900 text-balance">
                {domain?.cta_title || 'Ready to transform your space?'}
              </h2>
              <p className="text-lg md:text-lg text-gray-500 leading-relaxed max-w-2xl text-balance">
                {domain?.cta_description || 'Contact us today for a free consultation and discover the perfect window treatment solutions for your home or office.'}
              </p>
            </div>

            {/* Action */}
            <div className="flex flex-col sm:flex-row items-center gap-4 z-10">
              <Button 
                asChild 
                size="sm" 
                className="btn_whatsapp rounded-full bg-[#25D366] hover:bg-[#128C7E] text-white h-auto px-5 py-2 text-lg font-bold shadow-lg shadow-green-200 transition-all hover:-translate-y-1"
              >
                <Link href={whatsappUrl} target="_blank" rel="noopener noreferrer" className="btn_whatsapp flex items-center text-sm gap-3">
                  <Icon icon="mdi:whatsapp" className="btn_whatsapp w-8 h-8" />
                  <span className="btn_whatsapp">Chat Admin</span>
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

export default CTASection