import React from 'react';
import { Link } from 'react-router-dom';

export default function Footer() {
  return (
    <footer className="bg-primary text-white py-16 px-4 md:px-8 border-t border-primary/20">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
        {/* About Section */}
        <div className="space-y-4">
          <div className="flex items-center gap-2 text-white">
            <span className="material-symbols-outlined text-3xl" style={{ fontVariationSettings: "'FILL' 1" }}>school</span>
            <span className="font-headline font-bold text-2xl tracking-tight">St. Andrews</span>
          </div>
          <p className="text-sm text-primary-container leading-relaxed">
            Nurturing young minds to build strong foundations for lifetime learning and achievement.
          </p>
        </div>

        {/* Quick Links */}
        <div className="space-y-4">
          <h4 className="font-headline font-bold text-lg text-secondary-container">Quick Links</h4>
          <ul className="space-y-2 text-sm text-primary-container">
            <li><Link to="/about" className="hover:text-white transition-colors">About Us</Link></li>
            <li><Link to="/academics" className="hover:text-white transition-colors">Academics</Link></li>
            <li><Link to="/admissions" className="hover:text-white transition-colors">Admissions</Link></li>
            <li><Link to="/faculty" className="hover:text-white transition-colors">Faculty Members</Link></li>
          </ul>
        </div>

        {/* Portals & News */}
        <div className="space-y-4">
          <h4 className="font-headline font-bold text-lg text-secondary-container">Information</h4>
          <ul className="space-y-2 text-sm text-primary-container">
            <li><Link to="/notices" className="hover:text-white transition-colors">Notice Board</Link></li>
            <li><Link to="/news" className="hover:text-white transition-colors">News & Events</Link></li>
            <li><Link to="/gallery" className="hover:text-white transition-colors">Photo Gallery</Link></li>
            <li><Link to="/achievements" className="hover:text-white transition-colors">Achievements</Link></li>
          </ul>
        </div>

        {/* Contact Info */}
        <div className="space-y-4">
          <h4 className="font-headline font-bold text-lg text-secondary-container">Contact Us</h4>
          <ul className="space-y-2 text-sm text-primary-container">
            <li className="flex items-center gap-2">
              <span className="material-symbols-outlined text-sm">location_on</span>
              123 Academy Lane, Oxford, UK
            </li>
            <li className="flex items-center gap-2">
              <span className="material-symbols-outlined text-sm">mail</span>
              info@standrewsacademy.edu
            </li>
            <li className="flex items-center gap-2">
              <span className="material-symbols-outlined text-sm">phone</span>
              +44 1865 123456
            </li>
          </ul>
        </div>
      </div>

      <div className="max-w-7xl mx-auto mt-12 pt-8 border-t border-white/10 text-center text-xs text-primary-container">
        <p>&copy; {new Date().getFullYear()} St. Andrews Academy. Developed by <a href="https://NexvoraTech.com" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">NexvoraTech.com</a></p>
      </div>
    </footer>
  );
}
