'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import {
  Globe, Mail, Phone, MapPin,
  Twitter, Facebook, Linkedin, Instagram,
  ArrowRight, Shield, CheckCircle, Star, Heart
} from 'lucide-react';
import Image from 'next/image';

export interface MenuItem {
  id: string;
  menu_title: string;
  title: string;
  type: string;
  link: string;
  parent_id: string | null;
  sort_order: number;
  children: MenuItem[];
}

interface FooterProps {
  footer1?: MenuItem[] | null;
  footer2?: MenuItem[] | null;
  footer3?: MenuItem[] | null;
  logoData?: {
    data: {
      footer_logo?: string;
      footer_logo_alt?: string;
    };
  } | null;
}

// ─── Fallback menus ───────────────────────────────────────────────────────────

const FALLBACK_FOOTER_1: MenuItem[] = [
  { id: 'f1-1', menu_title: 'Services', title: 'Guest Posting',    type: 'custom_link', link: '#services', parent_id: null, sort_order: 0, children: [] },
  { id: 'f1-2', menu_title: 'Services', title: 'Content Writing',  type: 'custom_link', link: '#services', parent_id: null, sort_order: 1, children: [] },
  { id: 'f1-3', menu_title: 'Services', title: 'SEO Optimization', type: 'custom_link', link: '#services', parent_id: null, sort_order: 2, children: [] },
  { id: 'f1-4', menu_title: 'Services', title: 'Link Building',    type: 'custom_link', link: '#services', parent_id: null, sort_order: 3, children: [] },
  { id: 'f1-5', menu_title: 'Services', title: 'Digital PR',       type: 'custom_link', link: '#services', parent_id: null, sort_order: 4, children: [] },
];

const FALLBACK_FOOTER_2: MenuItem[] = [
  { id: 'f2-1', menu_title: 'Company', title: 'About Us',     type: 'custom_link', link: '#about',        parent_id: null, sort_order: 0, children: [] },
  { id: 'f2-2', menu_title: 'Company', title: 'Our Process',  type: 'custom_link', link: '#how-it-works', parent_id: null, sort_order: 1, children: [] },
  { id: 'f2-3', menu_title: 'Company', title: 'Portfolio',    type: 'custom_link', link: '#portfolio',    parent_id: null, sort_order: 2, children: [] },
  { id: 'f2-4', menu_title: 'Company', title: 'Testimonials', type: 'custom_link', link: '#testimonials', parent_id: null, sort_order: 3, children: [] },
  { id: 'f2-5', menu_title: 'Company', title: 'Contact',      type: 'custom_link', link: '#contact',      parent_id: null, sort_order: 4, children: [] },
];

const FALLBACK_FOOTER_3: MenuItem[] = [
  { id: 'f3-1', menu_title: 'Resourses', title: 'Blog',          type: 'custom_link', link: '/blog',         parent_id: null, sort_order: 0, children: [] },
  { id: 'f3-2', menu_title: 'Resourses', title: 'Case Studies',  type: 'custom_link', link: '/case-studies', parent_id: null, sort_order: 1, children: [] },
  { id: 'f3-3', menu_title: 'Resourses', title: 'SEO Guide',     type: 'custom_link', link: '/seo-guide',    parent_id: null, sort_order: 2, children: [] },
  { id: 'f3-4', menu_title: 'Resourses', title: 'Content Tips',  type: 'custom_link', link: '/content-tips', parent_id: null, sort_order: 3, children: [] },
  { id: 'f3-5', menu_title: 'Resourses', title: 'Help Center',   type: 'custom_link', link: '/help',         parent_id: null, sort_order: 4, children: [] },
];

const LEGAL_LINKS = [
  { name: 'Privacy Policy',   href: '/privacy'  },
  { name: 'Terms of Service', href: '/terms'    },
  { name: 'Cookie Policy',    href: '/cookies'  },
  { name: 'Refund Policy',    href: '/refunds'  },
];

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

const TRUST_BADGES = [
  { icon: Shield,      text: 'Secure Payment'  },
  { icon: CheckCircle, text: 'Verified Service' },
  { icon: Star,        text: 'Premium Quality'  },
];

// ─── Helper ───────────────────────────────────────────────────────────────────

function resolveMenu(menu: MenuItem[] | null | undefined, fallback: MenuItem[]): MenuItem[] {
  if (!menu || menu.length === 0) return fallback;
  return [...menu].sort((a, b) => a.sort_order - b.sort_order);
}

// ─── Footer Link Column ───────────────────────────────────────────────────────

function FooterLinkList({
  title,
  items,
  delay,
}: {
  title: string;
  items: MenuItem[];
  delay: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      viewport={{ once: true }}
    >
      <h3 className="text-white font-semibold mb-6 text-lg">{title}</h3>
      <ul className="space-y-3">
        {items.map((item) => (
          <li key={item.id}>
            <Link
              href={item.link}
              className="text-gray-400 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
            >
              <ArrowRight className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
              {item.title}
            </Link>
          </li>
        ))}
      </ul>
    </motion.div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export default function Footer({ footer1, footer2, footer3, logoData }: FooterProps) {
  const currentYear = new Date().getFullYear();

  const menu1 = resolveMenu(footer1, FALLBACK_FOOTER_1);
  const menu2 = resolveMenu(footer2, FALLBACK_FOOTER_2);
  const menu3 = resolveMenu(footer3, FALLBACK_FOOTER_3);

  const brandName = logoData?.data?.footer_logo_alt ?? 'OutreachExpert';

  return (
    <footer className="bg-linear-to-br from-slate-900 via-gray-900 to-slate-800 relative overflow-hidden">

      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-5 pointer-events-none">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `
              linear-gradient(30deg,  #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),
              linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),
              linear-gradient(30deg,  #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),
              linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff),
              linear-gradient(60deg,  #ffffff77 25%, transparent 25.5%, transparent 75%, #ffffff77 75%, #ffffff77),
              linear-gradient(60deg,  #ffffff77 25%, transparent 25.5%, transparent 75%, #ffffff77 75%, #ffffff77)`,
            backgroundSize: '80px 140px',
            backgroundPosition: '0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px',
          }}
        />
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">

        {/* ── Main grid: Brand (2 cols) + 3 menu columns ── */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">

          {/* Brand */}
          <div className="lg:col-span-2">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
            >
              {/* Logo */}
              <div className="flex items-center gap-3 mb-6">
                {logoData?.data?.footer_logo ? (
                  <Image
                    src={logoData.data.footer_logo}
                    alt={brandName}
                    width={40}
                    height={40}
                    className="h-10 w-auto object-contain"
                  />
                ) : (
                  <>
                    <div className="w-10 h-10 bg-linear-to-r from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
                      <Globe className="h-6 w-6 text-white" />
                    </div>
                    <span className="text-2xl font-bold text-white">{brandName}</span>
                  </>
                )}
              </div>

              <p className="text-gray-300 mb-6 leading-relaxed max-w-md">
                Premium guest posting services that drive real results. Get featured on
                high-authority websites and boost your SEO rankings with our expert
                publishing network.
              </p>

              {/* Contact */}
              <div className="space-y-3 mb-6">
                <div className="flex items-center gap-3 text-gray-300">
                  <Mail className="h-4 w-4 text-blue-400 shrink-0" />
                  <span>hello@outreachexpert.com</span>
                </div>
                <div className="flex items-center gap-3 text-gray-300">
                  <Phone className="h-4 w-4 text-green-400 shrink-0" />
                  <span>+1 (555) 123-4567</span>
                </div>
                <div className="flex items-center gap-3 text-gray-300">
                  <MapPin className="h-4 w-4 text-red-400 shrink-0" />
                  <span>New York, NY 10001</span>
                </div>
              </div>

              {/* Socials */}
              <div className="flex items-center gap-4 mb-6">
                {SOCIAL_LINKS.map((s) => (
                  <motion.a
                    key={s.label}
                    href={s.href}
                    whileHover={{ scale: 1.1, y: -2 }}
                    className="w-10 h-10 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl flex items-center justify-center text-gray-400 hover:text-white transition-all duration-300"
                    aria-label={s.label}
                  >
                    <s.icon className="h-4 w-4" />
                  </motion.a>
                ))}
              </div>

              {/* Trust badges */}
              <div className="flex flex-wrap gap-4">
                {TRUST_BADGES.map((badge, i) => (
                  <motion.div
                    key={badge.text}
                    initial={{ opacity: 0, scale: 0.8 }}
                    whileInView={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.4, delay: i * 0.1 }}
                    viewport={{ once: true }}
                    className="flex items-center gap-2 text-xs text-gray-400"
                  >
                    <badge.icon className="h-3 w-3" />
                    <span>{badge.text}</span>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>

          {/* Menu 1 — Services */}
          <FooterLinkList title={menu1[0].menu_title}  items={menu1} delay={0.1} />

          {/* Menu 2 — Company */}
          <FooterLinkList title={menu2[0].menu_title}   items={menu2} delay={0.2} />

          {/* Menu 3 — Resources */}
          <FooterLinkList title={menu3[0].menu_title} items={menu3} delay={0.3} />
        </div>

        {/* ── Newsletter ── */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
          className="bg-linear-to-r from-blue-500/10 to-purple-500/10 rounded-2xl p-6 md:p-8 border border-white/10 mb-12"
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8 items-center">
            <div>
              <h3 className="text-xl md:text-2xl font-bold text-white mb-3">Stay Updated</h3>
              <p className="text-gray-300 text-sm md:text-base">
                Get the latest SEO tips, guest posting insights, and industry news delivered to your inbox.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-3">
              <input
                type="email"
                placeholder="Enter your email"
                className="flex-1 px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 text-sm md:text-base"
              />
              <button className="bg-linear-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-xl font-semibold hover:from-blue-600 hover:to-purple-600 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 whitespace-nowrap text-sm md:text-base">
                Subscribe
              </button>
            </div>
          </div>
        </motion.div>

        {/* ── Bottom bar ── */}
        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.6, delay: 0.5 }}
              viewport={{ once: true }}
              className="text-gray-400 text-sm flex items-center gap-2 text-center md:text-left flex-wrap justify-center md:justify-start"
            >
              <span>© {currentYear} {brandName}. All rights reserved.</span>
              <span className="hidden sm:inline">•</span>
              <span className="flex items-center gap-1">
                Made with <Heart className="h-3 w-3 text-red-400 mx-1" /> for our clients
              </span>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.6, delay: 0.6 }}
              viewport={{ once: true }}
              className="flex flex-wrap justify-center gap-4 md:gap-6"
            >
              {LEGAL_LINKS.map((link) => (
                <Link
                  key={link.name}
                  href={link.href}
                  className="text-gray-400 hover:text-white transition-colors duration-200 text-xs md:text-sm"
                >
                  {link.name}
                </Link>
              ))}
            </motion.div>
          </div>
        </div>
      </div>

      {/* Decorative blobs */}
      <div className="absolute bottom-10 left-10  w-4 h-4 bg-blue-400/20   rounded-full animate-pulse pointer-events-none" />
      <div className="absolute top-20  right-20  w-3 h-3 bg-purple-400/20  rounded-full animate-pulse pointer-events-none" />
      <div className="absolute top-40  left-1/4  w-2 h-2 bg-cyan-400/20    rounded-full animate-pulse pointer-events-none" />
    </footer>
  );
}