import { useRef } from "react";
import { Link } from "@tanstack/react-router";
import { motion, useScroll, useTransform } from "motion/react";
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
import logo from "@/assets/belarsen-logo-light.png";
import RollerReveal from "./RollerReveal";

const NAV = [
  { label: "Products", hash: "products" },
  { label: "Projects", hash: "projects" },
  { label: "About", hash: "about" },
] as const;
const SOCIALS = [
  { icon: Instagram, label: "Instagram" },
  { icon: Facebook, label: "Facebook" },
  { icon: Twitter, label: "Twitter" },
  { icon: Linkedin, label: "LinkedIn" },
];

export default function Footer() {
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end end"] });
  const wipe = useTransform(scrollYProgress, [0, 0.6], ["100%", "0%"]);
  const logoScale = useTransform(scrollYProgress, [0.1, 0.6], [0.85, 1]);
  const logoOpacity = useTransform(scrollYProgress, [0.1, 0.5], [0, 1]);

  return (
    <footer
      id="contact"
      ref={ref}
      className="relative w-full overflow-hidden border-t border-ink/10 py-24"
    >
      <motion.div
        aria-hidden="true"
        style={{ y: wipe }}
        className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,#252220_0%,#1c1a17_60%)]"
      />
      <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-120px" }}
          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
          className="flex flex-col items-start gap-8 md:flex-row md:items-end md:justify-between"
        >
          <RollerReveal
            as="div"
            className="max-w-2xl text-5xl leading-[1.05] font-black tracking-tighter text-white sm:text-7xl"
          >
            <h2>
              Let&apos;s colour
              <span className="text-brand"> your world.</span>
            </h2>
          </RollerReveal>

          <Link
            to="/contact"
            className="rounded-full bg-brand px-7 py-3 text-sm font-semibold text-white transition-transform duration-300 hover:scale-105 hover:shadow-[0_0_28px_rgba(239,59,54,0.45)] active:scale-95"
          >
            Get a Quote
          </Link>
        </motion.div>

        <motion.img
          src={logo}
          alt="Belarsen Quality Paints"
          width={1863}
          height={427}
          style={{ scale: logoScale, opacity: logoOpacity }}
          className="mt-20 h-auto w-full max-w-3xl origin-left"
        />

        <div className="mt-16 grid grid-cols-2 gap-10 border-t border-white/10 pt-12 md:grid-cols-3">
          <div className="col-span-2 md:col-span-1">
            <p className="max-w-xs text-sm leading-relaxed font-light text-gray-400">
              Quality paints, textures and finishes for buildings across Rajasthan.
            </p>
          </div>

          <nav aria-label="Footer navigation">
            <h3 className="text-xs font-bold tracking-widest text-gray-400 uppercase">Navigate</h3>
            <ul className="mt-4 space-y-3">
              {NAV.map((item) => (
                <li key={item.label}>
                  <Link
                    to="/"
                    hash={item.hash}
                    className="group relative text-sm text-gray-300 transition-colors hover:text-white"
                  >
                    {item.label}
                    <span className="absolute -bottom-1 left-0 h-px w-0 bg-brand transition-all duration-300 group-hover:w-full" />
                  </Link>
                </li>
              ))}
              <li>
                <Link
                  to="/contact"
                  className="group relative text-sm text-gray-300 transition-colors hover:text-white"
                >
                  Contact
                  <span className="absolute -bottom-1 left-0 h-px w-0 bg-brand transition-all duration-300 group-hover:w-full" />
                </Link>
              </li>
            </ul>
          </nav>

          <address className="text-sm font-light text-gray-400 not-italic">
            <h3 className="text-xs font-bold tracking-widest text-gray-400 uppercase">Contact</h3>
            <ul className="mt-4 space-y-3">
              <li>
                <a href="tel:+919828898283" className="hover:text-white">
                  +91 9828898283
                </a>
              </li>
              <li>
                <a href="mailto:info@belarsen.com" className="hover:text-white">
                  info@belarsen.com
                </a>
              </li>
              <li>
                <a href="mailto:support@belarsen.com" className="hover:text-white">
                  support@belarsen.com
                </a>
              </li>
              <li>
                <a href="https://www.belarsen.com" className="hover:text-white">
                  www.belarsen.com
                </a>
              </li>
            </ul>
            <div className="mt-6 flex gap-3">
              {SOCIALS.map(({ icon: Icon, label }) => (
                <a
                  key={label}
                  href="#contact"
                  aria-label={label}
                  className="rounded-full border border-white/10 bg-white/5 p-2.5 text-gray-300 backdrop-blur-md transition-colors hover:border-brand hover:text-white"
                >
                  <Icon size={16} aria-hidden="true" />
                </a>
              ))}
            </div>
          </address>
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-white/5 pt-8 text-xs text-gray-600 sm:flex-row">
          <p>© {new Date().getFullYear()} Belarsen Quality Paints. All rights reserved.</p>
          <div className="flex gap-6">
            <Link to="/privacy-policy" className="hover:text-gray-300">
              Privacy Policy
            </Link>
            <Link to="/terms" className="hover:text-gray-300">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}