import React from 'react';
import { 
  Wine, 
  Utensils, 
  Sparkles, 
  Flame, 
  Check, 
  GlassWater, 
  Coffee, 
  ShieldCheck 
} from 'lucide-react';
import { REAL_YACHT_PHOTOS } from '../data/yachtData';

interface CateringAndBarProps {
  onSelectMenu: (menuName: string) => void;
}

export const CateringAndBar: React.FC<CateringAndBarProps> = ({ onSelectMenu }) => {
  return (
    <section className="py-24 bg-[#0a0f1b] border-t border-white/5 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* 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 rounded-full bg-slate-900 border border-white/10 text-slate-300 text-xs font-semibold uppercase tracking-wider font-mono">
            <Wine className="w-3.5 h-3.5 text-amber-400" />
            <span>Hospitality & Onboard Mixology</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Illuminated Marble Bar & <span className="text-amber-400 font-serif-luxury font-normal">Aft Teak Dining</span>
          </h2>
          <p className="text-slate-400 text-base sm:text-lg font-light leading-relaxed">
            Sip vintage champagne crafted at the air-conditioned backlit marble saloon bar, or gather around the 10-seater solid teak dining table for a live chef BBQ overlooking the marina.
          </p>
        </div>

        {/* 2-Column Luxury Feature Showcase with Real Photos */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
          
          {/* Card 1: The Illuminated Cocktail Bar */}
          <div className="rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl flex flex-col justify-between">
            <div className="relative h-72 overflow-hidden bg-slate-950">
              <img
                src={REAL_YACHT_PHOTOS.saloonMarbleBar}
                alt="Illuminated Marble Bar inside Entourage"
                className="w-full h-full object-cover filter brightness-95"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
              
              <span className="absolute top-4 left-4 px-3 py-1 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-amber-400 text-xs font-mono uppercase tracking-wider">
                Saloon Indoor Bar
              </span>
            </div>

            <div className="p-6 sm:p-8 flex-1 flex flex-col justify-between space-y-6">
              <div className="space-y-3">
                <h3 className="text-2xl font-bold text-white">
                  The Backlit Marble Saloon Bar
                </h3>
                <p className="text-xs text-amber-400 font-mono">
                  5 Brass High-Top Stools • Cobalt Blue Banquettes • Full A/C Climate Control
                </p>
                <p className="text-sm text-slate-300 leading-relaxed font-light">
                  Step inside the cool climate-controlled comfort of the main saloon. Our mixologists serve signature craft cocktails, vintage champagnes, French rosé, and premium spirits in custom Entourage stemware.
                </p>

                <div className="pt-2 space-y-2">
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Free-flow Veuve Clicquot, Whispering Angel & craft cocktails</span>
                  </div>
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Dedicated mixologist and stainless ice troughs</span>
                  </div>
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Pioneer DJ console connection and multi-zone sound control</span>
                  </div>
                </div>
              </div>

              <div className="p-4 rounded-2xl bg-slate-950 border border-white/10 flex items-center justify-between">
                <div>
                  <span className="text-[10px] uppercase text-slate-400 block font-mono">Open Bar Package</span>
                  <div className="text-base font-bold text-amber-400 font-mono">From HK$ 320 / guest</div>
                </div>
                <button
                  onClick={() => onSelectMenu('VIP Free-Flow Bar')}
                  className="px-4 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-xs font-bold transition-colors"
                >
                  Add Open Bar
                </button>
              </div>
            </div>
          </div>

          {/* Card 2: Aft Teak Dining & Live Chef BBQ */}
          <div className="rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl flex flex-col justify-between">
            <div className="relative h-72 overflow-hidden bg-slate-950">
              <img
                src={REAL_YACHT_PHOTOS.aftDiningTable}
                alt="10-Seater Solid Teak Table on Aft Deck"
                className="w-full h-full object-cover filter brightness-95"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
              
              <span className="absolute top-4 left-4 px-3 py-1 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-emerald-400 text-xs font-mono uppercase tracking-wider">
                Aft Deck Teak Banquet
              </span>
            </div>

            <div className="p-6 sm:p-8 flex-1 flex flex-col justify-between space-y-6">
              <div className="space-y-3">
                <h3 className="text-2xl font-bold text-white">
                  Alfresco Teak Banquet & Live BBQ
                </h3>
                <p className="text-xs text-emerald-400 font-mono">
                  10-Seater Solid Teak Table • Full Kitchen with Oven • Shaded Deck
                </p>
                <p className="text-sm text-slate-300 leading-relaxed font-light">
                  Dine alfresco with sweeping coastal backdrops. Utilizing our full kitchen with oven and dedicated live grill station, enjoy USDA Prime Ribeye steaks, grilled King Tiger prawns, gourmet skewers, and artisan charcuterie boards prepared fresh onboard.
                </p>

                <div className="pt-2 space-y-2">
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Full kitchen with oven, refrigeration and prep stations onboard</span>
                  </div>
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Surf & Turf Live BBQ: Prime Ribeye, Sea Bass & Australian Lamb</span>
                  </div>
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Artisan charcuterie, burrata & seasonal fruit platters</span>
                  </div>
                  <div className="flex items-center gap-2.5 text-xs text-slate-200">
                    <Check className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>Custom dietary menus (Vegetarian, Halal, Gluten-Free)</span>
                  </div>
                </div>
              </div>

              <div className="p-4 rounded-2xl bg-slate-950 border border-white/10 flex items-center justify-between">
                <div>
                  <span className="text-[10px] uppercase text-slate-400 block font-mono">Live BBQ Package</span>
                  <div className="text-base font-bold text-emerald-400 font-mono">From HK$ 360 / guest</div>
                </div>
                <button
                  onClick={() => onSelectMenu('Live Teak BBQ')}
                  className="px-4 py-2 rounded-xl bg-emerald-400 hover:bg-emerald-300 text-slate-950 text-xs font-bold transition-colors"
                >
                  Add Catering
                </button>
              </div>
            </div>
          </div>

        </div>

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