'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Twitter, Instagram, Linkedin, CheckCircle } from 'lucide-react';

type BrandingData = {
  site_name: string;
  logo_url: string | null;
  tagline: string | null;
};

const FOOTER_LINKS = {
  Properties: [
    { label: 'Buy',          href: '/listings?listing_type=sale' },
    { label: 'Rent',         href: '/listings?listing_type=rent' },
    { label: 'Off-Plan',     href: '/listings?completion_status=off_plan' },
    { label: 'Commercial',   href: '/listings?property_type_id=3' },
    { label: 'New Projects', href: '/developer' },
  ],
  Company: [
    { label: 'About Us',  href: '/about' },
    { label: 'Careers',   href: '#' },
    { label: 'Press',     href: '#' },
    { label: 'Contact',   href: '/contact' },
  ],
  Agents: [
    { label: 'Find an Agent',   href: '/agency' },
    { label: 'Become an Agent', href: '/register' },
    { label: 'Agency Login',    href: '/login' },
    { label: 'RERA Guidelines', href: '#' },
  ],
  Support: [
    { label: 'Help Center',     href: '#' },
    { label: 'Privacy Policy',  href: '/privacy' },
    { label: 'Terms of Service', href: '#' },
    { label: 'Sitemap',         href: '#' },
  ],
};

const SOCIAL = [
  { icon: Twitter,   href: '#', label: 'Twitter'   },
  { icon: Instagram, href: '#', label: 'Instagram' },
  { icon: Linkedin,  href: '#', label: 'LinkedIn'  },
];

const COMPLIANCE_BADGES = ['RERA Verified', 'DLD Registered', 'ISO 27001 Secure'];

export function Footer() {
  const [branding, setBranding] = useState<BrandingData | null>(null);

  useEffect(() => {
    fetch('/api/settings/branding')
      .then((res) => res.json())
      .then((data) => { if (data.success) setBranding(data.data); })
      .catch(() => {});
  }, []);

  return (
    <footer className="bg-[#0d1c32] text-white">
      {/* ── CTA Banner ──────────────────────────────────────── */}
      <div className="border-b border-white/10">
        <div className="max-w-7xl mx-auto px-6 lg:px-20 py-14
          flex flex-col md:flex-row items-center justify-between gap-8">
          <div>
            <h3 className="font-serif text-2xl md:text-3xl font-bold mb-2">
              Ready to find your sanctuary?
            </h3>
            <p className="text-white/55 text-sm">
              List your property or connect with verified agents today.
            </p>
          </div>
          <div className="flex items-center gap-4 flex-shrink-0">
            <Link
              href="/listings"
              className="px-7 py-3 border border-[#098E4B] text-[#098E4B] text-xs font-bold
                uppercase tracking-widest hover:bg-[#098E4B] hover:text-white
                transition-all duration-200"
            >
              Browse Properties
            </Link>
            <Link
              href="/register"
              className="px-7 py-3 bg-[#098E4B] text-white text-xs font-bold
                uppercase tracking-widest hover:bg-[#077a3f] transition-colors duration-200"
            >
              Get Started
            </Link>
          </div>
        </div>
      </div>

      {/* ── Main Footer ─────────────────────────────────────── */}
      <div className="max-w-7xl mx-auto px-6 lg:px-20 py-16">
        <div className="grid grid-cols-2 md:grid-cols-6 gap-10">
          {/* Brand column */}
          <div className="col-span-2">
            <Link href="/" className="inline-block mb-5">
              <span className="font-black text-2xl tracking-tighter uppercase text-white">
                {branding?.site_name ?? 'Wild Dubai'}
              </span>
            </Link>
            <p className="text-white/50 text-sm leading-relaxed mb-6 max-w-xs">
              {branding?.tagline ?? 'Dubai’s premier real estate marketplace. Connecting buyers, renters, and investors with verified properties and licensed agents since 2024.'}
            </p>
            {/* Social icons */}
            <div className="flex gap-3">
              {SOCIAL.map(({ icon: Icon, href, label }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  className="w-9 h-9 rounded-full bg-white/8 border border-white/10 flex
                    items-center justify-center text-white/50 hover:text-[#098E4B]
                    hover:border-[#098E4B]/40 transition-all duration-200"
                >
                  <Icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {Object.entries(FOOTER_LINKS).map(([group, links]) => (
            <div key={group}>
              <h4 className="text-white text-[11px] font-bold uppercase tracking-widest mb-5">
                {group}
              </h4>
              <ul className="space-y-3">
                {links.map(({ label, href }) => (
                  <li key={label}>
                    <Link
                      href={href}
                      onClick={(e) => {
                        if (href === '#') {
                          e.preventDefault();
                        }
                      }}
                      className="text-white/50 hover:text-[#098E4B] transition-colors
                        duration-200 text-sm"
                    >
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* ── Bottom bar ──────────────────────────────────────── */}
      <div className="border-t border-white/8">
        <div className="max-w-7xl mx-auto px-6 lg:px-20 py-6
          flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-white/30 text-xs">
            © {new Date().getFullYear()} {branding?.site_name ?? 'Wild Dubai'}. All rights reserved.
          </p>

          {/* Compliance badges */}
          <div className="flex flex-wrap items-center justify-center gap-6">
            {COMPLIANCE_BADGES.map((badge) => (
              <span
                key={badge}
                className="flex items-center gap-1.5 text-white/30 text-xs"
              >
                <CheckCircle className="w-3.5 h-3.5 text-[#098E4B]" />
                {badge}
              </span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}