import React from 'react';
import { 
  Sparkles, 
  ArrowRight,
  ExternalLink
} from 'lucide-react';
import { YACHT_SPECS, REAL_YACHT_PHOTOS, BOOKING_FORM_URL } from '../data/yachtData';

interface VesselSpecificationsProps {
  onOpenBooking: () => void;
}

export const VesselSpecifications: React.FC<VesselSpecificationsProps> = ({ onOpenBooking }) => {
  return (
    <section id="specifications" className="py-24 bg-[#1e2a38] border-t border-[#517e8a]/20 relative overflow-hidden">
      
      {/* Decorative background glow */}
      <div className="absolute top-1/3 -right-40 w-96 h-96 bg-[#e17f52]/5 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-10 -left-40 w-96 h-96 bg-[#517e8a]/15 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-[#2b3b4e] border border-[#e17f52]/30 text-[#e17f52] text-xs font-mono font-semibold uppercase tracking-wider">
            <Sparkles className="w-3.5 h-3.5 text-[#e17f52]" />
            <span>Vessel Profile & Technical Specifications</span>
          </div>
          
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Newly Renovated <span className="text-[#e17f52] font-serif-luxury font-normal">22m Luxury Yacht</span>
          </h2>
          
          <p className="text-slate-300 text-base sm:text-lg font-light leading-relaxed">
            Engineered for comfort, style, and effortless entertaining across three expansive deck levels in Hong Kong.
          </p>
        </div>

        {/* Reference Copy Spotlight Box */}
        <div className="rounded-3xl p-8 sm:p-10 bg-[#2b3b4e]/95 border border-[#517e8a]/30 shadow-2xl mb-16 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-80 h-80 bg-[#e17f52]/5 rounded-full blur-2xl pointer-events-none" />
          
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            
            {/* Real Photo Thumbnail */}
            <div className="lg:col-span-4 rounded-2xl overflow-hidden border border-[#517e8a]/30 shadow-lg relative aspect-[4/3] bg-slate-950">
              <img
                src={REAL_YACHT_PHOTOS.aerialSideProfile}
                alt="22m Newly Renovated Luxury Cruiser"
                className="w-full h-full object-cover filter brightness-95"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#1e2a38] via-transparent to-transparent" />
              <div className="absolute bottom-3 left-3 right-3 p-2.5 rounded-xl bg-[#1e2a38]/90 backdrop-blur-sm border border-[#517e8a]/30 flex items-center justify-between text-[11px] font-mono text-slate-200">
                <span>22m × 6.70m</span>
                <span className="text-[#e17f52] font-bold">Aberdeen Berth</span>
              </div>
            </div>

            {/* Official Narrative */}
            <div className="lg:col-span-8 space-y-4">
              <span className="text-xs font-mono uppercase tracking-widest text-[#e17f52] font-semibold block">
                Overview & Vessel Highlights
              </span>
              
              <p className="text-base sm:text-lg text-white font-medium leading-relaxed">
                {YACHT_SPECS.paragraph1}
              </p>

              <p className="text-sm sm:text-base text-slate-300 font-light leading-relaxed">
                {YACHT_SPECS.paragraph2}
              </p>

              <p className="text-sm sm:text-base text-slate-300 font-light leading-relaxed">
                {YACHT_SPECS.paragraph3}
              </p>
            </div>

          </div>
        </div>

        {/* Bottom CTA Card */}
        <div className="rounded-2xl p-6 bg-gradient-to-r from-[#2b3b4e] via-[#3b4e63] to-[#2b3b4e] border border-[#e17f52]/30 flex flex-col sm:flex-row items-center justify-between gap-6 shadow-xl">
          <div className="space-y-1 text-center sm:text-left">
            <h4 className="text-base font-bold text-white">
              Interested in Chartering or Touring Entourage?
            </h4>
            <p className="text-xs text-slate-300 font-light">
              Accommodating up to 60 people with full crew, inflatable ocean pool, and rooftop cocktail deck.
            </p>
          </div>

          <button
            onClick={onOpenBooking}
            className="py-3 px-6 rounded-xl bg-[#e17f52] hover:bg-[#ea8e64] text-white font-bold text-xs uppercase tracking-wider transition-all flex items-center gap-2 shadow-lg shadow-[#e17f52]/30 shrink-0 cursor-pointer"
          >
            <span>Book Charter Enquiry</span>
            <ArrowRight className="w-4 h-4 text-white" />
          </button>
        </div>

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