ship-react-portal-web/src/pages/Ships.tsx

import React, { useEffect } from 'react';
import Navbar from '@/src/components/Navbar.tsx';
import Sidebar from '@/src/components/Sidebar.tsx';
import Footer from '@/src/components/Footer.tsx';
import { CONTENT } from '../constants.ts';
import { useLanguage } from '@/src/contexts/LanguageContext.tsx';
import { useTheme } from '@/src/contexts/ThemeContext.tsx';
import { useLocation, Link } from 'react-router-dom';
import { ArrowRight, Anchor, Star, ChevronRight } from 'lucide-react';

const Ships: React.FC = () => {
  const { language } = useLanguage();
  const { shipsPageImages } = useTheme();
  // We explicitly type 'any' here or assume CONTENT structure is updated because
  // TS might not immediately pick up the new keys added to constants without a full types reload in this context.
  // In a real app, types.ts should be updated, but here we access the object properties.
  const t = CONTENT[language].shipsPage as any;
  const location = useLocation();

  // Scroll to section on load or location change
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const section = params.get('section');

    // Always scroll to top first
    if (!section) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
        const element = document.getElementById(section);
        if (element) {
            // Small delay to ensure render
            setTimeout(() => {
                element.scrollIntoView({ behavior: 'smooth' });
            }, 300);
        }
    }
  }, [location]);

  return (
    <div className="min-h-screen bg-white font-sans text-vista-darkblue overflow-x-hidden">
      <Navbar />
      <Sidebar />

      {/* Hero Section */}
      <div className="relative h-[70vh] w-full bg-vista-darkblue flex items-center justify-center overflow-hidden">
         <div className="absolute inset-0 bg-black/40 z-10"></div>
         <img
            src="https://images.unsplash.com/photo-1548291616-3c0f5f743538?q=80&w=1920&auto=format&fit=crop"
            alt="Ships Hero"
            className="absolute inset-0 w-full h-full object-cover animate-slow-zoom"
            loading="lazy"
         />
         <div className="relative z-20 text-center text-white px-4 animate-fade-in-up">
             <span className="block text-sm md:text-base tracking-[0.3em] uppercase mb-4 text-vista-gold">{t.hero_sub}</span>
             <h1 className="text-5xl md:text-8xl font-serif italic mb-6">{CONTENT[language].nav.menu[1].title}</h1>
             <p className="max-w-xl mx-auto text-white/80 font-light text-lg">
                 {t.hero_desc}
             </p>
         </div>
      </div>

      {/* Section 1: Vista Series Intro */}
      <section id="series" className="py-24 max-w-7xl mx-auto px-6">
         <div className="flex flex-col lg:flex-row gap-16 items-start">
            {/* Left: Text Content */}
            <div className="lg:w-3/5 space-y-12">
                <div>
                    <h2 className="text-4xl md:text-5xl font-serif text-vista-darkblue mb-8 leading-tight">
                        {t.intro.title}
                    </h2>
                    <div className="w-20 h-1 bg-vista-gold mb-8"></div>
                    <p className="text-xl font-light leading-relaxed text-vista-darkblue/80">
                        {t.intro.desc}
                    </p>
                </div>

                <div className="space-y-12">
                    {t.intro.points.map((point: any, index: number) => (
                        <div key={index} className="flex gap-8 group">
                            <span className="text-6xl font-serif text-vista-gold/20 font-bold -mt-2 group-hover:text-vista-gold/40 transition-colors duration-500">
                                0{index + 1}
                            </span>
                            <div>
                                <h3 className="text-xl font-bold text-vista-darkblue mb-3 uppercase tracking-wider">{point.title}</h3>
                                <p className="text-vista-darkblue/70 leading-relaxed">{point.desc}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Right: Navigation Cards */}
            <div className="lg:w-2/5 flex flex-col gap-8 sticky top-24">
                <Link to="/ships?section=lanyue" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
                    <img
                        src={shipsPageImages.lanyue[0]}
                        alt="Lanyue"
                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                        loading="lazy"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
                    <div className="absolute bottom-8 left-8 text-white">
                        <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.now_sailing}</span>
                        <span className="text-3xl font-serif italic flex items-center gap-4">
                             {t.lanyue.title} <ArrowRight size={24} className="transform group-hover:translate-x-4 transition-transform text-vista-gold" />
                        </span>
                    </div>
                </Link>

                <Link to="/ships?section=aurora" className="group relative h-72 overflow-hidden block shadow-2xl rounded-sm">
                     <img
                        src={shipsPageImages.aurora}
                        alt="Aurora"
                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"
                        loading="lazy"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-90 transition-opacity"></div>
                    <div className="absolute bottom-8 left-8 text-white">
                        <span className="text-xs uppercase tracking-widest block mb-2 text-vista-gold">{t.coming_soon}</span>
                         <span className="text-3xl font-serif italic flex items-center gap-4">
                             {t.aurora.title} <ArrowRight size={24} className="transform group-hover:translate-x-4 transition-transform text-vista-gold" />
                        </span>
                    </div>
                </Link>
            </div>
         </div>
      </section>

      {/* Divider */}
      <div className="w-full h-px bg-vista-darkblue/10 max-w-7xl mx-auto"></div>

      {/* Section 2: Vista Lanyue Details */}
      <section id="lanyue" className="py-32 bg-vista-gray relative">
          {/* Background Decor */}
          <div className="absolute top-0 right-0 w-1/3 h-full bg-white/50 skew-x-12 hidden lg:block pointer-events-none"></div>

          <div className="max-w-7xl mx-auto px-6 relative z-10">
              <div className="text-center mb-20 max-w-4xl mx-auto">
                  <div className="flex items-center justify-center gap-4 mb-6">
                      <div className="h-px w-12 bg-vista-gold"></div>
                      <span className="text-vista-gold uppercase tracking-widest text-sm font-bold">{t.flagship_label}</span>
                      <div className="h-px w-12 bg-vista-gold"></div>
                  </div>
                  <h2 className="text-5xl md:text-7xl font-serif text-vista-darkblue mb-10">{t.lanyue.title}</h2>
                  <p className="text-vista-darkblue/70 text-lg md:text-xl leading-relaxed font-light">
                      {t.lanyue.desc}
                  </p>

                  <div className="mt-12 flex justify-center gap-6">
                      <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
                          <Anchor size={24} className="text-vista-gold" />
                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_tons}</span>
                      </div>
                      <div className="flex flex-col items-center gap-2 px-6 border-r border-vista-darkblue/10">
                          <Star size={24} className="text-vista-gold" />
                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_stars}</span>
                      </div>
                       <div className="flex flex-col items-center gap-2 px-6">
                          <span className="text-xl font-serif font-bold text-vista-gold">1:1</span>
                          <span className="text-xs uppercase tracking-widest font-bold">{t.stats_ratio}</span>
                      </div>
                  </div>
              </div>

              {/* Lanyue Image Grid (Masonry style) */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 auto-rows-[200px]">
                  {/* Large Hero Image */}
                  <div className="lg:col-span-8 lg:row-span-2 relative group overflow-hidden shadow-lg">
                      <img
                        src={shipsPageImages.lanyue[0]}
                        alt="Lanyue Exterior"
                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                        loading="lazy"
                      />
                  </div>
                  {/* Smaller Detail Images */}
                  <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
                       <img
                        src={shipsPageImages.lanyue[1]}
                        alt="Lanyue Interior"
                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                        loading="lazy"
                      />
                  </div>
                  <div className="lg:col-span-4 lg:row-span-1 relative group overflow-hidden shadow-lg">
                       <img
                        src={shipsPageImages.lanyue[2]}
                        alt="Lanyue Deck"
                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                        loading="lazy"
                      />
                  </div>
                  <div className="lg:col-span-12 lg:row-span-1 relative group overflow-hidden shadow-lg md:hidden lg:block">
                       <img
                        src={shipsPageImages.lanyue[3]}
                        alt="Lanyue Wide"
                        className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                        loading="lazy"
                      />
                  </div>
              </div>

              <div className="mt-16 text-center">
                  <Link to="/itineraries" className="inline-flex items-center gap-3 px-10 py-4 bg-vista-darkblue text-white uppercase tracking-widest text-xs font-bold hover:bg-vista-gold transition-colors duration-300">
                      {t.view_itineraries} <ChevronRight size={16} />
                  </Link>
              </div>
          </div>
      </section>

      {/* Section 3: Vista Aurora Teaser */}
      <section id="aurora" className="relative h-screen flex items-center justify-center overflow-hidden bg-black">
          <div className="absolute inset-0 opacity-70">
               <img
                 src={shipsPageImages.aurora}
                 alt="Aurora"
                 className="w-full h-full object-cover animate-slow-zoom"
                 loading="lazy"
               />
               <div className="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black"></div>
          </div>

          <div className="relative z-10 text-center text-white px-6 max-w-4xl">
               <span className="inline-block border border-white/30 px-4 py-1 rounded-full text-xs uppercase tracking-widest mb-8 backdrop-blur-sm">{t.future_label}</span>
               <h2 className="text-6xl md:text-9xl font-serif italic mb-8 bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/50">
                   {t.aurora.title}
               </h2>
               <p className="text-xl md:text-2xl font-light tracking-wide mb-12 text-white/90">
                   {t.aurora.desc}
               </p>

               <div className="flex flex-col md:flex-row items-center justify-center gap-6">
                   <button className="px-10 py-4 bg-white text-black font-bold uppercase text-xs tracking-[0.2em] hover:bg-vista-gold hover:text-white transition-colors">
                       {t.coming_soon}
                   </button>
                   <button className="px-10 py-4 border border-white/30 text-white font-bold uppercase text-xs tracking-[0.2em] hover:bg-white/10 transition-colors backdrop-blur-sm">
                       {t.waitlist_btn}
                   </button>
               </div>
          </div>
      </section>

      <Footer />
    </div>
  );
};

export default Ships;