'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import HeroBackground3D from '@/components/ui/3d/HeroBackground3D';
import AnimatedCounter from '@/components/ui/AnimatedCounter';
import CardIcon3D from '@/components/ui/3d/CardIcon3D';
import { Zap, ArrowRight, Bike, Wallet, Leaf, ShieldCheck, MapPin, Truck, ChevronRight, BarChart3, BatteryCharging, Clock, Activity } from 'lucide-react';

export default function LandingPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const handleLogin = async (email: string) => {
    setLoading(true);
    await new Promise(resolve => setTimeout(resolve, 500));

    const user = users.find(u => u.email === email);
    if (user) {
      sessionStorage.setItem('authToken', 'demo-token');
      sessionStorage.setItem('userRole', user.role);
      sessionStorage.setItem('userName', user.name);

      switch (user.role) {
        case 'super_admin':
        case 'admin_manager':
        case 'staff':
          router.push('/admin');
          break;
        case 'accountant':
          router.push('/admin/accounting');
          break;
        case 'investor':
          router.push('/investor/dashboard');
          break;
        case 'biker':
          router.push('/biker');
          break;
        case 'swapstation':
          router.push('/swapstation');
          break;
        case 'merchant':
          router.push('/merchant');
          break;
        default:
          router.push('/login');
      }
    }
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans selection:bg-accent selection:text-white pb-20 lg:pb-0">
      {/* Dynamic Header */}
      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className={`object-contain transition-all duration-300 ${scrolled ? 'h-8' : 'h-10'} w-auto`} priority />
            <div>
              <h1 className={`font-extrabold leading-tight transition-colors duration-300 ${scrolled ? 'text-xl text-slate-900' : 'text-2xl text-white'}`}>JAIBEN</h1>
              <p className={`text-[10px] leading-none transition-colors duration-300 ${scrolled ? 'text-slate-500' : 'text-white/80'}`}>Mobility Ltd</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <button
              onClick={() => router.push('/coming-soon')}
              className={`px-5 py-2.5 rounded-full font-semibold transition-all flex items-center gap-2 ${scrolled
                ? 'bg-accent text-white hover:bg-accent-dark shadow-md hover:shadow-lg'
                : 'bg-white text-accent hover:bg-slate-100 shadow-xl'
                }`}
            >
              Sign In <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative pt-32 pb-24 lg:pt-48 lg:pb-40 overflow-hidden bg-slate-900 min-h-[88vh] lg:min-h-screen flex items-center">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-accent/20 z-0" />
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-20 mix-blend-overlay z-0"></div>
        <HeroBackground3D />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full text-center lg:text-left">
          <div className="max-w-2xl lg:max-w-xl">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white text-sm font-medium mb-8">
              <Leaf className="w-4 h-4 text-emerald-400" /> Bangladesh&apos;s Leading EV Platform
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-white mb-6 leading-tight tracking-tight drop-shadow-2xl">
              Ditch Petrol. <br className="hidden sm:block" />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent via-emerald-400 to-accent-light">Go Electric</span> with JAIBEN.
            </h1>
            <p className="text-slate-300 text-lg sm:text-xl mb-10 drop-shadow-lg">
              The largest EV Tech platform enabling the Gig Economy. Rent, Rent-to-Own, or Invest in EVs. Join the sustainable mobility revolution today.
            </p>
            <div className="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-4">
              <button
                onClick={() => router.push('/coming-soon')}
                className="w-full sm:w-auto px-8 py-4 bg-accent text-white rounded-full font-bold text-lg hover:bg-accent-dark transition-all transform hover:scale-105 shadow-xl shadow-accent/30 flex items-center justify-center gap-2"
              >
                Get Started Now <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

        {/* Decorative background elements */}
        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-accent/30 rounded-full blur-3xl mix-blend-screen pointer-events-none"></div>
        <div className="absolute top-24 -right-24 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl mix-blend-screen pointer-events-none"></div>
      </section>

      {/* Stats Section */}
      <section className="py-12 lg:py-16 bg-white border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 divide-x divide-slate-100">
            <div className="flex flex-col items-center justify-center text-center px-2">
              <h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
                <AnimatedCounter end={500} suffix="+" />
              </h3>
              <p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Active Riders</p>
            </div>
            <div className="flex flex-col items-center justify-center text-center px-2">
              <h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
                <AnimatedCounter end={200} suffix="+" />
              </h3>
              <p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">EV Fleet Size</p>
            </div>
            <div className="flex flex-col items-center justify-center text-center px-2">
              <h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2 text-accent">
                <AnimatedCounter end={18} suffix="%" />
              </h3>
              <p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Avg. Investor ROI</p>
            </div>
            <div className="flex flex-col items-center justify-center text-center px-2">
              <h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
                <AnimatedCounter end={50} suffix="k+" />
              </h3>
              <p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Deliveries Done</p>
            </div>
          </div>
        </div>
      </section>

      {/* Services / What We Offer */}
      <section className="py-16 lg:py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-accent font-semibold tracking-wide uppercase mb-3">Our Ecosystem</h2>
            <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">What We Offer</h3>
            <p className="text-slate-600 text-lg">Explore categories of services tailored to save you money, boost your earnings, and reduce emissions.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Service 1 */}
            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
              <div className="absolute top-0 right-0 w-32 h-32 bg-biker/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
              <div className="w-16 h-16 bg-biker/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-biker group-hover:bg-biker group-hover:text-white transition-colors">
                <Bike className="w-8 h-8" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">Biker Rentals</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10">Save on petrol costs and rent a high-performance e-scooter for your daily commute or delivery gigs.</p>
              <button
                onClick={() => router.push('/coming-soon')}
                disabled={loading}
                className="inline-flex items-center gap-2 text-biker font-bold group-hover:translate-x-2 transition-transform relative z-10"
              >
                Login as Biker <ChevronRight className="w-5 h-5" />
              </button>
            </div>

            {/* Service 2 - FICO Investment - User will redesign this section */}
            {/*
            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
              <div className="absolute top-0 right-0 w-32 h-32 bg-investor/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
              <div className="w-16 h-16 bg-investor/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-investor group-hover:bg-investor group-hover:text-white transition-colors">
                <Wallet className="w-8 h-8" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">FICO Investment</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10">Invest in fractional EV ownership. Let us manage the fleet while you enjoy guaranteed monthly returns.</p>
              <button 
                onClick={() => handleLogin('investor@email.com')}
                disabled={loading}
                className="inline-flex items-center gap-2 text-investor font-bold group-hover:translate-x-2 transition-transform relative z-10"
              >
                Login as Investor <ChevronRight className="w-5 h-5" />
              </button>
            </div>
            */}

            {/* Service 3 */}
            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
              <div className="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-purple-500 group-hover:bg-purple-500 group-hover:text-white transition-colors">
                <Zap className="w-8 h-8" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">Swap Stations</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10">Never wait to charge. Swap your depleted battery for a fully charged one in less than 2 minutes.</p>
              <button
                onClick={() => router.push('/coming-soon')}
                disabled={loading}
                className="inline-flex items-center gap-2 text-purple-600 font-bold group-hover:translate-x-2 transition-transform relative z-10"
              >
                Login as Swap Station <ChevronRight className="w-5 h-5" />
              </button>
            </div>

            {/* Service 4 (Merchant/Rent to own) */}
            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full md:col-span-2 lg:col-span-3 lg:w-2/3 lg:mx-auto">
              <div className="absolute top-0 right-0 w-32 h-32 bg-accent/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
              <div className="flex flex-col sm:flex-row gap-6 relative z-10">
                <div className="w-16 h-16 shrink-0 bg-accent/10 rounded-2xl flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-white transition-colors">
                  <Truck className="w-8 h-8" />
                </div>
                <div>
                  <h4 className="text-2xl font-bold text-slate-900 mb-3">Merchants & Deliveries</h4>
                  <p className="text-slate-600 mb-6 max-w-xl">Are you a delivery partner or company? Request any amount of riders for your delivery needs. Partner with us for dedicated EV riders.</p>
                  <button
                    onClick={() => router.push('/coming-soon')}
                    className="inline-flex items-center gap-2 text-accent font-bold group-hover:translate-x-2 transition-transform"
                  >
                    Partner With Us <ChevronRight className="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Jaiben Features */}
      <section className="py-16 lg:py-24 bg-white relative overflow-hidden">
        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-emerald-50 rounded-full blur-3xl opacity-50 pointer-events-none"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">Why Will You Choose JAIBEN</h2>
            <p className="text-slate-600 text-lg">We provide the most robust infrastructure and technology to ensure your rides are seamless and profitable.</p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
                <Activity className="w-8 h-8 text-accent" />
              </div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">IoT Enabled</h4>
              <p className="text-slate-600 text-sm">Get real-time tracking, remote locking, and smart analytics for every vehicle.</p>
            </div>

            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
                <BatteryCharging className="w-8 h-8 text-accent" />
              </div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">Robust EV Infra</h4>
              <p className="text-slate-600 text-sm">Extensive network of swapping stations across major hubs for zero downtime.</p>
            </div>

            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
                <Clock className="w-8 h-8 text-accent" />
              </div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">99% Uptime</h4>
              <p className="text-slate-600 text-sm">AI-powered predictive vehicle maintenance ensures bikes are always road-ready.</p>
            </div>

            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
                <ShieldCheck className="w-8 h-8 text-accent" />
              </div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">24/7 Support</h4>
              <p className="text-slate-600 text-sm">Dedicated operations command center and support team ready to assist.</p>
            </div>
          </div>
        </div>
      </section>

      {/* How to Join Section */}
      <section className="py-16 lg:py-24 bg-slate-900 text-white relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">How To Join JAIBEN</h2>
            <p className="text-slate-400 text-lg">Start your journey in just 3 easy steps.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
            {/* Connecting line */}
            <div className="hidden md:block absolute top-12 left-[15%] right-[15%] h-0.5 bg-slate-700"></div>

            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
                <ShieldCheck className="w-10 h-10 text-accent" />
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">1</div>
              </div>
              <h4 className="text-xl font-bold mb-3">Complete Your KYC</h4>
              <p className="text-slate-400">Add your personal details like NID, Driving License, and basic info securely.</p>
            </div>

            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
                <Bike className="w-10 h-10 text-accent" />
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">2</div>
              </div>
              <h4 className="text-xl font-bold mb-3">Choose Your Plan</h4>
              <p className="text-slate-400">Select your EV model and subscription plan (Daily, Weekly, or Rent-to-Own).</p>
            </div>

            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
                <Wallet className="w-10 h-10 text-accent" />
                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">3</div>
              </div>
              <h4 className="text-xl font-bold mb-3">Start Earning</h4>
              <p className="text-slate-400">Pick up your bike from the nearest hub and start delivering to earn more!</p>
            </div>
          </div>

          <div className="mt-16 text-center">
            <button
              onClick={() => router.push('/coming-soon')}
              className="px-10 py-4 bg-white text-slate-900 rounded-full font-bold text-lg hover:bg-slate-100 transition-all transform hover:scale-105 shadow-xl flex items-center justify-center gap-2 mx-auto"
            >
              Get The App <ArrowRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 pt-20 pb-10 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center gap-3 mb-6">
                <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className="object-contain h-10 w-auto" />
                <div>
                  <h1 className="text-2xl font-extrabold text-white leading-tight">JAIBEN</h1>
                  <p className="text-xs text-slate-500 leading-none">Mobility Ltd</p>
                </div>
              </div>
              <p className="text-slate-400 max-w-sm mb-6">
                Pioneering sustainable and emission-free mobility in Bangladesh through innovative tech and shared ecosystems.
              </p>
              <div className="flex gap-4">
                {/* Social icons placeholders */}
                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><Zap className="w-5 h-5" /></div>
                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><BarChart3 className="w-5 h-5" /></div>
                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><MapPin className="w-5 h-5" /></div>
              </div>
            </div>

            <div>
              <h4 className="text-white font-bold mb-6">Services</h4>
              <ul className="space-y-3 text-slate-400">
                <li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">EV for Deliveries</button></li>
                <li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Rent to Own</button></li>
                <li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Investor Platform</button></li>
                <li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Swap Stations</button></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-bold mb-6">Company</h4>
              <ul className="space-y-3 text-slate-400">
                <li><a href="#" className="hover:text-accent transition-colors">About Us</a></li>
                <li><a href="#" className="hover:text-accent transition-colors">Careers</a></li>
                <li><a href="#" className="hover:text-accent transition-colors">ESG Impact</a></li>
                <li><a href="#" className="hover:text-accent transition-colors">Contact</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-slate-500 text-sm">
              &copy; {new Date().getFullYear()} JAIBEN Mobility Ltd. All rights reserved.
            </p>
            <div className="flex gap-6 text-sm text-slate-500">
              <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
              <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}