import React, { useState } from 'react';import { Diamond, Sparkles, Gift, CreditCard, Shield, Zap } from 'lucide-react';import { PaymentModal } from './payment-modal';export const DiamondSection: React.FC = () => {const [selectedAmount, setSelectedAmount] = useState(1000);const [customAmount, setCustomAmount] = useState('');const [showPayment, setShowPayment] = useState(false);const diamondPackages = [ { amount: 100, price: 1, bonus: 0, popular: false }, { amount: 500, price: 4, bonus: 50, popular: false }, { amount: 1000, price: 8, bonus: 150, popular: true }, { amount: 2500, price: 18, bonus: 500, popular: false }, { amount: 5000, price: 35, bonus: 1200, popular: false }, { amount: 10000, price: 65, bonus: 3000, popular: false }, ];const currentBalance = 1250;const handlePurchase = () => {setShowPayment(true); };const getUZSPrice = (usdPrice: number) => {return (usdPrice * 11000); };const selectedPackage = diamondPackages.find(p => p.amount === selectedAmount);const finalPrice = selectedPackage?.price || (selectedAmount * 0.01);const totalDiamonds = selectedAmount + (selectedPackage?.bonus || 0);return (<div className="space-y-6 max-w-full overflow-hidden"> {/* Header /}<div className="bg-white rounded-2xl text-gray-700 relative overflow-hidden"><div className=" rounded-2xl color-white text-center"> {/ GIF tepada o'rtada /}<div className="flex justify-center "><imgsrc="https://media1.tenor.com/m/MxAltJxjlL8AAAAC/utya-duck.gif"alt="Diamond animation"className="w-52 h-52 object-contain p-2"/></div><h1 className="text-2xl font-bold mb-4">Diamond Store</h1> {/ Current Balance /}<div className="bg-slate-900 rounded-xl p-4 "><p className="text-white text-sm mb-1">Current Balance</p><div className="flex items-center justify-center gap-2"><Diamond className="w-6 h-6 text-white" /><span className="text-3xl text-white font-bold">{currentBalance.toLocaleString()}</span></div><p className="text-white text-sm mt-2">Worth: ${(currentBalance * 0.01).toFixed(2)}</p></div></div> {/ Animated diamonds /}</div> {/ Promotion Banner /}<div className="bg-slate-900 rounded-2xl p-4 text-white"><div className="flex items-center gap-3"><Sparkles className="w-8 h-8 text-white flex-shrink-0" /><div className="flex-1 min-w-0"><h3 className="font-bold">Promote Your Account</h3><p className="text-orange-100 text-sm">150 diamonds = $5 USD = 55,000 UZS</p></div><div className="text-right flex-shrink-0"><div className="text-sm opacity-90">Featured for 24h</div></div></div></div> {/ Diamond Packages /}<div className="max-w-full"><div className="flex items-center gap-2 mb-6"><Sparkles className="w-5 h-5 text-slate-900" /><h2 className="text-xl font-bold text-slate-900">Choose Package</h2></div><div className="grid grid-cols-2 gap-3 max-w-full"> {diamondPackages.map((pkg) => (<divkey={pkg.amount}onClick={() => setSelectedAmount(pkg.amount)}className={relative cursor-pointer rounded-2xl p-3 border-2 transition-all duration-300 hover:scale-105 max-w-full ${selectedAmount === pkg.amount? 'border-slate-900 bg-slate-900 text-slate-900 ': 'bg-slate-900 border-slate-800'} ${pkg.popular ? 'ring-2 ring-slate-800 ring-offset-2' : ''}}> {pkg.popular && (<div className="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-2 py-1 rounded-full text-xs font-bold whitespace-nowrap"> Most Popular</div> )}<div className="text-center space-y-2"><div className="flex items-center justify-center gap-1"><Diamond className="w-4 h-4 text-slate-800" /><span className="text-base font-bold text-slate-900"> {pkg.amount >= 1000 ? ${pkg.amount / 1000}K : pkg.amount}</span></div> {pkg.bonus > 0 && (<div className="bg-white px-2 py-1 rounded-lg text-xs font-medium"> +{pkg.bonus >= 1000 ? ${pkg.bonus / 1000}K : pkg.bonus}</div> )}<div className="space-y-1"><div className="text-lg font-bold text-white"> ${pkg.price}</div><div className="text-xs text-white break-words"> {getUZSPrice(pkg.price).toLocaleString()} UZS</div></div></div></div> ))}</div> {/ Custom Amount /}<div className="mt-6 bg-white rounded-2xl p-4 border border-gray-200"><h3 className="font-semibold text-slate-900 mb-3">Custom Amount</h3><div className="flex gap-3"><div className="flex-1"><inputtype="number"placeholder="Enter custom amount..."value={customAmount}onChange={(e) => setCustomAmount(e.target.value)}className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"/></div><buttononClick={() => {if (customAmount) {setSelectedAmount(parseInt(customAmount));setCustomAmount(''); } }}className="px-4 py-3 bg-slate-900 text-white rounded-xl font-medium hover:bg-purple-700 transition-colors duration-300 whitespace-nowrap"> Select</button></div></div></div> {/ Purchase Summary /}<div className="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm"><h3 className="font-semibold text-gray-900 mb-4">Purchase Summary</h3><div className="space-y-3"><div className="flex justify-between"><span className="text-gray-600">Diamonds</span><span className="font-medium">{selectedAmount.toLocaleString()}</span></div> {selectedPackage?.bonus && (<div className="flex justify-between text-green-600"><span>Bonus Diamonds</span><span className="font-medium">+{selectedPackage.bonus}</span></div> )}<div className="border-t pt-3"><div className="flex justify-between text-lg font-semibold mb-1"><span>Total (USD)</span><span className="text-purple-600">${finalPrice.toFixed(2)}</span></div><div className="flex justify-between text-sm text-gray-500"><span>Total (UZS)</span><span>{getUZSPrice(finalPrice).toLocaleString()} UZS</span></div></div></div><buttononClick={handlePurchase}className="w-full mt-6 bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 rounded-xl font-semibold text-lg hover:shadow-lg transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2"><CreditCard className="w-5 h-5" /> Purchase Now</button></div> {/ Features /}<div className="grid grid-cols-1 gap-4"><div className="bg-white rounded-xl p-4 border border-gray-200 text-center"><Shield className="w-8 h-8 text-green-500 mx-auto mb-2" /><h4 className="font-semibold text-gray-900 mb-1">Secure Payment</h4><p className="text-sm text-gray-600">256-bit SSL encryption</p></div><div className="bg-white rounded-xl p-4 border border-gray-200 text-center"><Zap className="w-8 h-8 text-yellow-500 mx-auto mb-2" /><h4 className="font-semibold text-gray-900 mb-1">Instant Delivery</h4><p className="text-sm text-gray-600">Diamonds added immediately</p></div><div className="bg-white rounded-xl p-4 border border-gray-200 text-center"><Gift className="w-8 h-8 text-purple-500 mx-auto mb-2" /><h4 className="font-semibold text-gray-900 mb-1">Bonus Rewards</h4><p className="text-sm text-gray-600">Extra diamonds on bulk purchases</p></div></div> {/ Payment Modal */}<PaymentModalisOpen={showPayment}onClose={() => setShowPayment(false)}amount={selectedAmount}diamonds={totalDiamonds}usdPrice={finalPrice}uzsPrice={getUZSPrice(finalPrice)}/></div> );}; shunga oxshash qilib togirlang buzilishlar bor va yana tanlovlarni ustma ust uzunchoq qiling widt uzun height kichiki qator qilib qiling yaxshi chiqadi