"use client";

import React, { useState, useEffect } from 'react';
import {
    Menu,
    X,
    ArrowRight,
    ChevronDown,
    BarChart3,
    Globe2,
    Users,
    Briefcase,
    PieChart,
    TrendingUp,
    Target,
    Award,
    BookOpen,
    ArrowUpRight,
    CheckCircle2,
    Building2,
    Phone
} from 'lucide-react';

// --- Types ---
interface Service {
    id: string;
    title: string;
    desc: string;
    icon: any;
}

interface Insight {
    id: string;
    category: string;
    title: string;
    date: string;
    image: string;
}

// --- Mock Data ---
const SERVICES: Service[] = [
    {
        id: 'strategy',
        title: 'Corporate Strategy',
        desc: 'Defining long-term vision and execution roadmaps to navigate complex market landscapes.',
        icon: Target
    },
    {
        id: 'digital',
        title: 'Digital Transformation',
        desc: 'Modernizing legacy systems and leveraging AI to drive operational efficiency.',
        icon: LaptopIcon
    },
    {
        id: 'mergers',
        title: 'M&A Advisory',
        desc: 'End-to-end support for mergers, acquisitions, and divestitures to maximize value.',
        icon: PieChart
    },
    {
        id: 'sustainability',
        title: 'Sustainability (ESG)',
        desc: 'Integrating environmental, social, and governance goals into core business strategy.',
        icon: Globe2
    },
    {
        id: 'operations',
        title: 'Operations',
        desc: 'Optimizing supply chains and manufacturing processes for resilience and speed.',
        icon: BarChart3
    },
    {
        id: 'people',
        title: 'People & Change',
        desc: 'Organizational design and talent strategies to build high-performing cultures.',
        icon: Users
    }
];

const INSIGHTS: Insight[] = [
    {
        id: '1',
        category: 'Market Trends',
        title: 'The Future of Supply Chain Resilience in 2025',
        date: 'Oct 12, 2024',
        image: 'https://images.unsplash.com/photo-1486406140926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: '2',
        category: 'Digital',
        title: 'Navigating the AI Revolution: A CEO’s Guide',
        date: 'Sep 28, 2024',
        image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop'
    },
    {
        id: '3',
        category: 'Sustainability',
        title: 'Decarbonization Pathways for Heavy Industry',
        date: 'Sep 15, 2024',
        image: 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?q=80&w=2070&auto=format&fit=crop'
    }
];

// Helper for dynamic icon usage in mock data
function LaptopIcon(props: any) {
    return (
        <svg
            {...props}
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16" />
        </svg>
    )
}

export default function ConsultingPage() {
    const [scrolled, setScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 40);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

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

            {/* --- Hero Section --- */}
            <section className="relative pt-32 lg:pt-48 pb-20 lg:pb-32 px-6 overflow-hidden bg-black text-white">
                <div className="absolute inset-0 z-0">
                    {/* Abstract Background Graphic */}
                    <div className="absolute right-0 top-0 w-[50%] h-full bg-zinc-900/50 clip-path-polygon hidden lg:block"></div>
                </div>

                <div className="max-w-7xl mx-auto relative z-10">
                    <div className="grid lg:grid-cols-2 gap-16 items-center">
                        <div>
                            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-900/30 text-blue-300 text-xs font-bold uppercase tracking-widest mb-8 border border-blue-800/50">
                                <TrendingUp className="w-3 h-3" />
                                Global Strategy Firm
                            </div>

                            <h1 className="text-5xl md:text-7xl font-serif text-white mb-8 leading-[1.1]">
                                Clarity in a <br />
                                <span className="text-blue-500 italic">Complex World.</span>
                            </h1>

                            <p className="text-xl text-slate-400 mb-10 leading-relaxed max-w-lg">
                                We partner with leaders in business and society to tackle their most important challenges and capture their greatest opportunities.
                            </p>

                            <div className="flex flex-wrap gap-4">
                                <button className="h-14 px-8 bg-blue-600 text-white font-semibold text-base hover:bg-blue-500 transition-colors flex items-center gap-2 rounded-sm shadow-xl shadow-blue-900/20">
                                    Our Capabilities <ArrowRight className="w-4 h-4" />
                                </button>
                                <button className="h-14 px-8 bg-transparent border border-zinc-700 text-white font-semibold text-base hover:bg-white/10 transition-colors flex items-center gap-2 rounded-sm">
                                    Read Latest Insights
                                </button>
                            </div>
                        </div>

                        <div className="relative">
                            <div className="relative h-[600px] w-full rounded-sm overflow-hidden shadow-2xl border border-zinc-800">
                                <img
                                    src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=2664&auto=format&fit=crop"
                                    alt="Corporate Meeting"
                                    className="w-full h-full object-cover opacity-80"
                                />
                                <div className="absolute inset-0 bg-blue-950/40 mix-blend-multiply"></div>

                                {/* Floating Card */}
                                <div className="absolute bottom-8 left-8 right-8 bg-zinc-950/90 backdrop-blur p-6 border-l-4 border-blue-500 shadow-xl">
                                    <div className="flex items-start gap-4">
                                        <div className="p-3 bg-blue-900/30 rounded-full text-blue-400">
                                            <Briefcase className="w-6 h-6" />
                                        </div>
                                        <div>
                                            <p className="text-sm font-bold text-slate-400 uppercase tracking-wide mb-1">Impact Report</p>
                                            <p className="text-lg font-serif text-white">
                                                "Nexus helped us identify $500M in operational efficiencies within 12 months."
                                            </p>
                                            <p className="text-sm text-slate-500 mt-2 font-medium">— CEO, Global Manufacturing Corp</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Decorative Dot Grid */}
                            <div className="absolute -z-10 -bottom-12 -right-12 text-zinc-800">
                                <div className="w-48 h-48 bg-[radial-gradient(currentColor_1px,transparent_1px)] background-size:[16px_16px]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* --- Statistics Strip --- */}
            <section className="bg-blue-950 text-white py-16">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-12 text-center md:text-left divide-x divide-blue-900/50">
                        {[
                            { value: "85+", label: "Offices Worldwide" },
                            { value: "40%", label: "Fortune 500 Clients" },
                            { value: "$20B", label: "Value Delivered" },
                            { value: "5k+", label: "Expert Consultants" }
                        ].map((stat, i) => (
                            <div key={i} className="pl-6 first:pl-0">
                                <div className="text-4xl md:text-5xl font-serif font-medium mb-2">{stat.value}</div>
                                <div className="text-sm font-medium text-blue-200 uppercase tracking-widest">{stat.label}</div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* --- Expertise Section --- */}
            <section id="expertise" className="py-24 px-6 bg-white">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center max-w-3xl mx-auto mb-20">
                        <span className="text-blue-900 font-bold text-xs uppercase tracking-widest mb-3 block">What We Do</span>
                        <h2 className="text-3xl md:text-4xl font-serif text-slate-900 mb-6">Transforming businesses through strategic innovation.</h2>
                        <div className="w-20 h-1 bg-blue-900 mx-auto"></div>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
                        {SERVICES.map((service) => (
                            <div key={service.id} className="group cursor-pointer">
                                <div className="flex items-start gap-4 mb-4">
                                    <div className="p-3 bg-slate-50 text-blue-900 rounded-sm group-hover:bg-blue-900 group-hover:text-white transition-colors duration-300">
                                        <service.icon className="w-6 h-6" />
                                    </div>
                                    <h3 className="text-xl font-bold text-slate-900 mt-2">{service.title}</h3>
                                </div>
                                <p className="text-slate-600 leading-relaxed mb-4 pl-[60px]">
                                    {service.desc}
                                </p>
                                <div className="pl-[60px]">
                                    <span className="inline-flex items-center gap-2 text-sm font-bold text-blue-900 hover:text-blue-700 transition-colors group-hover:translate-x-2 duration-300">
                                        Learn More <ArrowRight className="w-4 h-4" />
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* --- Featured Insights --- */}
            <section id="insights" className="py-24 px-6 bg-black text-white">
                <div className="max-w-7xl mx-auto">
                    <div className="flex justify-between items-end mb-12">
                        <div>
                            <h2 className="text-3xl font-serif text-white mb-4">Featured Insights</h2>
                            <p className="text-zinc-400">Our latest thinking on the issues that matter most in business.</p>
                        </div>
                        <button className="hidden md:flex items-center gap-2 text-white font-bold hover:text-blue-400 transition-colors">
                            View all Research <ArrowRight className="w-4 h-4" />
                        </button>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        {INSIGHTS.map((insight) => (
                            <div key={insight.id} className="group bg-white text-slate-900 rounded-sm overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col h-full border border-zinc-800">
                                <div className="relative h-48 overflow-hidden">
                                    <img
                                        src={insight.image}
                                        alt={insight.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/95 backdrop-blur px-3 py-1 text-xs font-bold text-blue-900 uppercase tracking-wider shadow-sm">
                                        {insight.category}
                                    </div>
                                </div>
                                <div className="p-8 flex-1 flex flex-col">
                                    <div className="text-xs text-slate-500 mb-3 font-medium">{insight.date}</div>
                                    <h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">
                                        {insight.title}
                                    </h3>
                                    <div className="mt-auto pt-6 border-t border-slate-100 flex items-center justify-between">
                                        <span className="text-sm font-semibold text-slate-900">Read Article</span>
                                        <ArrowUpRight className="w-4 h-4 text-slate-400 group-hover:text-blue-900 transition-colors" />
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    <div className="mt-12 text-center md:hidden">
                        <button className="px-8 py-3 bg-white text-black font-bold uppercase tracking-wide hover:bg-zinc-200 transition-colors rounded-sm w-full justify-center">View All Research</button>
                    </div>
                </div>
            </section>

            {/* --- Why Us / Value Prop --- */}
            <section className="py-24 px-6 bg-white">
                <div className="max-w-7xl mx-auto">
                    <div className="grid lg:grid-cols-2 gap-16 items-center">
                        <div className="relative h-[600px] bg-slate-100 rounded-sm overflow-hidden">
                            <img
                                src="https://images.unsplash.com/photo-1573164713988-8665fc963095?q=80&w=2069&auto=format&fit=crop"
                                alt="Consultant Team"
                                className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700"
                            />
                        </div>
                        <div>
                            <h2 className="text-3xl md:text-4xl font-serif text-slate-900 mb-6">
                                Why Global Leaders Choose Nexus
                            </h2>
                            <p className="text-lg text-slate-600 mb-8 leading-relaxed">
                                We don't just advise; we work shoulder-to-shoulder with you to deliver results. Our approach combines deep industry expertise with cutting-edge analytical rigor.
                            </p>

                            <div className="space-y-6">
                                {[
                                    { title: "Deep Industry Knowledge", desc: "Specialized teams for every sector." },
                                    { title: "Data-Driven Strategy", desc: "Decisions backed by proprietary analytics." },
                                    { title: "Global Network", desc: "Access to experts in 40+ countries." },
                                ].map((item, i) => (
                                    <div key={i} className="flex gap-4">
                                        <div className="mt-1">
                                            <CheckCircle2 className="w-6 h-6 text-blue-900" />
                                        </div>
                                        <div>
                                            <h4 className="text-lg font-bold text-slate-900">{item.title}</h4>
                                            <p className="text-slate-600">{item.desc}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* --- CTA Section --- */}
            <section className="py-24 px-6 bg-blue-950 text-white relative overflow-hidden">
                <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
                <div className="max-w-4xl mx-auto text-center relative z-10">
                    <h2 className="text-4xl md:text-5xl font-serif mb-8">Ready to define your future?</h2>
                    <p className="text-xl text-blue-200 mb-10 max-w-2xl mx-auto">
                        Schedule a consultation with our senior partners to discuss your strategic objectives.
                    </p>
                    <div className="flex flex-col sm:flex-row justify-center gap-4">
                        <button className="h-14 px-10 bg-white text-blue-950 font-bold text-base hover:bg-blue-50 transition-colors rounded-sm flex items-center justify-center gap-2">
                            <Phone className="w-4 h-4" /> Schedule Consultation
                        </button>
                        <button className="h-14 px-10 bg-transparent border border-blue-800 text-white font-bold text-base hover:bg-blue-900 transition-colors rounded-sm">
                            Find an Office
                        </button>
                    </div>
                </div>
            </section>

        </div>
    );
}