import React, { useState, useEffect } from 'react';
import { Search, Truck, Package, BarChart2, Users, Shield, Menu, X, ChevronRight, LogIn, MapPin, Calendar, DollarSign, Clock, Filter, User, Bell, Settings, LogOut, Home, Clipboard, TrendingUp, Phone, Mail, ExternalLink, FileText, HelpCircle, BookOpen, Download, Award, CheckCircle, Zap, Database, PieChart, LifeBuoy, MessageCircle, Video, Info } from 'lucide-react';

export default function TruckersEdgeWebsite() {
  // Navigation and UI state
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('search');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showSignupModal, setShowSignupModal] = useState(false);
  const [showFilters, setShowFilters] = useState(false);
  const [notifications, setNotifications] = useState([
    { id: 1, message: "New loads matching your criteria", read: false },
    { id: 2, message: "Rate alert: Rates increased on your route", read: false },
    { id: 3, message: "Payment received from broker XYZ", read: true }
  ]);
  const [showNotifications, setShowNotifications] = useState(false);
  
  // Form state
  const [searchTerm, setSearchTerm] = useState('');
  const [originLocation, setOriginLocation] = useState('');
  const [destinationLocation, setDestinationLocation] = useState('');
  const [loadType, setLoadType] = useState('');
  const [radius, setRadius] = useState(50);
  const [minRate, setMinRate] = useState('');
  const [dateRange, setDateRange] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');
  const [phone, setPhone] = useState('');
  const [rememberMe, setRememberMe] = useState(false);
  
  // Search results state
  const [searchResults, setSearchResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
  const [hasSearched, setHasSearched] = useState(false);
  
  // Solutions tab state
  const [activeSolutionTab, setActiveSolutionTab] = useState('loadBoard');
  
  // Resources tab state
  const [activeResourceTab, setActiveResourceTab] = useState('blog');
  
  // Support tab state
  const [supportQuestion, setSupportQuestion] = useState('');
  const [supportEmail, setSupportEmail] = useState('');
  const [supportMessage, setSupportMessage] = useState('');
  
  // Mock data for loads
  const mockLoads = [
    {
      id: 1,
      origin: "Chicago, IL",
      destination: "Indianapolis, IN",
      distance: 184,
      rate: 850,
      ratePerMile: 4.62,
      loadType: "van",
      weight: 22000,
      pickupDate: "2023-11-15",
      company: "ABC Logistics",
      contact: "555-123-4567",
      details: "Dry goods, no touch freight"
    },
    {
      id: 2,
      origin: "Atlanta, GA",
      destination: "Charlotte, NC",
      distance: 245,
      rate: 1100,
      ratePerMile: 4.49,
      loadType: "reefer",
      weight: 28000,
      pickupDate: "2023-11-16",
      company: "Fresh Foods Transport",
      contact: "555-987-6543",
      details: "Refrigerated goods, maintain at 34°F"
    },
    {
      id: 3,
      origin: "Dallas, TX",
      destination: "Houston, TX",
      distance: 239,
      rate: 950,
      ratePerMile: 3.97,
      loadType: "flatbed",
      weight: 32000,
      pickupDate: "2023-11-15",
      company: "Texas Haulers Inc",
      contact: "555-222-3333",
      details: "Construction materials, tarping required"
    },
    {
      id: 4,
      origin: "Los Angeles, CA",
      destination: "Phoenix, AZ",
      distance: 373,
      rate: 1650,
      ratePerMile: 4.42,
      loadType: "van",
      weight: 18000,
      pickupDate: "2023-11-17",
      company: "West Coast Shipping",
      contact: "555-444-5555",
      details: "Electronics, high value freight"
    },
    {
      id: 5,
      origin: "Seattle, WA",
      destination: "Portland, OR",
      distance: 174,
      rate: 780,
      ratePerMile: 4.48,
      loadType: "van",
      weight: 15000,
      pickupDate: "2023-11-16",
      company: "Northwest Carriers",
      contact: "555-777-8888",
      details: "General merchandise"
    },
    {
      id: 6,
      origin: "Miami, FL",
      destination: "Orlando, FL",
      distance: 236,
      rate: 920,
      ratePerMile: 3.90,
      loadType: "reefer",
      weight: 24000,
      pickupDate: "2023-11-18",
      company: "Florida Freight",
      contact: "555-999-0000",
      details: "Perishable goods, temperature controlled"
    },
    {
      id: 7,
      origin: "Denver, CO",
      destination: "Salt Lake City, UT",
      distance: 371,
      rate: 1580,
      ratePerMile: 4.26,
      loadType: "flatbed",
      weight: 35000,
      pickupDate: "2023-11-17",
      company: "Mountain Movers",
      contact: "555-111-2222",
      details: "Steel beams, chains required"
    },
    {
      id: 8,
      origin: "New York, NY",
      destination: "Boston, MA",
      distance: 215,
      rate: 1050,
      ratePerMile: 4.88,
      loadType: "van",
      weight: 17000,
      pickupDate: "2023-11-15",
      company: "East Coast Express",
      contact: "555-333-4444",
      details: "Retail goods, liftgate required"
    }
  ];
  
  // Dashboard data
  const recentLoads = [
    { id: 101, origin: "Memphis, TN", destination: "Nashville, TN", date: "11/12/23", status: "Delivered", amount: "$750" },
    { id: 102, origin: "Chicago, IL", destination: "Detroit, MI", date: "11/10/23", status: "In Transit", amount: "$920" },
    { id: 103, origin: "Atlanta, GA", destination: "Jacksonville, FL", date: "11/08/23", status: "Delivered", amount: "$1,100" }
  ];
  
  const upcomingLoads = [
    { id: 201, origin: "Phoenix, AZ", destination: "Las Vegas, NV", date: "11/16/23", time: "08:00 AM", broker: "Southwest Logistics" },
    { id: 202, origin: "Seattle, WA", destination: "Spokane, WA", date: "11/18/23", time: "10:30 AM", broker: "Northwest Carriers" }
  ];
  
  // Blog posts for Resources tab
  const blogPosts = [
    {
      id: 1,
      title: "5 Ways to Maximize Your Profits as an Owner-Operator",
      excerpt: "Learn the top strategies successful owner-operators use to increase their bottom line in today's competitive market.",
      date: "November 10, 2023",
      author: "Michael Johnson",
      category: "Business Tips",
      image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 2,
      title: "Understanding the New Hours of Service Regulations",
      excerpt: "A comprehensive breakdown of the latest HOS changes and how they affect your operations and compliance requirements.",
      date: "November 5, 2023",
      author: "Sarah Williams",
      category: "Regulations",
      image: "https://images.unsplash.com/photo-1516733968668-dbdce39c4651?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 3,
      title: "Fuel Efficiency: Small Changes That Make a Big Difference",
      excerpt: "Discover practical tips to reduce fuel consumption and increase your margins without major investments.",
      date: "October 28, 2023",
      author: "David Martinez",
      category: "Operations",
      image: "https://images.unsplash.com/photo-1563016115-85d3a955f092?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
    }
  ];
  
  // Market updates for Resources tab
  const marketUpdates = [
    {
      id: 1,
      title: "Q4 Freight Market Outlook",
      excerpt: "Analysis of current trends and predictions for the freight market through the end of the year and into 2024.",
      date: "November 12, 2023"
    },
    {
      id: 2,
      title: "Regional Rate Analysis: Midwest",
      excerpt: "Detailed breakdown of rate trends in the Midwest region with forecasts for the coming months.",
      date: "November 8, 2023"
    },
    {
      id: 3,
      title: "Impact of Recent Fuel Price Changes",
      excerpt: "How the latest shifts in fuel prices are affecting carrier margins and strategies to adapt.",
      date: "November 3, 2023"
    }
  ];
  
  // Webinars for Resources tab
  const webinars = [
    {
      id: 1,
      title: "Maximizing TruckersEdge Tools for Better Loads",
      date: "November 20, 2023",
      time: "2:00 PM EST",
      presenter: "John Smith, Senior Product Specialist",
      status: "upcoming"
    },
    {
      id: 2,
      title: "Tax Planning Strategies for Owner-Operators",
      date: "November 15, 2023",
      time: "1:00 PM EST",
      presenter: "Lisa Johnson, CPA",
      status: "upcoming"
    },
    {
      id: 3,
      title: "Navigating ELD Compliance in 2024",
      date: "October 25, 2023",
      time: "3:00 PM EST",
      presenter: "Mark Williams, Compliance Expert",
      status: "recorded",
      recordingUrl: "#"
    }
  ];
  
  // FAQs for Support tab
  const faqs = [
    {
      id: 1,
      question: "How do I find the best-paying loads?",
      answer: "To find the best-paying loads, use our advanced search filters to set minimum rates and sort results by rate per mile. You can also save preferred lanes and set up alerts for high-paying loads that match your criteria."
    },
    {
      id: 2,
      question: "What information do I need to sign up?",
      answer: "To create an account, you'll need your name, email address, phone number, and company information. For full access to load board features, you'll also need to provide your MC number and proof of insurance."
    },
    {
      id: 3,
      question: "How do broker credit checks work?",
      answer: "Our broker credit check feature allows you to verify a broker's payment history and credit score before accepting a load. Simply click the 'Check Credit' button on any load listing to see the broker's days-to-pay average and credit rating."
    },
    {
      id: 4,
      question: "Can I access TruckersEdge on my mobile device?",
      answer: "Yes, TruckersEdge is fully mobile-responsive and can be accessed on any smartphone or tablet. We also offer a dedicated mobile app for iOS and Android with additional features like push notifications for new loads."
    },
    {
      id: 5,
      question: "How do I cancel or change my subscription?",
      answer: "You can manage your subscription from your account settings page. To change your plan or cancel your subscription, go to Settings > Subscription and select the appropriate option. Changes will take effect at the end of your current billing cycle."
    }
  ];
  
  // Handle search submission
  const handleSearch = (e) => {
    e.preventDefault();
    setIsSearching(true);
    setHasSearched(true);
    
    // Simulate API call with timeout
    setTimeout(() => {
      // Filter mock data based on search criteria
      let results = [...mockLoads];
      
      if (originLocation) {
        results = results.filter(load => 
          load.origin.toLowerCase().includes(originLocation.toLowerCase())
        );
      }
      
      if (destinationLocation) {
        results = results.filter(load => 
          load.destination.toLowerCase().includes(destinationLocation.toLowerCase())
        );
      }
      
      if (loadType) {
        results = results.filter(load => load.loadType === loadType);
      }
      
      if (minRate) {
        results = results.filter(load => load.rate >= parseInt(minRate));
      }
      
      setSearchResults(results);
      setIsSearching(false);
      
      // Save search to API
      saveSearchToAPI(originLocation, destinationLocation, loadType);
    }, 1000);
  };
  
  // Simulate API calls
  const saveSearchToAPI = async (origin, destination, type) => {
    try {
      const response = await fetch(`https://www.sitebrew.ai/api/LVavgi/searches`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          document: {
            origin,
            destination,
            type,
            timestamp: new Date().toISOString()
          }
        }),
      });
      
      console.log('Search saved successfully');
    } catch (error) {
      console.error('Error saving search:', error);
    }
  };
  
  const handleLogin = (e) => {
    e.preventDefault();
    // Simulate login process
    setIsLoggedIn(true);
    setShowLoginModal(false);
    // Clear form
    setEmail('');
    setPassword('');
  };
  
  const handleSignup = (e) => {
    e.preventDefault();
    // Simulate signup process
    setIsLoggedIn(true);
    setShowSignupModal(false);
    // Clear form
    setName('');
    setEmail('');
    setCompany('');
    setPhone('');
    setPassword('');
  };
  
  const handleLogout = () => {
    setIsLoggedIn(false);
    setActiveTab('search');
  };
  
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  
  const handleSupportSubmit = (e) => {
    e.preventDefault();
    // Simulate form submission
    alert("Thank you for your message. Our support team will contact you shortly.");
    setSupportQuestion('');
    setSupportEmail('');
    setSupportMessage('');
  };
  
  // Format currency
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0
    }).format(amount);
  };
  
  // Format date
  const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'short', day: 'numeric' };
    return new Date(dateString).toLocaleDateString('en-US', options);
  };
  
  return (
    <div className="min-h-screen bg-gray-50 font-sans">
      {/* Header */}
      <header className="bg-[#1a365d] text-white shadow-md sticky top-0 z-50">
        <div className="container mx-auto px-4 py-3">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2">
              <Truck className="h-8 w-8 text-[#ed8936]" />
              <span className="text-2xl font-bold">TruckersEdge</span>
            </div>
            
            {/* Desktop Navigation */}
            <nav className="hidden md:flex space-x-8">
              <a 
                href="#" 
                className={`hover:text-[#ed8936] transition-colors ${activeTab === 'search' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('search');
                }}
              >
                Load Board
              </a>
              {isLoggedIn && (
                <a 
                  href="#" 
                  className={`hover:text-[#ed8936] transition-colors ${activeTab === 'dashboard' ? 'text-[#ed8936]' : ''}`}
                  onClick={(e) => {
                    e.preventDefault();
                    setActiveTab('dashboard');
                  }}
                >
                  Dashboard
                </a>
              )}
              <a 
                href="#" 
                className={`hover:text-[#ed8936] transition-colors ${activeTab === 'solutions' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('solutions');
                }}
              >
                Solutions
              </a>
              <a 
                href="#" 
                className={`hover:text-[#ed8936] transition-colors ${activeTab === 'pricing' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('pricing');
                }}
              >
                Pricing
              </a>
              <a 
                href="#" 
                className={`hover:text-[#ed8936] transition-colors ${activeTab === 'resources' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('resources');
                }}
              >
                Resources
              </a>
              <a 
                href="#" 
                className={`hover:text-[#ed8936] transition-colors ${activeTab === 'support' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('support');
                }}
              >
                Support
              </a>
            </nav>
            
            <div className="hidden md:flex items-center space-x-4">
              {isLoggedIn ? (
                <div className="flex items-center space-x-4">
                  <div className="relative">
                    <button 
                      className="p-2 rounded-full hover:bg-[#2d4a7a] transition-colors relative"
                      onClick={() => setShowNotifications(!showNotifications)}
                    >
                      <Bell className="h-5 w-5" />
                      {notifications.filter(n => !n.read).length > 0 && (
                        <span className="absolute top-0 right-0 bg-[#ed8936] text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
                          {notifications.filter(n => !n.read).length}
                        </span>
                      )}
                    </button>
                    
                    {showNotifications && (
                      <div className="absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg overflow-hidden z-20 text-gray-800">
                        <div className="p-3 border-b border-gray-200">
                          <h3 className="font-semibold">Notifications</h3>
                        </div>
                        <div className="max-h-80 overflow-y-auto">
                          {notifications.length > 0 ? (
                            notifications.map(notification => (
                              <div 
                                key={notification.id} 
                                className={`p-3 border-b border-gray-100 hover:bg-gray-50 ${!notification.read ? 'bg-blue-50' : ''}`}
                              >
                                <p className="text-sm">{notification.message}</p>
                                <p className="text-xs text-gray-500 mt-1">2 hours ago</p>
                              </div>
                            ))
                          ) : (
                            <p className="p-3 text-center text-gray-500">No notifications</p>
                          )}
                        </div>
                        <div className="p-2 text-center border-t border-gray-200">
                          <button className="text-sm text-[#4a6fa5] hover:text-[#1a365d]">
                            Mark all as read
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                  
                  <div className="relative group">
                    <button className="flex items-center space-x-2 p-2 rounded hover:bg-[#2d4a7a] transition-colors">
                      <div className="h-8 w-8 rounded-full bg-[#4a6fa5] flex items-center justify-center text-white">
                        <User className="h-5 w-5" />
                      </div>
                      <span>John D.</span>
                    </button>
                    
                    <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden z-20 hidden group-hover:block text-gray-800">
                      <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                        <User className="h-4 w-4 inline mr-2" />
                        Profile
                      </a>
                      <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                        <Settings className="h-4 w-4 inline mr-2" />
                        Settings
                      </a>
                      <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                        <Shield className="h-4 w-4 inline mr-2" />
                        Subscription
                      </a>
                      <div className="border-t border-gray-200"></div>
                      <button 
                        onClick={handleLogout}
                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100"
                      >
                        <LogOut className="h-4 w-4 inline mr-2" />
                        Logout
                      </button>
                    </div>
                  </div>
                </div>
              ) : (
                <>
                  <button 
                    className="px-4 py-2 rounded hover:bg-[#4a6fa5] transition-colors"
                    onClick={() => setShowLoginModal(true)}
                  >
                    <LogIn className="h-5 w-5 inline mr-1" />
                    Login
                  </button>
                  <button 
                    className="bg-[#ed8936] hover:bg-[#dd7d26] px-4 py-2 rounded transition-colors"
                    onClick={() => setShowSignupModal(true)}
                  >
                    Sign Up
                  </button>
                </>
              )}
            </div>
            
            {/* Mobile menu button */}
            <button className="md:hidden" onClick={toggleMenu}>
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
          
          {/* Mobile Navigation */}
          {isMenuOpen && (
            <nav className="md:hidden pt-4 pb-2 space-y-3">
              <a 
                href="#" 
                className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'search' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('search');
                  setIsMenuOpen(false);
                }}
              >
                Load Board
              </a>
              {isLoggedIn && (
                <a 
                  href="#" 
                  className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'dashboard' ? 'text-[#ed8936]' : ''}`}
                  onClick={(e) => {
                    e.preventDefault();
                    setActiveTab('dashboard');
                    setIsMenuOpen(false);
                  }}
                >
                  Dashboard
                </a>
              )}
              <a 
                href="#" 
                className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'solutions' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('solutions');
                  setIsMenuOpen(false);
                }}
              >
                Solutions
              </a>
              <a 
                href="#" 
                className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'pricing' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('pricing');
                  setIsMenuOpen(false);
                }}
              >
                Pricing
              </a>
              <a 
                href="#" 
                className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'resources' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('resources');
                  setIsMenuOpen(false);
                }}
              >
                Resources
              </a>
              <a 
                href="#" 
                className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'support' ? 'text-[#ed8936]' : ''}`}
                onClick={(e) => {
                  e.preventDefault();
                  setActiveTab('support');
                  setIsMenuOpen(false);
                }}
              >
                Support
              </a>
              <div className="pt-2 flex flex-col space-y-2">
                {isLoggedIn ? (
                  <>
                    <div className="flex items-center space-x-2 py-2">
                      <div className="h-8 w-8 rounded-full bg-[#4a6fa5] flex items-center justify-center text-white">
                        <User className="h-5 w-5" />
                      </div>
                      <span>John Doe</span>
                    </div>
                    <button 
                      onClick={handleLogout}
                      className="px-4 py-2 rounded border border-white hover:bg-[#4a6fa5] transition-colors"
                    >
                      <LogOut className="h-5 w-5 inline mr-1" />
                      Logout
                    </button>
                  </>
                ) : (
                  <>
                    <button 
                      className="px-4 py-2 rounded border border-white hover:bg-[#4a6fa5] transition-colors"
                      onClick={() => {
                        setShowLoginModal(true);
                        setIsMenuOpen(false);
                      }}
                    >
                      <LogIn className="h-5 w-5 inline mr-1" />
                      Login
                    </button>
                    <button 
                      className="bg-[#ed8936] hover:bg-[#dd7d26] px-4 py-2 rounded transition-colors"
                      onClick={() => {
                        setShowSignupModal(true);
                        setIsMenuOpen(false);
                      }}
                    >
                      Sign Up
                    </button>
                  </>
                )}
              </div>
            </nav>
          )}
        </div>
      </header>
      
      {/* Main Content */}
      <main>
        {/* Load Board Tab */}
        {activeTab === 'search' && (
          <>
            {/* Hero Section (only show if not logged in and no search results) */}
            {!isLoggedIn && !hasSearched && (
              <section className="bg-[#1a365d] text-white py-16">
                <div className="container mx-auto px-4">
                  <div className="flex flex-col md:flex-row items-center">
                    <div className="md:w-1/2 mb-8 md:mb-0">
                      <h1 className="text-4xl md:text-5xl font-bold mb-4">Find Loads and Grow Your Business</h1>
                      <p className="text-xl mb-8">Access thousands of loads daily and streamline your trucking operations with TruckersEdge.</p>
                      <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <button 
                          className="bg-[#ed8936] hover:bg-[#dd7d26] px-6 py-3 rounded-md font-semibold transition-colors"
                          onClick={() => setShowSignupModal(true)}
                        >
                          Start Free Trial
                        </button>
                        <button className="border border-white hover:bg-white hover:text-[#1a365d] px-6 py-3 rounded-md font-semibold transition-colors">
                          View Demo
                        </button>
                      </div>
                    </div>
                    <div className="md:w-1/2">
                      <img 
                        src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                        alt="Truck on highway" 
                        className="rounded-lg shadow-xl"
                      />
                    </div>
                  </div>
                </div>
              </section>
            )}
            
            {/* Load Search Section */}
            <section className={`py-12 ${hasSearched ? 'bg-gray-50' : 'bg-white'}`}>
              <div className="container mx-auto px-4">
                <div className={`bg-white rounded-lg shadow-lg p-6 ${!isLoggedIn && !hasSearched ? '-mt-20 relative z-10' : ''}`}>
                  <h2 className="text-2xl font-bold mb-6 text-center text-[#1a365d]">Find Available Loads</h2>
                  <form onSubmit={handleSearch}>
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Origin</label>
                        <input
                          type="text"
                          placeholder="City, State, or ZIP"
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                          value={originLocation}
                          onChange={(e) => setOriginLocation(e.target.value)}
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Destination</label>
                        <input
                          type="text"
                          placeholder="City, State, or ZIP"
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                          value={destinationLocation}
                          onChange={(e) => setDestinationLocation(e.target.value)}
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Load Type</label>
                        <select
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                          value={loadType}
                          onChange={(e) => setLoadType(e.target.value)}
                        >
                          <option value="">All Load Types</option>
                          <option value="van">Van</option>
                          <option value="reefer">Reefer</option>
                          <option value="flatbed">Flatbed</option>
                          <option value="specialized">Specialized</option>
                        </select>
                      </div>
                      <div className="flex items-end">
                        <button 
                          type="submit"
                          className="w-full bg-[#1a365d] hover:bg-[#2d4a7a] text-white p-3 rounded-md font-semibold transition-colors flex items-center justify-center"
                          disabled={isSearching}
                        >
                          {isSearching ? (
                            <svg className="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                          ) : (
                            <Search className="h-5 w-5 mr-2" />
                          )}
                          {isSearching ? 'Searching...' : 'Search Loads'}
                        </button>
                      </div>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <button 
                        type="button"
                        className="text-[#4a6fa5] hover:text-[#1a365d] flex items-center text-sm"
                        onClick={() => setShowFilters(!showFilters)}
                      >
                        <Filter className="h-4 w-4 mr-1" />
                        {showFilters ? 'Hide Filters' : 'Advanced Filters'}
                      </button>
                      
                      {isLoggedIn && (
                        <button 
                          type="button"
                          className="text-[#4a6fa5] hover:text-[#1a365d] text-sm"
                        >
                          Save this search
                        </button>
                      )}
                    </div>
                    
                    {showFilters && (
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-200">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Radius (miles)</label>
                          <select
                            className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                            value={radius}
                            onChange={(e) => setRadius(e.target.value)}
                          >
                            <option value="25">25 miles</option>
                            <option value="50">50 miles</option>
                            <option value="100">100 miles</option>
                            <option value="200">200 miles</option>
                          </select>
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Minimum Rate ($)</label>
                          <input
                            type="number"
                            placeholder="Enter minimum rate"
                            className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                            value={minRate}
                            onChange={(e) => setMinRate(e.target.value)}
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
                          <select
                            className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                            value={dateRange}
                            onChange={(e) => setDateRange(e.target.value)}
                          >
                            <option value="">Any Date</option>
                            <option value="today">Today</option>
                            <option value="tomorrow">Tomorrow</option>
                            <option value="week">Next 7 Days</option>
                          </select>
                        </div>
                      </div>
                    )}
                  </form>
                </div>
                
                {/* Search Results */}
                {hasSearched && (
                  <div className="mt-8">
                    <div className="bg-white rounded-lg shadow-md overflow-hidden">
                      <div className="p-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                        <h3 className="text-lg font-semibold text-[#1a365d]">
                          {searchResults.length} Loads Found
                        </h3>
                        <div className="flex items-center space-x-2">
                          <span className="text-sm text-gray-600">Sort by:</span>
                          <select className="p-2 border border-gray-300 rounded text-sm">
                            <option>Rate (High to Low)</option>
                            <option>Rate (Low to High)</option>
                            <option>Distance (Shortest)</option>
                            <option>Date (Earliest)</option>
                          </select>
                        </div>
                      </div>
                      
                      {isSearching ? (
                        <div className="p-8 text-center">
                          <svg className="animate-spin h-10 w-10 mx-auto text-[#4a6fa5]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                          </svg>
                          <p className="mt-4 text-gray-600">Searching for loads...</p>
                        </div>
                      ) : searchResults.length === 0 ? (
                        <div className="p-8 text-center">
                          <div className="mx-auto h-16 w-16 text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                          </div>
                          <h3 className="mt-2 text-lg font-medium text-gray-900">No loads found</h3>
                          <p className="mt-1 text-gray-500">Try adjusting your search criteria or expanding your search area.</p>
                        </div>
                      ) : (
                        <div className="overflow-x-auto">
                          <table className="min-w-full divide-y divide-gray-200">
                            <thead className="bg-gray-50">
                              <tr>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Route</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Distance</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">$/Mile</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
                              </tr>
                            </thead>
                            <tbody className="bg-white divide-y divide-gray-200">
                              {searchResults.map((load) => (
                                <tr key={load.id} className="hover:bg-gray-50">
                                  <td className="px-6 py-4 whitespace-nowrap">
                                    <div className="flex flex-col">
                                      <div className="flex items-center text-sm font-medium text-gray-900">
                                        <MapPin className="h-4 w-4 text-[#4a6fa5] mr-1" />
                                        {load.origin}
                                      </div>
                                      <div className="flex items-center text-sm text-gray-500 mt-1">
                                        <MapPin className="h-4 w-4 text-[#ed8936] mr-1" />
                                        {load.destination}
                                      </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 ${
                                      load.loadType === 'van' ? 'bg-blue-100 text-blue-800' : 
                                      load.loadType === 'reefer' ? 'bg-green-100 text-green-800' : 
                                      'bg-yellow-100 text-yellow-800'
                                    }`}>
                                      {load.loadType.charAt(0).toUpperCase() + load.loadType.slice(1)}
                                    </span>
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {load.distance} mi
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {formatCurrency(load.rate)}
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    ${load.ratePerMile.toFixed(2)}
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {formatDate(load.pickupDate)}
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {load.company}
                                  </td>
                                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button className="text-[#4a6fa5] hover:text-[#1a365d]">
                                      Details
                                    </button>
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </section>
            
            {/* Features Section (only show if not logged in and no search results) */}
            {!isLoggedIn && !hasSearched && (
              <section className="py-16 bg-gray-50">
                <div className="container mx-auto px-4">
                  <h2 className="text-3xl font-bold text-center mb-12 text-[#1a365d]">Why Choose TruckersEdge</h2>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <Search className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Largest Load Board</h3>
                      <p className="text-gray-600">Access over 500,000 loads daily from thousands of trusted brokers and shippers nationwide.</p>
                    </div>
                    
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <BarChart2 className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Rate Analysis</h3>
                      <p className="text-gray-600">Make informed decisions with real-time rate data and historical pricing trends.</p>
                    </div>
                    
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <Package className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Load Tracking</h3>
                      <p className="text-gray-600">Streamline operations with real-time load tracking and automated status updates.</p>
                    </div>
                    
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <Shield className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Broker Credit Checks</h3>
                      <p className="text-gray-600">Verify broker reliability with instant credit checks and payment history.</p>
                    </div>
                    
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <Truck className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Fleet Management</h3>
                      <p className="text-gray-600">Manage your entire fleet with our comprehensive tools for dispatching and reporting.</p>
                    </div>
                    
                    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <Users className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold mb-3 text-[#1a365d]">24/7 Support</h3>
                      <p className="text-gray-600">Get help when you need it with our dedicated customer support team available around the clock.</p>
                    </div>
                  </div>
                </div>
              </section>
            )}
          </>
        )}
        
        {/* Dashboard Tab */}
        {activeTab === 'dashboard' && (
          <section className="py-8 bg-gray-50">
            <div className="container mx-auto px-4">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <div className="p-6 border-b border-gray-200">
                  <h2 className="text-2xl font-bold text-[#1a365d]">Driver Dashboard</h2>
                  <p className="text-gray-600">Welcome back, John! Here's an overview of your activity.</p>
                </div>
                
                <div className="p-6">
                  {/* Stats Overview */}
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm text-gray-500">Total Earnings (MTD)</p>
                          <p className="text-2xl font-bold text-[#1a365d]">$12,450</p>
                        </div>
                        <div className="bg-[#4a6fa5]/10 p-3 rounded-full">
                          <DollarSign className="h-6 w-6 text-[#4a6fa5]" />
                        </div>
                      </div>
                      <div className="mt-2 flex items-center text-sm">
                        <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                        <span className="text-green-500 font-medium">+8.2%</span>
                        <span className="text-gray-500 ml-1">from last month</span>
                      </div>
                    </div>
                    
                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm text-gray-500">Miles Driven (MTD)</p>
                          <p className="text-2xl font-bold text-[#1a365d]">3,245</p>
                        </div>
                        <div className="bg-[#ed8936]/10 p-3 rounded-full">
                          <Truck className="h-6 w-6 text-[#ed8936]" />
                        </div>
                      </div>
                      <div className="mt-2 flex items-center text-sm">
                        <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                        <span className="text-green-500 font-medium">+12.5%</span>
                        <span className="text-gray-500 ml-1">from last month</span>
                      </div>
                    </div>
                    
                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm text-gray-500">Loads Delivered</p>
                          <p className="text-2xl font-bold text-[#1a365d]">18</p>
                        </div>
                        <div className="bg-[#1a365d]/10 p-3 rounded-full">
                          <Package className="h-6 w-6 text-[#1a365d]" />
                        </div>
                      </div>
                      <div className="mt-2 flex items-center text-sm">
                        <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                        <span className="text-green-500 font-medium">+5.3%</span>
                        <span className="text-gray-500 ml-1">from last month</span>
                      </div>
                    </div>
                    
                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm text-gray-500">Average Rate/Mile</p>
                          <p className="text-2xl font-bold text-[#1a365d]">$3.84</p>
                        </div>
                        <div className="bg-green-100 p-3 rounded-full">
                          <BarChart2 className="h-6 w-6 text-green-600" />
                        </div>
                      </div>
                      <div className="mt-2 flex items-center text-sm">
                        <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                        <span className="text-green-500 font-medium">+2.1%</span>
                        <span className="text-gray-500 ml-1">from last month</span>
                      </div>
                    </div>
                  </div>
                  
                  {/* Recent and Upcoming Loads */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h3 className="text-lg font-semibold mb-4 text-[#1a365d]">Recent Loads</h3>
                      <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
                        <table className="min-w-full divide-y divide-gray-200">
                          <thead className="bg-gray-100">
                            <tr>
                              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Route</th>
                              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                            </tr>
                          </thead>
                          <tbody className="bg-white divide-y divide-gray-200">
                            {recentLoads.map((load) => (
                              <tr key={load.id} className="hover:bg-gray-50">
                                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                  #{load.id}
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                  {load.origin} → {load.destination}
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                  {load.date}
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap">
                                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                    load.status === 'Delivered' ? 'bg-green-100 text-green-800' : 
                                    'bg-blue-100 text-blue-800'
                                  }`}>
                                    {load.status}
                                  </span>
                                </td>
                                <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                  {load.amount}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                        <div className="p-3 bg-gray-50 border-t border-gray-200 text-center">
                          <button className="text-[#4a6fa5] hover:text-[#1a365d] text-sm font-medium">
                            View All Loads
                          </button>
                        </div>
                      </div>
                    </div>
                    
                    <div>
                      <h3 className="text-lg font-semibold mb-4 text-[#1a365d]">Upcoming Pickups</h3>
                      <div className="space-y-4">
                        {upcomingLoads.map((load) => (
                          <div key={load.id} className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div className="flex justify-between items-start">
                              <div>
                                <div className="flex items-center">
                                  <MapPin className="h-4 w-4 text-[#4a6fa5] mr-1" />
                                  <span className="text-sm font-medium">{load.origin}</span>
                                </div>
                                <div className="flex items-center mt-1">
                                  <MapPin className="h-4 w-4 text-[#ed8936] mr-1" />
                                  <span className="text-sm">{load.destination}</span>
                                </div>
                              </div>
                              <div className="text-right">
                                <div className="flex items-center text-sm text-gray-500">
                                  <Calendar className="h-4 w-4 mr-1" />
                                  {load.date}
                                </div>
                                <div className="flex items-center mt-1 text-sm text-gray-500">
                                  <Clock className="h-4 w-4 mr-1" />
                                  {load.time}
                                </div>
                              </div>
                            </div>
                            <div className="mt-3 pt-3 border-t border-gray-200 flex justify-between items-center">
                              <div className="text-sm text-gray-500">
                                Broker: {load.broker}
                              </div>
                              <button className="text-[#4a6fa5] hover:text-[#1a365d] text-sm font-medium">
                                View Details
                              </button>
                            </div>
                          </div>
                        ))}
                        
                        <div className="bg-white p-4 rounded-lg border border-dashed border-gray-300 text-center">
                          <button 
                            className="text-[#4a6fa5] hover:text-[#1a365d] font-medium flex items-center justify-center w-full"
                            onClick={() => {
                              setActiveTab('search');
                              setHasSearched(false);
                            }}
                          >
                            <Search className="h-4 w-4 mr-2" />
                            Find More Loads
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}
        
        {/* Solutions Tab */}
        {activeTab === 'solutions' && (
          <section className="py-12 bg-gray-50">
            <div className="container mx-auto px-4">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-[#1a365d] mb-4">Our Solutions</h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive tools designed to help carriers and brokers streamline operations and maximize profits.</p>
              </div>
              
              {/* Solutions Navigation */}
              <div className="flex flex-wrap justify-center mb-8 border-b border-gray-200">
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeSolutionTab === 'loadBoard' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveSolutionTab('loadBoard')}
                >
                  Load Board
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeSolutionTab === 'rateTools' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveSolutionTab('rateTools')}
                >
                  Rate Tools
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeSolutionTab === 'fleetManagement' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveSolutionTab('fleetManagement')}
                >
                  Fleet Management
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeSolutionTab === 'brokerTools' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveSolutionTab('brokerTools')}
                >
                  Broker Tools
                </button>
              </div>
              
              {/* Load Board Solution */}
              {activeSolutionTab === 'loadBoard' && (
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="md:flex">
                    <div className="md:w-1/2">
                      <img 
                        src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" 
                        alt="Load Board Interface" 
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="md:w-1/2 p-8">
                      <h3 className="text-2xl font-bold text-[#1a365d] mb-4">Industry's Leading Load Board</h3>
                      <p className="text-gray-600 mb-6">Access over 500,000 loads daily from thousands of trusted brokers and shippers nationwide. Our advanced search tools help you find the perfect loads for your business.</p>
                      
                      <div className="space-y-4">
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Search className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Advanced Search Filters</h4>
                            <p className="text-gray-600 text-sm">Filter loads by location, equipment type, rate, and more to find exactly what you need.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Bell className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Real-time Notifications</h4>
                            <p className="text-gray-600 text-sm">Get instant alerts when new loads matching your criteria are posted.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Shield className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Broker Credit Checks</h4>
                            <p className="text-gray-600 text-sm">Verify broker reliability with instant credit checks and payment history.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <MapPin className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Map-based Search</h4>
                            <p className="text-gray-600 text-sm">Visualize available loads on an interactive map to plan efficient routes.</p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="mt-8">
                        <button 
                          className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-6 py-3 rounded-md font-semibold transition-colors"
                          onClick={() => {
                            setActiveTab('search');
                            setHasSearched(false);
                          }}
                        >
                          Try Load Board
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Rate Tools Solution */}
              {activeSolutionTab === 'rateTools' && (
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="md:flex flex-row-reverse">
                    <div className="md:w-1/2">
                      <img 
                        src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" 
                        alt="Rate Analysis Dashboard" 
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="md:w-1/2 p-8">
                      <h3 className="text-2xl font-bold text-[#1a365d] mb-4">Comprehensive Rate Analysis</h3>
                      <p className="text-gray-600 mb-6">Make informed decisions with real-time rate data and historical pricing trends. Our rate tools help you negotiate better rates and maximize your profits.</p>
                      
                      <div className="space-y-4">
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <BarChart2 className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Lane Rate Analysis</h4>
                            <p className="text-gray-600 text-sm">View current and historical rates for specific lanes to identify the most profitable routes.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <TrendingUp className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Market Trends</h4>
                            <p className="text-gray-600 text-sm">Track rate trends by region, equipment type, and season to anticipate market changes.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <DollarSign className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Rate Calculator</h4>
                            <p className="text-gray-600 text-sm">Calculate profitability with our comprehensive rate calculator that factors in fuel, mileage, and other expenses.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <PieChart className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Custom Reports</h4>
                            <p className="text-gray-600 text-sm">Generate detailed reports on your rate performance and market position.</p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="mt-8">
                        <button className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-6 py-3 rounded-md font-semibold transition-colors">
                          Explore Rate Tools
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Fleet Management Solution */}
              {activeSolutionTab === 'fleetManagement' && (
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="md:flex">
                    <div className="md:w-1/2">
                      <img 
                        src="https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" 
                        alt="Fleet Management Dashboard" 
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="md:w-1/2 p-8">
                      <h3 className="text-2xl font-bold text-[#1a365d] mb-4">Powerful Fleet Management</h3>
                      <p className="text-gray-600 mb-6">Manage your entire fleet with our comprehensive tools for dispatching, tracking, and reporting. Streamline operations and increase efficiency across your business.</p>
                      
                      <div className="space-y-4">
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Truck className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Driver Management</h4>
                            <p className="text-gray-600 text-sm">Track driver availability, performance, and compliance from a single dashboard.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Package className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Load Assignment</h4>
                            <p className="text-gray-600 text-sm">Easily assign loads to drivers and track delivery status in real-time.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <FileText className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Document Management</h4>
                            <p className="text-gray-600 text-sm">Store and manage all your important documents, from BOLs to proof of delivery.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <BarChart2 className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Performance Analytics</h4>
                            <p className="text-gray-600 text-sm">Track key performance indicators for your fleet and identify areas for improvement.</p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="mt-8">
                        <button className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-6 py-3 rounded-md font-semibold transition-colors">
                          Discover Fleet Management
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Broker Tools Solution */}
              {activeSolutionTab === 'brokerTools' && (
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="md:flex flex-row-reverse">
                    <div className="md:w-1/2">
                      <img 
                        src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" 
                        alt="Broker Dashboard" 
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="md:w-1/2 p-8">
                      <h3 className="text-2xl font-bold text-[#1a365d] mb-4">Specialized Broker Solutions</h3>
                      <p className="text-gray-600 mb-6">Streamline your brokerage operations with tools designed specifically for freight brokers. Post loads, find carriers, and manage your business more efficiently.</p>
                      
                      <div className="space-y-4">
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Users className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Carrier Search</h4>
                            <p className="text-gray-600 text-sm">Find qualified carriers based on equipment type, location, and safety ratings.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Database className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Load Posting</h4>
                            <p className="text-gray-600 text-sm">Post loads to our marketplace and reach thousands of qualified carriers instantly.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Shield className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Carrier Verification</h4>
                            <p className="text-gray-600 text-sm">Verify carrier credentials, insurance, and safety records before booking.</p>
                          </div>
                        </div>
                        
                        <div className="flex items-start">
                          <div className="bg-[#4a6fa5]/10 p-2 rounded-full mr-4">
                            <Clipboard className="h-5 w-5 text-[#4a6fa5]" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-[#1a365d]">Contract Management</h4>
                            <p className="text-gray-600 text-sm">Generate, send, and track carrier agreements and rate confirmations.</p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="mt-8">
                        <button className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-6 py-3 rounded-md font-semibold transition-colors">
                          Explore Broker Tools
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </section>
        )}
        
        {/* Pricing Tab */}
        {activeTab === 'pricing' && (
          <section className="py-16 bg-gray-50">
            <div className="container mx-auto px-4">
              <h2 className="text-3xl font-bold text-center mb-4 text-[#1a365d]">Simple, Transparent Pricing</h2>
              <p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Choose the plan that fits your business needs. All plans include our core features with no hidden fees.</p>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:transform hover:scale-105">
                  <div className="bg-[#4a6fa5] p-6 text-white text-center">
                    <h3 className="text-2xl font-bold">Basic</h3>
                    <p className="text-4xl font-bold mt-2">$39<span className="text-sm font-normal">/month</span></p>
                  </div>
                  <div className="p-6">
                    <ul className="space-y-3">
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#4a6fa5] mr-2" />
                        <span>Access to load board</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#4a6fa5] mr-2" />
                        <span>Basic rate tools</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#4a6fa5] mr-2" />
                        <span>10 broker credit checks/month</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#4a6fa5] mr-2" />
                        <span>Email support</span>
                      </li>
                      <li className="flex items-center text-gray-400">
                        <X className="h-5 w-5 mr-2" />
                        <span>Load tracking</span>
                      </li>
                      <li className="flex items-center text-gray-400">
                        <X className="h-5 w-5 mr-2" />
                        <span>Fleet management</span>
                      </li>
                      <li className="flex items-center text-gray-400">
                        <X className="h-5 w-5 mr-2" />
                        <span>API integration</span>
                      </li>
                    </ul>
                    <button 
                      className="w-full mt-6 bg-[#4a6fa5] hover:bg-[#3d5d8a] text-white py-3 rounded-md font-semibold transition-colors"
                      onClick={() => setShowSignupModal(true)}
                    >
                      Get Started
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-xl overflow-hidden transform scale-105 transition-transform duration-300 hover:transform hover:scale-110">
                  <div className="bg-[#ed8936] p-6 text-white text-center">
                    <span className="inline-block px-3 py-1 bg-white text-[#ed8936] rounded-full text-sm font-semibold mb-2">Most Popular</span>
                    <h3 className="text-2xl font-bold">Professional</h3>
                    <p className="text-4xl font-bold mt-2">$79<span className="text-sm font-normal">/month</span></p>
                  </div>
                  <div className="p-6">
                    <ul className="space-y-3">
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#ed8936] mr-2" />
                        <span>Everything in Basic</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#ed8936] mr-2" />
                        <span>Advanced rate analysis</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#ed8936] mr-2" />
                        <span>Unlimited broker credit checks</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#ed8936] mr-2" />
                        <span>Load tracking</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#ed8936] mr-2" />
                        <span>Phone & email support</span>
                      </li>
                      <li className="flex items-center text-gray-400">
                        <X className="h-5 w-5 mr-2" />
                        <span>Fleet management</span>
                      </li>
                      <li className="flex items-center text-gray-400">
                        <X className="h-5 w-5 mr-2" />
                        <span>API integration</span>
                      </li>
                    </ul>
                    <button 
                      className="w-full mt-6 bg-[#ed8936] hover:bg-[#dd7d26] text-white py-3 rounded-md font-semibold transition-colors"
                      onClick={() => setShowSignupModal(true)}
                    >
                      Get Started
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:transform hover:scale-105">
                  <div className="bg-[#1a365d] p-6 text-white text-center">
                    <h3 className="text-2xl font-bold">Enterprise</h3>
                    <p className="text-4xl font-bold mt-2">$149<span className="text-sm font-normal">/month</span></p>
                  </div>
                  <div className="p-6">
                    <ul className="space-y-3">
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Everything in Professional</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Fleet management tools</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>API integration</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Custom reporting</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Dedicated account manager</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Priority support</span>
                      </li>
                      <li className="flex items-center">
                        <CheckCircle className="h-5 w-5 text-[#1a365d] mr-2" />
                        <span>Custom onboarding</span>
                      </li>
                    </ul>
                    <button className="w-full mt-6 bg-[#1a365d] hover:bg-[#2d4a7a] text-white py-3 rounded-md font-semibold transition-colors">
                      Contact Sales
                    </button>
                  </div>
                </div>
              </div>
              
              {/* FAQ Section */}
              <div className="mt-16">
                <h3 className="text-2xl font-bold text-center mb-8 text-[#1a365d]">Frequently Asked Questions</h3>
                
                <div className="max-w-3xl mx-auto space-y-4">
                  <div className="bg-white p-6 rounded-lg shadow-md">
                    <h4 className="font-bold text-[#1a365d] mb-2">Can I change plans later?</h4>
                    <p className="text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will take effect at the start of your next billing cycle.</p>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-md">
                    <h4 className="font-bold text-[#1a365d] mb-2">Is there a contract or commitment?</h4>
                    <p className="text-gray-600">No, all our plans are month-to-month with no long-term contracts. You can cancel anytime.</p>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-md">
                    <h4 className="font-bold text-[#1a365d] mb-2">Do you offer discounts for annual payments?</h4>
                    <p className="text-gray-600">Yes, we offer a 15% discount when you pay annually for any of our plans.</p>
                  </div>
                  
                  <div className="bg-white p-6 rounded-lg shadow-md">
                    <h4 className="font-bold text-[#1a365d] mb-2">What payment methods do you accept?</h4>
                    <p className="text-gray-600">We accept all major credit cards, ACH transfers, and PayPal.</p>
                  </div>
                </div>
              </div>
              
              {/* CTA Section */}
              <div className="mt-16 bg-[#1a365d] text-white p-8 rounded-lg shadow-lg text-center">
                <h3 className="text-2xl font-bold mb-4">Ready to get started?</h3>
                <p className="text-lg mb-6">Join thousands of carriers who trust TruckersEdge to find better loads and increase their profits.</p>
                <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                  <button 
                    className="bg-[#ed8936] hover:bg-[#dd7d26] px-8 py-4 rounded-md font-semibold text-lg transition-colors"
                    onClick={() => setShowSignupModal(true)}
                  >
                    Start Your Free Trial
                  </button>
                  <button className="border border-white hover:bg-white hover:text-[#1a365d] px-8 py-4 rounded-md font-semibold text-lg transition-colors">
                    Schedule a Demo
                  </button>
                </div>
              </div>
            </div>
          </section>
        )}
        
        {/* Resources Tab */}
        {activeTab === 'resources' && (
          <section className="py-12 bg-gray-50">
            <div className="container mx-auto px-4">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-[#1a365d] mb-4">Resources</h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">Stay informed with the latest industry insights, tips, and updates to help your business thrive.</p>
              </div>
              
              {/* Resources Navigation */}
              <div className="flex flex-wrap justify-center mb-8 border-b border-gray-200">
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeResourceTab === 'blog' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveResourceTab('blog')}
                >
                  Blog
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeResourceTab === 'marketUpdates' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveResourceTab('marketUpdates')}
                >
                  Market Updates
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeResourceTab === 'webinars' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveResourceTab('webinars')}
                >
                  Webinars
                </button>
                <button 
                  className={`px-6 py-3 font-medium text-lg ${activeResourceTab === 'downloads' ? 'text-[#ed8936] border-b-2 border-[#ed8936]' : 'text-gray-600 hover:text-[#1a365d]'}`}
                  onClick={() => setActiveResourceTab('downloads')}
                >
                  Downloads
                </button>
              </div>
              
              {/* Blog Content */}
              {activeResourceTab === 'blog' && (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  {blogPosts.map(post => (
                    <div key={post.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                      <img 
                        src={post.image} 
                        alt={post.title} 
                        className="w-full h-48 object-cover"
                      />
                      <div className="p-6">
                        <div className="flex items-center mb-2">
                          <span className="text-xs font-semibold text-[#4a6fa5] bg-[#4a6fa5]/10 px-2 py-1 rounded">
                            {post.category}
                          </span>
                          <span className="text-xs text-gray-500 ml-2">
                            {post.date}
                          </span>
                        </div>
                        <h3 className="text-xl font-bold text-[#1a365d] mb-2">{post.title}</h3>
                        <p className="text-gray-600 mb-4">{post.excerpt}</p>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-gray-500">By {post.author}</span>
                          <a href="#" className="text-[#4a6fa5] hover:text-[#1a365d] font-medium flex items-center">
                            Read More
                            <ChevronRight className="h-4 w-4 ml-1" />
                          </a>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
              
              {/* Market Updates Content */}
              {activeResourceTab === 'marketUpdates' && (
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="p-6 border-b border-gray-200">
                    <h3 className="text-2xl font-bold text-[#1a365d]">Market Updates</h3>
                    <p className="text-gray-600">Stay informed with the latest trends and insights from the freight market.</p>
                  </div>
                  
                  <div className="divide-y divide-gray-200">
                    {marketUpdates.map(update => (
                      <div key={update.id} className="p-6 hover:bg-gray-50">
                        <div className="flex items-center justify-between mb-2">
                          <h4 className="text-lg font-semibold text-[#1a365d]">{update.title}</h4>
                          <span className="text-sm text-gray-500">{update.date}</span>
                        </div>
                        <p className="text-gray-600 mb-3">{update.excerpt}</p>
                        <a href="#" className="text-[#4a6fa5] hover:text-[#1a365d] font-medium flex items-center">
                          Read Full Update
                          <ChevronRight className="h-4 w-4 ml-1" />
                        </a>
                      </div>
                    ))}
                  </div>
                  
                  <div className="p-6 bg-gray-50 border-t border-gray-200">
                    <div className="flex items-center justify-between">
                      <div>
                        <h4 className="font-semibold text-[#1a365d]">Get Weekly Market Updates</h4>
                        <p className="text-sm text-gray-600">Delivered straight to your inbox every Monday.</p>
                      </div>
                      <button className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors">
                        Subscribe
                      </button>
                    </div>
                  </div>
                </div>
              )}
              
              {/* Webinars Content */}
              {activeResourceTab === 'webinars' && (
                <div className="space-y-8">
                  <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                    <div className="p-6 border-b border-gray-200">
                      <h3 className="text-2xl font-bold text-[#1a365d]">Upcoming Webinars</h3>
                      <p className="text-gray-600">Register for our live webinars to learn from industry experts and improve your business.</p>
                    </div>
                    
                    <div className="divide-y divide-gray-200">
                      {webinars.filter(w => w.status === 'upcoming').map(webinar => (
                        <div key={webinar.id} className="p-6 hover:bg-gray-50">
                          <div className="md:flex md:justify-between md:items-center">
                            <div>
                              <h4 className="text-lg font-semibold text-[#1a365d] mb-2">{webinar.title}</h4>
                              <div className="flex items-center text-gray-600 mb-2">
                                <Calendar className="h-4 w-4 mr-2" />
                                <span>{webinar.date}</span>
                                <Clock className="h-4 w-4 ml-4 mr-2" />
                                <span>{webinar.time}</span>
                              </div>
                              <p className="text-gray-600">Presenter: {webinar.presenter}</p>
                            </div>
                            <button className="mt-4 md:mt-0 bg-[#ed8936] hover:bg-[#dd7d26] text-white px-4 py-2 rounded-md font-medium transition-colors">
                              Register Now
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                    <div className="p-6 border-b border-gray-200">
                      <h3 className="text-2xl font-bold text-[#1a365d]">Recorded Webinars</h3>
                      <p className="text-gray-600">Watch our past webinars on-demand at your convenience.</p>
                    </div>
                    
                    <div className="divide-y divide-gray-200">
                      {webinars.filter(w => w.status === 'recorded').map(webinar => (
                        <div key={webinar.id} className="p-6 hover:bg-gray-50">
                          <div className="md:flex md:justify-between md:items-center">
                            <div>
                              <h4 className="text-lg font-semibold text-[#1a365d] mb-2">{webinar.title}</h4>
                              <div className="flex items-center text-gray-600 mb-2">
                                <Calendar className="h-4 w-4 mr-2" />
                                <span>Originally aired: {webinar.date}</span>
                              </div>
                              <p className="text-gray-600">Presenter: {webinar.presenter}</p>
                            </div>
                            <a 
                              href={webinar.recordingUrl} 
                              className="mt-4 md:mt-0 inline-flex items-center bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors"
                            >
                              <Video className="h-4 w-4 mr-2" />
                              Watch Recording
                            </a>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
              
              {/* Downloads Content */}
              {activeResourceTab === 'downloads' && (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="bg-white rounded-lg shadow-md overflow-hidden">
                    <div className="p-6">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <FileText className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold text-[#1a365d] mb-2">2023 Freight Market Outlook</h3>
                      <p className="text-gray-600 mb-4">Comprehensive analysis of market trends, rate forecasts, and industry predictions for the coming year.</p>
                      <a 
                        href="#" 
                        className="inline-flex items-center bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors"
                      >
                        <Download className="h-4 w-4 mr-2" />
                        Download PDF
                      </a>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-md overflow-hidden">
                    <div className="p-6">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <FileText className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold text-[#1a365d] mb-2">Owner-Operator Success Guide</h3>
                      <p className="text-gray-600 mb-4">Essential tips and strategies for owner-operators to maximize profitability and grow their business.</p>
                      <a 
                        href="#" 
                        className="inline-flex items-center bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors"
                      >
                        <Download className="h-4 w-4 mr-2" />
                        Download PDF
                      </a>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-md overflow-hidden">
                    <div className="p-6">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <FileText className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold text-[#1a365d] mb-2">ELD Compliance Checklist</h3>
                      <p className="text-gray-600 mb-4">Step-by-step guide to ensure your fleet is fully compliant with the latest ELD regulations.</p>
                      <a 
                        href="#" 
                        className="inline-flex items-center bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors"
                      >
                        <Download className="h-4 w-4 mr-2" />
                        Download PDF
                      </a>
                    </div>
                  </div>
                  
                  <div className="bg-white rounded-lg shadow-md overflow-hidden">
                    <div className="p-6">
                      <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                        <FileText className="h-8 w-8 text-[#4a6fa5]" />
                      </div>
                      <h3 className="text-xl font-bold text-[#1a365d] mb-2">Fuel Efficiency Best Practices</h3>
                      <p className="text-gray-600 mb-4">Practical strategies to reduce fuel consumption and increase your margins in today's high-cost environment.</p>
                      <a 
                        href="#" 
                        className="inline-flex items-center bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors"
                      >
                        <Download className="h-4 w-4 mr-2" />
                        Download PDF
                      </a>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </section>
        )}
        
        {/* Support Tab */}
        {activeTab === 'support' && (
          <section className="py-12 bg-gray-50">
            <div className="container mx-auto px-4">
              <div className="text-center mb-12">
                <h2 className="text-3xl font-bold text-[#1a365d] mb-4">Support Center</h2>
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">We're here to help you get the most out of TruckersEdge. Find answers to common questions or contact our support team.</p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                <div className="bg-white p-6 rounded-lg shadow-md text-center">
                  <div className="bg-[#4a6fa5]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                    <HelpCircle className="h-10 w-10 text-[#4a6fa5]" />
                  </div>
                  <h3 className="text-xl font-bold text-[#1a365d] mb-2">Help Center</h3>
                  <p className="text-gray-600 mb-4">Browse our knowledge base for answers to common questions and step-by-step guides.</p>
                  <button className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors">
                    Visit Help Center
                  </button>
                </div>
                
                <div className="bg-white p-6 rounded-lg shadow-md text-center">
                  <div className="bg-[#ed8936]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                    <MessageCircle className="h-10 w-10 text-[#ed8936]" />
                  </div>
                  <h3 className="text-xl font-bold text-[#1a365d] mb-2">Live Chat</h3>
                  <p className="text-gray-600 mb-4">Chat with our support team in real-time for immediate assistance with your questions.</p>
                  <button className="bg-[#ed8936] hover:bg-[#dd7d26] text-white px-4 py-2 rounded-md font-medium transition-colors">
                    Start Chat
                  </button>
                </div>
                
                <div className="bg-white p-6 rounded-lg shadow-md text-center">
                  <div className="bg-[#1a365d]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                    <Phone className="h-10 w-10 text-[#1a365d]" />
                  </div>
                  <h3 className="text-xl font-bold text-[#1a365d] mb-2">Call Us</h3>
                  <p className="text-gray-600 mb-4">Speak directly with our customer support team for personalized assistance.</p>
                  <a 
                    href="tel:1-800-555-1234" 
                    className="bg-[#1a365d] hover:bg-[#2d4a7a] text-white px-4 py-2 rounded-md font-medium transition-colors inline-block"
                  >
                    1-800-555-1234
                  </a>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="p-6 border-b border-gray-200">
                    <h3 className="text-2xl font-bold text-[#1a365d]">Frequently Asked Questions</h3>
                  </div>
                  
                  <div className="divide-y divide-gray-200">
                    {faqs.map(faq => (
                      <div key={faq.id} className="p-6">
                        <h4 className="font-semibold text-[#1a365d] mb-2">{faq.question}</h4>
                        <p className="text-gray-600">{faq.answer}</p>
                      </div>
                    ))}
                  </div>
                  
                  <div className="p-6 bg-gray-50 border-t border-gray-200 text-center">
                    <button className="text-[#4a6fa5] hover:text-[#1a365d] font-medium">
                      View All FAQs
                    </button>
                  </div>
                </div>
                
                <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                  <div className="p-6 border-b border-gray-200">
                    <h3 className="text-2xl font-bold text-[#1a365d]">Contact Support</h3>
                    <p className="text-gray-600">Fill out the form below and our team will get back to you as soon as possible.</p>
                  </div>
                  
                  <div className="p-6">
                    <form onSubmit={handleSupportSubmit}>
                      <div className="mb-4">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                        <input
                          type="text"
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                          placeholder="What can we help you with?"
                          value={supportQuestion}
                          onChange={(e) => setSupportQuestion(e.target.value)}
                          required
                        />
                      </div>
                      
                      <div className="mb-4">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input
                          type="email"
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                          placeholder="your@email.com"
                          value={supportEmail}
                          onChange={(e) => setSupportEmail(e.target.value)}
                          required
                        />
                      </div>
                      
                      <div className="mb-4">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                        <textarea
                          className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent h-32"
                          placeholder="Please describe your issue in detail"
                          value={supportMessage}
                          onChange={(e) => setSupportMessage(e.target.value)}
                          required
                        ></textarea>
                      </div>
                      
                      <button
                        type="submit"
                        className="w-full bg-[#1a365d] hover:bg-[#2d4a7a] text-white py-3 rounded-md font-semibold transition-colors"
                      >
                        Submit Request
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}
        
        {/* CTA Section (only show if not logged in) */}
        {!isLoggedIn && !hasSearched && activeTab === 'search' && (
          <section className="py-16 bg-[#1a365d] text-white">
            <div className="container mx-auto px-4 text-center">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Grow Your Trucking Business?</h2>
              <p className="text-xl mb-8 max-w-2xl mx-auto">Join thousands of carriers who trust TruckersEdge to find better loads and increase their profits.</p>
              <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <button 
                  className="bg-[#ed8936] hover:bg-[#dd7d26] px-8 py-4 rounded-md font-semibold text-lg transition-colors"
                  onClick={() => setShowSignupModal(true)}
                >
                  Start Your Free Trial
                </button>
                <button className="border border-white hover:bg-white hover:text-[#1a365d] px-8 py-4 rounded-md font-semibold text-lg transition-colors">
                  Schedule a Demo
                </button>
              </div>
            </div>
          </section>
        )}
      </main>
      
      {/* Footer */}
      <footer className="bg-gray-800 text-gray-300 py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Truck className="h-8 w-8 text-[#ed8936]" />
                <span className="text-2xl font-bold text-white">TruckersEdge</span>
              </div>
              <p className="mb-4">The industry's leading load board and trucking software solution.</p>
              <div className="flex space-x-4">
                <a href="#" className="hover:text-[#ed8936]">
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                  </svg>
                </a>
                <a href="#" className="hover:text-[#ed8936]">
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                  </svg>
                </a>
                <a href="#" className="hover:text-[#ed8936]">
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
                  </svg>
                </a>
                <a href="#" className="hover:text-[#ed8936]">
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                  </svg>
                </a>
              </div>
            </div>
            
            <div>
              <h4 className="text-lg font-semibold mb-4 text-white">Solutions</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-[#ed8936] transition-colors">Load Board</a></li>
                <li><a href="#" className="hover:text-[#ed8936] transition-colors">Rate Tools</a><ant_artifact identifier="1" title="Updated TruckersEdgeWebsite Component">
import React, { useState, useEffect } from 'react';
    import { Search, Truck, Package, BarChart2, Users, Shield, Menu, X, ChevronRight, LogIn, MapPin, Calendar, DollarSign, Clock, Filter, User, Bell, Settings, LogOut, Home, Clipboard, TrendingUp, Phone, Mail, ExternalLink } from 'lucide-react';

    export default function TruckersEdgeWebsite() {
      // Navigation and UI state
      const [isMenuOpen, setIsMenuOpen] = useState(false);
      const [activeTab, setActiveTab] = useState('search');
      const [isLoggedIn, setIsLoggedIn] = useState(false);
      const [showLoginModal, setShowLoginModal] = useState(false);
      const [showSignupModal, setShowSignupModal] = useState(false);
      const [showFilters, setShowFilters] = useState(false);
      const [notifications, setNotifications] = useState([
        { id: 1, message: "New loads matching your criteria", read: false },
        { id: 2, message: "Rate alert: Rates increased on your route", read: false },
        { id: 3, message: "Payment received from broker XYZ", read: true }
      ]);
      const [showNotifications, setShowNotifications] = useState(false);
      
      // Form state
      const [searchTerm, setSearchTerm] = useState('');
      const [originLocation, setOriginLocation] = useState('');
      const [destinationLocation, setDestinationLocation] = useState('');
      const [loadType, setLoadType] = useState('');
      const [radius, setRadius] = useState(50);
      const [minRate, setMinRate] = useState('');
      const [dateRange, setDateRange] = useState('');
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [name, setName] = useState('');
      const [company, setCompany] = useState('');
      const [phone, setPhone] = useState('');
      const [rememberMe, setRememberMe] = useState(false);
      
      // Search results state
      const [searchResults, setSearchResults] = useState([]);
      const [isSearching, setIsSearching] = useState(false);
      const [hasSearched, setHasSearched] = useState(false);
      
      // Mock data for loads
      const mockLoads = [
        {
          id: 1,
          origin: "Chicago, IL",
          destination: "Indianapolis, IN",
          distance: 184,
          rate: 850,
          ratePerMile: 4.62,
          loadType: "van",
          weight: 22000,
          pickupDate: "2023-11-15",
          company: "ABC Logistics",
          contact: "555-123-4567",
          details: "Dry goods, no touch freight"
        },
        {
          id: 2,
          origin: "Atlanta, GA",
          destination: "Charlotte, NC",
          distance: 245,
          rate: 1100,
          ratePerMile: 4.49,
          loadType: "reefer",
          weight: 28000,
          pickupDate: "2023-11-16",
          company: "Fresh Foods Transport",
          contact: "555-987-6543",
          details: "Refrigerated goods, maintain at 34°F"
        },
        {
          id: 3,
          origin: "Dallas, TX",
          destination: "Houston, TX",
          distance: 239,
          rate: 950,
          ratePerMile: 3.97,
          loadType: "flatbed",
          weight: 32000,
          pickupDate: "2023-11-15",
          company: "Texas Haulers Inc",
          contact: "555-222-3333",
          details: "Construction materials, tarping required"
        },
        {
          id: 4,
          origin: "Los Angeles, CA",
          destination: "Phoenix, AZ",
          distance: 373,
          rate: 1650,
          ratePerMile: 4.42,
          loadType: "van",
          weight: 18000,
          pickupDate: "2023-11-17",
          company: "West Coast Shipping",
          contact: "555-444-5555",
          details: "Electronics, high value freight"
        },
        {
          id: 5,
          origin: "Seattle, WA",
          destination: "Portland, OR",
          distance: 174,
          rate: 780,
          ratePerMile: 4.48,
          loadType: "van",
          weight: 15000,
          pickupDate: "2023-11-16",
          company: "Northwest Carriers",
          contact: "555-777-8888",
          details: "General merchandise"
        },
        {
          id: 6,
          origin: "Miami, FL",
          destination: "Orlando, FL",
          distance: 236,
          rate: 920,
          ratePerMile: 3.90,
          loadType: "reefer",
          weight: 24000,
          pickupDate: "2023-11-18",
          company: "Florida Freight",
          contact: "555-999-0000",
          details: "Perishable goods, temperature controlled"
        },
        {
          id: 7,
          origin: "Denver, CO",
          destination: "Salt Lake City, UT",
          distance: 371,
          rate: 1580,
          ratePerMile: 4.26,
          loadType: "flatbed",
          weight: 35000,
          pickupDate: "2023-11-17",
          company: "Mountain Movers",
          contact: "555-111-2222",
          details: "Steel beams, chains required"
        },
        {
          id: 8,
          origin: "New York, NY",
          destination: "Boston, MA",
          distance: 215,
          rate: 1050,
          ratePerMile: 4.88,
          loadType: "van",
          weight: 17000,
          pickupDate: "2023-11-15",
          company: "East Coast Express",
          contact: "555-333-4444",
          details: "Retail goods, liftgate required"
        }
      ];
      
      // Dashboard data
      const recentLoads = [
        { id: 101, origin: "Memphis, TN", destination: "Nashville, TN", date: "11/12/23", status: "Delivered", amount: "$750" },
        { id: 102, origin: "Chicago, IL", destination: "Detroit, MI", date: "11/10/23", status: "In Transit", amount: "$920" },
        { id: 103, origin: "Atlanta, GA", destination: "Jacksonville, FL", date: "11/08/23", status: "Delivered", amount: "$1,100" }
      ];
      
      const upcomingLoads = [
        { id: 201, origin: "Phoenix, AZ", destination: "Las Vegas, NV", date: "11/16/23", time: "08:00 AM", broker: "Southwest Logistics" },
        { id: 202, origin: "Seattle, WA", destination: "Spokane, WA", date: "11/18/23", time: "10:30 AM", broker: "Northwest Carriers" }
      ];
      
      // Handle search submission
      const handleSearch = (e) => {
        e.preventDefault();
        setIsSearching(true);
        setHasSearched(true);
        
        // Simulate API call with timeout
        setTimeout(() => {
          // Filter mock data based on search criteria
          let results = [...mockLoads];
          
          if (originLocation) {
            results = results.filter(load => 
              load.origin.toLowerCase().includes(originLocation.toLowerCase())
            );
          }
          
          if (destinationLocation) {
            results = results.filter(load => 
              load.destination.toLowerCase().includes(destinationLocation.toLowerCase())
            );
          }
          
          if (loadType) {
            results = results.filter(load => load.loadType === loadType);
          }
          
          if (minRate) {
            results = results.filter(load => load.rate >= parseInt(minRate));
          }
          
          setSearchResults(results);
          setIsSearching(false);
          
          // Save search to API
          saveSearchToAPI(originLocation, destinationLocation, loadType);
        }, 1000);
      };
      
      // Simulate API calls
      const saveSearchToAPI = async (origin, destination, type) => {
        try {
          const response = await fetch(`https://www.sitebrew.ai/api/LVavgi/searches`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              document: {
                origin,
                destination,
                type,
                timestamp: new Date().toISOString()
              }
            }),
          });
          
          console.log('Search saved successfully');
        } catch (error) {
          console.error('Error saving search:', error);
        }
      };
      
      const handleLogin = (e) => {
        e.preventDefault();
        // Simulate login process
        setIsLoggedIn(true);
        setShowLoginModal(false);
        // Clear form
        setEmail('');
        setPassword('');
      };
      
      const handleSignup = (e) => {
        e.preventDefault();
        // Simulate signup process
        setIsLoggedIn(true);
        setShowSignupModal(false);
        // Clear form
        setName('');
        setEmail('');
        setCompany('');
        setPhone('');
        setPassword('');
      };
      
      const handleLogout = () => {
        setIsLoggedIn(false);
        setActiveTab('search');
      };
      
      const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
      };
      
      // Format currency
      const formatCurrency = (amount) => {
        return new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
          minimumFractionDigits: 0
        }).format(amount);
      };
      
      // Format date
      const formatDate = (dateString) => {
        const options = { year: 'numeric', month: 'short', day: 'numeric' };
        return new Date(dateString).toLocaleDateString('en-US', options);
      };
      
      return (
        <div className="min-h-screen bg-gray-50 font-sans">
          {/* Header */}
          <header className="bg-[#1a365d] text-white shadow-md sticky top-0 z-50">
            <div className="container mx-auto px-4 py-3">
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-2">
                  <Truck className="h-8 w-8 text-[#ed8936]" />
                  <span className="text-2xl font-bold">TruckersEdge</span>
                </div>
                
                {/* Desktop Navigation */}
                <nav className="hidden md:flex space-x-8">
                  <a 
                    href="#" 
                    className={`hover:text-[#ed8936] transition-colors ${activeTab === 'search' ? 'text-[#ed8936]' : ''}`}
                    onClick={() => setActiveTab('search')}
                  >
                    Load Board
                  </a>
                  {isLoggedIn && (
                    <a 
                      href="#" 
                      className={`hover:text-[#ed8936] transition-colors ${activeTab === 'dashboard' ? 'text-[#ed8936]' : ''}`}
                      onClick={() => setActiveTab('dashboard')}
                    >
                      Dashboard
                    </a>
                  )}
                  <a href="#" className="hover:text-[#ed8936] transition-colors">Solutions</a>
                  <a href="#" className="hover:text-[#ed8936] transition-colors">Pricing</a>
                  <a href="#" className="hover:text-[#ed8936] transition-colors">Resources</a>
                </nav>
                
                <div className="hidden md:flex items-center space-x-4">
                  {isLoggedIn ? (
                    <div className="flex items-center space-x-4">
                      <div className="relative">
                        <button 
                          className="p-2 rounded-full hover:bg-[#2d4a7a] transition-colors relative"
                          onClick={() => setShowNotifications(!showNotifications)}
                        >
                          <Bell className="h-5 w-5" />
                          {notifications.filter(n => !n.read).length > 0 && (
                            <span className="absolute top-0 right-0 bg-[#ed8936] text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
                              {notifications.filter(n => !n.read).length}
                            </span>
                          )}
                        </button>
                        
                        {showNotifications && (
                          <div className="absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg overflow-hidden z-20 text-gray-800">
                            <div className="p-3 border-b border-gray-200">
                              <h3 className="font-semibold">Notifications</h3>
                            </div>
                            <div className="max-h-80 overflow-y-auto">
                              {notifications.length > 0 ? (
                                notifications.map(notification => (
                                  <div 
                                    key={notification.id} 
                                    className={`p-3 border-b border-gray-100 hover:bg-gray-50 ${!notification.read ? 'bg-blue-50' : ''}`}
                                  >
                                    <p className="text-sm">{notification.message}</p>
                                    <p className="text-xs text-gray-500 mt-1">2 hours ago</p>
                                  </div>
                                ))
                              ) : (
                                <p className="p-3 text-center text-gray-500">No notifications</p>
                              )}
                            </div>
                            <div className="p-2 text-center border-t border-gray-200">
                              <button className="text-sm text-[#4a6fa5] hover:text-[#1a365d]">
                                Mark all as read
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                      
                      <div className="relative group">
                        <button className="flex items-center space-x-2 p-2 rounded hover:bg-[#2d4a7a] transition-colors">
                          <div className="h-8 w-8 rounded-full bg-[#4a6fa5] flex items-center justify-center text-white">
                            <User className="h-5 w-5" />
                          </div>
                          <span>John D.</span>
                        </button>
                        
                        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg overflow-hidden z-20 hidden group-hover:block text-gray-800">
                          <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                            <User className="h-4 w-4 inline mr-2" />
                            Profile
                          </a>
                          <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                            <Settings className="h-4 w-4 inline mr-2" />
                            Settings
                          </a>
                          <a href="#" className="block px-4 py-2 text-sm hover:bg-gray-100">
                            <Shield className="h-4 w-4 inline mr-2" />
                            Subscription
                          </a>
                          <div className="border-t border-gray-200"></div>
                          <button 
                            onClick={handleLogout}
                            className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100"
                          >
                            <LogOut className="h-4 w-4 inline mr-2" />
                            Logout
                          </button>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <>
                      <button 
                        className="px-4 py-2 rounded hover:bg-[#4a6fa5] transition-colors"
                        onClick={() => setShowLoginModal(true)}
                      >
                        <LogIn className="h-5 w-5 inline mr-1" />
                        Login
                      </button>
                      <button 
                        className="bg-[#ed8936] hover:bg-[#dd7d26] px-4 py-2 rounded transition-colors"
                        onClick={() => setShowSignupModal(true)}
                      >
                        Sign Up
                      </button>
                    </>
                  )}
                </div>
                
                {/* Mobile menu button */}
                <button className="md:hidden" onClick={toggleMenu}>
                  {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                </button>
              </div>
              
              {/* Mobile Navigation */}
              {isMenuOpen && (
                <nav className="md:hidden pt-4 pb-2 space-y-3">
                  <a 
                    href="#" 
                    className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'search' ? 'text-[#ed8936]' : ''}`}
                    onClick={() => {
                      setActiveTab('search');
                      setIsMenuOpen(false);
                    }}
                  >
                    Load Board
                  </a>
                  {isLoggedIn && (
                    <a 
                      href="#" 
                      className={`block py-2 hover:text-[#ed8936] transition-colors ${activeTab === 'dashboard' ? 'text-[#ed8936]' : ''}`}
                      onClick={() => {
                        setActiveTab('dashboard');
                        setIsMenuOpen(false);
                      }}
                    >
                      Dashboard
                    </a>
                  )}
                  <a href="#" className="block py-2 hover:text-[#ed8936] transition-colors">Solutions</a>
                  <a href="#" className="block py-2 hover:text-[#ed8936] transition-colors">Pricing</a>
                  <a href="#" className="block py-2 hover:text-[#ed8936] transition-colors">Resources</a>
                  <div className="pt-2 flex flex-col space-y-2">
                    {isLoggedIn ? (
                      <>
                        <div className="flex items-center space-x-2 py-2">
                          <div className="h-8 w-8 rounded-full bg-[#4a6fa5] flex items-center justify-center text-white">
                            <User className="h-5 w-5" />
                          </div>
                          <span>John Doe</span>
                        </div>
                        <button 
                          onClick={handleLogout}
                          className="px-4 py-2 rounded border border-white hover:bg-[#4a6fa5] transition-colors"
                        >
                          <LogOut className="h-5 w-5 inline mr-1" />
                          Logout
                        </button>
                      </>
                    ) : (
                      <>
                        <button 
                          className="px-4 py-2 rounded border border-white hover:bg-[#4a6fa5] transition-colors"
                          onClick={() => {
                            setShowLoginModal(true);
                            setIsMenuOpen(false);
                          }}
                        >
                          <LogIn className="h-5 w-5 inline mr-1" />
                          Login
                        </button>
                        <button 
                          className="bg-[#ed8936] hover:bg-[#dd7d26] px-4 py-2 rounded transition-colors"
                          onClick={() => {
                            setShowSignupModal(true);
                            setIsMenuOpen(false);
                          }}
                        >
                          Sign Up
                        </button>
                      </>
                    )}
                  </div>
                </nav>
              )}
            </div>
          </header>
          
          {/* Main Content */}
          <main>
            {activeTab === 'search' ? (
              <>
                {/* Hero Section (only show if not logged in and no search results) */}
                {!isLoggedIn && !hasSearched && (
                  <section className="bg-[#1a365d] text-white py-16">
                    <div className="container mx-auto px-4">
                      <div className="flex flex-col md:flex-row items-center">
                        <div className="md:w-1/2 mb-8 md:mb-0">
                          <h1 className="text-4xl md:text-5xl font-bold mb-4">Find Loads and Grow Your Business</h1>
                          <p className="text-xl mb-8">Access thousands of loads daily and streamline your trucking operations with TruckersEdge.</p>
                          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                            <button 
                              className="bg-[#ed8936] hover:bg-[#dd7d26] px-6 py-3 rounded-md font-semibold transition-colors"
                              onClick={() => setShowSignupModal(true)}
                            >
                              Start Free Trial
                            </button>
                            <button className="border border-white hover:bg-white hover:text-[#1a365d] px-6 py-3 rounded-md font-semibold transition-colors">
                              View Demo
                            </button>
                          </div>
                        </div>
                        <div className="md:w-1/2">
                          <img 
                            src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                            alt="Truck on highway" 
                            className="rounded-lg shadow-xl"
                          />
                        </div>
                      </div>
                    </div>
                  </section>
                )}
                
                {/* Load Search Section */}
                <section className={`py-12 ${hasSearched ? 'bg-gray-50' : 'bg-white'}`}>
                  <div className="container mx-auto px-4">
                    <div className={`bg-white rounded-lg shadow-lg p-6 ${!isLoggedIn && !hasSearched ? '-mt-20 relative z-10' : ''}`}>
                      <h2 className="text-2xl font-bold mb-6 text-center text-[#1a365d]">Find Available Loads</h2>
                      <form onSubmit={handleSearch}>
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Origin</label>
                            <input
                              type="text"
                              placeholder="City, State, or ZIP"
                              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                              value={originLocation}
                              onChange={(e) => setOriginLocation(e.target.value)}
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Destination</label>
                            <input
                              type="text"
                              placeholder="City, State, or ZIP"
                              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                              value={destinationLocation}
                              onChange={(e) => setDestinationLocation(e.target.value)}
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Load Type</label>
                            <select
                              className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                              value={loadType}
                              onChange={(e) => setLoadType(e.target.value)}
                            >
                              <option value="">All Load Types</option>
                              <option value="van">Van</option>
                              <option value="reefer">Reefer</option>
                              <option value="flatbed">Flatbed</option>
                              <option value="specialized">Specialized</option>
                            </select>
                          </div>
                          <div className="flex items-end">
                            <button 
                              type="submit"
                              className="w-full bg-[#1a365d] hover:bg-[#2d4a7a] text-white p-3 rounded-md font-semibold transition-colors flex items-center justify-center"
                              disabled={isSearching}
                            >
                              {isSearching ? (
                                <svg className="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                              ) : (
                                <Search className="h-5 w-5 mr-2" />
                              )}
                              {isSearching ? 'Searching...' : 'Search Loads'}
                            </button>
                          </div>
                        </div>
                        
                        <div className="flex items-center justify-between">
                          <button 
                            type="button"
                            className="text-[#4a6fa5] hover:text-[#1a365d] flex items-center text-sm"
                            onClick={() => setShowFilters(!showFilters)}
                          >
                            <Filter className="h-4 w-4 mr-1" />
                            {showFilters ? 'Hide Filters' : 'Advanced Filters'}
                          </button>
                          
                          {isLoggedIn && (
                            <button 
                              type="button"
                              className="text-[#4a6fa5] hover:text-[#1a365d] text-sm"
                            >
                              Save this search
                            </button>
                          )}
                        </div>
                        
                        {showFilters && (
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 pt-4 border-t border-gray-200">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Radius (miles)</label>
                              <select
                                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                                value={radius}
                                onChange={(e) => setRadius(e.target.value)}
                              >
                                <option value="25">25 miles</option>
                                <option value="50">50 miles</option>
                                <option value="100">100 miles</option>
                                <option value="200">200 miles</option>
                              </select>
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Minimum Rate ($)</label>
                              <input
                                type="number"
                                placeholder="Enter minimum rate"
                                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                                value={minRate}
                                onChange={(e) => setMinRate(e.target.value)}
                              />
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
                              <select
                                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                                value={dateRange}
                                onChange={(e) => setDateRange(e.target.value)}
                              >
                                <option value="">Any Date</option>
                                <option value="today">Today</option>
                                <option value="tomorrow">Tomorrow</option>
                                <option value="week">Next 7 Days</option>
                              </select>
                            </div>
                          </div>
                        )}
                      </form>
                    </div>
                    
                    {/* Search Results */}
                    {hasSearched && (
                      <div className="mt-8">
                        <div className="bg-white rounded-lg shadow-md overflow-hidden">
                          <div className="p-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                            <h3 className="text-lg font-semibold text-[#1a365d]">
                              {searchResults.length} Loads Found
                            </h3>
                            <div className="flex items-center space-x-2">
                              <span className="text-sm text-gray-600">Sort by:</span>
                              <select className="p-2 border border-gray-300 rounded text-sm">
                                <option>Rate (High to Low)</option>
                                <option>Rate (Low to High)</option>
                                <option>Distance (Shortest)</option>
                                <option>Date (Earliest)</option>
                              </select>
                            </div>
                          </div>
                          
                          {isSearching ? (
                            <div className="p-8 text-center">
                              <svg className="animate-spin h-10 w-10 mx-auto text-[#4a6fa5]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                              </svg>
                              <p className="mt-4 text-gray-600">Searching for loads...</p>
                            </div>
                          ) : searchResults.length === 0 ? (
                            <div className="p-8 text-center">
                              <div className="mx-auto h-16 w-16 text-gray-400">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                              </div>
                              <h3 className="mt-2 text-lg font-medium text-gray-900">No loads found</h3>
                              <p className="mt-1 text-gray-500">Try adjusting your search criteria or expanding your search area.</p>
                            </div>
                          ) : (
                            <div className="overflow-x-auto">
                              <table className="min-w-full divide-y divide-gray-200">
                                <thead className="bg-gray-50">
                                  <tr>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Route</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Distance</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">$/Mile</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
                                  </tr>
                                </thead>
                                <tbody className="bg-white divide-y divide-gray-200">
                                  {searchResults.map((load) => (
                                    <tr key={load.id} className="hover:bg-gray-50">
                                      <td className="px-6 py-4 whitespace-nowrap">
                                        <div className="flex flex-col">
                                          <div className="flex items-center text-sm font-medium text-gray-900">
                                            <MapPin className="h-4 w-4 text-[#4a6fa5] mr-1" />
                                            {load.origin}
                                          </div>
                                          <div className="flex items-center text-sm text-gray-500 mt-1">
                                            <MapPin className="h-4 w-4 text-[#ed8936] mr-1" />
                                            {load.destination}
                                          </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 ${
                                          load.loadType === 'van' ? 'bg-blue-100 text-blue-800' : 
                                          load.loadType === 'reefer' ? 'bg-green-100 text-green-800' : 
                                          'bg-yellow-100 text-yellow-800'
                                        }`}>
                                          {load.loadType.charAt(0).toUpperCase() + load.loadType.slice(1)}
                                        </span>
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {load.distance} mi
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {formatCurrency(load.rate)}
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        ${load.ratePerMile.toFixed(2)}
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {formatDate(load.pickupDate)}
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {load.company}
                                      </td>
                                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <button className="text-[#4a6fa5] hover:text-[#1a365d]">
                                          Details
                                        </button>
                                      </td>
                                    </tr>
                                  ))}
                                </tbody>
                              </table>
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                </section>
                
                {/* Features Section (only show if not logged in and no search results) */}
                {!isLoggedIn && !hasSearched && (
                  <section className="py-16 bg-gray-50">
                    <div className="container mx-auto px-4">
                      <h2 className="text-3xl font-bold text-center mb-12 text-[#1a365d]">Why Choose TruckersEdge</h2>
                      
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <Search className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Largest Load Board</h3>
                          <p className="text-gray-600">Access over 500,000 loads daily from thousands of trusted brokers and shippers nationwide.</p>
                        </div>
                        
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <BarChart2 className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Rate Analysis</h3>
                          <p className="text-gray-600">Make informed decisions with real-time rate data and historical pricing trends.</p>
                        </div>
                        
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <Package className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Load Tracking</h3>
                          <p className="text-gray-600">Streamline operations with real-time load tracking and automated status updates.</p>
                        </div>
                        
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <Shield className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Broker Credit Checks</h3>
                          <p className="text-gray-600">Verify broker reliability with instant credit checks and payment history.</p>
                        </div>
                        
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <Truck className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">Fleet Management</h3>
                          <p className="text-gray-600">Manage your entire fleet with our comprehensive tools for dispatching and reporting.</p>
                        </div>
                        
                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                          <div className="bg-[#4a6fa5]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                            <Users className="h-8 w-8 text-[#4a6fa5]" />
                          </div>
                          <h3 className="text-xl font-bold mb-3 text-[#1a365d]">24/7 Support</h3>
                          <p className="text-gray-600">Get help when you need it with our dedicated customer support team available around the clock.</p>
                        </div>
                      </div>
                    </div>
                  </section>
                )}
              </>
            ) : (
              /* Dashboard View */
              <section className="py-8 bg-gray-50">
                <div className="container mx-auto px-4">
                  <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                    <div className="p-6 border-b border-gray-200">
                      <h2 className="text-2xl font-bold text-[#1a365d]">Driver Dashboard</h2>
                      <p className="text-gray-600">Welcome back, John! Here's an overview of your activity.</p>
                    </div>
                    
                    <div className="p-6">
                      {/* Stats Overview */}
                      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                        <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm text-gray-500">Total Earnings (MTD)</p>
                              <p className="text-2xl font-bold text-[#1a365d]">$12,450</p>
                            </div>
                            <div className="bg-[#4a6fa5]/10 p-3 rounded-full">
                              <DollarSign className="h-6 w-6 text-[#4a6fa5]" />
                            </div>
                          </div>
                          <div className="mt-2 flex items-center text-sm">
                            <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                            <span className="text-green-500 font-medium">+8.2%</span>
                            <span className="text-gray-500 ml-1">from last month</span>
                          </div>
                        </div>
                        
                        <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm text-gray-500">Miles Driven (MTD)</p>
                              <p className="text-2xl font-bold text-[#1a365d]">3,245</p>
                            </div>
                            <div className="bg-[#ed8936]/10 p-3 rounded-full">
                              <Truck className="h-6 w-6 text-[#ed8936]" />
                            </div>
                          </div>
                          <div className="mt-2 flex items-center text-sm">
                            <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                            <span className="text-green-500 font-medium">+12.5%</span>
                            <span className="text-gray-500 ml-1">from last month</span>
                          </div>
                        </div>
                        
                        <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm text-gray-500">Loads Delivered</p>
                              <p className="text-2xl font-bold text-[#1a365d]">18</p>
                            </div>
                            <div className="bg-[#1a365d]/10 p-3 rounded-full">
                              <Package className="h-6 w-6 text-[#1a365d]" />
                            </div>
                          </div>
                          <div className="mt-2 flex items-center text-sm">
                            <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                            <span className="text-green-500 font-medium">+5.3%</span>
                            <span className="text-gray-500 ml-1">from last month</span>
                          </div>
                        </div>
                        
                        <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                          <div className="flex items-center justify-between">
                            <div>
                              <p className="text-sm text-gray-500">Average Rate/Mile</p>
                              <p className="text-2xl font-bold text-[#1a365d]">$3.84</p>
                            </div>
                            <div className="bg-green-100 p-3 rounded-full">
                              <BarChart2 className="h-6 w-6 text-green-600" />
                            </div>
                          </div>
                          <div className="mt-2 flex items-center text-sm">
                            <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                            <span className="text-green-500 font-medium">+2.1%</span>
                            <span className="text-gray-500 ml-1">from last month</span>
                          </div>
                        </div>
                      </div>
                      
                      {/* Recent and Upcoming Loads */}
                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                          <h3 className="text-lg font-semibold mb-4 text-[#1a365d]">Recent Loads</h3>
                          <div className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
                            <table className="min-w-full divide-y divide-gray-200">
                              <thead className="bg-gray-100">
                                <tr>
                                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Route</th>
                                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                                </tr>
                              </thead>
                              <tbody className="bg-white divide-y divide-gray-200">
                                {recentLoads.map((load) => (
                                  <tr key={load.id} className="hover:bg-gray-50">
                                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                      #{load.id}
                                    </td>
                                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                      {load.origin} → {load.destination}
                                    </td>
                                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                      {load.date}
                                    </td>
                                    <td className="px-4 py-3 whitespace-nowrap">
                                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                        load.status === 'Delivered' ? 'bg-green-100 text-green-800' : 
                                        'bg-blue-100 text-blue-800'
                                      }`}>
                                        {load.status}
                                      </span>
                                    </td>
                                    <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
                                      {load.amount}
                                    </td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                            <div className="p-3 bg-gray-50 border-t border-gray-200 text-center">
                              <button className="text-[#4a6fa5] hover:text-[#1a365d] text-sm font-medium">
                                View All Loads
                              </button>
                            </div>
                          </div>
                        </div>
                        
                        <div>
                          <h3 className="text-lg font-semibold mb-4 text-[#1a365d]">Upcoming Pickups</h3>
                          <div className="space-y-4">
                            {upcomingLoads.map((load) => (
                              <div key={load.id} className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                                <div className="flex justify-between items-start">
                                  <div>
                                    <div className="flex items-center">
                                      <MapPin className="h-4 w-4 text-[#4a6fa5] mr-1" />
                                      <span className="text-sm font-medium">{load.origin}</span>
                                    </div>
                                    <div className="flex items-center mt-1">
                                      <MapPin className="h-4 w-4 text-[#ed8936] mr-1" />
                                      <span className="text-sm">{load.destination}</span>
                                    </div>
                                  </div>
                                  <div className="text-right">
                                    <div className="flex items-center text-sm text-gray-500">
                                      <Calendar className="h-4 w-4 mr-1" />
                                      {load.date}
                                    </div>
                                    <div className="flex items-center mt-1 text-sm text-gray-500">
                                      <Clock className="h-4 w-4 mr-1" />
                                      {load.time}
                                    </div>
                                  </div>
                                </div>
                                <div className="mt-3 pt-3 border-t border-gray-200 flex justify-between items-center">
                                  <div className="text-sm text-gray-500">
                                    Broker: {load.broker}
                                  </div>
                                  <button className="text-[#4a6fa5] hover:text-[#1a365d] text-sm font-medium">
                                    View Details
                                  </button>
                                </div>
                              </div>
                            ))}
                            
                            <div className="bg-white p-4 rounded-lg border border-dashed border-gray-300 text-center">
                              <button className="text-[#4a6fa5] hover:text-[#1a365d] font-medium flex items-center justify-center w-full">
                                <Search className="h-4 w-4 mr-2" />
                                Find More Loads
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            )}
            
            {/* CTA Section (only show if not logged in) */}
            {!isLoggedIn && !hasSearched && (
              <section className="py-16 bg-[#1a365d] text-white">
                <div className="container mx-auto px-4 text-center">
                  <h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Grow Your Trucking Business?</h2>
                  <p className="text-xl mb-8 max-w-2xl mx-auto">Join thousands of carriers who trust TruckersEdge to find better loads and increase their profits.</p>
                  <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <button 
                      className="bg-[#ed8936] hover:bg-[#dd7d26] px-8 py-4 rounded-md font-semibold text-lg transition-colors"
                      onClick={() => setShowSignupModal(true)}
                    >
                      Start Your Free Trial
                    </button>
                    <button className="border border-white hover:bg-white hover:text-[#1a365d] px-8 py-4 rounded-md font-semibold text-lg transition-colors">
                      Schedule a Demo
                    </button>
                  </div>
                </div>
              </section>
            )}
          </main>
          
          {/* Footer */}
          <footer className="bg-gray-800 text-gray-300 py-12">
            <div className="container mx-auto px-4">
              <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                  <div className="flex items-center space-x-2 mb-4">
                    <Truck className="h-8 w-8 text-[#ed8936]" />
                    <span className="text-2xl font-bold text-white">TruckersEdge</span>
                  </div>
                  <p className="mb-4">The industry's leading load board and trucking software solution.</p>
                  <div className="flex space-x-4">
                    <a href="#" className="hover:text-[#ed8936]">
                      <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
                      </svg>
                    </a>
                    <a href="#" className="hover:text-[#ed8936]">
                      <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                      </svg>
                    </a>
                    <a href="#" className="hover:text-[#ed8936]">
                      <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
                      </svg>
                    </a>
                    <a href="#" className="hover:text-[#ed8936]">
                      <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                      </svg>
                    </a>
                  </div>
                </div>
                
                <div>
                  <h4 className="text-lg font-semibold mb-4 text-white">Solutions</h4>
                  <ul className="space-y-2">
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Load Board</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Rate Tools</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Load Tracking</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Fleet Management</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Broker Credit Checks</a></li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="text-lg font-semibold mb-4 text-white">Resources</h4>
                  <ul className="space-y-2">
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Blog</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Market Updates</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Tutorials</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Webinars</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Help Center</a></li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="text-lg font-semibold mb-4 text-white">Company</h4>
                  <ul className="space-y-2">
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">About Us</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Careers</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Contact</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Privacy Policy</a></li>
                    <li><a href="#" className="hover:text-[#ed8936] transition-colors">Terms of Service</a></li>
                  </ul>
                </div>
              </div>
              
              <div className="border-t border-gray-700 mt-12 pt-8 text-center">
                <p>&copy; {new Date().getFullYear()} TruckersEdge. All rights reserved.</p>
              </div>
            </div>
          </footer>
          
          {/* Login Modal */}
          {showLoginModal && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
              <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div className="p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-[#1a365d]">Login to TruckersEdge</h3>
                    <button 
                      onClick={() => setShowLoginModal(false)}
                      className="text-gray-400 hover:text-gray-500"
                    >
                      <X className="h-5 w-5" />
                    </button>
                  </div>
                  
                  <form onSubmit={handleLogin}>
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                      <input
                        type="email"
                        required
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="your@email.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                      />
                    </div>
                    
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                      <input
                        type="password"
                        required
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="••••••••"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                      />
                    </div>
                    
                    <div className="flex items-center justify-between mb-6">
                      <div className="flex items-center">
                        <input
                          type="checkbox"
                          id="remember-me"
                          className="h-4 w-4 text-[#4a6fa5] focus:ring-[#4a6fa5] border-gray-300 rounded"
                          checked={rememberMe}
                          onChange={(e) => setRememberMe(e.target.checked)}
                        />
                        <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
                          Remember me
                        </label>
                      </div>
                      
                      <a href="#" className="text-sm text-[#4a6fa5] hover:text-[#1a365d]">
                        Forgot password?
                      </a>
                    </div>
                    
                    <button
                      type="submit"
                      className="w-full bg-[#1a365d] hover:bg-[#2d4a7a] text-white py-3 rounded-md font-semibold transition-colors"
                    >
                      Login
                    </button>
                  </form>
                  
                  <div className="mt-6 text-center">
                    <p className="text-sm text-gray-600">
                      Don't have an account?{' '}
                      <button 
                        className="text-[#4a6fa5] hover:text-[#1a365d] font-medium"
                        onClick={() => {
                          setShowLoginModal(false);
                          setShowSignupModal(true);
                        }}
                      >
                        Sign up
                      </button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {/* Signup Modal */}
          {showSignupModal && (
            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
              <div className="bg-white rounded-lg shadow-xl max-w-md w-full">
                <div className="p-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-[#1a365d]">Create Your TruckersEdge Account</h3>
                    <button 
                      onClick={() => setShowSignupModal(false)}
                      className="text-gray-400 hover:text-gray-500"
                    >
                      <X className="h-5 w-5" />
                    </button>
                  </div>
                  
                  <form onSubmit={handleSignup}>
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                      <input
                        type="text"
                        required
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="John Doe"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                      />
                    </div>
                    
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                      <input
                        type="email"
                        required
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="your@email.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                      />
                    </div>
                    
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Company Name</label>
                      <input
                        type="text"
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="Your Company LLC"
                        value={company}
                        onChange={(e) => setCompany(e.target.value)}
                      />
                    </div>
                    
                    <div className="mb-4">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                      <input
                        type="tel"
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="(555) 123-4567"
                        value={phone}
                        onChange={(e) => setPhone(e.target.value)}
                      />
                    </div>
                    
                    <div className="mb-6">
                      <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                      <input
                        type="password"
                        required
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#4a6fa5] focus:border-transparent"
                        placeholder="••••••••"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                      />
                      <p className="mt-1 text-xs text-gray-500">
                        Password must be at least 8 characters long with a number and special character.
                      </p>
                    </div>
                    
                    <button
                      type="submit"
                      className="w-full bg-[#ed8936] hover:bg-[#dd7d26] text-white py-3 rounded-md font-semibold transition-colors"
                    >
                      Create Account
                    </button>
                  </form>
                  
                  <div className="mt-6 text-center">
                    <p className="text-sm text-gray-600">
                      Already have an account?{' '}
                      <button 
                        className="text-[#4a6fa5] hover:text-[#1a365d] font-medium"
                        onClick={() => {
                          setShowSignupModal(false);
                          setShowLoginModal(true);
                        }}
                      >
                        Login
                      </button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      );
    }