import React from 'react';
import { PageType } from '../types';
import { PRACTICE_INFO } from '../data/mockData';
import { Phone, Mail, MapPin, Clock, Calendar, ArrowRight, ExternalLink, MessageSquare } from 'lucide-react';
import logoImage from '../assets/images/regenerated_image_1783412405039.jpg';

interface FooterProps {
  onNavigate: (page: PageType) => void;
  onOpenBooking: () => void;
  onOpenContactModal: () => void;
}

export const Footer: React.FC<FooterProps> = ({
  onNavigate,
  onOpenBooking,
  onOpenContactModal
}) => {
  const handleNav = (page: PageType) => {
    onNavigate(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer className="bg-slate-900 text-slate-300 pt-16 pb-10 border-t border-slate-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 pb-12 border-b border-slate-800">
          
          {/* Column 1: Practice Info & Mission */}
          <div className="space-y-4">
            <div className="flex items-center space-x-3">
              <div className="w-11 h-11 rounded-xl bg-white p-0.5 flex items-center justify-center shadow-md overflow-hidden border border-slate-700">
                <img 
                  src={logoImage} 
                  alt="Dr. Matseke Surgery Logo" 
                  className="w-full h-full object-contain"
                  referrerPolicy="no-referrer"
                />
              </div>
              <div>
                <span className="block text-xl font-bold text-white tracking-tight">
                  Dr. Matseke <span className="text-[#2FA8A1] font-extrabold">Surgery</span>
                </span>
                <span className="block text-xs font-medium uppercase tracking-wider text-slate-400">
                  Medical Excellence & Care
                </span>
              </div>
            </div>
            
            <p className="text-sm text-slate-400 leading-relaxed">
              Compassionate, professional, and patient-centred general and chronic medical care delivered with clinical excellence in Mmabatho, Mafikeng.
            </p>

            <div className="pt-2 flex items-center space-x-3">
              <a
                href={`https://wa.me/${PRACTICE_INFO.whatsapp.replace(/[^0-9]/g, '')}`}
                target="_blank"
                rel="noreferrer"
                className="w-9 h-9 rounded-lg bg-slate-800 hover:bg-secondary hover:text-white flex items-center justify-center text-slate-300 transition-colors"
                title="WhatsApp Us"
              >
                <MessageSquare className="w-4 h-4" />
              </a>
              <a
                href={`tel:${PRACTICE_INFO.phone.replace(/\s+/g, '')}`}
                className="w-9 h-9 rounded-lg bg-slate-800 hover:bg-primary hover:text-white flex items-center justify-center text-slate-300 transition-colors"
                title="Call Practice"
              >
                <Phone className="w-4 h-4" />
              </a>
              <a
                href={`mailto:${PRACTICE_INFO.email}`}
                className="w-9 h-9 rounded-lg bg-slate-800 hover:bg-primary hover:text-white flex items-center justify-center text-slate-300 transition-colors"
                title="Email Us"
              >
                <Mail className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Column 2: Quick Links & Services */}
          <div>
            <h3 className="text-base font-semibold text-white tracking-wide mb-4 flex items-center space-x-2">
              <span className="w-2 h-2 rounded-full bg-secondary"></span>
              <span>Quick Navigation</span>
            </h3>
            <ul className="space-y-2.5 text-sm">
              <li>
                <button
                  onClick={() => handleNav('home')}
                  className="hover:text-white transition-colors flex items-center space-x-1.5 group"
                >
                  <ArrowRight className="w-3.5 h-3.5 text-secondary group-hover:translate-x-1 transition-transform" />
                  <span>Home</span>
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('about')}
                  className="hover:text-white transition-colors flex items-center space-x-1.5 group"
                >
                  <ArrowRight className="w-3.5 h-3.5 text-secondary group-hover:translate-x-1 transition-transform" />
                  <span>About Us & Dr. Matseke</span>
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNav('services')}
                  className="hover:text-white transition-colors flex items-center space-x-1.5 group"
                >
                  <ArrowRight className="w-3.5 h-3.5 text-secondary group-hover:translate-x-1 transition-transform" />
                  <span>All Medical Services</span>
                </button>
              </li>
              <li>
                <button
                  onClick={onOpenBooking}
                  className="text-secondary hover:text-white font-medium transition-colors flex items-center space-x-1.5 group"
                >
                  <Calendar className="w-3.5 h-3.5 text-primary group-hover:scale-110 transition-transform" />
                  <span>Book Appointment Online</span>
                </button>
              </li>
              <li>
                <button
                  onClick={onOpenContactModal}
                  className="hover:text-white transition-colors flex items-center space-x-1.5 group"
                >
                  <ArrowRight className="w-3.5 h-3.5 text-secondary group-hover:translate-x-1 transition-transform" />
                  <span>Contact Information & FAQs</span>
                </button>
              </li>
            </ul>
          </div>

          {/* Column 3: Contact Details */}
          <div>
            <h3 className="text-base font-semibold text-white tracking-wide mb-4 flex items-center space-x-2">
              <span className="w-2 h-2 rounded-full bg-primary"></span>
              <span>Contact Us</span>
            </h3>
            <ul className="space-y-3 text-sm">
              <li className="flex items-start space-x-3">
                <MapPin className="w-4 h-4 text-secondary mt-1 flex-shrink-0" />
                <span className="text-slate-400">{PRACTICE_INFO.address}</span>
              </li>
              <li className="flex items-center space-x-3">
                <Phone className="w-4 h-4 text-primary flex-shrink-0" />
                <a href={`tel:${PRACTICE_INFO.phone.replace(/\s+/g, '')}`} className="text-slate-300 hover:text-white font-medium transition-colors">
                  {PRACTICE_INFO.phone}
                </a>
              </li>
              <li className="flex items-center space-x-3">
                <MessageSquare className="w-4 h-4 text-secondary flex-shrink-0" />
                <a href={`https://wa.me/${PRACTICE_INFO.whatsapp.replace(/[^0-9]/g, '')}`} target="_blank" rel="noreferrer" className="text-slate-300 hover:text-white font-medium transition-colors">
                  WhatsApp: {PRACTICE_INFO.whatsapp}
                </a>
              </li>
              <li className="flex items-center space-x-3">
                <Mail className="w-4 h-4 text-primary flex-shrink-0" />
                <a href={`mailto:${PRACTICE_INFO.email}`} className="text-slate-300 hover:text-white transition-colors break-all">
                  {PRACTICE_INFO.email}
                </a>
              </li>
            </ul>
          </div>

          {/* Column 4: Operating Hours & Map Placeholder */}
          <div>
            <h3 className="text-base font-semibold text-white tracking-wide mb-4 flex items-center space-x-2">
              <span className="w-2 h-2 rounded-full bg-secondary"></span>
              <span>Operating Hours</span>
            </h3>
            <div className="bg-slate-800/80 rounded-xl p-4 border border-slate-700 space-y-2.5 text-xs sm:text-sm">
              {PRACTICE_INFO.hours.map((h, idx) => (
                <div key={idx} className="flex justify-between items-center py-1 border-b border-slate-700/50 last:border-0">
                  <span className="text-slate-400 font-medium">{h.day}</span>
                  <span className={`font-semibold ${h.isOpen ? 'text-[#2FA8A1]' : 'text-[#E63946]'}`}>
                    {h.time}
                  </span>
                </div>
              ))}
            </div>

            {/* Google Maps placeholder card */}
            <div 
              onClick={onOpenContactModal} 
              className="mt-4 bg-gradient-to-r from-slate-800 to-slate-800/50 hover:from-[#0A6EB4]/20 hover:to-[#2FA8A1]/20 p-3 rounded-xl border border-slate-700 cursor-pointer transition-all flex items-center justify-between group"
            >
              <div className="flex items-center space-x-2">
                <MapPin className="w-4 h-4 text-[#2FA8A1] group-hover:animate-bounce" />
                <span className="text-xs font-semibold text-slate-300 group-hover:text-white">View Practice Location Map</span>
              </div>
              <ExternalLink className="w-3.5 h-3.5 text-slate-400 group-hover:text-white" />
            </div>
          </div>

        </div>

        {/* Bottom Bar: Copyright & Medical Disclaimer */}
        <div className="pt-8 flex flex-col md:flex-row items-center justify-between text-xs text-slate-500 gap-4">
          <div className="text-center md:text-left">
            <p className="flex items-center justify-center md:justify-start gap-1">
              <span>© {new Date().getFullYear()} Dr. Matseke Surgery. Care provided with</span>
              <span className="text-[#E63946] inline-block animate-pulse">♥</span>
              <span>in Mmabatho, Mafikeng.</span>
            </p>
            <p className="mt-1">HPCSA Registered Medical Practice | 3794 Mokale Rd, Mmabatho.</p>
          </div>
          <div className="flex flex-wrap justify-center gap-6 text-slate-400 font-medium">
            <button onClick={onOpenContactModal} className="hover:text-white transition-colors">Privacy Policy</button>
            <button onClick={onOpenContactModal} className="hover:text-white transition-colors">Terms of Use</button>
            <button onClick={onOpenContactModal} className="hover:text-white transition-colors">Medical Disclaimer</button>
            <button onClick={onOpenBooking} className="text-[#ff8f97] hover:text-white transition-colors font-bold">24/7 Emergency & Walk-In Care</button>
          </div>
        </div>
      </div>
    </footer>
  );
};