import React, { useRef } from 'react';
import { motion, useScroll, useTransform } from 'motion/react';
import { REAL_YACHT_PHOTOS } from '../data/yachtData';

const ParallaxImageLayer: React.FC<{ image: string; alt: string; speed?: number }> = ({
  image,
  alt,
  speed = 80
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"]
  });

  const y = useTransform(scrollYProgress, [0, 1], [-speed, speed]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [1.12, 1.06, 1.12]);

  return (
    <div ref={containerRef} className="absolute inset-0 overflow-hidden pointer-events-none">
      <motion.div 
        style={{ y, scale }} 
        className="w-full h-[120%] -top-[10%] relative"
      >
        <img
          src={image}
          alt={alt}
          className="w-full h-full object-cover object-center filter brightness-[0.97] contrast-[1.02] will-change-transform"
          loading="lazy"
        />
      </motion.div>
    </div>
  );
};

interface VisualReferenceShowcaseProps {
  onOpen3DView: () => void;
  onOpenBooking: () => void;
}

export const VisualReferenceShowcase: React.FC<VisualReferenceShowcaseProps> = () => {
  const card1Ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress: card1Progress } = useScroll({
    target: card1Ref,
    offset: ["start end", "end start"]
  });
  const card1Y = useTransform(card1Progress, [0, 1], [35, -35]);

  const card2Ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress: card2Progress } = useScroll({
    target: card2Ref,
    offset: ["start end", "end start"]
  });
  const card2Y = useTransform(card2Progress, [0, 1], [35, -35]);

  return (
    <div className="w-full flex flex-col bg-[#1e2a38] text-white">
      
      {/* ------------------------------------------------------------- */}
      {/* SECTION 1: Full-Bleed Upper Deck Sky Lounge with Blue Canopy */}
      {/* ------------------------------------------------------------- */}
      <section className="relative w-full h-[70vh] sm:h-[85vh] min-h-[500px] overflow-hidden bg-[#1e2a38]">
        <ParallaxImageLayer
          image={REAL_YACHT_PHOTOS.flybridgeLounge}
          alt="Entourage Upper Flybridge Sky Lounge with Blue Bimini Canopy"
          speed={90}
        />
        {/* Subtle top & bottom shadow dividers */}
        <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-[#1e2a38]/80 to-transparent pointer-events-none z-10" />
        <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#1e2a38]/90 to-transparent pointer-events-none z-10" />
      </section>

      {/* ------------------------------------------------------------- */}
      {/* SECTION 2: Matterport 3D Space Showcase (Live Embed)          */}
      {/* ------------------------------------------------------------- */}
      <section 
        id="3d-space-section" 
        className="relative w-full h-[75vh] sm:h-[85vh] min-h-[550px] bg-[#1e2a38] overflow-hidden border-y border-[#517e8a]/25"
      >
        <iframe
          src="https://my.matterport.com/show/?m=CHnTYns9Qus&brand=0"
          title="Entourage Luxury Yacht Matterport 3D Virtual Space"
          className="w-full h-full border-0"
          allow="xr-spatial-tracking; fullscreen"
          allowFullScreen
          loading="lazy"
        />
      </section>

      {/* ------------------------------------------------------------- */}
      {/* SECTION 3: Aft Deck 10-Seater Solid Teak Table                */}
      {/* ------------------------------------------------------------- */}
      <section className="relative w-full h-[70vh] sm:h-[85vh] min-h-[500px] overflow-hidden bg-[#1e2a38]">
        <ParallaxImageLayer
          image={REAL_YACHT_PHOTOS.aftDiningTable}
          alt="10-Seater Solid Teak Table on Aft Deck of Entourage"
          speed={90}
        />
        <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-[#1e2a38]/90 to-transparent pointer-events-none z-10" />
        <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#1e2a38]/90 to-transparent pointer-events-none z-10" />
      </section>

      {/* ------------------------------------------------------------- */}
      {/* SECTION 4: MAIN DECK Feature with Floating Dark-Blue Card     */}
      {/* ------------------------------------------------------------- */}
      <section ref={card1Ref} className="relative w-full min-h-[650px] sm:min-h-[800px] overflow-hidden bg-[#1e2a38] flex items-center justify-center p-4 sm:p-8">
        <ParallaxImageLayer
          image={REAL_YACHT_PHOTOS.bowLoungeClose}
          alt="Entourage Main Deck and Foredeck Cocktail Lounge"
          speed={110}
        />
        
        {/* Floating Dark-Blue Card with Parallax Counter-Float */}
        <motion.div 
          style={{ y: card1Y }}
          className="relative z-20 max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 rounded-2xl bg-[#2b3b4e]/95 backdrop-blur-md border border-[#e17f52]/40 text-white shadow-2xl"
        >
          <h2 className="text-lg sm:text-xl font-bold uppercase tracking-wider text-white mb-4 font-heading border-b border-[#517e8a]/30 pb-3">
            MAIN DECK
          </h2>
          <p className="text-xs sm:text-sm text-slate-100 font-light leading-relaxed">
            The main floor features an airconditioned main lounge with plush sofas and seating alongside a fully-stocked professional bar/cocktail station as a key focus. At the stern of the yacht, you will find the outdoor dining area that can easily accommodate up to 8 people for a private dining reception. There is an outdoor front deck used for a cocktail area, yoga activities or simply to lounge and sunbathe around while sailing.
          </p>
        </motion.div>
      </section>

      {/* ------------------------------------------------------------- */}
      {/* SECTION 5: UPPER DECK Feature with Floating Dark-Blue Card    */}
      {/* ------------------------------------------------------------- */}
      <section ref={card2Ref} className="relative w-full min-h-[650px] sm:min-h-[800px] overflow-hidden bg-[#1e2a38] flex items-center justify-center p-4 sm:p-8">
        <ParallaxImageLayer
          image={REAL_YACHT_PHOTOS.saloonViewAft}
          alt="Entourage Upper Deck Saloon with Panoramic Windows"
          speed={110}
        />
        
        {/* Floating Dark-Blue Card with Parallax Counter-Float */}
        <motion.div 
          style={{ y: card2Y }}
          className="relative z-20 max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 rounded-2xl bg-[#2b3b4e]/95 backdrop-blur-md border border-[#e17f52]/40 text-white shadow-2xl"
        >
          <h2 className="text-lg sm:text-xl font-bold uppercase tracking-wider text-white mb-4 font-heading border-b border-[#517e8a]/30 pb-3">
            UPPER DECK
          </h2>
          <p className="text-xs sm:text-sm text-slate-100 font-light leading-relaxed">
            The upper deck has been fitted out with relaxed seating for a laid-back feel to enjoy a cocktail and star gaze. It has also a professional surround sound system and DJ booth ready to use to make Entourage the perfect dancefloor and party venue for all your different celebrations.
          </p>
        </motion.div>
      </section>

      {/* ------------------------------------------------------------- */}
      {/* SECTION 6: High-Angle Bow Deck Lounge Overhead Perspective    */}
      {/* ------------------------------------------------------------- */}
      <section className="relative w-full h-[70vh] sm:h-[85vh] min-h-[500px] overflow-hidden bg-[#1e2a38]">
        <ParallaxImageLayer
          image={REAL_YACHT_PHOTOS.bowLoungeOverview}
          alt="High Angle Overhead of Entourage Bow Teak Deck"
          speed={90}
        />
        <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-[#1e2a38]/90 to-transparent pointer-events-none z-10" />
        <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[#1e2a38]/90 to-transparent pointer-events-none z-10" />
      </section>

    </div>
  );
};