import React, { useState } from 'react';
import { 
  DECK_AREAS, 
  YACHT_SPECS,
  REAL_YACHT_PHOTOS
} from '../data/yachtData';
import { 
  Layers, 
  Check, 
  Sparkles, 
  Wine, 
  Users, 
  ArrowRight,
  Maximize2,
  Compass,
  Anchor
} from 'lucide-react';

interface YachtDeckTourProps {
  onSelectDeckForBooking: (deckId: string) => void;
}

export const YachtDeckTour: React.FC<YachtDeckTourProps> = ({ onSelectDeckForBooking }) => {
  const [activeDeckId, setActiveDeckId] = useState<string>('flybridge');

  const activeDeck = DECK_AREAS.find(d => d.id === activeDeckId) || DECK_AREAS[0];

  return (
    <section id="decks" className="py-24 bg-[#0b111e] relative overflow-hidden border-t border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Sober 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">
            <Layers className="w-3.5 h-3.5 text-amber-400" />
            <span>Interactive 4-Deck Architectural Walkthrough</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Refined Living Across <span className="text-amber-400 font-serif-luxury font-normal">All 3 Levels</span>
          </h2>
          <p className="text-slate-400 text-base sm:text-lg leading-relaxed font-light">
            Entourage provides over 2,200 sq.ft. of usable multi-deck luxury. Explore each zone—from the air-conditioned saloon with illuminated marble bar to the solid teak dining table and sheltered sky lounge.
          </p>
        </div>

        {/* Deck Navigation Tabs */}
        <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-8">
          {DECK_AREAS.map((deck, idx) => {
            const isSelected = deck.id === activeDeckId;
            return (
              <button
                key={deck.id}
                id={`btn-deck-tab-${deck.id}`}
                onClick={() => setActiveDeckId(deck.id)}
                className={`p-4 rounded-2xl border text-left transition-all duration-200 relative overflow-hidden group ${
                  isSelected 
                    ? 'bg-slate-900 border-amber-400 shadow-md' 
                    : 'bg-slate-950/60 border-white/10 hover:border-white/20 hover:bg-slate-900/40'
                }`}
              >
                {/* Level indicator */}
                <div className="flex items-center justify-between mb-2">
                  <span className={`text-[10px] font-mono uppercase tracking-wider ${isSelected ? 'text-amber-400 font-bold' : 'text-slate-400'}`}>
                    Level 0{idx + 1}
                  </span>
                  {isSelected && (
                    <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
                  )}
                </div>
                
                <h3 className="text-xs sm:text-sm font-bold text-white group-hover:text-amber-300 transition-colors">
                  {deck.name}
                </h3>
                <p className="text-[11px] text-slate-400 mt-1">
                  {deck.capacity}
                </p>
              </button>
            );
          })}
        </div>

        {/* Deck Showcase Canvas */}
        <div className="rounded-3xl overflow-hidden border border-white/15 bg-slate-900 shadow-2xl">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
            
            {/* Left/Main: Visual Stage with Real Yacht Photo */}
            <div className="lg:col-span-7 relative min-h-[420px] sm:min-h-[520px] overflow-hidden bg-slate-950 flex items-center justify-center">
              <img
                src={activeDeck.image}
                alt={activeDeck.name}
                className="w-full h-full object-cover object-center transition-all duration-500 filter brightness-95"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent" />

              {/* Verified Vessel Specification Overlay */}
              <div className="absolute bottom-4 left-4 right-4 z-20 flex items-center justify-between p-4 rounded-2xl bg-slate-950/90 backdrop-blur-md border border-white/10">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400">
                    <Wine className="w-4 h-4" />
                  </div>
                  <div>
                    <div className="text-xs font-bold text-white uppercase tracking-wider">
                      {activeDeck.name}
                    </div>
                    <div className="text-[11px] text-slate-400 font-mono">
                      Capacity: {activeDeck.capacity} • {activeDeck.level}
                    </div>
                  </div>
                </div>

                <button
                  onClick={() => onSelectDeckForBooking(activeDeck.id)}
                  className="px-4 py-2 rounded-xl bg-amber-400 text-slate-950 text-xs font-bold hover:bg-amber-300 transition-colors flex items-center gap-1.5"
                >
                  <span>Select Zone</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>

            {/* Right: Rich Storytelling & Specs Breakdown */}
            <div className="lg:col-span-5 p-6 sm:p-8 flex flex-col justify-between space-y-6 bg-slate-900">
              
              <div className="space-y-4">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-950 border border-white/10 text-amber-400 text-xs font-semibold font-mono">
                  <Sparkles className="w-3.5 h-3.5" />
                  <span>{activeDeck.level}</span>
                </div>

                <h3 className="text-2xl sm:text-3xl font-bold text-white">
                  {activeDeck.name}
                </h3>

                <p className="text-xs sm:text-sm text-amber-300/90 font-medium">
                  {activeDeck.tagline}
                </p>

                <p className="text-sm text-slate-300 leading-relaxed font-light">
                  {activeDeck.description}
                </p>

                {/* Key Features List */}
                <div className="pt-2">
                  <h4 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 font-mono">
                    Zone Specifications:
                  </h4>
                  <ul className="space-y-2.5">
                    {activeDeck.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-2.5 text-xs sm:text-sm text-slate-200">
                        <span className="w-5 h-5 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center shrink-0 mt-0.5 border border-emerald-500/30">
                          <Check className="w-3 h-3" />
                        </span>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {/* Vessel Quick Specs Grid */}
              <div className="p-4 rounded-2xl bg-slate-950 border border-white/10 space-y-2.5">
                <div className="flex items-center justify-between text-xs border-b border-white/5 pb-2">
                  <span className="text-slate-400">Total Yacht Length</span>
                  <span className="text-white font-mono font-semibold">{YACHT_SPECS.length}</span>
                </div>
                <div className="flex items-center justify-between text-xs border-b border-white/5 pb-2">
                  <span className="text-slate-400">Total Vessel Capacity</span>
                  <span className="text-amber-400 font-mono font-bold">{YACHT_SPECS.capacity}</span>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <span className="text-slate-400">Audio Setup</span>
                  <span className="text-slate-200 font-mono text-[11px]">Pioneer DJ Console + Multi-Zone</span>
                </div>
              </div>

            </div>

          </div>
        </div>

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