"use client";

import { useState, useRef, useCallback, forwardRef, useImperativeHandle } from "react";
import {
  MapPin,
  Mail,
  Phone,
  ArrowRight,
  ArrowUp,
} from "lucide-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlug } from "@fortawesome/free-solid-svg-icons";
import { faFacebook, faInstagram, faLinkedin, faXTwitter } from "@fortawesome/free-brands-svg-icons";
import { motion, useAnimate } from "motion/react";
import Link from "next/link";

const PlugConnectedIcon = forwardRef(function PlugConnectedIcon(
  { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
  ref
) {
  const [scope, animate] = useAnimate();

  const start = useCallback(async () => {
    animate(".plug-icon", { y: -2, rotate: -8 }, { duration: 0.35, ease: "easeOut" });
  }, [animate]);

  const stop = useCallback(async () => {
    animate(
      ".plug-icon",
      { y: 0, rotate: 0, opacity: 1 },
      { duration: 0.3, ease: "easeInOut" }
    );
  }, [animate]);

  useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop }));

  return (
    <motion.div
      ref={scope}
      className={`cursor-pointer ${className}`}
      style={{ color, fontSize: size, lineHeight: 1, strokeWidth }}
      onHoverStart={start}
      onHoverEnd={stop}
    >
      <FontAwesomeIcon icon={faPlug} className="plug-icon" />
    </motion.div>
  );
});

const FacebookIcon = (props) => <FontAwesomeIcon icon={faFacebook} {...props} />;
const InstagramIcon = (props) => <FontAwesomeIcon icon={faInstagram} {...props} />;
const LinkedinIcon = (props) => <FontAwesomeIcon icon={faLinkedin} {...props} />;
const XIcon = (props) => <FontAwesomeIcon icon={faXTwitter} {...props} />;

/* ------------------------------------------------------------------ */
/*  Palette — realigned to the spec-plate industrial system            */
/*  (ink / accent-green / gold), matches the gallery section tokens    */
/* ------------------------------------------------------------------ */
const C = {
  ink: "#12241A", // deep industrial green-black — footer base
  inkDeep: "#0C1712", // deeper still, for the bottom bar
  accent: "#479530", // primary brand green
  accentSoft: "#8FB569", // light green, for text accents on dark bg
  gold: "#C9A24B", // spec-plate gold, sparing use
  line: "rgba(255,255,255,0.08)",
  muted: "rgba(255,255,255,0.6)",
};

const QUICK_LINKS = [
  { label: "Home", href: "/" },
  { label: "About Us", href: "/company-profile" },
  { label: "Contact Us", href: "/contact-us" },
  { label: "Event Exhibition", href: "/gallery" },

];

const PRODUCT_LINKS = [
  { label: "Water Treatment Plant", href: "/water-treatment-plant" },
  { label: "Sewage Treatment Plant", href: "/sewage-treatment-plant" },
  { label: "Effluent Treatment Plant", href: "/effluent-treatment-plant" },
];

const SOCIALS = [
  { icon: FacebookIcon, href: "https://www.facebook.com/ecosphereind/", label: "Facebook" },
  { icon: InstagramIcon, href: "https://www.instagram.com/ecosphere_india_storage/", label: "Instagram" },
  { icon: XIcon, href: "https://x.com/Ecosphere_Ind", label: "X (Twitter)" },
  {
    icon: LinkedinIcon,
    href: "https://www.linkedin.com/company/ecosphere-india-private-limited/?viewAsMember=true",
    label: "LinkedIn",
  },
];

/* ------------------------------------------------------------------ */

function ColumnHeading({ children }) {
  return (
    <div className="mb-7">
      <div className="font-primary font-bold uppercase tracking-tight text-xl md:text-2xl text-white mb-3">
        {children}
      </div>
      <span
        className="block h-[2px] w-10 rounded-full"
        style={{ backgroundColor: C.gold }}
      />
    </div>
  );
}

/* ------------------------------------------------------------------ */

export default function FooterSection() {
  const [hoveredLink, setHoveredLink] = useState(null);
  const plugIconRef = useRef(null);

  const scrollToTop = () => {
    if (typeof window !== "undefined") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  return (
    <footer
      className="relative overflow-hidden"
      style={{ backgroundColor: C.ink }}
    >
      {/* faint blueprint grid — ties back to the gallery section's texture */}
      <div
        className="absolute inset-0 opacity-[0.035] pointer-events-none"
        style={{
          backgroundImage:
            "linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)",
          backgroundSize: "48px 48px",
        }}
      />
      {/* soft green glow, top-left */}
      <div
        className="absolute -top-24 -left-24 w-[460px] h-[460px] rounded-full pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(71,149,48,0.18) 0%, rgba(71,149,48,0) 70%)",
        }}
      />
      {/* faint gold glow, bottom-right */}
      <div
        className="absolute -bottom-32 -right-20 w-[380px] h-[380px] rounded-full pointer-events-none"
        style={{
          background:
            "radial-gradient(circle, rgba(201,162,75,0.10) 0%, rgba(201,162,75,0) 70%)",
        }}
      />

      <div className="relative max-w-[90vw] mx-auto pt-20 pb-14 md:pt-24 md:pb-16">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-10">
          {/* ---------------------------------------------------- */}
          {/* About company                                         */}
          {/* ---------------------------------------------------- */}
          <div className="md:col-span-5">
            <ColumnHeading>About Company</ColumnHeading>
            <p className="text-sm md:text-[15px] leading-relaxed text-white/70 max-w-md">
              Ecosphere India Pvt. Ltd. one of the leading Zinc Aluminium
              Storage Tank Manufacturers in Uttar Pradesh, India, offers Zinc
              Aluminium Water Tank, Zinc Aluminium Water Storage Tank,
              Zincalume Water Tank, Zincalume Steel Water Tank, Modular Steel
              Water Tank, Grain Storage Silo, Galvanized Grain Storage Silo,
              Flat Bottom Silo, Hopper Bottom Silo, etc.
            </p>

            <div
              className="flex items-center gap-2.5 mt-8 mb-4 w-fit"
              onMouseEnter={() => plugIconRef.current?.startAnimation()}
              onMouseLeave={() => plugIconRef.current?.stopAnimation()}
            >
              <PlugConnectedIcon
                ref={plugIconRef}
                size={20}
                color={C.gold}
                strokeWidth={2}
              />
              <span className="font-primary uppercase tracking-widest text-xs font-bold text-white/80">
                Let&apos;s Connect
              </span>
            </div>

            <div className="flex items-center gap-3">
              {SOCIALS.map(({ icon: Icon, href, label }) => (
                <motion.a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  whileHover={{ y: -4, scale: 1.06 }}
                  whileTap={{ scale: 0.94 }}
                  transition={{ type: "spring", stiffness: 320, damping: 18 }}
                  className="group relative w-10 h-10 flex items-center justify-center overflow-hidden"
                  style={{
                    backgroundColor: "rgba(255,255,255,0.05)",
                    border: `1px solid ${C.line}`,
                  }}
                >
                  <span
                    className="absolute inset-0 -translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"
                    style={{ backgroundColor: C.accent }}
                  />
                  <Icon className="relative z-10 w-4 h-4 text-white" strokeWidth={1.75} />
                </motion.a>
              ))}
            </div>
          </div>

          {/* ---------------------------------------------------- */}
          {/* Quick links                                           */}
          {/* ---------------------------------------------------- */}
          <div className="md:col-span-2">
            <ColumnHeading>Quick Links</ColumnHeading>
            <nav className="flex flex-col gap-3.5">
              {QUICK_LINKS.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  // target="_blank"
                  rel="noopener noreferrer"
                  onMouseEnter={() => setHoveredLink(link.label)}
                  onMouseLeave={() => setHoveredLink(null)}
                  className="group relative w-fit flex items-center gap-2.5 text-[15px] font-medium transition-colors duration-300"
                  style={{
                    color:
                      hoveredLink === link.label ? C.accentSoft : "#FFFFFF",
                  }}
                >
                  <ArrowRight
                    className="w-3.5 h-3.5 shrink-0 transition-transform duration-300 group-hover:translate-x-1.5"
                    style={{ color: C.gold }}
                    strokeWidth={2.5}
                  />
                  <span className="relative">
                    {link.label}
                    <span
                      className="absolute left-0 -bottom-0.5 h-px w-0 group-hover:w-full transition-all duration-300 ease-out"
                      style={{ backgroundColor: C.accentSoft }}
                    />
                  </span>
                </Link>
              ))}
            </nav>
          </div>

          {/* ---------------------------------------------------- */}
          {/* Products                                               */}
          {/* ---------------------------------------------------- */}
          <div className="md:col-span-2">
            <ColumnHeading>Products</ColumnHeading>
            <nav className="flex flex-col gap-2">
              {PRODUCT_LINKS.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  className="group flex items-start gap-2 rounded-md px-2 py-2 text-sm font-medium text-white/75 transition-all duration-200 hover:bg-white/[0.06] hover:text-white"
                >
                  <ArrowRight
                    className="mt-0.5 w-3.5 h-3.5 shrink-0 transition-transform duration-300 group-hover:translate-x-1"
                    style={{ color: C.gold }}
                    strokeWidth={2.5}
                  />
                  <span className="leading-snug">{link.label}</span>
                </Link>
              ))}
            </nav>
          </div>

          {/* ---------------------------------------------------- */}
          {/* Contact now                                           */}
          {/* ---------------------------------------------------- */}
          <div className="md:col-span-3">
            <ColumnHeading>Contact Now</ColumnHeading>
            <div className="flex flex-col gap-5">
              <div className="group flex items-start gap-3.5">
                <span
                  className="w-9 h-9 flex items-center justify-center shrink-0 transition-transform duration-300 group-hover:-translate-y-0.5"
                  style={{ backgroundColor: C.accent }}
                >
                  <MapPin className="w-4 h-4 text-white" strokeWidth={2} />
                </span>
                <p className="text-[15px] leading-relaxed text-white/80 pt-1.5">
                  A-1/14, Sector - 17 Swadeshi, Kavi Nagar Industrial, Area,
                  Ghaziabad, Uttar Pradesh - 201002, India
                </p>
              </div>

              <a
                href="mailto:mala.chauhan@ecosphereindia.in"
                className="group flex items-center gap-3.5"
              >
                <span
                  className="w-9 h-9 flex items-center justify-center shrink-0 transition-transform duration-300 group-hover:-translate-y-0.5"
                  style={{ backgroundColor: C.accent }}
                >
                  <Mail className="w-4 h-4 text-white" strokeWidth={2} />
                </span>
                <span className="text-[15px] text-white/80 group-hover:text-white transition-colors duration-300 break-all">
                  mala.chauhan@ecosphereindia.in
                </span>
              </a>

              <a
                href="tel:+918930400318"
                className="group flex items-center gap-3.5"
              >
                <span
                  className="w-9 h-9 flex items-center justify-center shrink-0 transition-transform duration-300 group-hover:-translate-y-0.5"
                  style={{ backgroundColor: C.accent }}
                >
                  <Phone className="w-4 h-4 text-white" strokeWidth={2} />
                </span>
                <span className="text-[15px] text-white/80 group-hover:text-white transition-colors duration-300">
                  +91 8930400318
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* ---------------------------------------------------- */}
      {/* Bottom bar                                            */}
      {/* ---------------------------------------------------- */}
      <div
        className="relative"
        style={{ backgroundColor: C.inkDeep, borderTop: `1px solid ${C.line}` }}
      >
        <div className="max-w-[90vw] mx-auto py-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-white/50 text-center md:text-left">
            Copyright © 2024–26{" "}
            <span className="text-white/80 font-medium">
              Ecosphere India Pvt. Ltd.
            </span>{" "}
            All rights reserved.
          </p>

          <motion.button
            type="button"
            onClick={scrollToTop}
            aria-label="Scroll back to top"
            whileHover={{ y: -4 }}
            whileTap={{ scale: 0.92 }}
            transition={{ type: "spring", stiffness: 320, damping: 18 }}
            className="w-11 h-11 flex items-center justify-center rounded-full shrink-0"
            style={{ backgroundColor: C.accent }}
          >
            <ArrowUp className="w-4 h-4 text-white" strokeWidth={2.5} />
          </motion.button>
        </div>
      </div>
    </footer>
  );
}