'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { MessageSquare, Heart } from 'lucide-react';
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
import { GithubIcon as Github, TwitterIcon as Twitter } from '@/components/icons/BrandIcons';

export function Footer({ locale }: { locale: string }) {
  const t = useTranslations('footer');

  return (
    <footer className="w-full border-t border-slate-800 bg-slate-950 text-slate-400 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        
        {/* Brand column */}
        <div className="space-y-4 md:col-span-1">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-slate-900 border border-slate-800 flex items-center justify-center overflow-hidden">
              <img src="/logo.jpeg" alt="ayris.tech Logo" className="w-full h-full object-cover" />
            </div>
            <span className="font-bold text-white text-lg tracking-tight">ayris.tech YouTube</span>
          </div>
          <p className="text-xs leading-relaxed text-slate-400">
            Official resource portal featuring tabbed code snippets, lesson notes, starter zip downloads, and timestamps for my YouTube tutorials.
          </p>
          <div className="flex items-center gap-3 text-slate-400">
            <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" className="hover:text-red-500 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
              <Youtube className="w-4 h-4" />
            </a>
            <a href="https://github.com/ayrisdev" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
              <Github className="w-4 h-4" />
            </a>
            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="hover:text-sky-400 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
              <Twitter className="w-4 h-4" />
            </a>
            <a href="https://discord.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400 transition-colors p-2 bg-slate-900 rounded-lg border border-slate-800">
              <MessageSquare className="w-4 h-4" />
            </a>
          </div>
        </div>

        {/* Categories */}
        <div>
          <h4 className="font-semibold text-white text-sm mb-4">Popular Topics</h4>
          <ul className="space-y-2 text-xs">
            <li><Link href={`/${locale}/lessons?category=Next.js`} className="hover:text-red-400 transition-colors">Next.js 16 App Router</Link></li>
            <li><Link href={`/${locale}/lessons?category=Python%20%26%20AI`} className="hover:text-red-400 transition-colors">Python AI Agents</Link></li>
            <li><Link href={`/${locale}/lessons?category=Tailwind%20CSS`} className="hover:text-red-400 transition-colors">Tailwind CSS v4 Tips</Link></li>
            <li><Link href={`/${locale}/lessons?category=Docker%20%26%20DevOps`} className="hover:text-red-400 transition-colors">Docker & Coolify Deploy</Link></li>
          </ul>
        </div>

        {/* Quick Links */}
        <div>
          <h4 className="font-semibold text-white text-sm mb-4">Quick Links</h4>
          <ul className="space-y-2 text-xs">
            <li><Link href={`/${locale}/lessons`} className="hover:text-red-400 transition-colors">All YouTube Lessons</Link></li>
            <li><Link href={`/${locale}/cheatsheets`} className="hover:text-red-400 transition-colors">Quick Cheatsheets</Link></li>
            <li><Link href={`/${locale}/contact`} className="hover:text-red-400 transition-colors">Contact & Suggestions</Link></li>
          </ul>
        </div>

        {/* Info & Banner */}
        <div className="bg-slate-900/60 p-5 rounded-2xl border border-slate-800 flex flex-col justify-between">
          <div>
            <span className="text-xs font-bold text-red-400 block mb-1">ayris.tech YouTube Channel</span>
            <p className="text-[11px] text-slate-300 leading-normal">
              Official resource portal for all video code snippets, starter packages, and lesson notes.
            </p>
          </div>
          <div className="mt-4 pt-3 border-t border-slate-800 flex items-center justify-between text-[11px]">
            <span className="text-slate-400">Educational Portal</span>
            <span className="text-emerald-400 font-semibold flex items-center gap-1">
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Live
            </span>
          </div>
        </div>

      </div>

      {/* Bottom Bar with mandatory link */}
      <div className="max-w-7xl mx-auto pt-8 border-t border-slate-900 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
        <p className="text-slate-400">
          © {new Date().getFullYear()} ayris.tech YouTube Channel. {t('rights')}
        </p>
        
        {/* MANDATORY Created by ayris.tech LINK */}
        <div className="flex items-center gap-2">
          <span className="text-slate-400 flex items-center gap-1">
            Built with <Heart className="w-3.5 h-3.5 text-red-500 fill-red-500" />
          </span>
          <a
            href="https://ayris.tech"
            target="_blank"
            rel="noopener noreferrer"
            className="px-3 py-1 bg-red-950/60 hover:bg-red-900/80 text-red-400 hover:text-red-300 border border-red-800/40 rounded-full font-bold transition-all shadow-sm shadow-red-900/30"
          >
            Created by ayris.tech
          </a>
        </div>
      </div>
    </footer>
  );
}