'use client';

import { motion } from 'framer-motion';
import { FaInstagram, FaLinkedinIn, FaTwitter, FaYoutube } from 'react-icons/fa6';

const socials = [
  { icon: FaInstagram, label: 'Instagram', href: 'https://instagram.com/techtan.ng' },
  { icon: FaTwitter, label: 'Twitter', href: 'https://twitter.com/techtan_ng' },
  { icon: FaLinkedinIn, label: 'LinkedIn', href: 'https://linkedin.com/company/techtan' },
  { icon: FaYoutube, label: 'YouTube', href: 'https://youtube.com/@techtan' },
];

const tracks = [
  'Web Development',
  'Data Analytics',
  'Product Design',
  'Digital Marketing',
  'AI & Automation',
];

export default function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <motion.footer
      className="bg-white text-gray-700 mt-20"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, amount: 0.05 }}
      transition={{ duration: 0.6 }}
    >
      {/* Top accent bar */}
      <div className="h-px bg-gradient-to-r from-transparent via-orange-500/60 to-transparent" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6">

        {/* Grid */}
        <div className="py-14 grid grid-cols-1 sm:grid-cols-3 gap-10">

          {/* Brand */}
          <div className="flex flex-col items-center sm:items-start gap-4">
            <p className="text-md text-gray-800 leading-relaxed font-medium text-center sm:text-left max-w-xs">
              Empowering the next generation of African tech talents through world-class, industry-aligned training.
            </p>

            <div className="flex items-center gap-3">
              {socials.map(({ icon: Icon, label, href }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="w-9 h-9 rounded-xl bg-gray-100 border border-gray-200 flex items-center justify-center text-gray-600 hover:text-white hover:bg-orange-500 hover:border-orange-500 transition-all duration-200"
                >
                  <Icon className="w-4 h-4" />
                </a>
              ))}
            </div>
          </div>

          {/* Tracks */}
          <div className="flex flex-col items-center justify-center gap-3">
            <p className="text-xs font-bold text-gray-900 uppercase tracking-widest">Tracks</p>
            <ul className="flex flex-col space-y-2 items-center ">
              {tracks.map((track) => (
                <li
                  key={track}
                  className="text-sm text-gray-900 hover:text-orange-500 font-medium transition cursor-default"
                >
                  {track}
                </li>
              ))}
            </ul>
          </div>

          {/* Program */}
          <div className="flex flex-col items-center sm:items-start gap-3">
            <p className="text-xs font-bold text-gray-900 uppercase tracking-widest">Program</p>
            <ul className="space-y-2 text-center sm:text-left font-medium">
              <li className="text-sm text-gray-900">3 Months · Intensive</li>
              <li className="text-sm text-gray-900">5 Specialisations</li>
              <li className="text-sm text-gray-900">Live Mentorship</li>
              <li className="text-sm text-gray-900">Certificate on Completion</li>
              <li className="text-sm text-gray-900">Alumni Network Access</li>
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="h-px bg-gray-200" />

        {/* Bottom */}
        <div className="py-6 flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-sm text-gray-900 tracking-wide font-medium">
            © {currentYear}{' '}
            <span className="text-gray-900 font-medium">TechTan</span>. All rights reserved.
          </p>
        </div>
      </div>

      {/* Big wordmark */}
      <div className="overflow-hidden bg-gray-100">
        <p
          className="text-gray-300 font-black uppercase text-center select-none leading-none"
          style={{
            fontSize: 'clamp(3.5rem, 18vw, 14rem)',
            letterSpacing: '-0.03em',
            paddingTop: '0.15em',
            paddingBottom: '0.05em',
          }}
        >
          TECHTAN
        </p>
      </div>
    </motion.footer>
  );
}