'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';
import { users } from '@/data/mockData';


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-lg hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 border border-slate-100 relative overflow-hidden flex flex-col h-full transform hover:-translate-y-2">
              <div className="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-biker/10 to-transparent rounded-full blur-3xl -ml-16 -mt-16 transition-transform duration-700 group-hover:scale-150"></div>
              
              <div className="w-24 h-24 bg-gradient-to-br from-white to-slate-50 shadow-inner rounded-2xl flex items-center justify-center mb-8 relative z-10 border border-slate-100/50">
                <CardIcon3D type="bike" />
              </div>
              
              <h4 className="text-2xl font-extrabold text-slate-900 mb-4 relative z-10">Biker Rentals</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10 leading-relaxed">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-white bg-biker px-6 py-3 rounded-full font-bold shadow-lg shadow-biker/30 hover:bg-biker/90 hover:shadow-biker/50 transition-all relative z-10 w-fit"
              >
                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>
            */}

            {/* Service 3 */}
            <div className="group bg-white rounded-3xl p-8 shadow-lg hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 border border-slate-100 relative overflow-hidden flex flex-col h-full transform hover:-translate-y-2">
              <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-purple-500/10 to-transparent rounded-full blur-3xl -mr-16 -mt-16 transition-transform duration-700 group-hover:scale-150"></div>
              
              <div className="w-24 h-24 bg-gradient-to-br from-white to-slate-50 shadow-inner rounded-2xl flex items-center justify-center mb-8 relative z-10 border border-slate-100/50">
                <CardIcon3D type="swap" />
              </div>
              
              <h4 className="text-2xl font-extrabold text-slate-900 mb-4 relative z-10">Swap Stations</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10 leading-relaxed">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-white bg-purple-600 px-6 py-3 rounded-full font-bold shadow-lg shadow-purple-600/30 hover:bg-purple-700 hover:shadow-purple-600/50 transition-all relative z-10 w-fit"
              >
                Login as Swap Station <ChevronRight className="w-5 h-5" />
              </button>
            </div>

            {/* Service 3 (Merchant/Deliveries) */}
            <div className="group bg-white rounded-3xl p-8 shadow-lg hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 border border-slate-100 relative overflow-hidden flex flex-col h-full transform hover:-translate-y-2">
              <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-accent/10 to-transparent rounded-full blur-3xl -mr-16 -mt-16 transition-transform duration-700 group-hover:scale-150"></div>
              
              <div className="w-24 h-24 bg-gradient-to-br from-white to-slate-50 shadow-inner rounded-2xl flex items-center justify-center mb-8 relative z-10 border border-slate-100/50">
                <CardIcon3D type="merchant" />
              </div>
              
              <h4 className="text-2xl font-extrabold text-slate-900 mb-4 relative z-10">Merchants & Deliveries</h4>
              <p className="text-slate-600 mb-8 flex-grow relative z-10 leading-relaxed">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-white bg-accent px-6 py-3 rounded-full font-bold shadow-lg shadow-accent/30 hover:bg-accent-dark hover:shadow-accent/50 transition-all relative z-10 w-fit"
              >
                Partner With Us <ChevronRight className="w-5 h-5" />
              </button>
            </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>

      {/* Download App Section */}
      <section className="py-20 bg-accent relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-10 mix-blend-overlay"></div>
        
        {/* Background decorative circles */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl -mr-20 -mt-20"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-emerald-900/30 rounded-full blur-3xl -ml-20 -mb-20"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 flex flex-col md:flex-row items-center justify-between gap-12">
          <div className="w-full md:w-1/2 text-center md:text-left text-white">
            <h2 className="text-3xl md:text-5xl font-extrabold mb-6 leading-tight drop-shadow-sm">Ready to ride? <br/>Download the JAIBEN App</h2>
            <p className="text-white/90 text-lg mb-8 max-w-lg mx-auto md:mx-0 drop-shadow-sm">Get full access to biker rentals, swap station locations, and real-time earnings directly from your smartphone.</p>
            <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4">
              <button 
                onClick={() => router.push('/coming-soon')}
                className="flex items-center gap-3 bg-black text-white px-6 py-3 rounded-xl hover:bg-slate-900 hover:scale-105 transition-all shadow-xl shadow-black/20 w-full sm:w-auto justify-center"
              >
                <svg viewBox="0 0 512 512" className="w-6 h-6 fill-current"><path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/></svg>
                <div className="flex flex-col text-left">
                  <span className="text-[10px] leading-none text-slate-300 font-semibold">GET IT ON</span>
                  <span className="text-lg font-bold leading-none mt-1">Google Play</span>
                </div>
              </button>
              <button 
                onClick={() => router.push('/coming-soon')}
                className="flex items-center gap-3 bg-black text-white px-6 py-3 rounded-xl hover:bg-slate-900 hover:scale-105 transition-all shadow-xl shadow-black/20 w-full sm:w-auto justify-center"
              >
                <svg viewBox="0 0 384 512" className="w-6 h-6 fill-current"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
                <div className="flex flex-col text-left">
                  <span className="text-[10px] leading-none text-slate-300 font-semibold">Download on the</span>
                  <span className="text-lg font-bold leading-none mt-1">App Store</span>
                </div>
              </button>
            </div>
          </div>
          
          <div className="w-full md:w-1/2 flex justify-center">
             {/* Abstract Phone Mockup */}
             <div className="w-64 h-[450px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-[0_30px_60px_rgba(0,0,0,0.4)] relative overflow-hidden flex flex-col -mb-32 md:-mb-40 transform rotate-12 hover:rotate-6 transition-transform duration-500">
               <div className="h-6 w-1/2 bg-slate-800 absolute top-0 left-1/2 -translate-x-1/2 rounded-b-xl z-20"></div>
               <div className="flex-1 bg-slate-50 p-4 pt-12 relative flex flex-col gap-4">
                 {/* Mock App Header */}
                 <div className="flex justify-between items-center">
                    <div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center">
                      <Image src="/jaiben.png" alt="Logo" width={24} height={24} className="brightness-0 invert" />
                    </div>
                    <div className="w-8 h-8 bg-slate-200 rounded-full"></div>
                 </div>
                 
                 {/* Mock App Banner */}
                 <div className="w-full h-32 bg-gradient-to-br from-accent to-emerald-700 rounded-2xl p-4 shadow-sm relative overflow-hidden">
                    <div className="w-32 h-32 bg-white/10 rounded-full absolute -right-10 -bottom-10 blur-xl"></div>
                    <div className="w-1/2 h-3 bg-white/40 rounded-full mb-2 relative z-10"></div>
                    <div className="w-1/3 h-3 bg-white/20 rounded-full relative z-10"></div>
                 </div>

                 {/* Mock App Grid */}
                 <div className="grid grid-cols-2 gap-3 flex-grow">
                   <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-3 flex flex-col gap-2">
                     <div className="w-8 h-8 bg-orange-100 rounded-lg"></div>
                     <div className="w-full h-2 bg-slate-200 rounded-full"></div>
                     <div className="w-1/2 h-2 bg-slate-100 rounded-full"></div>
                   </div>
                   <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-3 flex flex-col gap-2">
                     <div className="w-8 h-8 bg-purple-100 rounded-lg"></div>
                     <div className="w-full h-2 bg-slate-200 rounded-full"></div>
                     <div className="w-1/2 h-2 bg-slate-100 rounded-full"></div>
                   </div>
                   <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-3 flex flex-col gap-2">
                     <div className="w-8 h-8 bg-blue-100 rounded-lg"></div>
                     <div className="w-full h-2 bg-slate-200 rounded-full"></div>
                     <div className="w-1/2 h-2 bg-slate-100 rounded-full"></div>
                   </div>
                   <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-3 flex flex-col gap-2">
                     <div className="w-8 h-8 bg-emerald-100 rounded-lg"></div>
                     <div className="w-full h-2 bg-slate-200 rounded-full"></div>
                     <div className="w-1/2 h-2 bg-slate-100 rounded-full"></div>
                   </div>
                 </div>
               </div>
             </div>
          </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>
  );
}