'use client'

import Image from 'next/image'
import {
  MapPin,
  Mail,
  Phone,
  Globe,
  MessageCircle,
  AtSign,
} from 'lucide-react'

const quickLinks = [
  { label: 'Beranda', href: '#beranda' },
  { label: 'Program GS4P', href: '#program' },
  { label: 'Cara Kerja', href: '#cara-kerja' },
  { label: 'Kemitraan', href: '#kemitraan' },
  { label: 'Fokus', href: '#fokus' },
  { label: 'Dampak', href: '#dampak' },
]

const socials = [
  { icon: Globe, label: 'Website' },
  { icon: MessageCircle, label: 'WhatsApp' },
  { icon: AtSign, label: 'Email' },
]

export function Footer() {
  return (
    <footer id="kontak" className="relative overflow-hidden bg-primary text-primary-foreground">
      <div className="absolute inset-0 opacity-10">
        <Image
          src="/modern-barn.png"
          alt=""
          fill
          aria-hidden="true"
          className="object-cover"
        />
      </div>
      <div className="absolute inset-0 bg-primary/85" />

      <div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-8 lg:py-20">
        <div className="grid gap-12 lg:grid-cols-4">
          {/* Brand */}
          <div className="lg:col-span-1">
            <div className="flex items-center gap-2.5">
              <span className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-primary-foreground shadow-md">
                <Image
                  src="/logo.png"
                  alt="Logo PT Mustieka Barokah Mandiri"
                  width={48}
                  height={48}
                  className="h-full w-full object-contain"
                />
              </span>
              <div className="leading-tight">
                <p className="font-display text-lg font-extrabold">PT MBM</p>
                <p className="text-[11px] uppercase tracking-[0.14em] text-primary-foreground/60">
                  Mustieka Barokah Mandiri
                </p>
              </div>
            </div>
            <p className="mt-5 max-w-xs text-sm leading-relaxed text-primary-foreground/70">
              Memberdayakan Komunitas Pedesaan, Membangun Kesejahteraan Lewat
              Satu Domba.
            </p>
            <div className="mt-6 flex gap-3">
              {socials.map((s) => (
                <a
                  key={s.label}
                  href="#"
                  aria-label={s.label}
                  className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-foreground/10 text-primary-foreground/80 transition-all duration-300 hover:-translate-y-1 hover:bg-accent hover:text-primary"
                >
                  <s.icon className="h-5 w-5" />
                </a>
              ))}
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-display text-sm font-bold uppercase tracking-[0.14em] text-primary-foreground/90">
              Quick Links
            </h3>
            <ul className="mt-5 space-y-3">
              {quickLinks.map((link) => (
                <li key={link.href}>
                  <a
                    href={link.href}
                    className="group inline-flex items-center text-sm text-primary-foreground/70 transition-colors hover:text-accent"
                  >
                    <span className="mr-0 h-px w-0 bg-accent transition-all duration-300 group-hover:mr-2 group-hover:w-4" />
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="lg:col-span-2">
            <h3 className="font-display text-sm font-bold uppercase tracking-[0.14em] text-primary-foreground/90">
              Kontak
            </h3>
            <ul className="mt-5 space-y-4">
              <li className="flex items-start gap-3">
                <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10 text-accent">
                  <MapPin className="h-4 w-4" />
                </span>
                <div className="text-sm text-primary-foreground/80">
                  <p className="font-medium text-primary-foreground">Alamat</p>
                  <p>Bandung, Jawa Barat, Indonesia</p>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10 text-accent">
                  <Mail className="h-4 w-4" />
                </span>
                <div className="text-sm text-primary-foreground/80">
                  <p className="font-medium text-primary-foreground">Email</p>
                  <a
                    href="mailto:ptmustikajayabarokah@gmail.com"
                    className="transition-colors hover:text-accent"
                  >
                    ptmustikajayabarokah@gmail.com
                  </a>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10 text-accent">
                  <Phone className="h-4 w-4" />
                </span>
                <div className="text-sm text-primary-foreground/80">
                  <p className="font-medium text-primary-foreground">WhatsApp</p>
                  <a
                    href="https://wa.me/6281320521474"
                    className="transition-colors hover:text-accent"
                  >
                    +62 813-2052-1474
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-14 border-t border-primary-foreground/10 pt-6 text-center">
          <p className="text-sm text-primary-foreground/60">
            © 2026 PT Mustieka Barokah Mandiri. Seluruh hak cipta dilindungi.
          </p>
        </div>
      </div>
    </footer>
  )
}
