import React from 'react';
import { 
  Waves, 
  Sparkles, 
  ShieldCheck, 
  Check, 
  ArrowRight,
  Anchor
} from 'lucide-react';
import { REAL_YACHT_PHOTOS } from '../data/yachtData';

interface WaterToysProps {
  onAddToyToBooking: (toyName: string) => void;
}

export const WaterToys: React.FC<WaterToysProps> = ({ onAddToyToBooking }) => {
  const toys = [
    {
      title: "Floating Enclosed Ocean Sea Pool",
      desc: "Jellyfish-safe enclosed netted swimming pool attached to Entourage's hydraulic stern platform with floating sundeck perimeter.",
      image: REAL_YACHT_PHOTOS.aerialDeepOcean,
      badge: "FEATURED FLEET"
    },
    {
      title: "Hydraulic Swim Deck & Tender",
      desc: "Direct water access platform for swimming, staging water toys, and private speedboat tender boarding.",
      image: REAL_YACHT_PHOTOS.aerialSideProfile,
      badge: "EASY ACCESS"
    },
    {
      title: "Speedboat Tender & Wakeboarding",
      desc: "Dedicated 250HP speed boat tender with driver, wakeboards, wakesurfs & 6-person banana boat.",
      image: REAL_YACHT_PHOTOS.aerialTopDown,
      badge: "ADVENTURE"
    },
    {
      title: "Stand-Up Paddleboards & Lilypads",
      desc: "High-stability SUPs and floating foam island lounges included complimentary on all day charters.",
      image: REAL_YACHT_PHOTOS.heroCove,
      badge: "INCLUDED FREE"
    }
  ];

  return (
    <section className="py-24 bg-[#0b111e] border-t border-white/5 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* 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 rounded-full bg-slate-900 border border-white/10 text-slate-300 text-xs font-semibold uppercase tracking-wider font-mono">
            <Waves className="w-3.5 h-3.5 text-cyan-400" />
            <span>Water Sports & Floating Platform</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Infinite Ocean Fun & <span className="text-cyan-400 font-serif-luxury font-normal">Floating Sea Pool</span>
          </h2>
          <p className="text-slate-400 text-base sm:text-lg font-light leading-relaxed">
            Anchor in Sai Kung or Southside coves and deploy the enclosed ocean sea pool, stand-up paddleboards, and private speedboat tender.
          </p>
        </div>

        {/* 4 Cards Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {toys.map((toy, idx) => (
            <div
              key={idx}
              className="rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl flex flex-col justify-between group hover:border-cyan-400/40 transition-all duration-300"
            >
              <div className="relative h-48 overflow-hidden bg-slate-950">
                <img
                  src={toy.image}
                  alt={toy.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 filter brightness-95"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
                <span className="absolute top-3 left-3 px-2.5 py-1 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-cyan-400 text-[10px] font-mono uppercase tracking-wider font-bold">
                  {toy.badge}
                </span>
              </div>

              <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
                <div>
                  <h3 className="text-base font-bold text-white mb-1.5 group-hover:text-cyan-300 transition-colors">
                    {toy.title}
                  </h3>
                  <p className="text-xs text-slate-400 leading-relaxed font-light">
                    {toy.desc}
                  </p>
                </div>

                <button
                  onClick={() => onAddToyToBooking(toy.title)}
                  className="w-full py-2.5 rounded-xl bg-slate-950 hover:bg-cyan-500/10 text-slate-300 hover:text-cyan-300 border border-white/10 hover:border-cyan-400/40 text-xs font-semibold transition-all flex items-center justify-center gap-1.5"
                >
                  <span>Select Water Activity</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>

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