import { motion } from "framer-motion";
import {
  Mail,
  Phone,
  MapPin,
  Linkedin,
  Twitter,
  Github,
  Youtube,
} from "lucide-react";
import { GridPattern } from "./GridPattern";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import BlackLogo14 from "../assets/BlackLogo14";
import { useState } from "react";
import GlobalOffices from "./GlobalOffices";
import { useNavigate } from "react-router-dom";

const footerNavigation = {
  Explore: [
    { label: "Home", url: "/home" },
    { label: "Services", url: "/services" },
    { label: "AI & ML", url: "/artificial-intelligence" },
    { label: "Solutions", url: "/solutions" },
    { label: "Industries", url: "/industries" },
    { label: "Hire-Talent", url: "/hire-talent" },
    { label: "Company", url: "/company/about-wdi" },
    { label: "Resources", url: "/resources" },
    { label: "Contact", url: "/start-a-project" },
  ],
  Resources: [
    { label: "Articles", url: "/resources/blog" },
    { label: "Portfolio", url: "/case-studies" },
    {
      label: "Client Testimonials",
      url: "/resources/client-testimonials",
    },
    {
      label: "Whitepapers & Insights",
      url: "/resources/whitepapers-insights",
    },
    { label: "FAQ", url: "/resources/faqs" },
  ],
  Services: [
    {
      label: "Mobile App Development",
      url: "/services/mobile-app-development",
    },
    {
      label: "Web & Cloud Solutions",
      url: "/services/web-cloud-solutions",
    },
    {
      label: "Software Engineering",
      url: "/services/software-engineering",
    },
    {
      label: "Design & Experience",
      url: "/services/design-experience",
    },
  ],
  "AI & ML": [
    {
      label: "Artificial Intelligence Services",
      url: "/ai/artificial-intelligence-services",
    },
    {
      label: "Machine Learning Solutions",
      url: "/ai/machine-learning-solutions",
    },
  ],
  Solutions: [
    {
      label: "Digital Product Development",
      url: "/digital-product-development",
    },
    {
      label: "MVP & Startup Launch Packages",
      url: "/mvp-startup-launch",
    },
    {
      label: "Legacy System Rebuilds",
      url: "/legacy-system-rebuilds",
    },
    {
      label: "Dedicated Development Centers",
      url: "/dedicated-development-centers",
    },
    {
      label: "Business Process Automation",
      url: "/business-process-automation",
    },
    {
      label: "Compliance-Ready Systems",
      url: "/compliance-ready-systems",
    },
  ],
  HireTalent: [
    {
      label: "Hire Mobile App Developers",
      url: "/hire-talent/mobile-app-developers",
    },
    {
      label: "Hire Full Stack Developers",
      url: "/hire-talent/full-stack-developers",
    },
    {
      label: "Hire Frontend Developers",
      url: "/hire-talent/frontend-developers",
    },
    {
      label: "Hire Backend Developers",
      url: "/hire-talent/backend-developers",
    },
    {
      label: "Hire UI/UX Designers",
      url: "/hire-talent/ui-ux-designers",
    },
    {
      label: "Hire QA Engineers",
      url: "/hire-talent/qa-engineers",
    },
    {
      label: "Hire Dedicated Development Teams",
      url: "/dedicated-development-teams",
    },
  ],
  Company: [
    {
      label: "About WDI",
      url: "/company/about-wdi",
    },
    {
      label: "Leadership Team",
      url: "/company/leadership-team",
    },
    {
      label: "Careers",
      url: "/company/careers",
    },
  ],
};

const socialLinks = [
  {
    name: "LinkedIn",
    icon: Linkedin,
    url: "https://www.linkedin.com/in/website-developers-india/",
  },
  {
    name: "Twitter",
    icon: Twitter,
    url: "https://twitter.com/wdi_dev",
  },
  {
    name: "GitHub",
    icon: Github,
    url: "https://github.com/wdi",
  },
  {
    name: "YouTube",
    icon: Youtube,
    url: "https://www.youtube.com/@WebsitedevelopersindiaPvtLmtd",
  },
];

const contactInfo = [
  {
    icon: Mail,
    label: "ideas@wdipl.com",
    url: "mailto:ideas@wdipl.com",
  },
  {
    icon: Phone,
    label: "(+91) 7700900039",
    url: "tel:+917700900039",
  },
  {
    icon: MapPin,
    label:
      "614, Palm Spring Centre, Link Road, Malad (West), Mumbai - 400064. India.",
    url: "https://www.google.com/search?q=614%2C+Palm+Spring+Centre...",
    blank: true,
  },
];


// FooterSection component with useNavigate inside
const FooterSection = ({
  title,
  links,
  delay = 0,
}: {
  title: string;
  links: Array<{ label: string; url: string }>;
  delay?: number;
}) => {
  const navigate = useNavigate();

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay }}
      viewport={{ once: true }}
      className="space-y-4"
    >
      <h4 className="font-semibold text-white text-lg">
        {title}
      </h4>
      <ul className="space-y-3">
        {links.map((link) => (
          <li key={link.label}>
            <a
              href={link.url || '#'}
              onClick={(e) => {
                e.preventDefault();
                navigate(link.url);
              }}
              className="text-[#CCCCCC] hover:text-white transition-colors duration-200 text-sm block py-1 hover:translate-x-1 transform cursor-pointer"
            >
              {link.label}
            </a>
          </li>
        ))}
      </ul>
    </motion.div>
  );
};

// Newsletter subscription component
const NewsletterSection = () => {
  const [email, setEmail] = useState("");
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubscribe = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;

    setIsSubmitting(true);

    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000));

    setIsSubscribed(true);
    setIsSubmitting(false);
    setEmail("");

    // Reset success message after 3 seconds
    setTimeout(() => setIsSubscribed(false), 3000);
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: 0.5 }}
      viewport={{ once: true }}
      className="border-t border-white/10"
    >
      <div className="container mx-auto px-6 lg:px-8 py-16">
        <div className="max-w-4xl mx-auto text-center">
          <h3 className="text-2xl lg:text-3xl font-semibold text-white mb-4">
            Never Miss an Update
          </h3>
          <p className="text-[#CCCCCC] text-lg mb-8 max-w-2xl mx-auto">
            Get the latest insights on digital product
            development, AI trends, and startup success stories
            delivered to your inbox.
          </p>

          {isSubscribed ? (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              className="bg-green-500/10 border border-green-500/20 rounded-lg p-6 max-w-md mx-auto"
            >
              <div className="flex items-center justify-center gap-2 text-green-400">
                <Mail className="w-5 h-5" />
                <span className="font-medium">
                  Successfully subscribed!
                </span>
              </div>
              <p className="text-green-300 text-sm mt-2">
                Welcome to our community of innovators.
              </p>
            </motion.div>
          ) : (
            <form
              onSubmit={handleSubscribe}
              className="max-w-md mx-auto"
            >
              <div className="flex gap-3">
                <Input
                  type="email"
                  placeholder="Enter your email address"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="flex-1 bg-white/5 border-white/10 text-white placeholder:text-[#CCCCCC] focus:border-[#E5195E] focus:ring-[#E5195E]/20"
                  required
                />
                <Button
                  type="submit"
                  disabled={isSubmitting}
                  className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-6 shrink-0 disabled:opacity-50"
                >
                  {isSubmitting
                    ? "Subscribing..."
                    : "Subscribe"}
                </Button>
              </div>
              <p className="text-[#CCCCCC] text-xs mt-3">
                No spam, unsubscribe at any time. We respect
                your privacy.
              </p>
            </form>
          )}
        </div>
      </div>
    </motion.div>
  );
};

export const Footer = () => {
  return (
    <>
      <GlobalOffices />
      <footer className="relative bg-[#0E0E0E] border-t border-white/10 overflow-hidden">
        <GridPattern strokeDasharray="4 2" />

        <div className="relative z-10">
          {/* Main Footer Content */}
          <div className="container mx-auto px-6 lg:px-8 py-16">
            <div className="grid lg:grid-cols-7 gap-12">
              {/* Company Info */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
                viewport={{ once: true }}
                className="lg:col-span-2 space-y-6"
              >
                <div className="flex items-center">
                  <div className="w-12 h-12">
                    <BlackLogo14 />
                  </div>
                </div>

                <p className="text-[#CCCCCC] leading-relaxed max-w-md">
                  Website Developers India Pvt. Ltd. - Transforming ideas into scalable digital products. 25+ years of industry expertise, serving founders and CTOs across 15+ countries.
                </p>

                {/* India Office Contact Information */}
                <div className="space-y-4">
                  <h5 className="font-semibold text-white text-sm tracking-wide uppercase">
                    India Office
                  </h5>
                  <div className="space-y-3">
                    {contactInfo.map((contact) => {
                      const Icon = contact.icon;
                      return (
                        <a
                          key={contact.label}
                          href={contact.url}
                          target={contact.blank ? "_blank" : "_self"}
                          rel={contact.blank ? "noopener noreferrer" : undefined}
                          className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
                        >
                          <Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
                          <span className="text-sm leading-relaxed">
                            {contact.label}
                          </span>
                        </a>
                      );
                    })}
                  </div>
                </div>

                {/* Social Links */}
                <div className="flex gap-4 pt-4">
                  {socialLinks.map((social) => {
                    const Icon = social.icon;
                    return (
                      <a
                        key={social.name}
                        href={social.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
                        aria-label={social.name}
                      >
                        <Icon className="w-4 h-4" />
                      </a>
                    );
                  })}
                </div>
              </motion.div>

              {/* Navigation Sections */}
              <FooterSection
                title="Explore"
                links={footerNavigation.Explore}
                delay={0.1}
              />

              {/* Combined Services & Company */}
              <div className="space-y-8">
                <FooterSection
                  title="Services"
                  links={footerNavigation.Services}
                  delay={0.2}
                />
                <FooterSection
                  title="Company"
                  links={footerNavigation.Company}
                  delay={0.3}
                />
              </div>

              {/* Combined AI & ML with Resources */}
              <div className="space-y-8">
                <FooterSection
                  title="AI & ML"
                  links={footerNavigation["AI & ML"]}
                  delay={0.4}
                />
                <FooterSection
                  title="Resources"
                  links={footerNavigation.Resources}
                  delay={0.5}
                />
              </div>

              <FooterSection
                title="Solutions"
                links={footerNavigation.Solutions}
                delay={0.6}
              />

              <FooterSection
                title="Hire Talent"
                links={footerNavigation.HireTalent}
                delay={0.7}
              />
            </div>
          </div>

          {/* Newsletter Subscription Section */}
          <NewsletterSection />
        </div>
      </footer>
    </>
  );
};