'use client'

import { Button } from '@/components/ui/button'
import { Icon } from '@iconify/react'
import { openWhatsAppModal } from '@/components/layout/whatsapp-modal'

interface CTASectionProps {
  domain?: any
}

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

  return (
    <section className="w-full py-16 lg:py-24 bg-card border-y border-border">
      <div className="max-w-4xl mx-auto px-4 text-center space-y-10">
        <div className="space-y-4">
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground">
            {domain?.cta_title || 'Ready to start your journey?'}
          </h2>
          <p className="text-lg md:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
            {domain?.cta_description || 'Contact us today for a free consultation and discover the perfect solutions tailored for you.'}
          </p>
        </div>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
          <Button 
            type="button"
            size="lg" 
            onClick={openWhatsAppModal}
            className="cursor-pointer rounded-2xl bg-[#25D366] hover:bg-[#128C7E] text-white h-auto px-10 py-5 text-xl font-bold shadow-2xl shadow-green-500/20 transition-all hover:-translate-y-2 flex items-center gap-4"
          >
            <Icon icon="mdi:whatsapp" className="w-8 h-8" />
            <span>Chat Admin</span>
          </Button>
          
          {/* <Link href="/contact-us" className="text-lg font-semibold text-foreground hover:text-primary transition-colors">
            Our Services &rarr;
          </Link> */}
        </div>
        
        {/* Trust signal */}
        {/* <p className="text-sm text-muted-foreground pt-4">
           Join over <span className="text-foreground font-bold">2,000+</span> happy clients across Indonesia.
        </p> */}
      </div>
    </section>
  )
}

export default CTASection