import React, { useState, useEffect } from 'react';
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { AlertTriangle, Bell, Calendar, CheckCircle, ChevronDown, Clipboard, FileText, Globe, Home, Info, LifeBuoy, LogOut, Menu, MessageSquare, PieChart as PieChartIcon, Settings, ShoppingBag, Sliders, Truck, User, Users, X } from 'lucide-react';

// Mock data for demonstrations
const carbonData = [
  { name: 'Jan', emissions: 4000 },
  { name: 'Feb', emissions: 3800 },
  { name: 'Mar', emissions: 4200 },
  { name: 'Apr', emissions: 3900 },
  { name: 'May', emissions: 3600 },
  { name: 'Jun', emissions: 3200 },
  { name: 'Jul', emissions: 3000 },
  { name: 'Aug', emissions: 2800 },
  { name: 'Sep', emissions: 2600 },
  { name: 'Oct', emissions: 2400 },
  { name: 'Nov', emissions: 2200 },
  { name: 'Dec', emissions: 2000 },
];

const complianceData = [
  { name: 'Completed', value: 75 },
  { name: 'In Progress', value: 15 },
  { name: 'At Risk', value: 10 },
];

const COLORS = ['#2E7D32', '#FFC107', '#F44336'];

const regulatoryUpdates = [
  { id: 1, title: 'EU Corporate Sustainability Reporting Directive Update', date: '2023-11-15', priority: 'High', read: false },
  { id: 2, title: 'Carbon Border Adjustment Mechanism Phase 2', date: '2023-12-01', priority: 'Medium', read: true },
  { id: 3, title: 'SEC Climate Disclosure Rule Changes', date: '2023-11-28', priority: 'High', read: false },
  { id: 4, title: 'UK Modern Slavery Act Reporting Requirements', date: '2023-12-10', priority: 'Medium', read: true },
];

const upcomingDeadlines = [
  { id: 1, title: 'Annual Sustainability Report', date: '2023-12-31', daysLeft: 45 },
  { id: 2, title: 'Carbon Emissions Disclosure', date: '2023-12-15', daysLeft: 29 },
  { id: 3, title: 'Supplier Code of Conduct Renewal', date: '2023-11-30', daysLeft: 14 },
];

const supplierRiskData = [
  { name: 'Low Risk', value: 60 },
  { name: 'Medium Risk', value: 30 },
  { name: 'High Risk', value: 10 },
];

const supplierRiskCOLORS = ['#4CAF50', '#FFC107', '#F44336'];

const App = () => {
  const [activeModule, setActiveModule] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [notifications, setNotifications] = useState(regulatoryUpdates.filter(update => !update.read).length);
  const [userRole, setUserRole] = useState('ESG Director');
  const [showNotifications, setShowNotifications] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);
  
  // Mock authentication state
  const [isAuthenticated, setIsAuthenticated] = useState(true);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    if (username && password) {
      setIsAuthenticated(true);
    }
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    setUsername('');
    setPassword('');
  };

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  const markAllAsRead = () => {
    setNotifications(0);
    setShowNotifications(false);
  };

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl shadow-xl overflow-hidden max-w-md w-full p-8">
          <div className="text-center mb-8">
            <h1 className="text-3xl font-bold text-green-800 mb-2">ESG Navigator</h1>
            <p className="text-gray-600">Your comprehensive ESG compliance platform</p>
          </div>
          
          <form onSubmit={handleLogin} className="space-y-6">
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
              <input
                type="email"
                id="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500"
                placeholder="your.email@company.com"
                required
              />
            </div>
            
            <div>
              <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">Password</label>
              <input
                type="password"
                id="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500"
                placeholder="••••••••"
                required
              />
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <input
                  id="remember-me"
                  name="remember-me"
                  type="checkbox"
                  className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                />
                <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
                  Remember me
                </label>
              </div>
              
              <div className="text-sm">
                <a href="#" className="font-medium text-green-700 hover:text-green-500">
                  Forgot password?
                </a>
              </div>
            </div>
            
            <button
              type="submit"
              className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
            >
              Sign in
            </button>
          </form>
          
          <div className="mt-6 text-center text-sm">
            <p className="text-gray-600">
              Don't have an account?{' '}
              <a href="#" className="font-medium text-green-700 hover:text-green-500">
                Contact sales
              </a>
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 z-10">
        <div className="flex items-center justify-between px-4 py-3">
          <div className="flex items-center">
            <button 
              onClick={toggleSidebar}
              className="p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none"
            >
              <Menu size={24} />
            </button>
            <div className="ml-4 flex items-center">
              <span className="text-green-700 font-bold text-xl">ESG Navigator</span>
            </div>
          </div>
          
          <div className="flex items-center space-x-4">
            <div className="relative">
              <button 
                onClick={() => setShowNotifications(!showNotifications)}
                className="p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none relative"
              >
                <Bell size={24} />
                {notifications > 0 && (
                  <span className="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                    {notifications}
                  </span>
                )}
              </button>
              
              {showNotifications && (
                <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
                  <div className="p-3 border-b border-gray-200 flex justify-between items-center">
                    <h3 className="text-sm font-semibold">Notifications</h3>
                    <button 
                      onClick={markAllAsRead}
                      className="text-xs text-green-700 hover:text-green-500"
                    >
                      Mark all as read
                    </button>
                  </div>
                  <div className="max-h-96 overflow-y-auto">
                    {regulatoryUpdates.filter(update => !update.read).map(update => (
                      <div key={update.id} className="p-3 border-b border-gray-100 hover:bg-gray-50">
                        <div className="flex items-start">
                          <AlertTriangle size={16} className="text-amber-500 mt-1 mr-2 flex-shrink-0" />
                          <div>
                            <p className="text-sm font-medium text-gray-900">{update.title}</p>
                            <p className="text-xs text-gray-500 mt-1">
                              {update.date} • {update.priority} Priority
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                    {regulatoryUpdates.filter(update => !update.read).length === 0 && (
                      <div className="p-4 text-center text-gray-500 text-sm">
                        No new notifications
                      </div>
                    )}
                  </div>
                  <div className="p-2 border-t border-gray-200 text-center">
                    <button className="text-xs text-green-700 hover:text-green-500">
                      View all notifications
                    </button>
                  </div>
                </div>
              )}
            </div>
            
            <div className="relative">
              <button 
                onClick={() => setShowUserMenu(!showUserMenu)}
                className="flex items-center space-x-2 p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none"
              >
                <div className="h-8 w-8 rounded-full bg-green-700 flex items-center justify-center text-white font-medium">
                  JD
                </div>
                <div className="hidden md:block text-sm">
                  <div className="font-medium">Jane Doe</div>
                  <div className="text-xs text-gray-500">{userRole}</div>
                </div>
                <ChevronDown size={16} />
              </button>
              
              {showUserMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden z-20">
                  <div className="py-1">
                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                      <div className="flex items-center">
                        <User size={16} className="mr-2" />
                        Profile
                      </div>
                    </a>
                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                      <div className="flex items-center">
                        <Settings size={16} className="mr-2" />
                        Settings
                      </div>
                    </a>
                    <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                      <div className="flex items-center">
                        <LifeBuoy size={16} className="mr-2" />
                        Help Center
                      </div>
                    </a>
                    <button 
                      onClick={handleLogout}
                      className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >
                      <div className="flex items-center">
                        <LogOut size={16} className="mr-2" />
                        Sign out
                      </div>
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>
      
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <aside 
          className={`bg-white border-r border-gray-200 w-64 flex-shrink-0 flex flex-col transition-all duration-300 ease-in-out ${
            sidebarOpen ? 'translate-x-0' : '-translate-x-full'
          } md:translate-x-0 fixed md:static h-full z-10`}
        >
          <nav className="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
            <button 
              onClick={() => setActiveModule('dashboard')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'dashboard' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Home size={20} className="mr-3" />
              Dashboard
            </button>
            
            <button 
              onClick={() => setActiveModule('regulatory')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'regulatory' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Clipboard size={20} className="mr-3" />
              Regulatory Intelligence
            </button>
            
            <button 
              onClick={() => setActiveModule('carbon')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'carbon' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <PieChartIcon size={20} className="mr-3" />
              Carbon Management
            </button>
            
            <button 
              onClick={() => setActiveModule('supply')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'supply' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Truck size={20} className="mr-3" />
              Supply Chain Ethics
            </button>
            
            <button 
              onClick={() => setActiveModule('reporting')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'reporting' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <FileText size={20} className="mr-3" />
              Report Generator
            </button>
            
            <button 
              onClick={() => setActiveModule('experts')}
              className={`flex items-center px-3 py-2 text-sm font-medium rounded-md w-full ${
                activeModule === 'experts' 
                  ? 'bg-green-50 text-green-700' 
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <Users size={20} className="mr-3" />
              Expert Marketplace
            </button>
          </nav>
          
          <div className="p-4 border-t border-gray-200">
            <div className="bg-green-50 rounded-lg p-3">
              <h4 className="text-sm font-medium text-green-800 mb-2">Need Help?</h4>
              <p className="text-xs text-green-700 mb-3">Contact our support team for assistance with your ESG compliance journey.</p>
              <button className="text-xs bg-green-700 text-white py-1 px-3 rounded-md hover:bg-green-800 w-full">
                Contact Support
              </button>
            </div>
          </div>
        </aside>
        
        {/* Main Content */}
        <main className="flex-1 overflow-y-auto bg-gray-50 p-6">
          {activeModule === 'dashboard' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">ESG Dashboard</h1>
                <div className="flex items-center space-x-3">
                  <select className="bg-white border border-gray-300 rounded-md py-1 px-3 text-sm">
                    <option>Last 12 months</option>
                    <option>Year to date</option>
                    <option>Last quarter</option>
                    <option>Custom range</option>
                  </select>
                  <button className="bg-green-700 text-white py-1 px-4 rounded-md text-sm hover:bg-green-800">
                    Export
                  </button>
                </div>
              </div>
              
              {/* Overview Cards */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Compliance Score</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">87%</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <CheckCircle size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '87%' }}></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">+5% from last quarter</p>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Carbon Reduction</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">23%</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <PieChartIcon size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '23%' }}></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">Target: 30% by 2025</p>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Supplier Compliance</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">72%</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <Truck size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '72%' }}></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">+12% from last quarter</p>
                  </div>
                </div>
              </div>
              
              {/* Charts Section */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-white rounded-lg shadow p-6">
                  <h2 className="text-lg font-medium text-gray-900 mb-4">Carbon Emissions Trend</h2>
                  <div className="h-80">
                    <ResponsiveContainer width="100%" height="100%">
                      <LineChart
                        data={carbonData}
                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Line type="monotone" dataKey="emissions" stroke="#2E7D32" strokeWidth={2} />
                      </LineChart>
                    </ResponsiveContainer>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <h2 className="text-lg font-medium text-gray-900 mb-4">Compliance Status</h2>
                  <div className="h-80 flex items-center justify-center">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={complianceData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={120}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                          {complianceData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                </div>
              </div>
              
              {/* Upcoming Deadlines & Updates */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Upcoming Deadlines</h2>
                  </div>
                  <div className="divide-y divide-gray-200">
                    {upcomingDeadlines.map(deadline => (
                      <div key={deadline.id} className="px-6 py-4">
                        <div className="flex items-start justify-between">
                          <div>
                            <h3 className="text-sm font-medium text-gray-900">{deadline.title}</h3>
                            <p className="text-xs text-gray-500 mt-1">Due: {deadline.date}</p>
                          </div>
                          <div className={`px-2 py-1 rounded-md text-xs font-medium ${
                            deadline.daysLeft < 15 
                              ? 'bg-red-100 text-red-800' 
                              : deadline.daysLeft < 30 
                                ? 'bg-amber-100 text-amber-800' 
                                : 'bg-green-100 text-green-800'
                          }`}>
                            {deadline.daysLeft} days left
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
                    <a href="#" className="text-sm text-green-700 hover:text-green-500 font-medium">
                      View all deadlines
                    </a>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Regulatory Updates</h2>
                  </div>
                  <div className="divide-y divide-gray-200">
                    {regulatoryUpdates.slice(0, 3).map(update => (
                      <div key={update.id} className="px-6 py-4">
                        <div className="flex items-start">
                          <div className={`p-1 rounded-md mr-3 ${
                            update.priority === 'High' 
                              ? 'bg-red-100' 
                              : 'bg-amber-100'
                          }`}>
                            <AlertTriangle size={16} className={`${
                              update.priority === 'High' 
                                ? 'text-red-700' 
                                : 'text-amber-700'
                            }`} />
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-900">{update.title}</h3>
                            <p className="text-xs text-gray-500 mt-1">
                              {update.date} • {update.priority} Priority
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
                    <a href="#" className="text-sm text-green-700 hover:text-green-500 font-medium">
                      View all updates
                    </a>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeModule === 'regulatory' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">Regulatory Intelligence Hub</h1>
                <button className="bg-green-700 text-white py-2 px-4 rounded-md text-sm hover:bg-green-800">
                  Run Compliance Check
                </button>
              </div>
              
              {/* Regulatory Dashboard */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h2 className="text-lg font-medium text-gray-900">Compliance Status</h2>
                    <Info size={18} className="text-gray-400" />
                  </div>
                  <div className="flex items-center justify-center py-4">
                    <div className="relative">
                      <div className="h-36 w-36 rounded-full flex items-center justify-center border-8 border-green-500">
                        <span className="text-3xl font-bold text-gray-900">87%</span>
                      </div>
                      <div className="absolute -top-2 -right-2 bg-green-100 p-2 rounded-full">
                        <CheckCircle size={20} className="text-green-700" />
                      </div>
                    </div>
                  </div>
                  <div className="mt-4 space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">Completed</span>
                      <span className="font-medium text-gray-900">75%</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">In Progress</span>
                      <span className="font-medium text-gray-900">15%</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-500">At Risk</span>
                      <span className="font-medium text-gray-900">10%</span>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h2 className="text-lg font-medium text-gray-900">Regulatory Updates</h2>
                    <Info size={18} className="text-gray-400" />
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="bg-amber-100 p-1 rounded-md">
                          <AlertTriangle size={16} className="text-amber-700" />
                        </div>
                        <span className="ml-2 text-sm font-medium text-gray-900">New Updates</span>
                      </div>
                      <span className="text-sm font-medium text-gray-900">{regulatoryUpdates.filter(u => !u.read).length}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="bg-green-100 p-1 rounded-md">
                          <CheckCircle size={16} className="text-green-700" />
                        </div>
                        <span className="ml-2 text-sm font-medium text-gray-900">Reviewed</span>
                      </div>
                      <span className="text-sm font-medium text-gray-900">{regulatoryUpdates.filter(u => u.read).length}</span>
                    </div>
                    <div className="pt-4 mt-4 border-t border-gray-200">
                      <button className="w-full py-2 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
                        View All Updates
                      </button>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-center justify-between mb-4">
                    <h2 className="text-lg font-medium text-gray-900">Compliance Calendar</h2>
                    <Info size={18} className="text-gray-400" />
                  </div>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="bg-red-100 p-1 rounded-md">
                          <Calendar size={16} className="text-red-700" />
                        </div>
                        <span className="ml-2 text-sm font-medium text-gray-900">Upcoming (30 days)</span>
                      </div>
                      <span className="text-sm font-medium text-gray-900">3</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="bg-amber-100 p-1 rounded-md">
                          <Calendar size={16} className="text-amber-700" />
                        </div>
                        <span className="ml-2 text-sm font-medium text-gray-900">Future (90 days)</span>
                      </div>
                      <span className="text-sm font-medium text-gray-900">8</span>
                    </div>
                    <div className="pt-4 mt-4 border-t border-gray-200">
                      <button className="w-full py-2 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
                        View Calendar
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Regulatory Table */}
              <div className="bg-white rounded-lg shadow overflow-hidden">
                <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                  <h2 className="text-lg font-medium text-gray-900">Applicable Regulations</h2>
                  <div className="flex items-center space-x-2">
                    <div className="relative">
                      <input
                        type="text"
                        placeholder="Search regulations..."
                        className="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500"
                      />
                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg className="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                          <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
                        </svg>
                      </div>
                    </div>
                    <button className="p-2 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-100">
                      <Sliders size={16} />
                    </button>
                  </div>
                </div>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Regulation
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Jurisdiction
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Status
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Deadline
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Risk Level
                        </th>
                        <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">EU Corporate Sustainability Reporting Directive</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">European Union</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Compliant
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          Dec 31, 2023
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Low
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Carbon Border Adjustment Mechanism</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">European Union</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            In Progress
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          Dec 1, 2023
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Medium
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">SEC Climate Disclosure Rule</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">United States</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            At Risk
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          Nov 28, 2023
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            High
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">UK Modern Slavery Act</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">United Kingdom</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Compliant
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          Dec 10, 2023
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Low
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
                  <div className="text-sm text-gray-500">
                    Showing 4 of 24 regulations
                  </div>
                  <div className="flex items-center space-x-2">
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Previous
                    </button>
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Next
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeModule === 'carbon' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">Carbon Management Center</h1>
                <div className="flex items-center space-x-3">
                  <button className="border border-gray-300 bg-white text-gray-700 py-2 px-4 rounded-md text-sm hover:bg-gray-50">
                    Import Data
                  </button>
                  <button className="bg-green-700 text-white py-2 px-4 rounded-md text-sm hover:bg-green-800">
                    Create Reduction Plan
                  </button>
                </div>
              </div>
              
              {/* Carbon Overview Cards */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Total Emissions (tCO2e)</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">12,450</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <PieChartIcon size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="flex items-center">
                      <span className="text-xs text-red-500 flex items-center">
                        <svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                        +5% from last year
                      </span>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Reduction Target</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">30%</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <PieChartIcon size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '23%' }}></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">23% achieved (7% remaining)</p>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Carbon Intensity</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">0.87</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <PieChartIcon size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="flex items-center">
                      <span className="text-xs text-green-500 flex items-center">
                        <svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                        </svg>
                        -12% from last year
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Emissions Breakdown */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Emissions Trend</h2>
                  </div>
                  <div className="p-6">
                    <div className="h-80">
                      <ResponsiveContainer width="100%" height="100%">
                        <LineChart
                          data={carbonData}
                          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                        >
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="name" />
                          <YAxis />
                          <Tooltip />
                          <Legend />
                          <Line type="monotone" dataKey="emissions" stroke="#2E7D32" strokeWidth={2} />
                        </LineChart>
                      </ResponsiveContainer>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Emissions by Scope</h2>
                  </div>
                  <div className="p-6">
                    <div className="h-80">
                      <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                          <Pie
                            data={[
                              { name: 'Scope 1', value: 2450 },
                              { name: 'Scope 2', value: 4000 },
                              { name: 'Scope 3', value: 6000 },
                            ]}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            outerRadius={100}
                            fill="#8884d8"
                            dataKey="value"
                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                          >
                            <Cell fill="#2E7D32" />
                            <Cell fill="#00796B" />
                            <Cell fill="#FFC107" />
                          </Pie>
                          <Tooltip />
                        </PieChart>
                      </ResponsiveContainer>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Reduction Initiatives */}
              <div className="bg-white rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                  <h2 className="text-lg font-medium text-gray-900">Carbon Reduction Initiatives</h2>
                  <button className="text-sm text-green-700 hover:text-green-500">
                    Add Initiative
                  </button>
                </div>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Initiative
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Category
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Status
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Target Reduction
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Progress
                        </th>
                        <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Renewable Energy Transition</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Energy</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Active
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          2,500 tCO2e
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                              <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '75%' }}></div>
                            </div>
                            <span className="text-sm text-gray-500">75%</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Fleet Electrification</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Transportation</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Planning
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          1,800 tCO2e
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                              <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '10%' }}></div>
                            </div>
                            <span className="text-sm text-gray-500">10%</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Supplier Engagement Program</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Supply Chain</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Active
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          3,200 tCO2e
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                              <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '45%' }}></div>
                            </div>
                            <span className="text-sm text-gray-500">45%</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Energy Efficiency Upgrades</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Facilities</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                            Completed
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                          950 tCO2e
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="w-full bg-gray-200 rounded-full h-2.5 mr-2">
                              <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '100%' }}></div>
                            </div>
                            <span className="text-sm text-gray-500">100%</span>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
                  <div className="text-sm text-gray-500">
                    Showing 4 of 12 initiatives
                  </div>
                  <div className="flex items-center space-x-2">
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Previous
                    </button>
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Next
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeModule === 'supply' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">Supply Chain Ethics Portal</h1>
                <div className="flex items-center space-x-3">
                  <button className="border border-gray-300 bg-white text-gray-700 py-2 px-4 rounded-md text-sm hover:bg-gray-50">
                    Import Suppliers
                  </button>
                  <button className="bg-green-700 text-white py-2 px-4 rounded-md text-sm hover:bg-green-800">
                    New Assessment
                  </button>
                </div>
              </div>
              
              {/* Supply Chain Overview Cards */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Total Suppliers</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">248</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <Truck size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="flex items-center">
                      <span className="text-xs text-green-500 flex items-center">
                        <svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                        </svg>
                        +12 from last quarter
                      </span>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">Assessment Completion</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">72%</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <CheckCircle size={24} className="text-green-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-green-700 h-2.5 rounded-full" style={{ width: '72%' }}></div>
                    </div>
                    <p className="text-xs text-gray-500 mt-2">178 of 248 suppliers assessed</p>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">High-Risk Suppliers</p>
                      <p className="text-3xl font-bold text-gray-900 mt-1">24</p>
                    </div>
                    <div className="bg-red-100 p-2 rounded-md">
                      <AlertTriangle size={24} className="text-red-700" />
                    </div>
                  </div>
                  <div className="mt-4">
                    <div className="flex items-center">
                      <span className="text-xs text-red-500 flex items-center">
                        <svg className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                        </svg>
                        +3 from last quarter
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Supplier Risk Map */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="lg:col-span-2 bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Supplier Risk Map</h2>
                  </div>
                  <div className="p-6">
                    <div className="h-80 bg-gray-100 rounded-lg flex items-center justify-center">
                      <div className="text-center">
                        <Globe size={48} className="mx-auto text-gray-400 mb-2" />
                        <p className="text-gray-500">Interactive supplier risk map would be displayed here</p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow">
                  <div className="px-6 py-4 border-b border-gray-200">
                    <h2 className="text-lg font-medium text-gray-900">Supplier Risk Profile</h2>
                  </div>
                  <div className="p-6">
                    <div className="h-80">
                      <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                          <Pie
                            data={supplierRiskData}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            outerRadius={100}
                            fill="#8884d8"
                            dataKey="value"
                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                          >
                            {supplierRiskData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={supplierRiskCOLORS[index % supplierRiskCOLORS.length]} />
                            ))}
                          </Pie>
                          <Tooltip />
                        </PieChart>
                      </ResponsiveContainer>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Supplier Table */}
              <div className="bg-white rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                  <h2 className="text-lg font-medium text-gray-900">Supplier Directory</h2>
                  <div className="flex items-center space-x-2">
                    <div className="relative">
                      <input
                        type="text"
                        placeholder="Search suppliers..."
                        className="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:ring-green-500 focus:border-green-500"
                      />
                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg className="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                          <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
                        </svg>
                      </div>
                    </div>
                    <button className="p-2 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-100">
                      <Sliders size={16} />
                    </button>
                  </div>
                </div>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Supplier
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Category
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Location
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Risk Level
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Assessment Status
                        </th>
                        <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Global Manufacturing Inc.</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Manufacturing</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">China</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            High
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Completed
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">EcoPackaging Solutions</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Packaging</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">United States</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Low
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            Completed
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Textile Traders Ltd.</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Textiles</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">Bangladesh</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Medium
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            In Progress
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">Tech Components Co.</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-500">Electronics</div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <Globe size={16} className="text-gray-500 mr-2" />
                            <div className="text-sm text-gray-500">Taiwan</div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            Medium
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            Not Started
                          </span>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                          <button className="text-green-700 hover:text-green-900">View</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
                  <div className="text-sm text-gray-500">
                    Showing 4 of 248 suppliers
                  </div>
                  <div className="flex items-center space-x-2">
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Previous
                    </button>
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Next
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeModule === 'reporting' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">Report Generator</h1>
                <div className="flex items-center space-x-3">
                  <button className="border border-gray-300 bg-white text-gray-700 py-2 px-4 rounded-md text-sm hover:bg-gray-50">
                    Import Data
                  </button>
                  <button className="bg-green-700 text-white py-2 px-4 rounded-md text-sm hover:bg-green-800">
                    Generate Report
                  </button>
                </div>
              </div>
              
              {/* Report Templates */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-white rounded-lg shadow p-6 border-2 border-green-500">
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <h2 className="text-lg font-medium text-gray-900">GRI Standards</h2>
                      <p className="text-sm text-gray-500 mt-1">Global Reporting Initiative</p>
                    </div>
                    <div className="bg-green-100 p-2 rounded-md">
                      <FileText size={24} className="text-green-700" />
                    </div>
                  </div>
                  <p className="text-sm text-gray-600 mb-4">Comprehensive sustainability reporting framework widely used globally.</p>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Data Completion</span>
                    <span className="font-medium text-gray-900">78%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mt-2 mb-4">
                    <div className="bg-green-700 h-2 rounded-full" style={{ width: '78%' }}></div>
                  </div>
                  <button className="w-full py-2 bg-green-700 text-white rounded-md text-sm hover:bg-green-800">
                    Continue
                  </button>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <h2 className="text-lg font-medium text-gray-900">SASB Standards</h2>
                      <p className="text-sm text-gray-500 mt-1">Sustainability Accounting Standards Board</p>
                    </div>
                    <div className="bg-gray-100 p-2 rounded-md">
                      <FileText size={24} className="text-gray-700" />
                    </div>
                  </div>
                  <p className="text-sm text-gray-600 mb-4">Industry-specific standards focused on financial materiality.</p>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Data Completion</span>
                    <span className="font-medium text-gray-900">45%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mt-2 mb-4">
                    <div className="bg-green-700 h-2 rounded-full" style={{ width: '45%' }}></div>
                  </div>
                  <button className="w-full py-2 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
                    Continue
                  </button>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6">
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <h2 className="text-lg font-medium text-gray-900">TCFD Framework</h2>
                      <p className="text-sm text-gray-500 mt-1">Task Force on Climate-related Financial Disclosures</p>
                    </div>
                    <div className="bg-gray-100 p-2 rounded-md">
                      <FileText size={24} className="text-gray-700" />
                    </div>
                  </div>
                  <p className="text-sm text-gray-600 mb-4">Climate-focused reporting framework for financial impacts.</p>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Data Completion</span>
                    <span className="font-medium text-gray-900">32%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mt-2 mb-4">
                    <div className="bg-green-700 h-2 rounded-full" style={{ width: '32%' }}></div>
                  </div>
                  <button className="w-full py-2 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
                    Continue
                  </button>
                </div>
              </div>
              
              {/* Report Builder */}
              <div className="bg-white rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200">
                  <h2 className="text-lg font-medium text-gray-900">GRI Report Builder</h2>
                </div>
                <div className="p-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="md:col-span-2">
                      <div className="space-y-6">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Report Title</label>
                          <input
                            type="text"
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
                            placeholder="2023 Sustainability Report"
                            value="2023 Sustainability Report"
                          />
                        </div>
                        
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Reporting Period</label>
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <label className="block text-xs text-gray-500 mb-1">Start Date</label>
                              <input
                                type="date"
                                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
                                value="2023-01-01"
                              />
                            </div>
                            <div>
                              <label className="block text-xs text-gray-500 mb-1">End Date</label>
                              <input
                                type="date"
                                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
                                value="2023-12-31"
                              />
                            </div>
                          </div>
                        </div>
                        
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Executive Summary</label>
                          <textarea
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500 h-32"
                            placeholder="Enter a brief summary of your sustainability performance and key achievements..."
                            defaultValue="In 2023, our company made significant progress toward our sustainability goals, reducing carbon emissions by 23% compared to our 2019 baseline. We expanded our renewable energy portfolio, improved supply chain transparency, and strengthened our governance practices. This report details our approach to environmental stewardship, social responsibility, and ethical governance."
                          ></textarea>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <div className="bg-gray-50 p-4 rounded-lg">
                        <h3 className="text-sm font-medium text-gray-900 mb-3">Report Sections</h3>
                        <div className="space-y-2">
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                              checked
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Organizational Profile
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                              checked
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Strategy and Governance
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                              checked
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Environmental Performance
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                              checked
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Social Impact
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                              checked
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Economic Performance
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Supply Chain Management
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Product Responsibility
                            </label>
                          </div>
                          <div className="flex items-center">
                            <input
                              type="checkbox"
                              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
                            />
                            <label className="ml-2 block text-sm text-gray-700">
                              Human Rights
                            </label>
                          </div>
                        </div>
                        
                        <div className="mt-4 pt-4 border-t border-gray-200">
                          <h3 className="text-sm font-medium text-gray-900 mb-3">Output Format</h3>
                          <div className="space-y-2">
                            <div className="flex items-center">
                              <input
                                type="radio"
                                name="format"
                                className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"
                                checked
                              />
                              <label className="ml-2 block text-sm text-gray-700">
                                PDF Document
                              </label>
                            </div>
                            <div className="flex items-center">
                              <input
                                type="radio"
                                name="format"
                                className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"
                              />
                              <label className="ml-2 block text-sm text-gray-700">
                                Web Publication
                              </label>
                            </div>
                            <div className="flex items-center">
                              <input
                                type="radio"
                                name="format"
                                className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"
                              />
                              <label className="ml-2 block text-sm text-gray-700">
                                Interactive Dashboard
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end">
                  <div className="flex items-center space-x-3">
                    <button className="px-4 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-100">
                      Save Draft
                    </button>
                    <button className="px-4 py-2 bg-green-700 text-white rounded-md text-sm hover:bg-green-800">
                      Preview Report
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeModule === 'experts' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">Expert Marketplace</h1>
                <button className="bg-green-700 text-white py-2 px-4 rounded-md text-sm hover:bg-green-800">
                  Post Project
                </button>
              </div>
              
              {/* Expert Categories */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow cursor-pointer">
                  <div className="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-700 mb-4">
                    <Clipboard size={24} />
                  </div>
                  <h2 className="text-lg font-medium text-gray-900 mb-2">Regulatory Compliance</h2>
                  <p className="text-sm text-gray-500">Experts in navigating complex ESG regulations across jurisdictions.</p>
                  <p className="text-sm font-medium text-green-700 mt-4">42 Experts Available</p>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow cursor-pointer">
                  <div className="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-700 mb-4">
                    <PieChartIcon size={24} />
                  </div>
                  <h2 className="text-lg font-medium text-gray-900 mb-2">Carbon Strategy</h2>
                  <p className="text-sm text-gray-500">Specialists in carbon accounting, reduction strategies, and net-zero planning.</p>
                  <p className="text-sm font-medium text-green-700 mt-4">38 Experts Available</p>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow cursor-pointer">
                  <div className="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-700 mb-4">
                    <Truck size={24} />
                  </div>
                  <h2 className="text-lg font-medium text-gray-900 mb-2">Supply Chain Ethics</h2>
                  <p className="text-sm text-gray-500">Consultants specializing in ethical sourcing and supply chain transparency.</p>
                  <p className="text-sm font-medium text-green-700 mt-4">27 Experts Available</p>
                </div>
                
                <div className="bg-white rounded-lg shadow p-6 hover:shadow-md transition-shadow cursor-pointer">
                  <div className="flex items-center justify-center h-12 w-12 rounded-md bg-green-100 text-green-700 mb-4">
                    <FileText size={24} />
                  </div>
                  <h2 className="text-lg font-medium text-gray-900 mb-2">Reporting & Disclosure</h2>
                  <p className="text-sm text-gray-500">Professionals in sustainability reporting frameworks and investor communications.</p>
                  <p className="text-sm font-medium text-green-700 mt-4">35 Experts Available</p>
                </div>
              </div>
              
              {/* Featured Experts */}
              <div className="bg-white rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200">
                  <h2 className="text-lg font-medium text-gray-900">Featured Experts</h2>
                </div>
                <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                    <div className="p-6">
                      <div className="flex items-start">
                        <div className="h-12 w-12 rounded-full bg-gray-200 flex-shrink-0 mr-4">
                          <div className="h-full w-full rounded-full flex items-center justify-center text-gray-500 font-medium">
                            JD
                          </div>
                        </div>
                        <div>
                          <h3 className="text-lg font-medium text-gray-900">Dr. Jane Davis</h3>
                          <p className="text-sm text-gray-500">Carbon Strategy Specialist</p>
                          <div className="flex items-center mt-1">
                            <div className="flex">
                              {[...Array(5)].map((_, i) => (
                                <svg key={i} className={`h-4 w-4 ${i < 5 ? 'text-yellow-400' : 'text-gray-300'}`} fill="currentColor" viewBox="0 0 20 20">
                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                              ))}
                            </div>
                            <span className="text-xs text-gray-500 ml-1">(48 reviews)</span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-4">
                        <p className="text-sm text-gray-600">Former EPA climate scientist with 15+ years experience in corporate carbon strategy and net-zero planning.</p>
                        <div className="mt-3 flex flex-wrap gap-2">
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Carbon Accounting</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Net-Zero Strategy</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Science-Based Targets</span>
                        </div>
                      </div>
                      <div className="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
                        <div>
                          <p className="text-sm text-gray-500">Rate: <span className="font-medium text-gray-900">$250/hr</span></p>
                        </div>
                        <button className="px-3 py-1 bg-green-700 text-white rounded-md text-sm hover:bg-green-800">
                          Contact
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                    <div className="p-6">
                      <div className="flex items-start">
                        <div className="h-12 w-12 rounded-full bg-gray-200 flex-shrink-0 mr-4">
                          <div className="h-full w-full rounded-full flex items-center justify-center text-gray-500 font-medium">
                            MR
                          </div>
                        </div>
                        <div>
                          <h3 className="text-lg font-medium text-gray-900">Michael Rodriguez</h3>
                          <p className="text-sm text-gray-500">Regulatory Compliance Expert</p>
                          <div className="flex items-center mt-1">
                            <div className="flex">
                              {[...Array(5)].map((_, i) => (
                                <svg key={i} className={`h-4 w-4 ${i < 4 ? 'text-yellow-400' : 'text-gray-300'}`} fill="currentColor" viewBox="0 0 20 20">
                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                              ))}
                            </div>
                            <span className="text-xs text-gray-500 ml-1">(36 reviews)</span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-4">
                        <p className="text-sm text-gray-600">Attorney specializing in environmental law and ESG regulations across US, EU, and Asia-Pacific markets.</p>
                        <div className="mt-3 flex flex-wrap gap-2">
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">EU CSRD</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">SEC Climate Rules</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">TCFD Alignment</span>
                        </div>
                      </div>
                      <div className="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
                        <div>
                          <p className="text-sm text-gray-500">Rate: <span className="font-medium text-gray-900">$275/hr</span></p>
                        </div>
                        <button className="px-3 py-1 bg-green-700 text-white rounded-md text-sm hover:bg-green-800">
                          Contact
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                    <div className="p-6">
                      <div className="flex items-start">
                        <div className="h-12 w-12 rounded-full bg-gray-200 flex-shrink-0 mr-4">
                          <div className="h-full w-full rounded-full flex items-center justify-center text-gray-500 font-medium">
                            SL
                          </div>
                        </div>
                        <div>
                          <h3 className="text-lg font-medium text-gray-900">Sarah Lin</h3>
                          <p className="text-sm text-gray-500">Supply Chain Transparency Advisor</p>
                          <div className="flex items-center mt-1">
                            <div className="flex">
                              {[...Array(5)].map((_, i) => (
                                <svg key={i} className={`h-4 w-4 ${i < 5 ? 'text-yellow-400' : 'text-gray-300'}`} fill="currentColor" viewBox="0 0 20 20">
                                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                              ))}
                            </div>
                            <span className="text-xs text-gray-500 ml-1">(52 reviews)</span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-4">
                        <p className="text-sm text-gray-600">Supply chain expert with background in ethical sourcing, human rights due diligence, and traceability systems.</p>
                        <div className="mt-3 flex flex-wrap gap-2">
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Supplier Audits</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Human Rights</span>
                          <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Traceability</span>
                        </div>
                      </div>
                      <div className="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
                        <div>
                          <p className="text-sm text-gray-500">Rate: <span className="font-medium text-gray-900">$225/hr</span></p>
                        </div>
                        <button className="px-3 py-1 bg-green-700 text-white rounded-md text-sm hover:bg-green-800">
                          Contact
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
                  <a href="#" className="text-sm text-green-700 hover:text-green-500 font-medium">
                    View all experts
                  </a>
                </div>
              </div>
              
              {/* Active Projects */}
              <div className="bg-white rounded-lg shadow">
                <div className="px-6 py-4 border-b border-gray-200">
                  <h2 className="text-lg font-medium text-gray-900">Your Active Projects</h2>
                </div>
                <div className="divide-y divide-gray-200">
                  <div className="px-6 py-4">
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="text-sm font-medium text-gray-900">TCFD Climate Risk Assessment</h3>
                        <p className="text-xs text-gray-500 mt-1">Started: Oct 15, 2023 • Due: Dec 10, 2023</p>
                        <div className="flex items-center mt-2">
                          <div className="h-6 w-6 rounded-full bg-gray-200 flex-shrink-0 mr-2">
                            <div className="h-full w-full rounded-full flex items-center justify-center text-gray-500 text-xs font-medium">
                              MR
                            </div>
                          </div>
                          <span className="text-xs text-gray-700">Michael Rodriguez</span>
                        </div>
                      </div>
                      <div>
                        <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">In Progress</span>
                      </div>
                    </div>
                    <div className="mt-3">
                      <div className="flex items-center justify-between text-xs">
                        <span className="text-gray-500">Progress</span>
                        <span className="font-medium text-gray-900">65%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                        <div className="bg-green-700 h-1.5 rounded-full" style={{ width: '65%' }}></div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="px-6 py-4">
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="text-sm font-medium text-gray-900">Supplier Code of Conduct Development</h3>
                        <p className="text-xs text-gray-500 mt-1">Started: Sep 28, 2023 • Due: Nov 30, 2023</p>
                        <div className="flex items-center mt-2">
                          <div className="h-6 w-6 rounded-full bg-gray-200 flex-shrink-0 mr-2">
                            <div className="h-full w-full rounded-full flex items-center justify-center text-gray-500 text-xs font-medium">
                              SL
                            </div>
                          </div>
                          <span className="text-xs text-gray-700">Sarah Lin</span>
                        </div>
                      </div>
                      <div>
                        <span className="px-2 py-1 bg-amber-100 text-amber-800 text-xs rounded-full">Review Needed</span>
                      </div>
                    </div>
                    <div className="mt-3">
                      <div className="flex items-center justify-between text-xs">
                        <span className="text-gray-500">Progress</span>
                        <span className="font-medium text-gray-900">80%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                        <div className="bg-green-700 h-1.5 rounded-full" style={{ width: '80%' }}></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="px-6 py-3 border-t border-gray-200 bg-gray-50">
                  <a href="#" className="text-sm text-green-700 hover:text-green-500 font-medium">
                    View all projects
                  </a>
                </div>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default App;