import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { FooterSocialLinks } from './FooterSocialLinks';

const footerLinks = {
  'About Us': [
    { name: 'Our Mission', href: '/about-us#mission' },
    { name: 'SSEOA Team', href: '/our-leadership' },
    { name: 'Our Policies', href: '/policies' },
    { name: 'Careers', href: '/careers' },
  ],
  'Get Involved': [
    { name: 'Donate', href: '/donate' },
    { name: 'Volunteer', href: '/contact-us' },
    { name: 'Work with Us', href: '/careers' },
    { name: 'Procurement', href: '/procurement' },
  ],
  Resources: [
    { name: 'Blog', href: '/blog' },
    { name: 'Stories', href: '/blog?category=story' },
    { name: 'Reports', href: '/reports' },
    { name: 'Articles', href: '/articles' },
    { name: 'Contact', href: '/contact-us' },
  ],
};

/**
 * Site footer — light editorial layout with brand, links, and contact
 */
export const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-navy-800 text-white">
      <div className="h-1.5 bg-primary-500" />

      <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 md:py-16 lg:px-8">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-10">
          {/* Brand */}
          <div className="lg:col-span-4">
            <Link href="/" className="inline-block">
              <Image
                src="/logo/logo-png.png"
                alt="SSEOA Logo"
                width={220}
                height={72}
                className="h-16 w-auto object-contain sm:h-20"
                quality={100}
                unoptimized
              />
            </Link>
            <p className="mt-5 max-w-sm text-sm leading-relaxed text-white/70">
              Shining Star Educational Organization of Afghanistan — working with communities to
              deliver education, opportunity, and lasting change.
            </p>

            <FooterSocialLinks />

            <Link
              href="/donate"
              className="mt-7 inline-flex items-center gap-2 rounded-lg bg-primary-500 px-5 py-2.5 text-sm font-bold text-neutral-900 transition-colors hover:bg-primary-400"
            >
              Donate now
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </Link>
          </div>

          {/* Link columns */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-5">
            {Object.entries(footerLinks).map(([title, links]) => (
              <div key={title}>
                <h3 className="text-xs font-bold uppercase tracking-widest text-primary-400">
                  {title}
                </h3>
                <ul className="mt-4 space-y-2.5">
                  {links.map((link) => (
                    <li key={link.name}>
                      <Link
                        href={link.href}
                        className="text-sm font-medium text-white/75 transition-colors hover:text-primary-400"
                      >
                        {link.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* Contact */}
          <div className="lg:col-span-3">
            <h3 className="text-xs font-bold uppercase tracking-widest text-primary-400">
              Contact Us
            </h3>
            <ul className="mt-4 space-y-4">
              <li className="flex items-start gap-3">
                <svg
                  className="mt-0.5 h-5 w-5 shrink-0 text-primary-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.75}
                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                  />
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.75}
                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>
                <address className="text-sm not-italic leading-relaxed text-white/75">
                  House #6, Street #7
                  <br />
                  Qala-e-Fatullah
                  <br />
                  Kabul, Afghanistan
                </address>
              </li>
              <li className="flex items-center gap-3">
                <svg
                  className="h-5 w-5 shrink-0 text-primary-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.75}
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
                <a
                  href="tel:+93729070021"
                  className="text-sm font-medium text-white/75 transition-colors hover:text-primary-400"
                >
                  +93 72 907 0021
                </a>
              </li>
              <li className="flex items-center gap-3">
                <svg
                  className="h-5 w-5 shrink-0 text-primary-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  aria-hidden
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={1.75}
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
                <a
                  href="mailto:info@sseoa.af"
                  className="text-sm font-medium text-white/75 transition-colors hover:text-primary-400"
                >
                  info@sseoa.af
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10 bg-navy-900">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-4 py-5 text-sm text-white/50 sm:px-6 md:flex-row lg:px-8">
          <p>© {currentYear} SSEOA. All rights reserved.</p>
          <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1">
            <Link href="/policies" className="transition-colors hover:text-primary-400">
              Privacy Policy
            </Link>
            <Link href="/policies" className="transition-colors hover:text-primary-400">
              Terms of Service
            </Link>
            <Link href="/cfrm" className="transition-colors hover:text-primary-400">
              Feedback &amp; Complaints
            </Link>
            <span className="hidden h-3 w-px bg-white/20 md:block" />
            <a
              href="https://artisan.af"
              target="_blank"
              rel="noopener noreferrer"
              className="transition-colors hover:text-primary-400"
            >
              Created by artisan.af
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
};