import React, { useState ,useEffect} from 'react';
import { FaStore, FaShoppingCart, FaUsers, FaChartBar, FaBox, FaCog, FaSignOutAlt, FaBars, FaTimes, FaChartLine, FaDollarSign, FaShoppingBag, FaEye, FaEyeSlash, FaStar, FaShieldAlt, FaExpand, FaBell } from 'react-icons/fa';
import {Link} from 'react-router-dom';

const ButtonHome = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userType, setUserType] = useState(null);
  const [showLogin, setShowLogin] = useState(false);
  const [loginType, setLoginType] = useState('customer');
  const [showPassword, setShowPassword] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [selectedStore, setSelectedStore] = useState(0);

   // Add floating animation styles
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      @keyframes float-slow {
        0%, 100% {
          transform: translateY(0px) translateX(0px) rotate(0deg);
        }
        25% {
          transform: translateY(-20px) translateX(10px) rotate(5deg);
        }
        50% {
          transform: translateY(-40px) translateX(-10px) rotate(-5deg);
        }
        75% {
          transform: translateY(-20px) translateX(15px) rotate(3deg);
        }
      }
      .animate-float-slow {
        animation: float-slow ease-in-out infinite;
      }
    `;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);
  

  const handleLogin = (type) => {
    setIsLoggedIn(true);
    setUserType(type);
    setShowLogin(false);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setUserType(null);
  };

  const stores = [
    { name: 'Warehouse', status: 'active', revenue: '$45.2K', orders: 324, color: 'from-blue-500 to-blue-600' },
    { name: 'West Mall Store', status: 'active', revenue: '$38.7K', orders: 287, color: 'from-purple-500 to-purple-600' },
    { name: 'East Side Shop', status: 'active', revenue: '$52.1K', orders: 412, color: 'from-emerald-500 to-emerald-600' },
    { name: 'Airport Plaza', status: 'active', revenue: '$41.3K', orders: 298, color: 'from-orange-500 to-orange-600' },
  ];

          const imageUrls = [
          'https://picsum.photos/id/1005/100/100',
          'https://picsum.photos/id/1011/100/100',
          'https://picsum.photos/id/1012/100/100',
          'https://picsum.photos/id/1013/100/100',
        ];
  // Right here Code
   const [rotation, setRotation] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setRotation(prev => (prev + 0.3) % 360);
    }, 30);
    return () => clearInterval(interval);
  }, []);

  const storess = [
    { 
      name: 'Warehouse', 
      revenue: '$45.2K', 
      color: 'from-blue-500 to-blue-600',
      angle: 0 
    },
    { 
      name: 'West Mall', 
      revenue: '$38.7K', 
      color: 'from-purple-500 to-purple-600',
      angle: 120 
    },
    { 
      name: 'East Shop', 
      revenue: '$52.1K', 
      color: 'from-emerald-500 to-emerald-600',
      angle: 240 
    },
  ];

  const radius = 220;

  const getPosition = (angle) => {
    const totalAngle = angle + rotation;
    const radian = (totalAngle * Math.PI) / 180;
    return {
      x: Math.cos(radian) * radius,
      y: Math.sin(radian) * radius,
    };
  };

  const totalRevenue = storess.reduce((sum, store) => {
    return sum + parseFloat(store.revenue.replace('$', '').replace('K', '')) * 1000;
  }, 0);

  // Floating objects data
  const floatingObjects = [
    { icon: FaStore, top: '10%', left: '5%', delay: '0s', duration: '20s', size: 'text-2xl', color: 'text-blue-400/20' },
    { icon: FaShoppingCart, top: '15%', right: '8%', delay: '2s', duration: '25s', size: 'text-xl', color: 'text-purple-400/20' },
    { icon: FaChartBar, top: '25%', left: '15%', delay: '4s', duration: '22s', size: 'text-3xl', color: 'text-emerald-400/20' },
    { icon: FaBox, top: '35%', right: '12%', delay: '1s', duration: '24s', size: 'text-2xl', color: 'text-orange-400/20' },
    { icon: FaDollarSign, top: '45%', left: '8%', delay: '3s', duration: '26s', size: 'text-xl', color: 'text-green-400/20' },
    { icon: FaShoppingBag, top: '55%', right: '15%', delay: '5s', duration: '23s', size: 'text-2xl', color: 'text-pink-400/20' },
    { icon: FaChartLine, top: '65%', left: '10%', delay: '2.5s', duration: '21s', size: 'text-3xl', color: 'text-blue-400/20' },
    { icon: FaUsers, top: '75%', right: '10%', delay: '4.5s', duration: '27s', size: 'text-xl', color: 'text-purple-400/20' },
    { icon: FaCog, top: '20%', left: '85%', delay: '1.5s', duration: '20s', size: 'text-2xl', color: 'text-gray-400/20' },
    { icon: FaStore, top: '80%', left: '20%', delay: '3.5s', duration: '25s', size: 'text-xl', color: 'text-indigo-400/20' },
    { icon: FaBox, top: '12%', right: '25%', delay: '2.8s', duration: '22s', size: 'text-2xl', color: 'text-teal-400/20' },
    { icon: FaChartBar, top: '70%', right: '20%', delay: '4.2s', duration: '24s', size: 'text-xl', color: 'text-cyan-400/20' },
  ];

  

  // Hero Section / Landing Page
  if (!isLoggedIn) {
    return (
      
      <div className="relative bg-gradient-to-br from-white-50 via-white to-purple-50 overflow-hidden">
        {/* Floating Objects Background */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          {floatingObjects.map((obj, index) => (
            <div
              key={index}
              className="absolute animate-float-slow"
              style={{
                top: obj.top,
                left: obj.left,
                right: obj.right,
                animationDelay: obj.delay,
                animationDuration: obj.duration,
              }}
            >
              <obj.icon className={`${obj.size} ${obj.color} drop-shadow-lg`} />
            </div>
          ))}
          
          {/* Additional decorative shapes */}
          <div className="absolute top-[30%] right-[5%] w-20 h-20 rounded-full bg-gradient-to-br from-blue-400/10 to-purple-400/10 blur-xl animate-float-slow" style={{animationDelay: '1s', animationDuration: '28s'}}></div>
          <div className="absolute bottom-[20%] left-[10%] w-32 h-32 rounded-full bg-gradient-to-br from-emerald-400/10 to-teal-400/10 blur-xl animate-float-slow" style={{animationDelay: '3s', animationDuration: '30s'}}></div>
          <div className="absolute top-[50%] left-[80%] w-24 h-24 rounded-full bg-gradient-to-br from-pink-400/10 to-orange-400/10 blur-xl animate-float-slow" style={{animationDelay: '2s', animationDuration: '26s'}}></div>
        </div>
        {/* Navigation */}
        <nav className=" backdrop-blur-md shadow-sm sticky top-0 z-50">
          <div className="max-w-7xl mx-auto px-3 sm:px-6 py-3 sm:py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2 sm:space-x-3">
                {/* <div className="relative">
                  <FaStore className="w-7 h-7 sm:w-10 sm:h-10 text-blue-600" />
                  <div className="absolute -top-1 -right-1 w-2.5 h-2.5 sm:w-4 sm:h-4 bg-purple-600 rounded-full"></div>
                </div> */}
                <span className="text-lg sm:text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  MultiStore
                </span>
              </div>
              
              <div className="flex items-center space-x-2 sm:space-x-4">
              <Link to="/login">
                <button 
                  className="hidden sm:block text-gray-700 hover:text-blue-600 transition font-medium text-sm lg:text-base"
                >
                  Customer login
                </button>
                </Link>
                <Link to="/admin/auth/login">  
                <button 
                  className="bg-gradient-to-r from-blue-600 custom-ai-button to-blue-600 text-white px-3 sm:px-6 py-2 sm:py-2.5 rounded-lg hover:shadow-lg transition font-semibold text-xs sm:text-base"
                >
                  <span className="hidden sm:inline">Admin Login</span>
                  <span className="sm:hidden">Login</span>
                </button>
                </Link>
              </div>
            </div>
          </div>
        </nav>

        {/* Hero Section */}
        <div className="max-w-7xl mt-[26px] mx-auto px-3 sm:px-6 py-6 sm:py-12 lg:py-20">
          <div className="grid md:grid-cols-2 gap-6 lg:gap-12 items-center">
            {/* Left Content */}
            <div className="space-y-3 sm:space-y-6 lg:space-y-8 text-center md:text-left">
              <div className="inline-flex items-center space-x-2   bg-blue-100 text-blue-700 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium">
                <FaChartLine className="w-3 h-3 sm:w-4 sm:h-4" />
                <span>Trusted by 10,000+ Stores</span>
              </div>
              
              <h1 className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  Complete ERP
                </span>
                <br />
                <span className="text-gray-900">
                  Solution for Multiple Stores
                </span>
              </h1>
              
              <p className="text-sm sm:text-lg text-gray-600 leading-relaxed max-w-xl mx-auto md:mx-0">
                MultiStore ERP automates your business operations, manages multiple stores seamlessly, 
                and provides real time insights to grow your business faster.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center md:justify-start">
                {/* Mobile: Buttons in container box */}
                <div className="flex sm:hidden gap-3">
                  <Link to="/admin/auth/login" className="flex-1">
                    <button 
                      className="w-full bg-gradient-to-r from-blue-600 to-blue-600 text-white px-5 py-3 rounded-lg transition shadow-lg hover:shadow-xl text-sm font-semibold"
                    >
                      Admin Login
                    </button>
                    
                  </Link>
                  <Link to="/login" className="flex-1">
                    <button 
                      className="w-full bg-white text-gray-700 px-5 py-3 rounded-lg hover:bg-gray-100 transition shadow-lg border-1 border-gray-200 text-sm font-semibold"
                    >
                      Customer Login
                    </button>
                  </Link>
                </div>

                {/* Desktop: Buttons without container box */}
                <div className="hidden sm:flex gap-4">
                  <Link to="/admin/auth/login">
                    <button 
                      className="bg-gradient-to-r  from-blue-600 to-blue-600 custom-ai-button text-white px-7 py-4 rounded-lg transition shadow-lg hover:shadow-xl text-lg font-semibold"
                    >
                      Admin Login
                    </button>
                  </Link>
                  <Link to="/login">
                    <button 
                      className="bg-white text-gray-700 px-7 py-4 rounded-lg hover:bg-gray-100 transition shadow-md border-2 border-gray-200 text-lg font-semibold"
                    >
                      Customer Login
                    </button>
                  </Link>
                </div>
              </div>
              <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start space-y-3 sm:space-y-0 sm:space-x-8 pt-3">
                  <div className="flex -space-x-2">
                    {imageUrls.map((url, index) => (
                  <img
                    key={index}
                    src={url}
                    alt={`User Avatar ${index + 1}`}
                    className="w-9 h-9 sm:w-12 sm:h-12 rounded-full border-3 border-white object-cover"
                  />
                ))}
                  </div>
                  <div className="text-center sm:text-left">
                    <div className="flex items-center justify-center sm:justify-start space-x-1">
                      {[...Array(5)].map((_, i) => (
                        <FaStar key={i} className="text-yellow-400 text-sm sm:text-xl" />
                      ))}
                    </div>
                    <p className="text-xs sm:text-sm text-gray-600 mt-1">Rated 4.9/5 by users</p>
                  </div>
                </div>
            </div>

            {/* Right Visual - Dashboard Preview */}
             <div className="relative w-full h-full min-h-[700px] flex items-center justify-center overflow-visible p-8">
      {/* Ambient Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-purple-50/30 to-pink-50/30 rounded-3xl"></div>
      
      {/* Glowing orbs */}
      <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-blue-400 rounded-full opacity-10 blur-3xl animate-pulse"></div>
      <div className="absolute bottom-1/4 right-1/4 w-32 h-32 bg-purple-400 rounded-full opacity-10 blur-3xl animate-pulse" style={{animationDelay: '1s'}}></div>
      
      <div className="relative w-full h-full flex items-center justify-center">
        {/* Orbital Path */}
        <div 
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed border-blue-300/40"
          style={{
            width: `${radius * 2 + 120}px`,
            height: `${radius * 2 + 120}px`,
          }}
        ></div>

        {/* Connection Lines - SVG */}
        <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{zIndex: 1}}>
          <defs>
            {storess.map((_, idx) => (
              <linearGradient key={idx} id={`lineGrad${idx}`} x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style={{stopColor: '#3b82f6', stopOpacity: 0.4}} />
                <stop offset="100%" style={{stopColor: '#8b5cf6', stopOpacity: 0.4}} />
              </linearGradient>
            ))}
          </defs>
          
          {storess.map((store, idx) => {
            const pos = getPosition(store.angle);
            return (
              <line
                key={idx}
                x1="50%"
                y1="50%"
                x2={`calc(50% + ${pos.x}px)`}
                y2={`calc(50% + ${pos.y}px)`}
                stroke={`url(#lineGrad${idx})`}
                strokeWidth="2"
                strokeDasharray="8,6"
                strokeLinecap="round"
              />
            );
          })}
        </svg>

        {/* SUN - Center Total Amount Card */}
        <div 
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
          style={{zIndex: 20}}
        >
          <div className="relative">
            {/* Sun rays effect */}
            <div className="absolute -inset-8 bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 rounded-full opacity-20 blur-3xl animate-pulse"></div>
            <div className="absolute -inset-6 bg-gradient-to-r from-orange-400 to-yellow-400 rounded-full opacity-30 blur-2xl animate-pulse" style={{animationDelay: '0.5s'}}></div>
            
            {/* Sun core */}
            <div className="relative bg-gradient-to-br from-yellow-400 via-orange-500 to-red-500 rounded-3xl p-8 shadow-2xl min-w-[220px] transform hover:scale-105 transition-all duration-500">
              {/* Shine effect */}
              <div className="absolute inset-0 bg-gradient-to-br from-white/30 via-transparent to-transparent rounded-3xl"></div>
              
              <div className="relative z-10 text-center">
                {/* Icon */}
                <div className="w-16 h-16 mx-auto mb-3 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-xl border-2 border-white/30">
                  <FaDollarSign className="text-white text-3xl drop-shadow-lg" />
                </div>
                
                {/* Label */}
                <p className="text-xs font-bold text-white/90 mb-2 tracking-wider uppercase drop-shadow">Total Revenue</p>
                
                {/* Amount */}
                <p className="text-4xl font-black text-white mb-2 drop-shadow-lg">
                  ${(totalRevenue / 1000).toFixed(1)}K
                </p>
                
                {/* Live indicator */}
                <div className="inline-flex items-center space-x-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-full border border-white/30">
                  <div className="w-2 h-2 bg-green-300 rounded-full animate-pulse shadow-lg"></div>
                  <span className="text-xs text-white font-bold drop-shadow">LIVE</span>
                </div>
              </div>
              
              {/* Rotating ring decoration */}
              {/* <div 
                className="absolute -inset-2 border-4 border-white/20 rounded-3xl"
                style={{
                  transform: `rotate(${rotation}deg)`,
                  transition: 'transform 0.03s linear'
                }}
              ></div> */}
            </div>
          </div>
        </div>

        {/* PLANETS - Orbiting Store Cards */}
        {storess.map((store, idx) => {
          const pos = getPosition(store.angle);
          return (
            <div
              key={idx}
              className="absolute left-1/2 top-1/2"
              style={{
                transform: `translate(calc(-50% + ${pos.x}px), calc(-50% + ${pos.y}px))`,
                zIndex: 10,
                transition: 'transform 0.01s linear'
              }}
            >
              <div className="relative group">
                {/* Planet atmosphere glow */}
                <div className={`absolute -inset-3 bg-gradient-to-r ${store.color} rounded-2xl opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300`}></div>
                
                {/* Planet card */}
                <div className="relative bg-white rounded-2xl p-4 shadow-2xl border-2 border-gray-100 w-[140px] transform group-hover:scale-110 transition-all duration-300">
                  <div className={`absolute inset-0 bg-gradient-to-br ${store.color} opacity-10 rounded-2xl`}></div>
                  
                  <div className="relative z-10">
                    {/* Store Icon */}
                    <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${store.color} flex items-center justify-center mb-2 shadow-lg`}>
                      <FaStore className="text-white text-lg" />
                    </div>
                    
                    
                    {/* Store Name */}
                    <h3 className="font-bold text-gray-800 text-xs mb-2">
                      {store.name}
                    </h3>
                    
                    {/* Status */}
                    {/* <div className="flex items-center space-x-1 mb-2">
                      <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
                      <span className="text-xs text-green-600 font-semibold">Active</span>
                    </div> */}
                    <div className="flex items-center justify-between mb-2 bg-gray-50 rounded-lg px-2 **py-1**">
              <div className="flex items-center space-x-1">
                <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
                <span className="text-[10px] text-gray-600 font-medium">IoT Active</span>
              </div>
              <div className="flex items-center space-x-0.5">
                <div className="w-1 h-3 bg-green-400 rounded-full"></div>
                <div className="w-1 h-4 bg-green-400 rounded-full"></div>
                <div className="w-1 h-3 bg-green-400 rounded-full"></div>
                <div className="w-1 h-2 bg-gray-300 rounded-full"></div>
              </div>
            </div>
                    
                    {/* Revenue */}
                    <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-2">
                      <p className="text-xs text-gray-500">Revenue</p>
                      <p className="text-sm font-bold text-gray-900">{store.revenue}</p>
                    </div>
                  </div>
                  
                  {/* Planet highlight */}
                  <div className={`absolute -top-1 -right-1 w-3 h-3 bg-gradient-to-br ${store.color} rounded-full shadow-md`}></div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
          </div>
        </div>

        
      </div>
    );
  }

  // Dashboard after login - Responsive
  return (
    <div className="flex flex-col lg:flex-row h-screen bg-gray-50 overflow-x-hidden">
      {/* Mobile Header */}
      <div className="lg:hidden bg-white shadow-sm p-3 sm:p-4 flex items-center justify-between sticky top-0 z-40">
        <div className="flex items-center space-x-2">
          <FaStore className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" />
          <span className="text-base sm:text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            MultiStore
          </span>
        </div>
        <button onClick={() => setSidebarOpen(!sidebarOpen)} className="text-gray-700">
          <FaBars className="w-5 h-5 sm:w-6 sm:h-6" />
        </button>
      </div>

      {/* Sidebar - Mobile Overlay */}
      {sidebarOpen && (
        <div className="lg:hidden fixed inset-0 bg-black/50 z-40" onClick={() => setSidebarOpen(false)}></div>
      )}

      {/* Sidebar */}
      <div className={`
        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} 
        lg:translate-x-0
        lg:w-64
        fixed lg:relative inset-y-0 left-0 z-50 lg:z-auto
        w-64 bg-gradient-to-b from-blue-600 to-purple-600 text-white 
        transition-all duration-300 flex flex-col
      `}>
        <div className="p-4 sm:p-6 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <FaStore className="w-6 h-6 sm:w-8 sm:h-8" />
            <span className="text-lg sm:text-xl font-bold">MultiStore</span>
          </div>
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="text-white lg:hidden">
            <FaTimes className="w-5 h-5 sm:w-6 sm:h-6" />
          </button>
        </div>

        <nav className="flex-1 px-3 sm:px-4 space-y-2 overflow-y-auto">
          {[
            { icon: FaChartBar, label: 'Dashboard', active: true },
            { icon: FaStore, label: 'Stores', active: false },
            { icon: FaShoppingCart, label: 'Orders', active: false },
            { icon: FaBox, label: 'Products', active: false },
            { icon: FaUsers, label: 'Customers', active: false },
            { icon: FaDollarSign, label: 'Finance', active: false },
            { icon: FaCog, label: 'Settings', active: false },
          ].map((item, i) => (
            <button
              key={i}
              className={`w-full flex items-center space-x-3 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg transition text-sm sm:text-base ${
                item.active ? 'bg-white/20' : 'hover:bg-white/10'
              }`}
              onClick={() => window.innerWidth < 1024 && setSidebarOpen(false)}
            >
              <item.icon className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
              <span>{item.label}</span>
            </button>
          ))}
        </nav>

        <div className="p-3 sm:p-4">
          <button
            onClick={handleLogout}
            className="w-full flex items-center space-x-3 px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg hover:bg-white/10 transition text-sm sm:text-base"
          >
            <FaSignOutAlt className="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0" />
            <span>Logout</span>
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-auto">
        <div className="bg-white shadow-sm p-3 sm:p-6">
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-2 sm:space-y-0">
            <div>
              <h1 className="text-lg sm:text-2xl font-bold text-gray-900">
                {userType === 'admin' ? 'Admin Dashboard' : 'Customer Dashboard'}
              </h1>
              <p className="text-xs sm:text-base text-gray-600 mt-1">Welcome back! Here's your overview</p>
            </div>
            <div className="flex items-center space-x-3 sm:space-x-4">
              <button className="p-2 hover:bg-gray-100 rounded-lg">
                <FaBell className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600" />
              </button>
              <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full"></div>
            </div>
          </div>
        </div>

        <div className="p-3 sm:p-6">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 mb-4 sm:mb-6">
            {[
              { icon: FaStore, label: 'Total Stores', value: '24', change: '+12%', color: 'blue' },
              { icon: FaShoppingCart, label: 'Orders', value: '1,234', change: '+8%', color: 'green' },
              { icon: FaDollarSign, label: 'Revenue', value: '$45,678', change: '+23%', color: 'purple' },
              { icon: FaUsers, label: 'Customers', value: '8,456', change: '+15%', color: 'orange' },
            ].map((stat, i) => (
              <div key={i} className="bg-white rounded-xl shadow-md p-3 sm:p-6 hover:shadow-lg transition">
                <div className="flex items-center justify-between mb-2 sm:mb-4">
                  <div className={`w-8 h-8 sm:w-12 sm:h-12 bg-${stat.color}-100 rounded-lg flex items-center justify-center`}>
                    <stat.icon className={`w-4 h-4 sm:w-6 sm:h-6 text-${stat.color}-600`} />
                  </div>
                  <span className="text-green-600 text-xs sm:text-sm font-semibold">{stat.change}</span>
                </div>
                <h3 className="text-gray-600 text-xs sm:text-sm mb-1">{stat.label}</h3>
                <p className="text-base sm:text-2xl font-bold text-gray-900">{stat.value}</p>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-6">
            <div className="bg-white rounded-xl shadow-md p-3 sm:p-6">
              <h3 className="text-sm sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4">Recent Orders</h3>
              <div className="space-y-2 sm:space-y-4">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="flex items-center justify-between p-2 sm:p-4 bg-gray-50 rounded-lg">
                    <div className="flex items-center space-x-2 sm:space-x-3">
                      <div className="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-400 to-purple-400 rounded-lg flex-shrink-0"></div>
                      <div>
                        <p className="font-semibold text-gray-900 text-xs sm:text-base">Order #{1000 + i}</p>
                        <p className="text-xs sm:text-sm text-gray-600">Store {i}</p>
                      </div>
                    </div>
                    <span className="bg-green-100 text-green-700 px-2 sm:px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
                      Done
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-3 sm:p-6">
              <h3 className="text-sm sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4">Top Selling Products</h3>
              <div className="space-y-2 sm:space-y-4">
                {['Electronics', 'Fashion', 'Home & Garden', 'Sports'].map((category, i) => (
                  <div key={i} className="flex items-center justify-between">
                    <div className="flex items-center space-x-2 sm:space-x-3">
                      <div className={`w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br ${
                        i === 0 ? 'from-blue-400 to-cyan-400' :
                        i === 1 ? 'from-pink-400 to-purple-400' :
                        i === 2 ? 'from-green-400 to-teal-400' :
                        'from-orange-400 to-red-400'
                      } rounded-lg flex-shrink-0`}></div>
                      <p className="font-medium text-gray-900 text-xs sm:text-base">{category}</p>
                    </div>
                    <div className="text-right">
                      <p className="font-bold text-gray-900 text-xs sm:text-base">{(Math.random() * 1000).toFixed(0)}</p>
                      <p className="text-xs text-gray-500">sales</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ButtonHome;