'use client'

import Link from 'next/link'
import Image from 'next/image'
import { Instagram, Facebook, Twitter } from 'lucide-react'
import { useEvent } from '@/components/event-provider'
import { formatClock, formatEventDate, venueLine } from '@/lib/event-types'

const raceLinks = [
  { href: '/race-info', label: 'Race Info' },
  { href: '/registration', label: 'Registration' },
  { href: '/my-race', label: 'My Race' },
  { href: '/prize-money', label: 'Prize Money' },
  { href: '/results', label: 'Race Results' },
]

export function Footer() {
  const { event } = useEvent()
  const featured = event.categories.find((c) => c.is_featured) || event.categories[0]
  const raceDayInfo = [
    formatEventDate(event.edition?.event_date) || 'Race date to be announced',
    venueLine(event.edition),
    featured && formatClock(featured.start_time) ? `${featured.distance_label} start: ${formatClock(featured.start_time)}` : null,
    'Kit collection: day before',
  ].filter(Boolean) as string[]

  return (
    <footer className="bg-[#111518]">
      <div className="max-w-7xl mx-auto px-6 pt-[72px] pb-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-14">
          {/* Column 1: Logo & Brand */}
          <div>
            <Image
              src="https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/10-mil-marathon-logo-600x553-1.png"
              alt="10 Million Trees Marathon Logo"
              width={87}
              height={80}
              className="h-20 w-auto"
            />
            <p className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/55 mt-3">
              Kenya&apos;s Environmental Marathon
            </p>
            <span className="inline-block mt-3 bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-bold text-[10px] uppercase px-3 py-1.5 rounded-full">
              10M Trees Mission
            </span>
          </div>

          {/* Column 2: Race Links */}
          <div>
            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
              Race
            </h4>
            <ul className="space-y-2">
              {raceLinks.map((link) => (
                <li key={link.href}>
                  <Link 
                    href={link.href}
                    className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors duration-200"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
              <li>
                <Link href="/legal" className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors duration-200">
                  Terms &amp; Privacy
                </Link>
              </li>
            </ul>
          </div>

          {/* Column 3: Race Day Info */}
          <div>
            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
              Race Day
            </h4>
            <ul className="space-y-2">
              {raceDayInfo.map((item, index) => (
                <li key={index} className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65">
                  {item}
                </li>
              ))}
            </ul>
          </div>

          {/* Column 4: Connect */}
          <div>
            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
              Connect
            </h4>
            <div className="flex gap-5 mb-4">
              <a 
                href="https://www.instagram.com/lukenyamarathon/" 
                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
                aria-label="Instagram"
              >
                <Instagram size={22} />
              </a>
              <a 
                href="https://www.facebook.com/LUMarathon/" 
                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
                aria-label="Facebook"
              >
                <Facebook size={22} />
              </a>
              <a 
                href="https://twitter.com/lukenyamarathon" 
                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
                aria-label="Twitter"
              >
                <Twitter size={22} />
              </a>
            </div>
            <a 
              href="mailto:marathon@lukenyauniversity.ac.ke"
              className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors"
            >
              marathon@lukenyauniversity.ac.ke
            </a>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="bg-[#006838] h-12">
        <div className="max-w-7xl mx-auto px-6 h-full flex items-center justify-between">
          <p className="font-[family-name:var(--font-quicksand)] font-medium text-[13px] text-white/70">
            &copy; 2026 10 Million Trees Marathon &middot; Powered by Lukenya University &middot; All Rights Reserved
          </p>
          <p className="hidden sm:block font-[family-name:var(--font-raleway)] font-semibold text-[12px] text-[#FFF100]">
            Chip Timing by Sporthive
          </p>
        </div>
      </div>
    </footer>
  )
}