'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import { Button } from '@/components/ui/button'
import { ArrowRight } from 'lucide-react'
import { useScrollAnimation, fadeInUpClass } from '@/hooks/use-scroll-animation'
import Link from 'next/link'
import type { SectionStyles } from '@/lib/home-config'

interface CtaBannerProps {
    config?: {
        heading: string
        description: string
        cta_text: string
        cta_link: string
        styles?: SectionStyles
    }
}

export function CtaBanner({ config }: CtaBannerProps) {
    const { ref, isVisible } = useScrollAnimation()
    const heading = config?.heading ?? 'Build Your Website with Hostimatic'
    const description = config?.description ?? 'Get started today with our premium hosting plans and take your business to the next level.'
    const ctaText = config?.cta_text ?? 'Get Started Now'
    const ctaLink = config?.cta_link ?? '/web-hosting'
    const s = config?.styles ?? {}

    return (
        <SectionWrapper bg="navy" className="relative overflow-hidden" customBg={s.bg_color}>
            {/* Dual-color background glow — brand mixture via ambient light */}
            <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-orange/20 rounded-full blur-[120px] translate-x-1/2 -translate-y-1/2 animate-pulse" />
            <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-brand-purple/15 rounded-full blur-[100px] -translate-x-1/3 translate-y-1/3 animate-pulse [animation-delay:1s]" />

            <div ref={ref} className={`relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left ${fadeInUpClass(isVisible)}`}>
                <div>
                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4" style={s.heading_color ? { color: s.heading_color } : undefined}>{heading}</h2>
                    <p className="text-slate-300 text-lg max-w-xl" style={s.text_color ? { color: s.text_color } : undefined}>{description}</p>
                </div>
                <Button size="lg" className="rounded-xl h-14 px-8 text-lg shrink-0 group" style={s.button_color ? { backgroundColor: s.button_color } : undefined} asChild>
                    <Link href={ctaLink}>
                        {ctaText}
                        <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                    </Link>
                </Button>
            </div>
        </SectionWrapper>
    )
}
