import React, { useState, useEffect, useRef } from 'react';
import { Menu, X, Home, DollarSign, PieChart, Users, MessageSquare, FileText, ChevronRight, ChevronDown, Calculator, Map, Search, Filter, Bell, ArrowRight, Check, Zap, Briefcase, Award, Clock, Percent, RefreshCw, Sliders, Compass, Layers, Star, Mail } from 'lucide-react';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  const [loanAmount, setLoanAmount] = useState(250000);
  const [interestRate, setInterestRate] = useState(4.5);
  const [loanTerm, setLoanTerm] = useState(30);
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [chatMessages, setChatMessages] = useState([
    { role: 'assistant', content: 'Hello! How can I help you with your investment property financing needs today?' }
  ]);
  const [messageInput, setMessageInput] = useState('');
  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
  const [isPropertySearchOpen, setIsPropertySearchOpen] = useState(false);
  const [isDealAnalyzerOpen, setIsDealAnalyzerOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  
  // Deal Analyzer State
  const [purchasePrice, setPurchasePrice] = useState(200000);
  const [rehabCost, setRehabCost] = useState(50000);
  const [afterRepairValue, setAfterRepairValue] = useState(300000);
  const [holdingCosts, setHoldingCosts] = useState(5000);
  const [closingCosts, setClosingCosts] = useState(3000);
  const [realtorFees, setRealtorFees] = useState(6);
  const [calculationMethod, setCalculationMethod] = useState('arv');
  const [holdingTime, setHoldingTime] = useState(6);
  
  // Loan Guide State
  const [loanGuideStep, setLoanGuideStep] = useState(1);
  const [loanType, setLoanType] = useState('fix-and-flip');
  
  // Subscription State
  const [email, setEmail] = useState('');
  const [interests, setInterests] = useState({
    deals: true,
    rates: true,
    guidelines: false,
    ninja: false,
    va: false
  });
  const [isSubscribed, setIsSubscribed] = useState(false);
  
  // Map Reference
  const mapRef = useRef(null);
  
  // Calculate monthly payment
  const calculateMonthlyPayment = () => {
    const principal = loanAmount;
    const monthlyRate = interestRate / 100 / 12;
    const numberOfPayments = loanTerm * 12;
    
    if (monthlyRate === 0) return principal / numberOfPayments;
    
    const monthlyPayment = principal * 
      (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / 
      (Math.pow(1 + monthlyRate, numberOfPayments) - 1);
      
    return monthlyPayment.toFixed(2);
  };
  
  // Calculate ROI for fix and flip
  const calculateROI = () => {
    // Total project costs
    const totalCost = purchasePrice + rehabCost + holdingCosts + closingCosts;
    
    // Sale price after realtor fees
    const salePrice = afterRepairValue;
    const realtorCost = (realtorFees / 100) * salePrice;
    const netSalePrice = salePrice - realtorCost - closingCosts;
    
    // Profit
    const profit = netSalePrice - totalCost;
    
    // ROI
    const roi = (profit / totalCost) * 100;
    
    // Cash on cash return (assuming 25% down payment)
    const downPayment = purchasePrice * 0.25;
    const cashOnCash = (profit / (downPayment + rehabCost + holdingCosts)) * 100;
    
    // 70% Rule check
    const seventyRuleMax = afterRepairValue * 0.7 - rehabCost;
    const seventyRuleCheck = purchasePrice <= seventyRuleMax;
    
    return {
      totalCost: totalCost.toFixed(2),
      netSalePrice: netSalePrice.toFixed(2),
      profit: profit.toFixed(2),
      roi: roi.toFixed(2),
      cashOnCash: cashOnCash.toFixed(2),
      seventyRuleMax: seventyRuleMax.toFixed(2),
      seventyRuleCheck
    };
  };

  const handleSendMessage = async () => {
    if (!messageInput.trim()) return;
    
    // Add user message
    const newMessages = [
      ...chatMessages,
      { role: 'user', content: messageInput }
    ];
    
    setChatMessages(newMessages);
    setMessageInput('');
    
    // Simulate API call to get response
    setTimeout(() => {
      setChatMessages([
        ...newMessages,
        { 
          role: 'assistant', 
          content: "Thanks for your message! Our investment property specialists will review your inquiry and get back to you shortly. In the meantime, feel free to explore our loan options or use our mortgage calculator."
        }
      ]);
    }, 1000);
  };
  
  const handleSubscribe = () => {
    if (email && email.includes('@')) {
      setIsSubscribed(true);
      // In a real app, you would send this data to your backend
      console.log("Subscription data:", { email, interests });
    }
  };
  
  // Initialize map when component mounts
  useEffect(() => {
    if (isPropertySearchOpen && mapRef.current) {
      // In a real implementation, you would initialize a map library like Google Maps or Mapbox here
      console.log("Map initialized");
    }
  }, [isPropertySearchOpen]);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 font-sans">
      {/* Navigation */}
      <nav className="bg-gray-900 border-b border-purple-800 fixed w-full z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-purple-400 font-bold text-xl tracking-wider">
                  Da-Vinci-<span className="text-purple-300">Strategies</span>
                </span>
              </div>
              <div className="hidden md:ml-6 md:flex md:space-x-8">
                <NavItem icon={<Home size={18} />} text="Home" active={activeTab === 'home'} onClick={() => {setActiveTab('home'); setActiveSection('home');}} />
                <NavItem icon={<DollarSign size={18} />} text="Loans" active={activeTab === 'loans'} onClick={() => {setActiveTab('loans'); setActiveSection('loans');}} />
                <NavItem icon={<Map size={18} />} text="Property Search" active={activeTab === 'property'} onClick={() => {setActiveTab('property'); setActiveSection('property');}} />
                <NavItem icon={<Calculator size={18} />} text="Deal Analyzer" active={activeTab === 'analyzer'} onClick={() => {setActiveTab('analyzer'); setActiveSection('analyzer');}} />
                <NavItem icon={<Bell size={18} />} text="Subscribe" active={activeTab === 'subscribe'} onClick={() => {setActiveTab('subscribe'); setActiveSection('subscribe');}} />
              </div>
            </div>
            <div className="flex items-center">
              <button 
                onClick={() => setIsCalculatorOpen(true)}
                className="hidden md:flex items-center px-4 py-2 mr-4 rounded-md bg-purple-700 hover:bg-purple-600 text-white transition-all duration-300 shadow-lg hover:shadow-purple-500/30"
              >
                <Calculator size={18} className="mr-2" />
                <span>Calculator</span>
              </button>
              <button 
                onClick={() => setIsChatOpen(true)}
                className="hidden md:flex items-center px-4 py-2 rounded-md bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white transition-all duration-300 shadow-lg hover:shadow-purple-500/30"
              >
                <MessageSquare size={18} className="mr-2" />
                <span>Chat Now</span>
              </button>
              <div className="flex items-center md:hidden">
                <button
                  onClick={() => setIsMenuOpen(!isMenuOpen)}
                  className="inline-flex items-center justify-center p-2 rounded-md text-purple-400 hover:text-white hover:bg-purple-800 focus:outline-none"
                >
                  {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
                </button>
              </div>
            </div>
          </div>
        </div>
      </nav>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div className="md:hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 pt-16">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <MobileNavItem icon={<Home size={18} />} text="Home" active={activeSection === 'home'} onClick={() => { setActiveSection('home'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<DollarSign size={18} />} text="Loans" active={activeSection === 'loans'} onClick={() => { setActiveSection('loans'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Map size={18} />} text="Property Search" active={activeSection === 'property'} onClick={() => { setActiveSection('property'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Calculator size={18} />} text="Deal Analyzer" active={activeSection === 'analyzer'} onClick={() => { setActiveSection('analyzer'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Bell size={18} />} text="Subscribe" active={activeSection === 'subscribe'} onClick={() => { setActiveSection('subscribe'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Calculator size={18} />} text="Mortgage Calculator" active={false} onClick={() => { setIsCalculatorOpen(true); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<MessageSquare size={18} />} text="Chat Now" active={false} onClick={() => { setIsChatOpen(true); setIsMenuOpen(false); }} />
          </div>
        </div>
      )}

      {/* Main content */}
      <main className="pt-16">
        {activeSection === 'home' && (
          <>
            {/* Hero Section */}
            <section className="relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 to-gray-900/80 z-10"></div>
              <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1773&q=80')] bg-cover bg-center"></div>
              <div className="absolute inset-0 bg-grid-white/[0.05]"></div>
              
              <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
                <div className="max-w-3xl">
                  <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-6 leading-tight">
                    Specialized Financing for <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-300">Investment Properties</span>
                  </h1>
                  <p className="text-xl text-gray-300 mb-8">
                    Unlock the potential of fix-and-flip and investment property opportunities with tailored financing solutions from Da-Vinci-Strategies.
                  </p>
                  <div className="flex flex-wrap gap-4">
                    <button 
                      onClick={() => setActiveSection('analyzer')}
                      className="px-8 py-3 rounded-md bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium text-lg hover:from-purple-500 hover:to-indigo-500 transition-all duration-300 shadow-lg hover:shadow-purple-500/30 transform hover:-translate-y-1"
                    >
                      Analyze a Deal
                    </button>
                    <button 
                      onClick={() => setActiveSection('property')}
                      className="px-8 py-3 rounded-md bg-gray-800 text-white font-medium text-lg hover:bg-gray-700 border border-purple-500 transition-all duration-300 shadow-lg hover:shadow-purple-500/20 transform hover:-translate-y-1"
                    >
                      Find Properties
                    </button>
                  </div>
                </div>
              </div>
            </section>

            {/* Loan Options Section */}
            <section className="py-16 bg-gray-900">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                  <h2 className="text-3xl font-bold text-white mb-4">Specialized Loan Programs</h2>
                  <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                    Tailored financing solutions for investors at every level
                  </p>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  <LoanCard 
                    title="Fix & Flip Loans" 
                    description="Short-term financing designed for property investors looking to purchase, renovate, and sell properties for profit."
                    features={["Quick approval process", "Flexible terms", "Interest-only payments", "No prepayment penalties"]}
                  />
                  <LoanCard 
                    title="Rental Property Loans" 
                    description="Long-term financing solutions for buy-and-hold investors looking to build a portfolio of income-producing properties."
                    features={["Competitive rates", "Up to 30-year terms", "Cash-out refinancing", "Portfolio loans available"]}
                    featured={true}
                  />
                  <LoanCard 
                    title="Commercial Property Loans" 
                    description="Financing for multi-family, mixed-use, and commercial investment properties with specialized terms."
                    features={["Higher loan limits", "Flexible qualification criteria", "Value-add options", "Bridge loan availability"]}
                  />
                </div>
              </div>
            </section>

            {/* Process Section */}
            <section className="py-16 bg-gray-800">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                  <h2 className="text-3xl font-bold text-white mb-4">Simple Application Process</h2>
                  <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                    We've streamlined our process to get you from application to closing faster
                  </p>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  <ProcessStep 
                    number="01" 
                    title="Apply Online" 
                    description="Complete our simple online application in minutes. No paperwork hassles."
                  />
                  <ProcessStep 
                    number="02" 
                    title="Get Approved" 
                    description="Receive your personalized loan options within 24 hours of applying."
                  />
                  <ProcessStep 
                    number="03" 
                    title="Close & Fund" 
                    description="Close on your schedule and get funding as quickly as 7 days after approval."
                  />
                </div>
              </div>
            </section>

            {/* Testimonials */}
            <section className="py-16 bg-gray-900">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-12">
                  <h2 className="text-3xl font-bold text-white mb-4">What Our Clients Say</h2>
                  <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                    Real investors share their experiences with Da-Vinci-Strategies
                  </p>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <TestimonialCard 
                    quote="Da-Vinci-Strategies helped me secure financing for my first fix and flip project when traditional lenders wouldn't even consider me. Their process was quick and their team was incredibly knowledgeable."
                    author="Michael R."
                    role="Real Estate Investor"
                  />
                  <TestimonialCard 
                    quote="I've been building my rental portfolio for years, and Da-Vinci-Strategies has been my go-to lender for the last five properties. Their rental property loans are simply the best in the business."
                    author="Sarah T."
                    role="Portfolio Investor"
                  />
                </div>
              </div>
            </section>

            {/* CTA Section */}
            <section className="py-16 bg-gradient-to-r from-purple-900 to-indigo-900">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 className="text-3xl font-bold text-white mb-6">Ready to Finance Your Next Investment Property?</h2>
                <p className="text-xl text-purple-200 max-w-3xl mx-auto mb-8">
                  Our investment property specialists are standing by to help you get started.
                </p>
                <div className="flex flex-wrap justify-center gap-4">
                  <button className="px-8 py-3 rounded-md bg-white text-purple-900 font-medium text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-white/30 transform hover:-translate-y-1">
                    Apply Now
                  </button>
                  <button 
                    onClick={() => setIsChatOpen(true)}
                    className="px-8 py-3 rounded-md bg-purple-800 text-white font-medium text-lg hover:bg-purple-700 border border-purple-300 transition-all duration-300 shadow-lg hover:shadow-purple-300/20 transform hover:-translate-y-1"
                  >
                    Chat With a Specialist
                  </button>
                </div>
              </div>
            </section>
          </>
        )}

        {activeSection === 'property' && (
          <section className="py-8 bg-gray-900">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="mb-8">
                <h2 className="text-3xl font-bold text-white mb-4">Investment Property Search</h2>
                <p className="text-xl text-gray-400">
                  Find your next investment opportunity with our advanced property search tool
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                {/* Search Filters */}
                <div className="lg:col-span-1">
                  <div className="bg-gray-800 rounded-lg p-6 sticky top-24">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <Filter size={18} className="mr-2" />
                      Search Filters
                    </h3>
                    
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Location
                        </label>
                        <div className="relative">
                          <input
                            type="text"
                            placeholder="City, State, or ZIP"
                            className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                          />
                          <Search size={18} className="absolute right-3 top-2.5 text-gray-400" />
                        </div>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Property Type
                        </label>
                        <select className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                          <option>All Property Types</option>
                          <option>Single Family</option>
                          <option>Multi-Family</option>
                          <option>Commercial</option>
                          <option>Land</option>
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Price Range
                        </label>
                        <div className="grid grid-cols-2 gap-2">
                          <input
                            type="text"
                            placeholder="Min"
                            className="px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                          />
                          <input
                            type="text"
                            placeholder="Max"
                            className="px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                          />
                        </div>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Investment Strategy
                        </label>
                        <select className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                          <option>Any Strategy</option>
                          <option>Fix & Flip</option>
                          <option>Buy & Hold</option>
                          <option>BRRRR</option>
                          <option>Wholesale</option>
                        </select>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Potential ROI
                        </label>
                        <select className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                          <option>Any ROI</option>
                          <option>10%+</option>
                          <option>15%+</option>
                          <option>20%+</option>
                          <option>25%+</option>
                        </select>
                      </div>
                      
                      <div className="pt-2">
                        <button className="w-full py-2 rounded-md bg-purple-600 hover:bg-purple-500 text-white font-medium transition-all duration-300 flex items-center justify-center">
                          <Search size={18} className="mr-2" />
                          Search Properties
                        </button>
                      </div>
                      
                      <div className="pt-2">
                        <button className="w-full py-2 rounded-md bg-gray-700 hover:bg-gray-600 text-white font-medium transition-all duration-300 border border-gray-600">
                          Reset Filters
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                
                {/* Map and Results */}
                <div className="lg:col-span-3">
                  <div className="bg-gray-800 rounded-lg overflow-hidden mb-6">
                    <div className="h-96 bg-gray-700 relative" ref={mapRef}>
                      {/* This would be replaced with an actual map component */}
                      <div className="absolute inset-0 bg-[url('https://i.imgur.com/JWcIHWC.png')] bg-cover bg-center opacity-80"></div>
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="bg-gray-900/80 p-6 rounded-lg text-center">
                          <p className="text-white mb-2">Interactive Property Map</p>
                          <p className="text-gray-400 text-sm">In a real implementation, this would be an interactive map showing available properties</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="mb-6">
                    <h3 className="text-xl font-semibold text-white mb-4">Featured Investment Properties</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <PropertyCard
                        image="https://images.unsplash.com/photo-1568605114967-8130f3a36994"
                        title="Potential Flip Opportunity"
                        address="123 Investor Lane, Atlanta, GA"
                        price="$175,000"
                        description="3 bed, 2 bath fixer-upper in an up-and-coming neighborhood. Needs cosmetic updates."
                        roi="22%"
                        strategy="Fix & Flip"
                      />
                      <PropertyCard
                        image="https://images.unsplash.com/photo-1570129477492-45c003edd2be"
                        title="Rental Income Property"
                        address="456 Cash Flow Ave, Dallas, TX"
                        price="$225,000"
                        description="Duplex with long-term tenants. Each unit is 2 bed, 1 bath. Great cash flow opportunity."
                        roi="18%"
                        strategy="Buy & Hold"
                      />
                      <PropertyCard
                        image="https://images.unsplash.com/photo-1564013799919-ab600027ffc6"
                        title="Multi-Family Investment"
                        address="789 Portfolio St, Phoenix, AZ"
                        price="$450,000"
                        description="4-unit property with value-add potential. Currently 85% occupied with below-market rents."
                        roi="15%"
                        strategy="BRRRR"
                      />
                      <PropertyCard
                        image="https://images.unsplash.com/photo-1512917774080-9991f1c4c750"
                        title="Luxury Flip Potential"
                        address="101 High End Blvd, Miami, FL"
                        price="$320,000"
                        description="Waterfront property needing major renovation. Comps in the area selling for $550K+."
                        roi="25%"
                        strategy="Fix & Flip"
                      />
                    </div>
                  </div>
                  
                  <div className="text-center">
                    <button className="px-6 py-2 rounded-md bg-gray-800 hover:bg-gray-700 text-white font-medium transition-all duration-300 border border-purple-500/50">
                      Load More Properties
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {activeSection === 'analyzer' && (
          <section className="py-8 bg-gray-900">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="mb-8">
                <h2 className="text-3xl font-bold text-white mb-4">AI Deal Analyzer</h2>
                <p className="text-xl text-gray-400">
                  Calculate potential returns on your next fix and flip or investment property
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Input Form */}
                <div className="lg:col-span-1">
                  <div className="bg-gray-800 rounded-lg p-6 sticky top-24">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <Sliders size={18} className="mr-2" />
                      Deal Parameters
                    </h3>
                    
                    <div className="space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Calculation Method
                        </label>
                        <div className="grid grid-cols-2 gap-2">
                          <button
                            onClick={() => setCalculationMethod('arv')}
                            className={`py-2 rounded-md text-sm font-medium transition-all duration-300 ${
                              calculationMethod === 'arv' 
                                ? 'bg-purple-600 text-white' 
                                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                            }`}
                          >
                            ARV Method
                          </button>
                          <button
                            onClick={() => setCalculationMethod('seventy')}
                            className={`py-2 rounded-md text-sm font-medium transition-all duration-300 ${
                              calculationMethod === 'seventy' 
                                ? 'bg-purple-600 text-white' 
                                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                            }`}
                          >
                            70% Rule
                          </button>
                        </div>
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Purchase Price: ${purchasePrice.toLocaleString()}
                        </label>
                        <input
                          type="range"
                          min="50000"
                          max="1000000"
                          step="5000"
                          value={purchasePrice}
                          onChange={(e) => setPurchasePrice(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Rehab Costs: ${rehabCost.toLocaleString()}
                        </label>
                        <input
                          type="range"
                          min="0"
                          max="200000"
                          step="5000"
                          value={rehabCost}
                          onChange={(e) => setRehabCost(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          After Repair Value (ARV): ${afterRepairValue.toLocaleString()}
                        </label>
                        <input
                          type="range"
                          min="100000"
                          max="1500000"
                          step="10000"
                          value={afterRepairValue}
                          onChange={(e) => setAfterRepairValue(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Holding Costs: ${holdingCosts.toLocaleString()}
                        </label>
                        <input
                          type="range"
                          min="0"
                          max="50000"
                          step="1000"
                          value={holdingCosts}
                          onChange={(e) => setHoldingCosts(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Holding Time (months): {holdingTime}
                        </label>
                        <input
                          type="range"
                          min="1"
                          max="24"
                          step="1"
                          value={holdingTime}
                          onChange={(e) => setHoldingTime(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Closing Costs: ${closingCosts.toLocaleString()}
                        </label>
                        <input
                          type="range"
                          min="0"
                          max="20000"
                          step="500"
                          value={closingCosts}
                          onChange={(e) => setClosingCosts(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Realtor Fees: {realtorFees}%
                        </label>
                        <input
                          type="range"
                          min="0"
                          max="10"
                          step="0.5"
                          value={realtorFees}
                          onChange={(e) => setRealtorFees(Number(e.target.value))}
                          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                
                {/* Results */}
                <div className="lg:col-span-2">
                  <div className="bg-gray-800 rounded-lg p-6 mb-6">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <PieChart size={18} className="mr-2" />
                      Deal Analysis Results
                    </h3>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="bg-gray-900 rounded-lg p-6">
                        <h4 className="text-lg font-medium text-white mb-4">Investment Summary</h4>
                        <div className="space-y-3">
                          <div className="flex justify-between">
                            <span className="text-gray-400">Purchase Price:</span>
                            <span className="text-white font-medium">${purchasePrice.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Rehab Costs:</span>
                            <span className="text-white font-medium">${rehabCost.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Holding Costs:</span>
                            <span className="text-white font-medium">${holdingCosts.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Closing Costs:</span>
                            <span className="text-white font-medium">${closingCosts.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">After Repair Value:</span>
                            <span className="text-white font-medium">${afterRepairValue.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Realtor Fees:</span>
                            <span className="text-white font-medium">{realtorFees}%</span>
                          </div>
                          <div className="pt-2 border-t border-gray-700">
                            <div className="flex justify-between">
                              <span className="text-gray-300 font-medium">Total Investment:</span>
                              <span className="text-white font-bold">${calculateROI().totalCost}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-gray-900 rounded-lg p-6">
                        <h4 className="text-lg font-medium text-white mb-4">Profit Analysis</h4>
                        <div className="space-y-3">
                          <div className="flex justify-between">
                            <span className="text-gray-400">Sale Price (ARV):</span>
                            <span className="text-white font-medium">${afterRepairValue.toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Selling Costs:</span>
                            <span className="text-white font-medium">${(afterRepairValue * realtorFees / 100).toLocaleString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Net Sale Price:</span>
                            <span className="text-white font-medium">${calculateROI().netSalePrice}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-400">Total Investment:</span>
                            <span className="text-white font-medium">${calculateROI().totalCost}</span>
                          </div>
                          <div className="pt-2 border-t border-gray-700">
                            <div className="flex justify-between">
                              <span className="text-gray-300 font-medium">Net Profit:</span>
                              <span className={`font-bold ${Number(calculateROI().profit) >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                                ${calculateROI().profit}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
                      <div className="bg-gray-900 rounded-lg p-6 flex flex-col items-center justify-center">
                        <div className="text-4xl font-bold text-purple-400 mb-2">{calculateROI().roi}%</div>
                        <div className="text-gray-400 text-center">Return on Investment</div>
                      </div>
                      
                      <div className="bg-gray-900 rounded-lg p-6 flex flex-col items-center justify-center">
                        <div className="text-4xl font-bold text-indigo-400 mb-2">{calculateROI().cashOnCash}%</div>
                        <div className="text-gray-400 text-center">Cash on Cash Return</div>
                      </div>
                      
                      <div className="bg-gray-900 rounded-lg p-6 flex flex-col items-center justify-center">
                        <div className="text-4xl font-bold text-cyan-400 mb-2">{(Number(calculateROI().profit) / holdingTime).toFixed(2)}</div>
                        <div className="text-gray-400 text-center">Monthly Profit</div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-gray-800 rounded-lg p-6 mb-6">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <Check size={18} className="mr-2" />
                      Deal Analysis
                    </h3>
                    
                    <div className="space-y-4">
                      <div className="bg-gray-900 rounded-lg p-4">
                        <h4 className="text-lg font-medium text-white mb-2">70% Rule Check</h4>
                        <p className="text-gray-400 mb-3">
                          The 70% rule states that you should pay no more than 70% of the ARV minus repair costs.
                        </p>
                        <div className="flex items-center">
                          <div className={`w-6 h-6 rounded-full flex items-center justify-center mr-2 ${
                            calculateROI().seventyRuleCheck ? 'bg-green-500' : 'bg-red-500'
                          }`}>
                            {calculateROI().seventyRuleCheck ? <Check size={14} className="text-white" /> : <X size={14} className="text-white" />}
                          </div>
                          <div>
                            <p className="text-white">
                              Maximum purchase price: ${calculateROI().seventyRuleMax}
                            </p>
                            <p className={`text-sm ${calculateROI().seventyRuleCheck ? 'text-green-400' : 'text-red-400'}`}>
                              {calculateROI().seventyRuleCheck 
                                ? 'This deal passes the 70% rule!' 
                                : 'This deal does not pass the 70% rule. Consider negotiating a lower purchase price.'}
                            </p>
                          </div>
                        </div>
                      </div>
                      
                      <div className="bg-gray-900 rounded-lg p-4">
                        <h4 className="text-lg font-medium text-white mb-2">AI Deal Assessment</h4>
                        <div className="flex items-start">
                          <div className={`w-6 h-6 rounded-full flex items-center justify-center mr-2 mt-1 ${
                            Number(calculateROI().roi) >= 15 ? 'bg-green-500' : Number(calculateROI().roi) >= 10 ? 'bg-yellow-500' : 'bg-red-500'
                          }`}>
                            {Number(calculateROI().roi) >= 15 
                              ? <Check size={14} className="text-white" /> 
                              : Number(calculateROI().roi) >= 10 
                                ? <RefreshCw size={14} className="text-white" /> 
                                : <X size={14} className="text-white" />
                            }
                          </div>
                          <div>
                            <p className="text-white">
                              {Number(calculateROI().roi) >= 15 
                                ? 'This deal shows strong potential!' 
                                : Number(calculateROI().roi) >= 10 
                                  ? 'This deal has moderate potential.' 
                                  : 'This deal may not be profitable enough.'
                              }
                            </p>
                            <p className="text-sm text-gray-400 mt-1">
                              {Number(calculateROI().roi) >= 15 
                                ? 'With an ROI of ' + calculateROI().roi + '%, this investment meets typical investor criteria for a fix and flip.' 
                                : Number(calculateROI().roi) >= 10 
                                  ? 'The ' + calculateROI().roi + '% ROI is acceptable but consider negotiating better terms or reducing costs.' 
                                  : 'At ' + calculateROI().roi + '% ROI, this deal carries significant risk. Consider finding a better opportunity.'
                              }
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-gray-800 rounded-lg p-6">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <DollarSign size={18} className="mr-2" />
                      Financing Options
                    </h3>
                    
                    <div className="space-y-4">
                      <div className="bg-gray-900 rounded-lg p-4">
                        <h4 className="text-lg font-medium text-white mb-2">Fix & Flip Loan</h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <p className="text-gray-400 mb-2">Based on your project parameters:</p>
                            <ul className="space-y-1">
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Loan amount: ${(purchasePrice * 0.8).toLocaleString()}</span>
                              </li>
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Down payment: ${(purchasePrice * 0.2).toLocaleString()}</span>
                              </li>
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Rehab budget: ${rehabCost.toLocaleString()}</span>
                              </li>
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Interest rate: 8.5%</span>
                              </li>
                            </ul>
                          </div>
                          <div>
                            <p className="text-gray-400 mb-2">Estimated payments:</p>
                            <ul className="space-y-1">
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Monthly payment: ${((purchasePrice * 0.8 * 0.085) / 12).toFixed(2)}</span>
                              </li>
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Loan term: 12 months</span>
                              </li>
                              <li className="text-gray-300 flex items-start">
                                <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                <span>Origination fee: 2 points</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                        <div className="mt-4">
                          <button className="px-4 py-2 rounded-md bg-purple-600 hover:bg-purple-500 text-white font-medium text-sm transition-all duration-300">
                            Apply for This Loan
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {activeSection === 'loans' && (
          <section className="py-8 bg-gray-900">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="mb-8">
                <h2 className="text-3xl font-bold text-white mb-4">Personalized Loan Options Guide</h2>
                <p className="text-xl text-gray-400">
                  Find the perfect financing solution for your investment strategy
                </p>
              </div>
              
              <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                {/* Loan Type Selector */}
                <div className="lg:col-span-1">
                  <div className="bg-gray-800 rounded-lg p-6 sticky top-24">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <DollarSign size={18} className="mr-2" />
                      Loan Programs
                    </h3>
                    
                    <div className="space-y-2">
                      <button
                        onClick={() => setLoanType('fix-and-flip')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'fix-and-flip' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <RefreshCw size={18} className="mr-2" />
                        <span>Fix & Flip Loans</span>
                      </button>
                      
                      <button
                        onClick={() => setLoanType('rental')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'rental' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <Home size={18} className="mr-2" />
                        <span>Rental Property Loans</span>
                      </button>
                      
                      <button
                        onClick={() => setLoanType('commercial')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'commercial' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <Briefcase size={18} className="mr-2" />
                        <span>Commercial Loans</span>
                      </button>
                      
                      <button
                        onClick={() => setLoanType('bridge')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'bridge' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <Compass size={18} className="mr-2" />
                        <span>Bridge Loans</span>
                      </button>
                      
                      <button
                        onClick={() => setLoanType('ninja')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'ninja' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <Zap size={18} className="mr-2" />
                        <span>NINJA Loans</span>
                      </button>
                      
                      <button
                        onClick={() => setLoanType('va')}
                        className={`w-full text-left px-4 py-3 rounded-md transition-all duration-300 flex items-center ${
                          loanType === 'va' 
                            ? 'bg-purple-700 text-white' 
                            : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                        }`}
                      >
                        <Award size={18} className="mr-2" />
                        <span>VA Loans</span>
                      </button>
                    </div>
                    
                    <div className="mt-6 pt-6 border-t border-gray-700">
                      <h4 className="text-white font-medium mb-3">Not sure which loan is right for you?</h4>
                      <button 
                        onClick={() => setIsChatOpen(true)}
                        className="w-full py-2 rounded-md bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white font-medium transition-all duration-300 flex items-center justify-center"
                      >
                        <MessageSquare size={16} className="mr-2" />
                        Chat with a Specialist
                      </button>
                    </div>
                  </div>
                </div>
                
                {/* Loan Details and Process */}
                <div className="lg:col-span-3">
                  <div className="bg-gray-800 rounded-lg p-6 mb-6">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-2xl font-semibold text-white flex items-center">
                        {loanType === 'fix-and-flip' && <RefreshCw size={20} className="mr-2" />}
                        {loanType === 'rental' && <Home size={20} className="mr-2" />}
                        {loanType === 'commercial' && <Briefcase size={20} className="mr-2" />}
                        {loanType === 'bridge' && <Compass size={20} className="mr-2" />}
                        {loanType === 'ninja' && <Zap size={20} className="mr-2" />}
                        {loanType === 'va' && <Award size={20} className="mr-2" />}
                        {loanType === 'fix-and-flip' && 'Fix & Flip Loans'}
                        {loanType === 'rental' && 'Rental Property Loans'}
                        {loanType === 'commercial' && 'Commercial Property Loans'}
                        {loanType === 'bridge' && 'Bridge Loans'}
                        {loanType === 'ninja' && 'NINJA Loans'}
                        {loanType === 'va' && 'VA Loans'}
                      </h3>
                      <div className="bg-purple-900/30 text-purple-300 px-3 py-1 rounded-full text-sm font-medium border border-purple-500/30">
                        {loanType === 'fix-and-flip' && 'Short-term'}
                        {loanType === 'rental' && 'Long-term'}
                        {loanType === 'commercial' && 'Specialized'}
                        {loanType === 'bridge' && 'Transitional'}
                        {loanType === 'ninja' && 'Alternative'}
                        {loanType === 'va' && 'Government-backed'}
                      </div>
                    </div>
                    
                    <p className="text-gray-300 mb-6">
                      {loanType === 'fix-and-flip' && 'Our Fix & Flip loans are designed for investors who purchase properties, renovate them, and sell them for profit. These short-term loans provide the capital needed for both acquisition and renovation.'}
                      {loanType === 'rental' && 'Our Rental Property loans are perfect for buy-and-hold investors looking to build a portfolio of income-producing properties. These long-term loans offer competitive rates and flexible terms.'}
                      {loanType === 'commercial' && 'Our Commercial Property loans are tailored for larger investment properties including multi-family, mixed-use, and commercial buildings. These specialized loans accommodate the unique needs of commercial real estate investors.'}
                      {loanType === 'bridge' && 'Our Bridge loans provide temporary financing to "bridge the gap" between transactions. Ideal for investors who need quick capital while waiting for long-term financing or the sale of another property.'}
                      {loanType === 'ninja' && 'NINJA (No Income, No Job or Assets) loans are alternative financing options for investors who may not qualify for traditional loans. These loans focus on the property's potential rather than the borrower's documentation.'}
                      {loanType === 'va' && 'VA loans offer special benefits for veterans and active military personnel. Our VA loan program includes discounts and favorable terms for those who have served our country and are looking to invest in real estate.'}
                    </p>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                      <div className="bg-gray-900 rounded-lg p-4">
                        <h4 className="text-lg font-medium text-white mb-3">Loan Features</h4>
                        <ul className="space-y-2">
                          {loanType === 'fix-and-flip' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Loan amounts from $50,000 to $2 million</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Terms from 6 to 24 months</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Interest-only payments</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Up to 90% LTV and 100% of rehab costs</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">No prepayment penalties</span>
                              </li>
                            </>
                          )}
                          {loanType === 'rental' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Loan amounts from $75,000 to $5 million</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Terms up to 30 years</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Fixed and adjustable rate options</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Up to 80% LTV</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Cash-out refinancing available</span>
                              </li>
                            </>
                          )}
                          {loanType === 'commercial' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Loan amounts from $250,000 to $25 million</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Terms up to 25 years</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Amortization up to 30 years</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Up to 75% LTV</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">SBA options available</span>
                              </li>
                            </>
                          )}
                          {loanType === 'bridge' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Loan amounts from $100,000 to $10 million</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Terms from 6 to 36 months</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Interest-only payments</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Up to 85% LTV</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Fast closing - as little as 7 days</span>
                              </li>
                            </>
                          )}
                          {loanType === 'ninja' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">No income verification required</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">No job verification required</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Asset-based lending</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Up to 65% LTV</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property-focused qualification</span>
                              </li>
                            </>
                          )}
                          {loanType === 'va' && (
                            <>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">No down payment required</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Competitive interest rates</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">No private mortgage insurance</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Flexible credit requirements</span>
                              </li>
                              <li className="flex items-start">
                                <Check size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Special discounts for veterans</span>
                              </li>
                            </>
                          )}
                        </ul>
                      </div>
                      
                      <div className="bg-gray-900 rounded-lg p-4">
                        <h4 className="text-lg font-medium text-white mb-3">Qualification Requirements</h4>
                        <ul className="space-y-2">
                          {loanType === 'fix-and-flip' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: 650+</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Experience: Previous flips preferred but not required</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 10-20% of purchase price</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Reserves: 6 months of payments</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Residential 1-4 units</span>
                              </li>
                            </>
                          )}
                          {loanType === 'rental' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: 680+</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Debt-to-income ratio: 50% or less</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 20-25% of purchase price</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Reserves: 6 months of payments</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Residential 1-4 units</span>
                              </li>
                            </>
                          )}
                          {loanType === 'commercial' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: 700+</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Debt service coverage ratio: 1.25+</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 25-30% of purchase price</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Business experience: 2+ years</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Commercial, multi-family (5+ units)</span>
                              </li>
                            </>
                          )}
                          {loanType === 'bridge' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: 660+</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Exit strategy: Clear plan for refinance or sale</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 15-25% of purchase price</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Reserves: 6-12 months of payments</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Residential or commercial</span>
                              </li>
                            </>
                          )}
                          {loanType === 'ninja' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: Flexible</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Income/Employment: Not verified</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 35-40% of purchase price</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property value: Strong emphasis on property quality</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Residential investment properties</span>
                              </li>
                            </>
                          )}
                          {loanType === 'va' && (
                            <>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Eligibility: Veterans, active duty, or eligible surviving spouses</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Credit score: 620+ (flexible)</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Debt-to-income ratio: 41% or less (can be higher)</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Down payment: 0% (no down payment required)</span>
                              </li>
                              <li className="flex items-start">
                                <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                                <span className="text-gray-300">Property: Primary residence (can be multi-unit up to 4 units)</span>
                              </li>
                            </>
                          )}
                        </ul>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-gray-800 rounded-lg p-6 mb-6">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <Clock size={18} className="mr-2" />
                      Application Process
                    </h3>
                    
                    <div className="relative">
                      <div className="absolute left-8 top-0 bottom-0 w-1 bg-gray-700"></div>
                      
                      <div className="space-y-8">
                        <div className="relative flex">
                          <div className="absolute left-0 mt-1 w-16 h-16 flex items-center justify-center bg-purple-900 rounded-full border-4 border-gray-800 z-10">
                            <span className="text-white font-bold text-xl">1</span>
                          </div>
                          <div className="ml-24">
                            <h4 className="text-lg font-medium text-white mb-2">Initial Consultation</h4>
                            <p className="text-gray-400 mb-3">
                              Speak with one of our loan specialists to discuss your investment goals and determine the best financing option for your needs.
                            </p>
                            <button 
                              onClick={() => setIsChatOpen(true)}
                              className="px-4 py-2 rounded-md bg-gray-700 hover:bg-gray-600 text-white font-medium text-sm transition-all duration-300 flex items-center w-auto"
                            >
                              <MessageSquare size={16} className="mr-2" />
                              Schedule Consultation
                            </button>
                          </div>
                        </div>
                        
                        <div className="relative flex">
                          <div className="absolute left-0 mt-1 w-16 h-16 flex items-center justify-center bg-purple-900 rounded-full border-4 border-gray-800 z-10">
                            <span className="text-white font-bold text-xl">2</span>
                          </div>
                          <div className="ml-24">
                            <h4 className="text-lg font-medium text-white mb-2">Pre-Qualification</h4>
                            <p className="text-gray-400 mb-3">
                              Submit basic information to receive a pre-qualification letter outlining your potential loan terms and borrowing capacity.
                            </p>
                            <button className="px-4 py-2 rounded-md bg-gray-700 hover:bg-gray-600 text-white font-medium text-sm transition-all duration-300 flex items-center w-auto">
                              <FileText size={16} className="mr-2" />
                              Start Pre-Qualification
                            </button>
                          </div>
                        </div>
                        
                        <div className="relative flex">
                          <div className="absolute left-0 mt-1 w-16 h-16 flex items-center justify-center bg-purple-900 rounded-full border-4 border-gray-800 z-10">
                            <span className="text-white font-bold text-xl">3</span>
                          </div>
                          <div className="ml-24">
                            <h4 className="text-lg font-medium text-white mb-2">Full Application</h4>
                            <p className="text-gray-400 mb-3">
                              Complete our comprehensive application and submit required documentation for underwriting review.
                            </p>
                            <div className="bg-gray-900 p-3 rounded-md">
                              <h5 className="text-white font-medium mb-2">Required Documentation:</h5>
                              <ul className="space-y-1">
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Property information and purchase contract</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Personal financial statements</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Business entity documents (if applicable)</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Rehab budget and scope of work (for fix & flip)</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Exit strategy documentation</span>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        
                        <div className="relative flex">
                          <div className="absolute left-0 mt-1 w-16 h-16 flex items-center justify-center bg-purple-900 rounded-full border-4 border-gray-800 z-10">
                            <span className="text-white font-bold text-xl">4</span>
                          </div>
                          <div className="ml-24">
                            <h4 className="text-lg font-medium text-white mb-2">Underwriting & Approval</h4>
                            <p className="text-gray-400 mb-3">
                              Our underwriting team reviews your application and property details to provide a formal loan approval.
                            </p>
                            <div className="bg-gray-900 p-3 rounded-md">
                              <h5 className="text-white font-medium mb-2">Underwriting Process:</h5>
                              <ul className="space-y-1">
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Credit and background review</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Property appraisal and inspection</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Title search and insurance verification</span>
                                </li>
                                <li className="text-gray-400 flex items-start">
                                  <ChevronRight size={16} className="text-purple-400 mr-1 mt-1 flex-shrink-0" />
                                  <span>Final loan terms determination</span>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        
                        <div className="relative flex">
                          <div className="absolute left-0 mt-1 w-16 h-16 flex items-center justify-center bg-purple-900 rounded-full border-4 border-gray-800 z-10">
                            <span className="text-white font-bold text-xl">5</span>
                          </div>
                          <div className="ml-24">
                            <h4 className="text-lg font-medium text-white mb-2">Closing & Funding</h4>
                            <p className="text-gray-400 mb-3">
                              Sign final loan documents and receive funding. For rehab loans, draw schedules will be established for renovation funds.
                            </p>
                            <div className="bg-purple-900/30 p-3 rounded-md border border-purple-500/30">
                              <p className="text-purple-300 font-medium">
                                Typical timeline from application to funding: 7-14 days for most loans
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-gradient-to-r from-purple-900 to-indigo-900 rounded-lg p-6">
                    <div className="flex flex-col md:flex-row items-center justify-between">
                      <div className="mb-6 md:mb-0 md:mr-6">
                        <h3 className="text-xl font-semibold text-white mb-2">Ready to get started?</h3>
                        <p className="text-purple-200">
                          Apply now to secure financing for your next investment property.
                        </p>
                      </div>
                      <div className="flex flex-wrap gap-4">
                        <button className="px-6 py-3 rounded-md bg-white text-purple-900 font-medium hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-white/30 transform hover:-translate-y-1">
                          Apply Now
                        </button>
                        <button 
                          onClick={() => setIsChatOpen(true)}
                          className="px-6 py-3 rounded-md bg-purple-800 text-white font-medium hover:bg-purple-700 border border-purple-300 transition-all duration-300 shadow-lg hover:shadow-purple-300/20 transform hover:-translate-y-1"
                        >
                          Chat With a Specialist
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {activeSection === 'subscribe' && (
          <section className="py-8 bg-gray-900">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="mb-8">
                <h2 className="text-3xl font-bold text-white mb-4">Stay Updated</h2>
                <p className="text-xl text-gray-400">
                  Subscribe to receive the latest updates on investment opportunities, rate changes, and industry news
                </p>
              </div>
              
              {!isSubscribed ? (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                  <div className="bg-gray-800 rounded-lg p-6">
                    <h3 className="text-xl font-semibold text-white mb-4 flex items-center">
                      <Bell size={18} className="mr-2" />
                      Subscription Preferences
                    </h3>
                    
                    <div className="space-y-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-1">
                          Email Address
                        </label>
                        <input
                          type="email"
                          value={email}
                          onChange={(e) => setEmail(e.target.value)}
                          placeholder="your@email.com"
                          className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                        />
                      </div>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-400 mb-3">
                          I'm interested in receiving updates about:
                        </label>
                        <div className="space-y-3">
                          <label className="flex items-center">
                            <input
                              type="checkbox"
                              checked={interests.deals}
                              onChange={() => setInterests({...interests, deals: !interests.deals})}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-500 rounded"
                            />
                            <span className="ml-2 text-gray-300">Investment Property Deals</span>
                          </label>
                          
                          <label className="flex items-center">
                            <input
                              type="checkbox"
                              checked={interests.rates}
                              onChange={() => setInterests({...interests, rates: !interests.rates})}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-500 rounded"
                            />
                            <span className="ml-2 text-gray-300">Interest Rate Changes</span>
                          </label>
                          
                          <label className="flex items-center">
                            <input
                              type="checkbox"
                              checked={interests.guidelines}
                              onChange={() => setInterests({...interests, guidelines: !interests.guidelines})}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-500 rounded"
                            />
                            <span className="ml-2 text-gray-300">Underwriting Guideline Updates</span>
                          </label>
                          
                          <label className="flex items-center">
                            <input
                              type="checkbox"
                              checked={interests.ninja}
                              onChange={() => setInterests({...interests, ninja: !interests.ninja})}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-500 rounded"
                            />
                            <span className="ml-2 text-gray-300">NINJA Loan Opportunities</span>
                          </label>
                          
                          <label className="flex items-center">
                            <input
                              type="checkbox"
                              checked={interests.va}
                              onChange={() => setInterests({...interests, va: !interests.va})}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-500 rounded"
                            />
                            <span className="ml-2 text-gray-300">VA Loan Discounts & Programs</span>
                          </label>
                        </div>
                      </div>
                      
                      <div className="pt-2">
                        <button 
                          onClick={handleSubscribe}
                          disabled={!email || !email.includes('@')}
                          className={`w-full py-3 rounded-md font-medium transition-all duration-300 ${
                            email && email.includes('@')
                              ? 'bg-purple-600 hover:bg-purple-500 text-white' 
                              : 'bg-gray-600 text-gray-300 cursor-not-allowed'
                          }`}
                        >
                          Subscribe Now
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <div>
                    <div className="bg-gray-800 rounded-lg p-6 mb-6">
                      <h3 className="text-xl font-semibold text-white mb-4">Subscriber Benefits</h3>
                      
                      <ul className="space-y-3">
                        <li className="flex items-start">
                          <Star size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-300">Early access to off-market investment properties</span>
                        </li>
                        <li className="flex items-start">
                          <Star size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-300">Exclusive rate discounts for subscribers</span>
                        </li>
                        <li className="flex items-start">
                          <Star size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-300">Monthly market analysis and investment tips</span>
                        </li>
                        <li className="flex items-start">
                          <Star size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-300">Invitations to exclusive investor networking events</span>
                        </li>
                        <li className="flex items-start">
                          <Star size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
                          <span className="text-gray-300">Priority processing on loan applications</span>
                        </li>
                      </ul>
                    </div>
                    
                    <div className="bg-gray-800 rounded-lg p-6">
                      <h3 className="text-xl font-semibold text-white mb-4">Recent Updates</h3>
                      
                      <div className="space-y-4">
                        <div className="border-l-4 border-purple-500 pl-4">
                          <h4 className="text-white font-medium">New NINJA Loan Program Launched</h4>
                          <p className="text-gray-400 text-sm mt-1">Our new No Income, No Job or Assets verification program is now available for qualified investors.</p>
                          <p className="text-purple-400 text-xs mt-2">Posted 3 days ago</p>
                        </div>
                        
                        <div className="border-l-4 border-indigo-500 pl-4">
                          <h4 className="text-white font-medium">Interest Rate Update</h4>
                          <p className="text-gray-400 text-sm mt-1">Fix & Flip loan rates have been reduced by 0.5% for all new applications.</p>
                          <p className="text-purple-400 text-xs mt-2">Posted 1 week ago</p>
                        </div>
                        
                        <div className="border-l-4 border-blue-500 pl-4">
                          <h4 className="text-white font-medium">VA Loan Discount Program</h4>
                          <p className="text-gray-400 text-sm mt-1">Veterans now eligible for reduced origination fees on investment property loans.</p>
                          <p className="text-purple-400 text-xs mt-2">Posted 2 weeks ago</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="bg-gray-800 rounded-lg p-8 text-center">
                  <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Check size={32} className="text-white" />
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-4">Thank You for Subscribing!</h3>
                  <p className="text-gray-300 text-lg mb-6 max-w-2xl mx-auto">
                    You've been added to our mailing list. Watch your inbox for exclusive investment opportunities, rate updates, and industry news.
                  </p>
                  <div className="bg-gray-900 p-6 rounded-lg max-w-xl mx-auto">
                    <h4 className="text-white font-medium mb-3">Your Subscription Details:</h4>
                    <p className="text-gray-400 mb-1">Email: {email}</p>
                    <p className="text-gray-400 mb-3">Interests: {Object.entries(interests)
                      .filter(([_, value]) => value)
                      .map(([key]) => key.charAt(0).toUpperCase() + key.slice(1))
                      .join(', ')}
                    </p>
                    <p className="text-purple-400 text-sm">You can update your preferences or unsubscribe at any time.</p>
                  </div>
                </div>
              )}
            </div>
          </section>
        )}

        {/* Footer */}
        <footer className="bg-gray-900 border-t border-purple-900/50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-purple-400 font-bold text-xl mb-4">Da-Vinci-Strategies</h3>
                <p className="text-gray-400 mb-4">Specialized financing solutions for investment properties and fix-and-flip projects.</p>
                <div className="flex space-x-4">
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Facebook</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Instagram</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Twitter</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">LinkedIn</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
                    </svg>
                  </a>
                </div>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Loan Programs</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Fix & Flip Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Rental Property Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Commercial Property Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Bridge Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">NINJA Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">VA Loans</a></li>
                </ul>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Resources</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Investment Guides</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Market Reports</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Deal Analyzer</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Property Search</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">FAQ</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Blog</a></li>
                </ul>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Contact</h3>
                <ul className="space-y-2">
                  <li className="text-gray-400">123 Investment Ave</li>
                  <li className="text-gray-400">Suite 456</li>
                  <li className="text-gray-400">New York, NY 10001</li>
                  <li className="text-gray-400">Phone: (555) 123-4567</li>
                  <li className="text-gray-400">Email: info@davinci-strategies.com</li>
                </ul>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-gray-800">
              <p className="text-gray-500 text-sm text-center">
                &copy; 2023 Da-Vinci-Strategies. All rights reserved. NMLS #12345678
              </p>
              <div className="mt-4 flex justify-center space-x-6">
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Privacy Policy</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Terms of Service</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Licensing Info</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Accessibility</a>
              </div>
            </div>
          </div>
        </footer>
      </main>

      {/* Chat Modal */}
      {isChatOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div className="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg leading-6 font-medium text-white">
                        Chat with a Loan Specialist
                      </h3>
                      <button
                        onClick={() => setIsChatOpen(false)}
                        className="text-gray-400 hover:text-white"
                      >
                        <X size={24} />
                      </button>
                    </div>
                    <div className="mt-2">
                      <div className="bg-gray-900 rounded-lg p-4 h-80 overflow-y-auto">
                        {chatMessages.map((message, index) => (
                          <div key={index} className={`mb-4 ${message.role === 'user' ? 'text-right' : 'text-left'}`}>
                            <div className={`inline-block rounded-lg px-4 py-2 max-w-xs ${
                              message.role === 'user' 
                                ? 'bg-purple-600 text-white' 
                                : 'bg-gray-700 text-gray-200'
                            }`}>
                              {message.content}
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className="mt-4 flex">
                        <input
                          type="text"
                          value={messageInput}
                          onChange={(e) => setMessageInput(e.target.value)}
                          onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                          className="flex-1 rounded-l-lg px-4 py-2 bg-gray-700 text-white border-0 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          placeholder="Type your message..."
                        />
                        <button
                          onClick={handleSendMessage}
                          className="bg-purple-600 hover:bg-purple-500 text-white rounded-r-lg px-4 py-2"
                        >
                          Send
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Calculator Modal */}
      {isCalculatorOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div className="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg leading-6 font-medium text-white">
                        Mortgage Calculator
                      </h3>
                      <button
                        onClick={() => setIsCalculatorOpen(false)}
                        className="text-gray-400 hover:text-white"
                      >
                        <X size={24} />
                      </button>
                    </div>
                    <div className="mt-2">
                      <div className="space-y-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Loan Amount: ${loanAmount.toLocaleString()}
                          </label>
                          <input
                            type="range"
                            min="50000"
                            max="2000000"
                            step="10000"
                            value={loanAmount}
                            onChange={(e) => setLoanAmount(Number(e.target.value))}
                            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mt-2"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Interest Rate: {interestRate}%
                          </label>
                          <input
                            type="range"
                            min="2"
                            max="12"
                            step="0.125"
                            value={interestRate}
                            onChange={(e) => setInterestRate(Number(e.target.value))}
                            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mt-2"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Loan Term: {loanTerm} years
                          </label>
                          <div className="flex space-x-4 mt-2">
                            {[5, 15, 30].map((term) => (
                              <button
                                key={term}
                                onClick={() => setLoanTerm(term)}
                                className={`flex-1 py-2 rounded-md ${
                                  loanTerm === term 
                                    ? 'bg-purple-600 text-white' 
                                    : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                                }`}
                              >
                                {term} Years
                              </button>
                            ))}
                          </div>
                        </div>
                        <div className="bg-gray-900 rounded-lg p-6 mt-4">
                          <div className="text-center">
                            <p className="text-gray-400 text-sm">Estimated Monthly Payment</p>
                            <p className="text-3xl font-bold text-white mt-2">${calculateMonthlyPayment()}</p>
                          </div>
                          <div className="grid grid-cols-2 gap-4 mt-4">
                            <div>
                              <p className="text-gray-400 text-sm">Total Loan Amount</p>
                              <p className="text-lg font-semibold text-white">${loanAmount.toLocaleString()}</p>
                            </div>
                            <div>
                              <p className="text-gray-400 text-sm">Total Interest Paid</p>
                              <p className="text-lg font-semibold text-white">
                                ${((calculateMonthlyPayment() * loanTerm * 12) - loanAmount).toLocaleString(undefined, {maximumFractionDigits: 0})}
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={() => setIsCalculatorOpen(false)}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Apply Now
                </button>
                <button
                  type="button"
                  onClick={() => setIsCalculatorOpen(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-gray-300 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Component for navigation items
function NavItem({ icon, text, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center px-3 py-2 text-sm font-medium transition-all duration-300 ${
        active 
          ? 'text-purple-300 border-b-2 border-purple-500' 
          : 'text-gray-300 hover:text-purple-300 hover:border-b-2 hover:border-purple-500/50'
      }`}
    >
      <span className="mr-2">{icon}</span>
      <span>{text}</span>
    </button>
  );
}

// Component for mobile navigation items
function MobileNavItem({ icon, text, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center w-full px-3 py-3 text-base font-medium rounded-md ${
        active 
          ? 'bg-purple-800 text-white' 
          : 'text-gray-300 hover:bg-gray-800 hover:text-white'
      }`}
    >
      <span className="mr-3">{icon}</span>
      <span>{text}</span>
    </button>
  );
}

// Component for loan cards
function LoanCard({ title, description, features, featured = false }) {
  return (
    <div className={`rounded-xl overflow-hidden transition-all duration-300 transform hover:-translate-y-2 ${
      featured 
        ? 'bg-gradient-to-b from-purple-900 to-gray-800 border border-purple-500 shadow-lg shadow-purple-500/20' 
        : 'bg-gray-800 border border-gray-700 hover:border-purple-500/50'
    }`}>
      {featured && (
        <div className="bg-purple-600 py-1 px-4 text-center">
          <span className="text-xs font-semibold text-white">MOST POPULAR</span>
        </div>
      )}
      <div className="p-6">
        <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
        <p className="text-gray-400 mb-4">{description}</p>
        <ul className="space-y-2">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start">
              <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
              <span className="text-gray-300">{feature}</span>
            </li>
          ))}
        </ul>
        <button className={`mt-6 w-full py-2 rounded-md transition-all duration-300 ${
          featured 
            ? 'bg-purple-600 hover:bg-purple-500 text-white' 
            : 'bg-gray-700 hover:bg-gray-600 text-white border border-purple-500/50'
        }`}>
          Learn More
        </button>
      </div>
    </div>
  );
}

// Component for process steps
function ProcessStep({ number, title, description }) {
  return (
    <div className="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-purple-500/50 transition-all duration-300">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center text-white font-bold text-lg mr-4">
          {number}
        </div>
        <h3 className="text-xl font-bold text-white">{title}</h3>
      </div>
      <p className="text-gray-400">{description}</p>
    </div>
  );
}

// Component for testimonial cards
function TestimonialCard({ quote, author, role }) {
  return (
    <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <svg className="h-8 w-8 text-purple-500<ant_artifact identifier="artifact-001" title="React Investment Property Financing App with Mortgage Calculator and Chat">
import React, { useState, useEffect } from 'react';
import { Menu, X, Home, DollarSign, PieChart, Users, MessageSquare, FileText, ChevronRight, ChevronDown, Calculator } from 'lucide-react';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  const [loanAmount, setLoanAmount] = useState(250000);
  const [interestRate, setInterestRate] = useState(4.5);
  const [loanTerm, setLoanTerm] = useState(30);
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [chatMessages, setChatMessages] = useState([
    { role: 'assistant', content: 'Hello! How can I help you with your investment property financing needs today?' }
  ]);
  const [messageInput, setMessageInput] = useState('');
  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
  
  // Calculate monthly payment
  const calculateMonthlyPayment = () => {
    const principal = loanAmount;
    const monthlyRate = interestRate / 100 / 12;
    const numberOfPayments = loanTerm * 12;
    
    if (monthlyRate === 0) return principal / numberOfPayments;
    
    const monthlyPayment = principal * 
      (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / 
      (Math.pow(1 + monthlyRate, numberOfPayments) - 1);
      
    return monthlyPayment.toFixed(2);
  };

  const handleSendMessage = async () => {
    if (!messageInput.trim()) return;
    
    // Add user message
    const newMessages = [
      ...chatMessages,
      { role: 'user', content: messageInput }
    ];
    
    setChatMessages(newMessages);
    setMessageInput('');
    
    // Simulate API call to get response
    setTimeout(() => {
      setChatMessages([
        ...newMessages,
        { 
          role: 'assistant', 
          content: "Thanks for your message! Our investment property specialists will review your inquiry and get back to you shortly. In the meantime, feel free to explore our loan options or use our mortgage calculator."
        }
      ]);
    }, 1000);
  };

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 font-sans">
      {/* Navigation */}
      <nav className="bg-gray-900 border-b border-purple-800 fixed w-full z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0 flex items-center">
                <span className="text-purple-400 font-bold text-xl tracking-wider">
                  Da-Vinci-<span className="text-purple-300">Strategies</span>
                </span>
              </div>
              <div className="hidden md:ml-6 md:flex md:space-x-8">
                <NavItem icon={<Home size={18} />} text="Home" active={activeTab === 'home'} onClick={() => setActiveTab('home')} />
                <NavItem icon={<DollarSign size={18} />} text="Loans" active={activeTab === 'loans'} onClick={() => setActiveTab('loans')} />
                <NavItem icon={<PieChart size={18} />} text="Investments" active={activeTab === 'investments'} onClick={() => setActiveTab('investments')} />
                <NavItem icon={<Users size={18} />} text="About" active={activeTab === 'about'} onClick={() => setActiveTab('about')} />
                <NavItem icon={<FileText size={18} />} text="Resources" active={activeTab === 'resources'} onClick={() => setActiveTab('resources')} />
              </div>
            </div>
            <div className="flex items-center">
              <button 
                onClick={() => setIsCalculatorOpen(true)}
                className="hidden md:flex items-center px-4 py-2 mr-4 rounded-md bg-purple-700 hover:bg-purple-600 text-white transition-all duration-300 shadow-lg hover:shadow-purple-500/30"
              >
                <Calculator size={18} className="mr-2" />
                <span>Calculator</span>
              </button>
              <button 
                onClick={() => setIsChatOpen(true)}
                className="hidden md:flex items-center px-4 py-2 rounded-md bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white transition-all duration-300 shadow-lg hover:shadow-purple-500/30"
              >
                <MessageSquare size={18} className="mr-2" />
                <span>Chat Now</span>
              </button>
              <div className="flex items-center md:hidden">
                <button
                  onClick={() => setIsMenuOpen(!isMenuOpen)}
                  className="inline-flex items-center justify-center p-2 rounded-md text-purple-400 hover:text-white hover:bg-purple-800 focus:outline-none"
                >
                  {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
                </button>
              </div>
            </div>
          </div>
        </div>
      </nav>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div className="md:hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 pt-16">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <MobileNavItem icon={<Home size={18} />} text="Home" active={activeTab === 'home'} onClick={() => { setActiveTab('home'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<DollarSign size={18} />} text="Loans" active={activeTab === 'loans'} onClick={() => { setActiveTab('loans'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<PieChart size={18} />} text="Investments" active={activeTab === 'investments'} onClick={() => { setActiveTab('investments'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Users size={18} />} text="About" active={activeTab === 'about'} onClick={() => { setActiveTab('about'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<FileText size={18} />} text="Resources" active={activeTab === 'resources'} onClick={() => { setActiveTab('resources'); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<Calculator size={18} />} text="Calculator" active={false} onClick={() => { setIsCalculatorOpen(true); setIsMenuOpen(false); }} />
            <MobileNavItem icon={<MessageSquare size={18} />} text="Chat Now" active={false} onClick={() => { setIsChatOpen(true); setIsMenuOpen(false); }} />
          </div>
        </div>
      )}

      {/* Main content */}
      <main className="pt-16">
        {/* Hero Section */}
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 to-gray-900/80 z-10"></div>
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1773&q=80')] bg-cover bg-center"></div>
          <div className="absolute inset-0 bg-grid-white/[0.05]"></div>
          
          <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
            <div className="max-w-3xl">
              <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-6 leading-tight">
                Specialized Financing for <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-300">Investment Properties</span>
              </h1>
              <p className="text-xl text-gray-300 mb-8">
                Unlock the potential of fix-and-flip and investment property opportunities with tailored financing solutions from Da-Vinci-Strategies.
              </p>
              <div className="flex flex-wrap gap-4">
                <button className="px-8 py-3 rounded-md bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium text-lg hover:from-purple-500 hover:to-indigo-500 transition-all duration-300 shadow-lg hover:shadow-purple-500/30 transform hover:-translate-y-1">
                  Get Started
                </button>
                <button className="px-8 py-3 rounded-md bg-gray-800 text-white font-medium text-lg hover:bg-gray-700 border border-purple-500 transition-all duration-300 shadow-lg hover:shadow-purple-500/20 transform hover:-translate-y-1">
                  Learn More
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* Loan Options Section */}
        <section className="py-16 bg-gray-900">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-white mb-4">Specialized Loan Programs</h2>
              <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                Tailored financing solutions for investors at every level
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <LoanCard 
                title="Fix & Flip Loans" 
                description="Short-term financing designed for property investors looking to purchase, renovate, and sell properties for profit."
                features={["Quick approval process", "Flexible terms", "Interest-only payments", "No prepayment penalties"]}
              />
              <LoanCard 
                title="Rental Property Loans" 
                description="Long-term financing solutions for buy-and-hold investors looking to build a portfolio of income-producing properties."
                features={["Competitive rates", "Up to 30-year terms", "Cash-out refinancing", "Portfolio loans available"]}
                featured={true}
              />
              <LoanCard 
                title="Commercial Property Loans" 
                description="Financing for multi-family, mixed-use, and commercial investment properties with specialized terms."
                features={["Higher loan limits", "Flexible qualification criteria", "Value-add options", "Bridge loan availability"]}
              />
            </div>
          </div>
        </section>

        {/* Process Section */}
        <section className="py-16 bg-gray-800">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-white mb-4">Simple Application Process</h2>
              <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                We've streamlined our process to get you from application to closing faster
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <ProcessStep 
                number="01" 
                title="Apply Online" 
                description="Complete our simple online application in minutes. No paperwork hassles."
              />
              <ProcessStep 
                number="02" 
                title="Get Approved" 
                description="Receive your personalized loan options within 24 hours of applying."
              />
              <ProcessStep 
                number="03" 
                title="Close & Fund" 
                description="Close on your schedule and get funding as quickly as 7 days after approval."
              />
            </div>
          </div>
        </section>

        {/* Testimonials */}
        <section className="py-16 bg-gray-900">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-white mb-4">What Our Clients Say</h2>
              <p className="text-xl text-gray-400 max-w-3xl mx-auto">
                Real investors share their experiences with Da-Vinci-Strategies
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <TestimonialCard 
                quote="Da-Vinci-Strategies helped me secure financing for my first fix and flip project when traditional lenders wouldn't even consider me. Their process was quick and their team was incredibly knowledgeable."
                author="Michael R."
                role="Real Estate Investor"
              />
              <TestimonialCard 
                quote="I've been building my rental portfolio for years, and Da-Vinci-Strategies has been my go-to lender for the last five properties. Their rental property loans are simply the best in the business."
                author="Sarah T."
                role="Portfolio Investor"
              />
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-gradient-to-r from-purple-900 to-indigo-900">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-3xl font-bold text-white mb-6">Ready to Finance Your Next Investment Property?</h2>
            <p className="text-xl text-purple-200 max-w-3xl mx-auto mb-8">
              Our investment property specialists are standing by to help you get started.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <button className="px-8 py-3 rounded-md bg-white text-purple-900 font-medium text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg hover:shadow-white/30 transform hover:-translate-y-1">
                Apply Now
              </button>
              <button 
                onClick={() => setIsChatOpen(true)}
                className="px-8 py-3 rounded-md bg-purple-800 text-white font-medium text-lg hover:bg-purple-700 border border-purple-300 transition-all duration-300 shadow-lg hover:shadow-purple-300/20 transform hover:-translate-y-1"
              >
                Chat With a Specialist
              </button>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="bg-gray-900 border-t border-purple-900/50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-purple-400 font-bold text-xl mb-4">Da-Vinci-Strategies</h3>
                <p className="text-gray-400 mb-4">Specialized financing solutions for investment properties and fix-and-flip projects.</p>
                <div className="flex space-x-4">
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Facebook</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Instagram</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clipRule="evenodd" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">Twitter</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                    </svg>
                  </a>
                  <a href="#" className="text-gray-400 hover:text-purple-400">
                    <span className="sr-only">LinkedIn</span>
                    <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
                    </svg>
                  </a>
                </div>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Loan Programs</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Fix & Flip Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Rental Property Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Commercial Property Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Bridge Loans</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Portfolio Loans</a></li>
                </ul>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Resources</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Investment Guides</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Market Reports</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Loan Calculator</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">FAQ</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-purple-400">Blog</a></li>
                </ul>
              </div>
              <div>
                <h3 className="text-white font-semibold mb-4">Contact</h3>
                <ul className="space-y-2">
                  <li className="text-gray-400">123 Investment Ave</li>
                  <li className="text-gray-400">Suite 456</li>
                  <li className="text-gray-400">New York, NY 10001</li>
                  <li className="text-gray-400">Phone: (555) 123-4567</li>
                  <li className="text-gray-400">Email: info@davinci-strategies.com</li>
                </ul>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-gray-800">
              <p className="text-gray-500 text-sm text-center">
                &copy; 2023 Da-Vinci-Strategies. All rights reserved. NMLS #12345678
              </p>
              <div className="mt-4 flex justify-center space-x-6">
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Privacy Policy</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Terms of Service</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Licensing Info</a>
                <a href="#" className="text-gray-500 hover:text-purple-400 text-sm">Accessibility</a>
              </div>
            </div>
          </div>
        </footer>
      </main>

      {/* Chat Modal */}
      {isChatOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div className="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg leading-6 font-medium text-white">
                        Chat with a Loan Specialist
                      </h3>
                      <button
                        onClick={() => setIsChatOpen(false)}
                        className="text-gray-400 hover:text-white"
                      >
                        <X size={24} />
                      </button>
                    </div>
                    <div className="mt-2">
                      <div className="bg-gray-900 rounded-lg p-4 h-80 overflow-y-auto">
                        {chatMessages.map((message, index) => (
                          <div key={index} className={`mb-4 ${message.role === 'user' ? 'text-right' : 'text-left'}`}>
                            <div className={`inline-block rounded-lg px-4 py-2 max-w-xs ${
                              message.role === 'user' 
                                ? 'bg-purple-600 text-white' 
                                : 'bg-gray-700 text-gray-200'
                            }`}>
                              {message.content}
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className="mt-4 flex">
                        <input
                          type="text"
                          value={messageInput}
                          onChange={(e) => setMessageInput(e.target.value)}
                          onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
                          className="flex-1 rounded-l-lg px-4 py-2 bg-gray-700 text-white border-0 focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          placeholder="Type your message..."
                        />
                        <button
                          onClick={handleSendMessage}
                          className="bg-purple-600 hover:bg-purple-500 text-white rounded-r-lg px-4 py-2"
                        >
                          Send
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Calculator Modal */}
      {isCalculatorOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div className="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                    <div className="flex justify-between items-center mb-4">
                      <h3 className="text-lg leading-6 font-medium text-white">
                        Mortgage Calculator
                      </h3>
                      <button
                        onClick={() => setIsCalculatorOpen(false)}
                        className="text-gray-400 hover:text-white"
                      >
                        <X size={24} />
                      </button>
                    </div>
                    <div className="mt-2">
                      <div className="space-y-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Loan Amount: ${loanAmount.toLocaleString()}
                          </label>
                          <input
                            type="range"
                            min="50000"
                            max="2000000"
                            step="10000"
                            value={loanAmount}
                            onChange={(e) => setLoanAmount(Number(e.target.value))}
                            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mt-2"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Interest Rate: {interestRate}%
                          </label>
                          <input
                            type="range"
                            min="2"
                            max="12"
                            step="0.125"
                            value={interestRate}
                            onChange={(e) => setInterestRate(Number(e.target.value))}
                            className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer mt-2"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-gray-400">
                            Loan Term: {loanTerm} years
                          </label>
                          <div className="flex space-x-4 mt-2">
                            {[5, 15, 30].map((term) => (
                              <button
                                key={term}
                                onClick={() => setLoanTerm(term)}
                                className={`flex-1 py-2 rounded-md ${
                                  loanTerm === term 
                                    ? 'bg-purple-600 text-white' 
                                    : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                                }`}
                              >
                                {term} Years
                              </button>
                            ))}
                          </div>
                        </div>
                        <div className="bg-gray-900 rounded-lg p-6 mt-4">
                          <div className="text-center">
                            <p className="text-gray-400 text-sm">Estimated Monthly Payment</p>
                            <p className="text-3xl font-bold text-white mt-2">${calculateMonthlyPayment()}</p>
                          </div>
                          <div className="grid grid-cols-2 gap-4 mt-4">
                            <div>
                              <p className="text-gray-400 text-sm">Total Loan Amount</p>
                              <p className="text-lg font-semibold text-white">${loanAmount.toLocaleString()}</p>
                            </div>
                            <div>
                              <p className="text-gray-400 text-sm">Total Interest Paid</p>
                              <p className="text-lg font-semibold text-white">
                                ${((calculateMonthlyPayment() * loanTerm * 12) - loanAmount).toLocaleString(undefined, {maximumFractionDigits: 0})}
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={() => setIsCalculatorOpen(false)}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Apply Now
                </button>
                <button
                  type="button"
                  onClick={() => setIsCalculatorOpen(false)}
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-800 text-base font-medium text-gray-300 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Component for navigation items
function NavItem({ icon, text, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center px-3 py-2 text-sm font-medium transition-all duration-300 ${
        active 
          ? 'text-purple-300 border-b-2 border-purple-500' 
          : 'text-gray-300 hover:text-purple-300 hover:border-b-2 hover:border-purple-500/50'
      }`}
    >
      <span className="mr-2">{icon}</span>
      <span>{text}</span>
    </button>
  );
}

// Component for mobile navigation items
function MobileNavItem({ icon, text, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center w-full px-3 py-3 text-base font-medium rounded-md ${
        active 
          ? 'bg-purple-800 text-white' 
          : 'text-gray-300 hover:bg-gray-800 hover:text-white'
      }`}
    >
      <span className="mr-3">{icon}</span>
      <span>{text}</span>
    </button>
  );
}

// Component for loan cards
function LoanCard({ title, description, features, featured = false }) {
  return (
    <div className={`rounded-xl overflow-hidden transition-all duration-300 transform hover:-translate-y-2 ${
      featured 
        ? 'bg-gradient-to-b from-purple-900 to-gray-800 border border-purple-500 shadow-lg shadow-purple-500/20' 
        : 'bg-gray-800 border border-gray-700 hover:border-purple-500/50'
    }`}>
      {featured && (
        <div className="bg-purple-600 py-1 px-4 text-center">
          <span className="text-xs font-semibold text-white">MOST POPULAR</span>
        </div>
      )}
      <div className="p-6">
        <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
        <p className="text-gray-400 mb-4">{description}</p>
        <ul className="space-y-2">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start">
              <ChevronRight size={18} className="text-purple-400 mr-2 mt-0.5 flex-shrink-0" />
              <span className="text-gray-300">{feature}</span>
            </li>
          ))}
        </ul>
        <button className={`mt-6 w-full py-2 rounded-md transition-all duration-300 ${
          featured 
            ? 'bg-purple-600 hover:bg-purple-500 text-white' 
            : 'bg-gray-700 hover:bg-gray-600 text-white border border-purple-500/50'
        }`}>
          Learn More
        </button>
      </div>
    </div>
  );
}

// Component for process steps
function ProcessStep({ number, title, description }) {
  return (
    <div className="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-purple-500/50 transition-all duration-300">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center text-white font-bold text-lg mr-4">
          {number}
        </div>
        <h3 className="text-xl font-bold text-white">{title}</h3>
      </div>
      <p className="text-gray-400">{description}</p>
    </div>
  );
}

// Component for testimonial cards
function TestimonialCard({ quote, author, role }) {
  return (
    <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <svg className="h-8 w-8 text-purple-500 mb-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
      </svg>
      <p className="text-gray-300 mb-4 italic">{quote}</p>
      <div>
        <p className="text-white font-medium">{author}</p>
        <p className="text-purple-400 text-sm">{role}</p>
      </div>
    </div>
  );
}