import React, { useState } from 'react';

import { Menu, Home, CreditCard, DollarSign, LogIn, UserPlus, MessageCircle, X,

ArrowLeft } from 'lucide-react';

// Updated GamesPage component

const GamesPage = () => {
const [selectedGame, setSelectedGame] = useState(null);

const games = [
{
name: 'Mobile Legends',
icon: '🏆',
description: 'Top up diamonds for Mobile Legends',
topUpOptions: [
{ amount: '100 Diamonds', price: 'Rp 25.000' },
{ amount: '250 Diamonds', price: 'Rp 55.000' },
{ amount: '500 Diamonds', price: 'Rp 100.000' },
]
},
{
name: 'Free Fire',
icon: '🔥',
description: 'Get diamonds for Free Fire',
topUpOptions: [
{ amount: '100 Diamonds', price: 'Rp 15.000' },
{ amount: '310 Diamonds', price: 'Rp 45.000' },
{ amount: '520 Diamonds', price: 'Rp 70.000' },
]
},
{
name: 'Growtopia',
icon: '🌱',
description: 'Purchase gems for Growtopia',
topUpOptions: [
{ amount: '1000 Gems', price: 'Rp 20.000' },
{ amount: '2500 Gems', price: 'Rp 45.000' },
{ amount: '5000 Gems', price: 'Rp 80.000' },
]
},
];

const handleTopUp = (game, option) => {

[Link](`Top up ${[Link]} for ${[Link]} at ${[Link]}`);
// Here you would typically integrate with a payment gateway
alert(`Proceeding to payment for ${[Link]} in ${[Link]} at $
{[Link]}`);
};

if (selectedGame) {
return (
<div className="p-4">
<button
onClick={() => setSelectedGame(null)}
className="mb-4 flex items-center text-indigo-600 hover:text-indigo-800"
>
<ArrowLeft size={20} className="mr-2" /> Back to Games
</button>
<h1 className="text-2xl font-bold mb-4">{[Link]} Top-Up</h1>
<p className="mb-4">{[Link]}</p>
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{[Link]((option, index) => (
<div key={index} className="bg-white p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold mb-2">{[Link]}</h3>
<p className="text-gray-600 mb-4">{[Link]}</p>
<button
onClick={() => handleTopUp(selectedGame, option)}
className="w-full bg-indigo-600 text-white py-2 px-4 rounded
hover:bg-indigo-700 transition-colors duration-200"
>
Buy Now
</button>
</div>
))}
</div>
<div className="mt-8 p-4 bg-green-100 rounded-lg">
<h2 className="text-lg font-semibold mb-2">Sumber Top-Up Termurah dan
Terpercaya</h2>
<p>Kami menyediakan harga top-up termurah di pasaran dengan jaminan
keamanan transaksi. Semua pembelian dilindungi dan dijamin sampai ke akun Anda.</p>
<ul className="list-disc list-inside mt-2">
<li>Proses instan 24/7</li>
<li>Customer support selama 24 jam</li>
<li>Berbagai metode pembayaran</li>
<li>Cashback dan diskon regular</li>
</ul>
</div>
</div>
);
}

return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">Games</h1>
<p className="mb-4">Choose a game to top up:</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{[Link]((game, index) => (
<div key={index} className="bg-white p-4 rounded-lg shadow-md
hover:shadow-lg transition-shadow duration-200">
<div className="flex items-center mb-2">
<span className="text-3xl mr-2">{[Link]}</span>
<h2 className="text-xl font-semibold">{[Link]}</h2>
</div>
<p className="text-gray-600 mb-4">{[Link]}</p>
<button
onClick={() => setSelectedGame(game)}
className="w-full bg-indigo-600 text-white py-2 px-4 rounded
hover:bg-indigo-700 transition-colors duration-200"
>
Top Up Now
</button>
</div>
))}
</div>
</div>
);
};

// Other components
const TopUpPage = () => {
const paymentOptions = [
{ name: 'ShopeePay', icon: '💳' },
{ name: 'Dana', icon: '💰' },
{ name: 'OVO', icon: '💵' },
{ name: 'GoPay', icon: '🚗' },
];

return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">TopUp</h1>
<p className="mb-4">Choose your payment method to recharge your game
balance:</p>
<div className="grid grid-cols-2 gap-4">
{[Link]((option, index) => (
<button
key={index}
className="flex items-center justify-center p-4 bg-indigo-100 hover:bg-
indigo-200 rounded-lg transition-colors duration-200"
>
<span className="text-2xl mr-2">{[Link]}</span>
<span className="font-semibold">{[Link]}</span>
</button>
))}
</div>
<div className="mt-6 p-4 bg-gray-100 rounded-lg">
<h2 className="text-lg font-semibold mb-2">Payment Details:</h2>
<p><strong>Number:</strong> 0895601140803</p>
<p><strong>Name:</strong> Nashhabil ahmad nusaybah</p>
</div>
</div>
);
};

const PaymentPage = () => (

<div className="p-4">
<h1 className="text-2xl font-bold">Payment</h1>
<p>View payment information here.</p>
</div>
);

const LoginPage = () => (

<div className="p-4">
<h1 className="text-2xl font-bold">Login</h1>
<p>Login to your account here.</p>
</div>
);

const RegisterPage = () => (

<div className="p-4">
<h1 className="text-2xl font-bold">Register</h1>
<p>Create a new account here.</p>
</div>
);

const ContactSupportPage = () => (

<div className="p-4">
<h1 className="text-2xl font-bold mb-4">Contact Support</h1>
<p className="mb-4">Need help? Contact our support team:</p>
 <div className="bg-green-100 p-4 rounded-lg flex items-center">
<span className="text-2xl mr-3">📱</span>
<div>
<p className="font-semibold">WhatsApp Support:</p>
<a href="[Link] className="text-green-600
hover:underline">088991374920</a>
</div>
</div>
</div>
);

const LiveChat = () => {

const [isOpen, setIsOpen] = useState(false);
const [messages, setMessages] = useState([]);
const [inputMessage, setInputMessage] = useState('');

const toggleChat = () => setIsOpen(!isOpen);

const sendMessage = (e) => {

[Link]();
if ([Link]() !== '') {
setMessages([...messages, { text: inputMessage, sender: 'user' }]);
setInputMessage('');
// Simulate a response from support
setTimeout(() => {
setMessages(prev => [...prev, { text: "Thank you for your message. Our
support team will get back to you soon.", sender: 'support' }]);
}, 1000);
}
};

return (
<>
<button
onClick={toggleChat}
className="fixed bottom-4 right-4 z-50 p-3 bg-indigo-600 text-white
rounded-full shadow-lg hover:bg-indigo-700 transition-colors duration-200"
>
{isOpen ? <X size={24} /> : <MessageCircle size={24} />}
</button>
{isOpen && (
<div className="fixed bottom-20 right-4 w-80 h-96 bg-white rounded-lg
shadow-xl overflow-hidden flex flex-col z-40">
<div className="bg-indigo-600 text-white p-4">
<h3 className="font-bold">Live Chat Support</h3>
</div>
<div className="flex-1 p-4 overflow-y-auto">
{[Link]((msg, index) => (
<div key={index} className={`mb-2 ${[Link] === 'user' ? 'text-
right' : 'text-left'}`}>
<span className={`inline-block p-2 rounded-lg ${[Link] ===
'user' ? 'bg-indigo-100' : 'bg-gray-200'}`}>
{[Link]}
</span>
</div>
))}
</div>
<form onSubmit={sendMessage} className="p-4 border-t">
<div className="flex">
 <input
type="text"
value={inputMessage}
onChange={(e) => setInputMessage([Link])}
placeholder="Type your message..."
className="flex-1 p-2 border rounded-l-lg focus:outline-none
focus:ring-2 focus:ring-indigo-600"
/>
<button type="submit" className="bg-indigo-600 text-white p-2
rounded-r-lg hover:bg-indigo-700">Send</button>
</div>
</form>
</div>
)}
</>
);
};

const MenuItem = ({ icon: Icon, label, onClick }) => (

<li className="mb-2">
<button
onClick={onClick}
className="flex items-center w-full px-4 py-2 text-left text-gray-700
hover:bg-indigo-100 hover:text-indigo-700 rounded-lg transition-colors duration-
200"
>
<Icon className="mr-3" size={20} />
<span>{label}</span>
</button>
</li>
);

const AttractiveMenu = () => {

const [isOpen, setIsOpen] = useState(false);
const [currentPage, setCurrentPage] = useState('games');

const toggleMenu = () => setIsOpen(!isOpen);

const navigate = (page) => {

setCurrentPage(page);
setIsOpen(false);
};

const renderPage = () => {

switch (currentPage) {
case 'games': return <GamesPage />;
case 'topup': return <TopUpPage />;
case 'payment': return <PaymentPage />;
case 'login': return <LoginPage />;
case 'register': return <RegisterPage />;
case 'support': return <ContactSupportPage />;
default: return <GamesPage />;
}
};

return (
<div className="relative min-h-screen">
<button
onClick={toggleMenu}
 className="fixed top-4 left-4 z-50 p-2 bg-indigo-600 text-white rounded-
full shadow-lg hover:bg-indigo-700 transition-colors duration-200"
>
<Menu size={24} />
</button>

<nav className={`fixed top-0 left-0 h-full w-64 bg-white shadow-2xl transform

${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300
ease-in-out z-40`}>
<div className="p-6">
<h2 className="text-2xl font-bold text-indigo-700 mb-6">TopUp Game</h2>
<ul>
<MenuItem icon={Home} label="Games" onClick={() =>
navigate('games')} />
<MenuItem icon={CreditCard} label="TopUp" onClick={() =>
navigate('topup')} />
<MenuItem icon={DollarSign} label="Pembayaran" onClick={() =>
navigate('payment')} />
<MenuItem icon={LogIn} label="Login" onClick={() =>
navigate('login')} />
<MenuItem icon={UserPlus} label="Register" onClick={() =>
navigate('register')} />
<MenuItem icon={MessageCircle} label="Contact Support" onClick={() =>
navigate('support')} />
</ul>
</div>
</nav>

{isOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-30"
onClick={toggleMenu}
></div>
)}

<main className="pl-16 pt-16">

{renderPage()}
</main>

<LiveChat />
</div>
);
};

export default AttractiveMenu;