import React, { useState } from 'react';
import { 
  MapPin, 
  Mail, 
  Navigation, 
  Copy, 
  Check, 
  ExternalLink, 
  Anchor, 
  Compass, 
  Car, 
  Train, 
  Phone, 
  Clock, 
  Sparkles,
  ShieldCheck,
  ChevronRight
} from 'lucide-react';
import { REAL_YACHT_PHOTOS } from '../data/yachtData';

interface LocationSectionProps {
  onOpenBooking?: () => void;
}

export const LocationSection: React.FC<LocationSectionProps> = ({ onOpenBooking }) => {
  const [copiedEmail, setCopiedEmail] = useState(false);
  const [copiedAddress, setCopiedAddress] = useState(false);

  const officialEmail = "info@entourage.hk";
  const boatLocation = "Aberdeen Shelter (Aberdeen Typhoon Shelter)";
  const onboardingPier = "Aberdeen Praya Road Landing No. 4";
  const cantonesePierName = "香港仔海旁道4號梯台";

  const handleCopyEmail = () => {
    navigator.clipboard.writeText(officialEmail);
    setCopiedEmail(true);
    setTimeout(() => setCopiedEmail(false), 2500);
  };

  const handleCopyPier = () => {
    navigator.clipboard.writeText(`${onboardingPier} (${cantonesePierName})`);
    setCopiedAddress(true);
    setTimeout(() => setCopiedAddress(false), 2500);
  };

  const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent("Aberdeen Praya Road Landing No. 4, Hong Kong")}`;

  return (
    <section id="location" className="py-24 bg-[#080d19] border-t border-white/10 relative overflow-hidden">
      {/* Subtle Background Glows */}
      <div className="absolute top-1/4 -left-32 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-sky-500/5 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900/90 border border-amber-400/30 text-amber-300 text-xs font-mono font-medium tracking-wider uppercase shadow-inner">
            <MapPin className="w-3.5 h-3.5 text-amber-400" />
            <span>Vessel Location & Onboarding Pier</span>
          </div>
          
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Homeport & <span className="text-amber-400 font-serif-luxury font-normal">Embarkation</span>
          </h2>
          
          <p className="text-slate-400 text-base sm:text-lg font-light leading-relaxed">
            Convenient Southside access with direct boarding pontoons, seamless taxi drop-off, and dedicated guest reception.
          </p>
        </div>

        {/* 3 Prominent Information Cards (Location, Onboarding Pier, Email) */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
          
          {/* 1. Vessel Location Card */}
          <div className="rounded-3xl p-7 bg-slate-900/90 border border-white/10 shadow-xl relative overflow-hidden group hover:border-amber-400/40 transition-all flex flex-col justify-between">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-400/20 flex items-center justify-center text-amber-400">
                  <Anchor className="w-6 h-6" />
                </div>
                <span className="px-3 py-1 rounded-full bg-slate-950 text-[11px] font-mono font-semibold uppercase tracking-wider text-amber-400 border border-white/5">
                  Homeport
                </span>
              </div>

              <div>
                <span className="text-xs font-mono uppercase tracking-widest text-slate-400 block mb-1">
                  Boat Location
                </span>
                <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight">
                  {boatLocation}
                </h3>
              </div>

              <p className="text-xs sm:text-sm text-slate-300 leading-relaxed font-light">
                The boat is permanently moored and berthed in the sheltered calm waters of the <strong className="text-white font-medium">Aberdeen Shelter</strong> on Hong Kong Island South. Direct ocean gateway to Repulse Bay, Deep Water Bay, and Victoria Harbour.
              </p>
            </div>

            <div className="pt-6 mt-6 border-t border-white/5 flex items-center gap-2 text-xs text-slate-400 font-mono">
              <Compass className="w-4 h-4 text-amber-400 shrink-0" />
              <span>Hong Kong Island South • 22.248° N, 114.155° E</span>
            </div>
          </div>

          {/* 2. Onboarding Pier Card (Highlighted) */}
          <div className="rounded-3xl p-7 bg-gradient-to-b from-slate-900 to-slate-950 border-2 border-amber-400/50 shadow-2xl relative overflow-hidden group flex flex-col justify-between">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="w-12 h-12 rounded-2xl bg-amber-400 text-slate-950 flex items-center justify-center font-bold shadow-md shadow-amber-400/20">
                  <MapPin className="w-6 h-6" />
                </div>
                <span className="px-3 py-1 rounded-full bg-amber-400/10 text-[11px] font-mono font-bold uppercase tracking-wider text-amber-300 border border-amber-400/30">
                  Primary Pier
                </span>
              </div>

              <div>
                <span className="text-xs font-mono uppercase tracking-widest text-amber-400 block mb-1">
                  Onboarding Pier
                </span>
                <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight">
                  {onboardingPier}
                </h3>
                <p className="text-sm font-medium text-amber-300/90 font-mono mt-0.5">
                  {cantonesePierName}
                </p>
              </div>

              <p className="text-xs sm:text-sm text-slate-300 leading-relaxed font-light">
                Direct step-on floating pontoon with dedicated crew greeting. Vehicles and taxis can drop guests directly in front of Pier Landing No. 4 along Aberdeen Praya Road.
              </p>
            </div>

            <div className="pt-6 mt-6 border-t border-white/10 space-y-2.5">
              <div className="flex items-center gap-2">
                <a
                  href={googleMapsUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex-1 py-2.5 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs uppercase tracking-wider transition-colors flex items-center justify-center gap-1.5 shadow-sm"
                >
                  <Navigation className="w-3.5 h-3.5" />
                  <span>Google Maps</span>
                  <ExternalLink className="w-3 h-3" />
                </a>

                <button
                  onClick={handleCopyPier}
                  title="Copy Pier Address"
                  className="py-2.5 px-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-white/10 text-xs font-mono transition-colors flex items-center justify-center gap-1.5"
                >
                  {copiedAddress ? (
                    <>
                      <Check className="w-3.5 h-3.5 text-emerald-400" />
                      <span className="text-emerald-400">Copied</span>
                    </>
                  ) : (
                    <>
                      <Copy className="w-3.5 h-3.5 text-slate-400" />
                      <span>Copy</span>
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>

          {/* 3. Official Email & Concierge Card */}
          <div className="rounded-3xl p-7 bg-slate-900/90 border border-white/10 shadow-xl relative overflow-hidden group hover:border-sky-400/40 transition-all flex flex-col justify-between">
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="w-12 h-12 rounded-2xl bg-sky-500/10 border border-sky-400/20 flex items-center justify-center text-sky-400">
                  <Mail className="w-6 h-6" />
                </div>
                <span className="px-3 py-1 rounded-full bg-slate-950 text-[11px] font-mono font-semibold uppercase tracking-wider text-sky-400 border border-white/5">
                  Official Inquiries
                </span>
              </div>

              <div>
                <span className="text-xs font-mono uppercase tracking-widest text-slate-400 block mb-1">
                  E-mail Address
                </span>
                <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight break-all font-mono">
                  {officialEmail}
                </h3>
              </div>

              <p className="text-xs sm:text-sm text-slate-300 leading-relaxed font-light">
                For private charter quotes, corporate hospitality reservations, media shoots, bespoke catering menus, and itinerary planning.
              </p>
            </div>

            <div className="pt-6 mt-6 border-t border-white/5 space-y-2.5">
              <div className="flex items-center gap-2">
                <a
                  href={`mailto:${officialEmail}?subject=Entourage%20Luxury%20Yacht%20Charter%20Enquiry`}
                  className="flex-1 py-2.5 px-3 rounded-xl bg-sky-500 hover:bg-sky-400 text-slate-950 font-bold text-xs uppercase tracking-wider transition-colors flex items-center justify-center gap-1.5 shadow-sm"
                >
                  <Mail className="w-3.5 h-3.5" />
                  <span>Send E-mail</span>
                </a>

                <button
                  onClick={handleCopyEmail}
                  title="Copy Email Address"
                  className="py-2.5 px-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-white/10 text-xs font-mono transition-colors flex items-center justify-center gap-1.5"
                >
                  {copiedEmail ? (
                    <>
                      <Check className="w-3.5 h-3.5 text-emerald-400" />
                      <span className="text-emerald-400">Copied</span>
                    </>
                  ) : (
                    <>
                      <Copy className="w-3.5 h-3.5 text-slate-400" />
                      <span>Copy</span>
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>

        </div>

        {/* Detailed Directions & Arrival Assistance Banner */}
        <div className="rounded-3xl bg-slate-900/60 border border-white/10 p-6 sm:p-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            {/* Taxi Guide */}
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-xl bg-slate-800 border border-white/10 flex items-center justify-center text-amber-400 shrink-0 mt-1">
                <Car className="w-5 h-5" />
              </div>
              <div className="space-y-1">
                <h4 className="text-sm font-bold text-white">
                  Taxi & Private Drop-Off
                </h4>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Tell the driver: <span className="text-amber-300 font-mono font-medium">香港仔海旁道4號梯台</span>. Direct curb pull-up is available 10 meters from Landing No. 4.
                </p>
              </div>
            </div>

            {/* MTR Transit Guide */}
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-xl bg-slate-800 border border-white/10 flex items-center justify-center text-sky-400 shrink-0 mt-1">
                <Train className="w-5 h-5" />
              </div>
              <div className="space-y-1">
                <h4 className="text-sm font-bold text-white">
                  MTR Transit (South Island Line)
                </h4>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Take the MTR to <strong className="text-slate-200">Wong Chuk Hang Station</strong> (Exit B) or <strong className="text-slate-200">Lei Tung Station</strong> (Exit A1), then a 5-minute taxi or short walk to the promenade.
                </p>
              </div>
            </div>

            {/* Crew Greeting & Luggage Handling */}
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-xl bg-slate-800 border border-white/10 flex items-center justify-center text-emerald-400 shrink-0 mt-1">
                <ShieldCheck className="w-5 h-5" />
              </div>
              <div className="space-y-1">
                <h4 className="text-sm font-bold text-white">
                  VIP Crew Greeting & Luggage
                </h4>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Our uniformed stewards and First Mate will receive your party at Landing No. 4, assist with catering/luggage, and escort you aboard.
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
};