'use client'

import { BarChart3 } from 'lucide-react'
import { useSiteSettings } from '@/hooks/use-site-settings'

const defaultServices = [
  { icon: '🏠', title: 'عقارات موثوقة', desc: 'جميع العقارات موثقة ومحقق منها', color: 'blue' },
  { icon: '🔍', title: 'بحث ذكي', desc: 'ابحث حسب الموقع والسعر والميزات', color: 'purple' },
  { icon: '💰', title: 'أسعار منافسة', desc: 'أفضل الأسعار في السوق المغربي', color: 'green' },
  { icon: '🤝', title: 'دعم متواصل', desc: 'فريق دعم متخصص على مدار الساعة', color: 'orange' },
]

const colorClasses: Record<string, string> = {
  blue:   'bg-blue-100/80 text-blue-600',
  purple: 'bg-purple-100/80 text-purple-600',
  green:  'bg-green-100/80 text-green-600',
  orange: 'bg-orange-100/80 text-orange-600',
}

export function Services() {
  const s = useSiteSettings()
  const section = s.services ?? {}
  const services = section.items && section.items.length ? section.items : defaultServices

  return (
    <section id="services" className="py-20 bg-gradient-to-br from-gray-50 via-white to-blue-50/50">
      <div className="container mx-auto px-4 sm:px-6">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-blue-50 text-blue-600 text-sm font-medium px-4 py-2 rounded-full mb-6">
            <BarChart3 className="w-4 h-4" />
            {section.badge || 'خدماتنا'}
          </div>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            {section.title || 'لماذا '}{' '}
            <span className="text-transparent bg-clip-text bg-gradient-to-l from-blue-600 to-indigo-600">
              {section.titleHighlight || 'تختارنا؟'}
            </span>
          </h2>
          <p className="text-gray-500 text-lg max-w-2xl mx-auto">
            {section.subtitle || 'نقدم لك أفضل الخدمات العقارية في المغرب مع حلول مبتكرة'}
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {services.map((svc: any, i: number) => (
            <div key={i} className="group p-8 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-100 shadow-lg shadow-gray-200/50 hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 hover:border-blue-100 relative overflow-hidden">
              <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-blue-50 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              <div className={`w-14 h-14 rounded-2xl ${colorClasses[svc.color] ?? 'bg-blue-100 text-blue-600'} flex items-center justify-center mb-6 text-2xl shadow-lg`}>
                {svc.icon}
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-3">{svc.title}</h3>
              <p className="text-gray-500 text-sm leading-relaxed">{svc.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}