'use client'

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Facebook, Twitter, Instagram, Linkedin, Mail, Phone, MapPin } from 'lucide-react'

const footerLinks = {
  platform: [
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'AI Coach', href: '/dashboard/ai-coach' },
    { label: 'APS Calculator', href: '/dashboard/aps-calculator' },
    { label: 'Find Tutors', href: '/dashboard/find-tutors' },
    { label: 'Bursary Search', href: '/dashboard/bursary' },
  ],
  forTutors: [
    { label: 'Become a Tutor', href: '#' },
    { label: 'Tutor Resources', href: '#' },
    { label: 'Session Scheduling', href: '#' },
    { label: 'Earnings Dashboard', href: '#' },
    { label: 'Tutor Support', href: '#' },
  ],
  company: [
    { label: 'About Us', href: '#' },
    { label: 'Careers', href: '#' },
    { label: 'Blog', href: '#' },
    { label: 'Privacy Policy', href: '#' },
    { label: 'Terms of Service', href: '#' },
  ],
}

const socialLinks = [
  { icon: Facebook, href: '#', label: 'Facebook' },
  { icon: Twitter, href: '#', label: 'Twitter' },
  { icon: Instagram, href: '#', label: 'Instagram' },
  { icon: Linkedin, href: '#', label: 'LinkedIn' },
]

export function Footer() {
  return (
    <footer className="bg-[#2c3e50] text-gray-300">
      {/* Main Footer */}
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5">
          {/* Brand Column */}
          <div className="sm:col-span-2 lg:col-span-1 xl:col-span-1">
            <div className="flex items-center gap-3">
              <div className="relative h-10 w-10 flex-shrink-0 overflow-hidden rounded-lg bg-white/10">
                <Image
                  src="/images/logo.png"
                  alt="Studo Guide"
                  fill
                  className="object-contain"
                />
              </div>
              <div>
                <h3 className="text-lg font-bold bg-gradient-to-r from-[#91C4D9] to-[#5b9ebd] bg-clip-text text-transparent">
                  Studo Guide
                </h3>
              </div>
            </div>
            <p className="mt-4 text-sm leading-relaxed text-gray-400">
              Empowering South African students with AI-powered career guidance, academic support, and bursary discovery to build brighter futures.
            </p>

            {/* Social Links */}
            <div className="mt-6 flex items-center gap-3">
              {socialLinks.map((social) => (
                <a
                  key={social.label}
                  href={social.href}
                  className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-gray-400 transition-all hover:bg-[#91C4D9] hover:text-white"
                  aria-label={social.label}
                >
                  <social.icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          {/* Platform Links */}
          <div>
            <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Platform</h4>
            <ul className="space-y-3">
              {footerLinks.platform.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-400 transition-colors hover:text-[#91C4D9]"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* For Tutors Links */}
          <div>
            <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white">For Tutors</h4>
            <ul className="space-y-3">
              {footerLinks.forTutors.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-400 transition-colors hover:text-[#91C4D9]"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company Links */}
          <div>
            <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Company</h4>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-gray-400 transition-colors hover:text-[#91C4D9]"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Contact</h4>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <Mail className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#91C4D9]" />
                <span className="text-sm text-gray-400">info@studoguide.co.za</span>
              </li>
              <li className="flex items-start gap-3">
                <Phone className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#91C4D9]" />
                <span className="text-sm text-gray-400">+27 (0) 12 345 6789</span>
              </li>
              <li className="flex items-start gap-3">
                <MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#91C4D9]" />
                <span className="text-sm text-gray-400">Pretoria, Gauteng, South Africa</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Copyright Bar */}
      <div className="border-t border-white/10">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-4 py-6 sm:flex-row sm:px-6 lg:px-8">
          <p className="text-sm text-gray-400">
            &copy; {new Date().getFullYear()} Studo Guide. All rights reserved.
          </p>
          <p className="text-sm text-gray-500">
            Built with ❤️ for South African students
          </p>
        </div>
      </div>
    </footer>
  )
}
