'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import { CheckCircle } from 'lucide-react'
import { useScrollAnimation, fadeInUpClass } from '@/hooks/use-scroll-animation'
import type { SectionStyles } from '@/lib/home-config'

interface WhyChooseProps {
    config?: {
        heading: string
        description: string
        reasons: string[]
        styles?: SectionStyles
    }
}

export function WhyChoose({ config }: WhyChooseProps) {
    const { ref, isVisible } = useScrollAnimation()
    const heading = config?.heading ?? 'Why Choose Hostimatic?'
    const description = config?.description ?? 'We are dedicated to providing the best hosting experience possible. With our state-of-the-art infrastructure and expert support team, you can focus on growing your business while we handle the technical details.'
    const reasons = config?.reasons ?? [
        '99.9% Uptime Guarantee',
        'Free SSL Certificates',
        '24/7 Premium Support',
        '30-Day Money Back Guarantee',
        'Free Website Migration',
        'Easy-to-use Control Panel'
    ]

    const s = config?.styles ?? {}

    return (
        <SectionWrapper bg="white" customBg={s.bg_color}>
            <div ref={ref} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${fadeInUpClass(isVisible)}`}>
                <div>
                    <h2 className="text-3xl md:text-4xl font-bold text-navy mb-6" style={s.heading_color ? { color: s.heading_color } : undefined}>{heading}</h2>
                    <p className="text-slate-600 text-lg mb-8 leading-relaxed" style={s.text_color ? { color: s.text_color } : undefined}>
                        {description}
                    </p>
                    <ul className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {reasons.map((reason, i) => (
                            <li key={i} className="flex items-center gap-3">
                                <CheckCircle className="text-brand-orange h-5 w-5 shrink-0" style={s.accent_color ? { color: s.accent_color } : undefined} />
                                <span className="text-navy font-medium">{reason}</span>
                            </li>
                        ))}
                    </ul>
                </div>

                {/* Performance Visual */}
                <div className="bg-gradient-to-br from-lavender to-white rounded-2xl h-[400px] flex items-center justify-center border border-slate-100 shadow-xl overflow-hidden relative">
                    <div className="text-center space-y-6 relative z-10 px-8">
                        <div className="w-32 h-32 mx-auto relative">
                            <svg viewBox="0 0 120 120" className="w-full h-full">
                                <circle cx="60" cy="60" r="50" fill="none" stroke="#e2e8f0" strokeWidth="8" />
                                <circle cx="60" cy="60" r="50" fill="none" stroke="url(#gauge)" strokeWidth="8" strokeDasharray="282" strokeDashoffset="28" strokeLinecap="round" transform="rotate(-90 60 60)" />
                                <defs><linearGradient id="gauge" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stopColor="#f97316" /><stop offset="100%" stopColor="#9478de" /></linearGradient></defs>
                            </svg>
                            <div className="absolute inset-0 flex flex-col items-center justify-center">
                                <span className="text-3xl font-extrabold text-navy">99.9%</span>
                                <span className="text-xs text-slate-500">Uptime</span>
                            </div>
                        </div>
                        <div className="flex justify-center gap-3">
                            {['NVMe SSD', 'LiteSpeed', 'DDoS Shield'].map(t => (
                                <span key={t} className="text-xs bg-white shadow-sm border border-slate-100 px-3 py-1.5 rounded-full text-navy font-medium">{t}</span>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </SectionWrapper>
    )
}
