import React, { useState, useEffect, useRef, useMemo } from 'react';
import { 
  Dice5, 
  MessageSquare, 
  Wallet, 
  TrendingUp, 
  History, 
  Settings, 
  ShieldCheck, 
  ChevronDown, 
  ChevronUp, 
  Send,
  X,
  QrCode,
  ArrowRightLeft,
  Trophy,
  User,
  Zap
} from 'lucide-react';

// --- Utils & Constants ---

const HOUSE_EDGE = 0.005; // 0.5%
const MAX_ROLL = 100.00;

const generateRandomId = () => Math.random().toString(36).substr(2, 9);
const generateHash = (seed) => "b10a8..." + seed.substr(0, 10) + "...f92"; // Mock hash for UI

const NAMES = ["CryptoKing", "SatoshiNakamoto", "MoonBoi", "WhaleAlert", "LTC_Lover", "DiceMaster", "HODLer", "BearMarket", "BullRun"];
const MESSAGES = ["GL everyone!", "Just withdrew 50 LTC, easy.", "Rip my balance", "Need a lucky roll", "Anyone winning?", "To the moon! 🚀", "Nice streak!", "This site is legit."];

// --- Sub-Components ---

// 1. Provably Fair Modal
const ProvablyFairModal = ({ onClose, serverSeed, clientSeed, nonce }) => (
  <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
    <div className="bg-gray-800 border border-gray-700 rounded-xl p-6 max-w-lg w-full shadow-2xl">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-bold text-white flex items-center gap-2">
          <ShieldCheck className="text-green-500" /> Provably Fair
        </h3>
        <button onClick={onClose} className="text-gray-400 hover:text-white"><X size={20} /></button>
      </div>
      <div className="space-y-4">
        <div>
          <label className="text-xs text-gray-500 uppercase font-bold">Server Seed (Hashed)</label>
          <div className="bg-gray-900 p-3 rounded text-xs text-gray-300 font-mono break-all border border-gray-700">
            {generateHash(serverSeed)}
          </div>
        </div>
        <div className="flex gap-4">
          <div className="flex-1">
            <label className="text-xs text-gray-500 uppercase font-bold">Client Seed</label>
            <div className="bg-gray-900 p-3 rounded text-sm text-white font-mono border border-gray-700">{clientSeed}</div>
          </div>
          <div className="w-24">
            <label className="text-xs text-gray-500 uppercase font-bold">Nonce</label>
            <div className="bg-gray-900 p-3 rounded text-sm text-white font-mono border border-gray-700">{nonce}</div>
          </div>
        </div>
        <p className="text-xs text-gray-500 mt-2">
          The result is determined by combining the Server Seed, Client Seed, and Nonce. 
          The Server Seed is hashed before you bet to prove we didn't change it.
        </p>
      </div>
    </div>
  </div>
);

// 2. Wallet Modal
const WalletModal = ({ onClose, type, balance, onAction }) => {
  const [amount, setAmount] = useState('');
  const [step, setStep] = useState(type === 'deposit' ? 'qr' : 'input');
  const [loading, setLoading] = useState(false);

  const handleAction = () => {
    setLoading(true);
    setTimeout(() => {
      onAction(parseFloat(amount) || 0);
      setLoading(false);
      onClose();
    }, 1500);
  };

  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
      <div className="bg-gray-800 border border-gray-700 rounded-xl p-6 max-w-md w-full shadow-2xl relative overflow-hidden">
        <div className="flex justify-between items-center mb-6">
          <h3 className="text-xl font-bold text-white flex items-center gap-2 capitalize">
            <Wallet className="text-blue-500" /> {type} LTC
          </h3>
          <button onClick={onClose} className="text-gray-400 hover:text-white"><X size={20} /></button>
        </div>

        {type === 'deposit' && (
          <div className="flex flex-col items-center gap-4">
            <div className="bg-white p-2 rounded-lg">
              <QrCode size={150} className="text-black" />
            </div>
            <p className="text-sm text-gray-400 text-center">Send Litecoin (LTC) to the address below. <br/>Your balance will update automatically.</p>
            <div className="bg-gray-900 p-3 rounded text-xs text-blue-400 font-mono break-all w-full text-center border border-gray-700 cursor-pointer hover:bg-gray-950">
              Ltc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
            </div>
            <button 
              onClick={() => { setLoading(true); setTimeout(() => { onAction(10); setLoading(false); onClose(); }, 2000); }}
              className="w-full bg-blue-600 hover:bg-blue-500 py-3 rounded-lg font-bold text-white transition disabled:opacity-50"
              disabled={loading}
            >
              {loading ? "Detecting Transaction..." : "Simulate Deposit (10 LTC)"}
            </button>
          </div>
        )}

        {type === 'withdraw' && (
          <div className="space-y-4">
            <div>
              <label className="text-xs text-gray-500 uppercase font-bold">LTC Address</label>
              <input type="text" placeholder="Paste your LTC address" className="w-full bg-gray-900 border border-gray-700 rounded p-3 text-white focus:outline-none focus:border-blue-500" />
            </div>
            <div>
              <label className="text-xs text-gray-500 uppercase font-bold">Amount</label>
              <input 
                type="number" 
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                placeholder="0.00000000" 
                className="w-full bg-gray-900 border border-gray-700 rounded p-3 text-white focus:outline-none focus:border-blue-500" 
              />
              <div className="text-right text-xs text-gray-500 mt-1">Available: {balance.toFixed(4)} LTC</div>
            </div>
            <button 
              onClick={handleAction}
              disabled={!amount || parseFloat(amount) > balance || loading}
              className="w-full bg-green-600 hover:bg-green-500 py-3 rounded-lg font-bold text-white transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? "Processing..." : "Withdraw LTC"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

// --- Main Application ---

export default function LiteDice() {
  // State: User
  const [balance, setBalance] = useState(10.0000); // Start with 10 LTC
  const [netProfit, setNetProfit] = useState(0);
  const [level, setLevel] = useState(0);

  // State: Game
  const [betAmount, setBetAmount] = useState(0.1);
  const [target, setTarget] = useState(50.00); // Roll Under
  const [rollResult, setRollResult] = useState(null);
  const [isRolling, setIsRolling] = useState(false);
  const [gameHistory, setGameHistory] = useState([]);
  
  // State: UI
  const [activeTab, setActiveTab] = useState('all'); // all, highrollers, mine
  const [chatOpen, setChatOpen] = useState(true);
  const [modal, setModal] = useState(null); // 'deposit', 'withdraw', 'fair'
  const [seed, setSeed] = useState({ server: generateRandomId(), client: generateRandomId(), nonce: 0 });

  // State: Data Feeds
  const [messages, setMessages] = useState([
    { id: 1, user: 'System', text: 'Welcome to LiteDice! Provably Fair & Instant Withdrawals.', type: 'system' }
  ]);
  const [liveBets, setLiveBets] = useState([]);

  // --- Derived Values ---
  const winChance = target; 
  const multiplier = (100 - HOUSE_EDGE * 100) / winChance; // Classic formula (99.5 / chance)
  const potentialProfit = (betAmount * multiplier) - betAmount;

  // --- Logic ---

  // Leveling Logic: 1 LTC profit = 1 Level
  useEffect(() => {
    const newLevel = Math.max(0, Math.floor(netProfit));
    setLevel(newLevel);
  }, [netProfit]);

  // Simulation: Add fake live bets and chat messages
  useEffect(() => {
    const interval = setInterval(() => {
      // Add fake bet
      const isWin = Math.random() > 0.5;
      const fakeBet = {
        id: generateRandomId(),
        user: NAMES[Math.floor(Math.random() * NAMES.length)],
        bet: (Math.random() * 2).toFixed(2),
        multiplier: (1 + Math.random() * 3).toFixed(2),
        profit: isWin ? (Math.random() * 1).toFixed(4) : 0,
        isWin: isWin,
        isHighRoller: Math.random() > 0.9,
      };
      setLiveBets(prev => [fakeBet, ...prev].slice(0, 20));

      // Add fake chat occasionally
      if (Math.random() > 0.7) {
        const msg = {
          id: generateRandomId(),
          user: NAMES[Math.floor(Math.random() * NAMES.length)],
          text: MESSAGES[Math.floor(Math.random() * MESSAGES.length)],
          level: Math.floor(Math.random() * 10),
        };
        setMessages(prev => [...prev, msg].slice(-30));
      }
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const handleRoll = () => {
    if (betAmount > balance) return;
    if (betAmount <= 0) return;
    if (isRolling) return;

    setIsRolling(true);
    setRollResult(null);

    // deduct bet immediately
    setBalance(prev => prev - betAmount);

    // Simulate Network/Anim Delay
    setTimeout(() => {
      const result = Math.random() * 100;
      const finalResult = parseFloat(result.toFixed(2));
      const win = finalResult < target;
      
      let payout = 0;
      let profit = -betAmount;

      if (win) {
        payout = betAmount * multiplier;
        profit = payout - betAmount;
        setBalance(prev => prev + payout);
      }

      setNetProfit(prev => prev + profit);
      setSeed(prev => ({ ...prev, nonce: prev.nonce + 1 }));
      setRollResult(finalResult);
      setIsRolling(false);

      const newBet = {
        id: generateRandomId(),
        user: 'You',
        bet: betAmount.toFixed(4),
        multiplier: multiplier.toFixed(2),
        profit: profit,
        isWin: win,
        target: target,
        result: finalResult
      };

      setGameHistory(prev => [newBet, ...prev]);
      setLiveBets(prev => [newBet, ...prev].slice(0, 20));

      // Trigger "High Roller" chat if big win
      if (win && profit > 0.5) {
        setMessages(prev => [...prev, {
          id: generateRandomId(),
          user: 'System',
          text: `BIG WIN! User You won ${profit.toFixed(4)} LTC!`,
          type: 'highroller'
        }]);
      }

    }, 600); // 600ms animation duration
  };

  const handleSendMessage = (e) => {
    e.preventDefault();
    const input = e.target.elements.msg;
    if (!input.value.trim()) return;
    setMessages(prev => [...prev, {
      id: generateRandomId(),
      user: 'You',
      text: input.value,
      level: level
    }]);
    input.value = '';
  };

  // --- Render Helpers ---

  const getSliderBackground = () => {
    const percentage = target;
    return {
      background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${percentage}%, #374151 ${percentage}%, #374151 100%)`
    };
  };

  return (
    <div className="flex flex-col h-screen bg-gray-900 text-gray-200 font-sans overflow-hidden selection:bg-blue-500 selection:text-white">
      {/* Modals */}
      {modal === 'provablyFair' && <ProvablyFairModal onClose={() => setModal(null)} {...seed} />}
      {modal === 'deposit' && <WalletModal onClose={() => setModal(null)} type="deposit" balance={balance} onAction={(amt) => setBalance(prev => prev + amt)} />}
      {modal === 'withdraw' && <WalletModal onClose={() => setModal(null)} type="withdraw" balance={balance} onAction={(amt) => setBalance(prev => prev - amt)} />}

      {/* --- Header --- */}
      <header className="flex-none h-16 bg-gray-800 border-b border-gray-700 flex items-center justify-between px-4 lg:px-6 z-20">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2 text-blue-500 font-bold text-xl tracking-tighter">
            <Dice5 size={28} className="animate-pulse-slow" />
            <span>LITEDICE</span>
          </div>
          <div className="hidden md:flex items-center gap-2 px-3 py-1 bg-gray-700/50 rounded-full border border-gray-600">
            <Trophy size={14} className="text-yellow-500" />
            <span className="text-xs font-bold text-gray-300 uppercase">Lvl {level}</span>
            <div className="w-20 h-1.5 bg-gray-700 rounded-full overflow-hidden">
               <div 
                 className="h-full bg-yellow-500" 
                 style={{ width: `${Math.max(0, (netProfit - Math.floor(netProfit)) * 100)}%` }}
               ></div>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="hidden sm:flex flex-col items-end mr-2">
            <span className="text-xs text-gray-400">Your Balance</span>
            <span className="font-mono font-bold text-white tracking-wide">{balance.toFixed(4)} LTC</span>
          </div>
          <button 
            onClick={() => setModal('deposit')}
            className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-lg shadow-blue-900/20 transition"
          >
            Wallet
          </button>
          <button 
            onClick={() => setChatOpen(!chatOpen)} 
            className="p-2 text-gray-400 hover:text-white lg:hidden"
          >
            <MessageSquare size={20} />
          </button>
        </div>
      </header>

      {/* --- Main Content --- */}
      <main className="flex-1 flex overflow-hidden relative">
        
        {/* Game Area */}
        <div className="flex-1 flex flex-col overflow-y-auto">
          
          {/* Dice Board */}
          <div className="flex-1 p-4 lg:p-8 flex flex-col items-center justify-center min-h-[500px]">
            
            <div className="w-full max-w-4xl bg-gray-800/50 border border-gray-700 rounded-2xl p-6 lg:p-10 shadow-2xl relative overflow-hidden">
              {/* Provably Fair Badge */}
              <div 
                onClick={() => setModal('provablyFair')}
                className="absolute top-4 right-4 flex items-center gap-1 text-xs text-gray-500 hover:text-green-500 cursor-pointer transition"
              >
                <ShieldCheck size={14} />
                <span>Fairness</span>
              </div>

              {/* Result Display */}
              <div className="relative h-32 mb-12 flex items-center justify-center">
                 {/* The Track */}
                 <div className="absolute top-1/2 left-0 w-full h-4 bg-gray-700 rounded-full -translate-y-1/2 overflow-hidden">
                    <div className="h-full bg-blue-500/20 w-full"></div>
                    {/* Winning Zone Marker */}
                    <div 
                      className="absolute top-0 left-0 h-full bg-blue-500 transition-all duration-300 opacity-50"
                      style={{ width: `${target}%` }}
                    ></div>
                 </div>

                 {/* The Slider/Dice */}
                 <div 
                    className="absolute top-1/2 -translate-y-1/2 transition-all duration-[600ms] ease-out z-10"
                    style={{ 
                      left: isRolling ? `${Math.random() * 90 + 5}%` : `${rollResult !== null ? rollResult : 50}%`,
                      transform: 'translateX(-50%)'
                    }}
                 >
                    <div className={`
                      w-24 h-24 rounded-2xl flex items-center justify-center text-3xl font-black shadow-lg border-4
                      ${isRolling ? 'bg-gray-700 border-gray-600 text-gray-400 animate-bounce' : 
                        rollResult !== null 
                          ? (rollResult < target ? 'bg-green-500 border-green-400 text-white shadow-green-500/50' : 'bg-red-500 border-red-400 text-white shadow-red-500/50')
                          : 'bg-gray-700 border-gray-600 text-white'}
                    `}>
                      {isRolling ? <Dice5 className="animate-spin" /> : (rollResult !== null ? rollResult.toFixed(2) : "0.00")}
                    </div>
                 </div>
              </div>

              {/* Controls */}
              <div className="bg-gray-900/80 rounded-xl p-6 border border-gray-700/50">
                
                {/* Sliders & Stats */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                   <div className="bg-gray-800 p-4 rounded-lg border border-gray-700">
                      <div className="text-xs text-gray-400 uppercase font-bold mb-1">Win Chance</div>
                      <div className="text-2xl font-mono text-white">{winChance.toFixed(2)}%</div>
                   </div>
                   <div className="bg-gray-800 p-4 rounded-lg border border-gray-700 md:col-span-2">
                      <div className="flex justify-between mb-2">
                        <span className="text-xs text-gray-400 uppercase font-bold">Roll Under</span>
                        <span className="text-xs text-white font-bold">{target.toFixed(2)}</span>
                      </div>
                      <input 
                        type="range" 
                        min="2" 
                        max="98" 
                        step="0.01"
                        value={target}
                        onChange={(e) => setTarget(parseFloat(e.target.value))}
                        style={getSliderBackground()}
                        className="w-full h-3 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-thumb-custom"
                      />
                   </div>
                </div>

                {/* Bet Input & Button */}
                <div className="flex flex-col md:flex-row gap-4 items-end">
                   <div className="flex-1 w-full bg-gray-800 p-2 rounded-lg border border-gray-700 flex items-center">
                      <div className="px-3">
                         <span className="text-xs text-gray-500 font-bold block">BET AMOUNT</span>
                         <span className="text-xs text-blue-500">LTC</span>
                      </div>
                      <input 
                        type="number" 
                        value={betAmount} 
                        onChange={(e) => setBetAmount(parseFloat(e.target.value))}
                        className="flex-1 bg-transparent text-right text-xl font-mono font-bold text-white focus:outline-none px-2"
                      />
                      <div className="flex gap-1 ml-2">
                        <button onClick={() => setBetAmount(prev => prev / 2)} className="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs">½</button>
                        <button onClick={() => setBetAmount(prev => prev * 2)} className="px-2 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs">2x</button>
                      </div>
                   </div>

                   <div className="w-full md:w-auto flex flex-col items-center">
                     <span className="text-xs text-gray-500 mb-1">Payout: {multiplier.toFixed(2)}x</span>
                     <button 
                        onClick={handleRoll}
                        disabled={isRolling}
                        className={`
                           w-full md:w-48 h-14 rounded-xl font-bold text-xl shadow-lg transition-all transform active:scale-95
                           ${isRolling ? 'bg-gray-700 cursor-not-allowed text-gray-500' : 'bg-green-500 hover:bg-green-400 text-gray-900 shadow-green-500/20'}
                        `}
                     >
                        {isRolling ? 'Rolling...' : 'ROLL DICE'}
                     </button>
                   </div>
                </div>

                <div className="mt-4 flex justify-between text-xs text-gray-500">
                   <span>Profit on Win: <span className="text-green-500 font-bold">+{potentialProfit.toFixed(4)} LTC</span></span>
                   <div className="flex gap-2">
                      <button onClick={() => setModal('deposit')} className="hover:text-white underline">Deposit</button>
                      <button onClick={() => setModal('withdraw')} className="hover:text-white underline">Withdraw</button>
                   </div>
                </div>

              </div>
            </div>
          </div>

          {/* Recent Bets Table */}
          <div className="flex-none bg-gray-800 border-t border-gray-700">
             <div className="flex border-b border-gray-700">
                <button 
                  onClick={() => setActiveTab('all')}
                  className={`px-6 py-3 text-sm font-bold border-b-2 transition ${activeTab === 'all' ? 'border-blue-500 text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
                >
                   All Bets
                </button>
                <button 
                  onClick={() => setActiveTab('highrollers')}
                  className={`px-6 py-3 text-sm font-bold border-b-2 transition ${activeTab === 'highrollers' ? 'border-yellow-500 text-yellow-500' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
                >
                   High Rollers
                </button>
                <button 
                  onClick={() => setActiveTab('mine')}
                  className={`px-6 py-3 text-sm font-bold border-b-2 transition ${activeTab === 'mine' ? 'border-green-500 text-green-500' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
                >
                   My Bets
                </button>
             </div>
             
             <div className="h-64 overflow-y-auto">
               <table className="w-full text-left text-sm">
                 <thead className="bg-gray-900/50 text-gray-500 sticky top-0 backdrop-blur-sm">
                   <tr>
                     <th className="px-6 py-2 font-normal">Game</th>
                     <th className="px-6 py-2 font-normal">User</th>
                     <th className="px-6 py-2 font-normal text-right">Bet Amount</th>
                     <th className="px-6 py-2 font-normal text-right">Multiplier</th>
                     <th className="px-6 py-2 font-normal text-right">Profit</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-700/50">
                    {(activeTab === 'mine' ? gameHistory : liveBets)
                      .filter(b => activeTab !== 'highrollers' || b.profit > 1.0 || b.isHighRoller)
                      .map((bet) => (
                      <tr key={bet.id} className="hover:bg-gray-700/30 transition">
                         <td className="px-6 py-2 text-gray-400 flex items-center gap-2">
                           <Dice5 size={14} /> Dice
                         </td>
                         <td className={`px-6 py-2 font-medium ${bet.user === 'You' ? 'text-blue-400' : 'text-gray-300'}`}>
                           {bet.user}
                         </td>
                         <td className="px-6 py-2 text-right font-mono text-gray-300">
                           {parseFloat(bet.bet).toFixed(4)} <span className="text-gray-600 text-xs">LTC</span>
                         </td>
                         <td className="px-6 py-2 text-right font-mono text-gray-400">
                           {bet.multiplier}x
                         </td>
                         <td className={`px-6 py-2 text-right font-mono font-bold ${bet.isWin ? 'text-green-400' : 'text-gray-600'}`}>
                           {bet.isWin ? '+' : ''}{parseFloat(bet.profit).toFixed(4)}
                         </td>
                      </tr>
                    ))}
                    {liveBets.length === 0 && (
                      <tr><td colSpan={5} className="text-center py-8 text-gray-500">Waiting for bets...</td></tr>
                    )}
                 </tbody>
               </table>
             </div>
          </div>

        </div>

        {/* --- Chat Sidebar --- */}
        <div className={`
          absolute inset-y-0 right-0 w-72 bg-gray-800 border-l border-gray-700 transform transition-transform duration-300 z-30 flex flex-col
          ${chatOpen ? 'translate-x-0' : 'translate-x-full'}
          lg:relative lg:translate-x-0
        `}>
          <div className="p-4 border-b border-gray-700 flex justify-between items-center bg-gray-850">
            <h3 className="font-bold text-gray-300 flex items-center gap-2">
              <MessageSquare size={16} /> Global Chat
            </h3>
            <div className="flex items-center gap-1 text-xs text-green-500">
               <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
               {120 + Math.floor(Math.random()*50)} Online
            </div>
            <button onClick={() => setChatOpen(false)} className="lg:hidden text-gray-400"><X size={18}/></button>
          </div>

          <div className="flex-1 overflow-y-auto p-4 space-y-4">
             {messages.map((msg) => (
               <div key={msg.id} className={`flex flex-col animate-fadeIn ${msg.type === 'system' ? 'bg-blue-900/20 p-2 rounded border border-blue-500/20' : ''}`}>
                  {msg.type !== 'system' && (
                    <div className="flex items-baseline gap-2 mb-0.5">
                       {msg.level !== undefined && (
                         <span className="text-[10px] px-1 bg-gray-700 text-gray-300 rounded border border-gray-600">
                           {msg.level}
                         </span>
                       )}
                       <span className={`text-sm font-bold ${msg.user === 'You' ? 'text-blue-400' : 'text-gray-300'}`}>
                         {msg.user}
                       </span>
                       <span className="text-[10px] text-gray-600">{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
                    </div>
                  )}
                  <p className={`text-sm ${msg.type === 'highroller' ? 'text-yellow-400 font-bold' : msg.type === 'system' ? 'text-blue-300' : 'text-gray-400'}`}>
                    {msg.text}
                  </p>
               </div>
             ))}
          </div>

          <form onSubmit={handleSendMessage} className="p-3 bg-gray-900 border-t border-gray-700 flex gap-2">
             <input 
               name="msg" 
               autoComplete="off"
               placeholder="Type a message..." 
               className="flex-1 bg-gray-800 text-sm text-white px-3 py-2 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
             />
             <button type="submit" className="bg-blue-600 hover:bg-blue-500 p-2 rounded text-white transition">
               <Send size={16} />
             </button>
          </form>
        </div>

      </main>

      {/* Mobile Overlay for Chat */}
      {chatOpen && (
        <div 
          onClick={() => setChatOpen(false)}
          className="lg:hidden fixed inset-0 bg-black/50 z-20"
        />
      )}

      {/* Global Styles for Range Slider */}
      <style>{`
        .slider-thumb-custom::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 20px;
          height: 20px;
          background: #fff;
          border-radius: 50%;
          cursor: pointer;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
          transition: transform 0.1s;
        }
        .slider-thumb-custom::-webkit-slider-thumb:hover {
          transform: scale(1.2);
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(5px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out forwards;
        }
      `}</style>
    </div>
  );
}