'use client'

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

interface WordpressSectionProps {
    config?: {
        label: string
        heading: string
        description: string
        features: string[]
        cta_text: string
        cta_link: string
        styles?: SectionStyles
    }
}

export function WordpressSection({ config }: WordpressSectionProps) {
    const { ref, isVisible } = useScrollAnimation()
    const label = config?.label ?? 'WordPress Hosting'
    const heading = config?.heading ?? 'Optimized for WordPress'
    const description = config?.description ?? 'Get the most out of your WordPress site with our optimized hosting platform. Pre-installed WP-CLI, Git, and staging environments for developers.'
    const features = config?.features ?? ['1-Click Installation', 'Auto Updates', 'Daily Backups', 'WP-CLI Enabled', 'LiteSpeed Cache', 'Free Migration']
    const ctaText = config?.cta_text ?? 'Get WordPress Hosting'
    const ctaLink = config?.cta_link ?? '/wordpress-hosting'
    const s = config?.styles ?? {}

    return (
        <SectionWrapper bg="lavender" customBg={s.bg_color}>
            <div ref={ref} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${fadeInUpClass(isVisible)}`}>
                <div>
                    <h5 className="bg-gradient-to-r from-brand-orange to-brand-purple bg-clip-text text-transparent font-bold uppercase tracking-wider text-sm mb-2" style={s.accent_color ? { color: s.accent_color, backgroundImage: 'none' } : undefined}>{label}</h5>
                    <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>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                        {features.map((text, i) => <Feature key={i} text={text} accentColor={s.accent_color} />)}
                    </div>

                    <Button className="rounded-lg px-8 h-12" style={s.button_color ? { backgroundColor: s.button_color } : undefined} asChild>
                        <Link href={ctaLink}>{ctaText}</Link>
                    </Button>
                </div>

                {/* WordPress Dashboard Mockup */}
                <div className="bg-white rounded-2xl h-[400px] border border-slate-200 shadow-xl relative overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent rounded-2xl" />
                    <div className="relative z-10 h-full flex">
                        {/* WP Sidebar */}
                        <div className="w-14 bg-[#23282d] h-full flex flex-col items-center py-4 gap-3">
                            <div className="w-8 h-8 bg-[#21759b] rounded-full flex items-center justify-center text-white text-sm font-serif font-bold">W</div>
                            {[...Array(5)].map((_, i) => (
                                <div key={i} className={`w-6 h-1 rounded ${i === 0 ? 'bg-white' : 'bg-white/30'}`} />
                            ))}
                        </div>
                        {/* WP Content */}
                        <div className="flex-1 p-5 space-y-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <div className="w-2 h-2 rounded-full bg-green-400" />
                                    <span className="text-xs font-mono text-slate-500">yourdomain.com</span>
                                </div>
                                <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">Live</span>
                            </div>
                            <div className="grid grid-cols-3 gap-2">
                                {[{ l: 'Posts', v: '24' }, { l: 'Pages', v: '8' }, { l: 'Views', v: '12.4K' }].map(s => (
                                    <div key={s.l} className="bg-slate-50 rounded-lg p-2.5 text-center border border-slate-100">
                                        <p className="text-lg font-bold text-navy">{s.v}</p>
                                        <p className="text-xs text-slate-400">{s.l}</p>
                                    </div>
                                ))}
                            </div>
                            <div className="space-y-2">
                                {['Getting Started with WordPress', 'Top Hosting Tips 2025', 'Speed Optimization Guide'].map(t => (
                                    <div key={t} className="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-2 border border-slate-100">
                                        <div className="w-1.5 h-1.5 rounded-full bg-brand-orange" />
                                        <span className="text-xs text-slate-600 truncate">{t}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </SectionWrapper>
    )
}

function Feature({ text, accentColor }: { text: string; accentColor?: string }) {
    return (
        <div className="flex items-center gap-2">
            <Check className="h-4 w-4 text-brand-purple" style={accentColor ? { color: accentColor } : undefined} />
            <span className="text-slate-700 font-medium">{text}</span>
        </div>
    )
}
