import { db } from '@/lib/db'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import Link from 'next/link'
import { Metadata } from 'next'
import { generateSEOMetadata, generateJsonLd } from '@/lib/seo'
import { SafeImage } from '@/components/SafeImage'
import { 
  FileText, 
  Search, 
  Car, 
  Shield, 
  MapPin, 
  Phone, 
  Mail, 
  Clock,
  CheckCircle,
  Users,
  TrendingUp,
  ArrowRight,
  Star,
  Zap,
  Lock,
  MessageCircle,
  ExternalLink
} from 'lucide-react'
import Image from 'next/image'
import WhatsAppFloat from '@/components/WhatsAppFloat'

async function getServices() {
  try {
    const services = await db.service.findMany({
      where: { status: 'ACTIVE' },
      orderBy: { title: 'asc' }
    })
    return services
  } catch (error) {
    console.error('Error fetching services:', error)
    return []
  }
}

interface Service {
  id: string
  title: string
  slug: string
  description: string
  category?: string
  iconUrl?: string
  linkType?: 'INTERNAL' | 'EXTERNAL'
  linkUrl?: string
  isNewTab?: boolean
}

async function getSettings() {
  try {
    const settings = await db.systemSettings.findFirst({
      select: {
        siteName: true,
        siteDescription: true,
        contactEmail: true,
        contactPhone: true,
        contactWhatsApp: true,
        address: true,
        workingHours: true,
        heroTitle: true,
        heroSubtitle: true,
        heroDescription: true,
        heroButtonText: true,
        heroButtonLink: true,
        heroSecondaryButtonText: true,
        heroSecondaryButtonLink: true,
        heroBackgroundImage: true,
        siteLogo: true,
        polresLogo: true,
        metaTitle: true,
        metaDescription: true,
        metaKeywords: true,
        ogImage: true
      }
    })
    return settings || {}
  } catch (error) {
    console.error('Error fetching settings:', error)
    return {}
  }
}

export async function generateMetadata(): Promise<Metadata> {
  try {
    const settings = await db.systemSettings.findFirst({
      select: {
        metaTitle: true,
        metaDescription: true,
        metaKeywords: true,
        ogImage: true,
        siteName: true,
        heroTitle: true
      }
    })
    
    const seoSettings = {
      metaTitle: settings?.metaTitle || undefined,
      metaDescription: settings?.metaDescription || undefined,
      metaKeywords: settings?.metaKeywords || undefined,
      ogImage: settings?.ogImage || undefined,
      siteName: settings?.siteName || undefined,
      siteUrl: undefined, // This will be undefined for now
    }

    return generateSEOMetadata(seoSettings, settings?.heroTitle || 'Sistem Pelayanan Digital')
  } catch (error) {
    console.error('Error fetching SEO settings:', error)
    
    return {
      title: "Polres Wonosobo - Sistem Pelayanan Digital",
      description: "Layanan pengajuan dokumen kepolisian secara online yang mudah, cepat, dan terpercaya",
      keywords: "polres wonosobo, pelayanan polisi, pengajuan dokumen, kepolisian",
    }
  }
}

export default async function ClassicLandingPage() {
  const services = await getServices()
  const settings = await getSettings()

  // Default values for settings
  const defaultSettings = {
    siteName: 'Polres Wonosobo',
    siteDescription: 'Sistem Pelayanan Digital Polres Wonosobo',
    contactEmail: 'polreswonosobo@polri.go.id',
    contactPhone: '(0286) 321001',
    contactWhatsApp: '+62 812-3456-7890',
    address: 'Jl. Pahlawan No. 15, Wonosobo',
    workingHours: 'Senin - Jumat: 08:00 - 16:00',
    heroTitle: 'Sistem Pelayanan Digital',
    heroSubtitle: 'Polres Wonosobo',
    heroDescription: 'Layanan pengajuan dokumen kepolisian secara online yang mudah, cepat, dan terpercaya',
    heroButtonText: 'Lihat Layanan',
    heroButtonLink: '#layanan',
    heroSecondaryButtonText: 'Lacak Pengajuan',
    heroSecondaryButtonLink: '/lacak',
    heroBackgroundImage: '/hero-bg.jpg',
    siteLogo: '',
    polresLogo: ''
  }

  const mergedSettings = { ...defaultSettings, ...settings }

  const getServiceIcon = (service: Service) => {
    // Fallback to default icons based on slug
    switch (service.slug) {
      case 'skck':
        return <FileText className="w-10 h-10" />
      case 'spkt':
        return <Shield className="w-10 h-10" />
      case 'lalu-lintas':
        return <Car className="w-10 h-10" />
      default:
        return <FileText className="w-10 h-10" />
    }
  }

  const features = [
    {
      icon: <Zap className="w-6 h-6" />,
      title: "Proses Cepat",
      description: "Pengajuan dokumen diproses secara digital dan lebih cepat",
      color: "bg-yellow-100 text-yellow-600"
    },
    {
      icon: <Lock className="w-6 h-6" />,
      title: "Aman Terjamin",
      description: "Data pribadi Anda aman dengan sistem keamanan terenkripsi",
      color: "bg-green-100 text-green-600"
    },
    {
      icon: <Search className="w-6 h-6" />,
      title: "Pelacakan Real-time",
      description: "Monitor status pengajuan Anda secara real-time",
      color: "bg-amber-100 text-amber-600"
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: "Layanan Prima",
      description: "Dukungan customer service yang responsif dan ramah",
      color: "bg-purple-100 text-purple-600"
    }
  ]

  const stats = [
    { number: "10,000+", label: "Pengajuan Diproses" },
    { number: "98%", label: "Tingkat Kepuasan" },
    { number: "24/7", label: "Layanan Online" },
    { number: "50+", label: "Layanan Tersedia" }
  ]

  // Generate JSON-LD structured data
  const jsonLd = generateJsonLd({
    metaTitle: mergedSettings.metaTitle || undefined,
    metaDescription: mergedSettings.metaDescription || undefined,
    metaKeywords: mergedSettings.metaKeywords || undefined,
    ogImage: mergedSettings.ogImage || undefined,
    siteName: mergedSettings.siteName || undefined,
    siteUrl: mergedSettings.siteUrl || undefined, // This will be undefined for now
  }, 'organization')

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div 
          className="absolute inset-0 bg-cover bg-center bg-no-repeat transform scale-105"
          style={{ backgroundImage: `url(${mergedSettings.heroBackgroundImage || '/hero-bg.jpg'})` }}
        >
          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/70" />
        </div>
        
        <div className="relative z-10 text-center text-white px-4 max-w-5xl mx-auto">
          <Badge className="mb-8 bg-amber-600 hover:bg-amber-700 text-white px-4 py-2">
            🎯 Layanan Digital Terpercaya
          </Badge>
          
          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            {mergedSettings.heroTitle || 'Sistem Pelayanan Digital'}
          </h1>
          
          <h2 className="text-3xl md:text-5xl font-semibold mb-8 text-amber-200">
            {mergedSettings.heroSubtitle || 'Polres Wonosobo'}
          </h2>
          
          <p className="text-xl md:text-2xl mb-12 max-w-3xl mx-auto text-gray-200 leading-relaxed">
            {mergedSettings.heroDescription || 'Layanan pengajuan dokumen kepolisian secara online yang mudah, cepat, dan terpercaya'}
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href={mergedSettings.heroButtonLink || '#layanan'}>
              <Button size="lg" className="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 text-lg font-semibold rounded-xl hover:scale-105 transition-transform">
                {mergedSettings.heroButtonText || 'Lihat Layanan'}
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
            <Link href={mergedSettings.heroSecondaryButtonLink || '/lacak'}>
              <Button size="lg" variant="outline" className="border-white text-black hover:bg-white hover:text-black px-8 py-4 text-lg font-semibold rounded-xl hover:scale-105 transition-transform">
                {mergedSettings.heroSecondaryButtonText || 'Lacak Pengajuan'}
                <Search className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 border-2 border-white rounded-full flex justify-center">
            <div className="w-1 h-3 bg-white rounded-full mt-2"></div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 px-4 bg-gradient-to-r from-amber-600 to-orange-600">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
              📊 Pencapaian Kami
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Dipercaya oleh Masyarakat
            </h2>
            <p className="text-xl text-amber-100 max-w-2xl mx-auto">
              Bukti komitmen kami dalam memberikan pelayanan terbaik
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-4xl md:text-5xl font-bold text-white mb-3">
                  {stat.number}
                </div>
                <div className="text-amber-100 font-medium">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="keunggulan" className="py-20 px-4 bg-gradient-to-br from-amber-50 to-orange-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-amber-100 text-amber-600 hover:bg-amber-200">
              ✨ Keunggulan Kami
            </Badge>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Mengapa Memilih Layanan Kami?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Nikmati kemudahan dan kenyamanan dalam mengajukan berbagai layanan kepolisian secara online
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="group hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border-0 shadow-lg">
                <CardHeader className="text-center pb-4">
                  <div className={`mx-auto mb-4 p-4 rounded-full ${feature.color} group-hover:scale-110 transition-transform`}>
                    {feature.icon}
                  </div>
                  <CardTitle className="text-xl font-semibold">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 text-center leading-relaxed">
                    {feature.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Brand/Trust Section */}
      <section className="py-20 px-4 bg-gradient-to-br from-gray-50 to-amber-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <Badge className="mb-6 bg-amber-100 text-amber-600 hover:bg-amber-200">
              🏢 Terpercaya & Resmi
            </Badge>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Didukung oleh Polres Wonosobo
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Layanan digital resmi dari Kepolisian Resort Wonosobo untuk memberikan pelayanan terbaik kepada masyarakat
            </p>
          </div>

          <div className="flex flex-col md:flex-row justify-center items-center gap-12 md:gap-20">
            {/* Website Logo */}
            {mergedSettings.siteLogo && (mergedSettings.siteLogo.startsWith('/') || mergedSettings.siteLogo.startsWith('http')) ? (
              <div className="text-center">
                <SafeImage 
                  src={mergedSettings.siteLogo} 
                  alt="Website Logo"
                  width={300}
                  height={120}
                  className="h-24 w-auto object-contain mx-auto mb-4"
                  priority
                  fallback={
                    <div className="h-24 w-32 bg-gray-200 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <FileText className="w-8 h-8 text-gray-400" />
                    </div>
                  }
                />
                <p className="text-lg text-gray-700 font-semibold">Portal Digital</p>
              </div>
            ) : null}
            
            {/* Separator */}
            {(mergedSettings.siteLogo && mergedSettings.polresLogo && 
              mergedSettings.siteLogo.startsWith('/') || mergedSettings.siteLogo.startsWith('http') &&
              mergedSettings.polresLogo.startsWith('/') || mergedSettings.polresLogo.startsWith('http')) && (
              <div className="hidden md:block w-px h-24 bg-gradient-to-b from-transparent via-amber-300 to-transparent"></div>
            )}
            
            {/* Polres Logo */}
            {mergedSettings.polresLogo && (mergedSettings.polresLogo.startsWith('/') || mergedSettings.polresLogo.startsWith('http')) ? (
              <div className="text-center">
                <SafeImage 
                  src={mergedSettings.polresLogo} 
                  alt="Polres Logo"
                  width={200}
                  height={200}
                  className="h-32 w-auto object-contain mx-auto mb-4"
                  priority
                  fallback={
                    <div className="h-32 w-32 bg-gray-200 rounded-lg flex items-center justify-center mx-auto mb-4">
                      <Shield className="w-12 h-12 text-gray-400" />
                    </div>
                  }
                />
                <p className="text-lg text-gray-700 font-semibold">Polres Wonosobo</p>
              </div>
            ) : null}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="layanan" className="py-20 px-4 bg-gradient-to-br from-amber-50 to-orange-100">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-amber-600 text-white hover:bg-amber-700">
              📋 Layanan Kami
            </Badge>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Layanan Unggulan
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Pilih layanan yang Anda butuhkan dan ajukan permohonan secara online dengan mudah
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.length > 0 ? (
              services.map((service) => (
                <Card key={service.id} className="group hover:shadow-2xl transition-all duration-300 hover:-translate-y-3 border-0 bg-white/80 backdrop-blur-sm">
                  <CardHeader className="text-center pb-4">
                    <div className="mx-auto mb-6 p-2 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full text-white w-20 h-20 flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
                      <div className="w-10 h-10 flex items-center justify-center">
                        {getServiceIcon(service)}
                      </div>
                    </div>
                    <CardTitle className="text-2xl font-bold text-gray-900">{service.title}</CardTitle>
                    <Badge className="w-fit mx-auto bg-green-100 text-green-600 hover:bg-green-200">
                      <CheckCircle className="w-3 h-3 mr-1" />
                      Tersedia
                    </Badge>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center mb-6 text-gray-600 leading-relaxed">
                      {service.description}
                    </CardDescription>
                    <div className="text-center">
                      {service.linkType === 'EXTERNAL' ? (
                        <a 
                          href={service.linkUrl || '#'}
                          target={service.isNewTab ? '_blank' : '_self'}
                          rel={service.isNewTab ? 'noopener noreferrer' : ''}
                          className="inline-block w-full"
                        >
                          <Button className="w-full bg-gradient-to-r from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 text-white px-6 py-3 rounded-xl font-semibold hover:scale-105 transition-transform shadow-lg">
                            {service.isNewTab && <ExternalLink className="mr-2 h-4 w-4" />}
                            Ajukan Sekarang
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </a>
                      ) : (
                        <Link href={service.linkUrl || `/ajuan/${service.slug}`}>
                          <Button className="w-full bg-gradient-to-r from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 text-white px-6 py-3 rounded-xl font-semibold hover:scale-105 transition-transform shadow-lg">
                            Ajukan Sekarang
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </Link>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))
            ) : (
              // Default services if database is empty
              [
                {
                  id: '1',
                  title: 'SKCK',
                  slug: 'skck',
                  description: 'Surat Keterangan Catatan Kriminal untuk keperluan pekerjaan, pendidikan, dan lainnya',
                  category: 'skck'
                },
                {
                  id: '2',
                  title: 'SPKT',
                  slug: 'spkt',
                  description: 'Surat Pemberitahuan Kepolisian Terpadu untuk berbagai keperluan kepolisian',
                  category: 'spkt'
                },
                {
                  id: '3',
                  title: 'Lalu Lintas',
                  slug: 'lalu-lintas',
                  description: 'Pengajuan dokumen terkait lalu lintas dan SIM',
                  category: 'lalu-lintas'
                }
              ].map((service) => (
                <Card key={service.id} className="group hover:shadow-2xl transition-all duration-300 hover:-translate-y-3 border-0 bg-white/80 backdrop-blur-sm">
                  <CardHeader className="text-center pb-4">
                    <div className="mx-auto mb-6 p-2 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full text-white w-20 h-20 flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
                      <div className="w-10 h-10 flex items-center justify-center">
                        {getServiceIcon(service)}
                      </div>
                    </div>
                    <CardTitle className="text-2xl font-bold text-gray-900">{service.title}</CardTitle>
                    <Badge className="w-fit mx-auto bg-green-100 text-green-600 hover:bg-green-200">
                      <CheckCircle className="w-3 h-3 mr-1" />
                      Tersedia
                    </Badge>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-center mb-6 text-gray-600 leading-relaxed">
                      {service.description}
                    </CardDescription>
                    <div className="text-center">
                      {service.linkType === 'EXTERNAL' ? (
                        <a 
                          href={service.linkUrl || '#'}
                          target={service.isNewTab ? '_blank' : '_self'}
                          rel={service.isNewTab ? 'noopener noreferrer' : ''}
                          className="inline-block w-full"
                        >
                          <Button className="w-full bg-gradient-to-r from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 text-white px-6 py-3 rounded-xl font-semibold hover:scale-105 transition-transform shadow-lg">
                            {service.isNewTab && <ExternalLink className="mr-2 h-4 w-4" />}
                            Ajukan Sekarang
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </a>
                      ) : (
                        <Link href={service.linkUrl || `/ajuan/${service.slug}`}>
                          <Button className="w-full bg-gradient-to-r from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 text-white px-6 py-3 rounded-xl font-semibold hover:scale-105 transition-transform shadow-lg">
                            Ajukan Sekarang
                            <ArrowRight className="ml-2 h-4 w-4" />
                          </Button>
                        </Link>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))
            )}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20 px-4 bg-gradient-to-br from-gray-50 to-amber-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <Badge className="mb-4 bg-yellow-100 text-yellow-600 hover:bg-yellow-200">
              ⭐ Testimoni
            </Badge>
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Apa Kata Masyarakat?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Kepuasan pengguna adalah prioritas utama kami
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                name: "Budi Santoso",
                role: "Pegawai Swasta",
                content: "Proses pengajuan SKCK sangat mudah dan cepat. Tidak perlu antri berjam-jam di kantor polisi.",
                rating: 5
              },
              {
                name: "Siti Nurhaliza",
                role: "Mahasiswa",
                content: "Layanan sangat membantu untuk mahasiswa yang ingin melamar kerja. Prosesnya transparan dan bisa dilacak.",
                rating: 5
              },
              {
                name: "Ahmad Wijaya",
                role: "Wiraswasta",
                content: "Sistem yang sangat efisien dan user-friendly. Pengajuan dokumen jadi lebih praktis.",
                rating: 5
              }
            ].map((testimonial, index) => (
              <Card key={index} className="p-6 border-0 shadow-lg hover:shadow-xl transition-shadow">
                <div className="flex mb-4">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                  ))}
                </div>
                <p className="text-gray-600 mb-6 italic">
                  "{testimonial.content}"
                </p>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white font-bold mr-4">
                    {testimonial.name.charAt(0)}
                  </div>
                  <div>
                    <div className="font-semibold text-gray-900">{testimonial.name}</div>
                    <div className="text-sm text-gray-500">{testimonial.role}</div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-amber-600 to-orange-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-amber-100">
            Siap Mengajukan Layanan?
          </h2>
          <p className="text-xl mb-8 text-amber-100">
            Bergabunglah dengan ribuan warga yang telah menikmati kemudahan layanan digital kami
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="#layanan">
              <Button size="lg" className="bg-white text-amber-600 hover:bg-gray-100 px-8 py-4 text-lg font-semibold rounded-xl hover:scale-105 transition-transform">
                Mulai Sekarang
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
            <Link href="/lacak">
              <Button size="lg" variant="outline" className="border-white text-black hover:bg-white hover:text-black px-8 py-4 text-lg font-semibold rounded-xl hover:scale-105 transition-transform">
                Lacak Pengajuan
                <Search className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="kontak" className="bg-gray-900 text-white py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-3 gap-8 mb-8">
            <div>
              {/* Website Logo in Footer */}
              {mergedSettings.siteLogo && (
                <div className="mb-4">
                  <Image 
                    src={mergedSettings.siteLogo} 
                    alt="Website Logo"
                    width={200}
                    height={60}
                    className="h-12 w-auto object-contain"
                    priority
                  />
                </div>
              )}
              <h3 className="text-2xl font-bold mb-4 text-amber-400">{mergedSettings.siteName || 'Polres Wonosobo'}</h3>
              <p className="text-gray-300 mb-4 leading-relaxed">
                {mergedSettings.siteDescription || 'Sistem Pelayanan Digital Polres Wonosobo hadir untuk memberikan kemudahan akses layanan kepolisian kepada masyarakat.'}
              </p>
              <div className="flex space-x-4">
                <Badge className="bg-amber-600 hover:bg-amber-700">
                  <CheckCircle className="w-3 h-3 mr-1" />
                  Terpercaya
                </Badge>
                <Badge className="bg-green-600 hover:bg-green-700">
                  <Shield className="w-3 h-3 mr-1" />
                  Aman
                </Badge>
              </div>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4 text-amber-400">Layanan Cepat</h4>
              <div className="space-y-2 text-gray-300">
                <div className="hover:text-white transition-colors cursor-pointer">📋 Pengajuan SKCK</div>
                <div className="hover:text-white transition-colors cursor-pointer">🛡️ Layanan SPKT</div>
                <div className="hover:text-white transition-colors cursor-pointer">🚗 SIM & Lalu Lintas</div>
                <div className="hover:text-white transition-colors cursor-pointer">🔍 Lacak Pengajuan</div>
              </div>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4 text-amber-400">Kontak Kami</h4>
              <div className="space-y-3 text-gray-300">
                <div className="flex items-center gap-3 hover:text-white transition-colors">
                  <MapPin className="w-5 h-5 text-amber-400" />
                  <span>{mergedSettings.address || 'Jl. Pahlawan No. 15, Wonosobo'}</span>
                </div>
                <div className="flex items-center gap-3 hover:text-white transition-colors">
                  <Phone className="w-5 h-5 text-amber-400" />
                  <span>{mergedSettings.contactPhone || '(0286) 321001'}</span>
                </div>
                <div className="flex items-center gap-3 hover:text-white transition-colors">
                  <Mail className="w-5 h-5 text-amber-400" />
                  <span>{mergedSettings.contactEmail || 'polreswonosobo@polri.go.id'}</span>
                </div>
                <div className="flex items-center gap-3 hover:text-white transition-colors">
                  <MessageCircle className="w-5 h-5 text-amber-400" />
                  <span>{mergedSettings.contactWhatsApp || '+62 812-3456-7890'}</span>
                </div>
                <div className="flex items-center gap-3 hover:text-white transition-colors">
                  <Clock className="w-5 h-5 text-amber-400" />
                  <span>{mergedSettings.workingHours || 'Senin - Jumat: 08:00 - 16:00'}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div className="border-t border-gray-700 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-400 mb-4 md:mb-0">
                &copy; 2024 {mergedSettings.siteName || 'Polres Wonosobo'}. Hak Cipta Dilindungi.
              </p>
              <div className="flex space-x-6 text-gray-400">
                <span className="hover:text-white transition-colors cursor-pointer">Kebijakan Privasi</span>
                <span className="hover:text-white transition-colors cursor-pointer">Syarat & Ketentuan</span>
                <span className="hover:text-white transition-colors cursor-pointer">Bantuan</span>
              </div>
            </div>
          </div>
        </div>
      </footer>

      {/* Floating WhatsApp Button */}
      <WhatsAppFloat />
    </div>
    </>
  )
}