import React from 'react';
import { 
  MapPin, 
  Mail, 
  Instagram, 
  ShieldCheck, 
  Calendar,
  ExternalLink
} from 'lucide-react';
import { EntourageLogo } from './EntourageLogo';
import { BOOKING_FORM_URL } from '../data/yachtData';

interface FooterProps {
  onOpenBooking: () => void;
  onOpenSplitModal: () => void;
  onOpenAiConcierge: () => void;
}

export const Footer: React.FC<FooterProps> = ({
  onOpenBooking
}) => {
  return (
    <footer className="bg-[#1e2a38] border-t border-[#517e8a]/20 pt-16 pb-12 text-slate-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Main Footer Links & Pier Directory */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-12 border-b border-[#517e8a]/20">
          
          {/* Brand Info */}
          <div className="lg:col-span-5 space-y-4">
            <div className="flex items-center gap-3">
              <EntourageLogo size="xs" variant="orange" showText={false} />
              <span className="font-heading text-2xl font-bold tracking-wider text-white">
                ENTOURAGE<span className="text-[#e17f52]">.HK</span>
              </span>
            </div>

            <p className="text-xs text-slate-300 leading-relaxed max-w-sm font-light">
              Hong Kong's premier 22m newly renovated luxury superyacht. Accommodating up to 60 people across three spacious decks, featuring 3 ensuite bedrooms, full kitchen with oven, washer/dryer, inflatable ocean pool, and mooring at Aberdeen included.
            </p>

            <div className="flex flex-wrap items-center gap-3 pt-3">
              <a
                href="https://www.instagram.com/entourage.hk"
                target="_blank"
                rel="noopener noreferrer"
                title="Follow @entourage.hk on Instagram"
                className="px-4 py-2 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 hover:from-purple-500 hover:to-amber-400 text-white text-xs font-bold transition-all shadow-md shadow-pink-500/20 hover:scale-105 flex items-center gap-2"
              >
                <Instagram className="w-4 h-4" />
                <span>Follow @entourage.hk</span>
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div className="lg:col-span-3 space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-wider text-white">
              Navigation
            </h4>
            <ul className="space-y-2 text-xs">
              <li><a href="#specifications" className="hover:text-[#e17f52] transition-colors text-slate-300 font-medium">Vessel Specs (22m)</a></li>
              <li><a href="#gallery" className="hover:text-[#e17f52] transition-colors text-slate-300">Yacht Gallery</a></li>
              <li>
                <button 
                  onClick={onOpenBooking} 
                  className="hover:text-[#e17f52] transition-colors text-slate-300 text-left cursor-pointer inline-flex items-center gap-1.5"
                >
                  <span>Booking Enquiry</span>
                </button>
              </li>
            </ul>
          </div>

          {/* Direct VIP Contact */}
          <div className="lg:col-span-4 space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-wider text-white">
              Direct Inquiries
            </h4>
            <div className="space-y-2 text-xs">
              <div className="flex items-center gap-2 text-slate-200">
                <Mail className="w-3.5 h-3.5 text-[#e17f52] shrink-0" />
                <a href="mailto:info@entourage.hk" className="hover:text-[#e17f52] underline underline-offset-2 font-mono font-medium">
                  info@entourage.hk
                </a>
              </div>
              <div className="flex items-center gap-2 text-slate-300">
                <MapPin className="w-3.5 h-3.5 text-[#517e8a] shrink-0" />
                <span>Aberdeen Shelter, Hong Kong</span>
              </div>
            </div>

            <button
              onClick={onOpenBooking}
              className="w-full mt-2 py-3 rounded-xl bg-[#e17f52] hover:bg-[#ea8e64] text-white font-bold text-xs shadow-lg shadow-[#e17f52]/30 hover:scale-[1.01] active:scale-[0.99] transition-all flex items-center justify-center gap-2 cursor-pointer"
            >
              <Calendar className="w-4 h-4 text-white" />
              <span>Instant Charter Booking Enquiry</span>
            </button>
          </div>

        </div>

        {/* Bottom Legal & Marine Safety */}
        <div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-[11px] text-slate-400">
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-4 h-4 text-emerald-400" />
            <span>Licensed Hong Kong Marine Department Class IV Pleasure Vessel • Full Passenger Liability Insurance</span>
          </div>
          <div>
            © {new Date().getFullYear()} Entourage.hk Luxury Yacht Charters. All rights reserved.
          </div>
        </div>

      </div>
    </footer>
  );
};