"use client";

import Link from "next/link";
import {
  Facebook,
  Twitter,
  Instagram,
  Youtube,
  Mail,
  Phone,
  MapPin,
  Send,
} from "lucide-react";
import Image from "next/image";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useLanguage } from "@/src/hooks/LanguageContext";

export default function Footer() {
  const socialLinks = [
    {
      icon: Facebook,
      url: "https://www.facebook.com/givegita",
      label: "Facebook",
    },
    {
      icon: Instagram,
      url: "https://www.instagram.com/vrindavanchandra.das/?hl=en",
      label: "Instagram",
    },
    {
      icon: Send, // Telegram
      url: "https://t.me/givegita",
      label: "Telegram",
    },
    {
      icon: Twitter,
      url: "https://twitter.com/givegita",
      label: "Twitter",
    },
    {
      icon: Youtube,
      url: "https://www.youtube.com/givegita",
      label: "YouTube",
    },
  ];
  const { language } = useLanguage();
  const t = getTranslation(language);

  return (
    <footer className="bg-gray-900 text-gray-300 border-t border-gray-800">
      <div className="container mx-auto px-4 py-14 pb-2">
        {/* GRID */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          {/* BRAND BLOCK */}
          <div>
            <div className="flex items-center space-x-3 mb-5">
              {/* <div className="w-12 h-12 rounded-full bg-[#FAA631] flex items-center justify-center">
                <span className="text-white font-bold text-xl">G</span>
              </div>
              <span className="text-xl font-semibold text-white leading-tight">
                Give Gita Olympiad
              </span> */}
              <Image
                src="/images/logo.png"
                alt="trophy"
                width={65}
                height={65}
                className="w-15 h-15 md:w-20 md:h-20 object-contain bg-white"
              />
            </div>

            <p className="text-sm text-gray-400 leading-relaxed mb-5 max-w-xs">
              {t.footer.description}
            </p>

            <div className="flex space-x-4">
              {socialLinks.map(({ icon: Icon, url, label }, idx) => (
                <a
                  key={idx}
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="w-9 h-9 flex items-center justify-center text-gray-300 rounded-lg bg-gray-800 hover:bg-[#FAA631] hover:text-white transition"
                >
                  <Icon size={18} className=" " />
                </a>
              ))}
            </div>
          </div>

          {/* QUICK LINKS */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">
              {t.footer.quickLinks}
            </h3>
            <ul className="space-y-3 text-sm">
              {/* <li>
                <Link
                  href="/olympiad/register"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.register}
                </Link>
              </li> */}
              <li>
                <Link
                  href="/course/online"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.gitaCourse}
                </Link>
              </li>
              <li>
                <Link href="/faq" className="hover:text-[#FAA631] transition">
                  {t.footer.faq}
                </Link>
              </li>
              <li>
                <Link
                  href="/donate"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.donate}
                </Link>
              </li>
              {/* <li>
                <Link
                  href="/ai-chatbot"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.chatbot}
                </Link>
              </li> */}
            </ul>
          </div>

          {/* ABOUT */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">
              {t.footer.aboutTitle}
            </h3>
            <ul className="space-y-3 text-sm">
              <li>
                <Link href="/about" className="hover:text-[#FAA631] transition">
                  {t.footer.aboutUs}
                </Link>
              </li>
              {/* <li>
                <Link
                  href="/privacy"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.privacy}
                </Link>
              </li>
              <li>
                <Link
                  href="/terms"
                  className="hover:text-[#FAA631] transition"
                >
                  Terms &amp; Conditions
                </Link>
              </li> */}
              <li>
                <Link
                  href="/legal"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.legalDocuments}
                </Link>
              </li>
              <li>
                <Link
                  href="/contact"
                  className="hover:text-[#FAA631] transition"
                >
                  {t.footer.contact}
                </Link>
              </li>
            </ul>
          </div>

          {/* CONTACT INFO */}
          <div>
            <h3 className="text-lg font-semibold text-white mb-4">
              {t.footer.contactTitle}
            </h3>
            <ul className="space-y-4 text-sm">
              <li className="flex items-start gap-3">
                <Mail size={18} className="text-[#FAA631] mt-1" />
                <span>info@givegita.com</span>
              </li>
              <li className="flex items-start gap-3">
                <Phone size={18} className="text-[#FAA631] mt-1" />
                <span>+91 98765 43210</span>
              </li>
              <li className="flex items-start gap-3">
                <MapPin size={18} className="text-[#FAA631] mt-1" />
                <span>
                  ISKCON Campus
                  <br />
                  New Delhi, India
                </span>
              </li>
            </ul>
          </div>
        </div>

        {/* APP DOWNLOAD BANNER */}
        <div className="mt-12 pt-8 border-t border-gray-800">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6 bg-gray-800/60 rounded-2xl px-6 md:px-10 py-6 border border-gray-700">
            {/* Left text */}
            <div className="text-center md:text-left">
              <p className="text-white font-bold text-lg md:text-xl mb-1">
                {t.footer.getApp}
              </p>
              <p className="text-gray-400 text-sm">
                {t.footer.getAppDesc}
              </p>
            </div>

            {/* Store Buttons */}
            <div className="flex flex-col sm:flex-row gap-3 shrink-0">
              {/* Google Play */}
              <a
                href="https://play.google.com/store/apps/details?id=com.givegita"
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-3 bg-gray-900 hover:bg-[#FAA631] border border-gray-700 hover:border-[#FAA631] text-white px-4 py-2.5 rounded-xl transition-all duration-300"
              >
                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0" fill="none">
                  <path d="M3.18 23.76c.3.17.65.19.97.07L14.84 12 3.17.17A1.1 1.1 0 0 0 3 .77v22.46c0 .2.06.38.18.53z" fill="#EA4335"/>
                  <path d="M19.25 9.23 16.1 7.47 12.62 12l3.48 4.53 3.15-1.76A2.15 2.15 0 0 0 20.5 12a2.15 2.15 0 0 0-1.25-2.77z" fill="#FBBC04"/>
                  <path d="M3.18.17 16.1 7.47 12.62 12 3.17.17z" fill="#4285F4"/>
                  <path d="M3.18 23.83 16.1 16.53 12.62 12 3.17 23.83z" fill="#34A853"/>
                </svg>
                <div>
                  <div className="text-[9px] font-medium uppercase tracking-wide text-gray-400 group-hover:text-white/80 leading-none">{t.footer.getItOn}</div>
                  <div className="text-sm font-bold leading-tight">{t.footer.googlePlay}</div>
                </div>
              </a>

              {/* App Store */}
              <a
                href="https://apps.apple.com/app/givegita"
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-3 bg-gray-900 hover:bg-[#FAA631] border border-gray-700 hover:border-[#FAA631] text-white px-4 py-2.5 rounded-xl transition-all duration-300"
              >
                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-white">
                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                </svg>
                <div>
                  <div className="text-[9px] font-medium uppercase tracking-wide text-gray-400 group-hover:text-white/80 leading-none">{t.footer.downloadOnThe}</div>
                  <div className="text-sm font-bold leading-tight">{t.footer.appStore}</div>
                </div>
              </a>
            </div>
          </div>
        </div>

        {/* COPYRIGHT + LEGAL */}
        <div className="mt-6 pt-6 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500">
          <div className="text-center md:text-left">
            © {new Date().getFullYear()} {t.footer.copyright}
          </div>
          {/* <div className="flex gap-6">
            <Link href="/privacy" className="hover:text-[#FAA631] transition">
              Privacy Policy
            </Link>
            <Link href="/terms" className="hover:text-[#FAA631] transition">
              Terms &amp; Conditions
            </Link>
          </div> */}
        </div>
      </div>
    </footer>
  );
}