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;