"use client";

import React, { useState, useEffect, useRef, RefObject } from "react";
import {
    TrendingUp,
    ShieldCheck,
    Globe,
    PieChart,
    ArrowUpRight,
    Menu,
    Building2,
    Wallet,
    Smartphone,
    CheckCircle
} from "lucide-react";

// --- Hooks for Animation ---
const useOnScreen = (options: IntersectionObserverInit): [RefObject<HTMLDivElement | null>, boolean] => {
    const ref = useRef<HTMLDivElement>(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                setVisible(true);
                observer.disconnect();
            }
        }, options);

        if (ref.current) {
            observer.observe(ref.current);
        }

        return () => {
            observer.disconnect();
        };
    }, [options]);

    return [ref, visible];
};

// --- Components ---

const fadeOptions: IntersectionObserverInit = { threshold: 0.1 };

interface FadeInSectionProps {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}

const FadeInSection = ({ children, delay = 0, className = "" }: FadeInSectionProps) => {
    const [ref, visible] = useOnScreen(fadeOptions);

    return (
        <div
            ref={ref}
            style={{ transitionDelay: `${delay}ms` }}
            className={`transition-all duration-1000 ease-out transform ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
                } ${className}`}
        >
            {children}
        </div>
    );
};

// --- Main Page Component ---
export default function BankingPage() {
    const [scrolled, setScrolled] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);

    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    }, []);

    return (
        <div className="min-h-screen bg-stone-50 text-slate-900 font-sans selection:bg-blue-900 selection:text-white overflow-x-hidden">

            {/* Mobile Menu */}
            {menuOpen && (
                <div className="fixed inset-0 z-40 bg-white pt-24 px-6 md:hidden border-b border-stone-200">
                    <nav className="flex flex-col gap-8 text-2xl font-serif text-slate-900">
                        {['Private Wealth', 'Corporate', 'Investment', 'Insights'].map((item) => (
                            <a key={item} href="#" className="border-b border-stone-100 pb-4">{item}</a>
                        ))}
                    </nav>
                </div>
            )}

            {/* ================= HERO ================= */}
            <section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
                {/* Cinematic Background Image */}
                <div className="absolute inset-0 z-0">
                    <img
                        src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2670&auto=format&fit=crop"
                        alt="Financial District"
                        className="w-full h-full object-cover brightness-[0.6]"
                    />
                    <div className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-900/40 to-transparent"></div>
                </div>

                <div className="max-w-[1600px] mx-auto px-6 relative z-10 w-full grid lg:grid-cols-12 gap-12 items-center">
                    <div className="lg:col-span-8">
                        <FadeInSection>
                            <div className="flex items-center gap-4 mb-8">
                                <span className="px-4 py-1 bg-white/10 backdrop-blur-sm border border-white/20 text-white text-[10px] font-bold uppercase tracking-widest">
                                    Est. 1884 · New York · London · Zurich
                                </span>
                            </div>
                        </FadeInSection>

                        <FadeInSection delay={100}>
                            <h1 className="text-6xl md:text-8xl lg:text-9xl font-serif text-white mb-8 leading-[1.05] tracking-tight">
                                Architecting <br />
                                <span className="italic font-light text-slate-300">Prosperity.</span>
                            </h1>
                        </FadeInSection>

                        <FadeInSection delay={200}>
                            <p className="max-w-xl text-lg text-slate-200 leading-relaxed mb-12 border-l-2 border-blue-500 pl-8 font-light">
                                Meridian Global provides bespoke wealth management and institutional
                                investment strategies for the world&apos;s most discerning capital.
                            </p>
                            <div className="flex flex-col sm:flex-row gap-4">
                                <button className="h-16 px-10 bg-white text-slate-900 text-xs font-bold uppercase tracking-widest hover:bg-slate-100 transition-colors shadow-2xl">
                                    Open an Account
                                </button>
                                <button className="h-16 px-10 border border-white/30 text-white text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-colors flex items-center gap-3 backdrop-blur-sm">
                                    Our Philosophy <ArrowUpRight className="w-4 h-4" />
                                </button>
                            </div>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* ================= MARKET TICKER ================= */}
            <section className="bg-slate-900 text-white border-b border-slate-800 overflow-hidden relative z-20">
                <div className="max-w-[1600px] mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center text-xs font-mono tracking-widest">
                    <div className="flex gap-10 overflow-x-auto w-full md:w-auto">
                        <span className="flex items-center gap-2">S&P 500 <span className="text-emerald-400">4,783.45 ▲ 0.8%</span></span>
                        <span className="flex items-center gap-2">NASDAQ <span className="text-emerald-400">15,620.12 ▲ 1.2%</span></span>
                        <span className="flex items-center gap-2">FTSE 100 <span className="text-red-400">7,420.10 ▼ 0.2%</span></span>
                        <span className="flex items-center gap-2">EUR/USD <span className="text-emerald-400">1.09 ▲ 0.05%</span></span>
                    </div>
                    <div className="hidden md:flex items-center gap-2 text-slate-400">
                        <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> MARKET OPEN
                    </div>
                </div>
            </section>

            {/* ================= EXECUTIVE SUMMARY ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-24 items-center">
                    <div className="relative">
                        <FadeInSection>
                            <div className="absolute -top-10 -left-10 w-64 h-64 bg-slate-100 rounded-full blur-3xl opacity-50 z-0"></div>
                            <img
                                src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=2664&auto=format&fit=crop"
                                alt="Boardroom Meeting"
                                className="relative z-10 w-full h-[600px] object-cover rounded-sm shadow-2xl"
                            />
                            <div className="absolute -bottom-10 -right-10 bg-slate-900 p-8 z-20 max-w-xs shadow-xl">
                                <div className="text-4xl font-serif text-white mb-2">$850B+</div>
                                <div className="text-xs font-bold uppercase tracking-widest text-slate-400">Assets Under Management</div>
                            </div>
                        </FadeInSection>
                    </div>

                    <div>
                        <FadeInSection delay={200}>
                            <div className="flex items-center gap-3 mb-8">
                                <Building2 className="w-5 h-5 text-blue-800" />
                                <span className="text-xs font-bold uppercase tracking-widest text-blue-800">About Meridian</span>
                            </div>
                            <h2 className="text-4xl md:text-6xl font-serif text-slate-900 mb-8 leading-tight">
                                Stability in a <br />
                                <span className="italic text-slate-500">Volatile World.</span>
                            </h2>
                            <p className="text-slate-600 leading-relaxed mb-8 text-lg font-light">
                                For over 140 years, Meridian Global has served as a bulwark of financial stability for
                                sovereign entities, corporations, and ultra-high-net-worth individuals.
                                Our conservative yet opportunistic approach ensures generational wealth preservation.
                            </p>

                            <div className="grid grid-cols-2 gap-8 border-t border-slate-200 pt-8">
                                <div>
                                    <div className="text-3xl font-serif text-slate-900 mb-2">140+</div>
                                    <div className="text-xs font-bold uppercase tracking-widest text-slate-500">Years of History</div>
                                </div>
                                <div>
                                    <div className="text-3xl font-serif text-slate-900 mb-2">45</div>
                                    <div className="text-xs font-bold uppercase tracking-widest text-slate-500">Global Offices</div>
                                </div>
                            </div>
                        </FadeInSection>
                    </div>
                </div>
            </section>

            {/* ================= SERVICES GRID ================= */}
            <section className="py-32 bg-slate-50">
                <div className="max-w-[1600px] mx-auto px-6">
                    <div className="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-slate-200 pb-8">
                        <FadeInSection>
                            <h2 className="text-4xl md:text-5xl font-serif text-slate-900">
                                Financial <span className="italic text-slate-500">Expertise</span>
                            </h2>
                        </FadeInSection>
                        <FadeInSection delay={100}>
                            <p className="text-slate-500 text-sm max-w-sm text-right mt-4 md:mt-0 leading-relaxed font-medium">
                                Comprehensive banking solutions tailored for complex capital structures.
                            </p>
                        </FadeInSection>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {[
                            {
                                title: "Private Wealth",
                                desc: "Holistic estate planning and portfolio management for UHNW individuals.",
                                icon: Wallet
                            },
                            {
                                title: "Investment Banking",
                                desc: "Strategic M&A advisory and capital markets underwriting.",
                                icon: TrendingUp
                            },
                            {
                                title: "Corporate Finance",
                                desc: "Treasury management and liquidity solutions for multinationals.",
                                icon: Building2
                            },
                            {
                                title: "Asset Management",
                                desc: "Institutional-grade investment vehicles across all asset classes.",
                                icon: PieChart
                            },
                            {
                                title: "Fintech Solutions",
                                desc: "API-driven banking infrastructure for the digital economy.",
                                icon: Smartphone
                            },
                            {
                                title: "Sustainable Finance",
                                desc: "ESG-focused investment strategies for a responsible future.",
                                icon: Globe
                            },
                        ].map((item, i) => (
                            <FadeInSection key={i} delay={i * 50}>
                                <div className="group bg-white p-12 hover:shadow-2xl transition-all duration-500 border border-slate-100 hover:border-blue-100 h-full flex flex-col justify-between cursor-pointer">
                                    <div>
                                        <div className="w-14 h-14 bg-slate-50 group-hover:bg-blue-900 group-hover:text-white text-slate-900 flex items-center justify-center mb-8 transition-colors duration-500 rounded-sm">
                                            <item.icon className="w-7 h-7" />
                                        </div>
                                        <h3 className="text-2xl font-serif text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">{item.title}</h3>
                                        <p className="text-slate-500 text-sm leading-relaxed mb-8">
                                            {item.desc}
                                        </p>
                                    </div>
                                    <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-blue-800 transition-colors">
                                        Learn More <ArrowUpRight className="w-3 h-3" />
                                    </div>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= DIGITAL EXPERIENCE ================= */}
            <section className="py-32 bg-[#0F172A] text-white relative overflow-hidden">
                <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>

                {/* Background Gradients */}
                <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-blue-900/10 rounded-full blur-[120px] pointer-events-none"></div>
                <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-emerald-900/10 rounded-full blur-[100px] pointer-events-none"></div>

                <div className="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-24 items-center relative z-10">
                    <FadeInSection>
                        <div className="inline-flex items-center gap-2 text-blue-400 font-mono text-xs font-bold mb-8 tracking-widest uppercase">
                            <Smartphone className="w-4 h-4" />
                            Digital Innovation
                        </div>
                        <h2 className="text-4xl md:text-6xl font-medium text-white mb-6 leading-tight tracking-tight">
                            Banking at the <br />
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Speed of Light.</span>
                        </h2>
                        <p className="text-slate-400 text-lg mb-10 leading-relaxed font-light">
                            Experience our award-winning digital platform. Real-time analytics,
                            secure messaging with your advisor, and instant global transfers—all
                            from your secure device.
                        </p>

                        <div className="space-y-4 mb-12">
                            {[
                                { title: "Biometric Security", desc: "FaceID & Fingerprint authentication layer." },
                                { title: "Real-time Portfolio", desc: "Live streaming market data and asset valuation." },
                                { title: "24/7 Concierge", desc: "Direct encrypted line to your private banker." },
                                { title: "Instant Transfers", desc: "Cross-border settlements in < 30 seconds." }
                            ].map((item, i) => (
                                <div key={i} className="group flex items-start gap-4 p-4 rounded-xl border border-white/5 hover:bg-white/5 hover:border-white/10 transition-all cursor-default">
                                    <div className="mt-1 w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 group-hover:bg-blue-500 group-hover:text-white transition-colors">
                                        <ShieldCheck className="w-4 h-4" />
                                    </div>
                                    <div>
                                        <h4 className="text-white text-sm font-bold mb-1">{item.title}</h4>
                                        <p className="text-slate-500 text-xs">{item.desc}</p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <button className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-white hover:text-blue-400 transition-colors group">
                            View Platform Demo <ArrowUpRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </button>
                    </FadeInSection>

                    <FadeInSection delay={200}>
                        <div className="relative group perspective-1000">
                            <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-emerald-600 rounded-[2.5rem] blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>

                            {/* Abstract Phone Container */}
                            <div className="relative rounded-[2.5rem] bg-[#0A0A0A] border border-white/10 shadow-2xl p-2 transform rotate-y-[-10deg] group-hover:rotate-y-0 transition-transform duration-700 ease-out">
                                <div className="absolute top-0 inset-x-0 h-6 z-20 flex justify-center">
                                    <div className="w-32 h-4 bg-black rounded-b-xl border-b border-l border-r border-white/10"></div>
                                </div>

                                {/* Screen Content */}
                                <div className="relative h-[700px] w-full bg-slate-950 rounded-[2rem] overflow-hidden flex flex-col">
                                    {/* Header */}
                                    <div className="p-8 pt-16 flex justify-between items-center bg-gradient-to-b from-blue-900/20 to-transparent">
                                        <div>
                                            <div className="text-xs text-slate-400 uppercase tracking-widest mb-1">Total Assets</div>
                                            <div className="text-3xl font-mono text-white tracking-tight">$12,450,200</div>
                                        </div>
                                        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center backdrop-blur-md">
                                            <Menu className="w-5 h-5 text-white" />
                                        </div>
                                    </div>

                                    {/* Chart Area */}
                                    <div className="px-6 h-48 flex items-end gap-1">
                                        {[40, 65, 45, 80, 55, 90, 75, 60, 85, 95].map((h, i) => (
                                            <div key={i} style={{ height: `${h}%` }} className="flex-1 bg-gradient-to-t from-blue-600/50 to-emerald-400/50 rounded-t-sm opacity-60 hover:opacity-100 transition-opacity"></div>
                                        ))}
                                    </div>

                                    {/* Action Grid */}
                                    <div className="flex-1 bg-white/5 backdrop-blur-md mt-6 rounded-t-3xl p-6 border-t border-white/10">
                                        <div className="grid grid-cols-4 gap-4 mb-8">
                                            {['Send', 'Invest', 'Cards', 'More'].map((action, i) => (
                                                <div key={i} className="flex flex-col items-center gap-2">
                                                    <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center hover:bg-white/10 transition-colors cursor-pointer">
                                                        <ArrowUpRight className="w-5 h-5 text-white" />
                                                    </div>
                                                    <span className="text-[10px] text-slate-400 uppercase tracking-wide">{action}</span>
                                                </div>
                                            ))}
                                        </div>

                                        <div className="space-y-4">
                                            <div className="text-xs font-bold text-slate-500 uppercase tracking-widest">Recent Activity</div>
                                            {[1, 2, 3].map((i) => (
                                                <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
                                                    <div className="flex items-center gap-3">
                                                        <div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center">
                                                            <Building2 className="w-4 h-4 text-blue-400" />
                                                        </div>
                                                        <div>
                                                            <div className="text-sm text-white font-medium">SpaceX Corp</div>
                                                            <div className="text-[10px] text-slate-500">Private Equity Call</div>
                                                        </div>
                                                    </div>
                                                    <div className="text-sm font-mono text-white">-$250,000</div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Floating Notification */}
                            <div className="absolute top-32 -right-12 bg-[#0A0A0A]/90 backdrop-blur-xl border border-emerald-500/30 p-4 rounded-lg shadow-2xl flex items-center gap-3 z-30 animate-bounce-slow">
                                <div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center">
                                    <CheckCircle className="w-4 h-4 text-emerald-400" />
                                </div>
                                <div>
                                    <div className="text-xs text-emerald-400 font-bold uppercase tracking-wider">Transfer Complete</div>
                                    <div className="text-[10px] text-slate-400">0.4s • Tokyo Exchange</div>
                                </div>
                            </div>
                        </div>
                    </FadeInSection>
                </div>
            </section>

            {/* ================= INSIGHTS ================= */}
            <section className="py-32 bg-white">
                <div className="max-w-[1600px] mx-auto px-6">
                    <div className="flex justify-between items-end mb-16">
                        <FadeInSection>
                            <h2 className="text-4xl font-serif text-slate-900">Meridian <span className="italic text-slate-500">Perspectives</span></h2>
                        </FadeInSection>
                        <FadeInSection delay={100}>
                            <button className="text-xs font-bold uppercase tracking-widest text-blue-900 border-b border-blue-900 pb-1 hover:text-blue-700 transition-colors">
                                Read All Insights
                            </button>
                        </FadeInSection>
                    </div>

                    <div className="grid lg:grid-cols-3 gap-12">
                        {[
                            { date: "OCT 12, 2024", cat: "Market Outlook", title: "Navigating Volatility: The 2025 Global Forecast", img: "https://images.unsplash.com/photo-1611974765270-ca12586343bb?q=80&w=2670&auto=format&fit=crop" },
                            { date: "SEP 28, 2024", cat: "Wealth Planning", title: "Tax Efficiency Strategies for Cross-Border Estates", img: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=2670&auto=format&fit=crop" },
                            { date: "AUG 15, 2024", cat: "Technology", title: "The Impact of AI on Algorithmic Trading Models", img: "https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2670&auto=format&fit=crop" }
                        ].map((news, i) => (
                            <FadeInSection key={i} delay={i * 100}>
                                <div className="group cursor-pointer">
                                    <div className="aspect-[16/10] overflow-hidden mb-8 bg-slate-100 relative">
                                        <img src={news.img} alt={news.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
                                        <div className="absolute top-4 left-4 bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-900">
                                            {news.cat}
                                        </div>
                                    </div>
                                    <div className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3 border-l-2 border-blue-600 pl-3">
                                        {news.date}
                                    </div>
                                    <h3 className="text-2xl font-serif text-slate-900 leading-tight group-hover:text-blue-900 transition-colors">
                                        {news.title}
                                    </h3>
                                </div>
                            </FadeInSection>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= CTA ================= */}
            <section className="py-32 bg-slate-100 border-t border-slate-200 text-center">
                <div className="max-w-3xl mx-auto px-6">
                    <FadeInSection>
                        <h2 className="text-4xl md:text-5xl font-serif text-slate-900 mb-8">
                            Partner with <span className="italic text-blue-800">Excellence.</span>
                        </h2>
                        <p className="text-xl text-slate-600 mb-12 font-light">
                            Discover how Meridian Global can help you achieve your financial ambitions.
                            Schedule a private consultation with our advisors.
                        </p>
                        <div className="flex flex-col sm:flex-row justify-center gap-6">
                            <button className="h-16 px-10 bg-blue-900 text-white text-xs font-bold uppercase tracking-widest hover:bg-blue-800 transition-colors shadow-2xl">
                                Become a Client
                            </button>
                            <button className="h-16 px-10 border border-slate-300 text-slate-900 text-xs font-bold uppercase tracking-widest hover:bg-white transition-colors">
                                Locate an Office
                            </button>
                        </div>
                    </FadeInSection>
                </div>
            </section>

        </div>
    );
}