[V0_FILE]markdown:file="README.md" isMerged="true" # Next.js Scaffold *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/nexorasims-projects/v0-next-js-scaffold) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/kzLddAdKAr8) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/nexorasims-projects/v0-next-js-scaffold](https://vercel.com/nexorasims-projects/v0-next-js-scaffold)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/kzLddAdKAr8](https://v0.dev/chat/projects/kzLddAdKAr8)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" "use client" import AnimatedSection from "@/components/animated-section" import { motion } from "framer-motion" import { CheckCircle, Users, Target, Award, TrendingUp, Globe } from "lucide-react" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" export default function AboutPage() { const { t } = useLanguage() const benefits = [ { title: t("Space Saving", "နေရာချွေတာခြင်း"), traditional: t("Physical card takes up space", "ရုပ်ပိုင်းဆိုင်ရာကဒ်သည် နေရာယူသည်"), esim: t("Built into your device's hardware", "သင့်စက်ပစ္စည်း၏ ဟာ့ဒ်ဝဲထဲတွင် ထည့်သွင်းထားသည်"), }, { title: t("Activation", "အသုံးပြုခွင့်ရရှိခြင်း"), traditional: t("Visit store, wait for physical card", "ဆိုင်သို့သွားရောက်ပြီး ရုပ်ပိုင်းဆိုင်ရာကဒ်ကို စောင့်ဆိုင်းရသည်"), esim: t("Instant activation via QR code", "QR ကုဒ်မှတဆင့် ချက်ချင်းအသုံးပြုနိုင်"), }, { title: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား"), traditional: t("Need to swap physical cards", "ရုပ်ပိုင်းဆိုင်ရာကဒ်များကို လဲလှယ်ရန် လိုအပ်သည်"), esim: t("Store multiple profiles on one device", "စက်တစ်ခုတည်းတွင် ပရိုဖိုင်အများအပြား သိမ်းဆည်းနိုင်"), }, { title: t("Durability", "ခံနိုင်ရည်ရှိမှု"), traditional: t("Can be damaged or lost", "ပျက်စီးနိုင် သို့မဟုတ် ပျောက်ဆုံးနိုင်"), esim: t("Cannot be physically damaged", "ရုပ်ပိုင်းဆိုင်ရာအရ ပျက်စီးနိုင်ခြင်း မရှိပါ"), }, { title: t("Eco-friendly", "သဘာဝပတ်ဝန်းကျင်နှင့် သဟဇာတဖြစ်မှု"), traditional: t("Plastic waste", "ပလတ်စတစ်စွန့်ပစ်ပစ္စည်း"), esim: t("No physical materials needed", "ရုပ်ပိုင်းဆိုင်ရာပစ္စည်းများ မလိုအပ်ပါ"), }, ] return ( <>

About eSIM Myanmar } mm={ <> eSIM Myanmar အကြောင်း } />

Our Vision & Mission } mm={ <> ကျွန်ုပ်တို့၏ မျှော်မှန်းချက်နှင့် ရည်မှန်းချက် } />

eSIM vs Traditional SIM } mm={ <> eSIM နှင့် ရိုးရိုး SIM နှိုင်းယှဉ်ချက် } />

eSIM

{benefits.map((benefit, index) => (

{benefit.title}

{benefit.traditional}

{benefit.esim}

))}

{/* Background decoration */}

Why Choose eSIM Myanmar? } mm={ <> ဘာကြောင့် eSIM Myanmar ကို ရွေးချယ်သင့်သလဲ? } />

{[ { icon: , title: t("Expert Knowledge", "ကျွမ်းကျင်သော အသိပညာ"), description: t( "Our team specializes in eSIM technology and stays current with the latest developments.", "ကျွန်ုပ်တို့အဖွဲ့သည် eSIM နည်းပညာတွင် အထူးပြုပြီး နောက်ဆုံးပေါ် ဖွံ့ဖြိုးတိုးတက်မှုများနှင့် အမြဲအညီဖြစ်အောင် ထားရှိပါသည်။", ), }, { icon: , title: t("Local Support", "ပြည်တွင်းအထောက်အပံ့"), description: t( "We provide information specific to the Myanmar market and local carriers.", "ကျွန်ုပ်တို့သည် မြန်မာဈေးကွက်နှင့် ပြည်တွင်းဝန်ဆောင်မှုပေးသူများအတွက် သီးသန့်အချက်အလက်များ ပေးအပ်ပါသည်။", ), }, { icon: , title: t("Comprehensive Resources", "ပြည့်စုံသော အရင်းအမြစ်များ"), description: t( "Access detailed guides, compatibility information, and troubleshooting tips.", "အသေးစိတ်လမ်းညွှန်ချက်များ၊ သဟဇာတဖြစ်မှုအချက်အလက်များနှင့် ပြဿနာဖြေရှင်းရေးအကြံပြုချက်များကို လက်လှမ်းမီပါ။", ), }, ].map((item, index) => (

{item.icon}

{item.title}

{item.description}

))}

) } [V0_FILE]typescript:file="app/actions/contact-form.ts" isMerged="true" "use server" import { setKVData } from "@/lib/vercel-kv" interface ContactFormData { name: string phone: string email?: string message: string } export async function submitContactForm(formData: ContactFormData) { try { // Validate the form data if (!formData.name || !formData.phone || !formData.message) { return { success: false, message: "Please fill in all required fields", } } // Generate a unique ID for this submission const submissionId = `contact_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` // Add timestamp const submission = { ...formData, timestamp: new Date().toISOString(), id: submissionId, } // Store in Vercel KV const result = await setKVData(`contact:${submissionId}`, submission) if (!result.success) { throw new Error("Failed to store contact form data") } // Also store in a list of all submissions for easy retrieval const listKey = "contact:submissions:list" const existingList = await setKVData(listKey, [submissionId], 60 * 60 * 24 * 30) // 30 days expiration return { success: true, message: "Your message has been received. We will contact you soon.", submissionId, } } catch (error) { console.error("Error submitting contact form:", error) return { success: false, message: "An error occurred while submitting your message. Please try again.", } } } [V0_FILE]typescript:file="app/actions/seo-optimization.ts" isMerged="true" "use server" import { optimizeForSEO } from "@/lib/seo-optimizer" export async function optimizeContentForSEO(content: string, targetKeywords: string[]) { try { const result = await optimizeForSEO(content, targetKeywords) return { success: true, data: result } } catch (error) { console.error("Error in SEO optimization server action:", error) return { success: false, error: error instanceof Error ? error.message : "Unknown error occurred", } } } [V0_FILE]typescript:file="app/api/compatibility/route.ts" isMerged="true" import { compatibilityCheckSchema } from "@/lib/schemas" import { validateRequest, createErrorResponse, createSuccessResponse } from "@/lib/api-validation" import { getKVData, setKVData } from "@/lib/vercel-kv" // Expanded database of compatible devices const COMPATIBLE_DEVICES = { apple: [ "iphone 11", "iphone 12", "iphone 13", "iphone 14", "iphone 15", "iphone 11 pro", "iphone 12 pro", "iphone 13 pro", "iphone 14 pro", "iphone 15 pro", "iphone 11 pro max", "iphone 12 pro max", "iphone 13 pro max", "iphone 14 pro max", "iphone 15 pro max", "iphone 12 mini", "iphone 13 mini", "iphone se", "iphone se 2", "iphone se 3", "ipad pro", "ipad air", "ipad mini", "ipad", ], samsung: [ "galaxy s20", "galaxy s21", "galaxy s22", "galaxy s23", "galaxy s20 fe", "galaxy s21 fe", "galaxy s23 fe", "galaxy s20+", "galaxy s21+", "galaxy s22+", "galaxy s23+", "galaxy s20 ultra", "galaxy s21 ultra", "galaxy s22 ultra", "galaxy s23 ultra", "galaxy note 20", "galaxy note 20 ultra", "galaxy z fold2", "galaxy z fold3", "galaxy z fold4", "galaxy z fold5", "galaxy z flip", "galaxy z flip3", "galaxy z flip4", "galaxy z flip5", "galaxy a33", "galaxy a34", "galaxy a52", "galaxy a53", "galaxy a54", "galaxy tab s7", "galaxy tab s8", "galaxy tab s9", ], google: [ "pixel 4", "pixel 4a", "pixel 5", "pixel 5a", "pixel 6", "pixel 6a", "pixel 7", "pixel 7a", "pixel 8", "pixel 4 xl", "pixel 6 pro", "pixel 7 pro", "pixel 8 pro", "pixel fold", "pixel tablet", ], xiaomi: [ "mi 11", "mi 12", "mi 13", "mi 11 lite", "mi 12 lite", "mi 13 lite", "mi 11 pro", "mi 12 pro", "mi 13 pro", "mi 11 ultra", "mi 12 ultra", "mi 13 ultra", "redmi note 10", "redmi note 11", "redmi note 12", "poco f3", "poco f4", "poco f5", "poco x3", "poco x4", "poco x5", ], oppo: [ "find x3", "find x5", "find x6", "find x3 pro", "find x5 pro", "find x6 pro", "reno7", "reno8", "reno9", "reno10", "reno7 pro", "reno8 pro", "reno9 pro", "reno10 pro", ], vivo: [ "x70", "x80", "x90", "x100", "x70 pro", "x80 pro", "x90 pro", "x100 pro", "v23", "v25", "v27", "v29", "v23 pro", "v25 pro", "v27 pro", "v29 pro", ], huawei: [ "p40", "p50", "p60", "p40 pro", "p50 pro", "p60 pro", "mate 30", "mate 40", "mate 50", "mate 30 pro", "mate 40 pro", "mate 50 pro", ], motorola: [ "edge 20", "edge 30", "edge 40", "edge 20 pro", "edge 30 pro", "edge 40 pro", "razr", "razr 5g", "razr 40", "razr 40 ultra", ], oneplus: [ "8", "9", "10", "11", "8 pro", "9 pro", "10 pro", "11 pro", "nord", "nord 2", "nord 3", "nord ce", "nord ce 2", "nord ce 3", ], nothing: ["phone 1", "phone 2", "phone 2a"], sony: [ "xperia 1 iii", "xperia 1 iv", "xperia 1 v", "xperia 5 iii", "xperia 5 iv", "xperia 5 v", "xperia 10 iii", "xperia 10 iv", "xperia 10 v", ], asus: ["zenfone 8", "zenfone 9", "zenfone 10", "rog phone 5", "rog phone 6", "rog phone 7"], honor: ["magic4", "magic5", "magic4 pro", "magic5 pro", "magic v", "magic v2", "70", "80", "90"], realme: [ "gt", "gt 2", "gt 3", "gt 5", "gt neo", "gt neo 2", "gt neo 3", "gt neo 5", "9", "10", "11", "9 pro", "10 pro", "11 pro", ], } // Expanded list of carriers supporting eSIM const SUPPORTED_CARRIERS = [ // Myanmar "mpt", "ooredoo", "telenor", "atom", "mytel", // Thailand "ais", "dtac", "true", "true move h", // Singapore "singtel", "starhub", "m1", // Malaysia "celcom", "digi", "maxis", "u mobile", // Philippines "globe", "smart", "dito", // Indonesia "telkomsel", "xl axiata", "indosat", "indosat ooredoo", // Vietnam "viettel", "vinaphone", "mobifone", // USA "at&t", "t-mobile", "verizon", // UK/Europe "vodafone", "o2", "ee", "three", "orange", "t-mobile", "deutsche telekom", // India "airtel", "jio", "bsnl", "vi", // China "china mobile", "china unicom", "china telecom", // Japan "docomo", "au", "softbank", // Korea "sk telecom", "kt", "lg uplus", // Australia "telstra", "optus", "vodafone au", // Global "google fi", "truphone", "ubigi", "airalo", "holafly", "maya", ] export async function POST(request: Request) { try { // Validate the request body against our schema const validation = await validateRequest(request, compatibilityCheckSchema) if (!validation.success) { return createErrorResponse(validation.error) } const { deviceModel, manufacturer } = validation.data // Check cache first const cacheKey = `compatibility:${manufacturer.toLowerCase()}:${deviceModel.toLowerCase()}` const cachedResult = await getKVData(cacheKey) if (cachedResult.success && cachedResult.data) { return createSuccessResponse(cachedResult.data) } // Check compatibility const manufacturerLower = manufacturer.toLowerCase() const deviceModelLower = deviceModel.toLowerCase() let compatible = false let supportLevel = "none" let notes = "This device does not support eSIM technology" let supportedCarriers = [] if (COMPATIBLE_DEVICES[manufacturerLower]) { // Check for exact matches if (COMPATIBLE_DEVICES[manufacturerLower].includes(deviceModelLower)) { compatible = true supportLevel = "full" notes = "This device fully supports eSIM technology" supportedCarriers = SUPPORTED_CARRIERS } // Check for partial matches (e.g., "iphone" matches "iphone 13") else if ( COMPATIBLE_DEVICES[manufacturerLower].some( (device) => deviceModelLower.includes(device) || device.includes(deviceModelLower), ) ) { compatible = true supportLevel = "partial" notes = "This device likely supports eSIM technology, but please verify with the manufacturer" supportedCarriers = SUPPORTED_CARRIERS.filter((carrier) => !["mytel", "dito", "bsnl"].includes(carrier)) } } const result = { compatible, details: { supportLevel, notes, supportedCarriers: compatible ? supportedCarriers : [], }, } // Cache the result await setKVData(cacheKey, result, 60 * 60 * 24 * 30) // 30 days expiration return createSuccessResponse(result) } catch (error) { console.error("Error checking device compatibility:", error) return createErrorResponse("An error occurred while checking device compatibility", 500) } } [V0_FILE]typescript:file="app/api/contact/route.ts" isMerged="true" import { contactFormSchema } from "@/lib/schemas" import { validateRequest, createErrorResponse, createSuccessResponse } from "@/lib/api-validation" import { setKVData } from "@/lib/vercel-kv" export async function POST(request: Request) { try { // Validate the request body against our schema const validation = await validateRequest(request, contactFormSchema) if (!validation.success) { return createErrorResponse(validation.error) } const data = validation.data // Validate phone number format const phoneRegex = /^[0-9+\s()-]{7,15}$/ if (data.phone && !phoneRegex.test(data.phone)) { return createErrorResponse("Invalid phone number format") } // Validate email if provided if (data.email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(data.email)) { return createErrorResponse("Invalid email format") } } // Generate a unique ID for this submission const submissionId = `contact_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` // Add timestamp and sanitize data const submission = { ...data, name: data.name.trim(), phone: data.phone.trim(), email: data.email?.trim() || "", message: data.message.trim(), timestamp: new Date().toISOString(), id: submissionId, source: request.headers.get("referer") || "direct", userAgent: request.headers.get("user-agent") || "unknown", } // Store in Vercel KV const result = await setKVData(`contact:${submissionId}`, submission) if (!result.success) { console.error("KV storage error:", result.error) return createErrorResponse("Failed to store contact form data", 500) } // Also store in a list of all submissions for easy retrieval const listKey = "contact:submissions:list" await setKVData(listKey, [submissionId], 60 * 60 * 24 * 30) // 30 days expiration return createSuccessResponse({ message: "Your message has been received. We will contact you soon.", submissionId, }) } catch (error) { console.error("Error processing contact form:", error) return createErrorResponse("An error occurred while processing your message", 500) } } [V0_FILE]typescript:file="app/api/esim/order/route.ts" isMerged="true" import { esimOrderSchema } from "@/lib/schemas" import { validateRequest, createErrorResponse, createSuccessResponse } from "@/lib/api-validation" import { setKVData } from "@/lib/vercel-kv" export async function POST(request: Request) { try { // Validate the request body against our schema const validation = await validateRequest(request, esimOrderSchema) if (!validation.success) { return createErrorResponse(validation.error) } const data = validation.data // Generate a unique order ID const orderId = `order_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` // Generate a mock activation code (in a real system, this would come from the eSIM provider) const activationCode = `ESIM-${Math.random().toString(36).substring(2, 6).toUpperCase()}-${Math.random().toString(36).substring(2, 6).toUpperCase()}-${Math.random().toString(36).substring(2, 6).toUpperCase()}` // Set expiry date to 30 days from now const expiryDate = new Date() expiryDate.setDate(expiryDate.getDate() + 30) // Create the order object const order = { ...data, orderId, activationCode, expiryDate: expiryDate.toISOString(), status: "active", createdAt: new Date().toISOString(), } // Store in Vercel KV const result = await setKVData(`order:${orderId}`, order) if (!result.success) { return createErrorResponse("Failed to store order data", 500) } // Also store in a list of all orders for easy retrieval const listKey = "orders:list" await setKVData(listKey, [orderId], 60 * 60 * 24 * 365) // 1 year expiration return createSuccessResponse({ orderId, activationCode, expiryDate: expiryDate.toISOString(), }) } catch (error) { console.error("Error processing eSIM order:", error) return createErrorResponse("An error occurred while processing your order", 500) } } [V0_FILE]typescript:file="app/api/esim/purchase/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createPayment } from "@/lib/payment-service" import { z } from "zod" // Define the schema for purchase request validation const purchaseSchema = z.object({ planId: z.string(), planName: z.string(), amount: z.number().positive(), customerName: z.string().min(2), customerEmail: z.string().email().optional(), customerPhone: z.string().min(6), }) export async function POST(request: NextRequest) { try { // Parse the request body const body = await request.json() // Validate the request body const validationResult = purchaseSchema.safeParse(body) if (!validationResult.success) { return NextResponse.json( { success: false, error: "Invalid request data", details: validationResult.error.format(), }, { status: 400 }, ) } const { planId, planName, amount, customerName, customerEmail, customerPhone } = validationResult.data // Create a payment const paymentResult = await createPayment({ amount, currency: "MMK", customerName, customerEmail: customerEmail || "", customerPhone, productId: planId, productName: planName, }) if (!paymentResult.success) { return NextResponse.json( { success: false, error: paymentResult.error || "Failed to create payment", }, { status: 500 }, ) } // Return the payment details return NextResponse.json({ success: true, orderId: paymentResult.orderId, paymentUrl: paymentResult.paymentUrl, }) } catch (error) { console.error("Error processing eSIM purchase:", error) return NextResponse.json( { success: false, error: "An unexpected error occurred", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/vercel-integration/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { return NextResponse.json({ status: "success", message: "eSIM Myanmar API is ready for Vercel integration", timestamp: new Date().toISOString(), }) } export async function POST(request: Request) { try { const data = await request.json() // Process Vercel API integration data console.log("Received Vercel integration data:", data) // Here you would typically handle the integration with Vercel products // such as Analytics, Blob Storage, etc. return NextResponse.json({ success: true, message: "Vercel integration data received successfully", }) } catch (error) { console.error("Error processing Vercel integration:", error) return NextResponse.json({ success: false, message: "Failed to process Vercel integration data" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/checkout/[orderId]/loading.tsx" isMerged="true" import CheckoutLoading from "@/components/checkout-loading" export default function CheckoutLoadingPage() { return } [V0_FILE]typescriptreact:file="app/checkout/[orderId]/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { CreditCard, Check, AlertCircle, ArrowLeft } from "lucide-react" import Link from "next/link" export default function CheckoutPage() { const params = useParams() const router = useRouter() const { t } = useLanguage() const [paymentDetails, setPaymentDetails] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [processing, setProcessing] = useState(false) const [completed, setCompleted] = useState(false) const [cardDetails, setCardDetails] = useState({ cardNumber: "", cardHolder: "", expiryDate: "", cvv: "", }) const orderId = params.orderId as string useEffect(() => { async function fetchPaymentDetails() { try { // In a real implementation, this would be an API call // For demo purposes, we'll simulate a response await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate payment details setPaymentDetails({ orderId, amount: 12000, currency: "MMK", productName: "Standard eSIM Plan", dataAllowance: "10GB", validity: "15 days", }) setLoading(false) } catch (error) { console.error("Error fetching payment details:", error) setError("Failed to load payment details. Please try again.") setLoading(false) } } fetchPaymentDetails() }, [orderId]) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target // Format card number with spaces if (name === "cardNumber") { const formatted = value .replace(/\s/g, "") .replace(/(\d{4})/g, "$1 ") .trim() setCardDetails((prev) => ({ ...prev, [name]: formatted })) return } // Format expiry date with slash if (name === "expiryDate") { const cleaned = value.replace(/\D/g, "") let formatted = cleaned if (cleaned.length > 2) { formatted = `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}` } setCardDetails((prev) => ({ ...prev, [name]: formatted })) return } setCardDetails((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setProcessing(true) try { // In a real implementation, this would be an API call to process the payment // For demo purposes, we'll simulate a successful payment after a delay await new Promise((resolve) => setTimeout(resolve, 2000)) setCompleted(true) // Redirect to success page after a delay setTimeout(() => { router.push(`/checkout/${orderId}/success`) }, 2000) } catch (error) { console.error("Error processing payment:", error) setError("Payment processing failed. Please try again.") setProcessing(false) } } if (loading) { return (

) } if (error) { return (

{error}

) } if (completed) { return (

) } return (

{/* Payment Form */}

{/* Order Summary */}

{paymentDetails.productName}

{paymentDetails.dataAllowance}

{paymentDetails.validity}

{paymentDetails.amount.toLocaleString()} {paymentDetails.currency}

) } [V0_FILE]typescriptreact:file="app/checkout/[orderId]/success/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function SuccessLoading() { return (

) } [V0_FILE]typescriptreact:file="app/checkout/[orderId]/success/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams } from "next/navigation" import { Button } from "@/components/ui/button" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" import { Check, Download, Smartphone, Mail, Copy, ExternalLink } from "lucide-react" import Link from "next/link" export default function CheckoutSuccessPage() { const params = useParams() const { t } = useLanguage() const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [esimDetails, setEsimDetails] = useState(null) const [copied, setCopied] = useState(false) const orderId = params.orderId as string useEffect(() => { async function fetchEsimDetails() { try { // In a real implementation, this would be an API call // For demo purposes, we'll simulate a response await new Promise((resolve) => setTimeout(resolve, 1500)) // Simulate eSIM details setEsimDetails({ orderId, esimId: `esim_${Date.now()}`, qrCodeUrl: "/placeholder.svg?height=300&width=300&query=QR code for eSIM activation", activationCode: "ESIM" + Math.random().toString(36).substring(2, 6).toUpperCase(), expiryDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000).toISOString(), // 15 days from now dataAllowance: "10GB", validityDays: 15, customerEmail: "customer@example.com", }) setLoading(false) } catch (error) { console.error("Error fetching eSIM details:", error) setError("Failed to load eSIM details. Please contact customer support.") setLoading(false) } } fetchEsimDetails() }, [orderId]) const copyActivationCode = () => { if (esimDetails?.activationCode) { navigator.clipboard.writeText(esimDetails.activationCode) setCopied(true) setTimeout(() => { setCopied(false) }, 2000) } } const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", }) } if (loading) { return (

) } if (error) { return (

{error}

) } return (

{/* QR Code */}

{/* eSIM Details */}

{esimDetails.activationCode}

{esimDetails.dataAllowance}

{esimDetails.validityDays} {t("days", "ရက်")} ({formatDate(esimDetails.expiryDate)})

{esimDetails.customerEmail}

{/* Next Steps */}

) } [V0_FILE]typescriptreact:file="app/client-layout.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { ThemeProvider } from "@/components/theme-provider" import { LanguageProvider } from "@/contexts/language-context" import Header from "@/components/header" import Footer from "@/components/footer" import { ThingyanThemeProvider } from "@/contexts/thingyan-theme-context" import { useThingyanTheme } from "@/contexts/thingyan-theme-context" import { WaterDroplets, FloatingFlowers, WaterRipples } from "@/components/thingyan/water-effects" import BackgroundMusic from "@/components/thingyan/background-music" import ThingyanBanner from "@/components/thingyan/thingyan-banner" import OrganizationSchema from "@/components/organization-schema" export default function ClientLayout({ children }: { children: React.ReactNode }) { const [mounted, setMounted] = useState(false) const { isThingyanTheme } = useThingyanTheme() const audioUrl = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/thingyanmoe-xwqr9uv6N1glDZyARJ4LYqdyx7iWaX.mp3" const [isThingyanActive, setIsThingyanActive] = useState(false) // Check if it's Thingyan season (April) useEffect(() => { const currentDate = new Date() const currentMonth = currentDate.getMonth() // 0-based (0 = January, 3 = April) // Activate Thingyan theme in April or if manually enabled for testing const isThingyanSeason = currentMonth === 3 // April // For demo purposes, you might want to enable this regardless of the month // const isThingyanSeason = true setIsThingyanActive(isThingyanSeason) }, []) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return (

{/* Add structured data for SEO */}

{children}

{/* Thingyan special effects (only shown during Thingyan season) */} {isThingyanActive && ( <> )}

) } const ThingyanEffects = () => { const { isThingyanTheme } = useThingyanTheme() return ( <> {isThingyanTheme && ( <> )} ) } [V0_FILE]typescriptreact:file="app/compatibility/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function CompatibilityLoading() { return (

{[1, 2, 3, 4].map((i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/compatibility/page.tsx" isMerged="true" import type { Metadata } from "next" import CompatibilityContent from "@/components/compatibility-content" export const metadata: Metadata = { title: "eSIM Device Compatibility Checker | eSIM Myanmar", description: "Check if your device is compatible with eSIM technology. View our comprehensive list of supported smartphones and tablets for Myanmar eSIM plans.", keywords: "eSIM compatibility, device checker, eSIM supported devices, Myanmar eSIM, iPhone eSIM, Samsung eSIM, Google Pixel eSIM", openGraph: { title: "eSIM Device Compatibility Checker | eSIM Myanmar", description: "Check if your device is compatible with eSIM technology. View our comprehensive list of supported smartphones and tablets.", url: "https://esim.com.mm/compatibility", images: [ { url: "/og-image-compatibility.png", width: 1200, height: 630, alt: "eSIM Device Compatibility Checker", }, ], }, } export default function CompatibilityPage() { return } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import AnimatedSection from "@/components/animated-section" import { Send, Phone, Mail, Check, Clock, Calendar, ArrowRight, X, Globe, Facebook, Instagram, MessageCircle, } from "lucide-react" import { LocalizedText } from "@/components/ui/localized-text" import { useLanguage } from "@/contexts/language-context" // Import the server action import { submitContactForm } from "@/app/actions/contact-form" export default function ContactPage() { const [formState, setFormState] = useState({ name: "", phone: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const { t } = useLanguage() // Add state for error message const [errorMessage, setErrorMessage] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormState((prev) => ({ ...prev, [name]: value })) } // Update the handleSubmit function to use the server action const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { const result = await submitContactForm(formState) setIsSubmitting(false) if (result.success) { setIsSubmitted(true) setFormState({ name: "", phone: "", email: "", message: "" }) } else { // Handle error setErrorMessage(result.message || "Failed to submit form. Please try again.") } } catch (error) { setIsSubmitting(false) setErrorMessage("An unexpected error occurred. Please try again.") } } // Social media links const socialLinks = [ { name: "Facebook", icon: , url: "https://facebook.com/eSIMMyanmar", }, { name: "Instagram", icon: , url: "https://instagram.com/eSIMMyanmar", }, { name: "Messenger", icon: , url: "https://m.me/eSIMMyanmar", }, ] return (

Send us a Message } mm={ <> ကျွန်ုပ်တို့ထံ မက်ဆေ့ခ်ျ ပို့ပါ } />

{/* Background decoration */}

{isSubmitted ? (

) : ( {errorMessage && (

{errorMessage}

)}

</div>

<Button
                      type="submit"
                      className="w-full bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 py-6 rounded-lg shadow-lg shadow-[#00FFFF]/20"
                      disabled={isSubmitting}
                      aria-busy={isSubmitting}
                    >
                      {isSubmitting ? (
                        <span className="flex items-center justify-center">
                          <motion.span
                            className="mr-2"
                            animate={{ rotate: 360 }}
                            transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                          >
                            <svg
                              className="animate-spin h-5 w-5 text-[#1E2F3C]"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              aria-hidden="true"
                            >
                              <circle
                                className="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                strokeWidth="4"
                              ></circle>
                              <path
                                className="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                              ></path>
                            </svg>
                          </motion.span>
                          <LocalizedText en="Sending..." mm="ပို့နေသည်..." />
                        </span>
                      ) : (
                        <span className="flex items-center justify-center">
                          <Send className="mr-2 h-5 w-5" aria-hidden="true" />
                          <LocalizedText en="Send Message" mm="မက်ဆေ့ခ်ျ ပို့ရန်" />
                        </span>
                      )}
                    </Button>
                  </form>
                </motion.div>
              )}
            </motion.div>

<motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }}>
              <h2 className="text-2xl font-bold mb-6">
                <LocalizedText
                  en={
                    <>
                      Contact <span className="text-[#00FFFF]">Information</span>
                    </>
                  }
                  mm={
                    <>
                      ဆက်သွယ်ရန် <span className="text-[#00FFFF]">အချက်အလက်</span>
                    </>
                  }
                />
              </h2>

<div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                <div className="space-y-6">
                  {[
                    {
                      icon: Phone,
                      text: "09650000172",
                      label: t("Phone", "ဖုန်း"),
                      href: "tel:+959650000172",
                    },
                    {
                      icon: Mail,
                      text: "info@esim.com.mm",
                      label: t("Email", "အီးမေးလ်"),
                      href: "mailto:info@esim.com.mm",
                    },
                    {
                      icon: Globe,
                      text: "esim.com.mm",
                      label: t("Website", "ဝဘ်ဆိုဒ်"),
                      href: "https://esim.com.mm",
                    },
                  ].map((item, index) => (
                    <motion.div
                      key={index}
                      className="flex items-start"
                      whileHover={{ x: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                    >
                      <div className="flex-shrink-0 mt-1">
                        <div className="w-12 h-12 rounded-full bg-[#00FFFF]/10 flex items-center justify-center">
                          <item.icon className="h-5 w-5 text-[#00FFFF]" aria-hidden="true" />
                        </div>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium text-white">{item.label}</h3>
                        <a href={item.href} className="text-[#B0BEC5] hover:text-[#00FFFF] transition-colors">
                          {item.text}
                        </a>
                      </div>
                    </motion.div>
                  ))}
                </div>

<div className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                <h3 className="font-medium mb-4 text-white">
                  <LocalizedText en="Follow Us" mm="ကျွန်ုပ်တို့ကို လိုက်ပါ" />
                </h3>
                <div className="grid grid-cols-3 gap-4">
                  {socialLinks.map((platform, index) => (
                    <motion.a
                      key={index}
                      href={platform.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="py-3 rounded-lg bg-[#1E2F3C] flex items-center justify-center text-[#00FFFF] hover:bg-[#00FFFF] hover:text-[#1E2F3C] transition-colors border border-[#00FFFF]/20"
                      whileHover={{ y: -5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 10 }}
                      aria-label={`Follow us on ${platform.name}`}
                    >
                      <span className="flex items-center">
                        {platform.icon}
                        <span className="ml-2">{platform.name}</span>
                      </span>
                    </motion.a>
                  ))}
                </div>
              </div>

<motion.div
                className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.3 }}
              >
                <h3 className="font-medium mb-4 text-white flex items-center">
                  <LocalizedText en="Need Help?" mm="အကူအညီလိုပါသလား?" />
                </h3>
                <p className="text-[#B0BEC5] mb-4">
                  <LocalizedText
                    en="Check our comprehensive FAQ section for quick answers to common questions."
                    mm="အမေးများသော မေးခွန်းများအတွက် အမြန်အဖြေများအတွက် ကျွန်ုပ်တို့၏ ပြည့်စုံသော FAQ အပိုင်းကို စစ်ဆေးပါ။"
                  />
                </p>
                <a href="/faq" className="inline-flex items-center text-[#00FFFF] hover:underline">
                  <LocalizedText en="View FAQ" mm="FAQ ကို ကြည့်ရန်" />
                  <ArrowRight className="ml-2 h-4 w-4" aria-hidden="true" />
                </a>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/docs/api-documentation/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="container mx-auto py-12 px-4">
      <Skeleton className="h-10 w-64 mb-8" />

<Skeleton className="h-8 w-48 mt-8 mb-4" />
      <Skeleton className="h-6 w-full mb-2" />
      <Skeleton className="h-6 w-full mb-2" />
      <Skeleton className="h-6 w-3/4" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/docs/api-documentation/page.tsx" isMerged="true"
import ApiDocumentation from "@/docs/api-documentation"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "API Documentation | eSIM Myanmar",
  description:
    "Comprehensive documentation for the eSIM Myanmar API endpoints, including request and response schemas.",
  keywords: "API, documentation, eSIM, Myanmar, developer, integration",
}

export default function ApiDocumentationPage() {
  return <ApiDocumentation />
}
[V0_FILE]typescriptreact:file="app/esim/esim-page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Check, ChevronDown, ChevronRight, Globe, Shield, Smartphone, Zap } from "lucide-react"
import AnimatedSection from "@/components/animated-section"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"
import Link from "next/link"
import ProductSchema from "@/components/product-schema"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

// Define plan types
interface Plan {
  id: string
  name: string
  data: string
  validity: string
  price: number
  features: string[]
  popular?: boolean
}

// Define plans
  const plans: Plan[] = [
    {
      id: "basic",
      name: t("Basic", "အခြေခံ"),
      data: "3GB",
      validity: t("7 days", "၇ ရက်"),
      price: 5000,
      features: [
        t("3GB high-speed data", "3GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 7 days", "၇ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
      ],
    },
    {
      id: "standard",
      name: t("Standard", "စံ"),
      data: "10GB",
      validity: t("15 days", "၁၅ ရက်"),
      price: 12000,
      features: [
        t("10GB high-speed data", "10GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 15 days", "၁၅ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
        t("Unlimited social media", "အကန့်အသတ်မရှိ လူမှုကွန်ရက်"),
      ],
      popular: true,
    },
    {
      id: "premium",
      name: t("Premium", "ပရီမီယံ"),
      data: "30GB",
      validity: t("30 days", "၃၀ ရက်"),
      price: 25000,
      features: [
        t("30GB high-speed data", "30GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 30 days", "၃၀ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
        t("Unlimited social media", "အကန့်အသတ်မရှိ လူမှုကွန်ရက်"),
        t("HD video streaming", "HD ဗီဒီယို ကြည့်ရှုခြင်း"),
        t("Priority network access", "ဦးစားပေး ကွန်ရက်ဝင်ရောက်ခွင့်"),
      ],
    },
  ]

// Get the selected plan details
  const selectedPlanDetails = plans.find((plan) => plan.id === selectedPlan) || plans[1]

// Features list
  const features = [
    {
      icon: <Smartphone className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်"),
      description: t(
        "Activate your eSIM instantly by scanning a QR code - no physical SIM card needed.",
        "QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့် eSIM ကို ချက်ချင်းအသုံးပြုနိုင်သည် - ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။",
      ),
    },
    {
      icon: <Shield className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်"),
      description: t(
        "eSIMs cannot be physically removed or stolen, providing better security for your data and identity.",
        "eSIM များကို ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သဖြင့် သင့်ဒေတာနှင့် ကိုယ်ရေးအချက်အလက်များအတွက် ပိုမိုလုံခြုံမှုရှိသည်။",
      ),
    },
    {
      icon: <Globe className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Nationwide Coverage", "တစ်နိုင်ငံလုံးလွှမ်းခြုံမှု"),
      description: t(
        "Enjoy reliable connectivity throughout Myanmar with our extensive network coverage.",
        "ကျွန်ုပ်တို့၏ ကျယ်ပြန့်သော ကွန်ရက်လွှမ်းခြုံမှုဖြင့် မြန်မာနိုင်ငံတစ်ဝှမ်း စိတ်ချရသော ချိတ်ဆက်မှုကို ခံစားပါ။",
      ),
    },
    {
      icon: <Zap className="h-6 w-6 text-[#00FFFF]" />,
      title: t("High-Speed Data", "မြန်နှုန်းမြင့်ဒေတာ"),
      description: t(
        "Experience fast and reliable internet speeds for streaming, browsing, and downloading.",
        "စတရင်းမင်း၊ ရှာဖွေကြည့်ရှုခြင်းနှင့် ဒေါင်းလုဒ်လုပ်ခြင်းတို့အတွက် မြန်ဆန်ပြီး စိတ်ချရသော အင်တာနက်အမြန်နှုန်းကို ခံစားပါ။",
      ),
    },
  ]

// FAQ items
  const faqItems = [
    {
      question: t("What is an eSIM?", "eSIM ဆိုတာ ဘာလဲ?"),
      answer: t(
        "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan without using a physical SIM card. It's built into your device and can be programmed to connect to different mobile networks.",
        "eSIM (embedded SIM) ဆိုသည်မှာ ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မသုံးဘဲ မိုဘိုင်းဝန်ဆောင်မှုကို အသုံးပြုနိုင်စေသော ဒီဂျစ်တယ် SIM ဖြစ်သည်။ ၎င်းကို သင့်စက်ထဲတွင် ထည့်သွင်းထားပြီး မတူညီသော မိုဘိုင်းကွန်ရက်များနှင့် ချိတ်ဆက်ရန် ပရိုဂရမ်လုပ်နိုင်သည်။",
      ),
    },
    {
      question: t("How do I activate my eSIM?", "eSIM ကို ဘယ်လိုအသုံးပြုရမလဲ?"),
      answer: t(
        "After purchasing, you'll receive a QR code via email. Go to your device's settings, select 'Mobile Data' or 'Cellular', then 'Add Data Plan' or 'Add eSIM'. Scan the QR code and follow the on-screen instructions to complete activation.",
        "ဝယ်ယူပြီးနောက်၊ သင်သည် အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။ သင့်စက်၏ ဆက်တင်များသို့သွား၍ 'မိုဘိုင်းဒေတာ' သို့မဟုတ် 'ဆဲလ်လူလာ' ကို ရွေးချယ်ပြီး 'ဒေတာအစီအစဉ်ထည့်ရန်' သို့မဟုတ် 'eSIM ထည့်ရန်' ကို ရွေးပါ။ QR ကုဒ်ကို စကင်ဖတ်ပြီး အသုံးပြုမှုပြီးမြောက်ရန် စကရင်ပေါ်ရှိ ညွှန်ကြားချက်များကို လိုက်နာပါ။",
      ),
    },
    {
      question: t("Which devices are compatible with eSIM?", "ဘယ်စက်ပစ္စည်းတွေက eSIM နဲ့ သဟဇာတဖြစ်သလဲ?"),
      answer: t(
        "Most modern smartphones and tablets support eSIM, including iPhone XS and newer, Google Pixel 3 and newer, Samsung Galaxy S20 and newer, and many other recent models. You can check our compatibility page for a complete list.",
        "iPhone XS နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ Google Pixel 3 နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ Samsung Galaxy S20 နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ နှင့် အခြားမကြာသေးမီက မော်ဒယ်များအပါအဝင် ခေတ်မီစမတ်ဖုန်းနှင့် တက်ဘလက်အများစုသည် eSIM ကို ထောက်ပံ့ပါသည်။ အပြည့်အစုံစာရင်းအတွက် ကျွန်ုပ်တို့၏ သဟဇာတဖြစ်မှုစာမျက်နှာကို စစ်ဆေးနိုင်ပါသည်။",
      ),
    },
    {
      question: t(
        "Can I use both physical SIM and eSIM at the same time?",
        "Physical SIM နှင့် eSIM ကို တစ်ပြိုင်နက် သုံးလို့ရပါသလား?",
      ),
      answer: t(
        "Yes, most eSIM-compatible devices support Dual SIM Dual Standby (DSDS), allowing you to use both a physical SIM and an eSIM simultaneously. This is great for separating personal and business lines or using local data while traveling.",
        "ရပါသည်။ eSIM ထောက်ပံ့သော စက်အများစုသည် Dual SIM Dual Standby (DSDS) ကို ထောက်ပံ့သဖြင့် physical SIM နှင့် eSIM နှစ်ခုလုံးကို တစ်ပြိုင်နက် အသုံးပြုနိုင်ပါသည်။ ဤသည်မှာ ကိုယ်ပိုင်နှင့် စီးပွားရေးလိုင်းများကို ခွဲခြားရန် သို့မဟုတ် ခရီးသွားစဉ် ပြည်တွင်းဒေတာကို အသုံးပြုရန် အလွန်ကောင်းပါသည်။",
      ),
    },
    {
      question: t("What happens if I lose my device?", "ကျွန်တော့်/ကျွန်မ စက်ပျောက်သွားရင် ဘာဖြစ်မလဲ?"),
      answer: t(
        "If you lose your device, your eSIM profile remains secure and cannot be accessed without your device passcode. Contact our customer support, and we can help you transfer your eSIM profile to a new device once you have one.",
        "သင့်စက်ပျောက်သွားပါက သင့် eSIM ပရိုဖိုင်သည် လုံခြုံမှုရှိပြီး သင့်စက်၏ လျှို့ဝှက်ကုဒ်မရှိဘဲ ဝင်ရောက်၍မရပါ။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုဌာနကို ဆက်သွယ်ပါ၊ သင့်တွင် စက်အသစ်ရှိလာပါက သင့် eSIM ပရိုဖိုင်ကို စက်အသစ်သို့ လွှဲပြောင်းရန် ကျွန်ုပ်တို့ ကူညီပေးနိုင်ပါသည်။",
      ),
    },
    {
      question: t("Can I recharge or top up my eSIM?", "eSIM ကို ဖြည့်လို့ရပါသလား?"),
      answer: t(
        "Yes, you can easily recharge your eSIM through our website, mobile app, or authorized retailers. Simply enter your eSIM number or scan the QR code, select your preferred top-up amount, and complete the payment.",
        "ရပါသည်။ ကျွန်ုပ်တို့၏ ဝဘ်ဆိုဒ်၊ မိုဘိုင်းအက်ပ် သို့မဟုတ် တရားဝင်အရောင်းဆိုင်များမှတဆင့် သင့် eSIM ကို လွယ်ကူစွာ ဖြည့်နိုင်ပါသည်။ သင့် eSIM နံပါတ်ကို ရိုက်ထည့်ပါ သို့မဟုတ် QR ကုဒ်ကို စကင်ဖတ်ပါ၊ သင်နှစ်သက်ရာ ဖြည့်သွင်းငွေပမာဏကို ရွေးချယ်ပြီး ငွေပေးချေမှုကို ပြီးဆုံးအောင် လုပ်ဆောင်ပါ။",
      ),
    },
  ]

return (
    <>
      {/* Add structured data for SEO */}
      <ProductSchema
        name={`eSIM Myanmar - ${selectedPlanDetails.name} Plan`}
        description="Digital SIM technology for instant connectivity in Myanmar"
        image="/images/esim-product.jpg"
        price={selectedPlanDetails.price}
        currency="MMK"
        sku={`esim-${selectedPlanDetails.id}`}
        brand="eSIM Myanmar"
        availability="InStock"
        url="https://esim.com.mm/esim"
      />

<div className="container mx-auto px-4">
        <AnimatedSection>
          <div className="py-16 text-center">
            <motion.h1
              className="text-4xl md:text-6xl font-bold mb-6 gradient-text glow-text"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <LocalizedText
                en={
                  <>
                    Myanmar <span className="text-[#00FFFF]">eSIM</span> Plans
                  </>
                }
                mm={
                  <>
                    မြန်မာ <span className="text-[#00FFFF]">eSIM</span> အစီအစဉ်များ
                  </>
                }
              />
            </motion.h1>
            <motion.p
              className="text-xl text-[#B0BEC5] max-w-3xl mx-auto"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <LocalizedText
                en="Experience seamless connectivity with our digital SIM technology. No physical SIM card needed."
                mm="ကျွန်ုပ်တို့၏ ဒီဂျစ်တယ် SIM နည်းပညာဖြင့် ချောမွေ့သော ချိတ်ဆက်မှုကို ခံစားပါ။ ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။"
              />
            </motion.p>
          </div>
        </AnimatedSection>

<AnimatedSection>
          <div className="py-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              {/* Product Image */}
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5 }}
                className="relative"
              >
                <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg overflow-hidden relative">
                  {/* Background decoration */}
                  <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[#00FFFF]/10 blur-3xl" />
                  <div className="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-[#00FFFF]/10 blur-3xl" />

{/* QR Code sample */}
                    <div className="absolute bottom-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                      <img src="/qr-code.png" alt="eSIM QR Code Sample" className="w-20 h-20" />
                    </div>

{/* Floating elements */}
                    <motion.div
                      className="absolute top-4 left-4 bg-[#00FFFF]/10 backdrop-blur-sm border border-[#00FFFF]/30 rounded-lg px-3 py-1 text-[#00FFFF] text-sm font-medium"
                      animate={{ y: [0, -5, 0] }}
                      transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                    >
                      <LocalizedText en="Instant Activation" mm="ချက်ချင်းအသုံးပြုနိုင်" />
                    </motion.div>
                  </div>
                </div>

{/* Features list */}
                <div className="mt-8 space-y-4">
                  {features.slice(0, showAllFeatures ? features.length : 2).map((feature, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.3, delay: index * 0.1 }}
                      className="flex items-start bg-[#1E2F3C] p-4 rounded-lg border border-[#00FFFF]/10"
                    >
                      <div className="flex-shrink-0 mt-1">
                        <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center">
                          {feature.icon}
                        </div>
                      </div>
                      <div className="ml-4">
                        <h3 className="font-medium text-white">{feature.title}</h3>
                        <p className="text-[#B0BEC5] text-sm mt-1">{feature.description}</p>
                      </div>
                    </motion.div>
                  ))}

{features.length > 2 && (
                    <motion.button
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: 0.4 }}
                      onClick={() => setShowAllFeatures(!showAllFeatures)}
                      className="text-[#00FFFF] text-sm flex items-center hover:underline"
                    >
                      {showAllFeatures ? (
                        <>
                          <LocalizedText en="Show less" mm="လျှော့ပြရန်" />
                          <ChevronDown className="ml-1 h-4 w-4" />
                        </>
                      ) : (
                        <>
                          <LocalizedText en="Show more features" mm="အင်္ဂါရပ်များ ပိုမိုပြရန်" />
                          <ChevronRight className="ml-1 h-4 w-4" />
                        </>
                      )}
                    </motion.button>
                  )}
                </div>
              </motion.div>

{/* Plan Selection */}
              <motion.div initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }}>
                <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                  <h2 className="text-2xl font-bold mb-6">
                    <LocalizedText en="Choose Your Plan" mm="သင့်အစီအစဉ်ကို ရွေးချယ်ပါ" />
                  </h2>

<Tabs defaultValue={selectedPlan} onValueChange={setSelectedPlan} className="w-full">
                    <TabsList className="grid grid-cols-3 mb-8">
                      {plans.map((plan) => (
                        <TabsTrigger
                          key={plan.id}
                          value={plan.id}
                          className={`relative ${plan.popular ? "border-t-2 border-[#00FFFF]" : ""}`}
                        >
                          {plan.popular && (
                            <span className="absolute -top-7 left-1/2 transform -translate-x-1/2 bg-[#00FFFF] text-[#1E2F3C] text-xs font-bold px-2 py-1 rounded">
                              <LocalizedText en="POPULAR" mm="လူကြိုက်များ" />
                            </span>
                          )}
                          {plan.name}
                        </TabsTrigger>
                      ))}
                    </TabsList>

{plans.map((plan) => (
                      <TabsContent key={plan.id} value={plan.id} className="mt-0">
                        <div className="bg-[#1E2F3C] rounded-lg p-6 border border-[#00FFFF]/20">
                          <div className="flex justify-between items-start mb-4">
                            <div>
                              <h3 className="text-2xl font-bold text-white">{plan.name}</h3>
                              <p className="text-[#B0BEC5]">{plan.validity}</p>
                            </div>
                            <div className="text-right">
                              <div className="text-3xl font-bold text-white">{plan.data}</div>
                              <p className="text-[#00FFFF]">
                                <LocalizedText en="Data" mm="ဒေတာ" />
                              </p>
                            </div>
                          </div>

<div className="my-6">
                            <div className="text-3xl font-bold text-white mb-1">
                              {plan.price.toLocaleString()} <span className="text-lg">MMK</span>
                            </div>
                            <p className="text-[#B0BEC5] text-sm">
                              <LocalizedText en="Includes all taxes" mm="အခွန်အားလုံး ပါဝင်သည်" />
                            </p>
                          </div>

<ul className="space-y-3 mb-6">
                            {plan.features.map((feature, index) => (
                              <li key={index} className="flex items-start">
                                <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                                <span className="text-[#B0BEC5]">{feature}</span>
                              </li>
                            ))}
                          </ul>

{/* Compatibility Check */}
                <div className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                  <h3 className="text-xl font-bold mb-3">
                    <LocalizedText en="Check Device Compatibility" mm="စက်ပစ္စည်း သဟဇာတဖြစ်မှု စစ်ဆေးရန်" />
                  </h3>
                  <p className="text-[#B0BEC5] mb-4">
                    <LocalizedText
                      en="Make sure your device supports eSIM technology before purchasing."
                      mm="မဝယ်ယူမီ သင့်စက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ကြောင်း သေချာပါစေ။"
                    />
                  </p>
                  <Link href="/compatibility">
                    <Button className="w-full bg-[#1E2F3C] border border-[#00FFFF]/30 text-[#00FFFF] hover:bg-[#00FFFF]/10">
                      <Smartphone className="mr-2 h-5 w-5" />
                      <LocalizedText en="Check Compatibility" mm="သဟဇာတဖြစ်မှု စစ်ဆေးရန်" />
                    </Button>
                  </Link>
                </div>
              </motion.div>
            </div>
          </div>
        </AnimatedSection>

{/* How It Works Section */}
        <AnimatedSection>
          <div className="py-16">
            <div className="text-center mb-12">
              <motion.h2
                className="text-3xl md:text-4xl font-bold mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en={
                    <>
                      How <span className="text-[#00FFFF]">eSIM</span> Works
                    </>
                  }
                  mm={
                    <>
                      <span className="text-[#00FFFF]">eSIM</span> မည်သို့ အလုပ်လုပ်သနည်း
                    </>
                  }
                />
              </motion.h2>
              <motion.p
                className="text-lg text-[#B0BEC5] max-w-2xl mx-auto"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en="Setting up your eSIM is quick and easy. Follow these simple steps to get connected."
                  mm="သင့် eSIM ကို တပ်ဆင်ခြင်းသည် လျင်မြန်ပြီး လွယ်ကူပါသည်။ ချိတ်ဆက်ရန် ဤရိုးရှင်းသော အဆင့်များကို လိုက်နာပါ။"
                />
              </motion.p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  step: "01",
                  title: t("Purchase Your eSIM", "သင့် eSIM ကို ဝယ်ယူပါ"),
                  description: t(
                    "Choose your preferred data plan and complete the purchase process.",
                    "သင်နှစ်သက်ရာ ဒေတာအစီအစဉ်ကို ရွေးချယ်ပြီး ဝယ်ယူမှုလုပ်ငန်းစဉ်ကို ပြီးဆုံးအောင် လုပ်ဆောင်ပါ။",
                  ),
                },
                {
                  step: "02",
                  title: t("Receive QR Code", "QR ကုဒ် ရယူပါ"),
                  description: t(
                    "You'll receive a QR code via email immediately after purchase.",
                    "ဝယ်ယူပြီးနောက် ချက်ချင်း အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။",
                  ),
                },
                {
                  step: "03",
                  title: t("Scan & Activate", "စကင်ဖတ်ပြီး အသုံးပြုပါ"),
                  description: t(
                    "Scan the QR code in your device settings to activate your eSIM instantly.",
                    "သင့် eSIM ကို ချက်ချင်းအသုံးပြုရန် သင့်စက်ဆက်တင်များတွင် QR ကုဒ်ကို စကင်ဖတ်ပါ။",
                  ),
                },
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg relative overflow-hidden"
                >
                  {/* Step number */}
                  <div className="absolute -top-4 -left-4 w-24 h-24 flex items-center justify-center">
                    <span className="text-6xl font-bold text-[#00FFFF]/10">{item.step}</span>
                  </div>

<div className="relative z-10">
                    <h3 className="text-xl font-bold mb-4 mt-6">{item.title}</h3>
                    <p className="text-[#B0BEC5]">{item.description}</p>
                  </div>

{/* Bottom glow effect */}
                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent" />
                </motion.div>
              ))}
            </div>

{/* FAQ Section */}
        <AnimatedSection>
          <div className="py-16">
            <div className="text-center mb-12">
              <motion.h2
                className="text-3xl md:text-4xl font-bold mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en={
                    <>
                      Frequently Asked <span className="text-[#00FFFF]">Questions</span>
                    </>
                  }
                  mm={
                    <>
                      <span className="text-[#00FFFF]">မေးလေ့ရှိသော</span> မေးခွန်းများ
                    </>
                  }
                />
              </motion.h2>
              <motion.p
                className="text-lg text-[#B0BEC5] max-w-2xl mx-auto"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en="Find answers to common questions about our eSIM service."
                  mm="ကျွန်ုပ်တို့၏ eSIM ဝန်ဆောင်မှုအကြောင်း အမေးများသော မေးခွန်းများအတွက် အဖြေများကို ရှာဖွေပါ။"
                />
              </motion.p>
            </div>

<div className="max-w-3xl mx-auto">
              <Accordion type="single" collapsible className="space-y-4">
                {faqItems.map((item, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.3, delay: index * 0.1 }}
                    viewport={{ once: true }}
                  >
                    <AccordionItem
                      value={`item-${index}`}
                      className="border border-[#00FFFF]/10 rounded-lg overflow-hidden bg-gradient-to-br from-[#263A49] to-[#1E2F3C] shadow-md"
                    >
                      <AccordionTrigger className="px-6 py-4 hover:bg-[#00FFFF]/5 hover:no-underline group">
                        <div className="text-left font-medium group-hover:text-[#00FFFF] transition-colors">
                          {item.question}
                        </div>
                      </AccordionTrigger>
                      <AccordionContent className="px-6 py-4 bg-[#1E2F3C] border-t border-[#00FFFF]/10">
                        <p className="text-[#B0BEC5]">{item.answer}</p>
                      </AccordionContent>
                    </AccordionItem>
                  </motion.div>
                ))}
              </Accordion>

{/* Terms and Conditions */}
        <AnimatedSection>
          <div className="py-8">
            <div className="bg-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
              <h3 className="text-lg font-medium mb-4">
                <LocalizedText en="Terms and Conditions" mm="စည်းကမ်းချက်များ" />
              </h3>
              <div className="text-sm text-[#B0BEC5] space-y-2">
                <p>
                  <LocalizedText
                    en="By purchasing and using our eSIM service, you agree to our Terms of Service and Privacy Policy."
                    mm="ကျွန်ုပ်တို့၏ eSIM ဝန်ဆောင်မှုကို ဝယ်ယူအသုံးပြုခြင်းဖြင့် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့် ကိုယ်ရေးအချက်အလက်မူဝါဒကို သင် သဘောတူပါသည်။"
                  />
                </p>
                <p>
                  <LocalizedText
                    en="Data plans are valid for the specified duration from the time of activation. Unused data will expire after the validity period."
                    mm="ဒေတာအစီအစဉ်များသည် အသုံးပြုသည့်အချိန်မှစ၍ သတ်မှတ်ထားသော ကာလအတွက် သက်တမ်းရှိပါသည်။ အသုံးမပြုရသေးသော ဒေတာသည် သက်တမ်းကာလပြီးနောက် သက်တမ်းကုန်ဆုံးပါမည်။"
                  />
                </p>
                <p>
                  <LocalizedText
                    en="For technical support or assistance, please contact our customer service team."
                    mm="နည်းပညာဆိုင်ရာ အထောက်အပံ့ သို့မဟုတ် အကူအညီအတွက် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုဌာနကို ဆက်သွယ်ပါ။"
                  />
                </p>
              </div>
              <div className="mt-4 flex flex-wrap gap-4">
                <Link href="/terms-of-service" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Terms of Service" mm="ဝန်ဆောင်မှုစည်းကမ်းချက်များ" />
                </Link>
                <Link href="/privacy-policy" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Privacy Policy" mm="ကိုယ်ရေးအချက်အလက်မူဝါဒ" />
                </Link>
                <Link href="/contact" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Contact Support" mm="အထောက်အပံ့ကို ဆက်သွယ်ရန်" />
                </Link>
              </div>
            </div>
          </div>
        </AnimatedSection>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/esim/loading.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"
import { Smartphone, Wifi, Shield, Globe, Check } from "lucide-react"

export default function ESIMLoading() {
  const [progress, setProgress] = useState(0)
  const [currentStage, setCurrentStage] = useState(0)
  const { language } = useLanguage()
  const shouldReduceMotion = useReducedMotion()
  const animationRef = useRef<number | null>(null)
  const lastUpdateRef = useRef<number>(0)

// Loading stages with messages in both languages
  const stages = [
    {
      en: {
        title: "Initializing eSIM data",
        description: "Preparing your digital SIM experience",
      },
      mm: {
        title: "eSIM ဒေတာကို စတင်နေသည်",
        description: "သင့်ဒစ်ဂျစ်တယ် SIM အတွေ့အကြုံကို ပြင်ဆင်နေသည်",
      },
      icon: <Smartphone className="h-6 w-6" />,
      duration: 25,
    },
    {
      en: {
        title: "Loading connectivity options",
        description: "Finding the best plans for your needs",
      },
      mm: {
        title: "ချိတ်ဆက်မှုရွေးချယ်စရာများ ဖွင့်နေသည်",
        description: "သင့်လိုအပ်ချက်များအတွက် အကောင်းဆုံးအစီအစဉ်များကို ရှာဖွေနေသည်",
      },
      icon: <Wifi className="h-6 w-6" />,
      duration: 25,
    },
    {
      en: {
        title: "Verifying security protocols",
        description: "Ensuring your data remains protected",
      },
      mm: {
        title: "လုံခြုံရေးပရိုတိုကောများကို စစ်ဆေးနေသည်",
        description: "သင့်ဒေတာ လုံခြုံမှုရှိစေရန် သေချာဆောင်ရွက်နေသည်",
      },
      icon: <Shield className="h-6 w-6" />,
      duration: 25,
    },
    {
      en: {
        title: "Finalizing eSIM details",
        description: "Almost ready for your digital connectivity",
      },
      mm: {
        title: "eSIM အသေးစိတ်အချက်များကို အပြီးသတ်နေသည်",
        description: "သင့်ဒစ်ဂျစ်တယ်ချိတ်ဆက်မှုအတွက် လက်စသတ်ခါနီးပြီ",
      },
      icon: <Globe className="h-6 w-6" />,
      duration: 25,
    },
  ]

// Optimized loading progress simulation with requestAnimationFrame
  useEffect(() => {
    let currentProgress = 0
    let stageProgress = 0
    let currentStageIndex = 0
    const speed = 60 // milliseconds between updates

const animate = (timestamp: number) => {
      if (!lastUpdateRef.current) lastUpdateRef.current = timestamp

const elapsed = timestamp - lastUpdateRef.current

// Only update every 60ms (or whatever speed is set)
      if (elapsed > speed) {
        lastUpdateRef.current = timestamp

if (currentProgress >= 100) {
          return
        }

// Increment progress
        currentProgress += 1
        stageProgress += 1
        setProgress(currentProgress)

// Check if we need to move to the next stage
        if (stageProgress >= stages[currentStageIndex].duration) {
          stageProgress = 0
          if (currentStageIndex < stages.length - 1) {
            currentStageIndex += 1
            setCurrentStage(currentStageIndex)
          }
        }
      }

animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [stages])

const currentStageData = stages[currentStage][language === "en" ? "en" : "mm"]

// Simplified animations for reduced motion preference
  const particleAnimation = shouldReduceMotion ? { opacity: [0.3, 0.7, 0.3] } : { y: [0, -10, 0], opacity: [0, 1, 0] }

return (
    <div className="container mx-auto px-4 min-h-[80vh] flex flex-col items-center justify-center">
      <div className="w-full max-w-3xl">
        {/* Main loading container */}
        <motion.div
          initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg overflow-hidden relative"
        >
          {/* Background decoration */}
          <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl" />
          <div className="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl" />

{/* Header */}
          <div className="flex flex-col items-center justify-center mb-10 relative z-10">
            <motion.div
              className="text-4xl font-bold mb-2 flex items-center"
              initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <span className="text-[#00FFFF] mr-1">e</span>
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
              <span className="ml-1 text-[#00FFFF]">Myanmar</span>
            </motion.div>

<motion.div
              className="w-16 h-1 bg-gradient-to-r from-transparent via-[#00FFFF] to-transparent"
              initial={{ width: 0, opacity: 0 }}
              animate={{ width: "4rem", opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.3 }}
            />
          </div>

{/* Loading animation */}
          <div className="flex flex-col items-center justify-center mb-10">
            <div className="relative w-32 h-32 mb-8">
              {/* Circular progress - hardware accelerated */}
              <svg className="w-full h-full" viewBox="0 0 100 100" aria-hidden="true">
                <circle cx="50" cy="50" r="45" fill="none" stroke="#263A49" strokeWidth="8" strokeLinecap="round" />
                <motion.circle
                  cx="50"
                  cy="50"
                  r="45"
                  fill="none"
                  stroke="#00FFFF"
                  strokeWidth="8"
                  strokeLinecap="round"
                  initial={{ pathLength: 0 }}
                  animate={{ pathLength: progress / 100 }}
                  transition={{ duration: 0.3, ease: "easeOut" }}
                  style={{
                    strokeDasharray: "283",
                    strokeDashoffset: "283",
                    transformOrigin: "center",
                    willChange: "stroke-dashoffset",
                  }}
                />
              </svg>

{/* Icon in the center */}
              <motion.div
                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#1E2F3C] rounded-full p-4 border border-[#00FFFF]/20"
                animate={
                  shouldReduceMotion
                    ? {}
                    : {
                        scale: [1, 1.05, 1],
                      }
                }
                transition={{
                  duration: 2,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "easeInOut",
                }}
                style={{ willChange: "transform" }}
              >
                {stages[currentStage].icon}
              </motion.div>

{/* Percentage text */}
              <div
                className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-[#1E2F3C] px-3 py-1 rounded-full border border-[#00FFFF]/20 text-sm font-medium text-[#00FFFF]"
                aria-live="polite"
                aria-atomic="true"
              >
                {progress}%
              </div>
            </div>

{/* Stage indicators */}
            <div
              className="flex space-x-2 mb-6"
              role="progressbar"
              aria-valuenow={currentStage + 1}
              aria-valuemin={1}
              aria-valuemax={stages.length}
            >
              {stages.map((_, index) => (
                <motion.div
                  key={index}
                  className={`w-2 h-2 rounded-full ${index === currentStage ? "bg-[#00FFFF]" : "bg-[#00FFFF]/30"}`}
                  animate={
                    index === currentStage && !shouldReduceMotion
                      ? {
                          scale: [1, 1.3, 1],
                        }
                      : {}
                  }
                  transition={{
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "easeInOut",
                  }}
                />
              ))}
            </div>

{/* Stage information */}
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStage}
                initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
                transition={{ duration: 0.3 }}
                className="text-center"
                aria-live="polite"
              >
                <h2 className="text-xl font-medium text-white mb-2">{currentStageData.title}</h2>
                <p className="text-[#B0BEC5]">{currentStageData.description}</p>
              </motion.div>
            </AnimatePresence>
          </div>

{/* Completed stages - optimized with fewer animations */}
          <div className="space-y-3 max-w-md mx-auto">
            {stages.map((stage, index) => {
              const isCompleted = index < currentStage
              const isCurrent = index === currentStage

return (
                <div
                  key={index}
                  className={`flex items-center p-3 rounded-lg transition-all ${
                    isCompleted
                      ? "bg-[#00FFFF]/10 border border-[#00FFFF]/30"
                      : isCurrent
                        ? "bg-[#1E2F3C] border border-[#00FFFF]/10"
                        : "bg-[#1E2F3C]/50 border border-transparent opacity-50"
                  }`}
                >
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center mr-3 ${
                      isCompleted
                        ? "bg-[#00FFFF] text-[#1E2F3C]"
                        : isCurrent
                          ? "bg-[#00FFFF]/20 text-[#00FFFF]"
                          : "bg-[#263A49] text-[#B0BEC5]"
                    }`}
                  >
                    {isCompleted ? <Check className="h-5 w-5" /> : stage.icon}
                  </div>
                  <div>
                    <p
                      className={`font-medium ${
                        isCompleted ? "text-[#00FFFF]" : isCurrent ? "text-white" : "text-[#B0BEC5]"
                      }`}
                    >
                      {stage[language === "en" ? "en" : "mm"].title}
                    </p>
                  </div>
                </div>
              )
            })}
          </div>

{/* Loading tips */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1, duration: 0.5 }}
            className="mt-8 text-center"
          >
            <p className="text-sm text-[#B0BEC5] italic">
              {language === "en"
                ? "Did you know? eSIMs are more secure than physical SIM cards as they cannot be physically removed."
                : "သင်သိပါသလား? eSIM များသည် ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း မပြုလုပ်နိုင်သဖြင့် ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်များထက် ပိုမိုလုံခြုံပါသည်။"}
            </p>
          </motion.div>

{/* Digital particles animation - reduced for better performance */}
          {!shouldReduceMotion && (
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
              {Array.from({ length: 10 }).map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute w-1 h-1 rounded-full bg-[#00FFFF]"
                  style={{
                    top: `${Math.random() * 100}%`,
                    left: `${Math.random() * 100}%`,
                    willChange: "transform, opacity",
                  }}
                  animate={particleAnimation}
                  transition={{
                    duration: 1.5 + Math.random() * 2,
                    repeat: Number.POSITIVE_INFINITY,
                    delay: Math.random() * 1,
                  }}
                />
              ))}
            </div>
          )}
        </motion.div>

{/* Loading tips carousel */}
        <motion.div
          initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.7 }}
          className="mt-8 bg-[#1E2F3C] p-4 rounded-lg border border-[#00FFFF]/10"
        >
          <div className="flex items-center">
            <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-3">
              <Wifi className="h-5 w-5 text-[#00FFFF]" />
            </div>
            <p className="text-[#B0BEC5] text-sm">
              {language === "en"
                ? "We're preparing your personalized eSIM experience. This may take a few moments..."
                : "သင့်ကိုယ်ပိုင် eSIM အတွေ့အကြုံကို ပြင်ဆင်နေပါသည်။ ခဏစောင့်ပါ..."}
            </p>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/esim/page.tsx" isMerged="true"
import type { Metadata } from "next"
import ESIMPageContent from "@/components/esim-page"

export const metadata: Metadata = {
  title: "Buy eSIM for Myanmar | Instant Digital SIM Cards",
  description:
    "Purchase digital eSIM plans for Myanmar with instant activation. Choose from various data packages compatible with MPT, ATOM, Ooredoo, and Mytel networks.",
  keywords:
    "buy eSIM Myanmar, digital SIM card, eSIM data plan, Myanmar mobile data, prepaid eSIM, travel eSIM, MPT, ATOM, Ooredoo, Mytel",
  openGraph: {
    title: "Buy eSIM for Myanmar | Instant Digital SIM Cards",
    description:
      "Purchase digital eSIM plans for Myanmar with instant activation. Choose from various data packages compatible with all major networks.",
    url: "https://esim.com.mm/esim",
    images: [
      {
        url: "/og-image-esim.png",
        width: 1200,
        height: 630,
        alt: "eSIM Myanmar Plans",
      },
    ],
    type: "website",
    locale: "en_US",
  },
  twitter: {
    card: "summary_large_image",
    title: "Buy eSIM for Myanmar | Instant Digital SIM Cards",
    description: "Purchase digital eSIM plans for Myanmar with instant activation. Compatible with all major networks.",
    images: ["/og-image-esim.png"],
    creator: "@eSIMMyanmar",
  },
  alternates: {
    canonical: "https://esim.com.mm/esim",
  },
}

export default function Page() {
  return <ESIMPageContent />
}
[V0_FILE]typescriptreact:file="app/faq/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function FAQLoading() {
  return (
    <div className="container mx-auto px-4 py-16">
      <div className="flex flex-col items-center justify-center mb-12">
        <Skeleton className="h-12 w-3/4 md:w-1/2 mb-6 rounded-lg" />
        <Skeleton className="h-6 w-full md:w-2/3 mb-2 rounded-lg" />
      </div>

<div className="mt-12 flex justify-center">
        <Skeleton className="h-12 w-48 rounded-lg" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import AnimatedSection from "@/components/animated-section"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Search, HelpCircle, Filter } from "lucide-react"
import { useState } from "react"
import { Input } from "@/components/ui/input"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"
import { Button } from "@/components/ui/button"

export default function FAQPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [activeCategory, setActiveCategory] = useState("all")
  const { language } = useLanguage()

const categories = [
    { id: "all", name: language === "en" ? "All Questions" : "မေးခွန်းအားလုံး" },
    { id: "basics", name: language === "en" ? "eSIM Basics" : "eSIM အခြေခံ" },
    { id: "compatibility", name: language === "en" ? "Compatibility" : "သဟဇာတဖြစ်မှု" },
    { id: "usage", name: language === "en" ? "Usage & Setup" : "အသုံးပြုမှုနှင့် ပြင်ဆင်မှု" },
    { id: "carriers", name: language === "en" ? "Carriers" : "ဝန်ဆောင်မှုပေးသူများ" },
  ]

const faqs = [
    {
      category: "basics",
      question: "What is an eSIM?",
      questionMM: "eSIM ဆိုတာ ဘာလဲ?",
      answer:
        "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan from your carrier without having to use a physical SIM card.",
      answerMM:
        "eSIM (embedded SIM) ဆိုသည်မှာ ဖုန်းထဲတွင် ထည့်သွင်းထားသော digital SIM ဖြစ်ပြီး physical SIM ကဒ် မလိုဘဲ mobile ဝန်ဆောင်မှုကို အသုံးပြုနိုင်ပါသည်။",
    },
    {
      category: "compatibility",
      question: "How do I know if my device supports eSIM?",
      questionMM: "ကျွန်တော့်/ကျွန်မ ဖုန်းက eSIM ကို ထောက်ပံ့ပါသလား?",
      answer:
        "Most modern smartphones and tablets support eSIM. You can check our compatibility page or your device's settings to see if eSIM is supported.",
      answerMM:
        "ခေတ်မီ smartphone နှင့် tablet အများစုသည် eSIM ကို ထောက်ပံ့ပါသည်။ သင့်စက်၏ settings တွင် စစ်ဆေးနိုင်ပါသည် သို့မဟုတ် ကျွန်ုပ်တို့၏ compatibility စာမျက်နှာတွင် ကြည့်ရှုနိုင်ပါသည်။",
    },
    {
      category: "usage",
      question: "Can I use both physical SIM and eSIM at the same time?",
      questionMM: "Physical SIM နှင့် eSIM ကို တစ်ပြိုင်နက် သုံးလို့ရပါသလား?",
      answer:
        "Yes, most eSIM-compatible devices support Dual SIM Dual Standby (DSDS), allowing you to use both a physical SIM and an eSIM simultaneously.",
      answerMM:
        "ရပါသည်။ eSIM ထောက်ပံ့သော စက်အများစုသည် Dual SIM Dual Standby (DSDS) ကို ထောက်ပံ့သဖြင့် physical SIM နှင့် eSIM နှစ်ခုလုံးကို တစ်ပြိုင်နက် အသုံးပြုနိုင်ပါသည်။",
    },
    {
      category: "carriers",
      question: "Which carriers in Myanmar support eSIM?",
      questionMM: "မြန်မာနိုင်ငံမှာ ဘယ် carriers တွေက eSIM ကို ထောက်ပံ့ပါသလဲ?",
      answer:
        "Currently, MPT, ATOM, Ooredoo, and Mytel support eSIM technology in Myanmar. Each carrier has different plans and activation processes.",
      answerMM:
        "လက်ရှိတွင် MPT, ATOM, Ooredoo နှင့် Mytel တို့သည် မြန်မာနိုင်ငံတွင် eSIM နည်းပညာကို ထောက်ပံ့ပါသည်။ ဝန်ဆောင်မှုပေးသူတစ်ခုချင်းစီတွင် မတူညီသော အစီအစဉ်များနှင့် activation လုပ်ငန်းစဉ်များ ရှိပါသည်။",
    },
    {
      category: "usage",
      question: "Can I switch back to a physical SIM after using an eSIM?",
      questionMM: "eSIM သုံးပြီးနောက် physical SIM ကို ပြန်သုံးလို့ရပါသလား?",
      answer:
        "Yes, you can switch back to a physical SIM at any time. Your carrier can help transfer your service back to a physical SIM if needed.",
      answerMM:
        "ရပါသည်။ သင်သည် မည်သည့်အချိန်တွင်မဆို physical SIM သို့ ပြန်လည်ပြောင်းလဲနိုင်ပါသည်။ လိုအပ်ပါက သင့် carrier သည် သင့်ဝန်ဆောင်မှုကို physical SIM သို့ ပြန်လည်ပြောင်းရွှေ့ရန် ကူညီပေးနိုင်ပါသည်။",
    },
    {
      category: "basics",
      question: "Is eSIM more secure than a physical SIM?",
      questionMM: "eSIM က physical SIM ထက် ပိုလုံခြုံပါသလား?",
      answer:
        "Yes, eSIMs are generally considered more secure than physical SIMs as they cannot be physically removed or stolen. They also use advanced encryption methods for data protection.",
      answerMM:
        "ဟုတ်ပါသည်။ eSIM များသည် ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သောကြောင့် physical SIM များထက် ပိုမိုလုံခြုံသည်ဟု ယူဆကြပါသည်။ ၎င်းတို့သည် ဒေတာကာကွယ်ရေးအတွက် အဆင့်မြင့် encryption နည်းလမ်းများကိုလည်း အသုံးပြုပါသည်။",
    },
    {
      category: "usage",
      question: "How do I activate an eSIM?",
      questionMM: "eSIM ကို ဘယ်လိုအသုံးပြုရမလဲ?",
      answer:
        "To activate an eSIM, you'll need to scan a QR code provided by your carrier or enter an activation code manually. The exact steps vary by device, but generally involve going to your device's cellular or mobile data settings.",
      answerMM:
        "eSIM ကို အသုံးပြုရန်၊ သင့်ဝန်ဆောင်မှုပေးသူမှ ပေးထားသော QR ကုဒ်ကို စကင်ဖတ်ရန် သို့မဟုတ် activation ကုဒ်ကို လက်ဖြင့်ရိုက်ထည့်ရန် လိုအပ်ပါသည်။ တိကျသော အဆင့်များသည် စက်ပစ္စည်းအလိုက် ကွဲပြားသော်လည်း၊ ယေဘုယျအားဖြင့် သင့်စက်၏ cellular သို့မဟုတ် mobile data ဆက်တင်များသို့ သွားရောက်ခြင်း ပါဝင်ပါသည်။",
    },
    {
      category: "carriers",
      question: "Are there any additional fees for using an eSIM?",
      questionMM: "eSIM သုံးရင် အပိုကုန်ကျစရိတ်တွေ ရှိပါသလား?",
      answer:
        "This depends on your carrier. Some carriers charge a one-time activation fee for eSIMs, while others provide them at no additional cost. The service plans themselves are typically the same price as those for physical SIMs.",
      answerMM:
        "ဤသည်မှာ သင့်ဝန်ဆောင်မှုပေးသူအပေါ် မူတည်ပါသည်။ အချို့ဝန်ဆောင်မှုပေးသူများသည် eSIM များအတွက် တစ်ကြိမ်တည်း activation ကြေးကို ကောက်ခံပြီး အခြားသူများသည် အပိုကုန်ကျစရိတ်မရှိဘဲ ပေးအပ်ပါသည်။ ဝန်ဆောင်မှုအစီအစဉ်များကိုယ်တိုင်သည် ယေဘုယျအားဖြင့် physical SIM များအတွက် ဈေးနှုန်းတူညီပါသည်။",
    },
  ]

const filteredFaqs = faqs.filter(
    (faq) =>
      (activeCategory === "all" || faq.category === activeCategory) &&
      (faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
        faq.questionMM.includes(searchTerm) ||
        faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) ||
        faq.answerMM.includes(searchTerm)),
  )

return (
    <div className="container mx-auto px-4">
      <AnimatedSection>
        <div className="py-16 text-center">
          <motion.h1
            className="text-4xl md:text-6xl font-bold mb-6 gradient-text glow-text"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <LocalizedText
              en={
                <>
                  Frequently Asked <span className="text-[#00FFFF]">Questions</span>
                </>
              }
              mm={
                <>
                  <span className="text-[#00FFFF]">မေးလေ့ရှိသော</span> မေးခွန်းများ
                </>
              }
            />
          </motion.h1>
          <motion.p
            className="text-xl text-[#B0BEC5] max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <LocalizedText
              en="Find answers to common questions about eSIM technology and its usage in Myanmar."
              mm="eSIM နည်းပညာနှင့် မြန်မာနိုင်ငံတွင် ၎င်း၏အသုံးပြုမှုအကြောင်း အမေးများသော မေးခွန်းများအတွက် အဖြေများကို ရှာဖွေပါ။"
            />
          </motion.p>
        </div>
      </AnimatedSection>

<AnimatedSection>
        <div className="py-12 max-w-4xl mx-auto">
          <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg mb-8">
            <div className="relative mb-6">
              <label htmlFor="search-faq" className="sr-only">
                <LocalizedText en="Search questions" mm="မေးခွန်းများကို ရှာဖွေပါ" />
              </label>
              <Search
                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]"
                aria-hidden="true"
              />
              <Input
                id="search-faq"
                type="text"
                placeholder={language === "en" ? "Search questions..." : "မေးခွန်းများကို ရှာဖွေပါ..."}
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF] rounded-lg"
              />
            </div>

<div className="flex flex-wrap gap-2" role="radiogroup" aria-label="FAQ Categories">
              {categories.map((category) => (
                <Button
                  key={category.id}
                  variant={activeCategory === category.id ? "default" : "outline"}
                  size="sm"
                  onClick={() => setActiveCategory(category.id)}
                  className={
                    activeCategory === category.id
                      ? "bg-[#00FFFF] text-[#1E2F3C] hover:bg-[#00CCCC]"
                      : "border-[#00FFFF]/30 text-[#B0BEC5] hover:bg-[#00FFFF]/10 hover:text-white"
                  }
                  aria-pressed={activeCategory === category.id}
                  role="radio"
                  aria-checked={activeCategory === category.id}
                >
                  {category.name}
                </Button>
              ))}
            </div>
          </div>

{filteredFaqs.length === 0 ? (
            <div className="text-center py-12 bg-[#1E2F3C] rounded-xl border border-[#00FFFF]/10 shadow-lg">
              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
                <HelpCircle className="h-16 w-16 text-[#B0BEC5] mx-auto mb-4" />
                <h3 className="text-xl font-bold mb-2">
                  <LocalizedText en="No Results Found" mm="ရလဒ်များ မတွေ့ရှိပါ" />
                </h3>
                <p className="text-[#B0BEC5] max-w-md mx-auto">
                  <LocalizedText
                    en="We couldn't find any FAQs matching your search. Try different keywords or browse all questions."
                    mm="သင့်ရှာဖွေမှုနှင့် ကိုက်ညီသော FAQ များကို ကျွန်ုပ်တို့ ရှာမတွေ့ပါ။ မတူညီသော စကားလုံးများဖြင့် ကြိုးစားပါ သို့မဟုတ် မေးခွန်းအားလုံးကို ကြည့်ရှုပါ။"
                  />
                </p>
              </motion.div>
            </div>
          ) : (
            <div className="space-y-4" role="region" aria-label="FAQ List">
              {filteredFaqs.map((faq, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                >
                  <Accordion type="single" collapsible>
                    <AccordionItem
                      value={`item-${index}`}
                      className="border border-[#00FFFF]/10 rounded-lg overflow-hidden bg-gradient-to-br from-[#263A49] to-[#1E2F3C] shadow-md"
                    >
                      <AccordionTrigger className="px-6 py-4 hover:bg-[#00FFFF]/5 hover:no-underline group">
                        <div className="text-left">
                          <div className="font-medium group-hover:text-[#00FFFF] transition-colors">{faq.question}</div>
                          <div className="text-sm text-[#B0BEC5] mt-1 mm">{faq.questionMM}</div>
                        </div>
                      </AccordionTrigger>
                      <AccordionContent className="px-6 py-4 bg-[#1E2F3C] border-t border-[#00FFFF]/10">
                        <div className="space-y-3">
                          <p>{faq.answer}</p>
                          <p className="text-[#B0BEC5] mm">{faq.answerMM}</p>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </motion.div>
              ))}
            </div>
          )}

<motion.div
            className="mt-12 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg text-center"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <h3 className="text-xl font-bold mb-3">
              <LocalizedText en="Still Have Questions?" mm="မေးခွန်းများ ရှိနေဆဲလား?" />
            </h3>
            <p className="text-[#B0BEC5] mb-6 max-w-lg mx-auto">
              <LocalizedText
                en="If you couldn't find the answer you were looking for, feel free to contact our support team."
                mm="သင်ရှာဖွေနေသော အဖြေကို မတွေ့ရှိပါက ကျွန်ုပ်တို့၏ အထောက်အပံ့အဖွဲ့ကို ဆက်သွယ်ရန် မတွန့်ဆုတ်ပါနှင့်။"
              />
            </p>
            <Button
              className="bg-[#00FFFF] text-[#1E2F3C] hover:bg-[#00CCCC] px-8 py-2"
              onClick={() => (window.location.href = "/contact")}
            >
              <LocalizedText en="Contact Support" mm="အထောက်အပံ့ကို ဆက်သွယ်ရန်" />
            </Button>
          </motion.div>
        </div>
      </AnimatedSection>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Core colors */
    --primary: 180 100% 50%;
    --primary-foreground: 200 30% 18%;
    --primary-light: 180 100% 90%;
    --primary-dark: 180 100% 40%;

/* UI colors */
    --background: 200 30% 18%;
    --foreground: 210 40% 98%;
    --card: 200 30% 22%;
    --card-foreground: 210 40% 98%;
    --popover: 200 30% 18%;
    --popover-foreground: 210 40% 98%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 180 100% 50%;

/* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 255, 255, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 255, 255, 0.07), 0 1px 3px rgba(0, 255, 255, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 255, 255, 0.1), 0 4px 6px rgba(0, 255, 255, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 255, 255, 0.15), 0 10px 10px rgba(0, 255, 255, 0.05);

/* Radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

/* Typography Scale */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */

/* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

/* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
  }

.dark {
    --background: 200 30% 18%;
    --foreground: 210 40% 98%;
    --card: 200 30% 22%;
    --card-foreground: 210 40% 98%;
    --popover: 200 30% 18%;
    --popover-foreground: 210 40% 98%;
    --primary: 180 100% 50%;
    --primary-foreground: 200 30% 18%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 180 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
  }

/* Base typography styles */
  h1,
  .h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    font-weight: 700;
    margin-bottom: 1rem;
  }

h2,
  .h2 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    font-weight: 700;
    margin-bottom: 0.75rem;
  }

h3,
  .h3 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-snug);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

h4,
  .h4 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

h5,
  .h5 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

h6,
  .h6 {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

p {
    margin-bottom: 1rem;
  }

small,
  .text-sm {
    font-size: var(--font-size-sm);
  }

.text-xs {
    font-size: var(--font-size-xs);
  }

.text-lg {
    font-size: var(--font-size-lg);
  }

.text-xl {
    font-size: var(--font-size-xl);
  }

.text-2xl {
    font-size: var(--font-size-2xl);
  }

.text-3xl {
    font-size: var(--font-size-3xl);
  }

.text-4xl {
    font-size: var(--font-size-4xl);
  }

.text-5xl {
    font-size: var(--font-size-5xl);
  }

.text-6xl {
    font-size: var(--font-size-6xl);
  }
}

:root {
  font-family: var(--font-inter), var(--font-noto-sans-myanmar), system-ui, sans-serif;
  scroll-behavior: smooth;
}

.mm {
  font-family: var(--font-noto-sans-myanmar), system-ui, sans-serif;
  line-height: 1.8;
}

/* Language-specific styles */
.lang-mm .text-lg {
  line-height: 2;
}

.lang-mm .text-xl {
  line-height: 1.9;
}

.lang-mm .text-2xl {
  line-height: 1.8;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1e2f3c;
}

::-webkit-scrollbar-thumb {
  background: #263a49;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00ffff;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, #00ffff, #00ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Glow effect */
.glow {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.glow-text {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.glow-sm {
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.glow-lg {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}

/* Thingyan water animations - improved */
.water-ripple {
  position: relative;
  overflow: hidden;
}

.water-ripple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 255, 0) 0%,
    rgba(0, 255, 255, 0.1) 50%,
    rgba(0, 255, 255, 0) 100%
  );
  animation: ripple 8s linear infinite;
  opacity: 0.5;
}

.water-ripple::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 255, 0) 0%,
    rgba(0, 255, 255, 0.1) 50%,
    rgba(0, 255, 255, 0) 100%
  );
  animation: ripple 8s linear infinite 4s;
  opacity: 0.5;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Water drops animation - improved */
.water-drop {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.6);
  animation: drop 3s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
  20% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
}

/* Splash effect - improved */
.splash {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.4);
  transform: scale(0);
  animation: splash 2s ease-out forwards;
}

@keyframes splash {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/* Water wave animation */
.water-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300ffff' fill-opacity='0.2' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  animation: wave 10s linear infinite;
}

.water-wave-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%2300ffff' fill-opacity='0.3' d='M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,90.7C672,85,768,107,864,144C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 100%;
  animation: wave 15s linear infinite reverse;
}

/* Thingyan flower animation - improved */
.thingyan-flower {
  position: relative;
  width: 20px;
  height: 20px;
}

.thingyan-flower .petal {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgba(0, 255, 255, 0.7);
  border-radius: 50%;
}

.thingyan-flower .petal:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.thingyan-flower .petal:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.thingyan-flower .petal:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.thingyan-flower .petal:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.thingyan-flower .petal:nth-child(5) {
  top: 15%;
  right: 15%;
  transform: translate(-50%, -50%);
}

.thingyan-flower .petal:nth-child(6) {
  bottom: 15%;
  right: 15%;
  transform: translate(-50%, -50%);
}

.thingyan-flower .petal:nth-child(7) {
  bottom: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.thingyan-flower .petal:nth-child(8) {
  top: 15%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.thingyan-flower .center {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1440px;
  }
}

/* Animated background */
.animated-bg {
  background: linear-gradient(-45deg, #1e2f3c, #162430, #263a49, #1a2530);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}

/* Animation utilities */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Responsive typography */
@media (max-width: 640px) {
  :root {
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.813rem; /* 13px */
    --font-size-base: 0.938rem; /* 15px */
    --font-size-lg: 1.063rem; /* 17px */
    --font-size-xl: 1.188rem; /* 19px */
    --font-size-2xl: 1.375rem; /* 22px */
    --font-size-3xl: 1.625rem; /* 26px */
    --font-size-4xl: 1.875rem; /* 30px */
    --font-size-5xl: 2.25rem; /* 36px */
    --font-size-6xl: 2.75rem; /* 44px */
  }

h1,
  .h1 {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

h2,
  .h2 {
    font-size: clamp(1.5rem, 6vw, 1.875rem);
  }
}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #00ffff;
  color: #1e2f3c;
  font-weight: bold;
  z-index: 9999;
}

/* UI Kit Components */
@layer components {
  /* Buttons */
  .btn-primary {
    @apply bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 px-6 py-3 rounded-lg shadow-lg shadow-[#00FFFF]/20 transition-all duration-300 font-medium;
  }

.btn-secondary {
    @apply border border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 px-6 py-3 rounded-lg transition-all duration-300 font-medium;
  }

.btn-tertiary {
    @apply text-[#00FFFF] hover:text-[#00CCFF] transition-colors duration-300 font-medium;
  }

.btn-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center bg-[#263A49] text-[#00FFFF] hover:bg-[#00FFFF]/20 transition-colors duration-300;
  }

/* Cards */
  .card-primary {
    @apply bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg;
  }

.card-secondary {
    @apply bg-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10;
  }

.card-hover {
    @apply transition-all duration-300 hover:border-[#00FFFF]/30 hover:shadow-lg hover:shadow-[#00FFFF]/10;
  }

/* Inputs */
  .input-primary {
    @apply bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF] rounded-lg px-4 py-2 text-white placeholder:text-[#B0BEC5]/70;
  }

/* Badges */
  .badge-primary {
    @apply inline-block px-3 py-1 rounded-full bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] text-sm font-medium;
  }

.badge-secondary {
    @apply inline-block px-3 py-1 rounded-full bg-[#263A49] text-[#B0BEC5] text-sm font-medium;
  }

/* Dividers */
  .divider {
    @apply w-full h-px bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent my-6;
  }

/* Containers */
  .container-narrow {
    @apply max-w-4xl mx-auto px-4;
  }

/* Sections */
  .section-padding {
    @apply py-16 md:py-24;
  }

/* Typography */
  .heading-1 {
    @apply text-4xl md:text-6xl font-bold gradient-text glow-text;
  }

.heading-2 {
    @apply text-3xl md:text-4xl font-bold;
  }

.heading-3 {
    @apply text-2xl font-bold;
  }

.text-body {
    @apply text-[#B0BEC5];
  }

.text-highlight {
    @apply text-[#00FFFF];
  }

/* Thingyan theme specific */
  .thingyan-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full bg-[#00FFFF]/10 border border-[#00FFFF]/30 text-[#00FFFF] text-xs font-medium;
  }

.thingyan-glow {
    @apply shadow-[0_0_15px_rgba(0,255,255,0.3)];
  }

.thingyan-border {
    @apply border border-[#00FFFF]/20 hover:border-[#00FFFF]/40 transition-colors duration-300;
  }

/* File size display */
  .file-size {
    @apply text-xs text-[#B0BEC5] font-mono;
  }

.drive-size {
    @apply text-sm font-medium text-[#00FFFF];
  }

/* Truncated text with ellipsis */
  .truncate-text {
    @apply truncate;
  }

.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Animations */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.5;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 0.5s ease-out forwards;
}

/* Glassmorphism */
.glass {
  background: rgba(30, 47, 60, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(22, 36, 48, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.05);
}

/* Shimmer animation - improved */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}

/* Water wave animation - improved */
.water-wave-animation {
  position: relative;
  overflow: hidden;
}

.water-wave-animation::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(0, 255, 255, 0.3);
  border-radius: 50% 50% 0 0;
  animation: wave 3s ease-in-out infinite alternate;
}

@keyframes wave {
  0% {
    transform: scaleX(0.8) translateY(0);
  }
  100% {
    transform: scaleX(1.2) translateY(-5px);
  }
}
[V0_FILE]typescriptreact:file="app/how-it-works/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import AnimatedSection from "@/components/animated-section"
import StepCard from "@/components/step-card"
import { Smartphone, QrCode, Check, ArrowRight } from "lucide-react"

export default function HowItWorksPage() {
  const steps = [
    {
      number: 1,
      title: "Choose Carrier",
      description: "Select your preferred mobile carrier that supports eSIM technology in Myanmar.",
      icon: <Smartphone className="h-12 w-12 text-[#00FFFF]" />,
    },
    {
      number: 2,
      title: "Get LPA Code",
      description: "Receive a QR code or activation code from your carrier to set up your eSIM.",
      icon: <QrCode className="h-12 w-12 text-[#00FFFF]" />,
    },
    {
      number: 3,
      title: "Scan with Phone",
      description: "Scan the QR code with your phone's camera or enter the activation code manually.",
      icon: <Check className="h-12 w-12 text-[#00FFFF]" />,
    },
  ]

<AnimatedSection>
        <div className="py-12 relative">
          {/* Connecting line between steps */}
          <div className="absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent hidden md:block"></div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-10">
            {steps.map((step, index) => (
              <div key={step.number} className="relative">
                <StepCard
                  number={step.number}
                  title={step.title}
                  description={step.description}
                  icon={step.icon}
                  delay={index * 0.2}
                />

{index < steps.length - 1 && (
                  <div className="hidden md:block absolute top-1/2 -right-4 transform translate-x-1/2 -translate-y-1/2 z-20">
                    <motion.div
                      animate={{ x: [0, 10, 0] }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
                    >
                      <ArrowRight className="h-8 w-8 text-[#00FFFF]" />
                    </motion.div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </AnimatedSection>

<AnimatedSection>
        <div className="py-16">
          <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 md:p-12 rounded-xl border border-[#00FFFF]/10 shadow-lg">
            <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">
              Detailed <span className="text-[#00FFFF]">Activation Process</span>
            </h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="bg-[#1E2F3C] p-6 rounded-lg border border-[#00FFFF]/10"
              >
                <div className="flex items-center mb-4">
                  <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-3">
                    <Smartphone className="h-5 w-5 text-[#00FFFF]" />
                  </div>
                  <h3 className="text-xl font-bold">For iPhone Users</h3>
                </div>
                <ol className="list-decimal pl-5 space-y-4 text-[#B0BEC5]">
                  <li className="pl-2">
                    <span className="font-medium text-white">Go to Settings</span>
                    <p>Navigate to Settings > Cellular/Mobile Data</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Add Cellular Plan</span>
                    <p>Tap "Add Cellular/Mobile Plan"</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Scan QR Code</span>
                    <p>Scan the QR code provided by your carrier</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Follow Instructions</span>
                    <p>Follow the on-screen instructions to complete setup</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Set Preferences</span>
                    <p>Select your default line for calls, messages, and data</p>
                  </li>
                </ol>
              </motion.div>

<motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="bg-[#1E2F3C] p-6 rounded-lg border border-[#00FFFF]/10"
              >
                <div className="flex items-center mb-4">
                  <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-3">
                    <Smartphone className="h-5 w-5 text-[#00FFFF]" />
                  </div>
                  <h3 className="text-xl font-bold">For Android Users</h3>
                </div>
                <ol className="list-decimal pl-5 space-y-4 text-[#B0BEC5]">
                  <li className="pl-2">
                    <span className="font-medium text-white">Access SIM Settings</span>
                    <p>Go to Settings > Connections > SIM Manager</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Add eSIM</span>
                    <p>Tap "Add mobile plan" or "+ Add eSIM"</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Scan QR Code</span>
                    <p>Select "Scan carrier QR code"</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Scan and Confirm</span>
                    <p>Scan the QR code provided by your carrier</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Complete Setup</span>
                    <p>Follow the on-screen instructions to complete setup</p>
                  </li>
                  <li className="pl-2">
                    <span className="font-medium text-white">Set Preferences</span>
                    <p>Set your preferences for calls, messages, and data</p>
                  </li>
                </ol>
              </motion.div>
            </div>

<div className="mt-12 p-6 bg-[#1E2F3C] rounded-lg border border-[#00FFFF]/10">
              <h3 className="text-xl font-bold mb-4 text-[#00FFFF]">Important Notes</h3>
              <ul className="space-y-3 text-[#B0BEC5]">
                <li className="flex items-start">
                  <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                  <span>
                    Make sure your device is connected to Wi-Fi or has mobile data enabled during the activation
                    process.
                  </span>
                </li>
                <li className="flex items-start">
                  <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                  <span>If you encounter any issues, contact your carrier's customer support for assistance.</span>
                </li>
                <li className="flex items-start">
                  <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                  <span>Some older devices may require a restart after eSIM activation.</span>
                </li>
                <li className="flex items-start">
                  <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                  <span>
                    You can store multiple eSIM profiles but can only use one at a time unless your device supports Dual
                    SIM Dual Standby (DSDS).
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter, Noto_Sans_Myanmar } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { LanguageProvider } from "@/contexts/language-context"
import { ThingyanThemeProvider } from "@/contexts/thingyan-theme-context"
import Footer from "@/components/footer"
import OrganizationSchema from "@/components/organization-schema"
import LocalBusinessSchema from "@/components/local-business-schema"
import ClientComponentsWrapper from "@/components/client-components-wrapper"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

const notoSansMyanmar = Noto_Sans_Myanmar({
  subsets: ["myanmar"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-noto-sans-myanmar",
  display: "swap",
})

export const metadata: Metadata = {
  title: "eSIM Myanmar | Digital SIM Technology for Seamless Connectivity",
  description:
    "Get instant mobile connectivity in Myanmar with eSIM technology. No physical SIM card needed. Compatible with all major carriers including MPT, ATOM, Ooredoo, and Mytel.",
  keywords:
    "eSIM, Myanmar, digital SIM, mobile connectivity, MPT, ATOM, Ooredoo, Mytel, travel SIM, data plan, prepaid SIM",
  authors: [{ name: "eSIM Myanmar", url: "https://esim.com.mm" }],
  viewport: "width=device-width, initial-scale=1",
  themeColor: "#00FFFF",
  metadataBase: new URL("https://esim.com.mm"),
  alternates: {
    canonical: "/",
    languages: {
      "en-US": "/en",
      "my-MM": "/mm",
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://esim.com.mm",
    title: "eSIM Myanmar | Digital SIM Technology for Seamless Connectivity",
    description:
      "Get instant mobile connectivity in Myanmar with eSIM technology. No physical SIM card needed. Compatible with all major carriers.",
    siteName: "eSIM Myanmar",
    images: [
      {
        url: "/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "eSIM Myanmar - Digital SIM Technology",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "eSIM Myanmar | Digital SIM Technology",
    description: "Get instant mobile connectivity in Myanmar with eSIM technology. No physical SIM card needed.",
    images: ["/twitter-image.jpg"],
    creator: "@eSIMMyanmar",
  },
  verification: {
    google: "google-site-verification-code",
    yandex: "yandex-verification-code",
  },
  icons: {
    icon: [
      { url: "/favicon.ico" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
    ],
    apple: [
      { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
      { url: "/apple-touch-icon-precomposed.png", sizes: "180x180", type: "image/png" },
    ],
    other: [
      {
        rel: "mask-icon",
        url: "/safari-pinned-tab.svg",
        color: "#00FFFF",
      },
      {
        rel: "shortcut icon",
        url: "/favicon.ico",
      },
    ],
  },
  manifest: "/site.webmanifest",
  generator: "Next.js",
  applicationName: "eSIM Myanmar",
  referrer: "origin-when-cross-origin",
  formatDetection: {
    telephone: true,
    date: true,
    address: true,
    email: true,
    url: true,
  },
  category: "technology",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${notoSansMyanmar.variable}`}>
      <body className="bg-[#162430] text-white min-h-screen">
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
          <LanguageProvider>
            <ThingyanThemeProvider initialState={false}>
              <OrganizationSchema />
              <LocalBusinessSchema />
              <ClientComponentsWrapper>{children}</ClientComponentsWrapper>
              <Footer />
            </ThingyanThemeProvider>
          </LanguageProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import HeroSection from "@/components/hero-section"
import FeatureSection from "@/components/feature-section"
import TestimonialSection from "@/components/testimonial-section"
import CTASection from "@/components/cta-section"
import AnimatedSection from "@/components/animated-section"
import { LocalizedText } from "@/components/ui/localized-text"
import { Smartphone, Zap, Shield, Globe } from "lucide-react"

export default function Home() {
  return (
    <>
      {/* Skip to content link for accessibility */}
      <a href="#main-content" className="skip-to-content">
        <LocalizedText en="Skip to content" mm="အကြောင်းအရာသို့ ကျော်သွားရန်" />
      </a>

<AnimatedSection>
          <section className="py-20" id="what-is-esim" aria-labelledby="what-is-esim-heading">
            <div className="container mx-auto px-4">
              <div className="text-center mb-16">
                <h2 id="what-is-esim-heading" className="text-3xl md:text-5xl font-bold mb-6">
                  <LocalizedText
                    en={
                      <>
                        What is an <span className="text-[#00FFFF]">eSIM</span>?
                      </>
                    }
                    mm={
                      <>
                        <span className="text-[#00FFFF]">eSIM</span> ဆိုတာ ဘာလဲ?
                      </>
                    }
                  />
                </h2>
                <p className="text-xl text-[#B0BEC5] max-w-3xl mx-auto">
                  <LocalizedText
                    en="An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan without using a physical SIM card."
                    mm="eSIM (embedded SIM) ဆိုသည်မှာ ဖုန်းထဲတွင် ထည့်သွင်းထားသော digital SIM ဖြစ်ပြီး physical SIM ကဒ် မလိုဘဲ mobile ဝန်ဆောင်မှုကို အသုံးပြုနိုင်ပါသည်။"
                  />
                </p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {[
                  {
                    number: "01",
                    title: <LocalizedText en="Digital SIM Card" mm="ဒီဂျစ်တယ် SIM ကဒ်" />,
                    description: (
                      <LocalizedText
                        en="An eSIM is a digital SIM that allows you to activate a cellular plan without using a physical SIM card."
                        mm="eSIM သည် ဒီဂျစ်တယ် SIM ဖြစ်ပြီး ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မသုံးဘဲ မိုဘိုင်းဝန်ဆောင်မှုကို အသုံးပြုနိုင်စေသည်။"
                      />
                    ),
                    icon: <Smartphone className="h-6 w-6 text-[#00FFFF]" />,
                  },
                  {
                    number: "02",
                    title: <LocalizedText en="Built Into Device" mm="စက်ထဲတွင် ထည့်သွင်းထားသည်" />,
                    description: (
                      <LocalizedText
                        en="eSIMs are built directly into your device, saving space and allowing for multiple profiles."
                        mm="eSIM များကို သင့်စက်ထဲတွင် တိုက်ရိုက်ထည့်သွင်းထားသဖြင့် နေရာကို ချွေတာပြီး ပရိုဖိုင်အများအပြားကို ခွင့်ပြုပါသည်။"
                      />
                    ),
                    icon: <Shield className="h-6 w-6 text-[#00FFFF]" />,
                  },
                  {
                    number: "03",
                    title: <LocalizedText en="Quick Activation" mm="အမြန်အသုံးပြုနိုင်" />,
                    description: (
                      <LocalizedText
                        en="Activate your eSIM instantly by scanning a QR code - no physical SIM card needed."
                        mm="QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့် eSIM ကို ချက်ချင်းအသုံးပြုနိုင်သည် - ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။"
                      />
                    ),
                    icon: <Zap className="h-6 w-6 text-[#00FFFF]" />,
                  },
                ].map((item, index) => (
                  <div
                    key={index}
                    className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl shadow-lg border border-[#00FFFF]/10"
                  >
                    <div className="flex items-center mb-4">
                      <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-3">
                        {item.icon}
                      </div>
                      <div className="text-[#00FFFF] text-2xl font-bold">{item.number}</div>
                    </div>
                    <h3 className="text-xl font-semibold mb-3">{item.title}</h3>
                    <p className="text-[#B0BEC5]">{item.description}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </AnimatedSection>

<AnimatedSection>
          <section className="py-20" aria-labelledby="carriers-heading">
            <div className="container mx-auto px-4">
              <div className="text-center mb-16">
                <h2 id="carriers-heading" className="text-3xl md:text-5xl font-bold mb-6">
                  <LocalizedText
                    en={
                      <>
                        Supported by <span className="text-[#00FFFF]">Local Carriers</span>
                      </>
                    }
                    mm={
                      <>
                        <span className="text-[#00FFFF]">ပြည်တွင်းဝန်ဆောင်မှုပေးသူများ</span>မှ ထောက်ပံ့ထားသည်
                      </>
                    }
                  />
                </h2>
                <p className="text-xl text-[#B0BEC5] max-w-3xl mx-auto">
                  <LocalizedText
                    en="eSIM technology is supported by major mobile carriers in Myanmar."
                    mm="eSIM နည်းပညာကို မြန်မာနိုင်ငံရှိ အဓိက မိုဘိုင်းဝန်ဆောင်မှုပေးသူများမှ ထောက်ပံ့ထားပါသည်။"
                  />
                </p>
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
                {["MPT", "ATOM", "Ooredoo", "Mytel"].map((carrier, index) => (
                  <div
                    key={carrier}
                    className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl flex flex-col items-center justify-center h-40 border border-[#00FFFF]/10 relative overflow-hidden"
                  >
                    <div className="flex items-center justify-center mb-3">
                      <Globe className="h-8 w-8 text-[#00FFFF]/70 mr-2" />
                    </div>
                    <h3 className="text-2xl font-bold text-[#00FFFF]">{carrier}</h3>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </AnimatedSection>

<CTASection />
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function PrivacyPolicyLoading() {
  return (
    <div className="container mx-auto px-4 py-16">
      <div className="flex flex-col items-center justify-center mb-12">
        <Skeleton className="h-12 w-3/4 md:w-1/2 mb-6 rounded-lg" />
        <Skeleton className="h-6 w-full md:w-2/3 mb-2 rounded-lg" />
      </div>

<div className="space-y-4">
            {[1, 2].map((i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-6 w-3/4 rounded-lg" />
                <Skeleton className="h-4 w-full rounded-lg" />
                <Skeleton className="h-4 w-full rounded-lg" />
                <Skeleton className="h-4 w-2/3 rounded-lg" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import AnimatedSection from "@/components/animated-section"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"
import { Shield, Lock, FileText, Eye, Users, Clock, AlertTriangle } from "lucide-react"

export default function PrivacyPolicyPage() {
  const { t } = useLanguage()

const sections = [
    {
      icon: <Shield className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Information We Collect", "ကျွန်ုပ်တို့ စုဆောင်းသော အချက်အလက်များ"),
      content: t(
        "We collect personal information that you voluntarily provide to us when you use our services, such as your name, phone number, email address, and device information. We also collect information about how you use our services, including your browsing history, IP address, and device identifiers.",
        "သင် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးပြုသောအခါ သင်၏အမည်၊ ဖုန်းနံပါတ်၊ အီးမေးလ်လိပ်စာနှင့် စက်ပစ္စည်းအချက်အလက်များကဲ့သို့ သင်မိမိဆန္ဒအလျောက် ပေးအပ်သော ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ စုဆောင်းပါသည်။ သင်၏ ရှာဖွေမှုမှတ်တမ်း၊ IP လိပ်စာနှင့် စက်ပစ္စည်း အိုင်ဒီများအပါအဝင် သင် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို မည်သို့အသုံးပြုသည်ဆိုသည့် အချက်အလက်များကိုလည်း ကျွန်ုပ်တို့ စုဆောင်းပါသည်။",
      ),
    },
    {
      icon: <Lock className="h-6 w-6 text-[#00FFFF]" />,
      title: t("How We Use Your Information", "သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မည်သို့အသုံးပြုသည်"),
      content: t(
        "We use your information to provide, maintain, and improve our services, to communicate with you, to process your transactions, and to comply with legal obligations. We may also use your information to personalize your experience, to develop new features, and to protect our rights and interests.",
        "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ပေးအပ်ရန်၊ ထိန်းသိမ်းရန်နှင့် တိုးတက်စေရန်၊ သင်နှင့် ဆက်သွယ်ရန်၊ သင်၏ငွေပေးချေမှုများကို ဆောင်ရွက်ရန်နှင့် ဥပဒေဆိုင်ရာ တာဝန်ဝတ္တရားများကို လိုက်နာရန် သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။ သင်၏အတွေ့အကြုံကို ကိုယ်ပိုင်ပြုလုပ်ရန်၊ အင်္ဂါရပ်အသစ်များ ဖွံ့ဖြိုးစေရန်နှင့် ကျွန်ုပ်တို့၏ အခွင့်အရေးများနှင့် အကျိုးစီးပွားများကို ကာကွယ်ရန်အတွက်လည်း သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ အသုံးပြုနိုင်ပါသည်။",
      ),
    },
    {
      icon: <FileText className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Information Sharing", "အချက်အလက်မျှဝေခြင်း"),
      content: t(
        "We may share your information with third-party service providers who perform services on our behalf, such as payment processing, data analysis, and customer service. We may also share your information with our business partners, with your consent, or as required by law. We do not sell your personal information to third parties.",
        "ငွေပေးချေမှုဆောင်ရွက်ခြင်း၊ ဒေတာခွဲခြမ်းစိတ်ဖြာခြင်းနှင့် ဖောက်သည်ဝန်ဆောင်မှုကဲ့သို့ ကျွန်ုပ်တို့ကိုယ်စား ဝန်ဆောင်မှုများ ဆောင်ရွက်ပေးသော တတိယပါတီ ဝန်ဆောင်မှုပေးသူများနှင့် သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မျှဝေနိုင်ပါသည်။ သင်၏သဘောတူညီချက်ဖြင့် သို့မဟုတ် ဥပဒေအရ လိုအပ်သည့်အတိုင်း ကျွန်ုပ်တို့၏ စီးပွားရေးမိတ်ဖက်များနှင့်လည်း သင့်အချက်အလက်များကို ကျွန်ုပ်တို့ မျှဝေနိုင်ပါသည်။ သင်၏ကိုယ်ရေးအချက်အလက်များကို တတိယပါတီများထံ ကျွန်ုပ်တို့ ရောင်းချခြင်း မရှိပါ။",
      ),
    },
    {
      icon: <Eye className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Cookies and Tracking Technologies", "ကွတ်ကီးများနှင့် ခြေရာခံနည်းပညာများ"),
      content: t(
        "We use cookies and similar tracking technologies to collect information about your browsing activities and to remember your preferences. You can control cookies through your browser settings, but disabling cookies may limit your ability to use some features of our services.",
        "သင်၏ရှာဖွေမှုလုပ်ဆောင်ချက်များအကြောင်း အချက်အလက်များကို စုဆောင်းရန်နှင့် သင်၏ဦးစားပေးမှုများကို မှတ်ထားရန် ကျွန်ုပ်တို့သည် ကွတ်ကီးများနှင့် အလားတူ ခြေရာခံနည်းပညာများကို အသုံးပြုပါသည်။ သင်၏ဘရောက်ဇာဆက်တင်များမှတဆင့် ကွတ်ကီးများကို ထိန်းချုပ်နိုင်သော်လည်း ကွတ်ကီးများကို ပိတ်ခြင်းသည် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ၏ အင်္ဂါရပ်အချို့ကို အသုံးပြုနိုင်မှုကို ကန့်သတ်နိုင်ပါသည်။",
      ),
    },
    {
      icon: <Users className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Children's Privacy", "ကလေးများ၏ ကိုယ်ရေးလုံခြုံမှု"),
      content: t(
        "Our services are not intended for children under the age of 13, and we do not knowingly collect personal information from children under 13. If we learn that we have collected personal information from a child under 13, we will take steps to delete that information as soon as possible.",
        "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများသည် အသက် ၁၃ နှစ်အောက် ကလေးများအတွက် ရည်ရွယ်ထားခြင်း မဟုတ်ပါ၊ ထို့ပြင် အသက် ၁၃ နှစ်အောက် ကလေးများထံမှ ကိုယ်ရေးအချက်အလက်များကို သိလျက်နှင့် ကျွန်ုပ်တို့ စုဆောင်းခြင်း မရှိပါ။ အသက် ၁၃ နှစ်အောက် ကလေးတစ်ဦးထံမှ ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ စုဆောင်းထားကြောင်း သိရှိပါက ထိုအချက်အလက်များကို တတ်နိုင်သမျှ မြန်မြန် ဖျက်ပစ်ရန် ကျွန်ုပ်တို့ အဆင့်များ လုပ်ဆောင်ပါမည်။",
      ),
    },
    {
      icon: <Clock className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Data Retention", "ဒေတာထိန်းသိမ်းခြင်း"),
      content: t(
        "We retain your personal information for as long as necessary to fulfill the purposes for which we collected it, including to satisfy legal, accounting, or reporting requirements. When we no longer need your personal information, we will securely delete or anonymize it.",
        "ဥပဒေရေးရာ၊ စာရင်းကိုင် သို့မဟုတ် အစီရင်ခံခြင်းဆိုင်ရာ လိုအပ်ချက်များကို ပြည့်မီစေရန်အပါအဝင် ကျွန်ုပ်တို့ စုဆောင်းခဲ့သည့် ရည်ရွယ်ချက်များကို ဖြည့်ဆည်းရန် လိုအပ်သမျှကာလပတ်လုံး သင်၏ကိုယ်ရေးအချက်အလက်များကို ကျွန်ုပ်တို့ ထိန်းသိမ်းထားပါသည်။ သင်၏ကိုယ်ရေးအချက်အလက်များ မလိုအပ်တော့သောအခါ ၎င်းတို့ကို လုံခြုံစွာ ဖျက်ပစ်ပါမည် သို့မဟုတ် အမည်မဖော်ဘဲ ထားရှိပါမည်။",
      ),
    },
    {
      icon: <AlertTriangle className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Changes to This Privacy Policy", "ဤကိုယ်ရေးအချက်အလက်မူဝါဒအပေါ် ပြောင်းလဲမှုများ"),
      content: t(
        "We may update this Privacy Policy from time to time to reflect changes in our practices or for other operational, legal, or regulatory reasons. We will notify you of any material changes by posting the new Privacy Policy on this page and updating the 'Last Updated' date.",
        "ကျွန်ုပ်တို့၏ လုပ်ထုံးလုပ်နည်းများတွင် ပြောင်းလဲမှုများကို ထင်ဟပ်စေရန် သို့မဟုတ် အခြားလုပ်ငန်းလည်ပတ်မှု၊ ဥပဒေရေးရာ သို့မဟုတ် စည်းမျဉ်းစည်းကမ်းဆိုင်ရာ အကြောင်းပြချက်များအတွက် ဤကိုယ်ရေးအချက်အလက်မူဝါဒကို အခါအားလျော်စွာ ကျွန်ုပ်တို့ အပ်ဒိတ်လုပ်နိုင်ပါသည်။ ဤစာမျက်နှာပေါ်တွင် ကိုယ်ရေးအချက်အလက်မူဝါဒအသစ်ကို တင်ခြင်းနှင့် 'နောက်ဆုံးအပ်ဒိတ်' ရက်စွဲကို မွမ်းမံခြင်းဖြင့် အရေးပါသော ပြောင်းလဲမှုများကို ကျွန်ုပ်တို့ အသိပေးပါမည်။",
      ),
    },
  ]

<div className="space-y-12">
            {sections.map((section, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
                className="bg-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg"
              >
                <div className="flex items-center mb-4">
                  <div className="w-12 h-12 rounded-full bg-[#263A49] flex items-center justify-center mr-4">
                    {section.icon}
                  </div>
                  <h2 className="text-2xl font-bold">{section.title}</h2>
                </div>
                <p className="text-[#B0BEC5]">{section.content}</p>
              </motion.div>
            ))}
          </div>

<div className="mt-12 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
            <h2 className="text-2xl font-bold mb-4">
              <LocalizedText en="Contact Us" mm="ကျွန်ုပ်တို့ကို ဆက်သွယ်ရန်" />
            </h2>
            <p className="text-[#B0BEC5] mb-4">
              <LocalizedText
                en="If you have any questions about this Privacy Policy, please contact us at:"
                mm="ဤကိုယ်ရေးအချက်အလက်မူဝါဒနှင့်ပတ်သက်၍ မေးခွန်းများရှိပါက ကျွန်ုပ်တို့ကို အောက်ပါလိပ်စာတွင် ဆက်သွယ်ပါ-"
              />
            </p>
            <ul className="text-[#B0BEC5] space-y-2">
              <li>
                <LocalizedText en="Email: info@esim.com.mm" mm="အီးမေးလ်: info@esim.com.mm" />
              </li>
              <li>
                <LocalizedText en="Phone: 09650000172" mm="ဖုန်း: 09650000172" />
              </li>
              <li>
                <LocalizedText en="Website: esim.com.mm" mm="ဝဘ်ဆိုဒ်: esim.com.mm" />
              </li>
            </ul>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}
[V0_FILE]typescript:file="app/robots.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/api/", "/admin/", "/_next/", "/checkout/*/success", "/*.json$"],
    },
    sitemap: "https://esim.com.mm/sitemap.xml",
    host: "https://esim.com.mm",
  }
}
[V0_FILE]typescript:file="app/sitemap.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://esim.com.mm"
  const currentDate = new Date().toISOString()

// Main pages
  const mainPages = [
    {
      url: baseUrl,
      lastModified: currentDate,
      changeFrequency: "weekly" as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/compatibility`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/how-it-works`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/faq`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
    {
      url: `${baseUrl}/privacy-policy`,
      lastModified: currentDate,
      changeFrequency: "yearly" as const,
      priority: 0.5,
    },
    {
      url: `${baseUrl}/terms-of-service`,
      lastModified: currentDate,
      changeFrequency: "yearly" as const,
      priority: 0.5,
    },
    {
      url: `${baseUrl}/esim`,
      lastModified: currentDate,
      changeFrequency: "weekly" as const,
      priority: 0.9,
    },
  ]

// Tool pages
  const toolPages = [
    {
      url: `${baseUrl}/tools/seo-optimizer`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.7,
    },
  ]

// Documentation pages
  const docPages = [
    {
      url: `${baseUrl}/docs/api-documentation`,
      lastModified: currentDate,
      changeFrequency: "monthly" as const,
      priority: 0.6,
    },
  ]

// Combine all pages
  return [...mainPages, ...toolPages, ...docPages]
}
[V0_FILE]typescriptreact:file="app/terms-of-service/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function TermsOfServiceLoading() {
  return (
    <div className="container mx-auto px-4 py-16">
      <div className="flex flex-col items-center justify-center mb-12">
        <Skeleton className="h-12 w-3/4 md:w-1/2 mb-6 rounded-lg" />
        <Skeleton className="h-6 w-full md:w-2/3 mb-2 rounded-lg" />
      </div>

<div className="space-y-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-6 w-3/4 rounded-lg" />
                <Skeleton className="h-4 w-full rounded-lg" />
                <Skeleton className="h-4 w-full rounded-lg" />
                <Skeleton className="h-4 w-2/3 rounded-lg" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import AnimatedSection from "@/components/animated-section"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"
import { FileText, Scale, ShieldCheck, AlertCircle, Zap, Bookmark, HelpCircle } from "lucide-react"

export default function TermsOfServicePage() {
  const { t } = useLanguage()

const sections = [
    {
      icon: <FileText className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Acceptance of Terms", "စည်းကမ်းချက်များကို လက်ခံခြင်း"),
      content: t(
        "By accessing or using our Services, you agree to be bound by these Terms of Service and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing our Services.",
        "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ဝင်ရောက်အသုံးပြုခြင်းဖြင့် ဤဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့် သက်ဆိုင်ရာ ဥပဒေများနှင့် စည်းမျဉ်းများအားလုံးကို လိုက်နာရန် သင် သဘောတူပါသည်။ ဤစည်းကမ်းချက်များထဲမှ တစ်ခုခုကို သင် သဘောမတူပါက ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးပြုခြင်း သို့မဟုတ် ဝင်ရောက်ခြင်းမှ တားမြစ်ထားပါသည်။",
      ),
    },
    {
      icon: <Scale className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Use License", "အသုံးပြုခွင့်လိုင်စင်"),
      content: t(
        "We grant you a limited, non-exclusive, non-transferable, revocable license to use our Services for your personal, non-commercial use. You may not copy, modify, distribute, sell, or lease any part of our Services or included software, nor may you reverse engineer or attempt to extract the source code of that software, unless laws prohibit those restrictions or you have our written permission.",
        "ကျွန်ုပ်တို့သည် သင့်အား ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို သင်၏ကိုယ်ပိုင်၊ စီးပွားဖြစ်မဟုတ်သော အသုံးပြုမှုအတွက် ကန့်သတ်ထားသော၊ တစ်ဦးတည်းမဟုတ်သော၊ လွှဲပြောင်း၍မရသော၊ ပြန်လည်ရုပ်သိမ်းနိုင်သော လိုင်စင်တစ်ခု ပေးအပ်ပါသည်။ ဥပဒေများက ထိုကန့်သတ်ချက်များကို တားမြစ်ထားခြင်း သို့မဟုတ် သင့်တွင် ကျွန်ုပ်တို့၏ စာဖြင့်ရေးသားထားသော ခွင့်ပြုချက်ရှိခြင်း မရှိပါက ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ သို့မဟုတ် ပါဝင်သော ဆော့ဖ်ဝဲလ်၏ မည်သည့်အစိတ်အပိုင်းကိုမျှ ကူးယူခြင်း၊ ပြင်ဆင်ခြင်း၊ ဖြန့်ဖြူးခြင်း၊ ရောင်းချခြင်း သို့မဟုတ် ငှားရမ်းခြင်း မပြုလုပ်ရ၊ ထို့အပြင် ထိုဆော့ဖ်ဝဲလ်၏ ရင်းမြစ်ကုဒ်ကို ပြန်ပြောင်းအင်ဂျင်နီယာလုပ်ခြင်း သို့မဟုတ် ထုတ်ယူရန် ကြိုးစားခြင်း မပြုလုပ်ရပါ။",
      ),
    },
    {
      icon: <ShieldCheck className="h-6 w-6 text-[#00FFFF]" />,
      title: t("User Accounts", "အသုံးပြုသူအကောင့်များ"),
      content: t(
        "When you create an account with us, you must provide accurate, complete, and current information. You are responsible for safeguarding the password that you use to access our Services and for any activities or actions under your password. You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.",
        "သင် ကျွန်ုပ်တို့နှင့်အတူ အကောင့်တစ်ခု ဖန်တီးသောအခါ တိကျ၊ ပြည့်စုံပြီး လက်ရှိအချက်အလက်များကို ပေးအပ်ရမည်။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ဝင်ရောက်ရန် သင်အသုံးပြုသော စကားဝှက်နှင့် သင့်စကားဝှက်အောက်ရှိ မည်သည့်လုပ်ဆောင်ချက်များ သို့မဟုတ် လုပ်ဆောင်ချက်များအတွက်မဆို သင်တာဝန်ရှိသည်။ သင့်စကားဝှက်ကို မည်သည့်တတိယပါတီကိုမျှ ထုတ်ဖော်ခြင်းမပြုရန် သင် သဘောတူပါသည်။ လုံခြုံရေးချိုးဖောက်မှု သို့မဟုတ် သင့်အကောင့်၏ ခွင့်ပြုချက်မရှိသော အသုံးပြုမှုကို သိရှိလာပါက ချက်ချင်း ကျွန်ုပ်တို့ကို အကြောင်းကြားရမည်။",
      ),
    },
    {
      icon: <AlertCircle className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Prohibited Uses", "တားမြစ်ထားသော အသုံးပြုမှုများ"),
      content: t(
        "You may use our Services only for lawful purposes and in accordance with these Terms of Service. You agree not to use our Services to engage in any illegal or unauthorized activity, to infringe upon any third party's intellectual property rights, to transmit harmful code or malware, or to interfere with the operation of our Services.",
        "ဤဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့်အညီ တရားဝင်ရည်ရွယ်ချက်များအတွက်သာ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို သင် အသုံးပြုနိုင်ပါသည်။ မည်သည့်တရားမဝင် သို့မဟုတ် ခွင့်ပြုချက်မရှိသော လုပ်ဆောင်ချက်တွင်မဆို ပါဝင်ရန်၊ မည်သည့်တတိယပါတီ၏ ဉာဏပစ္စည်းဆိုင်ရာ အခွင့်အရေးများကိုမဆို ချိုးဖောက်ရန်၊ အန္တရာယ်ရှိသော ကုဒ် သို့မဟုတ် မော်လ်ဝဲလ်ကို ထုတ်လွှင့်ရန် သို့မဟုတ် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ၏ လုပ်ဆောင်မှုကို ဝင်ရောက်စွက်ဖက်ရန် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို အသုံးမပြုရန် သင် သဘောတူပါသည်။",
      ),
    },
    {
      icon: <Zap className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Service Modifications", "ဝန်ဆောင်မှုပြင်ဆင်မှုများ"),
      content: t(
        "We reserve the right to modify or discontinue, temporarily or permanently, our Services (or any part thereof) with or without notice. We shall not be liable to you or to any third party for any modification, suspension, or discontinuance of our Services.",
        "အသိပေးချက်ဖြင့်ဖြစ်စေ၊ အသိပေးချက်မရှိဘဲဖြစ်စေ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ (သို့မဟုတ် ၎င်း၏မည်သည့်အစိတ်အပိုင်းကိုမဆို) ကို ယာယီဖြစ်စေ၊ အမြဲတမ်းဖြစ်စေ ပြင်ဆင်ရန် သို့မဟုတ် ရပ်ဆိုင်းရန် အခွင့်အရေးကို ကျွန်ုပ်တို့ ထိန်းသိမ်းထားပါသည်။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို ပြင်ဆင်ခြင်း၊ ဆိုင်းငံ့ခြင်း သို့မဟုတ် ရပ်ဆိုင်းခြင်းအတွက် သင့်အပေါ် သို့မဟုတ် မည်သည့်တတိယပါတီအပေါ်မဆို ကျွန်ုပ်တို့တွင် တာဝန်မရှိပါ။",
      ),
    },
    {
      icon: <Bookmark className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Intellectual Property", "ဉာဏပစ္စည်းဆိုင်ရာ"),
      content: t(
        "Our Services and their entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof) are owned by us, our licensors, or other providers of such material and are protected by copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.",
        "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများနှင့် ၎င်းတို့၏ အကြောင်းအရာ၊ အင်္ဂါရပ်များနှင့် လုပ်ဆောင်နိုင်စွမ်းအားလုံး (အချက်အလက်၊ ဆော့ဖ်ဝဲလ်၊ စာသား၊ ပြသမှုများ၊ ပုံရိပ်များ၊ ဗီဒီယိုနှင့် အသံ၊ ထို့အပြင် ၎င်းတို့၏ ဒီဇိုင်း၊ ရွေးချယ်မှုနှင့် စီစဉ်မှုအားလုံး အပါအဝင်သော်လည်း ကန့်သတ်မထားပါ) သည် ကျွန်ုပ်တို့၊ ကျွန်ုပ်တို့၏ လိုင်စင်ပေးသူများ သို့မဟုတ် ထိုကဲ့သို့သော အရာဝတ္ထုများ၏ အခြားပေးသွင်းသူများပိုင်ဆိုင်ပြီး မူပိုင်ခွင့်၊ ကုန်အမှတ်တံဆိပ်၊ ပိုင်ဆိုင်မှုမှတ်ပုံတင်၊ ကုန်သွယ်မှုလျှို့ဝှက်ချက်နှင့် အခြားဉာဏပစ္စည်းဆိုင်ရာ သို့မဟုတ် ပိုင်ဆိုင်မှုအခွင့်အရေးဥပဒေများဖြင့် ကာကွယ်ထားပါသည်။",
      ),
    },
    {
      icon: <HelpCircle className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Disclaimer of Warranties", "အာမခံချက်များကို ငြင်းဆိုခြင်း"),
      content: t(
        "Our Services are provided 'as is' and 'as available' without any representations or warranties, express or implied. We make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability, or availability of our Services or the information, products, services, or related graphics contained on our Services for any purpose.",
        "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများကို မည်သည့်ကိုယ်စားပြုမှုများ သို့မဟုတ် အာမခံချက်များမျှမရှိဘဲ 'ရှိသည့်အတိုင်း' နှင့် 'ရရှိနိုင်သည့်အတိုင်း' ပေးအပ်ထားပါသည်။ မည်သည့်ရည်ရွယ်ချက်အတွက်မဆို ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများ သို့မဟုတ် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုများပေါ်တွင် ပါဝင်သော အချက်အလက်၊ ထုတ်ကုန်များ၊ ဝန်ဆောင်မှုများ သို့မဟုတ် ဆက်စပ်ဂရပ်ဖစ်များ၏ ပြည့်စုံမှု၊ တိကျမှု၊ ယုံကြည်စိတ်ချရမှု၊ သင့်လျော်မှု သို့မဟုတ် ရရှိနိုင်မှုနှင့်ပတ်သက်၍ မည်သည့်ကိုယ်စားပြုမှုများ သို့မဟုတ် အာမခံချက်များကိုမျှ ကျွန်ုပ်တို့ မပြုလုပ်ပါ။",
      ),
    },
  ]

<div className="mt-12 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
            <h2 className="text-2xl font-bold mb-4">
              <LocalizedText en="Contact Us" mm="ကျွန်ုပ်တို့ကို ဆက်သွယ်ရန်" />
            </h2>
            <p className="text-[#B0BEC5] mb-4">
              <LocalizedText
                en="If you have any questions about these Terms of Service, please contact us at:"
                mm="ဤဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့်ပတ်သက်၍ မေးခွန်းများရှိပါက ကျွန်ုပ်တို့ကို အောက်ပါလိပ်စာတွင် ဆက်သွယ်ပါ-"
              />
            </p>
            <ul className="text-[#B0BEC5] space-y-2">
              <li>
                <LocalizedText en="Email: info@esim.com.mm" mm="အီးမေးလ်: info@esim.com.mm" />
              </li>
              <li>
                <LocalizedText en="Phone: 09650000172" mm="ဖုန်း: 09650000172" />
              </li>
              <li>
                <LocalizedText en="Website: esim.com.mm" mm="ဝဘ်ဆိုဒ်: esim.com.mm" />
              </li>
            </ul>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/seo-optimizer/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="container mx-auto py-12 px-4">
      <Skeleton className="h-10 w-64 mb-8" />

<Skeleton className="h-10 w-full" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tools/seo-optimizer/page.tsx" isMerged="true"
import SEOOptimizer from "@/components/seo-optimizer"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "SEO Content Optimizer | eSIM Myanmar",
  description: "Optimize your content for search engines with our AI-powered SEO tool.",
  keywords: "SEO, content optimization, search engine optimization, AI, Myanmar",
}

export default function SEOOptimizerPage() {
  return (
    <div className="container mx-auto py-12 px-4">
      <h1 className="text-3xl font-bold mb-8">SEO Content Optimizer</h1>
      <SEOOptimizer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ui-kit/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/ui-kit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { EnhancedButton } from "@/components/ui/enhanced-button"
import { EnhancedCard } from "@/components/ui/enhanced-card"
import { EnhancedInput } from "@/components/ui/enhanced-input"
import { EnhancedTooltip } from "@/components/ui/enhanced-tooltip"
import { EnhancedAlert } from "@/components/ui/enhanced-alert"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"
import { EnhancedAvatar } from "@/components/ui/enhanced-avatar"
import { EnhancedSkeleton } from "@/components/ui/enhanced-skeleton"
import { EnhancedTagInput } from "@/components/ui/enhanced-tag-input"
import { EnhancedFileUpload } from "@/components/ui/enhanced-file-upload"
import { EnhancedNotification } from "@/components/ui/enhanced-notification"
import { EnhancedModal } from "@/components/ui/enhanced-modal"
import { EnhancedDrawer } from "@/components/ui/enhanced-drawer"
import { EnhancedTabs } from "@/components/ui/enhanced-tabs"
import { EnhancedAccordion } from "@/components/ui/enhanced-accordion"
import { EnhancedDropdown } from "@/components/ui/enhanced-dropdown"
import { EnhancedCarousel } from "@/components/ui/enhanced-carousel"
import { EnhancedPopover } from "@/components/ui/enhanced-popover"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  ArrowRight,
  Search,
  Heart,
  Star,
  Settings,
  Smartphone,
  Zap,
  User,
  Info,
  AlertTriangle,
  Bell,
  MessageSquare,
  ChevronDown,
  Mail,
  Phone,
  MapPin,
} from "lucide-react"

export default function UIKitPage() {
  const [tags, setTags] = useState<string[]>(["eSIM", "Digital"])
  const [files, setFiles] = useState<File[]>([])
  const [uploadProgress, setUploadProgress] = useState(0)
  const [showNotification, setShowNotification] = useState(false)
  const [notificationType, setNotificationType] = useState<"default" | "info" | "success" | "warning" | "error">(
    "default",
  )

// Modal states
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [modalSize, setModalSize] = useState<"sm" | "md" | "lg" | "xl" | "full">("md")
  const [modalPosition, setModalPosition] = useState<"center" | "top" | "bottom">("center")

// Drawer states
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  const [drawerPosition, setDrawerPosition] = useState<"left" | "right" | "top" | "bottom">("right")

// Dropdown state
  const [selectedItem, setSelectedItem] = useState("item1")

// Simulate upload progress
  const simulateUpload = () => {
    setUploadProgress(0)
    const interval = setInterval(() => {
      setUploadProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 5
      })
    }, 300)
  }

// Show notification with type
  const showNotificationWithType = (type: "default" | "info" | "success" | "warning" | "error") => {
    setNotificationType(type)
    setShowNotification(true)
  }

// Sample tabs data
  const tabsData = [
    {
      id: "tab1",
      label: "Profile",
      icon: <User size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Profile Content</h3>
          <p className="text-[#B0BEC5]">This is the profile tab content.</p>
        </div>
      ),
    },
    {
      id: "tab2",
      label: "Settings",
      icon: <Settings size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Settings Content</h3>
          <p className="text-[#B0BEC5]">This is the settings tab content.</p>
        </div>
      ),
    },
    {
      id: "tab3",
      label: "Messages",
      icon: <MessageSquare size={16} />,
      content: (
        <div className="p-4 bg-[#1E2F3C] rounded-lg">
          <h3 className="text-lg font-medium mb-2">Messages Content</h3>
          <p className="text-[#B0BEC5]">This is the messages tab content.</p>
        </div>
      ),
    },
  ]

// Sample accordion data
  const accordionData = [
    {
      id: "item1",
      title: "What is an eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan from your carrier without
          having to use a physical SIM card.
        </p>
      ),
      icon: <Info size={16} className="text-[#00FFFF]" />,
    },
    {
      id: "item2",
      title: "How do I activate an eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          To activate an eSIM, you'll need to scan a QR code provided by your carrier or enter an activation code
          manually. The exact steps vary by device.
        </p>
      ),
      icon: <Zap size={16} className="text-[#00FFFF]" />,
    },
    {
      id: "item3",
      title: "Which devices support eSIM?",
      content: (
        <p className="text-[#B0BEC5]">
          Most modern smartphones and tablets support eSIM, including iPhone XS and newer, Google Pixel 3 and newer, and
          Samsung Galaxy S20 and newer.
        </p>
      ),
      icon: <Smartphone size={16} className="text-[#00FFFF]" />,
    },
  ]

// Sample dropdown items
  const dropdownItems = [
    {
      id: "item1",
      label: "Option 1",
      icon: <User size={16} />,
    },
    {
      id: "item2",
      label: "Option 2",
      icon: <Settings size={16} />,
    },
    {
      id: "item3",
      label: "Option 3",
      icon: <Bell size={16} />,
    },
    {
      id: "item4",
      label: "Disabled Option",
      icon: <AlertTriangle size={16} />,
      disabled: true,
    },
  ]

// Sample carousel items
  const carouselItems = [
    <div
      key="slide1"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/20 to-[#00CCFF]/20 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 1</h3>
    </div>,
    <div
      key="slide2"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/30 to-[#00CCFF]/30 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 2</h3>
    </div>,
    <div
      key="slide3"
      className="w-full h-64 bg-gradient-to-r from-[#00FFFF]/40 to-[#00CCFF]/40 flex items-center justify-center"
    >
      <h3 className="text-2xl font-bold">Slide 3</h3>
    </div>,
  ]

return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="heading-1 mb-8">eSIM Myanmar UI Kit</h1>
      <p className="text-xl text-[#B0BEC5] max-w-3xl mb-12">
        A comprehensive collection of UI components and design patterns for the eSIM Myanmar application.
      </p>

<Tabs defaultValue="dialogs" className="w-full">
        <TabsList className="mb-8">
          <TabsTrigger value="dialogs">Dialogs & Overlays</TabsTrigger>
          <TabsTrigger value="navigation">Navigation</TabsTrigger>
          <TabsTrigger value="data-display">Data Display</TabsTrigger>
          <TabsTrigger value="inputs">Inputs & Forms</TabsTrigger>
          <TabsTrigger value="feedback">Feedback</TabsTrigger>
          <TabsTrigger value="buttons">Buttons</TabsTrigger>
        </TabsList>

{/* Dialogs & Overlays */}
        <TabsContent value="dialogs" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Modal</CardTitle>
              <CardDescription>Dialog windows for important interactions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <EnhancedButton
                    variant="primary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Default Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("sm")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Small Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("lg")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Large Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("top")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Top Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("md")
                      setModalPosition("bottom")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Bottom Modal
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setModalSize("full")
                      setModalPosition("center")
                      setIsModalOpen(true)
                    }}
                  >
                    Open Full Screen Modal
                  </EnhancedButton>
                </div>

<EnhancedModal
                  isOpen={isModalOpen}
                  onClose={() => setIsModalOpen(false)}
                  title="Modal Title"
                  description="This is a description of the modal content."
                  size={modalSize}
                  position={modalPosition}
                  footer={
                    <>
                      <EnhancedButton variant="secondary" onClick={() => setIsModalOpen(false)}>
                        Cancel
                      </EnhancedButton>
                      <EnhancedButton variant="primary" onClick={() => setIsModalOpen(false)}>
                        Confirm
                      </EnhancedButton>
                    </>
                  }
                >
                  <div className="space-y-4">
                    <p className="text-[#B0BEC5]">
                      This is the content of the modal. You can put any components or text here.
                    </p>
                    <div className="p-4 bg-[#263A49] rounded-lg">
                      <p className="text-sm">Modal size: {modalSize}</p>
                      <p className="text-sm">Modal position: {modalPosition}</p>
                    </div>
                  </div>
                </EnhancedModal>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Drawer</CardTitle>
              <CardDescription>Slide-in panels for side content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <EnhancedButton
                    variant="primary"
                    onClick={() => {
                      setDrawerPosition("right")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Right Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("left")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Left Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("top")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Top Drawer
                  </EnhancedButton>

<EnhancedButton
                    variant="secondary"
                    onClick={() => {
                      setDrawerPosition("bottom")
                      setIsDrawerOpen(true)
                    }}
                  >
                    Open Bottom Drawer
                  </EnhancedButton>
                </div>

<EnhancedDrawer
                  isOpen={isDrawerOpen}
                  onClose={() => setIsDrawerOpen(false)}
                  title="Drawer Title"
                  description="This is a description of the drawer content."
                  position={drawerPosition}
                  footer={
                    <div className="flex justify-end">
                      <EnhancedButton variant="primary" onClick={() => setIsDrawerOpen(false)}>
                        Close Drawer
                      </EnhancedButton>
                    </div>
                  }
                >
                  <div className="space-y-4">
                    <p className="text-[#B0BEC5]">
                      This is the content of the drawer. You can put any components or text here.
                    </p>
                    <div className="p-4 bg-[#263A49] rounded-lg">
                      <p className="text-sm">Drawer position: {drawerPosition}</p>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="drawer-input">Sample Input</Label>
                      <EnhancedInput id="drawer-input" placeholder="Enter some text..." />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="drawer-textarea">Sample Textarea</Label>
                      <Textarea
                        id="drawer-textarea"
                        placeholder="Enter a longer message..."
                        className="min-h-[100px] bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF]"
                      />
                    </div>
                  </div>
                </EnhancedDrawer>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Popover</CardTitle>
              <CardDescription>Small floating content panels</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Click Trigger</h3>
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Click Me</EnhancedButton>}
                      content={
                        <div className="w-64">
                          <h4 className="font-medium mb-2">Popover Title</h4>
                          <p className="text-sm text-[#B0BEC5]">
                            This is a popover with content that appears when you click the trigger.
                          </p>
                        </div>
                      }
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">Default popover (click to toggle)</p>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Hover Trigger</h3>
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Hover Me</EnhancedButton>}
                      content={
                        <div className="w-64">
                          <h4 className="font-medium mb-2">Hover Popover</h4>
                          <p className="text-sm text-[#B0BEC5]">
                            This popover appears when you hover over the trigger.
                          </p>
                        </div>
                      }
                      openOnHover
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">openOnHover</p>
                </div>
              </div>

<div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Top Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Top position popover</p>
                        </div>
                      }
                      position="top"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="top"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Bottom Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Bottom position popover</p>
                        </div>
                      }
                      position="bottom"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="bottom"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Left Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Left position popover</p>
                        </div>
                      }
                      position="left"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="left"</p>
                </div>

<div className="space-y-2">
                  <div className="flex justify-center">
                    <EnhancedPopover
                      trigger={<EnhancedButton variant="secondary">Right Position</EnhancedButton>}
                      content={
                        <div className="w-48">
                          <p className="text-sm">Right position popover</p>
                        </div>
                      }
                      position="right"
                    />
                  </div>
                  <p className="text-sm text-[#B0BEC5] text-center">position="right"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Navigation */}
        <TabsContent value="navigation" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Tabs</CardTitle>
              <CardDescription>Tabbed interface for organizing content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Tabs</h3>
                  <EnhancedTabs tabs={tabsData} />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="default"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Pills Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="pills" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="pills"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Underline Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="underline" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="underline"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Enclosed Variant</h3>
                  <EnhancedTabs tabs={tabsData} variant="enclosed" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="enclosed"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Full Width Tabs</h3>
                  <EnhancedTabs tabs={tabsData} variant="enclosed" fullWidth />
                  <p className="text-sm text-[#B0BEC5] mt-2">fullWidth</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Accordion</CardTitle>
              <CardDescription>Collapsible content panels</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Accordion</h3>
                  <EnhancedAccordion items={accordionData} />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="default"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Bordered Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="bordered" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="bordered"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Separated Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="separated" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="separated"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Minimal Variant</h3>
                  <EnhancedAccordion items={accordionData} variant="minimal" />
                  <p className="text-sm text-[#B0BEC5] mt-2">variant="minimal"</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Multiple Open Items</h3>
                  <EnhancedAccordion
                    items={accordionData}
                    variant="bordered"
                    multiple
                    defaultOpen={["item1", "item2"]}
                  />
                  <p className="text-sm text-[#B0BEC5] mt-2">multiple defaultOpen={["item1", "item2"]}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Plus/Minus Icons</h3>
                  <EnhancedAccordion items={accordionData} variant="bordered" iconType="plus" />
                  <p className="text-sm text-[#B0BEC5] mt-2">iconType="plus"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Dropdown</CardTitle>
              <CardDescription>Dropdown menus for navigation and selection</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Default Dropdown</h3>
                    <div className="flex justify-center">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Select Option <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        value={selectedItem}
                        onChange={setSelectedItem}
                      />
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">Default dropdown</p>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Position Variants</h3>
                    <div className="flex flex-wrap justify-center gap-4">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Bottom Left <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="bottom-left"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Bottom Right <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="bottom-right"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Top Left <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="top-left"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary" size="sm">
                            Top Right <ChevronDown className="ml-1 h-3 w-3" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        position="top-right"
                      />
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Width Variants</h3>
                    <div className="flex flex-col items-center gap-4">
                      <EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Auto Width <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width="auto"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Match Trigger Width <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width="trigger"
                      />

<EnhancedDropdown
                        trigger={
                          <EnhancedButton variant="secondary">
                            Fixed Width (200px) <ChevronDown className="ml-2 h-4 w-4" />
                          </EnhancedButton>
                        }
                        items={dropdownItems}
                        width={200}
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Custom Trigger</h3>
                    <div className="flex justify-center">
                      <EnhancedDropdown
                        trigger={
                          <div className="flex items-center gap-2 p-2 rounded-lg bg-[#263A49] hover:bg-[#00FFFF]/10 cursor-pointer">
                            <EnhancedAvatar size="sm" fallback="JD" />
                            <div>
                              <div className="font-medium">John Doe</div>
                              <div className="text-xs text-[#B0BEC5]">john@example.com</div>
                            </div>
                            <ChevronDown className="ml-2 h-4 w-4" />
                          </div>
                        }
                        items={[
                          { id: "profile", label: "View Profile", icon: <User size={16} /> },
                          { id: "settings", label: "Settings", icon: <Settings size={16} /> },
                          { id: "logout", label: "Logout", icon: <ArrowRight size={16} /> },
                        ]}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Data Display */}
        <TabsContent value="data-display" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Carousel</CardTitle>
              <CardDescription>Slideshow component for cycling through elements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-2">
                  <h3 className="text-lg font-medium">Default Carousel</h3>
                  <EnhancedCarousel items={carouselItems} />
                  <p className="text-sm text-[#B0BEC5] mt-2">Default carousel with slide effect</p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div className="space-y-2">
                    <h3 className="text-lg font-medium">Fade Effect</h3>
                    <EnhancedCarousel items={carouselItems} effect="fade" />
                    <p className="text-sm text-[#B0BEC5] mt-2">effect="fade"</p>
                  </div>

<div className="space-y-2">
                    <h3 className="text-lg font-medium">Zoom Effect</h3>
                    <EnhancedCarousel items={carouselItems} effect="zoom" />
                    <p className="text-sm text-[#B0BEC5] mt-2">effect="zoom"</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Auto Play Carousel</h3>
                  <EnhancedCarousel items={carouselItems} autoPlay interval={3000} />
                  <p className="text-sm text-[#B0BEC5] mt-2">autoPlay interval={3000}</p>
                </div>

<div className="space-y-2">
                  <h3 className="text-lg font-medium">Customized Carousel</h3>
                  <EnhancedCarousel
                    items={carouselItems}
                    showArrows={true}
                    showDots={true}
                    infinite={true}
                    effect="slide"
                    arrowClassName="bg-[#00FFFF]/20 hover:bg-[#00FFFF]/40 text-white"
                  />
                  <p className="text-sm text-[#B0BEC5] mt-2">Custom styling with all controls</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Avatars</CardTitle>
              <CardDescription>User avatars with various styles and states</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Avatar Sizes</h3>
                  <div className="flex flex-wrap gap-4 items-end">
                    <div className="space-y-2">
                      <EnhancedAvatar size="xs" fallback="XS" />
                      <p className="text-sm text-[#B0BEC5] text-center">size="xs"</p>
                    </div>

<h3 className="text-lg font-medium">Avatar Variants</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar variant="circle" fallback="CI" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="circle"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar variant="rounded" fallback="RO" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="rounded"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar variant="square" fallback="SQ" />
                      <p className="text-sm text-[#B0BEC5] text-center">variant="square"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Avatar with Status</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar status="online" fallback="ON" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="online"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="offline" fallback="OF" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="offline"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="away" fallback="AW" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="away"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar status="busy" fallback="BU" />
                      <p className="text-sm text-[#B0BEC5] text-center">status="busy"</p>
                    </div>
                  </div>

<h3 className="text-lg font-medium">Avatar with Border</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar withBorder fallback="BO" />
                      <p className="text-sm text-[#B0BEC5] text-center">withBorder</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar withBorder borderColor="border-green-500" fallback="GR" />
                      <p className="text-sm text-[#B0BEC5] text-center">borderColor="border-green-500"</p>
                    </div>
                  </div>

<h3 className="text-lg font-medium">Animated Avatar</h3>
                  <div className="flex flex-wrap gap-4">
                    <div className="space-y-2">
                      <EnhancedAvatar withAnimation animationType="pulse" fallback="PU" />
                      <p className="text-sm text-[#B0BEC5] text-center">animationType="pulse"</p>
                    </div>

<div className="space-y-2">
                      <EnhancedAvatar withAnimation animationType="bounce" fallback="BO" />
                      <p className="text-sm text-[#B0BEC5] text-center">animationType="bounce"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Skeletons</CardTitle>
              <CardDescription>Loading state placeholders for various components</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Skeleton Variants</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedSkeleton variant="text" lines={3} />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="text" lines={3}</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="avatar" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="avatar"</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="button" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="button"</p>
                    </div>

<div>
                      <EnhancedSkeleton variant="input" />
                      <p className="text-sm text-[#B0BEC5] mt-2">variant="input"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Skeleton Card Example</h3>
                  <div className="space-y-4">
                    <EnhancedCard>
                      <CardContent className="p-6">
                        <div className="flex items-center space-x-4 mb-4">
                          <EnhancedSkeleton variant="avatar" />
                          <div className="space-y-2 flex-1">
                            <EnhancedSkeleton className="h-4 w-1/2" />
                            <EnhancedSkeleton className="h-3 w-1/3" />
                          </div>
                        </div>
                        <EnhancedSkeleton variant="text" lines={3} />
                        <div className="mt-4 flex justify-end">
                          <EnhancedSkeleton variant="button" />
                        </div>
                      </CardContent>
                    </EnhancedCard>
                    <p className="text-sm text-[#B0BEC5]">Card loading state example</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Inputs & Forms */}
        <TabsContent value="inputs" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Enhanced Inputs</CardTitle>
              <CardDescription>Improved input components with various styles</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="primary-input">Primary Input</Label>
                    <EnhancedInput id="primary-input" variant="primary" placeholder="Enter your name" />
                    <p className="text-sm text-[#B0BEC5]">variant="primary"</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="secondary-input">Secondary Input</Label>
                    <EnhancedInput id="secondary-input" variant="secondary" placeholder="Enter your email" />
                    <p className="text-sm text-[#B0BEC5]">variant="secondary"</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="minimal-input">Minimal Input</Label>
                    <EnhancedInput id="minimal-input" variant="minimal" placeholder="Enter your phone number" />
                    <p className="text-sm text-[#B0BEC5]">variant="minimal"</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="left-icon-input">Input with Left Icon</Label>
                    <EnhancedInput
                      id="left-icon-input"
                      variant="primary"
                      placeholder="Search..."
                      leftIcon={<Search size={18} />}
                    />
                    <p className="text-sm text-[#B0BEC5]">leftIcon</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="right-icon-input">Input with Right Icon</Label>
                    <EnhancedInput
                      id="right-icon-input"
                      variant="primary"
                      placeholder="Enter your username"
                      rightIcon={<User size={18} />}
                    />
                    <p className="text-sm text-[#B0BEC5]">rightIcon</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="error-input">Input with Error</Label>
                    <EnhancedInput id="error-input" variant="primary" placeholder="Enter your password" isError />
                    <p className="text-sm text-red-400">This field is required</p>
                    <p className="text-sm text-[#B0BEC5]">isError</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Tag Input</CardTitle>
              <CardDescription>Input for multiple tags or keywords</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="tag-input">Tags</Label>
                  <EnhancedTagInput value={tags} onChange={setTags} placeholder="Add a tag..." maxTags={5} />
                  <p className="text-sm text-[#B0BEC5]">Type and press Enter to add tags</p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="tag-input-variant">Tag Input Variants</Label>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                      <EnhancedTagInput
                        value={["Default", "Variant"]}
                        onChange={() => {}}
                        placeholder="Default variant..."
                        variant="default"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="default"</p>
                    </div>
                    <div>
                      <EnhancedTagInput
                        value={["Primary", "Variant"]}
                        onChange={() => {}}
                        placeholder="Primary variant..."
                        variant="primary"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="primary"</p>
                    </div>
                    <div>
                      <EnhancedTagInput
                        value={["Secondary", "Variant"]}
                        onChange={() => {}}
                        placeholder="Secondary variant..."
                        variant="secondary"
                      />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="secondary"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>File Upload</CardTitle>
              <CardDescription>Enhanced file upload component with drag and drop support</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <EnhancedFileUpload
                  onChange={(files) => {
                    setFiles(files)
                    simulateUpload()
                  }}
                  value={files}
                  multiple
                  accept="image/*,.pdf"
                  maxSize={5}
                  uploadProgress={uploadProgress}
                />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                  <div>
                    <h3 className="text-lg font-medium mb-2">Compact Variant</h3>
                    <EnhancedFileUpload onChange={() => {}} variant="compact" showPreview={false} />
                    <p className="text-sm text-[#B0BEC5] mt-1">variant="compact"</p>
                  </div>
                  <div>
                    <h3 className="text-lg font-medium mb-2">Minimal Variant</h3>
                    <EnhancedFileUpload onChange={() => {}} variant="minimal" showPreview={false} />
                    <p className="text-sm text-[#B0BEC5] mt-1">variant="minimal"</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Form Example</CardTitle>
              <CardDescription>Complete form with various input components</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="form-name">Full Name</Label>
                      <EnhancedInput id="form-name" placeholder="Enter your full name" leftIcon={<User size={18} />} />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-email">Email Address</Label>
                      <EnhancedInput
                        id="form-email"
                        type="email"
                        placeholder="Enter your email address"
                        leftIcon={<Mail size={18} />}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-phone">Phone Number</Label>
                      <EnhancedInput
                        id="form-phone"
                        placeholder="Enter your phone number"
                        leftIcon={<Phone size={18} />}
                      />
                    </div>
                  </div>

<div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="form-address">Address</Label>
                      <EnhancedInput
                        id="form-address"
                        placeholder="Enter your address"
                        leftIcon={<MapPin size={18} />}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-tags">Interests</Label>
                      <EnhancedTagInput
                        value={["Technology", "Mobile"]}
                        onChange={() => {}}
                        placeholder="Add interests..."
                        maxTags={5}
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="form-message">Message</Label>
                      <Textarea
                        id="form-message"
                        placeholder="Enter your message"
                        className="min-h-[100px] bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF]"
                      />
                    </div>
                  </div>
                </div>

<div className="pt-4 border-t border-[#00FFFF]/10 flex justify-end">
                  <EnhancedButton variant="primary">Submit Form</EnhancedButton>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Feedback */}
        <TabsContent value="feedback" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Tooltips</CardTitle>
              <CardDescription>Informational tooltips with various positions and styles</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="This is a top tooltip" position="top">
                        <EnhancedButton variant="secondary">Hover Me (Top)</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">position="top"</p>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="This is a bottom tooltip" position="bottom">
                        <EnhancedButton variant="secondary">Hover Me (Bottom)</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">position="bottom"</p>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="This is a left tooltip" position="left">
                          <EnhancedButton variant="secondary">Hover Me (Left)</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">position="left"</p>
                    </div>

<div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="This is a right tooltip" position="right">
                          <EnhancedButton variant="secondary">Hover Me (Right)</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">position="right"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="Default tooltip style" variant="default">
                        <EnhancedButton variant="secondary">Default Style</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">variant="default"</p>
                  </div>

<div className="space-y-2">
                    <div className="flex justify-center">
                      <EnhancedTooltip content="Information tooltip style" variant="info">
                        <EnhancedButton variant="secondary">Info Style</EnhancedButton>
                      </EnhancedTooltip>
                    </div>
                    <p className="text-sm text-[#B0BEC5] text-center">variant="info"</p>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="Success tooltip style" variant="success">
                          <EnhancedButton variant="secondary">Success Style</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">variant="success"</p>
                    </div>

<div className="space-y-2">
                      <div className="flex justify-center">
                        <EnhancedTooltip content="Warning tooltip style" variant="warning">
                          <EnhancedButton variant="secondary">Warning Style</EnhancedButton>
                        </EnhancedTooltip>
                      </div>
                      <p className="text-sm text-[#B0BEC5] text-center">variant="warning"</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Alerts</CardTitle>
              <CardDescription>Alert components for various types of messages</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <EnhancedAlert
                  variant="default"
                  title="Default Alert"
                  description="This is a default alert with standard styling."
                />

<EnhancedCard>
            <CardHeader>
              <CardTitle>Progress</CardTitle>
              <CardDescription>Progress indicators for various states</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-8">
                <div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress Variants</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={75} variant="default" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="default"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="success" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="success"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="warning" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="warning"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="error" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="error"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="gradient" />
                      <p className="text-sm text-[#B0BEC5] mt-1">variant="gradient"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress with Value</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={65} variant="default" showValue valuePosition="outside" />
                      <p className="text-sm text-[#B0BEC5] mt-1">showValue valuePosition="outside"</p>
                    </div>

<div>
                      <EnhancedProgress value={65} variant="gradient" showValue valuePosition="inside" />
                      <p className="text-sm text-[#B0BEC5] mt-1">showValue valuePosition="inside"</p>
                    </div>
                  </div>
                </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Progress Sizes</h3>
                  <div className="space-y-4">
                    <div>
                      <EnhancedProgress value={75} variant="gradient" size="sm" />
                      <p className="text-sm text-[#B0BEC5] mt-1">size="sm"</p>
                    </div>

<div>
                      <EnhancedProgress value={75} variant="gradient" size="default" />
                      <p className="text-sm text-[#B0BEC5] mt-1">size="default"</p>
                    </div>

<div className="space-y-6">
                  <h3 className="text-lg font-medium">Animated Progress</h3>
                  <div>
                    <EnhancedProgress value={75} variant="gradient" animated label="Downloading..." />
                    <p className="text-sm text-[#B0BEC5] mt-1">animated label="Downloading..."</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Notifications</CardTitle>
              <CardDescription>Toast notifications for various types of messages</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <EnhancedButton variant="secondary" onClick={() => showNotificationWithType("default")}>
                    Show Default Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("info")}>
                    Show Info Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("success")}>
                    Show Success Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("warning")}>
                    Show Warning Notification
                  </EnhancedButton>

<EnhancedButton variant="secondary" onClick={() => showNotificationWithType("error")}>
                    Show Error Notification
                  </EnhancedButton>
                </div>

<EnhancedNotification
                  open={showNotification}
                  onClose={() => setShowNotification(false)}
                  title={`${notificationType.charAt(0).toUpperCase() + notificationType.slice(1)} Notification`}
                  description="This is an example notification that will automatically dismiss after 5 seconds."
                  variant={notificationType}
                  position="top-right"
                  duration={5000}
                  action={
                    <EnhancedButton
                      variant="secondary"
                      size="sm"
                      className="mt-2"
                      onClick={() => setShowNotification(false)}
                    >
                      Dismiss
                    </EnhancedButton>
                  }
                />

<div className="p-4 bg-[#1E2F3C] rounded-lg">
                  <p className="text-[#B0BEC5]">
                    Notifications appear in the corner of the screen. Click any of the buttons above to see a
                    demonstration.
                  </p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Buttons */}
        <TabsContent value="buttons" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Enhanced Buttons</CardTitle>
              <CardDescription>Improved button components with various styles and animations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <EnhancedButton variant="primary" className="w-full">
                      Primary Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="primary"</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="secondary" className="w-full">
                      Secondary Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="secondary"</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="tertiary">Tertiary Button</EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="tertiary"</p>
                  </div>

<div className="space-y-2 flex items-center gap-4">
                    <EnhancedButton variant="icon">
                      <Heart size={18} />
                    </EnhancedButton>
                    <EnhancedButton variant="icon">
                      <Star size={18} />
                    </EnhancedButton>
                    <EnhancedButton variant="icon">
                      <Settings size={18} />
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">variant="icon"</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <EnhancedButton variant="primary" withShimmer className="w-full">
                      With Shimmer Effect
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withShimmer</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" withScale className="w-full">
                      With Scale Animation
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withScale</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" withGlow className="w-full">
                      With Glow Effect
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">withGlow</p>
                  </div>

<div className="space-y-2">
                    <EnhancedButton variant="primary" isLoading className="w-full">
                      Loading Button
                    </EnhancedButton>
                    <p className="text-sm text-[#B0BEC5]">isLoading</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Button Sizes</CardTitle>
              <CardDescription>Different size variants for buttons</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="sm">
                    Small
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="sm"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="default">
                    Default
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="default"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="lg">
                    Large
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="lg"</p>
                </div>
                <div className="space-y-2">
                  <EnhancedButton variant="primary" size="xl">
                    Extra Large
                  </EnhancedButton>
                  <p className="text-sm text-[#B0BEC5]">size="xl"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Button with Icons</CardTitle>
              <CardDescription>Buttons with various icon placements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <EnhancedButton variant="primary">
                  <ArrowRight className="mr-2 h-4 w-4" />
                  Icon Left
                </EnhancedButton>

<EnhancedButton variant="primary">
                  Icon Right
                  <ArrowRight className="ml-2 h-4 w-4" />
                </EnhancedButton>

<EnhancedButton variant="secondary" className="group">
                  <span className="flex items-center">
                    Learn More
                    <ArrowRight className="ml-2 h-4 w-4 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0" />
                  </span>
                </EnhancedButton>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activation-guide.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"
import { Smartphone, QrCode, Settings, Check, ArrowRight, ArrowLeft } from "lucide-react"
import Image from "next/image"
import { useState, useEffect } from "react"

interface Step {
  title: {
    en: string
    mm: string
  }
  description: {
    en: string
    mm: string
  }
  icon: React.ReactNode
  image?: string
  altText?: {
    en: string
    mm: string
  }
}

export default function ActivationGuide() {
  const { language } = useLanguage()
  const [currentStep, setCurrentStep] = useState(0)
  const [isClient, setIsClient] = useState(false)

useEffect(() => {
    setIsClient(true)
  }, [])

const steps: Step[] = [
    {
      title: {
        en: "Purchase an eSIM Plan",
        mm: "eSIM အစီအစဉ်ဝယ်ယူပါ",
      },
      description: {
        en: "Choose and purchase your preferred eSIM plan from our website.",
        mm: "ကျွန်ုပ်တို့၏ ဝဘ်ဆိုဒ်မှ သင်နှစ်သက်ရာ eSIM အစီအစဉ်ကို ရွေးချယ်ဝယ်ယူပါ။",
      },
      icon: <Smartphone className="h-6 w-6 text-[#00FFFF]" />,
      image: "/esim-plan-selection.png",
      altText: {
        en: "Selecting an eSIM plan on the website",
        mm: "ဝဘ်ဆိုဒ်ပေါ်တွင် eSIM အစီအစဉ်ကို ရွေးချယ်ခြင်း",
      },
    },
    {
      title: {
        en: "Receive QR Code",
        mm: "QR ကုဒ်ရယူပါ",
      },
      description: {
        en: "You'll receive a QR code via email immediately after purchase.",
        mm: "ဝယ်ယူပြီးနောက် ချက်ချင်း အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။",
      },
      icon: <QrCode className="h-6 w-6 text-[#00FFFF]" />,
      image: "/placeholder.svg?height=300&width=400&query=esim qr code in email",
      altText: {
        en: "eSIM QR code received in email",
        mm: "အီးမေးလ်တွင် ရရှိသော eSIM QR ကုဒ်",
      },
    },
    {
      title: {
        en: "Open Device Settings",
        mm: "စက်ဆက်တင်ကိုဖွင့်ပါ",
      },
      description: {
        en: "Go to Settings > Cellular/Mobile Data > Add Cellular/Data Plan.",
        mm: "ဆက်တင်များ > ဆဲလ်လူလာ/မိုဘိုင်းဒေတာ > ဆဲလ်လူလာ/ဒေတာအစီအစဉ်ထည့်ရန် သို့သွားပါ။",
      },
      icon: <Settings className="h-6 w-6 text-[#00FFFF]" />,
      image: "/placeholder.svg?height=300&width=400&query=smartphone settings cellular data menu",
      altText: {
        en: "Smartphone settings showing cellular data menu",
        mm: "ဆဲလ်လူလာဒေတာမီနူးပြသနေသော စမတ်ဖုန်းဆက်တင်များ",
      },
    },
    {
      title: {
        en: "Scan QR Code",
        mm: "QR ကုဒ်ကိုစကင်ဖတ်ပါ",
      },
      description: {
        en: "Scan the QR code you received with your device's camera.",
        mm: "သင်ရရှိသော QR ကုဒ်ကို သင့်စက်၏ ကင်မရာဖြင့် စကင်ဖတ်ပါ။",
      },
      icon: <QrCode className="h-6 w-6 text-[#00FFFF]" />,
      image: "/placeholder.svg?height=300&width=400&query=scanning esim qr code with smartphone",
      altText: {
        en: "Scanning eSIM QR code with smartphone camera",
        mm: "စမတ်ဖုန်းကင်မရာဖြင့် eSIM QR ကုဒ်ကို စကင်ဖတ်ခြင်း",
      },
    },
    {
      title: {
        en: "Confirm Installation",
        mm: "တပ်ဆင်မှုကိုအတည်ပြုပါ",
      },
      description: {
        en: "Follow the on-screen instructions to complete the eSIM installation.",
        mm: "eSIM တပ်ဆင်မှုပြီးစီးရန် စကရင်ပေါ်ရှိ ညွှန်ကြားချက်များကို လိုက်နာပါ။",
      },
      icon: <Check className="h-6 w-6 text-[#00FFFF]" />,
      image: "/placeholder.svg?height=300&width=400&query=confirming esim installation on smartphone",
      altText: {
        en: "Confirming eSIM installation on smartphone",
        mm: "စမတ်ဖုန်းပေါ်တွင် eSIM တပ်ဆင်မှုကို အတည်ပြုခြင်း",
      },
    },
  ]

const handleNextStep = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      setCurrentStep(0)
    }
  }

const handlePrevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    } else {
      setCurrentStep(steps.length - 1)
    }
  }

return (
    <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 md:p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
      <h3 className="text-2xl font-bold mb-6 text-center">
        {language === "en" ? "eSIM Activation Guide" : "eSIM အသုံးပြုခြင်း လမ်းညွှန်"}
      </h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        {/* Step visualization */}
        <div className="order-2 md:order-1">
          {isClient && (
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStep}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.5 }}
                className="bg-[#1E2F3C] p-4 rounded-lg border border-[#00FFFF]/10 shadow-inner"
              >
                <Image
                  src={steps[currentStep].image || "/placeholder.svg"}
                  alt={
                    steps[currentStep].altText?.[language === "en" ? "en" : "mm"] ||
                    steps[currentStep].title[language === "en" ? "en" : "mm"]
                  }
                  width={400}
                  height={300}
                  className="rounded-lg w-full h-auto"
                  priority={currentStep === 0}
                />
                <p className="text-[#B0BEC5] text-sm mt-2 text-center">
                  {steps[currentStep].altText?.[language === "en" ? "en" : "mm"]}
                </p>
              </motion.div>
            </AnimatePresence>
          )}
        </div>

{/* Steps */}
        <div className="order-1 md:order-2">
          <div className="space-y-4">
            {steps.map((step, index) => (
              <motion.div
                key={index}
                className={`flex items-start p-4 rounded-lg transition-all ${
                  index === currentStep
                    ? "bg-[#00FFFF]/10 border border-[#00FFFF]/30"
                    : "bg-[#1E2F3C] border border-transparent"
                }`}
                whileHover={{ x: 5 }}
                onClick={() => setCurrentStep(index)}
                style={{ cursor: "pointer" }}
                role="button"
                tabIndex={0}
                aria-label={`Step ${index + 1}: ${step.title[language === "en" ? "en" : "mm"]}`}
                aria-selected={index === currentStep}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    setCurrentStep(index)
                  }
                }}
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center mr-3 flex-shrink-0 ${
                    index === currentStep ? "bg-[#00FFFF] text-[#1E2F3C]" : "bg-[#1E2F3C] text-[#00FFFF]"
                  }`}
                >
                  {index < currentStep ? <Check className="h-5 w-5" /> : <span>{index + 1}</span>}
                </div>
                <div>
                  <h4 className={`font-medium ${index === currentStep ? "text-[#00FFFF]" : "text-white"}`}>
                    {step.title[language === "en" ? "en" : "mm"]}
                  </h4>
                  <p className="text-[#B0BEC5] text-sm mt-1">{step.description[language === "en" ? "en" : "mm"]}</p>
                </div>
              </motion.div>
            ))}
          </div>

<div className="mt-6 flex justify-between">
            <motion.button
              className="bg-[#00FFFF]/10 hover:bg-[#00FFFF]/20 text-[#00FFFF] py-3 px-4 rounded-lg flex items-center justify-center transition-colors"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={handlePrevStep}
              aria-label={language === "en" ? "Previous step" : "ယခင်အဆင့်"}
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              {language === "en" ? "Previous" : "ယခင်"}
            </motion.button>

<motion.button
              className="bg-[#00FFFF]/10 hover:bg-[#00FFFF]/20 text-[#00FFFF] py-3 px-4 rounded-lg flex items-center justify-center transition-colors"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={handleNextStep}
              aria-label={language === "en" ? "Next step" : "နောက်အဆင့်"}
            >
              {language === "en" ? "Next" : "နောက်"}
              <ArrowRight className="ml-2 h-4 w-4" />
            </motion.button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/animated-section.tsx" isMerged="true"
"use client"

import type React from "react"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"

interface AnimatedSectionProps {
  children: React.ReactNode
  delay?: number
  className?: string
}

export default function AnimatedSection({ children, delay = 0, className = "" }: AnimatedSectionProps) {
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px 0px" })

return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.8, delay, ease: "easeOut" }}
      className={className}
    >
      {children}
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/breadcrumb-schema.tsx" isMerged="true"
"use client"

import { usePathname } from "next/navigation"

export default function BreadcrumbSchema() {
  const pathname = usePathname()

// Skip rendering schema on homepage
  if (pathname === "/") return null

// Generate breadcrumb items
  const pathSegments = pathname.split("/").filter((segment) => segment)

const breadcrumbItems = [
    {
      "@type": "ListItem",
      position: 1,
      name: "Home",
      item: "https://esim-myanmar.vercel.app",
    },
    ...pathSegments.map((segment, index) => {
      const position = index + 2
      const href = `https://esim-myanmar.vercel.app/${pathSegments.slice(0, index + 1).join("/")}`

// Format the label (convert kebab-case to Title Case)
      const name = segment
        .split("-")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ")

return {
        "@type": "ListItem",
        position: position,
        name: name,
        item: href,
      }
    }),
  ]

const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: breadcrumbItems,
  }

return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} />
}
[V0_FILE]typescriptreact:file="components/breadcrumb.tsx" isMerged="true"
"use client"

import { usePathname } from "next/navigation"
import Link from "next/link"
import { ChevronRight, Home } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function Breadcrumb() {
  const pathname = usePathname()
  const { language } = useLanguage()

// Skip rendering breadcrumbs on homepage
  if (pathname === "/") return null

// Generate breadcrumb items
  const pathSegments = pathname.split("/").filter((segment) => segment)

const breadcrumbItems = [
    {
      label: language === "en" ? "Home" : "ပင်မစာမျက်နှာ",
      href: "/",
    },
    ...pathSegments.map((segment, index) => {
      const href = `/${pathSegments.slice(0, index + 1).join("/")}`

// Format the label (convert kebab-case to Title Case)
      const formattedSegment = segment
        .split("-")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ")

// Translate common pages
      const translations: Record<string, string> = {
        about: "အကြောင်း",
        contact: "ဆက်သွယ်ရန်",
        faq: "မေးလေ့ရှိသောမေးခွန်းများ",
        "how-it-works": "အသုံးပြုပုံ",
        compatibility: "ကိုက်ညီမှု",
        "privacy-policy": "ကိုယ်ရေးအချက်အလက်မူဝါဒ",
        "terms-of-service": "ဝန်ဆောင်မှုစည်းကမ်းချက်များ",
      }

const label = language === "en" ? formattedSegment : translations[segment] || formattedSegment

return { label, href }
    }),
  ]

return (
    <nav aria-label="Breadcrumb" className="px-4 py-2 text-sm">
      <ol className="flex flex-wrap items-center">
        {breadcrumbItems.map((item, index) => {
          const isLast = index === breadcrumbItems.length - 1

return (
            <li key={item.href} className="flex items-center">
              {index === 0 ? (
                <Link href={item.href} className="flex items-center text-gray-400 hover:text-white transition-colors">
                  <Home size={14} className="mr-1" />
                  <span className="sr-only">{item.label}</span>
                </Link>
              ) : (
                <>
                  <ChevronRight size={14} className="mx-2 text-gray-500" aria-hidden="true" />
                  {isLast ? (
                    <span aria-current="page" className="font-medium text-white">
                      {item.label}
                    </span>
                  ) : (
                    <Link href={item.href} className="text-gray-400 hover:text-white transition-colors">
                      {item.label}
                    </Link>
                  )}
                </>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/buy-esim-button.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { ShoppingCart } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"
import { motion } from "framer-motion"

interface BuyEsimButtonProps {
  variant?: "default" | "icon"
  className?: string
}

export default function BuyEsimButton({ variant = "default", className = "" }: BuyEsimButtonProps) {
  const { t } = useLanguage()

if (variant === "icon") {
    return (
      <Link href="/esim">
        <Button
          size="icon"
          className={`bg-[#00FFFF] text-[#1E2F3C] hover:bg-[#00CCCC] transition-colors duration-200 relative ${className}`}
          aria-label={t("Buy eSIM", "eSIM ဝယ်ယူရန်")}
        >
          <ShoppingCart size={20} />
          <motion.span
            className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"
            animate={{
              scale: [1, 1.2, 1],
              opacity: [0.7, 1, 0.7],
            }}
            transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
          />
        </Button>
      </Link>
    )
  }

return (
    <Link href="/esim">
      <Button className={`bg-[#00FFFF] text-[#1E2F3C] hover:bg-[#00CCCC] transition-colors duration-200 ${className}`}>
        <ShoppingCart className="mr-2 h-4 w-4" />
        <LocalizedText en="Buy eSIM" mm="eSIM ဝယ်ယူရန်" />
      </Button>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/checkout-loading.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"
import { CreditCard, ShieldCheck, QrCode, CheckCircle } from "lucide-react"
import EnhancedLoading from "./enhanced-loading"

interface CheckoutLoadingProps {
  onComplete?: () => void
  orderId?: string
}

export default function CheckoutLoading({ onComplete, orderId }: CheckoutLoadingProps) {
  const { language } = useLanguage()

// Loading stages with messages in both languages
  const stages = [
    {
      en: {
        title: "Processing payment",
        description: "Securely handling your transaction",
      },
      mm: {
        title: "ငွေပေးချေမှုကို ဆောင်ရွက်နေသည်",
        description: "သင့်ငွေပေးချေမှုကို လုံခြုံစွာ ဆောင်ရွက်နေသည်",
      },
      icon: <CreditCard className="h-6 w-6 text-[#00FFFF]" />,
      duration: 30,
    },
    {
      en: {
        title: "Verifying transaction",
        description: "Confirming your payment details",
      },
      mm: {
        title: "ငွေပေးချေမှုကို အတည်ပြုနေသည်",
        description: "သင့်ငွေပေးချေမှုအသေးစိတ်ကို အတည်ပြုနေသည်",
      },
      icon: <ShieldCheck className="h-6 w-6 text-[#00FFFF]" />,
      duration: 30,
    },
    {
      en: {
        title: "Generating eSIM",
        description: "Creating your digital SIM profile",
      },
      mm: {
        title: "eSIM ကို ထုတ်လုပ်နေသည်",
        description: "သင့်ဒစ်ဂျစ်တယ် SIM ပရိုဖိုင်ကို ဖန်တီးနေသည်",
      },
      icon: <QrCode className="h-6 w-6 text-[#00FFFF]" />,
      duration: 30,
    },
    {
      en: {
        title: "Finalizing order",
        description: "Preparing your activation instructions",
      },
      mm: {
        title: "အော်ဒါကို အပြီးသတ်နေသည်",
        description: "သင့်အသုံးပြုမှုညွှန်ကြားချက်များကို ပြင်ဆင်နေသည်",
      },
      icon: <CheckCircle className="h-6 w-6 text-[#00FFFF]" />,
      duration: 10,
    },
  ]

return (
    <div className="container mx-auto px-4 min-h-[80vh] flex flex-col items-center justify-center">
      <div className="w-full max-w-lg">
        {/* Order ID display */}
        {orderId && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-6 text-center"
          >
            <p className="text-[#B0BEC5] text-sm">
              {language === "en" ? "Order ID" : "အော်ဒါ ID"}: <span className="text-white font-medium">{orderId}</span>
            </p>
          </motion.div>
        )}

{/* Security notice */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 0.5 }}
          className="mt-8 text-center"
        >
          <div className="flex items-center justify-center mb-2">
            <ShieldCheck className="h-5 w-5 text-[#00FFFF] mr-2" />
            <p className="text-sm font-medium text-white">
              {language === "en" ? "Secure Transaction" : "လုံခြုံသော ငွေပေးချေမှု"}
            </p>
          </div>
          <p className="text-xs text-[#B0BEC5]">
            {language === "en"
              ? "All payments are processed securely. Your payment information is never stored on our servers."
              : "ငွေပေးချေမှုအားလုံးကို လုံခြုံစွာ ဆောင်ရွက်ပါသည်။ သင့်ငွေပေးချေမှုအချက်အလက်များကို ကျွန်ုပ်တို့၏ ဆာဗာများတွင် သိမ်းဆည်းခြင်း မရှိပါ။"}
          </p>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/client-components-wrapper.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import dynamic from "next/dynamic"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"

// Dynamically import components that should only render on client
const HeaderWrapper = dynamic(() => import("@/components/header-wrapper"), { ssr: false })
const BackgroundMusic = dynamic(() => import("@/components/thingyan/background-music"), { ssr: false })
const WaterEffects = dynamic(() => import("@/components/thingyan/water-effects"), { ssr: false })

export default function ClientComponentsWrapper({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false)
  const { isThingyanTheme } = useThingyanTheme()

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return (
      <div className="flex flex-col min-h-screen">
        <div className="h-20"></div> {/* Placeholder for header */}
        <main className="flex-grow pt-20">{children}</main>
      </div>
    )
  }

return (
    <>
      <div className="flex flex-col min-h-screen">
        <HeaderWrapper />
        <main className="flex-grow pt-20">{children}</main>
      </div>

{isThingyanTheme && (
        <>
          <BackgroundMusic />
          <WaterEffects />
        </>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/compatibility-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Input } from "@/components/ui/input"
import AnimatedSection from "@/components/animated-section"
import DeviceChecker from "@/components/device-checker"
import { Search, Smartphone, Globe, Check, Shield } from "lucide-react"
import { ResponsiveText } from "@/components/ui/responsive-text"
import { TruncatedText } from "@/components/ui/truncated-text"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"

export default function CompatibilityContent() {
  const [searchTerm, setSearchTerm] = useState("")
  const { language } = useLanguage()

// Updated device list with accurate compatibility information and expanded brands
  const deviceBrands = [
    {
      name: "Apple",
      devices: [
        "iPhone 15 Pro Max",
        "iPhone 15 Pro",
        "iPhone 15 Plus",
        "iPhone 15",
        "iPhone 14 Pro Max",
        "iPhone 14 Pro",
        "iPhone 14 Plus",
        "iPhone 14",
        "iPhone 13 Pro Max",
        "iPhone 13 Pro",
        "iPhone 13",
        "iPhone 13 mini",
        "iPhone 12 Pro Max",
        "iPhone 12 Pro",
        "iPhone 12",
        "iPhone 12 mini",
        "iPhone SE (3rd generation)",
        "iPhone SE (2nd generation)",
        "iPhone 11 Pro Max",
        "iPhone 11 Pro",
        "iPhone 11",
        "iPhone XS Max",
        "iPhone XS",
        "iPhone XR",
        "iPad Pro (11-inch) (3rd generation)",
        "iPad Pro (12.9-inch) (5th generation)",
        "iPad Air (4th generation)",
        "iPad (9th generation)",
        "iPad mini (6th generation)",
        "iPad Pro (11-inch) (4th generation)",
        "iPad Pro (12.9-inch) (6th generation)",
        "iPad Air (5th generation)",
        "iPad (10th generation)",
      ],
    },
    {
      name: "Samsung",
      devices: [
        "Galaxy S23 Ultra",
        "Galaxy S23+",
        "Galaxy S23",
        "Galaxy S23 FE",
        "Galaxy S22 Ultra",
        "Galaxy S22+",
        "Galaxy S22",
        "Galaxy S21 Ultra 5G",
        "Galaxy S21+ 5G",
        "Galaxy S21 5G",
        "Galaxy S21 FE 5G",
        "Galaxy S20 Ultra 5G",
        "Galaxy S20+ 5G",
        "Galaxy S20 5G",
        "Galaxy S20 FE 5G",
        "Galaxy Note 20 Ultra 5G",
        "Galaxy Note 20 5G",
        "Galaxy Z Fold5",
        "Galaxy Z Fold4",
        "Galaxy Z Fold3 5G",
        "Galaxy Z Fold2 5G",
        "Galaxy Z Flip5",
        "Galaxy Z Flip4",
        "Galaxy Z Flip3 5G",
        "Galaxy A54 5G",
        "Galaxy A53 5G",
        "Galaxy A52s 5G",
        "Galaxy A52 5G",
        "Galaxy A34 5G",
        "Galaxy A33 5G",
        "Galaxy A23 5G",
        "Galaxy A14 5G",
        "Galaxy A13 5G",
        "Galaxy Tab S9 Ultra",
        "Galaxy Tab S9+",
        "Galaxy Tab S9",
        "Galaxy Tab S8 Ultra",
        "Galaxy Tab S8+",
        "Galaxy Tab S8",
        "Galaxy Tab S7+ 5G",
        "Galaxy Tab S7 5G",
      ],
    },
    {
      name: "Google",
      devices: [
        "Pixel 8 Pro",
        "Pixel 8",
        "Pixel 7a",
        "Pixel 7 Pro",
        "Pixel 7",
        "Pixel 6a",
        "Pixel 6 Pro",
        "Pixel 6",
        "Pixel 5a 5G",
        "Pixel 5",
        "Pixel 4a (5G)",
        "Pixel 4a",
        "Pixel 4 XL",
        "Pixel 4",
        "Pixel Fold",
        "Pixel Tablet",
      ],
    },
    {
      name: "Huawei",
      devices: [
        "P60 Pro",
        "P60",
        "P50 Pro",
        "P50",
        "P40 Pro+",
        "P40 Pro",
        "P40",
        "Mate 50 Pro",
        "Mate 50",
        "Mate 40 Pro",
        "Mate 40",
        "Mate 30 Pro",
        "Mate 30",
        "Mate X3",
        "Mate X2",
        "Mate Xs 2",
        "Nova 11 Pro",
        "Nova 11",
        "Nova 10 Pro",
        "Nova 10",
        "Nova 9",
        "MatePad Pro 13.2",
        "MatePad Pro 12.6",
        "MatePad Pro 11",
      ],
    },
    {
      name: "Xiaomi",
      devices: [
        "13 Ultra",
        "13 Pro",
        "13",
        "13T Pro",
        "13T",
        "13 Lite",
        "12 Pro",
        "12",
        "12T Pro",
        "12T",
        "12 Lite",
        "Mi 11 Ultra",
        "Mi 11 Pro",
        "Mi 11",
        "Mi 11 Lite 5G",
        "Mi 10T Pro",
        "Mi 10T",
        "Redmi Note 12 Pro+ 5G",
        "Redmi Note 12 Pro 5G",
        "Redmi Note 12 5G",
        "Redmi Note 11 Pro+ 5G",
        "Redmi Note 11 Pro 5G",
        "Redmi Note 11 5G",
        "Redmi 12 5G",
        "Redmi 11 5G",
        "Poco F5 Pro",
        "Poco F5",
        "Poco F4 GT",
        "Poco F4",
        "Poco X5 Pro 5G",
        "Poco X5 5G",
        "Pad 6",
        "Pad 5",
      ],
    },
    {
      name: "OPPO",
      devices: [
        "Find X6 Pro",
        "Find X6",
        "Find X5 Pro",
        "Find X5",
        "Find X3 Pro",
        "Find X3",
        "Find N3",
        "Find N3 Flip",
        "Find N2",
        "Find N2 Flip",
        "Find N",
        "Reno10 Pro+ 5G",
        "Reno10 Pro 5G",
        "Reno10 5G",
        "Reno9 Pro+ 5G",
        "Reno9 Pro 5G",
        "Reno9 5G",
        "Reno8 Pro 5G",
        "Reno8 5G",
        "Reno7 Pro 5G",
        "Reno7 5G",
        "A98 5G",
        "A78 5G",
        "A58 5G",
        "Pad 2",
        "Pad Air",
      ],
    },
    {
      name: "Vivo",
      devices: [
        "X100 Pro",
        "X100",
        "X90 Pro",
        "X90",
        "X80 Pro",
        "X80",
        "X70 Pro+",
        "X70 Pro",
        "X70",
        "X Fold2",
        "X Fold",
        "X Flip",
        "V30",
        "V29 Pro",
        "V29",
        "V27 Pro",
        "V27",
        "V25 Pro",
        "V25",
        "V23 Pro",
        "V23",
        "T2 Pro 5G",
        "T2 5G",
        "T1 Pro 5G",
        "T1 5G",
        "Y100 5G",
        "Y78 5G",
      ],
    },
    {
      name: "Motorola",
      devices: [
        "Edge 40 Pro",
        "Edge 40",
        "Edge 30 Ultra",
        "Edge 30 Pro",
        "Edge 30 Fusion",
        "Edge 30",
        "Edge+ (2022)",
        "Edge 20 Pro",
        "Edge 20",
        "Razr 40 Ultra",
        "Razr 40",
        "Razr (2022)",
        "Razr 5G",
        "Moto G84 5G",
        "Moto G73 5G",
        "Moto G53 5G",
        "Moto G 5G (2023)",
        "ThinkPhone",
      ],
    },
    {
      name: "OnePlus",
      devices: [
        "11",
        "10 Pro",
        "10T",
        "10R",
        "9 Pro",
        "9",
        "9R",
        "8 Pro",
        "8",
        "8T",
        "Nord 3 5G",
        "Nord CE 3 5G",
        "Nord CE 3 Lite 5G",
        "Nord 2T 5G",
        "Nord 2 5G",
        "Nord CE 2 5G",
        "Nord CE 2 Lite 5G",
        "Open",
        "Pad",
      ],
    },
    {
      name: "Nothing",
      devices: ["Phone (2)", "Phone (1)", "Phone (2a)"],
    },
    {
      name: "Sony",
      devices: [
        "Xperia 1 V",
        "Xperia 1 IV",
        "Xperia 1 III",
        "Xperia 5 V",
        "Xperia 5 IV",
        "Xperia 5 III",
        "Xperia 10 V",
        "Xperia 10 IV",
        "Xperia 10 III",
      ],
    },
    {
      name: "ASUS",
      devices: [
        "ROG Phone 7 Ultimate",
        "ROG Phone 7",
        "ROG Phone 6 Pro",
        "ROG Phone 6",
        "ROG Phone 5 Ultimate",
        "ROG Phone 5 Pro",
        "ROG Phone 5",
        "Zenfone 10",
        "Zenfone 9",
        "Zenfone 8 Flip",
        "Zenfone 8",
      ],
    },
    {
      name: "Honor",
      devices: [
        "Magic5 Pro",
        "Magic5",
        "Magic4 Pro",
        "Magic4",
        "Magic Vs2",
        "Magic Vs",
        "Magic V2",
        "Magic V",
        "90",
        "80 Pro",
        "80",
        "70 Pro+",
        "70 Pro",
        "70",
        "X50 Pro 5G",
        "X50 5G",
        "X40 GT",
        "X30 5G",
        "Pad 9",
        "Pad 8",
      ],
    },
    {
      name: "Realme",
      devices: [
        "GT 5 Pro",
        "GT 5",
        "GT 3 Pro",
        "GT 3",
        "GT 2 Pro",
        "GT 2",
        "GT Neo 5",
        "GT Neo 3",
        "11 Pro+ 5G",
        "11 Pro 5G",
        "11 5G",
        "10 Pro+ 5G",
        "10 Pro 5G",
        "10 5G",
        "9 Pro+ 5G",
        "9 Pro 5G",
        "9 5G",
        "Pad 2",
        "Pad",
      ],
    },
  ]

const filteredBrands = deviceBrands
    .map((brand) => ({
      ...brand,
      devices: brand.devices.filter((device) => device.toLowerCase().includes(searchTerm.toLowerCase())),
    }))
    .filter((brand) => brand.devices.length > 0)

return (
    <div className="container mx-auto px-4">
      <AnimatedSection>
        <div className="py-16 text-center">
          <motion.h1
            className="text-4xl md:text-6xl font-bold mb-6 gradient-text glow-text"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <LocalizedText
              en={
                <>
                  Device <span className="text-[#00FFFF]">Compatibility</span>
                </>
              }
              mm={
                <>
                  စက်ပစ္စည်း <span className="text-[#00FFFF]">သဟဇာတဖြစ်မှု</span>
                </>
              }
            />
          </motion.h1>
          <ResponsiveText size="xl" color="#B0BEC5" className="max-w-3xl mx-auto mb-8" as="p">
            <LocalizedText
              en="Check if your device supports eSIM technology. Most modern smartphones and tablets are compatible."
              mm="သင့်စက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ခြင်း ရှိမရှိ စစ်ဆေးပါ။ ခေတ်မီစမတ်ဖုန်းနှင့် တက်ဘလက်အများစုသည် သဟဇာတဖြစ်ပါသည်။"
            />
          </ResponsiveText>
        </div>
      </AnimatedSection>

<AnimatedSection>
        <div className="py-8">
          <div className="flex items-center justify-center mb-8">
            <div className="relative w-full max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]" />
              <Input
                type="text"
                placeholder={language === "en" ? "Search for your device..." : "သင့်စက်ပစ္စည်းကို ရှာဖွေပါ..."}
                className="pl-10 bg-[#263A49] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF] rounded-lg"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>

<div className="space-y-8">
            {filteredBrands.map((brand) => (
              <motion.div
                key={brand.name}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg"
              >
                <div className="flex items-center mb-4">
                  <Smartphone className="h-6 w-6 text-[#00FFFF] mr-2" />
                  <ResponsiveText size="2xl" weight="bold" color="#00FFFF" as="h3">
                    {brand.name}
                  </ResponsiveText>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                  {brand.devices.map((device) => (
                    <motion.div
                      key={device}
                      whileHover={{ scale: 1.02, backgroundColor: "rgba(0, 255, 255, 0.05)" }}
                      className="p-3 bg-[#1E2F3C] rounded-lg border border-[#00FFFF]/5 hover:border-[#00FFFF]/20 transition-all"
                    >
                      <TruncatedText text={device} lines={1} />
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            ))}

{filteredBrands.length === 0 && (
              <div className="text-center py-12 bg-[#1E2F3C] rounded-xl border border-[#00FFFF]/10 shadow-lg">
                <Search className="h-16 w-16 text-[#B0BEC5] mx-auto mb-4" />
                <ResponsiveText size="xl" weight="bold" as="h3" className="mb-2">
                  <LocalizedText en="No devices found" mm="စက်ပစ္စည်းများ မတွေ့ရှိပါ" />
                </ResponsiveText>
                <ResponsiveText color="#B0BEC5" className="max-w-md mx-auto">
                  <LocalizedText
                    en={`No devices found matching "${searchTerm}". Try a different search term or check our compatibility checker above.`}
                    mm={`"${searchTerm}" နှင့် ကိုက်ညီသော စက်ပစ္စည်းများ မတွေ့ရှိပါ။ မတူညီသော ရှာဖွေမှုစကားလုံးကို ကြိုးစားပါ သို့မဟုတ် အထက်ပါ သဟဇာတဖြစ်မှုစစ်ဆေးရေးကိရိယာကို စစ်ဆေးပါ။`}
                  />
                </ResponsiveText>
              </div>
            )}
          </div>
        </div>
      </AnimatedSection>

<AnimatedSection>
        <div className="py-16">
          <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
            <ResponsiveText size="2xl" weight="bold" as="h2" className="mb-6 text-center">
              <LocalizedText
                en={
                  <>
                    eSIM <span className="text-[#00FFFF]">Requirements</span>
                  </>
                }
                mm={
                  <>
                    eSIM <span className="text-[#00FFFF]">လိုအပ်ချက်များ</span>
                  </>
                }
              />
            </ResponsiveText>

<AnimatedSection>
        <div className="py-12">
          <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
            <ResponsiveText size="2xl" weight="bold" as="h2" className="mb-6 text-center">
              <LocalizedText
                en={
                  <>
                    Supported <span className="text-[#00FFFF]">Carriers</span>
                  </>
                }
                mm={
                  <>
                    ထောက်ပံ့ထားသော <span className="text-[#00FFFF]">ဝန်ဆောင်မှုပေးသူများ</span>
                  </>
                }
              />
            </ResponsiveText>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <CarrierCard
                name="MPT"
                country="Myanmar"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Ooredoo"
                country="Myanmar"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Telenor/ATOM"
                country="Myanmar"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Mytel"
                country="Myanmar"
                supportLevel="partial"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="AIS"
                country="Thailand"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="DTAC"
                country="Thailand"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="True Move H"
                country="Thailand"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Singtel"
                country="Singapore"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="StarHub"
                country="Singapore"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="M1"
                country="Singapore"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Celcom"
                country="Malaysia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Digi"
                country="Malaysia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Maxis"
                country="Malaysia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="U Mobile"
                country="Malaysia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Globe"
                country="Philippines"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Smart"
                country="Philippines"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="DITO"
                country="Philippines"
                supportLevel="partial"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Telkomsel"
                country="Indonesia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="XL Axiata"
                country="Indonesia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Indosat Ooredoo"
                country="Indonesia"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Viettel"
                country="Vietnam"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Vinaphone"
                country="Vietnam"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Mobifone"
                country="Vietnam"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="AT&T"
                country="USA"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="T-Mobile"
                country="USA"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Verizon"
                country="USA"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Vodafone"
                country="Multiple"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="O2"
                country="UK/Europe"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="EE"
                country="UK"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Three"
                country="Multiple"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Orange"
                country="Multiple"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Airtel"
                country="India"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="Jio"
                country="India"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="BSNL"
                country="India"
                supportLevel="partial"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="China Mobile"
                country="China"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="China Unicom"
                country="China"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
              <CarrierCard
                name="China Telecom"
                country="China"
                supportLevel="full"
                icon={<Globe className="h-8 w-8 text-[#00FFFF]" />}
              />
            </div>
          </div>
        </div>
      </AnimatedSection>
    </div>
  )
}

// Carrier Card Component
function CarrierCard({ name, country, supportLevel, icon }) {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      className="bg-[#1E2F3C] p-4 rounded-lg border border-[#00FFFF]/10 hover:border-[#00FFFF]/30 transition-all"
    >
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center">
          {icon}
          <ResponsiveText size="lg" weight="bold" className="ml-2">
            {name}
          </ResponsiveText>
        </div>
        {supportLevel === "full" ? (
          <span className="bg-[#00FFFF]/20 text-[#00FFFF] text-xs px-2 py-1 rounded-full flex items-center">
            <Check className="h-3 w-3 mr-1" />
            Full
          </span>
        ) : (
          <span className="bg-[#FFA500]/20 text-[#FFA500] text-xs px-2 py-1 rounded-full flex items-center">
            <Shield className="h-3 w-3 mr-1" />
            Partial
          </span>
        )}
      </div>
      <ResponsiveText size="sm" color="#B0BEC5">
        {country}
      </ResponsiveText>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ArrowRight, Check } from "lucide-react"
import Link from "next/link"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"

export default function CTASection() {
  const { t } = useLanguage()

const benefits = [
    t("No physical SIM card needed", "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ"),
    t("Instant activation via QR code", "QR ကုဒ်မှတဆင့် ချက်ချင်းအသုံးပြုနိုင်"),
    t("Store multiple profiles on one device", "စက်တစ်ခုတည်းတွင် ပရိုဖိုင်အများအပြား သိမ်းဆည်းနိုင်"),
    t("Enhanced security features", "အဆင့်မြှင့်တင်ထားသော လုံခြုံရေးအင်္ဂါရပ်များ"),
  ]

return (
    <section className="py-24 bg-gradient-to-b from-[#1E2F3C] to-[#162430]" aria-labelledby="cta-heading">
      <div className="container mx-auto px-4">
        <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] rounded-3xl overflow-hidden shadow-2xl relative">
          {/* Background decoration */}
          <div className="absolute inset-0 overflow-hidden">
            <motion.div
              className="absolute -right-40 -top-40 w-80 h-80 rounded-full bg-[#00FFFF]/10 blur-3xl"
              animate={{
                scale: [1, 1.2, 1],
                rotate: [0, 45, 0],
              }}
              transition={{ duration: 20, repeat: Number.POSITIVE_INFINITY }}
            />
            <motion.div
              className="absolute -left-20 -bottom-20 w-60 h-60 rounded-full bg-[#00FFFF]/5 blur-3xl"
              animate={{
                scale: [1, 1.3, 1],
                rotate: [0, -45, 0],
              }}
              transition={{ duration: 15, repeat: Number.POSITIVE_INFINITY }}
            />
          </div>

<div className="relative z-10 p-8 md:p-16 flex flex-col md:flex-row items-center justify-between gap-12">
            <div className="max-w-xl">
              <motion.h2
                id="cta-heading"
                className="text-3xl md:text-4xl font-bold mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en={
                    <>
                      Ready to Experience <span className="text-[#00FFFF]">eSIM</span> Technology?
                    </>
                  }
                  mm={
                    <>
                      <span className="text-[#00FFFF]">eSIM</span> နည်းပညာကို အသုံးပြုရန် အဆင်သင့်ဖြစ်ပြီလား?
                    </>
                  }
                />
              </motion.h2>

<motion.p
                className="text-lg text-[#B0BEC5] mb-8"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en="Check if your device is compatible and start enjoying the benefits of eSIM technology today."
                  mm="သင့်စက်ပစ္စည်းသည် သဟဇာတဖြစ်မဖြစ် စစ်ဆေးပြီး ယနေ့ပင် eSIM နည်းပညာ၏ အကျိုးကျေးဇူးများကို စတင်ခံစားပါ။"
                />
              </motion.p>

<motion.ul
                className="space-y-3 mb-8"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                viewport={{ once: true }}
              >
                {benefits.map((benefit, index) => (
                  <motion.li
                    key={index}
                    className="flex items-start"
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.3, delay: 0.3 + index * 0.1 }}
                    viewport={{ once: true }}
                  >
                    <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" aria-hidden="true" />
                    <span className="text-[#B0BEC5]">{benefit}</span>
                  </motion.li>
                ))}
              </motion.ul>

<motion.div
                className="flex flex-col sm:flex-row gap-4"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.4 }}
                viewport={{ once: true }}
              >
                <Link href="/compatibility" className="w-full sm:w-auto">
                  <Button className="bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 px-8 py-6 text-lg rounded-lg shadow-lg shadow-[#00FFFF]/20 w-full sm:w-auto group relative overflow-hidden">
                    <span className="relative z-10 flex items-center">
                      <LocalizedText en="Check Compatibility" mm="သဟဇာတဖြစ်မှုစစ်ဆေးရန်" />
                      <motion.div
                        className="ml-2"
                        animate={{ x: [0, 5, 0] }}
                        transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
                      >
                        <ArrowRight className="h-5 w-5" aria-hidden="true" />
                      </motion.div>
                    </span>
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                      initial={{ x: "-100%" }}
                      animate={{ x: "200%" }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                    />
                  </Button>
                </Link>
                <Link href="/contact" className="w-full sm:w-auto">
                  <Button
                    variant="outline"
                    className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 px-8 py-6 text-lg rounded-lg w-full sm:w-auto"
                  >
                    <LocalizedText en="Contact Us" mm="ဆက်သွယ်ရန်" />
                  </Button>
                </Link>
              </motion.div>
            </div>

{/* Decorative element */}
            <motion.div
              className="w-full max-w-xs aspect-square relative hidden lg:block"
              initial={{ opacity: 0, scale: 0.8, rotate: -10 }}
              whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
              transition={{ duration: 0.8 }}
              viewport={{ once: true }}
              aria-hidden="true"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-[#00FFFF]/20 to-[#00FFFF]/5 rounded-2xl flex items-center justify-center">
                <div className="w-3/4 h-3/4 border-4 border-dashed border-[#00FFFF]/30 rounded-2xl flex items-center justify-center">
                  <div className="w-1/2 h-1/2 bg-[#00FFFF]/10 rounded-xl flex items-center justify-center">
                    <div className="text-[#00FFFF] font-bold text-xl">eSIM</div>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/device-checker.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { CheckCircle, XCircle, Smartphone, Search, Loader2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"

export default function DeviceChecker() {
  const [isCompatible, setIsCompatible] = useState<boolean | null>(null)
  const [deviceInfo, setDeviceInfo] = useState<string>("")
  const [isChecking, setIsChecking] = useState(false)
  const { t } = useLanguage()

useEffect(() => {
    // Get basic device info
    const userAgent = navigator.userAgent
    let deviceName = "your device"

if (/iPhone/.test(userAgent)) {
      deviceName = "iPhone"
    } else if (/iPad/.test(userAgent)) {
      deviceName = "iPad"
    } else if (/Android/.test(userAgent)) {
      deviceName = "Android device"
    } else if (/Windows/.test(userAgent)) {
      deviceName = "Windows device"
    } else if (/Mac/.test(userAgent)) {
      deviceName = "Mac"
    }

setDeviceInfo(deviceName)
  }, [])

const checkCompatibility = () => {
    setIsChecking(true)

// Simulate checking process
    setTimeout(() => {
      // This is a simplified check - in a real app, you'd have a more comprehensive database
      const userAgent = navigator.userAgent.toLowerCase()

// Most iPhones from XR/XS and newer support eSIM
      const isNeweriPhone =
        /iphone/.test(userAgent) && (/iphone1[1-9]/.test(userAgent) || /iphone2[0-9]/.test(userAgent))

// Most flagship Android phones from 2019 and newer support eSIM
      const isNewerAndroid =
        /android/.test(userAgent) && (/android 9/.test(userAgent) || /android 1[0-9]/.test(userAgent))

setIsCompatible(isNeweriPhone || isNewerAndroid)
      setIsChecking(false)
    }, 2000)
  }

return (
    <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg text-center relative overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 pointer-events-none">
        {/* Grid pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 grid grid-cols-12 gap-4">
            {Array.from({ length: 12 }).map((_, colIndex) => (
              <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
            ))}
          </div>
          <div className="absolute inset-0 grid grid-rows-12 gap-4">
            {Array.from({ length: 12 }).map((_, rowIndex) => (
              <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
            ))}
          </div>
        </div>

{/* Decorative elements */}
        <motion.div
          className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            rotate: [0, 10, 0],
          }}
          transition={{ duration: 10, repeat: Number.POSITIVE_INFINITY }}
        />
        <motion.div
          className="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.3, 1],
            rotate: [0, -10, 0],
          }}
          transition={{ duration: 12, repeat: Number.POSITIVE_INFINITY }}
        />
      </div>

{/* Animated pulse */}
            <motion.div
              className="absolute inset-0 rounded-full border border-[#00FFFF]/30"
              animate={{ scale: [1, 1.5, 1], opacity: [0.7, 0, 0.7] }}
              transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
            />
          </motion.div>
        </div>

<motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.5 }}
        >
          <h2 className="text-2xl font-bold mb-4">
            <LocalizedText
              en={`Is ${deviceInfo} compatible with eSIM?`}
              mm={`${deviceInfo} သည် eSIM နှင့် သဟဇာတဖြစ်ပါသလား?`}
            />
          </h2>
          <p className="text-[#B0BEC5] mb-8 max-w-lg mx-auto">
            <LocalizedText
              en="Click the button below to check if your current device supports eSIM technology."
              mm="သင့်လက်ရှိစက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ခြင်း ရှိမရှိ စစ်ဆေးရန် အောက်ပါခလုတ်ကို နှိပ်ပါ။"
            />
          </p>
        </motion.div>

<AnimatePresence mode="wait">
          {isCompatible === null ? (
            <motion.div key="check-button" initial={{ opacity: 1 }} exit={{ opacity: 0 }} className="relative">
              <Button
                onClick={checkCompatibility}
                disabled={isChecking}
                className="bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 px-8 py-6 text-lg rounded-lg shadow-lg shadow-[#00FFFF]/20 relative overflow-hidden group"
              >
                <span className="relative z-10 flex items-center">
                  {isChecking ? (
                    <>
                      <motion.div
                        animate={{ rotate: 360 }}
                        transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                        className="mr-2"
                      >
                        <Loader2 className="h-5 w-5" />
                      </motion.div>
                      <LocalizedText en="Checking..." mm="စစ်ဆေးနေသည်..." />
                    </>
                  ) : (
                    <>
                      <Search className="h-5 w-5 mr-2" />
                      <LocalizedText en="Check My Device" mm="ကျွန်ုပ်၏စက်ကို စစ်ဆေးပါ" />
                    </>
                  )}
                </span>

{/* Animated gradient overlay */}
                <motion.div
                  className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                  initial={{ x: "-100%" }}
                  animate={{ x: "200%" }}
                  transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                />
              </Button>

{/* Decorative dots */}
              <div className="absolute -z-10 -bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-1">
                {[0, 1, 2].map((i) => (
                  <motion.div
                    key={i}
                    className="w-1 h-1 rounded-full bg-[#00FFFF]/50"
                    animate={{
                      opacity: [0.3, 1, 0.3],
                      scale: [0.8, 1.2, 0.8],
                    }}
                    transition={{
                      duration: 1.5,
                      repeat: Number.POSITIVE_INFINITY,
                      delay: i * 0.3,
                    }}
                  />
                ))}
              </div>
            </motion.div>
          ) : (
            <motion.div
              key="result"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.5 }}
              className="bg-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/20 relative overflow-hidden"
            >
              {/* Background pattern */}
              <div className="absolute inset-0 opacity-5 pointer-events-none">
                <div className="absolute inset-0 grid grid-cols-8 gap-2">
                  {Array.from({ length: 8 }).map((_, colIndex) => (
                    <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
                  ))}
                </div>
                <div className="absolute inset-0 grid grid-rows-8 gap-2">
                  {Array.from({ length: 8 }).map((_, rowIndex) => (
                    <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
                  ))}
                </div>
              </div>

<div className="relative z-10">
                {isCompatible ? (
                  <div className="flex flex-col items-center">
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: "spring", stiffness: 200, damping: 10 }}
                    >
                      <div className="relative">
                        <CheckCircle className="h-20 w-20 text-green-500 mb-4" />

{/* Success particles */}
                        {Array.from({ length: 8 }).map((_, i) => (
                          <motion.div
                            key={i}
                            className="absolute w-1 h-1 rounded-full bg-green-400"
                            style={{
                              top: "50%",
                              left: "50%",
                            }}
                            animate={{
                              x: [0, (Math.random() - 0.5) * 60],
                              y: [0, (Math.random() - 0.5) * 60],
                              opacity: [1, 0],
                              scale: [1, 0],
                            }}
                            transition={{
                              duration: 1 + Math.random(),
                              repeat: Number.POSITIVE_INFINITY,
                              delay: Math.random() * 0.5,
                            }}
                          />
                        ))}
                      </div>
                    </motion.div>
                    <h3 className="text-2xl font-bold mb-2 text-green-400">
                      <LocalizedText en="Good News!" mm="သတင်းကောင်းပါ!" />
                    </h3>
                    <p className="text-[#B0BEC5] mb-6">
                      <LocalizedText
                        en={`Based on our detection, ${deviceInfo} appears to support eSIM technology.`}
                        mm={`ကျွန်ုပ်တို့၏ စစ်ဆေးတွေ့ရှိချက်အရ ${deviceInfo} သည် eSIM နည်းပညာကို ထောက်ပံ့ပုံရပါသည်။`}
                      />
                    </p>
                    <Button
                      onClick={() => setIsCompatible(null)}
                      variant="outline"
                      className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 group relative overflow-hidden"
                    >
                      <span className="relative z-10">
                        <LocalizedText en="Check Again" mm="ထပ်မံစစ်ဆေးပါ" />
                      </span>

{/* Hover effect */}
                      <motion.div
                        className="absolute inset-0 bg-[#00FFFF]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                        initial={{ scale: 0 }}
                        whileHover={{ scale: 1 }}
                        transition={{ duration: 0.3 }}
                      />
                    </Button>
                  </div>
                ) : (
                  <div className="flex flex-col items-center">
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: "spring", stiffness: 200, damping: 10 }}
                    >
                      <div className="relative">
                        <XCircle className="h-20 w-20 text-red-500 mb-4" />

{/* Warning particles */}
                        {Array.from({ length: 5 }).map((_, i) => (
                          <motion.div
                            key={i}
                            className="absolute w-1 h-1 rounded-full bg-red-400"
                            style={{
                              top: "50%",
                              left: "50%",
                            }}
                            animate={{
                              x: [0, (Math.random() - 0.5) * 40],
                              y: [0, (Math.random() - 0.5) * 40],
                              opacity: [1, 0],
                            }}
                            transition={{
                              duration: 1 + Math.random(),
                              repeat: Number.POSITIVE_INFINITY,
                              delay: Math.random() * 0.5,
                            }}
                          />
                        ))}
                      </div>
                    </motion.div>
                    <h3 className="text-2xl font-bold mb-2 text-red-400">
                      <LocalizedText en="We're Not Sure" mm="ကျွန်ုပ်တို့ မသေချာပါ" />
                    </h3>
                    <p className="text-[#B0BEC5] mb-6">
                      <LocalizedText
                        en={`We couldn't confirm if ${deviceInfo} supports eSIM. Please check your device settings or contact your manufacturer.`}
                        mm={`${deviceInfo} သည် eSIM ကို ထောက်ပံ့ခြင်း ရှိမရှိ ကျွန်ုပ်တို့ အတည်မပြုနိုင်ပါ။ သင့်စက်ပစ္စည်း ဆက်တင်များကို စစ်ဆေးပါ သို့မဟုတ် သင့်ထုတ်လုပ်သူကို ဆက်သွယ်ပါ။`}
                      />
                    </p>
                    <Button
                      onClick={() => setIsCompatible(null)}
                      variant="outline"
                      className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 group relative overflow-hidden"
                    >
                      <span className="relative z-10">
                        <LocalizedText en="Check Again" mm="ထပ်မံစစ်ဆေးပါ" />
                      </span>

{/* Hover effect */}
                      <motion.div
                        className="absolute inset-0 bg-[#00FFFF]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                        initial={{ scale: 0 }}
                        whileHover={{ scale: 1 }}
                        transition={{ duration: 0.3 }}
                      />
                    </Button>
                  </div>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dynamic-loading-screen.tsx" isMerged="true"
"use client"

import dynamic from "next/dynamic"

// Dynamically import the loading screen component with ssr: false
const DynamicLoadingScreen = dynamic(() => import("@/components/loading-screen"), {
  ssr: false,
})

export default function ClientDynamicLoadingScreen() {
  return <DynamicLoadingScreen />
}
[V0_FILE]typescriptreact:file="components/enhanced-loading.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"

interface LoadingStage {
  en: {
    title: string
    description: string
  }
  mm: {
    title: string
    description: string
  }
  icon: React.ReactNode
  duration: number
}

interface EnhancedLoadingProps {
  stages: LoadingStage[]
  onComplete?: () => void
  showTips?: boolean
  tipEn?: string
  tipMm?: string
  className?: string
  autoProgress?: boolean
  initialProgress?: number
  speed?: number
}

export default function EnhancedLoading({
  stages,
  onComplete,
  showTips = true,
  tipEn,
  tipMm,
  className = "",
  autoProgress = true,
  initialProgress = 0,
  speed = 60,
}: EnhancedLoadingProps) {
  const [progress, setProgress] = useState(initialProgress)
  const [currentStage, setCurrentStage] = useState(0)
  const { language } = useLanguage()
  const shouldReduceMotion = useReducedMotion()
  const animationRef = useRef<number | null>(null)
  const lastUpdateRef = useRef<number>(0)

// Optimized animation using requestAnimationFrame
  useEffect(() => {
    if (!autoProgress) return

let currentProgress = initialProgress
    let stageProgress = 0
    let currentStageIndex = 0

const animate = (timestamp: number) => {
      if (!lastUpdateRef.current) lastUpdateRef.current = timestamp

const elapsed = timestamp - lastUpdateRef.current

// Only update every 60ms (or whatever speed is set)
      if (elapsed > speed) {
        lastUpdateRef.current = timestamp

if (currentProgress >= 100) {
          onComplete && onComplete()
          return
        }

// Increment progress
        currentProgress += 1
        stageProgress += 1
        setProgress(currentProgress)

animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [autoProgress, initialProgress, onComplete, speed, stages])

const currentStageData = stages[currentStage][language === "en" ? "en" : "mm"]

// Simplified animations for reduced motion preference
  const particleAnimation = shouldReduceMotion ? { opacity: [0.3, 0.7, 0.3] } : { y: [0, -10, 0], opacity: [0, 1, 0] }

const circleAnimation = shouldReduceMotion ? { scale: 1 } : { scale: [1, 1.05, 1] }

return (
    <div className={`w-full ${className}`}>
      {/* Main loading container */}
      <motion.div
        initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg overflow-hidden relative"
      >
        {/* Background decoration */}
        <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl" />
        <div className="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-[#00FFFF]/5 blur-3xl" />

{/* Loading animation */}
        <div className="flex flex-col items-center justify-center mb-10">
          <div className="relative w-32 h-32 mb-8">
            {/* Circular progress - optimized for performance */}
            <svg className="w-full h-full" viewBox="0 0 100 100" aria-hidden="true">
              <circle cx="50" cy="50" r="45" fill="none" stroke="#263A49" strokeWidth="8" strokeLinecap="round" />
              <motion.circle
                cx="50"
                cy="50"
                r="45"
                fill="none"
                stroke="#00FFFF"
                strokeWidth="8"
                strokeLinecap="round"
                initial={{ pathLength: 0 }}
                animate={{ pathLength: progress / 100 }}
                transition={{ duration: 0.3, ease: "easeOut" }}
                style={{
                  strokeDasharray: "283",
                  strokeDashoffset: "283",
                  transformOrigin: "center",
                }}
              />
            </svg>

{/* Percentage text */}
            <div
              className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-[#1E2F3C] px-3 py-1 rounded-full border border-[#00FFFF]/20 text-sm font-medium text-[#00FFFF]"
              aria-live="polite"
              aria-atomic="true"
            >
              {progress}%
            </div>
          </div>

{/* Stage indicators */}
          <div
            className="flex space-x-2 mb-6"
            role="progressbar"
            aria-valuenow={currentStage + 1}
            aria-valuemin={1}
            aria-valuemax={stages.length}
          >
            {stages.map((_, index) => (
              <motion.div
                key={index}
                className={`w-2 h-2 rounded-full ${index === currentStage ? "bg-[#00FFFF]" : "bg-[#00FFFF]/30"}`}
                animate={
                  index === currentStage && !shouldReduceMotion
                    ? {
                        scale: [1, 1.3, 1],
                      }
                    : {}
                }
                transition={{
                  duration: 1.5,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "easeInOut",
                }}
              />
            ))}
          </div>

{/* Stage information */}
          <AnimatePresence mode="wait">
            <motion.div
              key={currentStage}
              initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
              transition={{ duration: 0.3 }}
              className="text-center"
              aria-live="polite"
            >
              <h2 className="text-xl font-medium text-white mb-2">{currentStageData.title}</h2>
              <p className="text-[#B0BEC5]">{currentStageData.description}</p>
            </motion.div>
          </AnimatePresence>
        </div>

{/* Digital particles animation - optimized with fewer particles for better performance */}
        {!shouldReduceMotion && (
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {Array.from({ length: 10 }).map((_, i) => (
              <motion.div
                key={i}
                className="absolute w-1 h-1 rounded-full bg-[#00FFFF]"
                style={{
                  top: `${Math.random() * 100}%`,
                  left: `${Math.random() * 100}%`,
                  willChange: "transform, opacity",
                }}
                animate={particleAnimation}
                transition={{
                  duration: 1.5 + Math.random() * 2,
                  repeat: Number.POSITIVE_INFINITY,
                  delay: Math.random() * 1,
                }}
              />
            ))}
          </div>
        )}
      </motion.div>

{/* Loading tips */}
      {showTips && (
        <motion.div
          initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.7 }}
          className="mt-6 bg-[#1E2F3C] p-4 rounded-lg border border-[#00FFFF]/10"
        >
          <p className="text-[#B0BEC5] text-sm text-center">
            {language === "en"
              ? tipEn || "We're preparing your experience. This may take a few moments..."
              : tipMm || "သင့်အတွေ့အကြုံကို ပြင်ဆင်နေပါသည်။ ခဏစောင့်ပါ..."}
          </p>
        </motion.div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/esim-page.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Check,
  ChevronDown,
  ChevronRight,
  Globe,
  Shield,
  Smartphone,
  Zap,
  CreditCard,
  HelpCircle,
  Phone,
  Info,
  Facebook,
  Instagram,
  MessageCircle,
  Mail,
} from "lucide-react"
import AnimatedSection from "@/components/animated-section"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"
import Link from "next/link"
import ProductSchema from "@/components/product-schema"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import Image from "next/image"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import ActivationGuide from "@/components/activation-guide"

// Define plan types
interface Plan {
  id: string
  name: string
  data: string
  validity: string
  price: number
  features: string[]
  popular?: boolean
}

export default function ESIMPageContent() {
  const { t, language } = useLanguage()
  const [selectedPlan, setSelectedPlan] = useState<string>("standard")
  const [showAllFeatures, setShowAllFeatures] = useState(false)
  const [isClient, setIsClient] = useState(false)
  const contactRef = useRef<HTMLDivElement>(null)

// Client-side only to avoid hydration issues
  useEffect(() => {
    setIsClient(true)
  }, [])

// Scroll to contact section
  const scrollToContact = () => {
    contactRef.current?.scrollIntoView({ behavior: "smooth" })
  }

// Define plans with accurate information
  const plans: Plan[] = [
    {
      id: "basic",
      name: t("Basic", "အခြေခံ"),
      data: "3GB",
      validity: t("7 days", "၇ ရက်"),
      price: 5000,
      features: [
        t("3GB high-speed data", "3GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 7 days", "၇ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
      ],
    },
    {
      id: "standard",
      name: t("Standard", "စံ"),
      data: "10GB",
      validity: t("15 days", "၁၅ ရက်"),
      price: 12000,
      features: [
        t("10GB high-speed data", "10GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 15 days", "၁၅ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
        t("Unlimited social media", "အကန့်အသတ်မရှိ လူမှုကွန်ရက်"),
      ],
      popular: true,
    },
    {
      id: "premium",
      name: t("Premium", "ပရီမီယံ"),
      data: "30GB",
      validity: t("30 days", "၃၀ ရက်"),
      price: 25000,
      features: [
        t("30GB high-speed data", "30GB မြန်နှုန်းမြင့် ဒေတာ"),
        t("Valid for 30 days", "၃၀ ရက် သက်တမ်းရှိ"),
        t("Myanmar-wide coverage", "မြန်မာတစ်နိုင်ငံလုံး လွှမ်းခြုံမှု"),
        t("24/7 customer support", "၂၄/၇ ဝန်ဆောင်မှု"),
        t("Unlimited social media", "အကန့်အသတ်မရှိ လူမှုကွန်ရက်"),
        t("HD video streaming", "HD ဗီဒီယို ကြည့်ရှုခြင်း"),
        t("Priority network access", "ဦးစားပေး ကွန်ရက်ဝင်ရောက်ခွင့်"),
      ],
    },
  ]

// Get the selected plan details
  const selectedPlanDetails = plans.find((plan) => plan.id === selectedPlan) || plans[1]

// Features list - updated with accurate information
  const features = [
    {
      icon: <Smartphone className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်"),
      description: t(
        "Activate your eSIM instantly by scanning a QR code - no physical SIM card needed.",
        "QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့် eSIM ကို ချက်ချင်းအသုံးပြုနိုင်သည် - ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။",
      ),
    },
    {
      icon: <Shield className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်"),
      description: t(
        "eSIMs cannot be physically removed or stolen, providing better security for your data and identity.",
        "eSIM များကို ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သဖြင့် သင့်ဒေတာနှင့် ကိုယ်ရေးအချက်အလက်များအတွက် ပိုမိုလုံခြုံမှုရှိသည်။",
      ),
    },
    {
      icon: <Globe className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Nationwide Coverage", "တစ်နိုင်ငံလုံးလွှမ်းခြုံမှု"),
      description: t(
        "Enjoy reliable connectivity throughout Myanmar with our extensive network coverage.",
        "ကျွန်ုပ်တို့၏ ကျယ်ပြန့်သော ကွန်ရက်လွှမ်းခြုံမှုဖြင့် မြန်မာနိုင်ငံတစ်ဝှမ်း စိတ်ချရသော ချိတ်ဆက်မှုကို ခံစားပါ။",
      ),
    },
    {
      icon: <Zap className="h-6 w-6 text-[#00FFFF]" />,
      title: t("High-Speed Data", "မြန်နှုန်းမြင့်ဒေတာ"),
      description: t(
        "Experience fast and reliable internet speeds for streaming, browsing, and downloading.",
        "စတရင်းမင်း၊ ရှာဖွေကြည့်ရှုခြင်းနှင့် ဒေါင်းလုဒ်လုပ်ခြင်းတို့အတွက် မြန်ဆန်ပြီး စိတ်ချရသော အင်တာနက်အမြန်နှုန်းကို ခံစားပါ။",
      ),
    },
    {
      icon: <CreditCard className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Flexible Payment Options", "ပြောင်းလွယ်ပြင်လွယ်သော ငွေပေးချေမှုနည်းလမ်းများ"),
      description: t(
        "Pay with multiple payment methods including mobile banking, credit/debit cards, and digital wallets.",
        "မိုဘိုင်းဘဏ်လုပ်ငန်း၊ ခရက်ဒစ်/ဒက်ဘစ်ကတ်များနှင့် ဒီဂျစ်တယ်ပိုက်ဆံအိတ်များ အပါအဝင် ငွေပေးချေမှုနည်းလမ်းများစွာဖြင့် ပေးချေပါ။",
      ),
    },
  ]

// FAQ items - expanded with more comprehensive information
  const faqItems = [
    {
      question: t("What is an eSIM?", "eSIM ဆိုတာ ဘာလဲ?"),
      answer: t(
        "An eSIM (embedded SIM) is a digital SIM that allows you to activate a cellular plan without using a physical SIM card. It's built into your device and can be programmed to connect to different mobile networks.",
        "eSIM (embedded SIM) ဆိုသည်မှာ ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မသုံးဘဲ မိုဘိုင်းဝန်ဆောင်မှုကို အသုံးပြုနိုင်စေသော ဒီဂျစ်တယ် SIM ဖြစ်သည်။ ၎င်းကို သင့်စက်ထဲတွင် ထည့်သွင်းထားပြီး မတူညီသော မိုဘိုင်းကွန်ရက်များနှင့် ချိတ်ဆက်ရန် ပရိုဂရမ်လုပ်နိုင်သည်။",
      ),
    },
    {
      question: t("How do I activate my eSIM?", "eSIM ကို ဘယ်လိုအသုံးပြုရမလဲ?"),
      answer: t(
        "After purchasing, you'll receive a QR code via email. Go to your device's settings, select 'Mobile Data' or 'Cellular', then 'Add Data Plan' or 'Add eSIM'. Scan the QR code and follow the on-screen instructions to complete activation.",
        "ဝယ်ယူပြီးနောက်၊ သင်သည် အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။ သင့်စက်၏ ဆက်တင်များသို့သွား၍ 'မိုဘိုင်းဒေတာ' သို့မဟုတ် 'ဆဲလ်လူလာ' ကို ရွေးချယ်ပြီး 'ဒေတာအစီအစဉ်ထည့်ရန်' သို့မဟုတ် 'eSIM ထည့်ရန်' ကို ရွေးပါ။ QR ကုဒ်ကို စကင်ဖတ်ပြီး အသုံးပြုမှုပြီးမြောက်ရန် စကရင်ပေါ်ရှိ ညွှန်ကြားချက်များကို လိုက်နာပါ။",
      ),
    },
    {
      question: t("Which devices are compatible with eSIM?", "ဘယ်စက်ပစ္စည်းတွေက eSIM နဲ့ သဟဇာတဖြစ်သလဲ?"),
      answer: t(
        "Most modern smartphones and tablets support eSIM, including iPhone XS and newer, Google Pixel 3 and newer, Samsung Galaxy S20 and newer, and many other recent models. You can check our compatibility page for a complete list.",
        "iPhone XS နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ Google Pixel 3 နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ Samsung Galaxy S20 နှင့် နောက်ပိုင်းမော်ဒယ်များ၊ နှင့် အခြားမကြာသေးမီက မော်ဒယ်များအပါအဝင် ခေတ်မီစမတ်ဖုန်းနှင့် တက်ဘလက်အများစုသည် eSIM ကို ထောက်ပံ့ပါသည်။ အပြည့်အစုံစာရင်းအတွက် ကျွန်ုပ်တို့၏ သဟဇာတဖြစ်မှုစာမျက်နှာကို စစ်ဆေးနိုင်ပါသည်။",
      ),
    },
    {
      question: t(
        "Can I use both physical SIM and eSIM at the same time?",
        "Physical SIM နှင့် eSIM ကို တစ်ပြိုင်နက် သုံးလို့ရပါသလား?",
      ),
      answer: t(
        "Yes, most eSIM-compatible devices support Dual SIM Dual Standby (DSDS), allowing you to use both a physical SIM and an eSIM simultaneously. This is great for separating personal and business lines or using local data while traveling.",
        "ရပါသည်။ eSIM ထောက်ပံ့သော စက်အများစုသည် Dual SIM Dual Standby (DSDS) ကို ထောက်ပံ့သဖြင့် physical SIM နှင့် eSIM နှစ်ခုလုံးကို တစ်ပြိုင်နက် အသုံးပြုနိုင်ပါသည်။ ဤသည်မှာ ကိုယ်ပိုင်နှင့် စီးပွားရေးလိုင်းများကို ခွဲခြားရန် သို့မဟုတ် ခရီးသွားစဉ် ပြည်တွင်းဒေတာကို အသုံးပြုရန် အလွန်ကောင်းပါသည်။",
      ),
    },
    {
      question: t("What happens if I lose my device?", "ကျွန်တော့်/ကျွန်မ စက်ပျောက်သွားရင် ဘာဖြစ်မလဲ?"),
      answer: t(
        "If you lose your device, your eSIM profile remains secure and cannot be accessed without your device passcode. Contact our customer support at 09650000172 or info@esim.com.mm, and we can help you transfer your eSIM profile to a new device once you have one.",
        "သင့်စက်ပျောက်သွားပါက သင့် eSIM ပရိုဖိုင်သည် လုံခြုံမှုရှိပြီး သင့်စက်၏ လျှို့ဝှက်ကုဒ်မရှိဘဲ ဝင်ရောက်၍မရပါ။ ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုဌာန ၀၉၆၅၀၀၀၀၁၇၂ သို့မဟုတ် info@esim.com.mm သို့ ဆက်သွယ်ပါ၊ သင့်တွင် စက်အသစ်ရှိလာပါက သင့် eSIM ပရိုဖိုင်ကို စက်အသစ်သို့ လွှဲပြောင်းရန် ကျွန်ုပ်တို့ ကူညီပေးနိုင်ပါသည်။",
      ),
    },
    {
      question: t("Can I recharge or top up my eSIM?", "eSIM ကို ဖြည့်လို့ရပါသလား?"),
      answer: t(
        "Yes, you can easily recharge your eSIM through our website (esim.com.mm), mobile app, or authorized retailers. Simply enter your eSIM number or scan the QR code, select your preferred top-up amount, and complete the payment.",
        "ရပါသည်။ ကျွန်ုပ်တို့၏ ဝဘ်ဆိုဒ် (esim.com.mm)၊ မိုဘိုင်းအက်ပ် သို့မဟုတ် တရားဝင်အရောင်းဆိုင်များမှတဆင့် သင့် eSIM ကို လွယ်ကူစွာ ဖြည့်နိုင်ပါသည်။ သင့် eSIM နံပါတ်ကို ရိုက်ထည့်ပါ သို့မဟုတ် QR ကုဒ်ကို စကင်ဖတ်ပါ၊ သင်နှစ်သက်ရာ ဖြည့်သွင်းငွေပမာဏကို ရွေးချယ်ပြီး ငွေပေးချေမှုကို ပြီးဆုံးအောင် လုပ်ဆောင်ပါ။",
      ),
    },
    {
      question: t("Are there any special requirements for eSIM activation?", "eSIM အသုံးပြုရန် အထူးလိုအပ်ချက်များ ရှိပါသလား?"),
      answer: t(
        "Your device must be unlocked and eSIM-compatible. You'll need an active internet connection for the initial setup. Some carriers may require identity verification during activation in accordance with local regulations.",
        "သင့်စက်သည် လော့ခ်ဖွင့်ထားပြီး eSIM နှင့် သဟဇာတဖြစ်ရမည်။ ကနဦးစတင်အသုံးပြုရန် အင်တာနက်ချိတ်ဆက်မှု လိုအပ်ပါသည်။ အချို့ဝန်ဆောင်မှုပေးသူများသည် ပြည်တွင်းစည်းမျဉ်းများနှင့်အညီ အသုံးပြုစဉ် မှတ်ပုံတင်အတည်ပြုခြင်း လိုအပ်နိုင်ပါသည်။",
      ),
    },
    {
      question: t("How long does eSIM activation take?", "eSIM အသုံးပြုရန် ဘယ်လောက်ကြာမလဲ?"),
      answer: t(
        "eSIM activation typically takes only a few minutes. After purchasing, you'll receive the QR code immediately, and the scanning and setup process usually completes within 5 minutes, depending on your internet connection speed.",
        "eSIM အသုံးပြုခြင်းသည် ပုံမှန်အားဖြင့် မိနစ်အနည်းငယ်သာ ကြာပါသည်။ ဝယ်ယူပြီးနောက်၊ QR ကုဒ်ကို ချက်ချင်းရရှိမည်ဖြစ်ပြီး၊ စကင်ဖတ်ခြင်းနှင့် စတင်အသုံးပြုခြင်းလုပ်ငန်းစဉ်သည် သင့်အင်တာနက်ချိတ်ဆက်မှုအမြန်နှုန်းပေါ် မူတည်၍ ပုံမှန်အားဖြင့် ၅ မိနစ်အတွင်း ပြီးစီးပါသည်။",
      ),
    },
  ]

// Introduction section content - updated with accurate information
  const introContent = {
    en: {
      title: "What is an eSIM?",
      description:
        "An eSIM (embedded SIM) is a digital version of a SIM card that is built into your device. Unlike traditional physical SIM cards, eSIMs cannot be removed and are programmed remotely. This technology allows you to activate a cellular plan from a carrier without having to use a physical SIM card.",
      benefits: [
        "No physical SIM card needed",
        "Quick and easy activation",
        "Store multiple profiles on one device",
        "Switch between carriers without changing SIMs",
        "More secure than physical SIM cards",
        "Environmentally friendly (reduces plastic waste)",
      ],
    },
    mm: {
      title: "eSIM ဆိုတာ ဘာလဲ?",
      description:
        "eSIM (embedded SIM) သည် သင့်စက်ထဲတွင် ထည့်သွင်းထားသော SIM ကဒ်၏ ဒီဂျစ်တယ်ဗားရှင်းဖြစ်သည်။ ရိုးရိုး ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်များနှင့်မတူဘဲ eSIM များကို ဖယ်ရှား၍မရဘဲ အဝေးမှ ပရိုဂရမ်လုပ်ထားသည်။ ဤနည်းပညာသည် ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်ကို အသုံးမပြုဘဲ ဆက်သွယ်ရေးကုမ္ပဏီတစ်ခုမှ ဆဲလ်လူလာအစီအစဉ်တစ်ခုကို အသုံးပြုခွင့်ပေးသည်။",
      benefits: [
        "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ",
        "လျင်မြန်ပြီး လွယ်ကူသော အသုံးပြုမှု",
        "စက်တစ်ခုတည်းတွင် ပရိုဖိုင်အများအပြားကို သိမ်းဆည်းနိုင်သည်",
        "SIM များ မပြောင်းလဲဘဲ ဆက်သွယ်ရေးကုမ္ပဏီများကြား ပြောင်းလဲနိုင်သည်",
        "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်များထက် ပိုမိုလုံခြုံသည်",
        "သဘာဝပတ်ဝန်းကျင်နှင့် သဟဇာတဖြစ်သည် (ပလတ်စတစ်စွန့်ပစ်ပစ္စည်းကို လျှော့ချသည်)",
      ],
    },
  }

// Network providers - updated with accurate information
  const networkProviders = [
    {
      name: "MPT",
      logo: "/images/mpt-logo.png",
      alt: "MPT Logo - Myanmar Posts and Telecommunications",
    },
    {
      name: "ATOM",
      logo: "/images/atom-logo.png",
      alt: "ATOM Logo - Myanmar Telecom Provider",
    },
    {
      name: "Ooredoo",
      logo: "/images/ooredoo-logo.png",
      alt: "Ooredoo Logo - Myanmar Telecom Provider",
    },
    {
      name: "Mytel",
      logo: "/images/mytel-logo.png",
      alt: "Mytel Logo - Myanmar Telecom Provider",
    },
  ]

// Support channels - updated with accurate contact information
  const supportChannels = [
    {
      icon: <Phone className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Phone Support", "ဖုန်းဖြင့် အကူအညီ"),
      description: t("Call our customer service at 09650000172", "ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုဌာနကို ၀၉၆၅၀၀၀၀၁၇၂ သို့ ဖုန်းဆက်ပါ"),
      action: "tel:+959650000172",
      actionText: t("Call Now", "ယခုဖုန်းဆက်ရန်"),
    },
    {
      icon: <Mail className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Email Support", "အီးမေးလ်ဖြင့် အကူအညီ"),
      description: t("Email us at info@esim.com.mm for assistance", "အကူအညီအတွက် info@esim.com.mm သို့ အီးမေးလ်ပို့ပါ"),
      action: "mailto:info@esim.com.mm",
      actionText: t("Send Email", "အီးမေးလ်ပို့ရန်"),
    },
    {
      icon: <Facebook className="h-6 w-6 text-[#00FFFF]" />,
      title: t("Social Media", "လူမှုကွန်ရက်"),
      description: t(
        "Connect with us on Facebook and Instagram @eSIMMyanmar",
        "Facebook နှင့် Instagram @eSIMMyanmar တွင် ကျွန်ုပ်တို့နှင့် ဆက်သွယ်ပါ",
      ),
      action: "https://facebook.com/eSIMMyanmar",
      actionText: t("Follow Us", "ကျွန်ုပ်တို့ကို Follow လုပ်ရန်"),
    },
  ]

// Social media links
  const socialLinks = [
    {
      name: "Facebook",
      icon: <Facebook className="h-5 w-5" />,
      url: "https://facebook.com/eSIMMyanmar",
    },
    {
      name: "Instagram",
      icon: <Instagram className="h-5 w-5" />,
      url: "https://instagram.com/eSIMMyanmar",
    },
    {
      name: "Messenger",
      icon: <MessageCircle className="h-5 w-5" />,
      url: "https://m.me/eSIMMyanmar",
    },
  ]

// Step-by-step activation process - new section
  const activationSteps = [
    {
      step: "1",
      title: t("Purchase an eSIM Plan", "eSIM အစီအစဉ်ဝယ်ယူပါ"),
      description: t(
        "Choose and purchase your preferred eSIM plan from our website.",
        "ကျွန်ုပ်တို့၏ ဝဘ်ဆိုဒ်မှ သင်နှစ်သက်ရာ eSIM အစီအစဉ်ကို ရွေးချယ်ဝယ်ယူပါ။",
      ),
    },
    {
      step: "2",
      title: t("Receive QR Code", "QR ကုဒ်ရယူပါ"),
      description: t(
        "You'll receive a QR code via email immediately after purchase.",
        "ဝယ်ယူပြီးနောက် ချက်ချင်း အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။",
      ),
    },
    {
      step: "3",
      title: t("Open Device Settings", "စက်ဆက်တင်ကိုဖွင့်ပါ"),
      description: t(
        "Go to Settings > Cellular/Mobile Data > Add Cellular/Data Plan.",
        "ဆက်တင်များ > ဆဲလ်လူလာ/မိုဘိုင်းဒေတာ > ဆဲလ်လူလာ/ဒေတာအစီအစဉ်ထည့်ရန် သို့သွားပါ။",
      ),
    },
    {
      step: "4",
      title: t("Scan QR Code", "QR ကုဒ်ကိုစကင်ဖတ်ပါ"),
      description: t(
        "Scan the QR code you received with your device's camera.",
        "သင်ရရှိသော QR ကုဒ်ကို သင့်စက်၏ ကင်မရာဖြင့် စကင်ဖတ်ပါ။",
      ),
    },
    {
      step: "5",
      title: t("Confirm Installation", "တပ်ဆင်မှုကိုအတည်ပြုပါ"),
      description: t(
        "Follow the on-screen instructions to complete the eSIM installation.",
        "eSIM တပ်ဆင်မှုပြီးစီးရန် စကရင်ပေါ်ရှိ ညွှန်ကြားချက်များကို လိုက်နာပါ။",
      ),
    },
    {
      step: "6",
      title: t("Activate and Use", "အသုံးပြုပါ"),
      description: t(
        "Your eSIM is now active and ready to use for calls, texts, and data.",
        "သင့် eSIM သည် ယခု အသုံးပြုနိုင်ပြီဖြစ်ပြီး ဖုန်းခေါ်ဆိုမှုများ၊ စာတိုများနှင့် ဒေတာအတွက် အသုံးပြုရန် အသင့်ဖြစ်နေပါပြီ။",
      ),
    },
  ]

{/* Skip to content link for accessibility */}
      <a href="#main-content" className="skip-to-content">
        {language === "en" ? "Skip to content" : "အကြောင်းအရာသို့ ကျော်သွားရန်"}
      </a>

<main id="main-content" className="container mx-auto px-4">
        {/* Hero Section */}
        <AnimatedSection>
          <div className="py-16 text-center">
            <motion.h1
              className="text-4xl md:text-6xl font-bold mb-6 gradient-text glow-text"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <LocalizedText
                en={
                  <>
                    Myanmar <span className="text-[#00FFFF]">eSIM</span> Plans
                  </>
                }
                mm={
                  <>
                    မြန်မာ <span className="text-[#00FFFF]">eSIM</span> အစီအစဉ်များ
                  </>
                }
              />
            </motion.h1>
            <motion.p
              className="text-xl text-[#B0BEC5] max-w-3xl mx-auto"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <LocalizedText
                en="Experience seamless connectivity with our digital SIM technology. No physical SIM card needed."
                mm="ကျွန်ုပ်တို့၏ ဒီဂျစ်တယ် SIM နည်းပညာဖြင့် ချောမွေ့သော ချိတ်ဆက်မှုကို ခံစားပါ။ ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ် မလိုအပ်ပါ။"
              />
            </motion.p>

{/* Network providers */}
            <motion.div
              className="flex flex-wrap justify-center items-center gap-6 mt-8"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              <p className="text-[#B0BEC5] text-sm w-full mb-2">
                <LocalizedText en="Compatible with all major networks" mm="အဓိက ကွန်ရက်အားလုံးနှင့် သဟဇာတဖြစ်သည်" />
              </p>
              {networkProviders.map((provider, index) => (
                <div
                  key={index}
                  className="bg-[#1E2F3C] p-2 rounded-lg border border-[#00FFFF]/10 flex items-center justify-center w-20 h-20"
                >
                  <div className="w-16 h-16 flex items-center justify-center">
                    {isClient && (
                      <Image
                        src={`/abstract-geometric-shapes.png?height=64&width=64&query=${provider.name} logo telecom myanmar`}
                        alt={provider.alt}
                        width={64}
                        height={64}
                        className="max-w-full max-h-full object-contain"
                      />
                    )}
                  </div>
                </div>
              ))}
            </motion.div>

{/* Quick contact buttons */}
            <motion.div
              className="flex flex-wrap justify-center gap-4 mt-8"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
            >
              <Button
                variant="outline"
                className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10"
                onClick={scrollToContact}
              >
                <Phone className="mr-2 h-4 w-4" />
                <LocalizedText en="Contact Us" mm="ဆက်သွယ်ရန်" />
              </Button>

{/* Introduction to eSIM Technology */}
        <AnimatedSection>
          <div className="py-8 mb-12">
            <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg">
              <h2 className="text-2xl md:text-3xl font-bold mb-6">
                {language === "en" ? introContent.en.title : introContent.mm.title}
              </h2>
              <p className="text-[#B0BEC5] mb-6">
                {language === "en" ? introContent.en.description : introContent.mm.description}
              </p>

<h3 className="text-xl font-semibold mb-4">
                <LocalizedText en="Benefits of eSIM" mm="eSIM ၏ အကျိုးကျေးဇူးများ" />
              </h3>
              <ul className="space-y-3 mb-6">
                {(language === "en" ? introContent.en.benefits : introContent.mm.benefits).map((benefit, index) => (
                  <li key={index} className="flex items-start">
                    <Check className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
                    <span className="text-[#B0BEC5]">{benefit}</span>
                  </li>
                ))}
              </ul>

{/* Main Content */}
        <AnimatedSection>
          <div className="py-8">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              {/* Product Image */}
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5 }}
                className="relative"
              >
                <div className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg overflow-hidden relative">
                  {/* Background decoration */}
                  <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[#00FFFF]/10 blur-3xl" />
                  <div className="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-[#00FFFF]/10 blur-3xl" />

<div className="relative z-10">
                    {isClient && (
                      <Image
                        src="/placeholder-6ynvg.png"
                        alt="eSIM Digital Card with smartphone showing QR code activation"
                        width={600}
                        height={400}
                        className="w-full h-auto rounded-lg shadow-lg"
                        priority
                      />
                    )}

{/* QR Code sample */}
                    <div className="absolute bottom-4 right-4 bg-white p-2 rounded-lg shadow-lg">
                      {isClient && (
                        <Image
                          src="/placeholder-sm6lp.png"
                          alt="eSIM QR Code Sample for activation"
                          width={80}
                          height={80}
                          className="w-20 h-20"
                        />
                      )}
                    </div>

{features.length > 2 && (
                    <motion.button
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: 0.4 }}
                      onClick={() => setShowAllFeatures(!showAllFeatures)}
                      className="text-[#00FFFF] text-sm flex items-center hover:underline"
                      aria-expanded={showAllFeatures}
                    >
                      {showAllFeatures ? (
                        <>
                          <LocalizedText en="Show less" mm="လျှော့ပြရန်" />
                          <ChevronDown className="ml-1 h-4 w-4" />
                        </>
                      ) : (
                        <>
                          <LocalizedText en="Show more features" mm="အင်္ဂါရပ်များ ပိုမိုပြရန်" />
                          <ChevronRight className="ml-1 h-4 w-4" />
                        </>
                      )}
                    </motion.button>
                  )}
                </div>
              </motion.div>

{/* Compatibility Check */}
                <div className="mt-8 bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
                  <h3 className="text-xl font-bold mb-3">
                    <LocalizedText en="Check Device Compatibility" mm="စက်ပစ္စည်း သဟဇာတဖြစ်မှု စစ်ဆေးရန်" />
                  </h3>
                  <p className="text-[#B0BEC5] mb-4">
                    <LocalizedText
                      en="Make sure your device supports eSIM technology before purchasing."
                      mm="မဝယ်ယူမီ သင့်စက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ကြောင်း သေချာပါစေ။"
                    />
                  </p>
                  <Link href="/compatibility">
                    <Button
                      className="w-full bg-[#1E2F3C] border border-[#00FFFF]/30 text-[#00FFFF] hover:bg-[#00FFFF]/10"
                      aria-label="Check device compatibility"
                    >
                      <Smartphone className="mr-2 h-5 w-5" />
                      <LocalizedText en="Check Compatibility" mm="သဟဇာတဖြစ်မှု စစ်ဆေးရန်" />
                    </Button>
                  </Link>
                </div>
              </motion.div>
            </div>
          </div>
        </AnimatedSection>

{/* Activation Guide - New Section */}
        <AnimatedSection>
          <div className="py-16">
            <div className="text-center mb-12">
              <motion.h2
                className="text-3xl md:text-4xl font-bold mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en={
                    <>
                      eSIM <span className="text-[#00FFFF]">Activation</span> Guide
                    </>
                  }
                  mm={
                    <>
                      eSIM <span className="text-[#00FFFF]">အသုံးပြုခြင်း</span> လမ်းညွှန်
                    </>
                  }
                />
              </motion.h2>
              <motion.p
                className="text-lg text-[#B0BEC5] max-w-2xl mx-auto"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en="Follow these simple steps to activate your eSIM and get connected in minutes."
                  mm="သင့် eSIM ကို အသုံးပြုရန်နှင့် မိနစ်အနည်းငယ်အတွင်း ချိတ်ဆက်ရန် ဤရိုးရှင်းသော အဆင့်များကို လိုက်နာပါ။"
                />
              </motion.p>
            </div>

{/* Interactive Activation Guide Component */}
            <ActivationGuide />

{/* Device-specific instructions alert */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
              viewport={{ once: true }}
              className="mt-8"
            >
              <Alert className="bg-[#1E2F3C] border-[#00FFFF]/20">
                <Info className="h-5 w-5 text-[#00FFFF]" />
                <AlertTitle className="text-white">
                  <LocalizedText en="Device-Specific Instructions" mm="စက်အမျိုးအစားအလိုက် ညွှန်ကြားချက်များ" />
                </AlertTitle>
                <AlertDescription className="text-[#B0BEC5]">
                  <LocalizedText
                    en="The exact steps may vary slightly depending on your device model and operating system version. For detailed instructions specific to your device, please visit our compatibility page."
                    mm="တိကျသော အဆင့်များသည် သင့်စက်မော်ဒယ်နှင့် လည်ပတ်မှုစနစ်ဗားရှင်းပေါ် မူတည်၍ အနည်းငယ် ကွဲပြားနိုင်ပါသည်။ သင့်စက်နှင့် သက်ဆိုင်သော အသေးစိတ်ညွှန်ကြားချက်များအတွက် ကျွန်ုပ်တို့၏ သဟဇာတဖြစ်မှုစာမျက်နှာကို ကြည့်ရှုပါ။"
                  />
                </AlertDescription>
              </Alert>
            </motion.div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  step: "01",
                  title: t("Purchase Your eSIM", "သင့် eSIM ကို ဝယ်ယူပါ"),
                  description: t(
                    "Choose your preferred data plan and complete the purchase process.",
                    "သင်နှစ်သက်ရာ ဒေတာအစီအစဉ်ကို ရွေးချယ်ပြီး ဝယ်ယူမှုလုပ်ငန်းစဉ်ကို ပြီးဆုံးအောင် လုပ်ဆောင်ပါ။",
                  ),
                  icon: <CreditCard className="h-10 w-10 text-[#00FFFF]" />,
                },
                {
                  step: "02",
                  title: t("Receive QR Code", "QR ကုဒ် ရယူပါ"),
                  description: t(
                    "You'll receive a QR code via email immediately after purchase.",
                    "ဝယ်ယူပြီးနောက် ချက်ချင်း အီးမေးလ်မှတဆင့် QR ကုဒ်တစ်ခု ရရှိပါမည်။",
                  ),
                  icon: <HelpCircle className="h-10 w-10 text-[#00FFFF]" />,
                },
                {
                  step: "03",
                  title: t("Scan & Activate", "စကင်ဖတ်ပြီး အသုံးပြုပါ"),
                  description: t(
                    "Scan the QR code in your device settings to activate your eSIM instantly.",
                    "သင့် eSIM ကို ချက်ချင်းအသုံးပြုရန် သင့်စက်ဆက်တင်များတွင် QR ကုဒ်ကို စကင်ဖတ်ပါ။",
                  ),
                  icon: <Smartphone className="h-10 w-10 text-[#00FFFF]" />,
                },
              ].map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg relative overflow-hidden"
                >
                  {/* Step number */}
                  <div className="absolute -top-4 -left-4 w-24 h-24 flex items-center justify-center">
                    <span className="text-6xl font-bold text-[#00FFFF]/10">{item.step}</span>
                  </div>

<div className="relative z-10">
                    <div className="flex justify-center mb-6 mt-2">
                      <div className="w-16 h-16 rounded-full bg-[#00FFFF]/10 flex items-center justify-center">
                        {item.icon}
                      </div>
                    </div>
                    <h3 className="text-xl font-bold mb-4 text-center">{item.title}</h3>
                    <p className="text-[#B0BEC5] text-center">{item.description}</p>
                  </div>

{/* Support Section */}
        <AnimatedSection>
          <div className="py-12" ref={contactRef}>
            <div className="text-center mb-12">
              <motion.h2
                className="text-3xl md:text-4xl font-bold mb-6"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en={
                    <>
                      Need <span className="text-[#00FFFF]">Help?</span>
                    </>
                  }
                  mm={
                    <>
                      <span className="text-[#00FFFF]">အကူအညီ</span> လိုအပ်ပါသလား?
                    </>
                  }
                />
              </motion.h2>
              <motion.p
                className="text-lg text-[#B0BEC5] max-w-2xl mx-auto"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                viewport={{ once: true }}
              >
                <LocalizedText
                  en="Our support team is available to assist you with any questions or issues."
                  mm="ကျွန်ုပ်တို့၏ အထောက်အပံ့အဖွဲ့သည် မေးခွန်းများ သို့မဟုတ် ပြဿနာများနှင့်ပတ်သက်၍ သင့်ကို ကူညီရန် အသင့်ရှိပါသည်။"
                />
              </motion.p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {supportChannels.map((channel, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                  className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg"
                >
                  <div className="flex flex-col items-center text-center">
                    <div className="w-12 h-12 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mb-4">
                      {channel.icon}
                    </div>
                    <h3 className="text-xl font-bold mb-2">{channel.title}</h3>
                    <p className="text-[#B0BEC5] mb-4">{channel.description}</p>
                    <Link href={channel.action}>
                      <Button
                        variant="outline"
                        className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10"
                        aria-label={channel.actionText}
                      >
                        {channel.actionText}
                      </Button>
                    </Link>
                  </div>
                </motion.div>
              ))}
            </div>

{/* Social Media Links */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              viewport={{ once: true }}
              className="mt-8 flex justify-center gap-4"
            >
              {socialLinks.map((link, index) => (
                <Link
                  key={index}
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-[#1E2F3C] p-3 rounded-full border border-[#00FFFF]/10 hover:bg-[#00FFFF]/10 transition-colors"
                  aria-label={`Follow us on ${link.name}`}
                >
                  {link.icon}
                </Link>
              ))}
            </motion.div>
          </div>
        </AnimatedSection>

{/* Terms and Conditions */}
        <AnimatedSection>
          <div className="py-8">
            <div className="bg-[#1E2F3C] p-6 rounded-xl border border-[#00FFFF]/10 shadow-lg">
              <h3 className="text-lg font-medium mb-4">
                <LocalizedText en="Terms and Conditions" mm="စည်းကမ်းချက်များ" />
              </h3>
              <div className="text-sm text-[#B0BEC5] space-y-2">
                <p>
                  <LocalizedText
                    en="By purchasing and using our eSIM service, you agree to our Terms of Service and Privacy Policy."
                    mm="ကျွန်ုပ်တို့၏ eSIM ဝန်ဆောင်မှုကို ဝယ်ယူအသုံးပြုခြင်းဖြင့် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုစည်းကမ်းချက်များနှင့် ကိုယ်ရေးအချက်အလက်မူဝါဒကို သင် သဘောတူပါသည်။"
                  />
                </p>
                <p>
                  <LocalizedText
                    en="Data plans are valid for the specified duration from the time of activation. Unused data will expire after the validity period."
                    mm="ဒေတာအစီအစဉ်များသည် အသုံးပြုသည့်အချိန်မှစ၍ သတ်မှတ်ထားသော ကာလအတွက် သက်တမ်းရှိပါသည်။ အသုံးမပြုရသေးသော ဒေတာသည် သက်တမ်းကာလပြီးနောက် သက်တမ်းကုန်ဆုံးပါမည်။"
                  />
                </p>
                <p>
                  <LocalizedText
                    en="For technical support or assistance, please contact our customer service team at 09650000172 or info@esim.com.mm."
                    mm="နည်းပညာဆိုင်ရာ အထောက်အပံ့ သို့မဟုတ် အကူအညီအတွက် ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုဌာန ၀၉၆၅၀၀၀၀၁၇၂ သို့မဟုတ် info@esim.com.mm သို့ ဆက်သွယ်ပါ။"
                  />
                </p>
              </div>
              <div className="mt-4 flex flex-wrap gap-4">
                <Link href="/terms-of-service" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Terms of Service" mm="ဝန်ဆောင်မှုစည်းကမ်းချက်များ" />
                </Link>
                <Link href="/privacy-policy" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Privacy Policy" mm="ကိုယ်ရေးအချက်အလက်မူဝါဒ" />
                </Link>
                <Link href="/contact" className="text-[#00FFFF] text-sm hover:underline">
                  <LocalizedText en="Contact Support" mm="အထောက်အပံ့ကို ဆက်သွယ်ရန်" />
                </Link>
              </div>
            </div>
          </div>
        </AnimatedSection>
      </main>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/faq-schema.tsx" isMerged="true"
import StructuredData from "./structured-data"

interface FAQItem {
  question: string
  answer: string
}

interface FAQSchemaProps {
  faqs: FAQItem[]
}

export default function FAQSchema({ faqs }: FAQSchemaProps) {
  const faqData = {
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  }

return <StructuredData type="FAQPage" data={faqData} />
}
[V0_FILE]typescriptreact:file="components/feature-section.tsx" isMerged="true"
"use client"

import { motion, useInView } from "framer-motion"
import { Smartphone, Zap, Shield, Globe, RefreshCw, Wifi } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"
import { useRef } from "react"

export default function FeatureSection() {
  const { t } = useLanguage()
  const sectionRef = useRef(null)
  const isInView = useInView(sectionRef, { once: true, margin: "-100px 0px" })

const features = [
    {
      icon: <Smartphone className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား"),
      description: t(
        "Store and switch between multiple carrier profiles on a single device.",
        "စက်တစ်ခုတည်းတွင် ဝန်ဆောင်မှုပေးသူ ပရိုဖိုင်အများအပြားကို သိမ်းဆည်းပြီး ပြောင်းလဲအသုံးပြုနိုင်သည်။",
      ),
    },
    {
      icon: <Zap className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်"),
      description: t(
        "Activate your mobile plan instantly by scanning a QR code.",
        "QR ကုဒ်ကို စကင်ဖတ်ခြင်းဖြင့် သင့်မိုဘိုင်းအစီအစဉ်ကို ချက်ချင်းအသုံးပြုနိုင်သည်။",
      ),
    },
    {
      icon: <Shield className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်"),
      description: t(
        "eSIMs cannot be physically removed or stolen, providing better security.",
        "eSIM များကို ရုပ်ပိုင်းဆိုင်ရာအရ ဖယ်ရှားခြင်း သို့မဟုတ် ခိုးယူခြင်း မပြုလုပ်နိုင်သဖြင့် ပိုမိုလုံခြုံမှုရှိသည်။",
      ),
    },
    {
      icon: <Globe className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Global Compatibility", "ကမ္ဘာလုံးဆိုင်ရာ သဟဇာတဖြစ်မှု"),
      description: t(
        "Use your eSIM with carriers worldwide for seamless international connectivity.",
        "ချောမွေ့သော နိုင်ငံတကာ ချိတ်ဆက်မှုအတွက် သင့် eSIM ကို ကမ္ဘာတစ်ဝှမ်းရှိ ဝန်ဆောင်မှုပေးသူများနှင့် အသုံးပြုပါ။",
      ),
    },
    {
      icon: <RefreshCw className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Easy Switching", "လွယ်ကူစွာ ပြောင်းလဲနိုင်"),
      description: t(
        "Switch between different mobile plans without changing physical SIM cards.",
        "ရုပ်ပိုင်းဆိုင်ရာ SIM ကဒ်များ ပြောင်းလဲစရာမလိုဘဲ မတူညီသော မိုဘိုင်းအစီအစဉ်များကြား ပြောင်းလဲနိုင်သည်။",
      ),
    },
    {
      icon: <Wifi className="h-8 w-8 text-[#00FFFF]" />,
      title: t("Remote Provisioning", "အဝေးမှ ပေးအပ်ခြင်း"),
      description: t(
        "Update your mobile plan remotely without visiting a physical store.",
        "ရုပ်ပိုင်းဆိုင်ရာ ဆိုင်သို့ သွားရောက်စရာမလိုဘဲ သင့်မိုဘိုင်းအစီအစဉ်ကို အဝေးမှ အပ်ဒိတ်လုပ်နိုင်သည်။",
      ),
    },
  ]

return (
    <section ref={sectionRef} className="py-24 bg-gradient-to-b from-[#162430] to-[#1E2F3C] relative overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-[#1E2F3C] opacity-50"></div>

{/* Animated grid pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 grid grid-cols-12 gap-4">
            {Array.from({ length: 12 }).map((_, colIndex) => (
              <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
            ))}
          </div>
          <div className="absolute inset-0 grid grid-rows-12 gap-4">
            {Array.from({ length: 12 }).map((_, rowIndex) => (
              <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
            ))}
          </div>
        </div>

{/* Decorative elements */}
        <motion.div
          className="absolute top-20 right-20 w-64 h-64 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            x: [0, 30, 0],
            y: [0, -20, 0],
          }}
          transition={{ duration: 15, repeat: Number.POSITIVE_INFINITY }}
        />
      </div>

<h2 className="text-3xl md:text-5xl font-bold mb-6">
            <LocalizedText
              en={
                <>
                  Why Choose <span className="text-[#00FFFF]">eSIM</span> Technology?
                </>
              }
              mm={
                <>
                  ဘာကြောင့် <span className="text-[#00FFFF]">eSIM</span> နည်းပညာကို ရွေးချယ်သင့်သလဲ?
                </>
              }
            />
          </h2>
          <p className="text-xl text-[#B0BEC5] max-w-2xl mx-auto">
            <LocalizedText
              en="eSIM technology offers numerous advantages over traditional physical SIM cards."
              mm="eSIM နည်းပညာသည် ရိုးရိုး physical SIM ကဒ်များထက် အားသာချက်များစွာ ပေးစွမ်းပါသည်။"
            />
          </p>
        </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ y: -10, scale: 1.02 }}
              className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] rounded-2xl overflow-hidden shadow-lg group relative"
            >
              {/* Card content */}
              <div className="p-8 relative z-10">
                <div className="w-16 h-16 rounded-2xl bg-[#1E2F3C] flex items-center justify-center mb-6 group-hover:bg-[#00FFFF]/10 transition-colors duration-300 relative">
                  {feature.icon}

{/* Animated pulse */}
                  <motion.div
                    className="absolute inset-0 rounded-2xl border border-[#00FFFF]/30 opacity-0 group-hover:opacity-100"
                    animate={{ scale: [1, 1.2, 1], opacity: [0, 0.5, 0] }}
                    transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                  />
                </div>
                <h3 className="text-xl font-bold mb-3 group-hover:text-[#00FFFF] transition-colors duration-300">
                  {feature.title}
                </h3>
                <p className="text-[#B0BEC5]">{feature.description}</p>
              </div>

{/* Bottom glow effect */}
              <div className="h-2 w-full bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

{/* Background pattern */}
              <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-300">
                <div className="absolute inset-0 grid grid-cols-4 gap-2">
                  {Array.from({ length: 4 }).map((_, colIndex) => (
                    <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
                  ))}
                </div>
                <div className="absolute inset-0 grid grid-rows-4 gap-2">
                  {Array.from({ length: 4 }).map((_, rowIndex) => (
                    <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/file-uploader.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { uploadToBlob } from "@/lib/vercel-blob"
import { Upload, Check, X, Loader2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"

interface FileUploaderProps {
  onUploadComplete?: (url: string) => void
  acceptedFileTypes?: string
  maxSizeMB?: number
}

export default function FileUploader({
  onUploadComplete,
  acceptedFileTypes = "image/*",
  maxSizeMB = 5,
}: FileUploaderProps) {
  const [file, setFile] = useState<File | null>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [uploadStatus, setUploadStatus] = useState<"idle" | "success" | "error">("idle")
  const [errorMessage, setErrorMessage] = useState("")
  const { t } = useLanguage()

const maxSizeBytes = maxSizeMB * 1024 * 1024

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0]
    if (!selectedFile) return

// Validate file size
    if (selectedFile.size > maxSizeBytes) {
      setErrorMessage(
        t(
          `File size exceeds the maximum limit of ${maxSizeMB}MB`,
          `ဖိုင်အရွယ်အစားသည် အများဆုံး ကန့်သတ်ချက် ${maxSizeMB}MB ထက် ကျော်လွန်နေပါသည်`,
        ),
      )
      setUploadStatus("error")
      return
    }

setFile(selectedFile)
    setUploadStatus("idle")
    setErrorMessage("")
  }

const handleUpload = async () => {
    if (!file) return

setIsUploading(true)
    setUploadStatus("idle")

try {
      const result = await uploadToBlob(file)

if (result.success && result.url) {
        setUploadStatus("success")
        if (onUploadComplete) {
          onUploadComplete(result.url)
        }
      } else {
        setUploadStatus("error")
        setErrorMessage(t("Failed to upload file. Please try again.", "ဖိုင်တင်ရန် မအောင်မြင်ပါ။ ထပ်မံကြိုးစားပါ။"))
      }
    } catch (error) {
      setUploadStatus("error")
      setErrorMessage(
        t("An error occurred during upload. Please try again.", "အပ်လုဒ်လုပ်နေစဉ် အမှားတစ်ခု ဖြစ်ပွားခဲ့သည်။ ထပ်မံကြိုးစားပါ။"),
      )
    } finally {
      setIsUploading(false)
    }
  }

return (
    <div className="w-full">
      <div className="bg-[#1E2F3C] border border-[#00FFFF]/20 rounded-lg p-4">
        <div className="flex flex-col items-center justify-center gap-4">
          <label htmlFor="file-upload" className="w-full cursor-pointer">
            <div className="border-2 border-dashed border-[#00FFFF]/30 rounded-lg p-6 flex flex-col items-center justify-center hover:border-[#00FFFF]/60 transition-colors">
              <Upload className="h-10 w-10 text-[#00FFFF]/70 mb-2" />
              <p className="text-center text-[#B0BEC5]">
                <LocalizedText
                  en={`Drag & drop or click to select a file (Max: ${maxSizeMB}MB)`}
                  mm={`ဖိုင်တစ်ခုကို ဆွဲချပြီး ချထားပါ သို့မဟုတ် ရွေးချယ်ရန် နှိပ်ပါ (အများဆုံး: ${maxSizeMB}MB)`}
                />
              </p>
              <input
                id="file-upload"
                type="file"
                className="hidden"
                accept={acceptedFileTypes}
                onChange={handleFileChange}
              />
            </div>
          </label>

{file && (
            <div className="w-full bg-[#263A49] rounded-lg p-3 flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-3">
                  <Upload className="h-5 w-5 text-[#00FFFF]" />
                </div>
                <div className="truncate">
                  <p className="font-medium truncate">{file.name}</p>
                  <p className="text-sm text-[#B0BEC5]">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
                </div>
              </div>

<Button
                onClick={handleUpload}
                disabled={isUploading}
                className="bg-[#00FFFF] text-[#1E2F3C] hover:bg-[#00CCCC]"
              >
                {isUploading ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    <LocalizedText en="Uploading..." mm="အပ်လုဒ်လုပ်နေသည်..." />
                  </>
                ) : uploadStatus === "success" ? (
                  <>
                    <Check className="h-4 w-4 mr-2" />
                    <LocalizedText en="Uploaded" mm="အပ်လုဒ်လုပ်ပြီး" />
                  </>
                ) : (
                  <>
                    <Upload className="h-4 w-4 mr-2" />
                    <LocalizedText en="Upload" mm="အပ်လုဒ်လုပ်ရန်" />
                  </>
                )}
              </Button>
            </div>
          )}

{uploadStatus === "error" && (
            <div className="w-full bg-red-900/20 border border-red-500/30 rounded-lg p-3 flex items-center">
              <X className="h-5 w-5 text-red-500 mr-2" />
              <p className="text-red-400 text-sm">{errorMessage}</p>
            </div>
          )}

{uploadStatus === "success" && (
            <div className="w-full bg-green-900/20 border border-green-500/30 rounded-lg p-3 flex items-center">
              <Check className="h-5 w-5 text-green-500 mr-2" />
              <p className="text-green-400 text-sm">
                <LocalizedText en="File uploaded successfully!" mm="ဖိုင်ကို အောင်မြင်စွာ အပ်လုဒ်လုပ်ပြီးပါပြီ!" />
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import Link from "next/link"
import {
  Facebook,
  Twitter,
  Instagram,
  Smartphone,
  Mail,
  ExternalLink,
  ChevronRight,
  Droplets,
  Globe,
} from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"
import { useRef } from "react"
import { useInView } from "framer-motion"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"

export default function Footer() {
  const currentYear = new Date().getFullYear()
  const { t } = useLanguage()
  const footerRef = useRef(null)
  const isInView = useInView(footerRef, { once: true, margin: "-100px 0px" })
  const { isThingyanTheme } = useThingyanTheme()

const renderThingyanEffects = () => {
    if (!isThingyanTheme) return null

return (
      <>
        {/* Water ripples at the bottom */}
        {Array.from({ length: 5 }).map((_, i) => (
          <motion.div
            key={`footer-ripple-${i}`}
            className="absolute rounded-full border border-[#00FFFF]/20"
            style={{
              width: "150px",
              height: "150px",
              left: `${Math.random() * 100}%`,
              bottom: `${Math.random() * 20}%`,
              opacity: 0,
            }}
            animate={{
              scale: [0, 3],
              opacity: [0.3, 0],
            }}
            transition={{
              duration: 4 + Math.random() * 3,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 10,
              ease: "easeOut",
            }}
          />
        ))}

{/* Floating flowers */}
        {Array.from({ length: 3 }).map((_, i) => (
          <motion.div
            key={`footer-flower-${i}`}
            className="absolute"
            style={{
              left: `${20 + i * 30}%`,
              bottom: `-20px`,
            }}
            animate={{
              y: [0, -100],
              rotate: [0, 360],
              x: [0, Math.random() > 0.5 ? 50 : -50],
            }}
            transition={{
              duration: 15 + Math.random() * 10,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 5,
              ease: "linear",
            }}
          >
            <div className="w-3 h-3 relative">
              {[0, 72, 144, 216, 288].map((angle) => (
                <div
                  key={angle}
                  className="absolute w-1.5 h-1.5 bg-[#00FFFF]/70 rounded-full"
                  style={{
                    transform: `rotate(${angle}deg) translate(1.5px, 0)`,
                    transformOrigin: "center",
                  }}
                />
              ))}
              <div className="absolute w-1.5 h-1.5 bg-white/70 rounded-full left-0.75 top-0.75" />
            </div>
          </motion.div>
        ))}
      </>
    )
  }

return (
    <footer ref={footerRef} className="mt-20 border-t border-[#00FFFF]/20 bg-[#162430] relative overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 pointer-events-none">
        {renderThingyanEffects()}
        <motion.div
          className="absolute -top-40 -right-40 w-80 h-80 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            rotate: [0, 45, 0],
          }}
          transition={{ duration: 20, repeat: Number.POSITIVE_INFINITY }}
        />
        <motion.div
          className="absolute -left-20 -bottom-20 w-60 h-60 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.3, 1],
            rotate: [0, -45, 0],
          }}
          transition={{ duration: 15, repeat: Number.POSITIVE_INFINITY }}
        />
      </div>

<div className="container mx-auto px-4 py-12 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.5 }}
          >
            <motion.div
              className="text-2xl font-bold"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 400, damping: 10 }}
            >
              <span className="text-[#00FFFF] mr-1">e</span>
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
              <span className="ml-1 text-[#00FFFF]">Myanmar</span>
            </motion.div>
            <p className="text-[#B0BEC5] text-sm">
              <LocalizedText
                en="Bringing the future of mobile connectivity to Myanmar with digital SIM technology."
                mm="ဒီဂျစ်တယ် SIM နည်းပညာဖြင့် မြန်မာနိုင်ငံသို့ မိုဘိုင်းချိတ်ဆက်မှု၏ အနာဂတ်ကို ယူဆောင်လာခြင်း။"
              />
            </p>
            <div className="flex space-x-4">
              {[
                { icon: Facebook, label: "Facebook", url: "https://facebook.com/eSIMMyanmar" },
                { icon: Instagram, label: "Instagram", url: "https://instagram.com/eSIMMyanmar" },
                { icon: Twitter, label: "Twitter", url: "https://twitter.com/eSIMMyanmar" },
              ].map(({ icon: Icon, label, url }, index) => (
                <motion.a
                  key={index}
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-10 h-10 rounded-full bg-[#263A49] flex items-center justify-center text-[#00FFFF] hover:bg-[#00FFFF] hover:text-[#1E2F3C] transition-colors relative group overflow-hidden"
                  whileHover={{ y: -5 }}
                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
                  aria-label={label}
                >
                  <Icon size={20} className="relative z-10" />
                  <motion.div
                    className="absolute inset-0 bg-[#00FFFF] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    initial={{ scale: 0, opacity: 0 }}
                    whileHover={{ scale: 1, opacity: 1 }}
                    transition={{ duration: 0.3 }}
                  />
                </motion.a>
              ))}
            </div>
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <h3 className="font-semibold text-lg mb-4 flex items-center">
              <span className="w-1.5 h-1.5 rounded-full bg-[#00FFFF] mr-2"></span>
              <LocalizedText en="Quick Links" mm="အမြန်လင့်ခ်များ" />
            </h3>
            <ul className="space-y-2">
              {[
                { en: "Home", mm: "ပင်မစာမျက်နှာ", path: "/" },
                { en: "About", mm: "အကြောင်း", path: "/about" },
                { en: "Compatibility", mm: "သဟဇာတဖြစ်မှု", path: "/compatibility" },
                { en: "How it Works", mm: "မည်သို့အလုပ်လုပ်သည်", path: "/how-it-works" },
                { en: "FAQ", mm: "မေးလေ့ရှိသောမေးခွန်းများ", path: "/faq" },
                { en: "Contact", mm: "ဆက်သွယ်ရန်", path: "/contact" },
              ].map((item, index) => (
                <motion.li
                  key={index}
                  whileHover={{ x: 5 }}
                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
                >
                  <Link
                    href={item.path}
                    className="text-[#B0BEC5] hover:text-[#00FFFF] transition-colors flex items-center group"
                  >
                    <ChevronRight className="h-4 w-4 mr-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 -translate-x-2 group-hover:translate-x-0 transition-transform duration-200" />
                    <LocalizedText en={item.en} mm={item.mm} />
                  </Link>
                </motion.li>
              ))}
            </ul>
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <h3 className="font-semibold text-lg mb-4 flex items-center">
              <span className="w-1.5 h-1.5 rounded-full bg-[#00FFFF] mr-2"></span>
              <LocalizedText en="Supported Carriers" mm="ထောက်ပံ့သော ဝန်ဆောင်မှုပေးသူများ" />
            </h3>
            <ul className="space-y-2">
              {["MPT", "ATOM", "Ooredoo", "Mytel"].map((carrier, index) => (
                <motion.li
                  key={index}
                  whileHover={{ x: 5 }}
                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
                >
                  <Link
                    href="#"
                    className="text-[#B0BEC5] hover:text-[#00FFFF] transition-colors flex items-center group"
                  >
                    <ExternalLink className="h-3 w-3 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
                    {carrier}
                  </Link>
                </motion.li>
              ))}
            </ul>
          </motion.div>

<motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <h3 className="font-semibold text-lg mb-4 flex items-center">
              <span className="w-1.5 h-1.5 rounded-full bg-[#00FFFF] mr-2"></span>
              <LocalizedText en="Contact Us" mm="ဆက်သွယ်ရန်" />
            </h3>
            <ul className="space-y-4">
              {[
                { icon: Smartphone, text: "09650000172", label: t("Phone", "ဖုန်း"), href: "tel:+959650000172" },
                { icon: Mail, text: "info@esim.com.mm", label: t("Email", "အီးမေးလ်"), href: "mailto:info@esim.com.mm" },
                { icon: Globe, text: "esim.com.mm", label: t("Website", "ဝဘ်ဆိုဒ်"), href: "https://esim.com.mm" },
              ].map((item, index) => (
                <li key={index} className="flex items-start group">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-8 h-8 rounded-full bg-[#00FFFF]/10 flex items-center justify-center group-hover:bg-[#00FFFF]/20 transition-colors duration-300">
                      <item.icon className="h-4 w-4 text-[#00FFFF]" />
                    </div>
                  </div>
                  <div className="ml-3">
                    <h3 className="font-medium text-white text-sm">{item.label}</h3>
                    <a href={item.href} className="text-[#B0BEC5] text-sm hover:text-[#00FFFF] transition-colors">
                      {item.text}
                    </a>
                  </div>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>

<motion.div
          className="mt-12 pt-6 border-t border-[#00FFFF]/10 flex flex-col md:flex-row justify-between items-center"
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          <p className="text-[#B0BEC5] text-sm">
            <LocalizedText
              en={`© ${currentYear} eSIM Myanmar. All rights reserved.`}
              mm={`© ${currentYear} eSIM Myanmar. မူပိုင်ခွင့်အားလုံး လက်ဝယ်ထားရှိသည်။`}
            />
          </p>
          <div className="mt-4 md:mt-0 flex space-x-6">
            <Link href="/privacy-policy" className="text-[#B0BEC5] text-sm hover:text-[#00FFFF] transition-colors">
              <LocalizedText en="Privacy Policy" mm="ကိုယ်ရေးအချက်အလက်မူဝါဒ" />
            </Link>
            <Link href="/terms-of-service" className="text-[#B0BEC5] text-sm hover:text-[#00FFFF] transition-colors">
              <LocalizedText en="Terms of Service" mm="ဝန်ဆောင်မှုစည်းကမ်းချက်များ" />
            </Link>
            {isThingyanTheme && (
              <motion.div
                className="text-[#00FFFF] text-sm flex items-center"
                animate={{ y: [0, -3, 0] }}
                transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
              >
                <Droplets className="h-3 w-3 mr-1" />
                <LocalizedText en="Happy Thingyan" mm="သင်္ကြန်မင်္ဂလာပါ" />
              </motion.div>
            )}
          </div>
        </motion.div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/header-wrapper.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Header from "@/components/header"

export default function HeaderWrapper() {
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return <div className="h-20"></div> // Placeholder with same height as header
  }

return <Header />
}
[V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Link from "next/link"
import { usePathname } from "next/navigation"
import LanguageToggle from "@/components/language-toggle"
import ThemeToggle from "@/components/theme-toggle"
import { Menu, X, ChevronDown, Globe, Droplets } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"
import BuyEsimButton from "@/components/buy-esim-button"

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const pathname = usePathname()
  const { t, language } = useLanguage()
  const { isThingyanTheme } = useThingyanTheme()

// isMobileMenuOpen state ၏ အောက်တွင် ထည့်သွင်းရန်
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const navLinks = [
    { href: "/", label: t("Home", "ပင်မစာမျက်နှာ") },
    { href: "/about", label: t("About", "အကြောင်း") },
    { href: "/compatibility", label: t("Compatibility", "သဟဇာတဖြစ်မှု") },
    { href: "/how-it-works", label: t("How it Works", "မည်သို့အလုပ်လုပ်သည်") },
    { href: "/faq", label: t("FAQ", "မေးလေ့ရှိသောမေးခွန်းများ") },
    { href: "/contact", label: t("Contact", "ဆက်သွယ်ရန်") },
  ]

const legalLinks = [
    { href: "/privacy-policy", label: t("Privacy Policy", "ကိုယ်ရေးအချက်အလက်မူဝါဒ") },
    { href: "/terms-of-service", label: t("Terms of Service", "ဝန်ဆောင်မှုစည်းကမ်းချက်များ") },
  ]

return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        isScrolled ? "bg-[#1E2F3C]/90 backdrop-blur-md shadow-lg py-2" : "bg-transparent py-4"
      }`}
    >
      {isThingyanTheme && (
        <div className="bg-[#1E2F3C] border-b border-[#00FFFF]/20 text-white text-center py-1 px-4 text-sm relative overflow-hidden">
          <div className="absolute inset-0 pointer-events-none">
            {/* Animated water droplets in the banner */}
            {Array.from({ length: 10 }).map((_, i) => (
              <motion.div
                key={`banner-droplet-${i}`}
                className="absolute w-1 h-1 rounded-full bg-[#00FFFF]/40"
                style={{
                  left: `${Math.random() * 100}%`,
                  top: `-5px`,
                }}
                animate={{
                  y: [0, 30],
                  opacity: [0.7, 0],
                }}
                transition={{
                  duration: 1 + Math.random(),
                  repeat: Number.POSITIVE_INFINITY,
                  delay: Math.random() * 5,
                  ease: "easeIn",
                }}
              />
            ))}
          </div>
          <motion.div
            className="flex items-center justify-center gap-2"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
          >
            <Droplets size={16} className="text-[#00FFFF]" />
            {language === "en"
              ? "Happy Thingyan Water Festival! Special eSIM offers available now"
              : "သင်္ကြန်ပွဲတော် မင်္ဂလာပါ! အထူး eSIM ကမ်းလှမ်းမှုများ ယခုရရှိနိုင်ပါပြီ"}
            <Droplets size={16} className="text-[#00FFFF]" />
          </motion.div>
        </div>
      )}

<div className="container mx-auto px-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="relative z-10 group">
            <motion.div
              className="text-2xl font-bold flex items-center"
              whileHover={{ scale: 1.05 }}
              transition={{ type: "spring", stiffness: 400, damping: 10 }}
            >
              <span className="text-[#00FFFF] mr-1 group-hover:animate-pulse">e</span>
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
              <span className="ml-1 text-[#00FFFF] group-hover:animate-pulse">Myanmar</span>
              {isThingyanTheme && (
                <motion.span
                  className="ml-2 text-sm bg-[#00FFFF]/20 text-[#00FFFF] px-2 py-0.5 rounded-full border border-[#00FFFF]/30"
                  animate={{ y: [0, -3, 0] }}
                  transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                >
                  {language === "en" ? "Thingyan" : "သင်္ကြန်"}
                </motion.span>
              )}
            </motion.div>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-1">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`relative px-4 py-2 rounded-md transition-colors ${
                  pathname === link.href ? "text-[#00FFFF]" : "text-white hover:text-[#00FFFF]"
                }`}
              >
                {pathname === link.href && (
                  <motion.span
                    layoutId="activeNavIndicator"
                    className="absolute inset-0 rounded-md bg-[#00FFFF]/10"
                    transition={{ type: "spring", stiffness: 300, damping: 30 }}
                  />
                )}
                <span className="relative z-10">{link.label}</span>
                {isThingyanTheme && pathname === link.href && (
                  <motion.span
                    className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-[#00FFFF] rounded-full"
                    animate={{
                      scale: [1, 1.5, 1],
                      opacity: [0.5, 1, 0.5],
                    }}
                    transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                  />
                )}
              </Link>
            ))}

{/* Legal dropdown */}
            <div className="relative">
              <button
                className="flex items-center px-4 py-2 rounded-md text-white hover:text-[#00FFFF] transition-colors"
                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                onMouseEnter={() => setIsDropdownOpen(true)}
                onMouseLeave={() => setIsDropdownOpen(false)}
              >
                <LocalizedText en="Legal" mm="ဥပဒေရေးရာ" />
                <ChevronDown
                  className={`ml-1 h-4 w-4 transition-transform duration-300 ${isDropdownOpen ? "rotate-180" : ""}`}
                />
              </button>

<AnimatePresence>
                {isDropdownOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
                    transition={{ duration: 0.2 }}
                    className="absolute top-full right-0 mt-1 bg-[#1E2F3C]/90 backdrop-blur-md border border-[#00FFFF]/20 rounded-md shadow-lg overflow-hidden z-50"
                    onMouseEnter={() => setIsDropdownOpen(true)}
                    onMouseLeave={() => setIsDropdownOpen(false)}
                  >
                    <div className="py-1">
                      {legalLinks.map((link) => (
                        <Link
                          key={link.href}
                          href={link.href}
                          className="block px-4 py-2 text-sm text-white hover:bg-[#00FFFF]/10 hover:text-[#00FFFF] whitespace-nowrap transition-colors duration-200"
                        >
                          {link.label}
                        </Link>
                      ))}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

{/* Mobile Menu Button */}
          <div className="flex items-center md:hidden">
            <BuyEsimButton variant="icon" className="mr-2" />
            <LanguageToggle />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="ml-2 text-white hover:bg-[#00FFFF]/10 transition-colors duration-200"
              aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
            >
              <AnimatePresence mode="wait">
                {isMobileMenuOpen ? (
                  <motion.div
                    key="close"
                    initial={{ rotate: -90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: 90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <X size={24} />
                  </motion.div>
                ) : (
                  <motion.div
                    key="menu"
                    initial={{ rotate: 90, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    exit={{ rotate: -90, opacity: 0 }}
                    transition={{ duration: 0.2 }}
                  >
                    <Menu size={24} />
                  </motion.div>
                )}
              </AnimatePresence>
            </Button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden bg-[#1E2F3C]/95 backdrop-blur-md border-t border-[#00FFFF]/20"
          >
            <nav className="container mx-auto px-4 py-4 flex flex-col space-y-2">
              {navLinks.map((link, index) => (
                <motion.div
                  key={link.href}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <Link
                    href={link.href}
                    className={`block py-3 px-4 rounded-md ${
                      pathname === link.href
                        ? "bg-[#00FFFF]/10 text-[#00FFFF]"
                        : "hover:bg-[#00FFFF]/5 transition-colors duration-200"
                    }`}
                    onClick={() => setIsMobileMenuOpen(false)}
                  >
                    {link.label}
                    {isThingyanTheme && pathname === link.href && (
                      <motion.span
                        className="ml-2 inline-block w-2 h-2 bg-[#00FFFF] rounded-full"
                        animate={{
                          scale: [1, 1.5, 1],
                          opacity: [0.5, 1, 0.5],
                        }}
                        transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
                      />
                    )}
                  </Link>
                </motion.div>
              ))}

{/* Legal links in mobile menu - improved with dropdown */}
              <div className="pt-2 mt-2 border-t border-[#00FFFF]/10">
                <motion.div
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: navLinks.length * 0.1 }}
                >
                  <button
                    className="flex items-center justify-between w-full px-4 py-3 rounded-md hover:bg-[#00FFFF]/5 transition-colors duration-200"
                    onClick={() => setActiveDropdown(activeDropdown === "legal" ? null : "legal")}
                  >
                    <div className="flex items-center">
                      <Globe className="h-4 w-4 mr-2 text-[#00FFFF]/70" />
                      <LocalizedText en="Legal" mm="ဥပဒေရေးရာ" />
                    </div>
                    <ChevronDown
                      className={`h-4 w-4 transition-transform duration-300 ${
                        activeDropdown === "legal" ? "rotate-180" : ""
                      }`}
                    />
                  </button>

<AnimatePresence>
                    {activeDropdown === "legal" && (
                      <motion.div
                        initial={{ opacity: 0, height: 0 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 0 }}
                        transition={{ duration: 0.2 }}
                        className="pl-8 space-y-2 mt-1 mb-2"
                      >
                        {legalLinks.map((link, index) => (
                          <motion.div
                            key={link.href}
                            initial={{ opacity: 0, x: -10 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: index * 0.1 }}
                          >
                            <Link
                              href={link.href}
                              className="block py-2 px-4 rounded-md text-sm hover:bg-[#00FFFF]/5 transition-colors duration-200"
                              onClick={() => setIsMobileMenuOpen(false)}
                            >
                              {link.label}
                            </Link>
                          </motion.div>
                        ))}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>
              </div>

<div className="pt-2 mt-2 border-t border-[#00FFFF]/10">
                <BuyEsimButton className="w-full" />
              </div>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ArrowRight, Smartphone, Zap } from "lucide-react"
import Link from "next/link"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"

export default function HeroSection() {
  const { t } = useLanguage()

// Animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3,
      },
    },
  }

const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
  }

return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background elements */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-[#1E2F3C] opacity-90"></div>
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#1E2F3C]"></div>

{/* Animated grid pattern */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0 grid grid-cols-12 gap-4">
            {Array.from({ length: 12 }).map((_, colIndex) => (
              <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
            ))}
          </div>
          <div className="absolute inset-0 grid grid-rows-12 gap-4">
            {Array.from({ length: 12 }).map((_, rowIndex) => (
              <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
            ))}
          </div>
        </div>

{/* Animated background circles */}
        <motion.div
          className="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.2, 1],
            x: [0, -30, 0],
            y: [0, 20, 0],
          }}
          transition={{ duration: 15, repeat: Number.POSITIVE_INFINITY }}
        />
        <motion.div
          className="absolute bottom-1/3 right-1/4 w-80 h-80 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={{
            scale: [1, 1.3, 1],
            x: [0, 40, 0],
            y: [0, -30, 0],
          }}
          transition={{ duration: 18, repeat: Number.POSITIVE_INFINITY }}
        />

{/* Floating particles */}
        {Array.from({ length: 20 }).map((_, i) => (
          <motion.div
            key={i}
            className="absolute w-1 h-1 rounded-full bg-[#00FFFF]/40"
            style={{
              top: `${Math.random() * 100}%`,
              left: `${Math.random() * 100}%`,
            }}
            animate={{
              y: [0, -15, 0],
              opacity: [0, 1, 0],
            }}
            transition={{
              duration: 3 + Math.random() * 5,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 5,
            }}
          />
        ))}
      </div>

<div className="container mx-auto px-4 z-10 flex flex-col md:flex-row items-center justify-between gap-12">
        <motion.div className="max-w-2xl" variants={containerVariants} initial="hidden" animate="visible">
          <motion.div variants={itemVariants}>
            <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
              <LocalizedText
                en={
                  <>
                    The Future of{" "}
                    <span className="text-[#00FFFF] relative inline-block">
                      Mobile Connectivity
                      <motion.span
                        className="absolute bottom-1 left-0 w-full h-1 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/80 to-[#00FFFF]/0"
                        initial={{ width: 0, left: "50%" }}
                        animate={{ width: "100%", left: 0 }}
                        transition={{ delay: 1, duration: 1.5 }}
                      />
                    </span>
                  </>
                }
                mm={
                  <>
                    မိုဘိုင်းချိတ်ဆက်မှု၏{" "}
                    <span className="text-[#00FFFF] relative inline-block">
                      အနာဂတ်
                      <motion.span
                        className="absolute bottom-1 left-0 w-full h-1 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/80 to-[#00FFFF]/0"
                        initial={{ width: 0, left: "50%" }}
                        animate={{ width: "100%", left: 0 }}
                        transition={{ delay: 1, duration: 1.5 }}
                      />
                    </span>
                  </>
                }
              />
            </h1>
          </motion.div>

<motion.p variants={itemVariants} className="text-xl md:text-2xl text-[#B0BEC5] mb-10 leading-relaxed">
            <LocalizedText
              en="Experience the convenience of digital SIM technology in Myanmar with instant activation and seamless connectivity."
              mm="မြန်မာနိုင်ငံတွင် ချက်ချင်းအသုံးပြုနိုင်သော digital SIM နည်းပညာ၏ အဆင်ပြေလွယ်ကူမှုကို ခံစားပါ။"
            />
          </motion.p>

<motion.div variants={itemVariants} className="flex flex-col sm:flex-row items-center gap-4">
            <Link href="/compatibility" className="w-full sm:w-auto">
              <Button className="bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 px-8 py-7 text-lg rounded-lg shadow-lg shadow-[#00FFFF]/20 w-full sm:w-auto group relative overflow-hidden">
                <span className="relative z-10 flex items-center">
                  <LocalizedText en="Check Compatibility" mm="သဟဇာတဖြစ်မှုစစ်ဆေးရန်" />
                  <motion.div
                    className="ml-2"
                    animate={{ x: [0, 5, 0] }}
                    transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
                  >
                    <ArrowRight className="h-5 w-5" />
                  </motion.div>
                </span>
                <motion.div
                  className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                  initial={{ x: "-100%" }}
                  animate={{ x: "200%" }}
                  transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                />
              </Button>
            </Link>
            <Link href="/how-it-works" className="w-full sm:w-auto">
              <Button
                variant="outline"
                className="border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 px-8 py-7 text-lg rounded-lg w-full sm:w-auto group transition-all duration-300"
              >
                <span className="flex items-center">
                  <LocalizedText en="Learn How It Works" mm="မည်သို့အလုပ်လုပ်သည်ကို လေ့လာရန်" />
                  <Zap className="ml-2 h-5 w-5 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0" />
                </span>
              </Button>
            </Link>
          </motion.div>

{/* Feature highlights */}
          <motion.div variants={itemVariants} className="mt-12 grid grid-cols-2 gap-4 max-w-md">
            {[
              { text: t("Instant Activation", "ချက်ချင်းအသုံးပြုနိုင်") },
              { text: t("Multiple Profiles", "ပရိုဖိုင်အများအပြား") },
              { text: t("Enhanced Security", "လုံခြုံမှုပိုမိုကောင်းမွန်") },
              { text: t("No Physical Card", "ရုပ်ပိုင်းဆိုင်ရာကဒ်မလို") },
            ].map((feature, index) => (
              <motion.div
                key={index}
                className="flex items-center space-x-2 text-sm text-[#B0BEC5]"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1.5 + index * 0.1 }}
              >
                <div className="w-1.5 h-1.5 rounded-full bg-[#00FFFF]"></div>
                <span>{feature.text}</span>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>

{/* 3D Phone Illustration */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8, rotateY: 45 }}
          animate={{ opacity: 1, scale: 1, rotateY: 0 }}
          transition={{ duration: 1, delay: 0.5 }}
          className="relative w-full max-w-md aspect-square hidden md:block"
        >
          <div className="absolute inset-0 flex items-center justify-center">
            <motion.div
              className="relative w-64 h-[500px] bg-gradient-to-br from-[#263A49] to-[#1E2F3C] rounded-[40px] border-8 border-[#1E2F3C] shadow-2xl overflow-hidden"
              animate={{
                rotateY: [0, 5, 0, -5, 0],
                rotateX: [0, 3, 0, -3, 0],
              }}
              transition={{
                duration: 10,
                repeat: Number.POSITIVE_INFINITY,
                ease: "easeInOut",
              }}
            >
              {/* Phone screen */}
              <div className="absolute inset-0 bg-gradient-to-br from-[#00FFFF]/5 to-[#00FFFF]/10 flex flex-col items-center justify-center p-6">
                <motion.div
                  animate={{
                    scale: [1, 1.1, 1],
                    rotate: [0, 5, 0, -5, 0],
                  }}
                  transition={{
                    duration: 5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "easeInOut",
                  }}
                >
                  <Smartphone className="w-20 h-20 text-[#00FFFF] mb-4" />
                </motion.div>
                <div className="text-center">
                  <h3 className="text-xl font-bold text-white mb-2">eSIM Myanmar</h3>
                  <p className="text-[#B0BEC5] text-sm">
                    <LocalizedText en="Digital SIM Technology" mm="ဒီဂျစ်တယ် SIM နည်းပညာ" />
                  </p>
                </div>

{/* Animated signal waves */}
                {[1, 2, 3].map((i) => (
                  <motion.div
                    key={i}
                    className="absolute w-full h-full rounded-full border border-[#00FFFF]/20"
                    style={{ scale: 0.2 * i }}
                    animate={{
                      scale: [0.2 * i, 0.8 * i],
                      opacity: [0.7, 0],
                    }}
                    transition={{
                      duration: 2,
                      repeat: Number.POSITIVE_INFINITY,
                      delay: 0.5 * i,
                    }}
                  />
                ))}

{/* Digital particles */}
                {Array.from({ length: 10 }).map((_, i) => (
                  <motion.div
                    key={i}
                    className="absolute w-1 h-1 rounded-full bg-[#00FFFF]"
                    style={{
                      top: `${Math.random() * 100}%`,
                      left: `${Math.random() * 100}%`,
                    }}
                    animate={{
                      y: [0, -20, 0],
                      opacity: [0, 1, 0],
                    }}
                    transition={{
                      duration: 2 + Math.random() * 3,
                      repeat: Number.POSITIVE_INFINITY,
                      delay: Math.random() * 2,
                    }}
                  />
                ))}
              </div>

{/* Phone notch */}
              <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-7 bg-[#1E2F3C] rounded-b-2xl" />

{/* Reflection overlay */}
              <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
            </motion.div>
          </div>
        </motion.div>
      </div>

<motion.div
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
        animate={{ y: [0, 10, 0] }}
        transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2 }}
      >
        <ArrowRight className="h-8 w-8 text-[#00FFFF] transform rotate-90" />
      </motion.div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/language-toggle.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Globe } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function LanguageToggle() {
  const { language, setLanguage } = useLanguage()

const toggleLanguage = () => {
    setLanguage(language === "en" ? "mm" : "en")
  }

return (
    <Button
      variant="outline"
      size="sm"
      onClick={toggleLanguage}
      className="relative overflow-hidden border-[#00FFFF]/30 text-[#00FFFF] hover:text-[#00FFFF] hover:bg-[#00FFFF]/10 hover:border-[#00FFFF] transition-all duration-300 rounded-full px-4 h-9 group"
      aria-label={language === "en" ? "Switch to Myanmar language" : "Switch to English language"}
    >
      <Globe className="h-4 w-4 mr-2 group-hover:animate-pulse" />
      <div className="relative w-6 h-6 overflow-hidden">
        <motion.div
          initial={false}
          animate={{ y: language === "en" ? 0 : -24 }}
          transition={{ type: "spring", stiffness: 300, damping: 20 }}
          className="absolute inset-0 flex flex-col items-center"
        >
          <span className="h-6 flex items-center font-medium">EN</span>
          <span className="h-6 flex items-center font-medium mm">MM</span>
        </motion.div>
      </div>

{/* Animated indicator dot */}
      <motion.div
        className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-[#00FFFF]"
        animate={{
          opacity: [0.5, 1, 0.5],
          scale: [1, 1.2, 1],
        }}
        transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
      />

{/* Hover effect */}
      <motion.div
        className="absolute inset-0 bg-[#00FFFF]/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        initial={{ scale: 0 }}
        whileHover={{ scale: 1 }}
        transition={{ duration: 0.3 }}
      />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/loading-screen.tsx" isMerged="true"
"use client"
import { motion, useReducedMotion } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"
import { Smartphone, Wifi, Shield, Globe } from "lucide-react"
import EnhancedLoading from "./enhanced-loading"
import { useEffect, useState } from "react"

interface LoadingScreenProps {
  onComplete?: () => void
}

export default function LoadingScreen({ onComplete }: LoadingScreenProps) {
  const { language } = useLanguage()
  const shouldReduceMotion = useReducedMotion()
  const [isVisible, setIsVisible] = useState(true)

// Handle completion with fade-out animation
  const handleComplete = () => {
    setIsVisible(false)
    setTimeout(() => {
      onComplete && onComplete()
    }, 500) // Match the exit animation duration
  }

// Preload critical resources
  useEffect(() => {
    // Preload important images
    const preloadImages = ["/logo512.png", "/og-image-esim.png"]
    preloadImages.forEach((src) => {
      const img = new Image()
      img.src = src
    })
  }, [])

// Loading stages with messages in both languages
  const stages = [
    {
      en: {
        title: "Initializing eSIM environment",
        description: "Loading digital profiles and network configurations",
      },
      mm: {
        title: "eSIM ပတ်ဝန်းကျင်ကို စတင်နေသည်",
        description: "ဒီဂျစ်တယ်ပရိုဖိုင်များနှင့် ကွန်ရက်ပြင်ဆင်မှုများကို ဖွင့်နေသည်",
      },
      icon: <Smartphone className="h-6 w-6 text-[#00FFFF]" />,
      duration: 25,
    },
    {
      en: {
        title: "Processing carrier data",
        description: "Analyzing compatibility and connection settings",
      },
      mm: {
        title: "ဝန်ဆောင်မှုပေးသူ ဒေတာကို ဆောင်ရွက်နေသည်",
        description: "သဟဇာတဖြစ်မှုနှင့် ချိတ်ဆက်မှုဆက်တင်များကို စိစစ်နေသည်",
      },
      icon: <Wifi className="h-6 w-6 text-[#00FFFF]" />,
      duration: 25,
    },
    {
      en: {
        title: "Establishing secure channels",
        description: "Setting up encrypted communication protocols",
      },
      mm: {
        title: "လုံခြုံသော လမ်းကြောင်းများ တည်ဆောက်နေသည်",
        description: "လျှို့ဝှက်စာဖြင့် ဆက်သွယ်ရေးပရိုတိုကောများ ပြင်ဆင်နေသည်",
      },
      icon: <Shield className="h-6 w-6 text-[#00FFFF]" />,
      duration: 25,
    },
    {
      en: {
        title: "Almost ready",
        description: "Preparing your eSIM experience",
      },
      mm: {
        title: "လက်စသတ်ခါနီးပြီ",
        description: "သင့် eSIM အတွေ့အကြုံကို ပြင်ဆင်နေသည်",
      },
      icon: <Globe className="h-6 w-6 text-[#00FFFF]" />,
      duration: 25,
    },
  ]

// Simplified animations for reduced motion preference
  const backgroundAnimation = shouldReduceMotion
    ? {}
    : {
        scale: [1, 1.2, 1],
        x: [0, -30, 0],
        y: [0, 20, 0],
      }

return (
    <motion.div
      className="fixed inset-0 bg-gradient-to-b from-[#0c1824] to-[#162430] flex flex-col items-center justify-center z-50"
      initial={{ opacity: 1 }}
      animate={{ opacity: isVisible ? 1 : 0 }}
      transition={{ duration: 0.5 }}
      aria-live="polite"
      aria-busy={isVisible}
    >
      {/* Background animation - optimized with fewer elements */}
      <div className="absolute inset-0 overflow-hidden">
        {/* Grid pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 grid grid-cols-6 gap-4">
            {Array.from({ length: 6 }).map((_, colIndex) => (
              <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
            ))}
          </div>
          <div className="absolute inset-0 grid grid-rows-6 gap-4">
            {Array.from({ length: 6 }).map((_, rowIndex) => (
              <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
            ))}
          </div>
        </div>

{/* Optimized background blobs - using CSS where possible */}
        <motion.div
          className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full bg-[#00FFFF]/5 blur-3xl"
          animate={backgroundAnimation}
          transition={{ duration: 15, repeat: Number.POSITIVE_INFINITY }}
          style={{ willChange: "transform" }}
        />

{/* Optimized floating particles - reduced count for better performance */}
        {!shouldReduceMotion && (
          <>
            {Array.from({ length: 15 }).map((_, i) => (
              <motion.div
                key={i}
                className="absolute w-1 h-1 rounded-full bg-[#00FFFF]/40"
                style={{
                  top: `${Math.random() * 100}%`,
                  left: `${Math.random() * 100}%`,
                  willChange: "transform, opacity",
                }}
                animate={{
                  y: [0, -15, 0],
                  x: [0, Math.random() > 0.5 ? 10 : -10, 0],
                  opacity: [0, 1, 0],
                }}
                transition={{
                  duration: 3 + Math.random() * 5,
                  repeat: Number.POSITIVE_INFINITY,
                  delay: Math.random() * 5,
                }}
              />
            ))}
          </>
        )}
      </div>

<div className="relative z-10 w-full max-w-md px-6">
        <div className="flex flex-col items-center mb-12">
          <motion.div
            className="text-4xl font-bold mb-2 flex items-center"
            initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <span className="text-[#00FFFF] mr-1">e</span>
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
            <span className="ml-1 text-[#00FFFF]">Myanmar</span>
          </motion.div>

<motion.div
            className="w-16 h-1 bg-gradient-to-r from-transparent via-[#00FFFF] to-transparent"
            initial={{ width: 0, opacity: 0 }}
            animate={{ width: "4rem", opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </div>

<EnhancedLoading
          stages={stages}
          onComplete={handleComplete}
          tipEn="Welcome to eSIM Myanmar. Please wait while we prepare your experience."
          tipMm="eSIM Myanmar မှ ကြိုဆိုပါသည်။ သင့်အတွေ့အကြုံကို ပြင်ဆင်နေစဉ် ခဏစောင့်ပါ။"
          speed={40} // Slightly faster loading for better UX
        />
      </div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/local-business-schema.tsx" isMerged="true"
import Script from "next/script"

export default function LocalBusinessSchema() {
  const businessData = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    name: "eSIM Myanmar",
    image: "https://esim.com.mm/logo512.png",
    logo: "https://esim.com.mm/logo512.png",
    "@id": "https://esim.com.mm",
    url: "https://esim.com.mm",
    telephone: "+959650000172",
    email: "info@esim.com.mm",
    priceRange: "$$",
    description:
      "Digital eSIM technology provider offering instant mobile connectivity in Myanmar with no physical SIM card needed.",
    address: {
      "@type": "PostalAddress",
      streetAddress: "Yangon",
      addressLocality: "Yangon",
      addressRegion: "Yangon",
      postalCode: "11181",
      addressCountry: "MM",
    },
    geo: {
      "@type": "GeoCoordinates",
      latitude: 16.8661,
      longitude: 96.1951,
    },
    openingHoursSpecification: [
      {
        "@type": "OpeningHoursSpecification",
        dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
        opens: "09:00",
        closes: "18:00",
      },
      {
        "@type": "OpeningHoursSpecification",
        dayOfWeek: "Saturday",
        opens: "09:00",
        closes: "13:00",
      },
    ],
    sameAs: [
      "https://facebook.com/eSIMMyanmar",
      "https://instagram.com/eSIMMyanmar",
      "https://twitter.com/eSIMMyanmar",
    ],
    hasOfferCatalog: {
      "@type": "OfferCatalog",
      name: "eSIM Plans",
      itemListElement: [
        {
          "@type": "Offer",
          itemOffered: {
            "@type": "Service",
            name: "Myanmar eSIM Data Plan",
            description: "Digital eSIM data plan for Myanmar",
          },
        },
      ],
    },
    potentialAction: {
      "@type": "OrderAction",
      target: {
        "@type": "EntryPoint",
        urlTemplate: "https://esim.com.mm/esim",
        inLanguage: "en-US",
        actionPlatform: [
          "http://schema.org/DesktopWebPlatform",
          "http://schema.org/IOSPlatform",
          "http://schema.org/AndroidPlatform",
        ],
      },
      result: {
        "@type": "Product",
        name: "Myanmar eSIM",
      },
    },
  }

return (
    <Script
      id="local-business-schema"
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(businessData) }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/organization-schema.tsx" isMerged="true"
export default function OrganizationSchema() {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Organization",
          name: "eSIM Myanmar",
          url: "https://esim.com.mm",
          logo: "https://esim.com.mm/logo512.png",
          sameAs: [
            "https://facebook.com/eSIMMyanmar",
            "https://instagram.com/eSIMMyanmar",
            "https://twitter.com/eSIMMyanmar",
          ],
          contactPoint: {
            "@type": "ContactPoint",
            telephone: "+959650000172",
            contactType: "customer service",
            email: "info@esim.com.mm",
            availableLanguage: ["English", "Burmese"],
          },
          address: {
            "@type": "PostalAddress",
            addressCountry: "Myanmar",
            addressLocality: "Yangon",
          },
        }),
      }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/product-schema.tsx" isMerged="true"
import StructuredData from "./structured-data"

interface ProductSchemaProps {
  name: string
  description: string
  image: string
  price: number
  currency: string
  sku: string
  brand: string
  availability: "InStock" | "OutOfStock" | "PreOrder"
  url: string
  category?: string
  validFrom?: string
  validThrough?: string
  priceValidUntil?: string
}

export default function ProductSchema({
  name,
  description,
  image,
  price,
  currency,
  sku,
  brand,
  availability,
  url,
  category = "Digital Goods > Mobile Services > eSIM",
  validFrom,
  validThrough,
  priceValidUntil,
}: ProductSchemaProps) {
  const currentDate = new Date().toISOString().split("T")[0]

const productData = {
    "@context": "https://schema.org/",
    "@type": "Product",
    name,
    description,
    image,
    sku,
    brand: {
      "@type": "Brand",
      name: brand,
    },
    offers: {
      "@type": "Offer",
      url,
      priceCurrency: currency,
      price,
      priceValidUntil:
        priceValidUntil || new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split("T")[0],
      availability: `https://schema.org/${availability}`,
      seller: {
        "@type": "Organization",
        name: "eSIM Myanmar",
      },
      validFrom: validFrom || currentDate,
      validThrough: validThrough,
    },
    category,
  }

return <StructuredData type="Product" data={productData} />
}
[V0_FILE]typescriptreact:file="components/seo-optimizer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { optimizeContentForSEO } from "@/app/actions/seo-optimization"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Loader2, CheckCircle, AlertCircle } from "lucide-react"

export default function SEOOptimizer() {
  const [content, setContent] = useState("")
  const [keywords, setKeywords] = useState("")
  const [isOptimizing, setIsOptimizing] = useState(false)
  const [result, setResult] = useState<any>(null)
  const [error, setError] = useState<string | null>(null)

async function handleOptimize() {
    if (!content.trim()) {
      setError("Please enter content to optimize")
      return
    }

setIsOptimizing(true)
    setError(null)

try {
      const keywordArray = keywords
        .split(",")
        .map((k) => k.trim())
        .filter((k) => k.length > 0)

const response = await optimizeContentForSEO(content, keywordArray)

if (response.success) {
        setResult(response.data)
      } else {
        setError(response.error || "Failed to optimize content")
      }
    } catch (err) {
      setError("An unexpected error occurred")
      console.error(err)
    } finally {
      setIsOptimizing(false)
    }
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>SEO Content Optimizer</CardTitle>
          <CardDescription>Enter your content and target keywords to get SEO optimization suggestions</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="content" className="block text-sm font-medium mb-2">
              Content
            </label>
            <Textarea
              id="content"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Enter the content you want to optimize..."
              className="min-h-[200px]"
            />
          </div>
          <div>
            <label htmlFor="keywords" className="block text-sm font-medium mb-2">
              Target Keywords (comma-separated)
            </label>
            <Input
              id="keywords"
              value={keywords}
              onChange={(e) => setKeywords(e.target.value)}
              placeholder="e.g., eSIM, digital SIM, Myanmar, mobile"
            />
          </div>
        </CardContent>
        <CardFooter>
          <Button onClick={handleOptimize} disabled={isOptimizing || !content.trim()} className="w-full">
            {isOptimizing ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Optimizing...
              </>
            ) : (
              "Optimize Content"
            )}
          </Button>
        </CardFooter>
      </Card>

{error && (
        <div className="bg-red-500/10 border border-red-500/50 rounded-md p-4 flex items-start">
          <AlertCircle className="h-5 w-5 text-red-500 mr-2 mt-0.5" />
          <p className="text-sm">{error}</p>
        </div>
      )}

{result && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <CheckCircle className="h-5 w-5 text-green-500 mr-2" />
              Optimization Results
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <h3 className="text-sm font-medium mb-2">Optimized Title</h3>
              <p className="p-3 bg-[#1E2F3C] rounded-md">{result.title}</p>
            </div>

<div>
              <h3 className="text-sm font-medium mb-2">Meta Description</h3>
              <p className="p-3 bg-[#1E2F3C] rounded-md">{result.description}</p>
            </div>

<div>
              <h3 className="text-sm font-medium mb-2">Suggested Keywords</h3>
              <div className="flex flex-wrap gap-2">
                {result.keywords.map((keyword: string, index: number) => (
                  <Badge key={index} variant="secondary">
                    {keyword}
                  </Badge>
                ))}
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium mb-2">Improvement Suggestions</h3>
              <ul className="space-y-2">
                {result.suggestions.map((suggestion: string, index: number) => (
                  <li key={index} className="text-sm">
                    • {suggestion}
                  </li>
                ))}
              </ul>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/skeleton-loading.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useReducedMotion } from "framer-motion"

interface SkeletonLoadingProps {
  className?: string
}

export default function SkeletonLoading({ className = "" }: SkeletonLoadingProps) {
  const shouldReduceMotion = useReducedMotion()

return (
    <div className={`w-full ${className}`}>
      <div className="space-y-4">
        {/* Header skeleton */}
        <div className="flex items-center space-x-4">
          <div className="w-12 h-12 rounded-full bg-[#1E2F3C]">
            <motion.div
              className="w-full h-full rounded-full bg-gradient-to-r from-[#1E2F3C] via-[#00FFFF]/10 to-[#1E2F3C]"
              animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
              transition={{
                duration: 1.5,
                repeat: Number.POSITIVE_INFINITY,
                ease: "linear",
              }}
              style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
            />
          </div>
          <div className="flex-1 space-y-2">
            <div className="h-4 w-3/4 rounded bg-[#1E2F3C] overflow-hidden">
              <motion.div
                className="h-full bg-gradient-to-r from-[#1E2F3C] via-[#00FFFF]/10 to-[#1E2F3C]"
                animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                transition={{
                  duration: 1.5,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "linear",
                }}
                style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
              />
            </div>
            <div className="h-3 w-1/2 rounded bg-[#1E2F3C] overflow-hidden">
              <motion.div
                className="h-full bg-gradient-to-r from-[#1E2F3C] via-[#00FFFF]/10 to-[#1E2F3C]"
                animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                transition={{
                  duration: 1.5,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "linear",
                  delay: 0.2,
                }}
                style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
              />
            </div>
          </div>
        </div>

{/* Content skeleton */}
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-4 rounded bg-[#1E2F3C] overflow-hidden">
              <motion.div
                className="h-full bg-gradient-to-r from-[#1E2F3C] via-[#00FFFF]/10 to-[#1E2F3C]"
                animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                transition={{
                  duration: 1.5,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "linear",
                  delay: i * 0.1,
                }}
                style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
              />
            </div>
          ))}
        </div>

{/* Card skeleton */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
          {[1, 2].map((i) => (
            <div key={i} className="rounded-lg bg-[#1E2F3C] p-4 space-y-3">
              <div className="h-4 w-3/4 rounded bg-[#263A49] overflow-hidden">
                <motion.div
                  className="h-full bg-gradient-to-r from-[#263A49] via-[#00FFFF]/10 to-[#263A49]"
                  animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                  transition={{
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "linear",
                    delay: i * 0.2,
                  }}
                  style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
                />
              </div>
              <div className="h-3 w-1/2 rounded bg-[#263A49] overflow-hidden">
                <motion.div
                  className="h-full bg-gradient-to-r from-[#263A49] via-[#00FFFF]/10 to-[#263A49]"
                  animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                  transition={{
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "linear",
                    delay: i * 0.2 + 0.1,
                  }}
                  style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
                />
              </div>
              <div className="h-20 rounded bg-[#263A49] overflow-hidden">
                <motion.div
                  className="h-full bg-gradient-to-r from-[#263A49] via-[#00FFFF]/10 to-[#263A49]"
                  animate={shouldReduceMotion ? { opacity: [0.5, 0.7, 0.5] } : { x: ["-100%", "100%"] }}
                  transition={{
                    duration: 1.5,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "linear",
                    delay: i * 0.2 + 0.2,
                  }}
                  style={{ willChange: shouldReduceMotion ? "opacity" : "transform" }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/step-card.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import type { ReactNode } from "react"

interface StepCardProps {
  number: number
  title: string
  description: string
  icon: ReactNode
  delay?: number
}

export default function StepCard({ number, title, description, icon, delay = 0 }: StepCardProps) {
  return (
    <motion.div
      className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] p-8 rounded-xl border border-[#00FFFF]/10 shadow-lg flex flex-col items-center text-center"
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      whileHover={{
        y: -10,
        boxShadow: "0 20px 25px -5px rgba(0, 255, 255, 0.1), 0 10px 10px -5px rgba(0, 255, 255, 0.04)",
        borderColor: "rgba(0, 255, 255, 0.3)",
      }}
    >
      <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#00FFFF]/20 to-[#00FFFF]/5 flex items-center justify-center mb-6 border border-[#00FFFF]/30">
        <span className="text-2xl font-bold text-[#00FFFF]">{number}</span>
      </div>
      <div className="mb-4">{icon}</div>
      <h3 className="text-xl font-bold mb-3">{title}</h3>
      <p className="text-[#B0BEC5]">{description}</p>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/structured-data.tsx" isMerged="true"
import Script from "next/script"

interface StructuredDataProps {
  type: "Organization" | "Product" | "FAQPage" | "Article" | "BreadcrumbList"
  data: any
}

export default function StructuredData({ type, data }: StructuredDataProps) {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": type,
    ...data,
  }

return (
    <Script
      id={`structured-data-${type.toLowerCase()}`}
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
    />
  )
}
[V0_FILE]typescriptreact:file="components/testimonial-section.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { useLanguage } from "@/contexts/language-context"
import { LocalizedText } from "@/components/ui/localized-text"
import { Star } from "lucide-react"

export default function TestimonialSection() {
  const { t } = useLanguage()

const testimonials = [
    {
      name: t("Aung Kyaw", "အောင်ကျော်"),
      role: t("Business Traveler", "စီးပွားရေးခရီးသည်"),
      content: t(
        "eSIM has completely changed how I stay connected during my international business trips. No more hunting for local SIM cards at every destination!",
        "eSIM သည် နိုင်ငံတကာ စီးပွားရေးခရီးစဉ်များအတွင်း ကျွန်ုပ် ဆက်သွယ်နေပုံကို လုံးဝပြောင်းလဲပစ်လိုက်ပါပြီ။ ခရီးစဉ်တိုင်းတွင် ပြည်တွင်း SIM ကဒ်များကို ရှာဖွေနေစရာ မလိုတော့ပါ။",
      ),
      rating: 5,
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      name: t("Su Myat", "စုမြတ်"),
      role: t("Tech Enthusiast", "နည်းပညာဝါသနာရှင်"),
      content: t(
        "I love how easy it is to switch between different carriers on my phone. The activation process was simple and took less than 5 minutes!",
        "ကျွန်မဖုန်းပေါ်တွင် မတူညီသော ဝန်ဆောင်မှုပေးသူများကြား ပြောင်းလဲရန် မည်မျှလွယ်ကူသည်ကို ကျွန်မ နှစ်သက်ပါသည်။ အသုံးပြုခွင့်ရရှိရန် လုပ်ငန်းစဉ်သည် ရိုးရှင်းပြီး ၅ မိနစ်ထက် မကြာပါ။",
      ),
      rating: 5,
      image: "/placeholder.svg?height=80&width=80",
    },
    {
      name: t("Tun Lin Aung", "ထွန်းလင်းအောင်"),
      role: t("Digital Nomad", "ဒီဂျစ်တယ်လှည့်လည်သူ"),
      content: t(
        "As someone who works remotely while traveling, having an eSIM has been a game-changer. I can get connected immediately upon landing in a new country.",
        "ခရီးသွားရင်း အဝေးမှ အလုပ်လုပ်သူတစ်ဦးအနေဖြင့် eSIM ရှိခြင်းသည် ဂိမ်းပြောင်းလဲစေသူတစ်ဦး ဖြစ်ခဲ့ပါသည်။ နိုင်ငံအသစ်တစ်ခုသို့ ဆင်းသက်သည်နှင့် ချက်ချင်း ချိတ်ဆက်နိုင်ပါသည်။",
      ),
      rating: 4,
      image: "/placeholder.svg?height=80&width=80",
    },
  ]

return (
    <section className="py-24 bg-[#162430]">
      <div className="container mx-auto px-4">
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
        >
          <h2 className="text-3xl md:text-5xl font-bold mb-6">
            <LocalizedText
              en={
                <>
                  What Our <span className="text-[#00FFFF]">Users</span> Say
                </>
              }
              mm={
                <>
                  ကျွန်ုပ်တို့၏ <span className="text-[#00FFFF]">အသုံးပြုသူများ</span> ပြောကြားချက်
                </>
              }
            />
          </h2>
          <p className="text-xl text-[#B0BEC5] max-w-2xl mx-auto">
            <LocalizedText
              en="Discover how eSIM technology has transformed connectivity for our users."
              mm="eSIM နည်းပညာသည် ကျွန်ုပ်တို့၏ အသုံးပြုသူများအတွက် ချိတ်ဆက်မှုကို မည်သို့ပြောင်းလဲစေခဲ့သည်ကို လေ့လာပါ။"
            />
          </p>
        </motion.div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -10 }}
              className="bg-gradient-to-br from-[#263A49] to-[#1E2F3C] rounded-2xl overflow-hidden shadow-lg p-8 relative"
            >
              {/* Quote mark decoration */}
              <div className="absolute top-6 right-6 text-6xl text-[#00FFFF]/10 font-serif">"</div>

<div className="flex items-center mb-6">
                <div className="w-14 h-14 rounded-full bg-[#1E2F3C] overflow-hidden mr-4 flex-shrink-0">
                  <img
                    src={testimonial.image || "/placeholder.svg"}
                    alt={testimonial.name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <h3 className="text-lg font-bold">{testimonial.name}</h3>
                  <p className="text-[#B0BEC5] text-sm">{testimonial.role}</p>
                </div>
              </div>

<div className="flex mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={`w-5 h-5 ${i < testimonial.rating ? "text-[#00FFFF] fill-[#00FFFF]" : "text-[#B0BEC5]"}`}
                  />
                ))}
              </div>

<p className="text-[#B0BEC5] relative z-10">{testimonial.content}</p>

{/* Decorative element */}
              <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent" />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Moon, Sun, Laptop } from "lucide-react"
import { useTheme } from "next-themes"

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

// Ensure component is mounted before accessing theme
  useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

return (
    <div className="flex items-center space-x-2 bg-[#1E2F3C] p-1 rounded-full border border-[#00FFFF]/10">
      <Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("light")}
        className={`rounded-full w-8 h-8 ${theme === "light" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="Light mode"
      >
        <Sun size={16} />
      </Button>

<Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("dark")}
        className={`rounded-full w-8 h-8 ${theme === "dark" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="Dark mode"
      >
        <Moon size={16} />
      </Button>

<Button
        variant="ghost"
        size="icon"
        onClick={() => setTheme("system")}
        className={`rounded-full w-8 h-8 ${theme === "system" ? "bg-[#00FFFF]/20 text-[#00FFFF]" : "text-[#B0BEC5]"}`}
        aria-label="System theme"
      >
        <Laptop size={16} />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/thingyan-loading-screen.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useState, useEffect, useRef } from "react"
import { useLanguage } from "@/contexts/language-context"
import { ShoppingCart, Volume2, VolumeX, Music } from "lucide-react"

interface ThingyanLoadingScreenProps {
  onComplete?: () => void
}

export default function ThingyanLoadingScreen({ onComplete }: ThingyanLoadingScreenProps) {
  const [progress, setProgress] = useState(0)
  const { language } = useLanguage()
  const [isPlaying, setIsPlaying] = useState(false)
  const [showMusicPrompt, setShowMusicPrompt] = useState(true)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const [messageIndex, setMessageIndex] = useState(0)

// Thingyan blessing messages in English and Burmese
  const messages = {
    en: [
      {
        main: "Happy Myanmar New Year!",
        sub: "May this Thingyan bring you joy and prosperity",
      },
      {
        main: "Preparing your eSIM for Thingyan...",
        sub: "Stay connected during the water festival",
      },
      {
        main: "Wishing you a blessed Thingyan!",
        sub: "May all your wishes come true in the New Year",
      },
      {
        main: "Almost ready for celebration...",
        sub: "Your digital connection for the water festival",
      },
    ],
    mm: [
      {
        main: "မြန်မာနှစ်သစ်ကူး မင်္ဂလာပါ!",
        sub: "ဤသင်္ကြန်သည် သင့်အတွက် ပျော်ရွှင်မှုနှင့် ကြွယ်ဝမှုကို ယူဆောင်လာပါစေ",
      },
      {
        main: "သင်္ကြန်အတွက် သင့် eSIM ကို ပြင်ဆင်နေသည်...",
        sub: "ရေပက်ပွဲတော်အတွင်း ဆက်သွယ်မှု မပြတ်စေရန်",
      },
      {
        main: "မင်္ဂလာရှိသော သင်္ကြန်ဖြစ်ပါစေ!",
        sub: "နှစ်သစ်တွင် သင့်ဆန္ဒများ အားလုံး ပြည့်ဝပါစေ",
      },
      {
        main: "ပွဲတော်အတွက် အဆင်သင့်ဖြစ်ခါနီးပြီ...",
        sub: "ရေပက်ပွဲတော်အတွက် သင့်ဒစ်ဂျစ်တယ်ချိတ်ဆက်မှု",
      },
    ],
  }

// Initialize audio element
  useEffect(() => {
    audioRef.current = new Audio("/audio/thingyanmoe.mp3")
    audioRef.current.loop = true
    audioRef.current.volume = 0.5

return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current = null
      }
    }
  }, [])

// Handle play/pause
  useEffect(() => {
    if (!audioRef.current) return

if (isPlaying) {
      const playPromise = audioRef.current.play()

// Handle play promise to avoid uncaught promise errors
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            // Playback started successfully
          })
          .catch((error) => {
            // Auto-play was prevented
            console.log("Autoplay prevented:", error)
            setIsPlaying(false)
          })
      }
    } else {
      audioRef.current.pause()
    }
  }, [isPlaying])

// Hide music prompt after 8 seconds
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowMusicPrompt(false)
    }, 8000)
    return () => clearTimeout(timer)
  }, [])

// Progress timer
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          onComplete && onComplete()
          return 100
        }

// Update messages based on progress
        if (prev === 25) {
          setMessageIndex(1)
        } else if (prev === 50) {
          setMessageIndex(2)
        } else if (prev === 75) {
          setMessageIndex(3)
        }

return prev + 1
      })
    }, 30) // Faster loading

return () => clearInterval(interval)
  }, [onComplete])

// Toggle play/pause
  const togglePlay = () => {
    setIsPlaying(!isPlaying)
    setShowMusicPrompt(false)
  }

const currentMessage = language === "en" ? messages.en[messageIndex] : messages.mm[messageIndex]

// Generate random positions for water droplets
  const generateRandomPositions = (count: number) => {
    return Array.from({ length: count }).map(() => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: 2 + Math.random() * 6,
      delay: Math.random() * 5,
      duration: 2 + Math.random() * 3,
    }))
  }

const waterDroplets = generateRandomPositions(40)
  const floatingFlowers = generateRandomPositions(20)
  const waterRipples = generateRandomPositions(10)

// Handle Buy eSIM button click
  const handleBuyEsimClick = () => {
    window.open("https://shop.esim.com.mm", "_blank", "noopener,noreferrer")
  }

return (
    <div className="fixed inset-0 bg-gradient-to-b from-[#1E2F3C] to-[#162430] flex flex-col items-center justify-center z-50 overflow-hidden">
      {/* Enhanced background with layered effects */}
      <div className="absolute inset-0 overflow-hidden">
        {/* Animated background gradient */}
        <motion.div
          className="absolute inset-0 bg-gradient-to-br from-[#1E2F3C] to-[#162430]"
          animate={{
            background: [
              "linear-gradient(to bottom right, #1E2F3C, #162430)",
              "linear-gradient(to bottom right, #1a2a36, #142230)",
              "linear-gradient(to bottom right, #1E2F3C, #162430)",
            ],
          }}
          transition={{ duration: 8, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
        />

{/* Subtle grid pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 grid grid-cols-12 gap-4">
            {Array.from({ length: 12 }).map((_, colIndex) => (
              <div key={colIndex} className="h-full w-full border-r border-[#00FFFF]/20"></div>
            ))}
          </div>
          <div className="absolute inset-0 grid grid-rows-12 gap-4">
            {Array.from({ length: 12 }).map((_, rowIndex) => (
              <div key={rowIndex} className="h-full w-full border-b border-[#00FFFF]/20"></div>
            ))}
          </div>
        </div>

{/* Enhanced water waves with multiple layers */}
        <div className="absolute bottom-0 left-0 right-0 h-60 overflow-hidden">
          {[1, 2, 3].map((i) => (
            <motion.div
              key={`wave-${i}`}
              className="absolute bottom-0 left-0 right-0"
              style={{
                height: `${20 + i * 10}px`,
                background: `rgba(0, 255, 255, ${0.05 * i})`,
                borderRadius: "50% 50% 0 0",
                bottom: `${(i - 1) * 15}px`,
              }}
              animate={{
                scaleX: [0.8, 1.2, 0.8],
                scaleY: [0.8, 1, 0.8],
                x: ["-10%", "10%", "-10%"],
              }}
              transition={{
                duration: 7 + i * 2,
                repeat: Number.POSITIVE_INFINITY,
                ease: "easeInOut",
              }}
            />
          ))}
        </div>

{/* Enhanced water droplets with varying sizes and speeds */}
        {waterDroplets.map((droplet, i) => (
          <motion.div
            key={`droplet-${i}`}
            className="absolute rounded-full bg-[#00FFFF]"
            style={{
              width: `${droplet.size}px`,
              height: `${droplet.size * 1.5}px`,
              left: `${droplet.x}%`,
              top: `-20px`,
              opacity: 0.6,
            }}
            animate={{
              y: ["0vh", "100vh"],
              x: [0, Math.random() > 0.5 ? 20 : -20],
              opacity: [0.7, 0],
              rotate: [0, 180], // Add rotation for more dynamic effect
            }}
            transition={{
              duration: 5 + Math.random() * 10,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 10,
              ease: "easeIn",
            }}
          />
        ))}

{/* Enhanced floating flowers with rotation and scaling */}
        {floatingFlowers.map((flower, i) => (
          <motion.div
            key={`flower-${i}`}
            className="absolute"
            style={{
              left: `${flower.x}%`,
              top: `${flower.y}%`,
            }}
            animate={{
              y: [0, -100],
              x: [0, Math.random() > 0.5 ? 50 : -50],
              rotate: [0, 360],
              scale: [0.8, 1, 0.8],
              opacity: [0, 0.7, 0],
            }}
            transition={{
              duration: 10 + Math.random() * 10,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 10,
              ease: "easeInOut",
            }}
          >
            <div className="w-6 h-6 relative">
              {/* Enhanced flower using CSS with more petals */}
              {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
                <div
                  key={angle}
                  className="absolute w-2 h-3 bg-[#00FFFF]/70 rounded-full"
                  style={{
                    transform: `rotate(${angle}deg) translate(3px, 0)`,
                    transformOrigin: "center",
                  }}
                />
              ))}
              <div className="absolute w-3 h-3 bg-white/70 rounded-full left-1.5 top-1.5" />
            </div>
          </motion.div>
        ))}

{/* Water ripples */}
        {waterRipples.map((ripple, i) => (
          <motion.div
            key={`ripple-${i}`}
            className="absolute rounded-full border border-[#00FFFF]/20"
            style={{
              width: "150px",
              height: "150px",
              left: `${ripple.x}%`,
              top: `${ripple.y}%`,
              opacity: 0,
            }}
            animate={{
              scale: [0, 3],
              opacity: [0.3, 0],
            }}
            transition={{
              duration: 4 + Math.random() * 3,
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 10,
              ease: "easeOut",
            }}
          />
        ))}
      </div>

<div className="relative z-10 w-full max-w-md px-6">
        <div className="flex flex-col items-center mb-12">
          <motion.div
            className="text-4xl font-bold mb-2 flex items-center"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <span className="text-[#00FFFF] mr-1">e</span>
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-300">SIM</span>
            <span className="ml-1 text-[#00FFFF]">Myanmar</span>
          </motion.div>

<motion.div
            className="text-2xl font-bold mb-2 text-white"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            {language === "en" ? "Thingyan Festival" : "သင်္ကြန်ပွဲတော်"}
          </motion.div>

<motion.div
            className="w-16 h-1 bg-gradient-to-r from-transparent via-[#00FFFF] to-transparent"
            initial={{ width: 0, opacity: 0 }}
            animate={{ width: "4rem", opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </div>

{/* Enhanced Thingyan water pot with more detailed animations */}
        <div className="relative w-full h-40 mb-8 flex items-center justify-center">
          <motion.div
            className="w-32 h-32 rounded-full border-4 border-[#00FFFF]/30 flex items-center justify-center overflow-hidden"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5 }}
            style={{
              background: "linear-gradient(to bottom, rgba(0,255,255,0.05), rgba(0,255,255,0.1))",
              boxShadow: "0 0 20px rgba(0,255,255,0.2)",
            }}
          >
            {/* Enhanced water inside pot with waves */}
            <motion.div
              className="absolute bottom-0 left-0 right-0 bg-[#00FFFF]/40"
              style={{ height: "60%" }}
              animate={{
                height: ["60%", "65%", "60%"],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                ease: "easeInOut",
              }}
            >
              {/* Enhanced water ripples with more detail */}
              {[1, 2, 3, 4, 5].map((i) => (
                <motion.div
                  key={`pot-ripple-${i}`}
                  className="absolute top-0 left-1/2 rounded-full border border-white/30"
                  style={{
                    width: `${8 + i}px`,
                    height: `${8 + i}px`,
                    marginLeft: `-${4 + i / 2}px`,
                    marginTop: "-0.5rem",
                  }}
                  initial={{ scale: 0, opacity: 0.7 }}
                  animate={{ scale: 3, opacity: 0 }}
                  transition={{
                    duration: 2,
                    repeat: Number.POSITIVE_INFINITY,
                    delay: i * 0.4,
                    ease: "easeOut",
                  }}
                />
              ))}

{/* Small floating bubbles in the water */}
              {[1, 2, 3].map((i) => (
                <motion.div
                  key={`bubble-${i}`}
                  className="absolute rounded-full bg-white/50"
                  style={{
                    width: `${2 + i}px`,
                    height: `${2 + i}px`,
                    left: `${20 + i * 20}%`,
                    bottom: "10%",
                  }}
                  animate={{
                    y: [0, -20, 0],
                    x: [0, i % 2 === 0 ? 5 : -5, 0],
                    opacity: [0.7, 0.3, 0.7],
                  }}
                  transition={{
                    duration: 3 + i,
                    repeat: Number.POSITIVE_INFINITY,
                    delay: i * 0.5,
                  }}
                />
              ))}
            </motion.div>

{/* Enhanced pot decoration with glowing effect */}
            <div className="absolute top-0 left-0 right-0 h-full">
              <div className="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-[#00FFFF]/30 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-[#00FFFF]/30 to-transparent" />

{/* Decorative patterns on the pot */}
              <div className="absolute top-1/4 left-0 right-0 h-1 bg-[#00FFFF]/20" />
              <div className="absolute top-1/2 left-0 right-0 h-1 bg-[#00FFFF]/20" />
              <div className="absolute top-3/4 left-0 right-0 h-1 bg-[#00FFFF]/20" />
            </div>
          </motion.div>

{/* Enhanced water splashes with varying sizes and angles */}
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <motion.div
              key={`splash-${i}`}
              className="absolute bg-[#00FFFF]/70 rounded-full"
              style={{
                width: `${1 + (i % 3) * 0.5}px`,
                height: `${4 + (i % 3) * 2}px`,
                transformOrigin: "bottom",
                rotate: `${(i - 1) * 60}deg`,
              }}
              animate={{
                scaleY: [0, 1, 0],
                opacity: [0, 0.7, 0],
              }}
              transition={{
                duration: 1.5,
                repeat: Number.POSITIVE_INFINITY,
                delay: i * 0.2,
                ease: "easeOut",
              }}
            />
          ))}

{/* Glowing aura around the pot */}
          <motion.div
            className="absolute w-40 h-40 rounded-full bg-[#00FFFF]/5"
            animate={{
              scale: [1, 1.1, 1],
              opacity: [0.3, 0.5, 0.3],
            }}
            transition={{
              duration: 3,
              repeat: Number.POSITIVE_INFINITY,
              ease: "easeInOut",
            }}
          />
        </div>

<div className="text-center mb-8">
          <h2 className="text-white text-xl font-medium mb-2">
            <span className={language === "mm" ? "mm" : ""}>{currentMessage.main}</span>
          </h2>
          <p className="text-[#00FFFF] text-sm">
            <span className={language === "mm" ? "mm" : ""}>{currentMessage.sub}</span>
          </p>
        </div>

{/* Enhanced progress bar with glowing effect */}
        <div className="w-full h-2 bg-[#1E2F3C] border border-[#00FFFF]/20 rounded-full overflow-hidden mb-3 relative">
          <motion.div
            className="h-full bg-gradient-to-r from-[#00FFFF]/70 to-[#00FFFF]"
            initial={{ width: "0%" }}
            animate={{ width: `${progress}%` }}
            transition={{ duration: 0.1 }}
          />

{/* Glowing effect on progress bar */}
          <motion.div
            className="absolute top-0 bottom-0 left-0 right-0 bg-[#00FFFF]/10"
            animate={{
              opacity: [0.3, 0.6, 0.3],
            }}
            transition={{
              duration: 2,
              repeat: Number.POSITIVE_INFINITY,
              ease: "easeInOut",
            }}
            style={{
              width: `${progress}%`,
            }}
          />
        </div>

<div className="flex justify-between items-center text-white text-sm">
          <span>
            {progress}% {language === "en" ? "Complete" : "ပြီးစီး"}
          </span>
          <span>{language === "en" ? "Please wait..." : "ခဏစောင့်ပါ..."}</span>
        </div>

{/* Enhanced animated dots with varying sizes */}
        <div className="flex justify-center mt-4">
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              className="mx-1 rounded-full bg-[#00FFFF]"
              style={{
                width: `${6 - i}px`,
                height: `${6 - i}px`,
              }}
              animate={{
                opacity: [0.3, 1, 0.3],
                scale: [0.8, 1.2, 0.8],
              }}
              transition={{
                duration: 1.5,
                repeat: Number.POSITIVE_INFINITY,
                delay: i * 0.3,
              }}
            />
          ))}
        </div>
      </div>

{/* Music control button */}
      <motion.button
        className="fixed top-6 right-6 z-50 bg-[#1E2F3C] border border-[#00FFFF]/30 text-[#00FFFF] rounded-full p-3 shadow-lg"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={togglePlay}
        aria-label={isPlaying ? "Pause music" : "Play music"}
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.3 }}
      >
        {isPlaying ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />}
      </motion.button>

{/* Music prompt */}
      <AnimatePresence>
        {showMusicPrompt && (
          <motion.div
            className="fixed top-6 right-20 z-50 bg-[#1E2F3C]/90 backdrop-blur-sm border border-[#00FFFF]/30 text-white rounded-lg px-3 py-2 shadow-lg"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 20 }}
            transition={{ duration: 0.3, delay: 1 }}
          >
            <div className="flex items-center">
              <Music className="h-4 w-4 text-[#00FFFF] mr-2" />
              <p className="text-xs">
                {language === "en" ? "Click to enjoy Thingyan music!" : "သင်္ကြန်ဂီတကို ခံစားရန် နှိပ်ပါ!"}
              </p>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

{/* Pulsing "Buy eSIM" button in bottom left corner - improved */}
      <motion.button
        className="fixed bottom-6 left-6 z-20 bg-[#00FFFF] text-[#1E2F3C] rounded-full p-3 flex items-center shadow-lg"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        animate={{
          boxShadow: [
            "0 0 0 0 rgba(0, 255, 255, 0.7)",
            "0 0 0 10px rgba(0, 255, 255, 0)",
            "0 0 0 0 rgba(0, 255, 255, 0)",
          ],
        }}
        transition={{
          duration: 2,
          repeat: Number.POSITIVE_INFINITY,
          repeatType: "loop",
        }}
        onClick={handleBuyEsimClick}
        aria-label={language === "en" ? "Buy eSIM" : "eSIM ဝယ်ယူရန်"}
      >
        <ShoppingCart className="h-5 w-5 mr-2" />
        <span className="font-medium">{language === "en" ? "Buy eSIM" : "eSIM ဝယ်ယူရန်"}</span>

{/* Add water droplet animation */}
        {Array.from({ length: 3 }).map((_, i) => (
          <motion.div
            key={`esim-droplet-${i}`}
            className="absolute w-1 h-3 bg-white/70 rounded-b-full"
            style={{
              top: "-3px",
              left: `${30 + i * 20}%`,
            }}
            animate={{
              y: [0, 20],
              opacity: [0.7, 0],
            }}
            transition={{
              duration: 1.5,
              repeat: Number.POSITIVE_INFINITY,
              delay: i * 0.5,
              ease: "easeIn",
            }}
          />
        ))}
      </motion.button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/thingyan/background-music.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Music, Play, Pause, Volume, Volume1, Volume2, VolumeX, ChevronUp, ChevronDown } from "lucide-react"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"
import { useLanguage } from "@/contexts/language-context"

interface BackgroundMusicProps {
  audioUrl: string
}

export default function BackgroundMusic({ audioUrl }: BackgroundMusicProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [hasInteracted, setHasInteracted] = useState(false)
  const [showPrompt, setShowPrompt] = useState(true)
  const [volume, setVolume] = useState(0.5)
  const [isMuted, setIsMuted] = useState(false)
  const [showControls, setShowControls] = useState(false)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const { isThingyanTheme } = useThingyanTheme()
  const { language } = useLanguage()

// Initialize audio element
  useEffect(() => {
    if (!isThingyanTheme) return

audioRef.current = new Audio(audioUrl)
    audioRef.current.loop = true
    audioRef.current.volume = volume

return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current = null
      }
    }
  }, [audioUrl, isThingyanTheme])

// Handle play/pause
  useEffect(() => {
    if (!isThingyanTheme || !audioRef.current) return

if (isPlaying) {
      const playPromise = audioRef.current.play()

// Update volume when it changes
  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = isMuted ? 0 : volume
    }
  }, [volume, isMuted])

// Handle play/pause toggle
  const togglePlay = () => {
    setIsPlaying(!isPlaying)
    setHasInteracted(true)
    setShowPrompt(false)
  }

// Handle volume change
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = Number.parseFloat(e.target.value)
    setVolume(newVolume)
    if (newVolume > 0 && isMuted) {
      setIsMuted(false)
    }
  }

// Toggle mute
  const toggleMute = () => {
    setIsMuted(!isMuted)
  }

// Toggle controls visibility
  const toggleControls = () => {
    setShowControls(!showControls)
  }

// Hide prompt after 10 seconds
  useEffect(() => {
    if (!isThingyanTheme) return

const timer = setTimeout(() => {
      setShowPrompt(false)
    }, 10000)
    return () => clearTimeout(timer)
  }, [showPrompt, isThingyanTheme])

// Don't render anything if it's not Thingyan theme
  if (!isThingyanTheme) return null

// Get the appropriate volume icon based on volume level and mute state
  const getVolumeIcon = () => {
    if (isMuted) return <VolumeX size={16} />
    if (volume < 0.25) return <Volume size={16} />
    if (volume < 0.75) return <Volume1 size={16} />
    return <Volume2 size={16} />
  }

return (
    <>
      {/* Music control button - now at the bottom of the screen */}
      <motion.div
        className="fixed bottom-6 right-6 z-50 flex flex-col items-center gap-2"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        {/* Main music player container with enhanced design */}
        <motion.div
          className="bg-[#1E2F3C]/90 backdrop-blur-md border border-[#00FFFF]/30 rounded-lg shadow-lg overflow-hidden"
          animate={{
            boxShadow: isPlaying
              ? [
                  "0 0 0 0 rgba(0, 255, 255, 0.2)",
                  "0 0 15px 2px rgba(0, 255, 255, 0.3)",
                  "0 0 0 0 rgba(0, 255, 255, 0.2)",
                ]
              : "none",
          }}
          transition={{
            duration: 2,
            repeat: isPlaying ? Number.POSITIVE_INFINITY : 0,
            repeatType: "loop",
          }}
        >
          {/* Main control button */}
          <div className="flex items-center p-2">
            <motion.button
              className="bg-[#00FFFF]/10 text-[#00FFFF] rounded-full p-3 flex items-center justify-center"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={togglePlay}
              aria-label={isPlaying ? "Pause music" : "Play music"}
            >
              {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
            </motion.button>

<div className="ml-3 mr-2">
              <div className="text-[#00FFFF] text-sm font-medium">
                {language === "en" ? "Thingyan Music" : "သင်္ကြန်ဂီတ"}
              </div>
              <div className="text-[#B0BEC5] text-xs">
                {isPlaying ? (language === "en" ? "Now Playing" : "ဖွင့်နေသည်") : language === "en" ? "Paused" : "ရပ်ထားသည်"}
              </div>
            </div>

{/* Toggle controls button */}
            <motion.button
              className="ml-auto text-[#00FFFF] hover:text-[#00CCFF] p-2 rounded-full"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              onClick={toggleControls}
              aria-label={showControls ? "Hide controls" : "Show controls"}
            >
              {showControls ? <ChevronDown size={18} /> : <ChevronUp size={18} />}
            </motion.button>
          </div>

{/* Expanded controls */}
          <AnimatePresence>
            {showControls && (
              <motion.div
                className="px-3 pb-3"
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.2 }}
              >
                {/* Volume controls with improved design */}
                <div className="flex items-center gap-3 bg-[#162430] p-2 rounded-lg">
                  <motion.button
                    onClick={toggleMute}
                    className="text-[#00FFFF] hover:text-[#00CCFF] transition-colors"
                    whileHover={{ scale: 1.1 }}
                    whileTap={{ scale: 0.9 }}
                    aria-label={isMuted ? "Unmute" : "Mute"}
                  >
                    {getVolumeIcon()}
                  </motion.button>

{/* Horizontal volume slider with improved styling */}
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.01"
                    value={volume}
                    onChange={handleVolumeChange}
                    className="w-full h-1.5 appearance-none bg-[#00FFFF]/30 rounded-full outline-none"
                    style={{
                      // Custom styling for the volume slider
                      accentColor: "#00FFFF",
                    }}
                    aria-label="Volume control"
                  />

<div className="text-[#B0BEC5] text-xs w-8 text-right">{Math.round(volume * 100)}%</div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>

{/* Water droplet animations around the music player - improved */}
        {isPlaying && (
          <>
            {Array.from({ length: 6 }).map((_, i) => (
              <motion.div
                key={`music-droplet-${i}`}
                className="absolute w-1.5 h-1.5 rounded-full bg-[#00FFFF]/40"
                style={{
                  top: `-${10 + i * 5}px`,
                  left: `${10 + i * 15}px`,
                }}
                animate={{
                  y: [0, -20],
                  opacity: [0.7, 0],
                }}
                transition={{
                  duration: 1 + i * 0.3,
                  repeat: Number.POSITIVE_INFINITY,
                  delay: i * 0.5,
                }}
              />
            ))}

{/* Add water ripple effect */}
            <motion.div
              className="absolute -z-10 w-full h-full rounded-full"
              style={{ top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}
              animate={{
                scale: [1, 1.5],
                opacity: [0.2, 0],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                repeatType: "loop",
              }}
            />
          </>
        )}
      </motion.div>

{/* Initial prompt to play music - now with improved design */}
      <AnimatePresence>
        {showPrompt && !hasInteracted && (
          <motion.div
            className="fixed bottom-24 right-6 z-50 bg-[#1E2F3C]/90 backdrop-blur-sm border border-[#00FFFF]/30 text-white rounded-lg p-3 shadow-lg max-w-xs"
            initial={{ opacity: 0, y: 20, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 10, scale: 0.9 }}
            transition={{ duration: 0.3 }}
          >
            <div className="flex items-start">
              <Music className="h-5 w-5 text-[#00FFFF] mt-0.5 mr-2 flex-shrink-0" />
              <div>
                <p className="text-sm font-medium">
                  {language === "en" ? "Enjoy Thingyan festival music!" : "သင်္ကြန်ပွဲတော်ဂီတကို ခံစားပါ!"}
                </p>
                <p className="text-xs text-[#B0BEC5] mt-1">
                  {language === "en"
                    ? "Click the button to play traditional Myanmar New Year music"
                    : "မြန်မာ့ရိုးရာနှစ်သစ်ကူးဂီတကို ဖွင့်ရန် ခလုတ်ကို နှိပ်ပါ"}
                </p>
              </div>
            </div>
            <div className="mt-2 flex justify-between">
              <motion.button
                className="text-xs bg-[#00FFFF]/10 text-[#00FFFF] px-2 py-1 rounded hover:bg-[#00FFFF]/20 transition-colors"
                onClick={() => {
                  togglePlay()
                  setShowPrompt(false)
                }}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                {language === "en" ? "Play" : "ဖွင့်ရန်"}
              </motion.button>

<motion.button
                className="text-xs text-[#B0BEC5] hover:text-white px-2 py-1 rounded transition-colors"
                onClick={() => setShowPrompt(false)}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                {language === "en" ? "Dismiss" : "ပယ်ဖျက်ရန်"}
              </motion.button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/thingyan/thingyan-banner.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Play, Pause, Droplets, Gift, Volume2 } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"
import Link from "next/link"

interface ThingyanBannerProps {
  audioUrl: string
}

export default function ThingyanBanner({ audioUrl }: ThingyanBannerProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [hasAttemptedAutoplay, setHasAttemptedAutoplay] = useState(false)
  const [userInteracted, setUserInteracted] = useState(false)
  const [showMusicTooltip, setShowMusicTooltip] = useState(false)
  const [volume, setVolume] = useState(0.5)
  const [showVolumeControl, setShowVolumeControl] = useState(false)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const { language } = useLanguage()

// Initialize audio element
  useEffect(() => {
    audioRef.current = new Audio(audioUrl)
    audioRef.current.loop = true
    audioRef.current.volume = volume

// Cleanup
    return () => {
      if (audioRef.current) {
        audioRef.current.pause()
        audioRef.current = null
      }
    }
  }, [audioUrl])

// Attempt autoplay once when component mounts
  useEffect(() => {
    if (!hasAttemptedAutoplay && audioRef.current) {
      const attemptAutoplay = async () => {
        try {
          // Try to play audio
          await audioRef.current?.play()
          setIsPlaying(true)
          console.log("Autoplay successful")
        } catch (error) {
          // Autoplay was prevented by browser policy
          console.log("Autoplay prevented:", error)
          setIsPlaying(false)
        }
        setHasAttemptedAutoplay(true)
      }

attemptAutoplay()
    }
  }, [hasAttemptedAutoplay])

// Handle play/pause
  useEffect(() => {
    if (!audioRef.current) return

if (isPlaying) {
      const playPromise = audioRef.current.play()

// Handle play promise to avoid uncaught promise errors
      if (playPromise !== undefined) {
        playPromise.catch((error) => {
          console.log("Play prevented:", error)
          setIsPlaying(false)
        })
      }
    } else {
      audioRef.current.pause()
    }
  }, [isPlaying])

// Update volume when it changes
  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = volume
    }
  }, [volume])

// Toggle play/pause
  const togglePlay = () => {
    setIsPlaying(!isPlaying)
    setUserInteracted(true)
  }

// Handle volume change
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = Number.parseFloat(e.target.value)
    setVolume(newVolume)
  }

// Show music tooltip for 5 seconds if not interacted
  useEffect(() => {
    if (!userInteracted) {
      setShowMusicTooltip(true)
      const timer = setTimeout(() => {
        setShowMusicTooltip(false)
      }, 5000)
      return () => clearTimeout(timer)
    }
  }, [userInteracted])

return (
    <div className="bg-[#1E2F3C] border-b border-[#00FFFF]/20 text-white py-2 px-4 text-sm relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        {/* Animated water droplets in the banner */}
        {Array.from({ length: 20 }).map((_, i) => (
          <motion.div
            key={`banner-droplet-${i}`}
            className="absolute w-1 h-1 rounded-full bg-[#00FFFF]/40"
            style={{
              left: `${Math.random() * 100}%`,
              top: `-5px`,
            }}
            animate={{
              y: [0, 30],
              opacity: [0.7, 0],
            }}
            transition={{
              duration: 1 + Math.random(),
              repeat: Number.POSITIVE_INFINITY,
              delay: Math.random() * 5,
              ease: "easeIn",
            }}
          />
        ))}
      </div>

<div className="container mx-auto flex items-center justify-between">
        {/* Left section with music control - now with improved design */}
        <div className="flex items-center relative">
          <div className="flex items-center space-x-2">
            <motion.button
              className="flex items-center justify-center bg-[#00FFFF]/10 text-[#00FFFF] p-2 rounded-full hover:bg-[#00FFFF]/20 transition-colors border border-[#00FFFF]/30"
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              animate={{
                boxShadow: isPlaying
                  ? ["0 0 0 0 rgba(0, 255, 255, 0.4)", "0 0 0 8px rgba(0, 255, 255, 0)", "0 0 0 0 rgba(0, 255, 255, 0)"]
                  : "none",
              }}
              transition={{
                duration: 2,
                repeat: isPlaying ? Number.POSITIVE_INFINITY : 0,
                repeatType: "loop",
              }}
              onClick={togglePlay}
              onMouseEnter={() => setShowMusicTooltip(true)}
              onMouseLeave={() => !userInteracted && setShowMusicTooltip(false)}
              aria-label={isPlaying ? "Pause Thingyan music" : "Play Thingyan music"}
            >
              {isPlaying ? (
                <Pause size={18} className="text-[#00FFFF]" />
              ) : (
                <Play size={18} className="text-[#00FFFF]" />
              )}
            </motion.button>

{/* Volume control button */}
            {isPlaying && (
              <div className="relative">
                <motion.button
                  className="flex items-center justify-center bg-[#00FFFF]/10 text-[#00FFFF] p-2 rounded-full hover:bg-[#00FFFF]/20 transition-colors border border-[#00FFFF]/30"
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  onClick={() => setShowVolumeControl(!showVolumeControl)}
                  aria-label="Volume control"
                >
                  <Volume2 size={16} className="text-[#00FFFF]" />
                </motion.button>

{/* Volume slider popup */}
                <AnimatePresence>
                  {showVolumeControl && (
                    <motion.div
                      className="absolute left-0 top-full mt-2 bg-[#1E2F3C]/90 backdrop-blur-sm border border-[#00FFFF]/30 rounded-lg p-2 z-50"
                      initial={{ opacity: 0, y: -5 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -5 }}
                      transition={{ duration: 0.2 }}
                    >
                      <input
                        type="range"
                        min="0"
                        max="1"
                        step="0.01"
                        value={volume}
                        onChange={handleVolumeChange}
                        className="w-24 h-1.5 appearance-none bg-[#00FFFF]/30 rounded-full outline-none"
                        style={{ accentColor: "#00FFFF" }}
                        aria-label="Volume control"
                      />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            )}

{/* Music status text */}
            {isPlaying && (
              <span className="hidden sm:inline-block text-[#00FFFF] text-xs">
                {language === "en" ? "Now Playing" : "ဖွင့်နေသည်"}
              </span>
            )}
          </div>

{/* Music tooltip */}
          <AnimatePresence>
            {showMusicTooltip && (
              <motion.div
                className="absolute left-0 top-full mt-2 bg-[#1E2F3C]/90 backdrop-blur-sm border border-[#00FFFF]/30 rounded-md px-3 py-1.5 z-50 whitespace-nowrap"
                initial={{ opacity: 0, y: -5 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -5 }}
                transition={{ duration: 0.2 }}
              >
                <div className="text-xs">
                  {isPlaying
                    ? language === "en"
                      ? "Now playing Thingyan music"
                      : "သင်္ကြန်သီချင်း ဖွင့်နေသည်"
                    : language === "en"
                      ? "Click to play festival music"
                      : "သင်္ကြန်သီချင်း ဖွင့်ရန် နှိပ်ပါ"}
                </div>
                <div className="absolute w-0 h-0 border-4 text-inherit border-t-transparent border-r-transparent border-b-[#1E2F3C]/90 border-l-transparent -top-2 left-4 transform rotate-180" />
              </motion.div>
            )}
          </AnimatePresence>
        </div>

{/* Center section with festival message - now with improved animation */}
        <div className="flex-grow text-center mx-4">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="flex items-center justify-center"
          >
            <motion.div
              animate={{
                y: [0, -3, 0],
                scale: [1, 1.1, 1],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                repeatType: "loop",
              }}
            >
              <Droplets size={16} className="text-[#00FFFF] mr-2" />
            </motion.div>
            <span>
              {language === "en"
                ? "Happy Thingyan Water Festival! Special eSIM offers available now"
                : "သင်္ကြန်ပွဲတော် မင်္ဂလာပါ! အထူး eSIM ကမ်းလှမ်းမှုများ ယခုရရှိနိုင်ပါပြီ"}
            </span>
            <motion.div
              animate={{
                y: [0, -3, 0],
                scale: [1, 1.1, 1],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                repeatType: "loop",
                delay: 1,
              }}
            >
              <Droplets size={16} className="text-[#00FFFF] ml-2" />
            </motion.div>
          </motion.div>
        </div>

{/* Right section with Buy eSIM button - now with improved animation */}
        <div>
          <Link href="https://shop.esim.com.mm" target="_blank" rel="noopener noreferrer">
            <motion.button
              className="flex items-center justify-center bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] px-3 py-1.5 rounded-full font-medium text-xs shadow-lg relative overflow-hidden"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              animate={{
                y: [0, -3, 0],
              }}
              transition={{
                duration: 2,
                repeat: Number.POSITIVE_INFINITY,
                repeatType: "loop",
              }}
            >
              <Gift size={14} className="mr-1.5" />
              {language === "en" ? "Festival eSIM" : "သင်္ကြန် eSIM"}

{/* Enhanced shimmer effect */}
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent"
                initial={{ x: "-100%" }}
                animate={{ x: "100%" }}
                transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5, ease: "linear" }}
              />

{/* Add water droplet */}
              <motion.div
                className="absolute -top-1 left-1/2 w-1 h-3 bg-white/70 rounded-b-full"
                animate={{
                  y: [0, 10],
                  opacity: [0.7, 0],
                }}
                transition={{
                  duration: 1,
                  repeat: Number.POSITIVE_INFINITY,
                  delay: 1,
                  ease: "easeIn",
                }}
              />
            </motion.button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/thingyan/thingyan-theme-toggle.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"
import { Droplets, Settings, X } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function ThingyanThemeToggle() {
  const { isThingyanTheme, thingyanIntensity, setThingyanIntensity } = useThingyanTheme()
  const [isOpen, setIsOpen] = useState(false)
  const { language } = useLanguage()

if (!isThingyanTheme) return null

return (
    <div className="fixed bottom-4 right-4 z-50">
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            transition={{ duration: 0.2 }}
            className="bg-[#1E2F3C] border border-[#00FFFF]/30 rounded-lg p-4 mb-4 shadow-lg"
          >
            <div className="flex justify-between items-center mb-3">
              <h3 className="text-white font-medium flex items-center">
                <Droplets className="w-4 h-4 mr-2 text-[#00FFFF]" />
                {language === "en" ? "Thingyan Effects" : "သင်္ကြန် အထူးပြုလုပ်ချက်များ"}
              </h3>
              <button
                onClick={() => setIsOpen(false)}
                className="text-white/70 hover:text-white transition-colors"
                aria-label="Close settings"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

<div className="space-y-2">
              <p className="text-sm text-white/70 mb-2">{language === "en" ? "Animation Intensity" : "အသက်ဝင်မှု အဆင့်"}</p>

<div className="flex gap-2">
                {(["subtle", "moderate", "immersive"] as const).map((intensity) => (
                  <button
                    key={intensity}
                    onClick={() => setThingyanIntensity(intensity)}
                    className={`px-3 py-1.5 rounded text-sm flex-1 transition-colors ${
                      thingyanIntensity === intensity
                        ? "bg-[#00FFFF]/20 text-[#00FFFF] border border-[#00FFFF]/50"
                        : "bg-[#1E2F3C] text-white/70 border border-[#00FFFF]/10 hover:border-[#00FFFF]/30"
                    }`}
                  >
                    {language === "en"
                      ? intensity.charAt(0).toUpperCase() + intensity.slice(1)
                      : intensity === "subtle"
                        ? "အနည်းငယ်"
                        : intensity === "moderate"
                          ? "အလယ်အလတ်"
                          : "အပြည့်အဝ"}
                  </button>
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

<motion.button
        onClick={() => setIsOpen(!isOpen)}
        className="bg-[#1E2F3C] border border-[#00FFFF]/30 hover:border-[#00FFFF]/70 rounded-full p-3 shadow-lg flex items-center justify-center text-[#00FFFF] transition-colors"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        aria-label="Thingyan theme settings"
      >
        {isOpen ? <X className="w-5 h-5" /> : <Settings className="w-5 h-5" />}
      </motion.button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/thingyan/water-effects.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { useThingyanTheme } from "@/contexts/thingyan-theme-context"

export function WaterDroplets({ count = 20, className = "" }: { count?: number; className?: string }) {
  const { thingyanIntensity } = useThingyanTheme()

// Adjust count based on intensity
  const adjustedCount = {
    subtle: Math.floor(count * 0.5),
    moderate: count,
    immersive: Math.floor(count * 1.5),
  }[thingyanIntensity]

return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {Array.from({ length: adjustedCount }).map((_, i) => (
        <motion.div
          key={`droplet-${i}`}
          className="absolute bg-[#00FFFF]/30"
          style={{
            width: `${1 + Math.random()}px`,
            height: `${3 + Math.random() * 3}px`,
            borderRadius: "0 0 50% 50%",
            left: `${Math.random() * 100}%`,
            top: `-20px`,
          }}
          animate={{
            y: ["0vh", "100vh"],
            x: [0, Math.random() > 0.5 ? 50 : -50],
            opacity: [0.7, 0],
          }}
          transition={{
            duration: 10 + Math.random() * 15,
            repeat: Number.POSITIVE_INFINITY,
            delay: Math.random() * 20,
            ease: "easeIn",
          }}
        />
      ))}
    </div>
  )
}

export function WaterRipples({ count = 5, className = "" }: { count?: number; className?: string }) {
  const { thingyanIntensity } = useThingyanTheme()

// Adjust count based on intensity
  const adjustedCount = {
    subtle: Math.floor(count * 0.5),
    moderate: count,
    immersive: Math.floor(count * 1.5),
  }[thingyanIntensity]

return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {Array.from({ length: adjustedCount }).map((_, i) => (
        <motion.div
          key={`ripple-${i}`}
          className="absolute rounded-full border border-[#00FFFF]/20"
          style={{
            width: "150px",
            height: "150px",
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            opacity: 0,
          }}
          animate={{
            scale: [0, 3],
            opacity: [0.3, 0],
          }}
          transition={{
            duration: 4 + Math.random() * 3,
            repeat: Number.POSITIVE_INFINITY,
            delay: Math.random() * 10,
            ease: "easeOut",
          }}
        />
      ))}
    </div>
  )
}

export function FloatingFlowers({ count = 10, className = "" }: { count?: number; className?: string }) {
  const { thingyanIntensity } = useThingyanTheme()

// Adjust count based on intensity
  const adjustedCount = {
    subtle: Math.floor(count * 0.5),
    moderate: count,
    immersive: Math.floor(count * 1.5),
  }[thingyanIntensity]

return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {Array.from({ length: adjustedCount }).map((_, i) => (
        <motion.div
          key={`flower-${i}`}
          className="absolute"
          style={{
            left: `${Math.random() * 100}%`,
            top: `-20px`,
          }}
          animate={{
            y: ["0vh", "100vh"],
            rotate: [0, 360],
            x: [0, Math.random() > 0.5 ? 100 : -100],
          }}
          transition={{
            duration: 15 + Math.random() * 20,
            repeat: Number.POSITIVE_INFINITY,
            delay: Math.random() * 30,
            ease: "linear",
          }}
        >
          <div className="w-3 h-3 relative">
            {/* Improved flower with more petals */}
            {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
              <div
                key={angle}
                className="absolute w-1.5 h-1.5 bg-[#00FFFF]/70 rounded-full"
                style={{
                  transform: `rotate(${angle}deg) translate(1.5px, 0)`,
                  transformOrigin: "center",
                }}
              />
            ))}
            <div className="absolute w-1.5 h-1.5 bg-white/70 rounded-full left-0.75 top-0.75" />
          </div>
        </motion.div>
      ))}
    </div>
  )
}

export function WaterWaves({ className = "" }: { className?: string }) {
  const { thingyanIntensity } = useThingyanTheme()

// Adjust opacity based on intensity
  const opacity = {
    subtle: 0.1,
    moderate: 0.2,
    immersive: 0.3,
  }[thingyanIntensity]

return (
    <div className={`absolute bottom-0 left-0 right-0 h-40 overflow-hidden pointer-events-none ${className}`}>
      {[1, 2, 3].map((i) => (
        <motion.div
          key={`wave-${i}`}
          className="absolute bottom-0 left-0 right-0 h-16"
          style={{
            background: `rgba(0, 255, 255, ${opacity * i})`,
            borderRadius: "50% 50% 0 0",
            bottom: `${(i - 1) * 10}px`,
          }}
          animate={{
            scaleX: [0.8, 1.2, 0.8],
            scaleY: [0.8, 1, 0.8],
            x: ["-10%", "10%", "-10%"],
          }}
          transition={{
            duration: 7 + i,
            repeat: Number.POSITIVE_INFINITY,
            ease: "easeInOut",
          }}
        />
      ))}
    </div>
  )
}

export function ThingyanBackground({ children }: { children: React.ReactNode }) {
  const { thingyanIntensity } = useThingyanTheme()

return (
    <div className="relative overflow-hidden">
      {/* Background elements based on intensity */}
      {thingyanIntensity !== "subtle" && <WaterRipples />}
      <WaterDroplets count={thingyanIntensity === "subtle" ? 10 : thingyanIntensity === "moderate" ? 20 : 30} />
      {thingyanIntensity === "immersive" && <FloatingFlowers />}

{/* Add subtle glow effect for immersive mode */}
      {thingyanIntensity === "immersive" && (
        <motion.div
          className="absolute inset-0 bg-[#00FFFF]/5 pointer-events-none"
          animate={{
            opacity: [0.05, 0.1, 0.05],
          }}
          transition={{
            duration: 3,
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "mirror",
          }}
        />
      )}

{/* Content */}
      <div className="relative z-10">{children}</div>

{/* Bottom waves */}
      {thingyanIntensity !== "subtle" && <WaterWaves />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui-kit.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { LocalizedText } from "@/components/ui/localized-text"
import { ArrowRight, Settings, Search, Heart, Star, Smartphone, Zap, Shield, Globe, RefreshCw } from "lucide-react"

export default function UIKit() {
  const [switchValue, setSwitchValue] = useState(false)
  const [sliderValue, setSliderValue] = useState([50])

return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="heading-1 mb-8">eSIM Myanmar UI Kit</h1>

<Tabs defaultValue="colors" className="w-full">
        <TabsList className="mb-8">
          <TabsTrigger value="colors">Colors</TabsTrigger>
          <TabsTrigger value="typography">Typography</TabsTrigger>
          <TabsTrigger value="buttons">Buttons</TabsTrigger>
          <TabsTrigger value="inputs">Inputs</TabsTrigger>
          <TabsTrigger value="cards">Cards</TabsTrigger>
          <TabsTrigger value="components">Components</TabsTrigger>
        </TabsList>

{/* Colors */}
        <TabsContent value="colors" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Primary Colors</CardTitle>
              <CardDescription>The main brand colors for eSIM Myanmar</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00FFFF]"></div>
                  <p className="font-medium">Primary</p>
                  <p className="text-sm text-[#B0BEC5]">#00FFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00CCFF]"></div>
                  <p className="font-medium">Primary Variant</p>
                  <p className="text-sm text-[#B0BEC5]">#00CCFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#1E2F3C]"></div>
                  <p className="font-medium">Background</p>
                  <p className="text-sm text-[#B0BEC5]">#1E2F3C</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#263A49]"></div>
                  <p className="font-medium">Surface</p>
                  <p className="text-sm text-[#B0BEC5]">#263A49</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Text Colors</CardTitle>
              <CardDescription>Colors used for text and content</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-white flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">White</p>
                  <p className="text-sm text-[#B0BEC5]">#FFFFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#B0BEC5] flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Muted</p>
                  <p className="text-sm text-[#B0BEC5]">#B0BEC5</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#00FFFF] flex items-center justify-center">
                    <span className="text-[#1E2F3C] font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Accent</p>
                  <p className="text-sm text-[#B0BEC5]">#00FFFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-[#FF3B30] flex items-center justify-center">
                    <span className="text-white font-bold">Aa</span>
                  </div>
                  <p className="font-medium">Error</p>
                  <p className="text-sm text-[#B0BEC5]">#FF3B30</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Gradients</CardTitle>
              <CardDescription>Gradient combinations for backgrounds and elements</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-r from-[#00FFFF] to-[#00CCFF]"></div>
                  <p className="font-medium">Primary Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-#00FFFF to-#00CCFF</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-br from-[#263A49] to-[#1E2F3C]"></div>
                  <p className="font-medium">Background Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-#263A49 to-#1E2F3C</p>
                </div>
                <div className="space-y-2">
                  <div className="w-full h-24 rounded-lg bg-gradient-to-r from-transparent via-[#00FFFF]/30 to-transparent"></div>
                  <p className="font-medium">Divider Gradient</p>
                  <p className="text-sm text-[#B0BEC5]">from-transparent via-#00FFFF/30 to-transparent</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Typography */}
        <TabsContent value="typography" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Headings</CardTitle>
              <CardDescription>Typography styles for headings</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h1 className="heading-1">Heading 1</h1>
                <p className="text-sm text-[#B0BEC5] mt-2">text-4xl md:text-6xl font-bold gradient-text glow-text</p>
              </div>
              <div>
                <h2 className="heading-2">Heading 2</h2>
                <p className="text-sm text-[#B0BEC5] mt-2">text-3xl md:text-4xl font-bold</p>
              </div>
              <div>
                <h3 className="heading-3">Heading 3</h3>
                <p className="text-sm text-[#B0BEC5] mt-2">text-2xl font-bold</p>
              </div>
              <div>
                <h4 className="text-xl font-semibold">Heading 4</h4>
                <p className="text-sm text-[#B0BEC5] mt-2">text-xl font-semibold</p>
              </div>
              <div>
                <h5 className="text-lg font-medium">Heading 5</h5>
                <p className="text-sm text-[#B0BEC5] mt-2">text-lg font-medium</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Body Text</CardTitle>
              <CardDescription>Typography styles for body content</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <p className="text-xl text-[#B0BEC5]">Large Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-xl text-[#B0BEC5]</p>
              </div>
              <div>
                <p className="text-body">Regular Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-body (text-[#B0BEC5])</p>
              </div>
              <div>
                <p className="text-sm text-[#B0BEC5]">Small Body Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-sm text-[#B0BEC5]</p>
              </div>
              <div>
                <p className="text-highlight">Highlighted Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">text-highlight (text-[#00FFFF])</p>
              </div>
              <div>
                <p className="gradient-text">Gradient Text</p>
                <p className="text-sm text-[#B0BEC5] mt-2">gradient-text</p>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Localized Text</CardTitle>
              <CardDescription>Examples of text in both English and Myanmar</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <p className="font-medium">English:</p>
                <p>Experience the convenience of digital SIM technology in Myanmar.</p>
              </div>
              <div className="space-y-2">
                <p className="font-medium">Myanmar:</p>
                <p className="mm">မြန်မာနိုင်ငံတွင် ဒီဂျစ်တယ် SIM နည်းပညာ၏ အဆင်ပြေလွယ်ကူမှုကို ခံစားပါ။</p>
              </div>
              <div className="space-y-2">
                <p className="font-medium">LocalizedText Component:</p>
                <p>
                  <LocalizedText
                    en="Check if your device supports eSIM technology."
                    mm="သင့်စက်ပစ္စည်းသည် eSIM နည်းပညာကို ထောက်ပံ့ခြင်း ရှိမရှိ စစ်ဆေးပါ။"
                  />
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Buttons */}
        <TabsContent value="buttons" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Button Styles</CardTitle>
              <CardDescription>Different button styles for various actions</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Button className="btn-primary w-full">Primary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-primary</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-secondary w-full">Secondary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-secondary</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-tertiary">Tertiary Button</Button>
                    <p className="text-sm text-[#B0BEC5]">btn-tertiary</p>
                  </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Button className="btn-primary w-full flex items-center">
                      Check Compatibility
                      <ArrowRight className="ml-2 h-5 w-5" />
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">With icon</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-primary w-full" disabled>
                      Disabled Button
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">Disabled state</p>
                  </div>

<div className="space-y-2">
                    <Button className="btn-primary w-full">
                      <span className="flex items-center justify-center">
                        <svg
                          className="animate-spin h-5 w-5 mr-2"
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                          <path
                            className="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                          ></path>
                        </svg>
                        Loading...
                      </span>
                    </Button>
                    <p className="text-sm text-[#B0BEC5]">Loading state</p>
                  </div>

<div className="space-y-2">
                    <div className="flex gap-2">
                      <Button className="btn-primary" size="sm">
                        Small
                      </Button>
                      <Button className="btn-primary">Default</Button>
                      <Button className="btn-primary" size="lg">
                        Large
                      </Button>
                    </div>
                    <p className="text-sm text-[#B0BEC5]">Size variants</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Button Animations</CardTitle>
              <CardDescription>Interactive button animations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="space-y-2">
                  <Button className="btn-primary w-full group relative overflow-hidden">
                    <span className="relative z-10">Hover Me</span>
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                      initial={{ x: "-100%" }}
                      animate={{ x: "200%" }}
                      transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                    />
                  </Button>
                  <p className="text-sm text-[#B0BEC5]">Shimmer effect</p>
                </div>

<div className="space-y-2">
                  <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                    <Button className="btn-primary w-full">Scale on Hover</Button>
                  </motion.div>
                  <p className="text-sm text-[#B0BEC5]">Scale animation</p>
                </div>

<div className="space-y-2">
                  <Button className="btn-secondary w-full group">
                    <span className="flex items-center">
                      Learn More
                      <ArrowRight className="ml-2 h-5 w-5 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0" />
                    </span>
                  </Button>
                  <p className="text-sm text-[#B0BEC5]">Icon reveal</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Inputs */}
        <TabsContent value="inputs" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Form Controls</CardTitle>
              <CardDescription>Input elements for forms</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="default-input">Text Input</Label>
                    <Input id="default-input" placeholder="Enter your name" className="input-primary" />
                    <p className="text-sm text-[#B0BEC5]">input-primary</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="disabled-input">Disabled Input</Label>
                    <Input id="disabled-input" placeholder="Disabled input" disabled className="input-primary" />
                    <p className="text-sm text-[#B0BEC5]">Disabled state</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="textarea">Textarea</Label>
                    <Textarea id="textarea" placeholder="Enter your message" className="input-primary min-h-[120px]" />
                    <p className="text-sm text-[#B0BEC5]">Multiline input</p>
                  </div>
                </div>

<div className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="search-input">Search Input</Label>
                    <div className="relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]" size={18} />
                      <Input id="search-input" placeholder="Search..." className="input-primary pl-10" />
                    </div>
                    <p className="text-sm text-[#B0BEC5]">With icon</p>
                  </div>

<div className="space-y-4">
                    <div className="flex items-center space-x-2">
                      <Switch id="airplane-mode" checked={switchValue} onCheckedChange={setSwitchValue} />
                      <Label htmlFor="airplane-mode">Airplane Mode</Label>
                    </div>
                    <p className="text-sm text-[#B0BEC5]">Switch component</p>
                  </div>

<div className="space-y-4">
                    <Label htmlFor="slider">Slider: {sliderValue}%</Label>
                    <Slider
                      id="slider"
                      min={0}
                      max={100}
                      step={1}
                      value={sliderValue}
                      onValueChange={setSliderValue}
                      className="w-full"
                    />
                    <p className="text-sm text-[#B0BEC5]">Slider component</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Cards */}
        <TabsContent value="cards" className="space-y-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-2">
              <div className="card-primary">
                <h3 className="text-xl font-bold mb-3">Primary Card</h3>
                <p className="text-[#B0BEC5]">This is the primary card style with gradient background.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-primary</p>
            </div>

<div className="space-y-2">
              <div className="card-secondary">
                <h3 className="text-xl font-bold mb-3">Secondary Card</h3>
                <p className="text-[#B0BEC5]">This is the secondary card style with solid background.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-secondary</p>
            </div>

<div className="space-y-2">
              <div className="card-primary card-hover">
                <h3 className="text-xl font-bold mb-3">Hover Card</h3>
                <p className="text-[#B0BEC5]">This card has hover effects. Try hovering over it!</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">card-primary card-hover</p>
            </div>

<div className="space-y-2">
              <div className="glass p-6 rounded-xl">
                <h3 className="text-xl font-bold mb-3">Glass Card</h3>
                <p className="text-[#B0BEC5]">This card has a glassmorphism effect.</p>
              </div>
              <p className="text-sm text-[#B0BEC5]">glass</p>
            </div>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Feature Card</CardTitle>
              <CardDescription>Example of a feature card with icon</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-start">
                <div className="w-12 h-12 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mr-4 flex-shrink-0">
                  <Zap className="h-6 w-6 text-[#00FFFF]" />
                </div>
                <div>
                  <h3 className="text-xl font-bold mb-2">Instant Activation</h3>
                  <p className="text-[#B0BEC5]">
                    Activate your eSIM instantly by scanning a QR code - no physical SIM card needed.
                  </p>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button variant="link" className="text-[#00FFFF] p-0">
                Learn more <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

{/* Components */}
        <TabsContent value="components" className="space-y-8">
          <Card>
            <CardHeader>
              <CardTitle>Badges</CardTitle>
              <CardDescription>Status and category indicators</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-4">
                <div className="space-y-2">
                  <Badge className="badge-primary">New Feature</Badge>
                  <p className="text-sm text-[#B0BEC5]">badge-primary</p>
                </div>
                <div className="space-y-2">
                  <Badge className="badge-secondary">Coming Soon</Badge>
                  <p className="text-sm text-[#B0BEC5]">badge-secondary</p>
                </div>
                <div className="space-y-2">
                  <Badge variant="outline" className="text-[#00FFFF] border-[#00FFFF]/30">
                    Premium
                  </Badge>
                  <p className="text-sm text-[#B0BEC5]">outline variant</p>
                </div>
                <div className="space-y-2">
                  <Badge variant="destructive">Error</Badge>
                  <p className="text-sm text-[#B0BEC5]">destructive variant</p>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Feature Icons</CardTitle>
              <CardDescription>Icons used to represent features</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
                {[
                  { icon: <Smartphone className="h-8 w-8 text-[#00FFFF]" />, label: "Multiple Profiles" },
                  { icon: <Zap className="h-8 w-8 text-[#00FFFF]" />, label: "Instant Activation" },
                  { icon: <Shield className="h-8 w-8 text-[#00FFFF]" />, label: "Enhanced Security" },
                  { icon: <Globe className="h-8 w-8 text-[#00FFFF]" />, label: "Global Compatibility" },
                  { icon: <RefreshCw className="h-8 w-8 text-[#00FFFF]" />, label: "Easy Switching" },
                ].map((item, index) => (
                  <div key={index} className="flex flex-col items-center text-center">
                    <div className="w-16 h-16 rounded-full bg-[#00FFFF]/10 flex items-center justify-center mb-3">
                      {item.icon}
                    </div>
                    <p className="font-medium">{item.label}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Dividers</CardTitle>
              <CardDescription>Separators for content sections</CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              <div className="space-y-2">
                <div className="divider"></div>
                <p className="text-sm text-[#B0BEC5]">divider</p>
              </div>

<div className="space-y-2">
                <div className="flex items-center">
                  <div className="flex-grow h-px bg-[#00FFFF]/10"></div>
                  <span className="px-4 text-[#B0BEC5]">OR</span>
                  <div className="flex-grow h-px bg-[#00FFFF]/10"></div>
                </div>
                <p className="text-sm text-[#B0BEC5]">divider with text</p>
              </div>

<div className="space-y-2">
                <div className="w-16 h-1 bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] rounded-full"></div>
                <p className="text-sm text-[#B0BEC5]">section divider</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/drive-storage-display.tsx" isMerged="true"
import { formatDriveSize } from "@/utils/typography-utils"

interface DriveStorageDisplayProps {
  totalBytes: number
  usedBytes: number
  showProgress?: boolean
  showText?: boolean
  className?: string
  progressClassName?: string
  textClassName?: string
}

export function DriveStorageDisplay({
  totalBytes,
  usedBytes,
  showProgress = true,
  showText = true,
  className = "",
  progressClassName = "",
  textClassName = "",
}: DriveStorageDisplayProps) {
  // Calculate percentage used
  const percentUsed = Math.min(100, Math.round((usedBytes / totalBytes) * 100)) || 0

// Format sizes
  const formattedTotal = formatDriveSize(totalBytes)
  const formattedUsed = formatDriveSize(usedBytes)

// Determine color based on usage
  let progressColor = "bg-[#00FFFF]"
  if (percentUsed > 90) {
    progressColor = "bg-red-500"
  } else if (percentUsed > 75) {
    progressColor = "bg-amber-500"
  } else if (percentUsed > 50) {
    progressColor = "bg-blue-500"
  }

return (
    <div className={`space-y-2 ${className}`}>
      {showText && (
        <div className={`flex justify-between text-sm ${textClassName}`}>
          <span className="text-[#B0BEC5]">
            {formattedUsed} of {formattedTotal} used
          </span>
          <span className="font-medium text-[#00FFFF]">{percentUsed}%</span>
        </div>
      )}

{showProgress && (
        <div className="relative h-2 w-full bg-[#1E2F3C] rounded-full overflow-hidden">
          <div
            className={`absolute top-0 left-0 h-full ${progressColor} rounded-full transition-all duration-500 ease-in-out`}
            style={{ width: `${percentUsed}%` }}
          />
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/enhanced-accordion.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronDown, Plus, Minus } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedAccordionItemProps {
  id: string
  title: React.ReactNode
  content: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
}

export interface EnhancedAccordionProps {
  items: EnhancedAccordionItemProps[]
  defaultOpen?: string[]
  multiple?: boolean
  variant?: "default" | "bordered" | "separated" | "minimal"
  iconPosition?: "left" | "right"
  iconType?: "chevron" | "plus" | "none"
  animated?: boolean
  className?: string
  itemClassName?: string
}

export const EnhancedAccordion = forwardRef<HTMLDivElement, EnhancedAccordionProps>(
  (
    {
      items,
      defaultOpen = [],
      multiple = false,
      variant = "default",
      iconPosition = "right",
      iconType = "chevron",
      animated = true,
      className,
      itemClassName,
    },
    ref,
  ) => {
    const [openItems, setOpenItems] = useState<string[]>(defaultOpen)

const handleToggle = (id: string) => {
      if (multiple) {
        setOpenItems((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))
      } else {
        setOpenItems((prev) => (prev.includes(id) ? [] : [id]))
      }
    }

// Define variant classes
    const variantClasses = {
      default: {
        container: "border rounded-lg border-[#00FFFF]/20 divide-y divide-[#00FFFF]/20",
        item: "px-4 py-3",
      },
      bordered: {
        container: "divide-y divide-[#00FFFF]/20",
        item: "border border-[#00FFFF]/20 rounded-lg px-4 py-3 mb-2",
      },
      separated: {
        container: "space-y-2",
        item: "bg-[#1E2F3C] rounded-lg px-4 py-3",
      },
      minimal: {
        container: "space-y-1",
        item: "px-2 py-2 hover:bg-[#00FFFF]/5 rounded-md",
      },
    }

// Get icon component based on type and state
    const getIcon = (id: string) => {
      const isOpen = openItems.includes(id)

switch (iconType) {
        case "chevron":
          return (
            <ChevronDown
              className={cn("h-5 w-5 transition-transform duration-200", isOpen && "transform rotate-180")}
            />
          )
        case "plus":
          return isOpen ? <Minus className="h-5 w-5" /> : <Plus className="h-5 w-5" />
        case "none":
          return null
        default:
          return null
      }
    }

return (
      <div ref={ref} className={cn(variant !== "bordered" && variantClasses[variant].container, className)}>
        {items.map((item) => (
          <div key={item.id} className={cn(variant === "bordered" && variantClasses[variant].item, itemClassName)}>
            <button
              onClick={() => !item.disabled && handleToggle(item.id)}
              className={cn(
                "flex items-center justify-between w-full text-left",
                variant !== "bordered" && variantClasses[variant].item,
                item.disabled && "opacity-50 cursor-not-allowed",
              )}
              disabled={item.disabled}
              aria-expanded={openItems.includes(item.id)}
            >
              <div className={cn("flex items-center", iconPosition === "left" && "flex-row-reverse")}>
                {item.icon && <span className={cn(iconPosition === "left" ? "ml-2" : "mr-2")}>{item.icon}</span>}
                <span className="font-medium">{item.title}</span>
              </div>

{iconType !== "none" && <span className="flex-shrink-0 ml-2">{getIcon(item.id)}</span>}
            </button>

<AnimatePresence initial={false}>
              {openItems.includes(item.id) && (
                <motion.div
                  initial={animated ? { height: 0, opacity: 0 } : false}
                  animate={animated ? { height: "auto", opacity: 1 } : { opacity: 1 }}
                  exit={animated ? { height: 0, opacity: 0 } : { opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  className="overflow-hidden"
                >
                  <div className={cn("pt-2 pb-1", variant !== "bordered" && "px-4", variant === "minimal" && "pl-6")}>
                    {item.content}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        ))}
      </div>
    )
  },
)

EnhancedAccordion.displayName = "EnhancedAccordion"
[V0_FILE]typescriptreact:file="components/ui/enhanced-alert.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Alert, type AlertProps } from "@/components/ui/alert"
import { AlertCircle, CheckCircle, AlertTriangle, Info, X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedAlertProps extends AlertProps {
  variant?: "default" | "info" | "success" | "warning" | "error"
  title?: string
  description?: string
  icon?: React.ReactNode
  withAnimation?: boolean
  animationDelay?: number
  onClose?: () => void
}

const EnhancedAlert = forwardRef<HTMLDivElement, EnhancedAlertProps>(
  (
    {
      className,
      children,
      variant = "default",
      title,
      description,
      icon,
      withAnimation = false,
      animationDelay = 0,
      onClose,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      info: "bg-blue-900/20 border-blue-500/30 text-blue-100",
      success: "bg-green-900/20 border-green-500/30 text-green-100",
      warning: "bg-amber-900/20 border-amber-500/30 text-amber-100",
      error: "bg-red-900/20 border-red-500/30 text-red-100",
    }

// Define variant icons
    const variantIcons = {
      default: <AlertCircle className="h-5 w-5 text-[#00FFFF]" />,
      info: <Info className="h-5 w-5 text-blue-400" />,
      success: <CheckCircle className="h-5 w-5 text-green-400" />,
      warning: <AlertTriangle className="h-5 w-5 text-amber-400" />,
      error: <AlertCircle className="h-5 w-5 text-red-400" />,
    }

// Combine all classes
    const alertClasses = cn(variantClasses[variant], "relative", className)

const alertContent = (
      <Alert ref={ref} className={alertClasses} {...props}>
        <div className="flex">
          {icon || variantIcons[variant]}
          <div className="ml-3 flex-1">
            {title && <div className="font-medium">{title}</div>}
            {description && <div className="text-sm opacity-90">{description}</div>}
            {children}
          </div>
          {onClose && (
            <button
              onClick={onClose}
              className="ml-auto -mr-1 flex-shrink-0 p-1 rounded-full hover:bg-white/10 transition-colors"
              aria-label="Close"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>
      </Alert>
    )

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3, delay: animationDelay }}
        >
          {alertContent}
        </motion.div>
      )
    }

// Regular alert without animation
    return alertContent
  },
)

EnhancedAlert.displayName = "EnhancedAlert"

export { EnhancedAlert }
[V0_FILE]typescriptreact:file="components/ui/enhanced-avatar.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from "@/components/ui/avatar"
import { cn } from "@/lib/utils"

export interface EnhancedAvatarProps extends AvatarProps {
  src?: string
  alt?: string
  fallback?: string
  status?: "online" | "offline" | "away" | "busy" | "none"
  variant?: "circle" | "rounded" | "square"
  size?: "xs" | "sm" | "md" | "lg" | "xl"
  withBorder?: boolean
  borderColor?: string
  withAnimation?: boolean
  animationType?: "pulse" | "bounce" | "shake"
}

const EnhancedAvatar = forwardRef<HTMLDivElement, EnhancedAvatarProps>(
  (
    {
      className,
      src,
      alt = "",
      fallback,
      status = "none",
      variant = "circle",
      size = "md",
      withBorder = false,
      borderColor = "border-[#00FFFF]/30",
      withAnimation = false,
      animationType = "pulse",
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      circle: "rounded-full",
      rounded: "rounded-xl",
      square: "rounded-none",
    }

// Define size classes
    const sizeClasses = {
      xs: "h-8 w-8 text-xs",
      sm: "h-10 w-10 text-sm",
      md: "h-12 w-12 text-base",
      lg: "h-16 w-16 text-lg",
      xl: "h-20 w-20 text-xl",
    }

// Define status classes
    const statusClasses = {
      online: "bg-green-500",
      offline: "bg-gray-500",
      away: "bg-amber-500",
      busy: "bg-red-500",
      none: "hidden",
    }

// Define animation classes
    const animationClasses = {
      pulse: "animate-pulse",
      bounce: "animate-bounce",
      shake: "animate-[shake_0.5s_ease-in-out_infinite]",
    }

// Border class
    const borderClass = withBorder ? `border-2 ${borderColor}` : ""

// Animation class
    const animationClass = withAnimation ? animationClasses[animationType] : ""

// Combine all classes
    const avatarClasses = cn(
      variantClasses[variant],
      sizeClasses[size],
      borderClass,
      animationClass,
      "relative",
      className,
    )

return (
      <div className="relative inline-block">
        <Avatar ref={ref} className={avatarClasses} {...props}>
          {src && <AvatarImage src={src} alt={alt} />}
          {fallback && <AvatarFallback>{fallback.substring(0, 2).toUpperCase()}</AvatarFallback>}
        </Avatar>

{status !== "none" && (
          <span
            className={cn(
              "absolute bottom-0 right-0 block rounded-full ring-2 ring-white",
              statusClasses[status],
              size === "xs" ? "h-2 w-2" : "h-3 w-3",
            )}
          />
        )}
      </div>
    )
  },
)

EnhancedAvatar.displayName = "EnhancedAvatar"

export { EnhancedAvatar }
[V0_FILE]typescriptreact:file="components/ui/enhanced-badge.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Badge, type BadgeProps } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

export interface EnhancedBadgeProps extends BadgeProps {
  variant?: "primary" | "secondary" | "outline" | "glow"
  withAnimation?: boolean
  animationDelay?: number
}

const EnhancedBadge = forwardRef<HTMLDivElement, EnhancedBadgeProps>(
  ({ className, children, variant = "primary", withAnimation = false, animationDelay = 0, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] hover:bg-[#00FFFF]/20",
      secondary: "bg-[#263A49] text-[#B0BEC5] hover:bg-[#324b5e]",
      outline: "bg-transparent border border-[#00FFFF]/30 text-[#00FFFF] hover:border-[#00FFFF]/60",
      glow: "bg-[#00FFFF]/10 border border-[#00FFFF]/20 text-[#00FFFF] shadow-[0_0_10px_rgba(0,255,255,0.3)] hover:shadow-[0_0_15px_rgba(0,255,255,0.5)]",
    }

// Combine all classes
    const badgeClasses = cn(variantClasses[variant], "transition-all duration-300 font-medium", className)

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: animationDelay }}
        >
          <Badge ref={ref} className={badgeClasses} {...props}>
            {children}
          </Badge>
        </motion.div>
      )
    }

// Regular badge without animation
    return (
      <Badge ref={ref} className={badgeClasses} {...props}>
        {children}
      </Badge>
    )
  },
)

EnhancedBadge.displayName = "EnhancedBadge"

export { EnhancedBadge }
[V0_FILE]typescriptreact:file="components/ui/enhanced-button.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Button as BaseButton, type ButtonProps } from "@/components/ui/button"
import { Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedButtonProps extends ButtonProps {
  isLoading?: boolean
  loadingText?: string
  withShimmer?: boolean
  withScale?: boolean
  withGlow?: boolean
  size?: "sm" | "default" | "lg" | "xl"
  variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "link" | "icon"
}

const EnhancedButton = forwardRef<HTMLButtonElement, EnhancedButtonProps>(
  (
    {
      className,
      children,
      isLoading,
      loadingText,
      withShimmer = false,
      withScale = false,
      withGlow = false,
      variant = "primary",
      size = "default",
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      primary:
        "bg-gradient-to-r from-[#00FFFF] to-[#00CCFF] text-[#1E2F3C] hover:opacity-90 shadow-lg shadow-[#00FFFF]/20",
      secondary: "border border-[#00FFFF] text-[#00FFFF] hover:bg-[#00FFFF]/10 bg-transparent",
      tertiary: "text-[#00FFFF] hover:text-[#00CCFF] bg-transparent",
      outline: "border border-[#00FFFF]/30 text-[#00FFFF] hover:border-[#00FFFF] hover:bg-[#00FFFF]/5 bg-transparent",
      ghost: "text-white hover:bg-[#00FFFF]/10 hover:text-[#00FFFF] bg-transparent",
      link: "text-[#00FFFF] hover:text-[#00CCFF] underline-offset-4 hover:underline bg-transparent p-0 h-auto",
      icon: "w-10 h-10 rounded-full flex items-center justify-center bg-[#263A49] text-[#00FFFF] hover:bg-[#00FFFF]/20 p-0",
    }

// Define size classes
    const sizeClasses = {
      sm: "px-3 py-1 text-sm rounded-md",
      default: "px-6 py-3 rounded-lg",
      lg: "px-8 py-4 text-lg rounded-lg",
      xl: "px-10 py-5 text-xl rounded-xl",
    }

// Add glow effect if requested
    const glowClass = withGlow ? "hover:shadow-[0_0_15px_rgba(0,255,255,0.5)]" : ""

// Combine all classes
    const buttonClasses = cn(
      variantClasses[variant],
      sizeClasses[size],
      glowClass,
      "font-medium transition-all duration-300",
      className,
    )

// If withScale is true, wrap with motion.div
    if (withScale) {
      return (
        <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
          <BaseButton ref={ref} className={buttonClasses} disabled={isLoading || props.disabled} {...props}>
            {isLoading ? (
              <span className="flex items-center justify-center">
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {loadingText || "Loading..."}
              </span>
            ) : (
              <span className="relative z-10 flex items-center justify-center">
                {children}
                {withShimmer && (
                  <motion.div
                    className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                    initial={{ x: "-100%" }}
                    animate={{ x: "200%" }}
                    transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
                  />
                )}
              </span>
            )}
          </BaseButton>
        </motion.div>
      )
    }

// Regular button without scale animation
    return (
      <BaseButton ref={ref} className={buttonClasses} disabled={isLoading || props.disabled} {...props}>
        {isLoading ? (
          <span className="flex items-center justify-center">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            {loadingText || "Loading..."}
          </span>
        ) : (
          <span className="relative z-10 flex items-center justify-center">
            {children}
            {withShimmer && (
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-[#00FFFF]/0 via-[#00FFFF]/30 to-[#00FFFF]/0"
                initial={{ x: "-100%" }}
                animate={{ x: "200%" }}
                transition={{ repeat: Number.POSITIVE_INFINITY, duration: 2, ease: "linear" }}
              />
            )}
          </span>
        )}
      </BaseButton>
    )
  },
)

EnhancedButton.displayName = "EnhancedButton"

export { EnhancedButton }
[V0_FILE]typescriptreact:file="components/ui/enhanced-card.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Card, type CardProps } from "@/components/ui/card"
import { cn } from "@/lib/utils"

export interface EnhancedCardProps extends CardProps {
  variant?: "primary" | "secondary" | "glass" | "glassDark"
  withHover?: boolean
  withAnimation?: boolean
  animationDelay?: number
}

const EnhancedCard = forwardRef<HTMLDivElement, EnhancedCardProps>(
  (
    {
      className,
      children,
      variant = "primary",
      withHover = false,
      withAnimation = false,
      animationDelay = 0,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-gradient-to-br from-[#263A49] to-[#1E2F3C] border-[#00FFFF]/10",
      secondary: "bg-[#1E2F3C] border-[#00FFFF]/10",
      glass: "glass border-[#00FFFF]/10",
      glassDark: "glass-dark border-[#00FFFF]/5",
    }

// Add hover effect if requested
    const hoverClass = withHover
      ? "transition-all duration-300 hover:border-[#00FFFF]/30 hover:shadow-lg hover:shadow-[#00FFFF]/10"
      : ""

// Combine all classes
    const cardClasses = cn(variantClasses[variant], hoverClass, "shadow-lg", className)

// If withAnimation is true, wrap with motion.div
    if (withAnimation) {
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: animationDelay }}
          viewport={{ once: true }}
        >
          <Card ref={ref} className={cardClasses} {...props}>
            {children}
          </Card>
        </motion.div>
      )
    }

// Regular card without animation
    return (
      <Card ref={ref} className={cardClasses} {...props}>
        {children}
      </Card>
    )
  },
)

EnhancedCard.displayName = "EnhancedCard"

export { EnhancedCard }
[V0_FILE]typescriptreact:file="components/ui/enhanced-carousel.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence, type PanInfo } from "framer-motion"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedCarouselProps {
  items: React.ReactNode[]
  autoPlay?: boolean
  interval?: number
  showArrows?: boolean
  showDots?: boolean
  infinite?: boolean
  effect?: "slide" | "fade" | "zoom"
  className?: string
  slideClassName?: string
  dotsClassName?: string
  arrowClassName?: string
}

export const EnhancedCarousel = forwardRef<HTMLDivElement, EnhancedCarouselProps>(
  (
    {
      items,
      autoPlay = false,
      interval = 5000,
      showArrows = true,
      showDots = true,
      infinite = true,
      effect = "slide",
      className,
      slideClassName,
      dotsClassName,
      arrowClassName,
    },
    ref,
  ) => {
    const [currentIndex, setCurrentIndex] = useState(0)
    const [direction, setDirection] = useState(0)
    const [isPaused, setIsPaused] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)

// Auto play functionality
    useEffect(() => {
      if (!autoPlay || isPaused || items.length <= 1) return

const timer = setInterval(() => {
        handleNext()
      }, interval)

return () => clearInterval(timer)
    }, [autoPlay, interval, currentIndex, isPaused, items.length])

const handlePrevious = () => {
      setDirection(-1)
      setCurrentIndex((prev) => {
        if (prev === 0) {
          return infinite ? items.length - 1 : 0
        }
        return prev - 1
      })
    }

const handleNext = () => {
      setDirection(1)
      setCurrentIndex((prev) => {
        if (prev === items.length - 1) {
          return infinite ? 0 : items.length - 1
        }
        return prev + 1
      })
    }

const handleDotClick = (index: number) => {
      setDirection(index > currentIndex ? 1 : -1)
      setCurrentIndex(index)
    }

const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
      const threshold = 50

if (info.offset.x > threshold) {
        handlePrevious()
      } else if (info.offset.x < -threshold) {
        handleNext()
      }
    }

// Define animation variants based on effect
    const slideVariants = {
      slide: {
        enter: (direction: number) => ({
          x: direction > 0 ? "100%" : "-100%",
          opacity: 1,
        }),
        center: {
          x: 0,
          opacity: 1,
        },
        exit: (direction: number) => ({
          x: direction > 0 ? "-100%" : "100%",
          opacity: 1,
        }),
      },
      fade: {
        enter: {
          opacity: 0,
        },
        center: {
          opacity: 1,
        },
        exit: {
          opacity: 0,
        },
      },
      zoom: {
        enter: {
          opacity: 0,
          scale: 0.8,
        },
        center: {
          opacity: 1,
          scale: 1,
        },
        exit: {
          opacity: 0,
          scale: 1.2,
        },
      },
    }

return (
      <div
        ref={ref}
        className={cn("relative overflow-hidden rounded-lg", className)}
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
      >
        <div ref={containerRef} className="relative w-full h-full">
          <AnimatePresence initial={false} custom={direction} mode="popLayout">
            <motion.div
              key={currentIndex}
              custom={direction}
              variants={slideVariants[effect]}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{
                x: { type: "spring", stiffness: 300, damping: 30 },
                opacity: { duration: 0.4 },
                scale: { duration: 0.4 },
              }}
              drag={effect === "slide" ? "x" : false}
              dragConstraints={{ left: 0, right: 0 }}
              dragElastic={0.1}
              onDragEnd={handleDragEnd}
              className={cn("absolute inset-0 w-full h-full", slideClassName)}
            >
              {items[currentIndex]}
            </motion.div>
          </AnimatePresence>

{showArrows && items.length > 1 && (
            <>
              <button
                onClick={handlePrevious}
                className={cn(
                  "absolute top-1/2 left-2 transform -translate-y-1/2 z-10",
                  "w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center",
                  "text-white hover:bg-black/50 transition-colors",
                  !infinite && currentIndex === 0 && "opacity-50 cursor-not-allowed",
                  arrowClassName,
                )}
                disabled={!infinite && currentIndex === 0}
                aria-label="Previous slide"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>

<button
                onClick={handleNext}
                className={cn(
                  "absolute top-1/2 right-2 transform -translate-y-1/2 z-10",
                  "w-10 h-10 rounded-full bg-black/30 backdrop-blur-sm flex items-center justify-center",
                  "text-white hover:bg-black/50 transition-colors",
                  !infinite && currentIndex === items.length - 1 && "opacity-50 cursor-not-allowed",
                  arrowClassName,
                )}
                disabled={!infinite && currentIndex === items.length - 1}
                aria-label="Next slide"
              >
                <ChevronRight className="h-6 w-6" />
              </button>
            </>
          )}

{showDots && items.length > 1 && (
            <div
              className={cn(
                "absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10",
                "flex items-center space-x-2",
                dotsClassName,
              )}
            >
              {items.map((_, index) => (
                <button
                  key={index}
                  onClick={() => handleDotClick(index)}
                  className={cn(
                    "w-2 h-2 rounded-full transition-all",
                    index === currentIndex ? "bg-white w-3 h-3" : "bg-white/50 hover:bg-white/80",
                  )}
                  aria-label={`Go to slide ${index + 1}`}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    )
  },
)

EnhancedCarousel.displayName = "EnhancedCarousel"
[V0_FILE]typescriptreact:file="components/ui/enhanced-drawer.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedDrawerProps {
  isOpen: boolean
  onClose: () => void
  title?: React.ReactNode
  description?: React.ReactNode
  children: React.ReactNode
  footer?: React.ReactNode
  position?: "left" | "right" | "top" | "bottom"
  size?: "sm" | "md" | "lg" | "full"
  closeOnClickOutside?: boolean
  showCloseButton?: boolean
  variant?: "default" | "blur" | "minimal"
  className?: string
  contentClassName?: string
  overlayClassName?: string
}

export const EnhancedDrawer = forwardRef<HTMLDivElement, EnhancedDrawerProps>(
  (
    {
      isOpen,
      onClose,
      title,
      description,
      children,
      footer,
      position = "right",
      size = "md",
      closeOnClickOutside = true,
      showCloseButton = true,
      variant = "default",
      className,
      contentClassName,
      overlayClassName,
    },
    ref,
  ) => {
    const [isMounted, setIsMounted] = useState(false)

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          onClose()
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
        // Prevent scrolling when drawer is open
        document.body.style.overflow = "hidden"
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
        // Restore scrolling when drawer is closed
        document.body.style.overflow = ""
      }
    }, [isOpen, onClose])

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

if (!isMounted) {
      return null
    }

// Define size classes based on position
    const sizeClasses = {
      left: {
        sm: "w-64",
        md: "w-80",
        lg: "w-96",
        full: "w-full",
      },
      right: {
        sm: "w-64",
        md: "w-80",
        lg: "w-96",
        full: "w-full",
      },
      top: {
        sm: "h-1/4",
        md: "h-1/3",
        lg: "h-1/2",
        full: "h-full",
      },
      bottom: {
        sm: "h-1/4",
        md: "h-1/3",
        lg: "h-1/2",
        full: "h-full",
      },
    }

// Define position classes
    const positionClasses = {
      left: "inset-y-0 left-0 h-full",
      right: "inset-y-0 right-0 h-full",
      top: "inset-x-0 top-0 w-full",
      bottom: "inset-x-0 bottom-0 w-full",
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      blur: "bg-[#1E2F3C]/80 backdrop-blur-md border-[#00FFFF]/20",
      minimal: "bg-[#1E2F3C] shadow-xl",
    }

// Define border classes based on position
    const borderClasses = {
      left: "border-r",
      right: "border-l",
      top: "border-b",
      bottom: "border-t",
    }

// Animation variants based on position
    const drawerVariants = {
      left: {
        hidden: { x: "-100%" },
        visible: { x: 0 },
        exit: { x: "-100%" },
      },
      right: {
        hidden: { x: "100%" },
        visible: { x: 0 },
        exit: { x: "100%" },
      },
      top: {
        hidden: { y: "-100%" },
        visible: { y: 0 },
        exit: { y: "-100%" },
      },
      bottom: {
        hidden: { y: "100%" },
        visible: { y: 0 },
        exit: { y: "100%" },
      },
    }

return (
      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 overflow-hidden">
            <motion.div
              className={cn("fixed inset-0 bg-black/50 z-0", overlayClassName)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={closeOnClickOutside ? onClose : undefined}
            />

<motion.div
              ref={ref}
              className={cn(
                "fixed z-50",
                positionClasses[position],
                sizeClasses[position][size],
                variantClasses[variant],
                borderClasses[position],
                className,
              )}
              initial="hidden"
              animate="visible"
              exit="exit"
              variants={drawerVariants[position]}
              transition={{ type: "spring", damping: 30, stiffness: 300 }}
            >
              <div className="h-full flex flex-col">
                {(title || description || showCloseButton) && (
                  <div className="p-4 border-b border-[#00FFFF]/10 flex items-center justify-between">
                    <div>
                      {title && <h2 className="text-xl font-semibold">{title}</h2>}
                      {description && <p className="text-sm text-[#B0BEC5]">{description}</p>}
                    </div>

{showCloseButton && (
                      <button
                        className="p-1 rounded-full hover:bg-[#00FFFF]/10 transition-colors"
                        onClick={onClose}
                        aria-label="Close drawer"
                      >
                        <X className="h-5 w-5" />
                      </button>
                    )}
                  </div>
                )}

<div className={cn("flex-1 overflow-auto p-4", contentClassName)}>{children}</div>

{footer && <div className="p-4 border-t border-[#00FFFF]/10">{footer}</div>}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedDrawer.displayName = "EnhancedDrawer"
[V0_FILE]typescriptreact:file="components/ui/enhanced-dropdown.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedDropdownItemProps {
  id: string
  label: React.ReactNode
  icon?: React.ReactNode
  disabled?: boolean
  onClick?: () => void
}

export interface EnhancedDropdownProps {
  trigger: React.ReactNode
  items: EnhancedDropdownItemProps[]
  value?: string
  onChange?: (value: string) => void
  position?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
  width?: "auto" | "trigger" | number
  variant?: "default" | "outline" | "ghost"
  showSelectedCheck?: boolean
  closeOnSelect?: boolean
  className?: string
  triggerClassName?: string
  menuClassName?: string
  itemClassName?: string
}

export const EnhancedDropdown = forwardRef<HTMLDivElement, EnhancedDropdownProps>(
  (
    {
      trigger,
      items,
      value,
      onChange,
      position = "bottom-left",
      width = "auto",
      variant = "default",
      showSelectedCheck = true,
      closeOnSelect = true,
      className,
      triggerClassName,
      menuClassName,
      itemClassName,
    },
    ref,
  ) => {
    const [isOpen, setIsOpen] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)
    const triggerRef = useRef<HTMLDivElement>(null)

// Close dropdown when clicking outside
    useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside)
      }

return () => {
        document.removeEventListener("mousedown", handleClickOutside)
      }
    }, [isOpen])

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
      }
    }, [isOpen])

const handleSelect = (item: EnhancedDropdownItemProps) => {
      if (item.disabled) return

if (onChange) {
        onChange(item.id)
      }

if (item.onClick) {
        item.onClick()
      }

if (closeOnSelect) {
        setIsOpen(false)
      }
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border border-[#00FFFF]/30 hover:bg-[#00FFFF]/10",
      outline: "bg-transparent border border-[#00FFFF]/30 hover:bg-[#00FFFF]/10",
      ghost: "bg-transparent hover:bg-[#00FFFF]/10",
    }

// Define position classes
    const positionClasses = {
      "bottom-left": "top-full left-0 mt-1",
      "bottom-right": "top-full right-0 mt-1",
      "top-left": "bottom-full left-0 mb-1",
      "top-right": "bottom-full right-0 mb-1",
    }

// Calculate width style
    const getWidthStyle = () => {
      if (width === "auto") return {}
      if (width === "trigger" && triggerRef.current) {
        return { width: triggerRef.current.offsetWidth }
      }
      if (typeof width === "number") {
        return { width: `${width}px` }
      }
      return {}
    }

return (
      <div ref={containerRef} className={cn("relative inline-block", className)}>
        <div ref={triggerRef} onClick={() => setIsOpen(!isOpen)} className={cn("cursor-pointer", triggerClassName)}>
          {trigger}
        </div>

<AnimatePresence>
          {isOpen && (
            <motion.div
              ref={ref}
              className={cn(
                "absolute z-50 min-w-[10rem] rounded-md shadow-lg py-1",
                "bg-[#1E2F3C] border border-[#00FFFF]/20",
                positionClasses[position],
                menuClassName,
              )}
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.95 }}
              transition={{ duration: 0.1 }}
              style={getWidthStyle()}
            >
              {items.map((item) => (
                <div
                  key={item.id}
                  onClick={() => handleSelect(item)}
                  className={cn(
                    "flex items-center px-4 py-2 text-sm",
                    !item.disabled && "cursor-pointer hover:bg-[#00FFFF]/10",
                    item.disabled && "opacity-50 cursor-not-allowed",
                    value === item.id && "bg-[#00FFFF]/5 text-[#00FFFF]",
                    itemClassName,
                  )}
                >
                  {item.icon && <span className="mr-2">{item.icon}</span>}
                  <span>{item.label}</span>

{showSelectedCheck && value === item.id && <Check className="ml-auto h-4 w-4" />}
                </div>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  },
)

EnhancedDropdown.displayName = "EnhancedDropdown"
[V0_FILE]typescriptreact:file="components/ui/enhanced-file-upload.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"
import { Upload, X, File, ImageIcon, FileText, Film, Music, AlertTriangle } from "lucide-react"
import { cn } from "@/lib/utils"
import { FileSizeDisplay } from "@/components/ui/file-size-display"
import { TruncatedText } from "@/components/ui/truncated-text"

interface EnhancedFileUploadProps {
  onChange: (files: File[]) => void
  value?: File[]
  multiple?: boolean
  accept?: string
  maxSize?: number // in MB
  maxFiles?: number
  className?: string
  variant?: "default" | "compact" | "minimal"
  showPreview?: boolean
  previewType?: "grid" | "list"
  onError?: (error: string) => void
  uploadProgress?: number // 0-100
  disabled?: boolean
}

export function EnhancedFileUpload({
  onChange,
  value = [],
  multiple = false,
  accept,
  maxSize,
  maxFiles = 5,
  className,
  variant = "default",
  showPreview = true,
  previewType = "grid",
  onError,
  uploadProgress,
  disabled = false,
}: EnhancedFileUploadProps) {
  const [isDragging, setIsDragging] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

// Define variant classes
  const variantClasses = {
    default: "border-2 border-dashed border-[#00FFFF]/30 rounded-lg p-6",
    compact: "border border-dashed border-[#00FFFF]/30 rounded-lg p-3",
    minimal: "border border-[#00FFFF]/20 rounded-lg p-2",
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(e.target.files || [])
    validateAndAddFiles(selectedFiles)

// Reset the input value so the same file can be selected again
    if (fileInputRef.current) {
      fileInputRef.current.value = ""
    }
  }

const validateAndAddFiles = (files: File[]) => {
    setError(null)

// Check if adding these files would exceed the max files limit
    if (maxFiles && value.length + files.length > maxFiles) {
      const errorMsg = `You can only upload a maximum of ${maxFiles} files`
      setError(errorMsg)
      onError?.(errorMsg)
      return
    }

const validFiles = files.filter((file) => {
      // Check file size
      if (maxSize && file.size > maxSize * 1024 * 1024) {
        const errorMsg = `File "${file.name}" exceeds the maximum size of ${maxSize}MB`
        setError(errorMsg)
        onError?.(errorMsg)
        return false
      }

// Check file type if accept is specified
      if (accept) {
        const acceptedTypes = accept.split(",").map((type) => type.trim())
        const fileType = file.type

// Check if the file type matches any of the accepted types
        const isAccepted = acceptedTypes.some((type) => {
          if (type.startsWith(".")) {
            // Check file extension
            return file.name.toLowerCase().endsWith(type.toLowerCase())
          } else if (type.includes("*")) {
            // Handle wildcards like "image/*"
            return fileType.startsWith(type.split("*")[0])
          } else {
            // Exact match
            return fileType === type
          }
        })

if (!isAccepted) {
          const errorMsg = `File "${file.name}" is not an accepted file type`
          setError(errorMsg)
          onError?.(errorMsg)
          return false
        }
      }

return true
    })

if (validFiles.length > 0) {
      onChange([...value, ...validFiles])
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = () => {
    setIsDragging(false)
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)

const droppedFiles = Array.from(e.dataTransfer.files)
    validateAndAddFiles(droppedFiles)
  }

const removeFile = (index: number) => {
    const newFiles = [...value]
    newFiles.splice(index, 1)
    onChange(newFiles)
  }

// Get appropriate icon based on file type
  const getFileIcon = (file: File) => {
    const type = file.type

if (type.startsWith("image/")) {
      return <ImageIcon className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("video/")) {
      return <Film className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("audio/")) {
      return <Music className="h-5 w-5 text-[#00FFFF]" />
    } else if (type.startsWith("text/")) {
      return <FileText className="h-5 w-5 text-[#00FFFF]" />
    } else {
      return <File className="h-5 w-5 text-[#00FFFF]" />
    }
  }

return (
    <div className={className}>
      <div
        className={cn(
          variantClasses[variant],
          isDragging ? "border-[#00FFFF] bg-[#00FFFF]/5" : "hover:border-[#00FFFF]/60 hover:bg-[#00FFFF]/5",
          "transition-colors duration-200",
          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
        )}
        onDragOver={!disabled ? handleDragOver : undefined}
        onDragLeave={!disabled ? handleDragLeave : undefined}
        onDrop={!disabled ? handleDrop : undefined}
        onClick={() => !disabled && fileInputRef.current?.click()}
      >
        <div className="flex flex-col items-center justify-center text-center">
          <Upload className="h-10 w-10 text-[#00FFFF]/70 mb-2" />
          <p className="text-[#B0BEC5] mb-1">
            {isDragging ? "Drop files here" : "Drag & drop files here or click to browse"}
          </p>
          <p className="text-[#B0BEC5]/70 text-sm">
            {accept && `Accepted file types: ${accept}`}
            {maxSize && `${accept ? " | " : ""}Maximum file size: ${maxSize}MB`}
            {maxFiles && multiple && `${accept || maxSize ? " | " : ""}Maximum files: ${maxFiles}`}
          </p>
        </div>

{error && (
        <div className="mt-2 text-red-400 text-sm flex items-center">
          <AlertTriangle className="h-4 w-4 mr-1" />
          {error}
        </div>
      )}

{uploadProgress !== undefined && (
        <div className="mt-3">
          <EnhancedProgress value={uploadProgress} variant="gradient" showValue animated size="sm" />
        </div>
      )}

{showPreview && value.length > 0 && (
        <div className={cn("mt-4", previewType === "grid" ? "grid grid-cols-2 md:grid-cols-3 gap-3" : "space-y-2")}>
          <AnimatePresence>
            {value.map((file, index) => (
              <motion.div
                key={`${file.name}-${index}`}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.2 }}
                className={cn(
                  "bg-[#1E2F3C] rounded-lg border border-[#00FFFF]/10 overflow-hidden group",
                  previewType === "list" ? "flex items-center" : "relative",
                )}
              >
                {file.type.startsWith("image/") && previewType === "grid" ? (
                  <div className="aspect-square w-full relative">
                    <img
                      src={URL.createObjectURL(file) || "/placeholder.svg"}
                      alt={file.name}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 rounded-full bg-black/50 text-white hover:bg-black/70"
                        onClick={(e) => {
                          e.stopPropagation()
                          removeFile(index)
                        }}
                        disabled={disabled}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className={cn("flex items-center", previewType === "grid" ? "p-3" : "p-2 flex-1")}>
                    <div className="w-8 h-8 rounded-full bg-[#263A49] flex items-center justify-center mr-3 flex-shrink-0">
                      {getFileIcon(file)}
                    </div>
                    <div className="min-w-0 flex-1">
                      <TruncatedText text={file.name} lines={1} className="text-sm font-medium" />
                      <FileSizeDisplay bytes={file.size} type="file" className="block mt-1" />
                    </div>
                    {!disabled && (
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 rounded-full text-[#B0BEC5] hover:text-white hover:bg-[#00FFFF]/10 ml-2 flex-shrink-0"
                        onClick={(e) => {
                          e.stopPropagation()
                          removeFile(index)
                        }}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                )}
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/enhanced-input.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { Input, type InputProps } from "@/components/ui/input"
import { cn } from "@/lib/utils"

export interface EnhancedInputProps extends InputProps {
  variant?: "primary" | "secondary" | "minimal"
  isError?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
}

const EnhancedInput = forwardRef<HTMLInputElement, EnhancedInputProps>(
  ({ className, variant = "primary", isError = false, leftIcon, rightIcon, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      primary: "bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      secondary: "bg-[#263A49] border-[#00FFFF]/20 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      minimal: "bg-transparent border-[#00FFFF]/10 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    }

// Error state
    const errorClass = isError ? "border-red-500 focus:border-red-500 focus:ring-red-500" : ""

// Icon padding
    const leftPadding = leftIcon ? "pl-10" : ""
    const rightPadding = rightIcon ? "pr-10" : ""

// Combine all classes
    const inputClasses = cn(
      variantClasses[variant],
      errorClass,
      leftPadding,
      rightPadding,
      "rounded-lg text-white placeholder:text-[#B0BEC5]/70 transition-colors duration-200",
      className,
    )

// If we have icons, wrap with a div for positioning
    if (leftIcon || rightIcon) {
      return (
        <div className="relative">
          {leftIcon && (
            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]">{leftIcon}</div>
          )}

{rightIcon && (
            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]">{rightIcon}</div>
          )}
        </div>
      )
    }

// Regular input without icons
    return <Input ref={ref} className={inputClasses} {...props} />
  },
)

EnhancedInput.displayName = "EnhancedInput"

export { EnhancedInput }
[V0_FILE]typescriptreact:file="components/ui/enhanced-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedModalProps {
  isOpen: boolean
  onClose: () => void
  title?: React.ReactNode
  description?: React.ReactNode
  children: React.ReactNode
  footer?: React.ReactNode
  size?: "sm" | "md" | "lg" | "xl" | "full"
  position?: "center" | "top" | "bottom"
  closeOnClickOutside?: boolean
  showCloseButton?: boolean
  variant?: "default" | "blur" | "minimal"
  className?: string
  contentClassName?: string
  overlayClassName?: string
}

export const EnhancedModal = forwardRef<HTMLDivElement, EnhancedModalProps>(
  (
    {
      isOpen,
      onClose,
      title,
      description,
      children,
      footer,
      size = "md",
      position = "center",
      closeOnClickOutside = true,
      showCloseButton = true,
      variant = "default",
      className,
      contentClassName,
      overlayClassName,
    },
    ref,
  ) => {
    const [isMounted, setIsMounted] = useState(false)

// Handle escape key press
    useEffect(() => {
      const handleEscapeKey = (e: KeyboardEvent) => {
        if (e.key === "Escape" && isOpen) {
          onClose()
        }
      }

if (isOpen) {
        document.addEventListener("keydown", handleEscapeKey)
        // Prevent scrolling when modal is open
        document.body.style.overflow = "hidden"
      }

return () => {
        document.removeEventListener("keydown", handleEscapeKey)
        // Restore scrolling when modal is closed
        document.body.style.overflow = ""
      }
    }, [isOpen, onClose])

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

if (!isMounted) {
      return null
    }

// Define size classes
    const sizeClasses = {
      sm: "max-w-sm",
      md: "max-w-md",
      lg: "max-w-lg",
      xl: "max-w-xl",
      full: "max-w-full w-full h-full m-0 rounded-none",
    }

// Define position classes
    const positionClasses = {
      center: "items-center justify-center",
      top: "items-start justify-center pt-16",
      bottom: "items-end justify-center pb-16",
    }

// Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border border-[#00FFFF]/30",
      blur: "bg-[#1E2F3C]/80 backdrop-blur-md border border-[#00FFFF]/20",
      minimal: "bg-[#1E2F3C] border-none shadow-xl",
    }

// Animation variants
    const overlayVariants = {
      hidden: { opacity: 0 },
      visible: { opacity: 1 },
    }

const modalVariants = {
      hidden: {
        opacity: 0,
        scale: 0.95,
        y: position === "top" ? -20 : position === "bottom" ? 20 : 0,
      },
      visible: {
        opacity: 1,
        scale: 1,
        y: 0,
        transition: {
          type: "spring",
          damping: 25,
          stiffness: 300,
        },
      },
      exit: {
        opacity: 0,
        scale: 0.95,
        transition: {
          duration: 0.2,
        },
      },
    }

return (
      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 overflow-y-auto">
            <motion.div
              className={cn("fixed inset-0 bg-black/50 z-0", overlayClassName)}
              initial="hidden"
              animate="visible"
              exit="hidden"
              variants={overlayVariants}
              onClick={closeOnClickOutside ? onClose : undefined}
            />

<div className={cn("min-h-full p-4 flex", positionClasses[position])}>
              <motion.div
                ref={ref}
                className={cn(
                  "relative w-full rounded-lg shadow-lg",
                  sizeClasses[size],
                  variantClasses[variant],
                  className,
                )}
                initial="hidden"
                animate="visible"
                exit="exit"
                variants={modalVariants}
                onClick={(e) => e.stopPropagation()}
              >
                {showCloseButton && (
                  <button
                    className="absolute top-4 right-4 p-1 rounded-full hover:bg-[#00FFFF]/10 transition-colors"
                    onClick={onClose}
                    aria-label="Close modal"
                  >
                    <X className="h-5 w-5" />
                  </button>
                )}

{(title || description) && (
                  <div className="p-6 pb-0">
                    {title && <h2 className="text-xl font-semibold mb-2">{title}</h2>}
                    {description && <p className="text-[#B0BEC5]">{description}</p>}
                  </div>
                )}

<div className={cn("p-6", contentClassName)}>{children}</div>

{footer && <div className="p-6 pt-0 flex justify-end gap-2">{footer}</div>}
              </motion.div>
            </div>
          </div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedModal.displayName = "EnhancedModal"
[V0_FILE]typescriptreact:file="components/ui/enhanced-notification.tsx" isMerged="true"
"use client"

import type React from "react"

import { forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, CheckCircle, AlertTriangle, AlertCircle, Info, Bell } from "lucide-react"
import { cn } from "@/lib/utils"

export interface EnhancedNotificationProps {
  open?: boolean
  onClose?: () => void
  title: string
  description?: string
  variant?: "default" | "info" | "success" | "warning" | "error"
  icon?: React.ReactNode
  action?: React.ReactNode
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"
  duration?: number
  className?: string
}

const EnhancedNotification = forwardRef<HTMLDivElement, EnhancedNotificationProps>(
  (
    {
      open = true,
      onClose,
      title,
      description,
      variant = "default",
      icon,
      action,
      position = "top-right",
      duration = 5000,
      className,
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#1E2F3C] border-[#00FFFF]/30",
      info: "bg-blue-900/90 border-blue-500/50",
      success: "bg-green-900/90 border-green-500/50",
      warning: "bg-amber-900/90 border-amber-500/50",
      error: "bg-red-900/90 border-red-500/50",
    }

// Define variant icons
    const variantIcons = {
      default: <Bell className="h-5 w-5 text-[#00FFFF]" />,
      info: <Info className="h-5 w-5 text-blue-400" />,
      success: <CheckCircle className="h-5 w-5 text-green-400" />,
      warning: <AlertTriangle className="h-5 w-5 text-amber-400" />,
      error: <AlertCircle className="h-5 w-5 text-red-400" />,
    }

// Define position classes
    const positionClasses = {
      "top-right": "top-4 right-4",
      "top-left": "top-4 left-4",
      "bottom-right": "bottom-4 right-4",
      "bottom-left": "bottom-4 left-4",
      "top-center": "top-4 left-1/2 -translate-x-1/2",
      "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
    }

// Auto close after duration
    if (open && duration > 0 && onClose) {
      setTimeout(() => {
        onClose()
      }, duration)
    }

return (
      <AnimatePresence>
        {open && (
          <motion.div
            ref={ref}
            className={cn(
              "fixed z-50 max-w-sm w-full shadow-lg rounded-lg border backdrop-blur-sm",
              positionClasses[position],
              variantClasses[variant],
              className,
            )}
            initial={{ opacity: 0, y: position.startsWith("top") ? -20 : 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2 }}
          >
            <div className="p-4">
              <div className="flex items-start">
                <div className="flex-shrink-0">{icon || variantIcons[variant]}</div>
                <div className="ml-3 flex-1">
                  <p className="text-sm font-medium">{title}</p>
                  {description && <p className="mt-1 text-sm opacity-90">{description}</p>}
                  {action && <div className="mt-3">{action}</div>}
                </div>
                {onClose && (
                  <button
                    type="button"
                    className="flex-shrink-0 ml-3 h-5 w-5 rounded-full inline-flex items-center justify-center text-white/70 hover:text-white focus:outline-none"
                    onClick={onClose}
                    aria-label="Close"
                  >
                    <X className="h-4 w-4" />
                  </button>
                )}
              </div>
            </div>

{/* Auto-close progress bar */}
            {duration > 0 && (
              <motion.div
                className="h-1 bg-white/20 rounded-b-lg overflow-hidden"
                initial={{ width: "100%" }}
                animate={{ width: "0%" }}
                transition={{ duration: duration / 1000, ease: "linear" }}
              />
            )}
          </motion.div>
        )}
      </AnimatePresence>
    )
  },
)

EnhancedNotification.displayName = "EnhancedNotification"

export { EnhancedNotification }
[V0_FILE]typescriptreact:file="components/ui/enhanced-popover.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, forwardRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

export interface EnhancedPopoverProps {
  trigger: React.ReactNode
  content: React.ReactNode
  position?: "top" | "bottom" | "left" | "right"
  align?: "start" | "center" | "end"
  openOnHover?: boolean
  closeOnClickOutside?: boolean
  className?: string
  triggerClassName?: string
  contentClassName?: string
}

export const EnhancedPopover = forwardRef<HTMLDivElement, EnhancedPopoverProps>(
  (
    {
      trigger,
      content,
      position = "bottom",
      align = "center",
      openOnHover = false,
      closeOnClickOutside = true,
      className,
      triggerClassName,
      contentClassName,
    },
    ref,
  ) => {
    const [isOpen, setIsOpen] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)
    const triggerRef = useRef<HTMLDivElement>(null)

// Close popover when clicking outside
    useEffect(() => {
      if (!closeOnClickOutside) return

const handleClickOutside = (event: MouseEvent) => {
        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
          setIsOpen(false)
        }
      }

if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside)
      }

return () => {
        document.removeEventListener("mousedown", handleClickOutside)
      }
    }, [isOpen, closeOnClickOutside])

// Define position classes
    const positionClasses = {
      top: {
        start: "bottom-full left-0 mb-2",
        center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
        end: "bottom-full right-0 mb-2",
      },
      bottom: {
        start: "top-full left-0 mt-2",
        center: "top-full left-1/2 -translate-x-1/2 mt-2",
        end: "top-full right-0 mt-2",
      },
      left: {
        start: "right-full top-0 mr-2",
        center: "right-full top-1/2 -translate-y-1/2 mr-2",
        end: "right-full bottom-0 mr-2",
      },
      right: {
        start: "left-full top-0 ml-2",
        center: "left-full top-1/2 -translate-y-1/2 ml-2",
        end: "left-full bottom-0 ml-2",
      },
    }

// Animation variants based on position
    const getAnimationVariants = () => {
      switch (position) {
        case "top":
          return {
            hidden: { opacity: 0, y: 10 },
            visible: { opacity: 1, y: 0 },
          }
        case "bottom":
          return {
            hidden: { opacity: 0, y: -10 },
            visible: { opacity: 1, y: 0 },
          }
        case "left":
          return {
            hidden: { opacity: 0, x: 10 },
            visible: { opacity: 1, x: 0 },
          }
        case "right":
          return {
            hidden: { opacity: 0, x: -10 },
            visible: { opacity: 1, x: 0 },
          }
        default:
          return {
            hidden: { opacity: 0 },
            visible: { opacity: 1 },
          }
      }
    }

const handleTriggerClick = () => {
      if (!openOnHover) {
        setIsOpen(!isOpen)
      }
    }

const handleMouseEnter = () => {
      if (openOnHover) {
        setIsOpen(true)
      }
    }

const handleMouseLeave = () => {
      if (openOnHover) {
        setIsOpen(false)
      }
    }

return (
      <div
        ref={containerRef}
        className={cn("relative inline-block", className)}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <div
          ref={triggerRef}
          onClick={handleTriggerClick}
          className={cn(openOnHover ? "cursor-default" : "cursor-pointer", triggerClassName)}
        >
          {trigger}
        </div>

<AnimatePresence>
          {isOpen && (
            <motion.div
              ref={ref}
              className={cn(
                "absolute z-50 min-w-[10rem] rounded-md shadow-lg py-2 px-3",
                "bg-[#1E2F3C] border border-[#00FFFF]/20",
                positionClasses[position][align],
                contentClassName,
              )}
              variants={getAnimationVariants()}
              initial="hidden"
              animate="visible"
              exit="hidden"
              transition={{ duration: 0.15 }}
            >
              {content}
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    )
  },
)

EnhancedPopover.displayName = "EnhancedPopover"
[V0_FILE]typescriptreact:file="components/ui/enhanced-progress.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { motion } from "framer-motion"
import { Progress, type ProgressProps } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

export interface EnhancedProgressProps extends ProgressProps {
  variant?: "default" | "success" | "warning" | "error" | "gradient"
  showValue?: boolean
  valuePosition?: "inside" | "outside"
  size?: "sm" | "default" | "lg"
  animated?: boolean
  label?: string
}

const EnhancedProgress = forwardRef<HTMLDivElement, EnhancedProgressProps>(
  (
    {
      className,
      value = 0,
      variant = "default",
      showValue = false,
      valuePosition = "outside",
      size = "default",
      animated = false,
      label,
      ...props
    },
    ref,
  ) => {
    // Define variant classes
    const variantClasses = {
      default: "bg-[#00FFFF]",
      success: "bg-green-500",
      warning: "bg-amber-500",
      error: "bg-red-500",
      gradient: "bg-gradient-to-r from-[#00FFFF] to-[#00CCFF]",
    }

// Define size classes
    const sizeClasses = {
      sm: "h-1",
      default: "h-2",
      lg: "h-3",
    }

// Animation class
    const animationClass = animated ? "animate-pulse" : ""

// Combine all classes
    const progressClasses = cn("rounded-full", sizeClasses[size], className)

// Indicator classes
    const indicatorClasses = cn(variantClasses[variant], animationClass, "rounded-full transition-all")

return (
      <div className="w-full">
        {(label || (showValue && valuePosition === "outside")) && (
          <div className="flex justify-between items-center mb-1">
            {label && <div className="text-sm font-medium">{label}</div>}
            {showValue && valuePosition === "outside" && (
              <div className="text-sm text-[#B0BEC5]">{Math.round(value)}%</div>
            )}
          </div>
        )}

<div className="relative">
          <Progress ref={ref} value={value} className={progressClasses} {...props}>
            {animated && (
              <motion.div
                className={indicatorClasses}
                style={{ width: `${value}%` }}
                initial={{ width: 0 }}
                animate={{ width: `${value}%` }}
                transition={{ duration: 0.5 }}
              />
            )}
          </Progress>

{showValue && valuePosition === "inside" && value >= 20 && (
            <div
              className="absolute inset-y-0 left-0 flex items-center justify-end pr-2 text-xs font-medium text-white"
              style={{ width: `${value}%` }}
            >
              {Math.round(value)}%
            </div>
          )}
        </div>
      </div>
    )
  },
)

EnhancedProgress.displayName = "EnhancedProgress"

export { EnhancedProgress }
[V0_FILE]typescriptreact:file="components/ui/enhanced-skeleton.tsx" isMerged="true"
"use client"

import { forwardRef } from "react"
import { Skeleton, type SkeletonProps } from "@/components/ui/skeleton"
import { cn } from "@/lib/utils"

export interface EnhancedSkeletonProps extends SkeletonProps {
  variant?: "default" | "card" | "text" | "avatar" | "button" | "input"
  lines?: number
  animated?: boolean
}

const EnhancedSkeleton = forwardRef<HTMLDivElement, EnhancedSkeletonProps>(
  ({ className, variant = "default", lines = 1, animated = true, ...props }, ref) => {
    // Define variant classes
    const variantClasses = {
      default: "",
      card: "w-full h-[200px] rounded-xl",
      text: "h-4 w-full",
      avatar: "h-12 w-12 rounded-full",
      button: "h-10 w-24 rounded-lg",
      input: "h-10 w-full rounded-lg",
    }

// Animation class
    const animationClass = animated ? "animate-pulse" : ""

// Combine all classes
    const skeletonClasses = cn(variantClasses[variant], animationClass, "bg-[#263A49]", className)

// If it's a text variant with multiple lines
    if (variant === "text" && lines > 1) {
      return (
        <div className="space-y-2">
          {Array.from({ length: lines }).map((_, i) => (
            <Skeleton
              key={i}
              ref={i === 0 ? ref : undefined}
              className={cn(
                skeletonClasses,
                // Make some lines shorter for a more realistic text effect
                i === lines - 1 ? "w-4/5" : i % 2 === 0 ? "w-full" : "w-11/12",
              )}
              {...props}
            />
          ))}
        </div>
      )
    }

// Regular skeleton
    return <Skeleton ref={ref} className={skeletonClasses} {...props} />
  },
)

EnhancedSkeleton.displayName = "EnhancedSkeleton"

export { EnhancedSkeleton }
[V0_FILE]typescriptreact:file="components/ui/enhanced-tabs.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, forwardRef } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

export interface EnhancedTabsProps {
  tabs: {
    id: string
    label: React.ReactNode
    content: React.ReactNode
    icon?: React.ReactNode
    disabled?: boolean
  }[]
  defaultTab?: string
  onChange?: (tabId: string) => void
  variant?: "default" | "pills" | "underline" | "enclosed"
  size?: "sm" | "md" | "lg"
  fullWidth?: boolean
  animated?: boolean
  className?: string
  tabsClassName?: string
  contentClassName?: string
}

export const EnhancedTabs = forwardRef<HTMLDivElement, EnhancedTabsProps>(
  (
    {
      tabs,
      defaultTab,
      onChange,
      variant = "default",
      size = "md",
      fullWidth = false,
      animated = true,
      className,
      tabsClassName,
      contentClassName,
    },
    ref,
  ) => {
    const [activeTab, setActiveTab] = useState<string>(defaultTab || (tabs.length > 0 ? tabs[0].id : ""))
    const [isMounted, setIsMounted] = useState(false)

// Handle client-side rendering
    useEffect(() => {
      setIsMounted(true)
    }, [])

// Update active tab when defaultTab changes
    useEffect(() => {
      if (defaultTab) {
        setActiveTab(defaultTab)
      }
    }, [defaultTab])

const handleTabChange = (tabId: string) => {
      setActiveTab(tabId)
      onChange?.(tabId)
    }

// Define variant classes
    const variantClasses = {
      default: {
        container: "border-b border-[#00FFFF]/10",
        tab: "border-b-2 border-transparent hover:border-[#00FFFF]/30 hover:text-[#00FFFF]/70",
        activeTab: "border-[#00FFFF] text-[#00FFFF]",
      },
      pills: {
        container: "gap-2",
        tab: "rounded-full hover:bg-[#00FFFF]/10 hover:text-[#00FFFF]/70",
        activeTab: "bg-[#00FFFF]/20 text-[#00FFFF]",
      },
      underline: {
        container: "",
        tab: "border-b-2 border-transparent hover:text-[#00FFFF]/70",
        activeTab: "border-[#00FFFF] text-[#00FFFF]",
      },
      enclosed: {
        container: "bg-[#1E2F3C] rounded-lg p-1",
        tab: "rounded-md hover:bg-[#00FFFF]/5 hover:text-[#00FFFF]/70",
        activeTab: "bg-[#263A49] text-[#00FFFF] shadow-sm",
      },
    }

// Define size classes
    const sizeClasses = {
      sm: "text-sm py-2 px-3",
      md: "py-2 px-4",
      lg: "text-lg py-3 px-6",
    }

if (!isMounted) {
      return null
    }

return (
      <div ref={ref} className={cn("w-full", className)}>
        <div className={cn("flex", fullWidth ? "w-full" : "w-fit", variantClasses[variant].container, tabsClassName)}>
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => !tab.disabled && handleTabChange(tab.id)}
              className={cn(
                "relative flex items-center transition-all duration-200",
                sizeClasses[size],
                variantClasses[variant].tab,
                tab.id === activeTab && variantClasses[variant].activeTab,
                tab.disabled && "opacity-50 cursor-not-allowed",
                fullWidth && "flex-1 justify-center",
              )}
              disabled={tab.disabled}
              aria-selected={tab.id === activeTab}
              role="tab"
            >
              {tab.icon && <span className="mr-2">{tab.icon}</span>}
              {tab.label}

{variant === "pills" && tab.id === activeTab && animated && (
                <motion.span
                  layoutId="pill-indicator"
                  className="absolute inset-0 rounded-full bg-current -z-10"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
                />
              )}

{variant === "enclosed" && tab.id === activeTab && animated && (
                <motion.span
                  layoutId="enclosed-indicator"
                  className="absolute inset-0 rounded-md bg-current -z-10"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
                />
              )}
            </button>
          ))}
        </div>

<div className={cn("mt-4", contentClassName)}>
          {animated ? (
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
            >
              {tabs.find((tab) => tab.id === activeTab)?.content}
            </motion.div>
          ) : (
            tabs.find((tab) => tab.id === activeTab)?.content
          )}
        </div>
      </div>
    )
  },
)

EnhancedTabs.displayName = "EnhancedTabs"
[V0_FILE]typescriptreact:file="components/ui/enhanced-tag-input.tsx" isMerged="true"
"use client"

import { useState, useRef, type KeyboardEvent } from "react"
import { Input } from "@/components/ui/input"
import { X } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

interface EnhancedTagInputProps {
  value: string[]
  onChange: (value: string[]) => void
  placeholder?: string
  disabled?: boolean
  maxTags?: number
  className?: string
  tagClassName?: string
  variant?: "default" | "primary" | "secondary"
  allowDuplicates?: boolean
  validateTag?: (tag: string) => boolean
  onExceedMaxTags?: () => void
}

export function EnhancedTagInput({
  value = [],
  onChange,
  placeholder = "Add tag...",
  disabled = false,
  maxTags,
  className,
  tagClassName,
  variant = "default",
  allowDuplicates = false,
  validateTag,
  onExceedMaxTags,
}: EnhancedTagInputProps) {
  const [inputValue, setInputValue] = useState("")
  const inputRef = useRef<HTMLInputElement>(null)

// Define variant classes
  const variantClasses = {
    default: "bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    primary: "bg-[#263A49] border-[#00FFFF]/20 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    secondary: "bg-transparent border-[#00FFFF]/10 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
  }

// Define tag variant classes
  const tagVariantClasses = {
    default: "bg-[#263A49] text-white",
    primary: "bg-[#00FFFF]/10 text-[#00FFFF]",
    secondary: "bg-[#1E2F3C] text-white",
  }

const addTag = (tag: string) => {
    const trimmedTag = tag.trim()

if (!trimmedTag) return

// Check if we've reached the maximum number of tags
    if (maxTags !== undefined && value.length >= maxTags) {
      onExceedMaxTags?.()
      return
    }

// Check if tag is valid
    if (validateTag && !validateTag(trimmedTag)) {
      return
    }

// Check if tag already exists
    if (!allowDuplicates && value.includes(trimmedTag)) {
      return
    }

onChange([...value, trimmedTag])
    setInputValue("")
  }

const removeTag = (index: number) => {
    const newTags = [...value]
    newTags.splice(index, 1)
    onChange(newTags)
  }

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault()
      addTag(inputValue)
    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
      removeTag(value.length - 1)
    }
  }

return (
    <div
      className={cn("flex flex-wrap items-center gap-2 p-2 border rounded-lg", variantClasses[variant], className)}
      onClick={() => inputRef.current?.focus()}
    >
      <AnimatePresence>
        {value.map((tag, index) => (
          <motion.span
            key={`${tag}-${index}`}
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.2 }}
            className={cn(
              "inline-flex items-center px-2 py-1 rounded-md text-sm",
              tagVariantClasses[variant],
              tagClassName,
            )}
          >
            {tag}
            {!disabled && (
              <button
                type="button"
                className="ml-1 rounded-full hover:bg-white/10 p-0.5"
                onClick={(e) => {
                  e.stopPropagation()
                  removeTag(index)
                }}
                aria-label={`Remove ${tag}`}
              >
                <X className="h-3 w-3" />
              </button>
            )}
          </motion.span>
        ))}
      </AnimatePresence>

<Input
        ref={inputRef}
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={() => addTag(inputValue)}
        placeholder={value.length === 0 ? placeholder : ""}
        disabled={disabled || (maxTags !== undefined && value.length >= maxTags)}
        className="flex-1 min-w-[120px] border-0 focus-visible:ring-0 focus-visible:ring-offset-0 p-0 h-8 bg-transparent placeholder:text-[#B0BEC5]/70"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/enhanced-tooltip.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

interface EnhancedTooltipProps {
  children: React.ReactNode
  content: React.ReactNode
  position?: "top" | "bottom" | "left" | "right"
  variant?: "default" | "info" | "success" | "warning" | "error"
  delay?: number
  className?: string
}

export function EnhancedTooltip({
  children,
  content,
  position = "top",
  variant = "default",
  delay = 0.2,
  className,
}: EnhancedTooltipProps) {
  const [isVisible, setIsVisible] = useState(false)

// Define variant classes
  const variantClasses = {
    default: "bg-[#1E2F3C] text-white border-[#00FFFF]/30",
    info: "bg-[#1E2F3C] text-[#00FFFF] border-[#00FFFF]/50",
    success: "bg-emerald-900/90 text-emerald-100 border-emerald-500/50",
    warning: "bg-amber-900/90 text-amber-100 border-amber-500/50",
    error: "bg-red-900/90 text-red-100 border-red-500/50",
  }

// Define position styles
  const positionStyles = {
    top: {
      container: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
      arrow: "top-full left-1/2 transform -translate-x-1/2 border-t-current border-x-transparent border-b-transparent",
      animation: { y: 10 },
    },
    bottom: {
      container: "top-full left-1/2 transform -translate-x-1/2 mt-2",
      arrow:
        "bottom-full left-1/2 transform -translate-x-1/2 rotate-180 border-t-current border-x-transparent border-b-transparent",
      animation: { y: -10 },
    },
    left: {
      container: "right-full top-1/2 transform -translate-y-1/2 mr-2",
      arrow:
        "left-full top-1/2 transform -translate-y-1/2 -rotate-90 border-t-current border-x-transparent border-b-transparent",
      animation: { x: 10 },
    },
    right: {
      container: "left-full top-1/2 transform -translate-y-1/2 ml-2",
      arrow:
        "right-full top-1/2 transform -translate-y-1/2 rotate-90 border-t-current border-x-transparent border-b-transparent",
      animation: { x: -10 },
    },
  }

return (
    <div
      className="relative inline-block"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
      onFocus={() => setIsVisible(true)}
      onBlur={() => setIsVisible(false)}
    >
      {children}

<AnimatePresence>
        {isVisible && (
          <motion.div
            className={cn("absolute z-50 whitespace-nowrap", positionStyles[position].container)}
            initial={{ opacity: 0, ...positionStyles[position].animation }}
            animate={{ opacity: 1, y: 0, x: 0 }}
            exit={{ opacity: 0, ...positionStyles[position].animation }}
            transition={{ duration: 0.2, delay: isVisible ? delay : 0 }}
          >
            <div
              className={cn(
                "relative px-3 py-1.5 rounded-md text-sm shadow-lg backdrop-blur-sm border",
                variantClasses[variant],
                className,
              )}
            >
              {content}
              <div className={cn("absolute w-0 h-0 border-4 text-inherit", positionStyles[position].arrow)} />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/file-size-display.tsx" isMerged="true"
import { formatFileSize, formatDriveSize } from "@/utils/typography-utils"

interface FileSizeDisplayProps {
  bytes: number
  type?: "file" | "drive"
  decimals?: number
  className?: string
}

export function FileSizeDisplay({ bytes, type = "file", decimals = 2, className = "" }: FileSizeDisplayProps) {
  const formattedSize = type === "file" ? formatFileSize(bytes, decimals) : formatDriveSize(bytes, decimals)

const baseClass = type === "file" ? "file-size" : "drive-size"

return <span className={`${baseClass} ${className}`}>{formattedSize}</span>
}
[V0_FILE]typescriptreact:file="components/ui/localized-text.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { useLanguage } from "@/contexts/language-context"

interface LocalizedTextProps {
  en: ReactNode
  mm: ReactNode
  className?: string
}

export function LocalizedText({ en, mm, className = "" }: LocalizedTextProps) {
  const { language } = useLanguage()

return <span className={className}>{language === "en" ? en : <span className="mm">{mm}</span>}</span>
}
[V0_FILE]typescriptreact:file="components/ui/responsive-text.tsx" isMerged="true"
import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

interface ResponsiveTextProps {
  children: ReactNode
  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
  className?: string
  weight?: "normal" | "medium" | "semibold" | "bold"
  color?: string
}

export function ResponsiveText({
  children,
  size = "base",
  as: Component = "p",
  className = "",
  weight = "normal",
  color,
}: ResponsiveTextProps) {
  // Map size to appropriate class
  const sizeClasses = {
    xs: "text-xs",
    sm: "text-sm",
    base: "text-base",
    lg: "text-lg",
    xl: "text-xl",
    "2xl": "text-2xl",
    "3xl": "text-3xl",
    "4xl": "text-4xl",
    "5xl": "text-5xl",
    "6xl": "text-6xl",
  }

// Map weight to appropriate class
  const weightClasses = {
    normal: "font-normal",
    medium: "font-medium",
    semibold: "font-semibold",
    bold: "font-bold",
  }

// Combine classes
  const combinedClasses = cn(sizeClasses[size], weightClasses[weight], color && `text-[${color}]`, className)

return <Component className={combinedClasses}>{children}</Component>
}
[V0_FILE]typescriptreact:file="components/ui/text-size-adjuster.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Plus, Minus, Type } from "lucide-react"

interface TextSizeAdjusterProps {
  defaultSize?: number
  min?: number
  max?: number
  onChange?: (size: number) => void
  className?: string
}

export function TextSizeAdjuster({
  defaultSize = 16,
  min = 12,
  max = 24,
  onChange,
  className = "",
}: TextSizeAdjusterProps) {
  const [textSize, setTextSize] = useState(defaultSize)

// Apply text size to document root on change
  useEffect(() => {
    if (typeof document !== "undefined") {
      document.documentElement.style.setProperty("--font-size-base", `${textSize}px`)

// Scale other sizes proportionally
      const ratio = textSize / 16
      document.documentElement.style.setProperty("--font-size-xs", `${12 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-sm", `${14 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-lg", `${18 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-xl", `${20 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-2xl", `${24 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-3xl", `${30 * ratio}px`)
      document.documentElement.style.setProperty("--font-size-4xl", `${36 * ratio}px`)

// Call onChange callback if provided
      onChange?.(textSize)
    }
  }, [textSize, onChange])

const decreaseSize = () => {
    setTextSize((prev) => Math.max(min, prev - 1))
  }

const increaseSize = () => {
    setTextSize((prev) => Math.min(max, prev + 1))
  }

return (
    <div className={`flex items-center space-x-2 ${className}`}>
      <Type className="h-4 w-4 text-[#00FFFF]" />
      <Button
        variant="outline"
        size="icon"
        className="h-8 w-8 rounded-full"
        onClick={decreaseSize}
        disabled={textSize <= min}
      >
        <Minus className="h-3 w-3" />
      </Button>

<Slider
        value={[textSize]}
        min={min}
        max={max}
        step={1}
        className="w-24"
        onValueChange={(value) => setTextSize(value[0])}
      />

<span className="text-xs text-[#B0BEC5] min-w-[30px]">{textSize}px</span>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/truncated-text.tsx" isMerged="true"
import { truncateText } from "@/utils/typography-utils"

interface TruncatedTextProps {
  text: string
  maxLength?: number
  lines?: 1 | 2 | 3
  className?: string
}

export function TruncatedText({ text, maxLength, lines = 1, className = "" }: TruncatedTextProps) {
  // If maxLength is provided, truncate the text
  const truncatedContent = maxLength ? truncateText(text, maxLength) : text

// Determine the appropriate class based on the number of lines
  let lineClass = "truncate-text"
  if (lines === 2) lineClass = "truncate-2-lines"
  if (lines === 3) lineClass = "truncate-3-lines"

return <span className={`${lineClass} ${className}`}>{truncatedContent}</span>
}
[V0_FILE]typescriptreact:file="contexts/language-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type Language = "en" | "mm"

interface LanguageContextType {
  language: Language
  setLanguage: (language: Language) => void
  t: (en: string, mm: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("en")

// Load saved language preference from localStorage on client side
  useEffect(() => {
    try {
      const savedLanguage = localStorage.getItem("language") as Language
      if (savedLanguage && (savedLanguage === "en" || savedLanguage === "mm")) {
        setLanguage(savedLanguage)
      }
    } catch (error) {
      console.error("Error accessing localStorage:", error)
    }
  }, [])

// Save language preference to localStorage when it changes
  useEffect(() => {
    try {
      localStorage.setItem("language", language)
      // Add language class to body for global styling
      document.body.classList.remove("lang-en", "lang-mm")
      document.body.classList.add(`lang-${language}`)

// Set HTML lang attribute for accessibility
      document.documentElement.lang = language
    } catch (error) {
      console.error("Error setting localStorage:", error)
    }
  }, [language])

// Translation helper function
  const t = (en: string, mm: string) => {
    return language === "en" ? en : mm
  }

return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="contexts/thingyan-theme-context.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import { isThingyanFestivalTime } from "@/utils/date-utils"

type ThingyanThemeContextType = {
  isThingyanTheme: boolean
  thingyanIntensity: "subtle" | "moderate" | "immersive"
  setThingyanIntensity: (intensity: "subtle" | "moderate" | "immersive") => void
}

const ThingyanThemeContext = createContext<ThingyanThemeContextType>({
  isThingyanTheme: false,
  thingyanIntensity: "moderate",
  setThingyanIntensity: () => {},
})

export const useThingyanTheme = () => useContext(ThingyanThemeContext)

export function ThingyanThemeProvider({ children }: { children: React.ReactNode }) {
  const [isThingyanTheme, setIsThingyanTheme] = useState(false)
  const [thingyanIntensity, setThingyanIntensity] = useState<"subtle" | "moderate" | "immersive">("moderate")

useEffect(() => {
    // Check if it's Thingyan festival time
    const isThingyan = isThingyanFestivalTime()
    setIsThingyanTheme(isThingyan)

// Get user preference for animation intensity from localStorage if available
    const savedIntensity = localStorage.getItem("thingyanIntensity")
    if (savedIntensity && ["subtle", "moderate", "immersive"].includes(savedIntensity)) {
      setThingyanIntensity(savedIntensity as "subtle" | "moderate" | "immersive")
    }

// Set up a daily check to disable the theme on May 1st
    const checkDate = () => {
      const isStillThingyan = isThingyanFestivalTime()
      setIsThingyanTheme(isStillThingyan)
    }

// Check once a day
    const interval = setInterval(checkDate, 24 * 60 * 60 * 1000)
    return () => clearInterval(interval)
  }, [])

const handleSetIntensity = (intensity: "subtle" | "moderate" | "immersive") => {
    setThingyanIntensity(intensity)
    localStorage.setItem("thingyanIntensity", intensity)
  }

return (
    <ThingyanThemeContext.Provider
      value={{
        isThingyanTheme,
        thingyanIntensity,
        setThingyanIntensity: handleSetIntensity,
      }}
    >
      {children}
    </ThingyanThemeContext.Provider>
  )
}
[V0_FILE]typescriptreact:file="docs/api-documentation.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CopyBlock, atomOneDark } from "react-code-blocks"
import { LocalizedText } from "@/components/ui/localized-text"
import { useLanguage } from "@/contexts/language-context"

export default function ApiDocumentation() {
  const { t } = useLanguage()
  const [activeTab, setActiveTab] = useState("contact")

const apiSchemas = {
    contact: {
      request: `{
  "name": "string", // required
  "phone": "string", // required
  "email": "string", // optional
  "message": "string" // required
}`,
      response: `{
  "success": true,
  "message": "Your message has been received. We will contact you soon.",
  "submissionId": "contact_1621234567890_abc123"
}`,
    },
    esimOrder: {
      request: `{
  "customerName": "string", // required
  "phone": "string", // required
  "email": "string", // required
  "planId": "string", // required
  "deviceModel": "string", // required
  "paymentMethod": "string", // required: "mpu", "kbz", "wave", "cash"
}`,
      response: `{
  "success": true,
  "orderId": "order_1621234567890_abc123",
  "activationCode": "ESIM-XXXX-XXXX-XXXX",
  "expiryDate": "2023-12-31T23:59:59Z"
}`,
    },
    compatibility: {
      request: `{
  "deviceModel": "string", // required
  "manufacturer": "string" // required
}`,
      response: `{
  "compatible": true,
  "details": {
    "supportLevel": "full", // "full", "partial", "none"
    "notes": "This device fully supports eSIM technology"
  }
}`,
    },
  }

return (
    <div className="container mx-auto py-12 px-4">
      <h1 className="text-3xl font-bold mb-8">
        <LocalizedText en="API Documentation" mm="API စာရွက်စာတမ်း" />
      </h1>

{Object.entries(apiSchemas).map(([key, schema]) => (
          <TabsContent key={key} value={key}>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <Card>
                <CardHeader>
                  <CardTitle>
                    <LocalizedText en="Request Schema" mm="တောင်းဆိုမှု ပုံစံ" />
                  </CardTitle>
                  <CardDescription>
                    <LocalizedText en="JSON schema for API requests" mm="API တောင်းဆိုမှုများအတွက် JSON ပုံစံ" />
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="relative">
                    <CopyBlock
                      text={schema.request}
                      language="json"
                      showLineNumbers={true}
                      theme={atomOneDark}
                      wrapLines
                    />
                    <Button
                      size="sm"
                      variant="outline"
                      className="absolute top-2 right-2"
                      onClick={() => navigator.clipboard.writeText(schema.request)}
                    >
                      <LocalizedText en="Copy" mm="ကူးယူရန်" />
                    </Button>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>
                    <LocalizedText en="Response Schema" mm="တုံ့ပြန်မှု ပုံစံ" />
                  </CardTitle>
                  <CardDescription>
                    <LocalizedText en="JSON schema for API responses" mm="API တုံ့ပြန်မှုများအတွက် JSON ပုံစံ" />
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="relative">
                    <CopyBlock
                      text={schema.response}
                      language="json"
                      showLineNumbers={true}
                      theme={atomOneDark}
                      wrapLines
                    />
                    <Button
                      size="sm"
                      variant="outline"
                      className="absolute top-2 right-2"
                      onClick={() => navigator.clipboard.writeText(schema.response)}
                    >
                      <LocalizedText en="Copy" mm="ကူးယူရန်" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card className="mt-8">
              <CardHeader>
                <CardTitle>
                  <LocalizedText en="Endpoint Information" mm="အဆုံးမှတ် အချက်အလက်" />
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <h3 className="font-semibold mb-2">
                      <LocalizedText en="URL" mm="URL" />
                    </h3>
                    <code className="bg-gray-800 text-white px-3 py-2 rounded-md block">
                      {key === "contact"
                        ? "/api/contact"
                        : key === "esimOrder"
                          ? "/api/esim/order"
                          : "/api/compatibility"}
                    </code>
                  </div>

<div>
                    <h3 className="font-semibold mb-2">
                      <LocalizedText en="Content Type" mm="အကြောင်းအရာ အမျိုးအစား" />
                    </h3>
                    <code className="bg-gray-800 text-white px-3 py-2 rounded-md">application/json</code>
                  </div>

<div>
                    <h3 className="font-semibold mb-2">
                      <LocalizedText en="Authentication" mm="အထောက်အထားစိစစ်ခြင်း" />
                    </h3>
                    <p>
                      {key === "contact" || key === "compatibility"
                        ? t("No authentication required", "အထောက်အထားစိစစ်ခြင်း မလိုအပ်ပါ")
                        : t("API key required in headers", "headers တွင် API key လိုအပ်သည်")}
                    </p>
                    {key === "esimOrder" && (
                      <code className="bg-gray-800 text-white px-3 py-2 rounded-md block mt-2">
                        X-API-Key: your_api_key_here
                      </code>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}
[V0_FILE]typescript:file="lib/analytics.ts" isMerged="true"
import { inject } from "@vercel/analytics"

export function initAnalytics() {
  // Initialize Vercel Analytics
  inject()
}
[V0_FILE]typescript:file="lib/api-validation.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { ZodSchema } from "zod"

/**
 * Validates a request body against a Zod schema
 * @param request The incoming request
 * @param schema The Zod schema to validate against
 * @returns A result object indicating success or failure
 */
export async function validateRequest<T>(
  request: Request,
  schema: ZodSchema<T>,
): Promise<{ success: true; data: T } | { success: false; error: string }> {
  try {
    // Check if request is valid
    if (!request || !request.body) {
      return { success: false, error: "Invalid request" }
    }

// Clone the request to avoid consuming the body
    const clonedRequest = request.clone()

// Try to parse the body as JSON
    let body: unknown
    try {
      body = await clonedRequest.json()
    } catch (e) {
      return { success: false, error: "Invalid JSON in request body" }
    }

// Validate with Zod schema
    const result = schema.safeParse(body)

if (!result.success) {
      const formattedErrors = result.error.errors
        .map((err) => {
          const path = err.path.join(".")
          return `${path ? `${path}: ` : ""}${err.message}`
        })
        .join(", ")

return { success: false, error: formattedErrors }
    }

return { success: true, data: result.data }
  } catch (error) {
    console.error("Validation error:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to process request",
    }
  }
}

/**
 * Creates a standardized error response
 * @param message Error message
 * @param status HTTP status code
 * @returns NextResponse with error details
 */
export function createErrorResponse(message: string, status = 400) {
  return NextResponse.json(
    {
      success: false,
      message,
      timestamp: new Date().toISOString(),
      code: status,
    },
    {
      status,
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-store",
      },
    },
  )
}

/**
 * Creates a standardized success response
 * @param data Response data
 * @param status HTTP status code
 * @returns NextResponse with success details
 */
export function createSuccessResponse(data: any, status = 200) {
  return NextResponse.json(
    {
      success: true,
      timestamp: new Date().toISOString(),
      ...data,
    },
    {
      status,
      headers: {
        "Content-Type": "application/json",
        "Cache-Control": "no-store",
      },
    },
  )
}
[V0_FILE]typescript:file="lib/payment-service.ts" isMerged="true"
import { kv } from "@vercel/kv"

interface PaymentDetails {
  orderId: string
  amount: number
  currency: string
  customerName: string
  customerEmail: string
  customerPhone: string
  productId: string
  productName: string
  status: "pending" | "completed" | "failed"
  createdAt: number
  updatedAt: number
}

export async function createPayment(details: Omit<PaymentDetails, "orderId" | "status" | "createdAt" | "updatedAt">) {
  try {
    const orderId = `order_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`
    const timestamp = Date.now()

const paymentDetails: PaymentDetails = {
      ...details,
      orderId,
      status: "pending",
      createdAt: timestamp,
      updatedAt: timestamp,
    }

// Store in KV database
    await kv.set(`payment:${orderId}`, JSON.stringify(paymentDetails))

// Create a payment session that expires in 30 minutes
    await kv.set(`payment_session:${orderId}`, "active", { ex: 1800 })

return {
      success: true,
      orderId,
      paymentUrl: `https://esim.com.mm/checkout/${orderId}`,
    }
  } catch (error) {
    console.error("Error creating payment:", error)
    return {
      success: false,
      error: "Failed to create payment",
    }
  }
}

export async function getPaymentDetails(orderId: string): Promise<PaymentDetails | null> {
  try {
    const paymentData = await kv.get(`payment:${orderId}`)

if (!paymentData) {
      return null
    }

return JSON.parse(paymentData as string) as PaymentDetails
  } catch (error) {
    console.error("Error getting payment details:", error)
    return null
  }
}

export async function updatePaymentStatus(orderId: string, status: "completed" | "failed") {
  try {
    const paymentData = await getPaymentDetails(orderId)

if (!paymentData) {
      return {
        success: false,
        error: "Payment not found",
      }
    }

const updatedPayment: PaymentDetails = {
      ...paymentData,
      status,
      updatedAt: Date.now(),
    }

await kv.set(`payment:${orderId}`, JSON.stringify(updatedPayment))

// If payment is completed, generate eSIM
    if (status === "completed") {
      // Generate eSIM QR code and details
      // This would typically call an external API or service
      const esimDetails = await generateEsim(
        paymentData.productId,
        paymentData.customerEmail,
        paymentData.customerPhone,
      )

// Store eSIM details
      if (esimDetails.success) {
        await kv.set(`esim:${orderId}`, JSON.stringify(esimDetails.data))

// Send confirmation email with eSIM details
        await sendEsimEmail(paymentData.customerEmail, esimDetails.data)
      }
    }

return {
      success: true,
      status,
    }
  } catch (error) {
    console.error("Error updating payment status:", error)
    return {
      success: false,
      error: "Failed to update payment status",
    }
  }
}

async function generateEsim(productId: string, email: string, phone: string) {
  // This would typically call an external API or service to generate an eSIM
  // For demonstration purposes, we'll simulate a successful response

try {
    // Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

// Generate a fake QR code URL
    const qrCodeUrl = `https://esim.com.mm/qr/${productId}_${Date.now()}`

return {
      success: true,
      data: {
        esimId: `esim_${Date.now()}`,
        qrCodeUrl,
        activationCode: Math.random().toString(36).substring(2, 10).toUpperCase(),
        expiryDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(), // 30 days from now
        dataAllowance: getDataAllowanceFromProductId(productId),
        validityDays: getValidityDaysFromProductId(productId),
      },
    }
  } catch (error) {
    console.error("Error generating eSIM:", error)
    return {
      success: false,
      error: "Failed to generate eSIM",
    }
  }
}

async function sendEsimEmail(email: string, esimData: any) {
  // This would typically call an email service to send the eSIM details
  // For demonstration purposes, we'll just log the data
  console.log(`Sending eSIM email to ${email}:`, esimData)

// In a real implementation, you would use a service like SendGrid, Mailgun, etc.
  return {
    success: true,
  }
}

function getDataAllowanceFromProductId(productId: string): string {
  // Map product IDs to data allowances
  const dataMap: Record<string, string> = {
    basic: "3GB",
    standard: "10GB",
    premium: "30GB",
  }

return dataMap[productId] || "5GB" // Default fallback
}

function getValidityDaysFromProductId(productId: string): number {
  // Map product IDs to validity days
  const validityMap: Record<string, number> = {
    basic: 7,
    standard: 15,
    premium: 30,
  }

return validityMap[productId] || 10 // Default fallback
}
[V0_FILE]typescript:file="lib/schemas.ts" isMerged="true"
import { z } from "zod"

// Contact form schema
export const contactFormSchema = z.object({
  name: z.string().min(2, { message: "Name must be at least 2 characters" }),
  phone: z.string().min(7, { message: "Phone number must be at least 7 characters" }),
  email: z.string().email({ message: "Invalid email address" }).optional(),
  message: z.string().min(10, { message: "Message must be at least 10 characters" }),
})

export type ContactFormData = z.infer<typeof contactFormSchema>

// eSIM order schema
export const esimOrderSchema = z.object({
  customerName: z.string().min(2, { message: "Name must be at least 2 characters" }),
  phone: z.string().min(7, { message: "Phone number must be at least 7 characters" }),
  email: z.string().email({ message: "Invalid email address" }),
  planId: z.string().min(1, { message: "Plan ID is required" }),
  deviceModel: z.string().min(1, { message: "Device model is required" }),
  paymentMethod: z.enum(["mpu", "kbz", "wave", "cash"], {
    errorMap: () => ({ message: "Invalid payment method" }),
  }),
})

export type EsimOrderData = z.infer<typeof esimOrderSchema>

// Device compatibility check schema
export const compatibilityCheckSchema = z.object({
  deviceModel: z.string().min(1, { message: "Device model is required" }),
  manufacturer: z.string().min(1, { message: "Manufacturer is required" }),
})

export type CompatibilityCheckData = z.infer<typeof compatibilityCheckSchema>

// API response schemas
export const apiResponseSchema = z.object({
  success: z.boolean(),
  message: z.string().optional(),
  error: z.string().optional(),
})

export const contactResponseSchema = apiResponseSchema.extend({
  submissionId: z.string().optional(),
})

export const esimOrderResponseSchema = apiResponseSchema.extend({
  orderId: z.string().optional(),
  activationCode: z.string().optional(),
  expiryDate: z.string().optional(),
})

export const compatibilityResponseSchema = apiResponseSchema.extend({
  compatible: z.boolean().optional(),
  details: z
    .object({
      supportLevel: z.enum(["full", "partial", "none"]).optional(),
      notes: z.string().optional(),
    })
    .optional(),
})
[V0_FILE]typescript:file="lib/seo-optimizer.ts" isMerged="true"
import { generateText } from "ai"
import { groq } from "@ai-sdk/groq"

interface SEOOptimizationResult {
  title: string
  description: string
  keywords: string[]
  suggestions: string[]
}

export async function optimizeForSEO(content: string, targetKeywords: string[]): Promise<SEOOptimizationResult> {
  try {
    const prompt = `
      You are an SEO expert. Analyze the following content and optimize it for search engines.
      
      Content: ${content}
      
      Target keywords: ${targetKeywords.join(", ")}
      
      Please provide:
      1. An optimized title (max 60 characters)
      2. A meta description (max 160 characters)
      3. A list of relevant keywords
      4. Suggestions for improving the content's SEO
      
      Format your response as JSON with the following structure:
      {
        "title": "Optimized title",
        "description": "Optimized meta description",
        "keywords": ["keyword1", "keyword2", "keyword3"],
        "suggestions": ["suggestion1", "suggestion2", "suggestion3"]
      }
    `

const { text } = await generateText({
      model: groq("llama3-70b-8192"),
      prompt,
      temperature: 0.3,
      maxTokens: 1000,
    })

// Parse the JSON response
    const result = JSON.parse(text) as SEOOptimizationResult
    return result
  } catch (error) {
    console.error("Error optimizing content for SEO:", error)
    return {
      title: "",
      description: "",
      keywords: [],
      suggestions: ["Error optimizing content for SEO"],
    }
  }
}
[V0_FILE]typescript:file="lib/vercel-blob.ts" isMerged="true"
import { put, list, del } from "@vercel/blob"

export async function uploadToBlob(file: File, folder = "uploads") {
  try {
    const filename = `${folder}/${Date.now()}-${file.name}`
    const { url } = await put(filename, file, { access: "public" })
    return { success: true, url, filename }
  } catch (error) {
    console.error("Error uploading to Vercel Blob:", error)
    return { success: false, error }
  }
}

export async function listBlobFiles(prefix?: string) {
  try {
    const { blobs } = await list({ prefix })
    return { success: true, blobs }
  } catch (error) {
    console.error("Error listing Vercel Blob files:", error)
    return { success: false, error }
  }
}

export async function deleteBlobFile(url: string) {
  try {
    await del(url)
    return { success: true }
  } catch (error) {
    console.error("Error deleting Vercel Blob file:", error)
    return { success: false, error }
  }
}
[V0_FILE]typescript:file="lib/vercel-kv.ts" isMerged="true"
import { kv } from "@vercel/kv"

export async function setKVData(key: string, value: any, expirationSeconds?: number) {
  try {
    if (expirationSeconds) {
      await kv.set(key, value, { ex: expirationSeconds })
    } else {
      await kv.set(key, value)
    }
    return { success: true }
  } catch (error) {
    console.error("Error setting KV data:", error)
    return { success: false, error }
  }
}

export async function getKVData(key: string) {
  try {
    const data = await kv.get(key)
    return { success: true, data }
  } catch (error) {
    console.error("Error getting KV data:", error)
    return { success: false, error }
  }
}

export async function deleteKVData(key: string) {
  try {
    await kv.del(key)
    return { success: true }
  } catch (error) {
    console.error("Error deleting KV data:", error)
    return { success: false, error }
  }
}
[V0_FILE]json:file="public/manifest.json" isMerged="true"
{
  "name": "eSIM Myanmar",
  "short_name": "eSIM MM",
  "description": "Digital SIM technology for instant connectivity in Myanmar",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1E2F3C",
  "theme_color": "#00FFFF",
  "icons": [
    {
      "src": "/favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "/apple-touch-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
[V0_FILE]plaintext:file="public/robots.txt" isMerged="true"
User-agent: *
Allow: /

Sitemap: https://esim.com.mm/sitemap.xml
[V0_FILE]plaintext:file="public/site.webmanifest" isMerged="true"
{
  "name": "eSIM Myanmar",
  "short_name": "eSIM MM",
  "description": "Digital eSIM technology for seamless connectivity in Myanmar",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#00FFFF",
  "background_color": "#162430",
  "display": "standalone",
  "start_url": "/",
  "orientation": "portrait",
  "scope": "/",
  "lang": "en",
  "dir": "ltr",
  "prefer_related_applications": false,
  "categories": ["business", "utilities", "travel"]
}
[V0_FILE]xml:file="public/sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://esim.com.mm/</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/esim</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/compatibility</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/how-it-works</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/faq</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/contact</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/about</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.6</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/terms-of-service</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://esim.com.mm/privacy-policy</loc>
    <lastmod>2023-05-22</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>
[V0_FILE]javascript:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          light: "hsl(var(--primary-light))",
          dark: "hsl(var(--primary-dark))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "pulse-glow": {
          "0%, 100%": {
            opacity: 0.5,
            boxShadow: "0 0 5px rgba(0, 255, 255, 0.5)",
          },
          "50%": {
            opacity: 1,
            boxShadow: "0 0 15px rgba(0, 255, 255, 0.8)",
          },
        },
        float: {
          "0%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
          "100%": { transform: "translateY(0px)" },
        },
        shimmer: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(100%)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "pulse-glow": "pulse-glow 2s ease-in-out infinite",
        float: "float 6s ease-in-out infinite",
        shimmer: "shimmer 2s linear infinite",
      },
      boxShadow: {
        "glow-sm": "var(--shadow-sm)",
        "glow-md": "var(--shadow-md)",
        "glow-lg": "var(--shadow-lg)",
        "glow-xl": "var(--shadow-xl)",
      },
      fontSize: {
        xs: "var(--font-size-xs)",
        sm: "var(--font-size-sm)",
        base: "var(--font-size-base)",
        lg: "var(--font-size-lg)",
        xl: "var(--font-size-xl)",
        "2xl": "var(--font-size-2xl)",
        "3xl": "var(--font-size-3xl)",
        "4xl": "var(--font-size-4xl)",
        "5xl": "var(--font-size-5xl)",
        "6xl": "var(--font-size-6xl)",
      },
      lineHeight: {
        tight: "var(--line-height-tight)",
        snug: "var(--line-height-snug)",
        normal: "var(--line-height-normal)",
        relaxed: "var(--line-height-relaxed)",
        loose: "var(--line-height-loose)",
      },
      letterSpacing: {
        tighter: "var(--letter-spacing-tighter)",
        tight: "var(--letter-spacing-tight)",
        normal: "var(--letter-spacing-normal)",
        wide: "var(--letter-spacing-wide)",
        wider: "var(--letter-spacing-wider)",
        widest: "var(--letter-spacing-widest)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescript:file="utils/date-utils.ts" isMerged="true"
/**
 * Checks if the current date is within the Thingyan Festival period
 * Returns true before May 1st of the current year
 */
export function isThingyanFestivalTime(): boolean {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const mayFirst = new Date(year, 4, 1) // May is month 4 (0-indexed)

// Return true if current date is before May 1st
  return currentDate < mayFirst
}
[V0_FILE]typescript:file="utils/typography-utils.ts" isMerged="true"
/**
 * Formats a file size in bytes to a human-readable string
 * @param bytes The size in bytes
 * @param decimals The number of decimal places to show
 * @returns Formatted string (e.g., "1.5 MB")
 */
export function formatFileSize(bytes: number, decimals = 2): string {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + " " + sizes[i]
}

/**
 * Formats a drive size in bytes to a human-readable string with appropriate unit
 * @param bytes The size in bytes
 * @param decimals The number of decimal places to show
 * @returns Formatted string (e.g., "1.5 GB")
 */
export function formatDriveSize(bytes: number, decimals = 2): string {
  // For drive sizes, we typically want to show in GB or TB
  if (bytes === 0) return "0 GB"

const k = 1024

// For drives, we typically start from GB
  if (bytes < Math.pow(k, 3)) {
    // Less than 1GB, show in MB
    return Number.parseFloat((bytes / Math.pow(k, 2)).toFixed(decimals)) + " MB"
  } else if (bytes < Math.pow(k, 4)) {
    // Less than 1TB, show in GB
    return Number.parseFloat((bytes / Math.pow(k, 3)).toFixed(decimals)) + " GB"
  } else {
    // Show in TB
    return Number.parseFloat((bytes / Math.pow(k, 4)).toFixed(decimals)) + " TB"
  }
}

/**
 * Truncates text to a specified length and adds ellipsis
 * @param text The text to truncate
 * @param maxLength The maximum length before truncation
 * @returns Truncated text with ellipsis if needed
 */
export function truncateText(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text
  return text.slice(0, maxLength) + "..."
}
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/yBRMCEDQZXo8yRtkLhZdHA/public/abstract-geometric-shapes.png" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/apple-touch-icon.png" isMerged="true"
[V0_FILE]png:file="public/esim-plan-selection.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/AX3sf6Yhm0csIDtHbZ0jez/public/esim-plan-selection.png" isMerged="true"
[V0_FILE]png:file="public/logo512.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/logo512.png" isMerged="true"
[V0_FILE]png:file="public/og-image-esim.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/og-image-esim.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-rauc1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/placeholder-rauc1.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-sm6lp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/placeholder-sm6lp.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-t7lfv.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/placeholder-t7lfv.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-xb8ok.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/XWoArG2__xRF4UnmwVowPD/public/placeholder-xb8ok.png" isMerged="true"
[V0_FILE]png:file="public/qr-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_t3vkSs3AAV6UaCfzK7830dm9wD1L/KXH3p5uTvQTpQgqmUmQROG/public/qr-code.png" isMerged="true"
[V0_FILE]typescript:file="hooks/use-percentage.ts"
"use client"

import { useState, useCallback } from "react"

interface UsePercentageOptions {
  min?: number
  max?: number
  initialValue?: number
  step?: number
  precision?: number
  onChange?: (value: number) => void
}

interface UsePercentageReturn {
  value: number
  displayValue: string
  setValue: (value: number) => void
  setValueFromString: (value: string) => void
  increment: () => void
  decrement: () => void
  isValid: boolean
  errorMessage: string | null
  percentage: number // 0-1 value for calculations
  formattedPercentage: string // Formatted string with % symbol
}

export function usePercentage({
  min = 0,
  max = 100,
  initialValue = 0,
  step = 1,
  precision = 0,
  onChange,
}: UsePercentageOptions = {}): UsePercentageReturn {
  const [value, setValueInternal] = useState<number>(Math.min(Math.max(initialValue, min), max))
  const [isValid, setIsValid] = useState<boolean>(true)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

// Format the value for display
  const displayValue = value.toFixed(precision)

// Calculate the percentage (0-1) for calculations
  const percentage = value / 100

// Formatted percentage string with % symbol
  const formattedPercentage = `${displayValue}%`

const validateValue = useCallback(
    (newValue: number): boolean => {
      if (isNaN(newValue)) {
        setIsValid(false)
        setErrorMessage("Please enter a valid number")
        return false
      }

if (newValue < min) {
        setIsValid(false)
        setErrorMessage(`Value cannot be less than ${min}%`)
        return false
      }

if (newValue > max) {
        setIsValid(false)
        setErrorMessage(`Value cannot be greater than ${max}%`)
        return false
      }

setIsValid(true)
      setErrorMessage(null)
      return true
    },
    [min, max],
  )

const setValue = useCallback(
    (newValue: number) => {
      if (validateValue(newValue)) {
        // Round to the specified precision
        const roundedValue = Number.parseFloat(newValue.toFixed(precision))
        setValueInternal(roundedValue)
        onChange?.(roundedValue)
      }
    },
    [validateValue, precision, onChange],
  )

const setValueFromString = useCallback(
    (valueStr: string) => {
      // Remove any % signs and trim whitespace
      const cleanedValue = valueStr.replace(/%/g, "").trim()

// If empty string, set to minimum value
      if (cleanedValue === "") {
        setValue(min)
        return
      }

const parsedValue = Number.parseFloat(cleanedValue)
      setValue(parsedValue)
    },
    [setValue, min],
  )

const increment = useCallback(() => {
    setValue(Math.min(value + step, max))
  }, [value, step, max, setValue])

const decrement = useCallback(() => {
    setValue(Math.max(value - step, min))
  }, [value, step, min, setValue])

return {
    value,
    displayValue,
    setValue,
    setValueFromString,
    increment,
    decrement,
    isValid,
    errorMessage,
    percentage,
    formattedPercentage,
  }
}
[V0_FILE]typescriptreact:file="components/ui/percentage-input.tsx"
"use client"

import type React from "react"
import { forwardRef, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Minus, Plus, Percent } from "lucide-react"
import { cn } from "@/lib/utils"
import { usePercentage } from "@/hooks/use-percentage"
import { EnhancedTooltip } from "@/components/ui/enhanced-tooltip"

export interface PercentageInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
  value?: number
  onChange?: (value: number) => void
  min?: number
  max?: number
  step?: number
  precision?: number
  showControls?: boolean
  showTooltip?: boolean
  variant?: "primary" | "secondary" | "minimal"
  size?: "sm" | "md" | "lg"
  showPercentSign?: boolean
  label?: string
  error?: string
  className?: string
  inputClassName?: string
  tooltipContent?: React.ReactNode
}

const PercentageInput = forwardRef<HTMLInputElement, PercentageInputProps>(
  (
    {
      value: propValue,
      onChange,
      min = 0,
      max = 100,
      step = 1,
      precision = 0,
      showControls = true,
      showTooltip = false,
      variant = "primary",
      size = "md",
      showPercentSign = true,
      label,
      error,
      className,
      inputClassName,
      tooltipContent,
      disabled,
      ...props
    },
    ref,
  ) => {
    // Use the percentage hook for validation and formatting
    const {
      value,
      displayValue,
      setValue,
      setValueFromString,
      increment,
      decrement,
      isValid,
      errorMessage: hookError,
      formattedPercentage,
    } = usePercentage({
      min,
      max,
      initialValue: propValue ?? 0,
      step,
      precision,
      onChange,
    })

// Sync with external value prop
    useEffect(() => {
      if (propValue !== undefined && propValue !== value) {
        setValue(propValue)
      }
    }, [propValue, setValue, value])

// Handle input change
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      setValueFromString(e.target.value)
    }

// Handle blur event to format the value
    const handleBlur = () => {
      // Force the input to show the validated value
      setValueFromString(displayValue)
    }

// Determine size classes
    const sizeClasses = {
      sm: "h-8 text-sm",
      md: "h-10 text-base",
      lg: "h-12 text-lg",
    }

// Determine variant classes
    const variantClasses = {
      primary: "bg-[#1E2F3C] border-[#00FFFF]/30 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      secondary: "bg-[#263A49] border-[#00FFFF]/20 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
      minimal: "bg-transparent border-[#00FFFF]/10 focus:border-[#00FFFF] focus:ring-[#00FFFF]",
    }

// Button size classes
    const buttonSizeClasses = {
      sm: "h-8 w-8",
      md: "h-10 w-10",
      lg: "h-12 w-12",
    }

// Determine if there's an error
    const errorToShow = error || (isValid ? null : hookError)

// Input with percentage sign
    const inputWithPercentage = (
      <div className={cn("relative flex items-center", className)}>
        {showControls && (
          <Button
            type="button"
            variant="secondary"
            size="icon"
            className={cn(
              buttonSizeClasses[size],
              "rounded-r-none border-r-0",
              disabled && "opacity-50 cursor-not-allowed",
            )}
            onClick={decrement}
            disabled={disabled || value <= min}
            aria-label="Decrease percentage"
          >
            <Minus className="h-4 w-4" />
          </Button>
        )}

{!showPercentSign && (
            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#B0BEC5]">
              <Percent className="h-4 w-4" />
            </div>
          )}
        </div>

{showControls && (
          <Button
            type="button"
            variant="secondary"
            size="icon"
            className={cn(
              buttonSizeClasses[size],
              "rounded-l-none border-l-0",
              disabled && "opacity-50 cursor-not-allowed",
            )}
            onClick={increment}
            disabled={disabled || value >= max}
            aria-label="Increase percentage"
          >
            <Plus className="h-4 w-4" />
          </Button>
        )}
      </div>
    )

return (
      <div className="space-y-2">
        {label && (
          <div className="flex items-center space-x-2">
            <label className="text-sm font-medium text-white">{label}</label>
            {showTooltip && tooltipContent && (
              <EnhancedTooltip content={tooltipContent} position="top">
                <div className="cursor-help text-[#B0BEC5]">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-4 w-4"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <path d="M12 16v-4M12 8h.01" />
                  </svg>
                </div>
              </EnhancedTooltip>
            )}
          </div>
        )}

{showTooltip && tooltipContent ? (
          <EnhancedTooltip content={tooltipContent} position="top">
            {inputWithPercentage}
          </EnhancedTooltip>
        ) : (
          inputWithPercentage
        )}

{errorToShow && <p className="text-sm text-red-500">{errorToShow}</p>}
      </div>
    )
  },
)

PercentageInput.displayName = "PercentageInput"

export { PercentageInput }
[V0_FILE]typescriptreact:file="app/ui-kit/percentage-input/page.tsx"
"use client"

import { useState } from "react"
import { PercentageInput } from "@/components/ui/percentage-input"
import { EnhancedCard } from "@/components/ui/enhanced-card"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"
import { EnhancedButton } from "@/components/ui/enhanced-button"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Slider } from "@/components/ui/slider"
import { usePercentage } from "@/hooks/use-percentage"

export default function PercentageInputPage() {
  // Basic percentage input
  const [basicValue, setBasicValue] = useState<number>(50)

// Precision percentage
  const [precisionValue, setPrecisionValue] = useState<number>(33.33)

// Range limited percentage
  const [rangeValue, setRangeValue] = useState<number>(25)

// Threshold example
  const [thresholdValue, setThresholdValue] = useState<number>(75)

// Resource allocation example
  const [cpuAllocation, setCpuAllocation] = useState<number>(30)
  const [memoryAllocation, setMemoryAllocation] = useState<number>(50)
  const [storageAllocation, setStorageAllocation] = useState<number>(20)

// Settings example
  const [compressionLevel, setCompressionLevel] = useState<number>(60)
  const { percentage: compressionPercentage, formattedPercentage: formattedCompression } = usePercentage({
    initialValue: compressionLevel,
  })

// Calculate total allocation
  const totalAllocation = cpuAllocation + memoryAllocation + storageAllocation
  const isValidAllocation = totalAllocation === 100

return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold mb-8">Percentage Input Component</h1>
      <p className="text-xl text-[#B0BEC5] max-w-3xl mb-12">
        A flexible percentage input component for specifying percentage values across the application.
      </p>

<Tabs defaultValue="examples" className="w-full">
        <TabsList className="mb-8">
          <TabsTrigger value="examples">Examples</TabsTrigger>
          <TabsTrigger value="variants">Variants</TabsTrigger>
          <TabsTrigger value="use-cases">Use Cases</TabsTrigger>
        </TabsList>

{/* Basic Examples */}
        <TabsContent value="examples" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Basic Percentage Input</CardTitle>
              <CardDescription>Standard percentage input with controls</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <PercentageInput
                    label="Percentage Value"
                    value={basicValue}
                    onChange={setBasicValue}
                    showTooltip
                    tooltipContent="Enter a percentage value between 0 and 100"
                  />

<div className="space-y-4 bg-[#1E2F3C] p-4 rounded-lg">
                  <h3 className="text-lg font-medium">Current Value</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Display Value:</p>
                      <p className="font-mono">{basicValue}%</p>
                    </div>
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Decimal Value:</p>
                      <p className="font-mono">{basicValue / 100}</p>
                    </div>
                  </div>

<div className="pt-4">
                    <Label htmlFor="slider-input">Slider Control</Label>
                    <Slider
                      id="slider-input"
                      min={0}
                      max={100}
                      step={1}
                      value={[basicValue]}
                      onValueChange={(values) => setBasicValue(values[0])}
                      className="mt-2"
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Precision Percentage</CardTitle>
              <CardDescription>Percentage input with decimal precision</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <PercentageInput
                    label="Percentage with Precision"
                    value={precisionValue}
                    onChange={setPrecisionValue}
                    precision={2}
                    step={0.01}
                  />

<div className="space-y-4 bg-[#1E2F3C] p-4 rounded-lg">
                  <h3 className="text-lg font-medium">Precision Control</h3>
                  <p className="text-sm text-[#B0BEC5]">
                    This input allows for decimal precision with a step value of 0.01. Useful for fine-grained control
                    over percentage values.
                  </p>

<div className="grid grid-cols-2 gap-4 pt-2">
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Display Value:</p>
                      <p className="font-mono">{precisionValue.toFixed(2)}%</p>
                    </div>
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Decimal Value:</p>
                      <p className="font-mono">{(precisionValue / 100).toFixed(4)}</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Range Limited Percentage</CardTitle>
              <CardDescription>Percentage input with custom min/max range</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <PercentageInput
                    label="Limited Range (10% - 50%)"
                    value={rangeValue}
                    onChange={setRangeValue}
                    min={10}
                    max={50}
                    tooltipContent="This input is limited to values between 10% and 50%"
                    showTooltip
                  />

<div className="space-y-4 bg-[#1E2F3C] p-4 rounded-lg">
                  <h3 className="text-lg font-medium">Range Validation</h3>
                  <p className="text-sm text-[#B0BEC5]">
                    This input enforces a minimum of 10% and maximum of 50%. The component will validate and prevent
                    values outside this range.
                  </p>

<div className="pt-4 flex gap-2">
                    <EnhancedButton variant="secondary" size="sm" onClick={() => setRangeValue(10)}>
                      Set Minimum (10%)
                    </EnhancedButton>
                    <EnhancedButton variant="secondary" size="sm" onClick={() => setRangeValue(50)}>
                      Set Maximum (50%)
                    </EnhancedButton>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Variants */}
        <TabsContent value="variants" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Input Variants</CardTitle>
              <CardDescription>Different visual styles for percentage inputs</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="space-y-4">
                  <Label>Primary Variant</Label>
                  <PercentageInput variant="primary" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">variant="primary"</p>
                </div>

<div className="space-y-4">
                  <Label>Secondary Variant</Label>
                  <PercentageInput variant="secondary" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">variant="secondary"</p>
                </div>

<div className="space-y-4">
                  <Label>Minimal Variant</Label>
                  <PercentageInput variant="minimal" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">variant="minimal"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Size Variants</CardTitle>
              <CardDescription>Different sizes for percentage inputs</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="space-y-4">
                  <Label>Small Size</Label>
                  <PercentageInput size="sm" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">size="sm"</p>
                </div>

<div className="space-y-4">
                  <Label>Medium Size (Default)</Label>
                  <PercentageInput size="md" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">size="md"</p>
                </div>

<div className="space-y-4">
                  <Label>Large Size</Label>
                  <PercentageInput size="lg" value={50} onChange={() => {}} />
                  <p className="text-sm text-[#B0BEC5]">size="lg"</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Display Options</CardTitle>
              <CardDescription>Different display configurations</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <Label>Without Controls</Label>
                  <PercentageInput value={50} onChange={() => {}} showControls={false} />
                  <p className="text-sm text-[#B0BEC5]">showControls=false</p>
                </div>

<div className="space-y-4">
                  <Label>Without Percent Sign</Label>
                  <PercentageInput value={50} onChange={() => {}} showPercentSign={false} />
                  <p className="text-sm text-[#B0BEC5]">showPercentSign=false</p>
                </div>

<div className="space-y-4">
                  <Label>With Error State</Label>
                  <PercentageInput value={50} onChange={() => {}} error="This is an example error message" />
                  <p className="text-sm text-[#B0BEC5]">With error prop</p>
                </div>

<div className="space-y-4">
                  <Label>Disabled State</Label>
                  <PercentageInput value={50} onChange={() => {}} disabled />
                  <p className="text-sm text-[#B0BEC5]">disabled=true</p>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>

{/* Use Cases */}
        <TabsContent value="use-cases" className="space-y-8">
          <EnhancedCard>
            <CardHeader>
              <CardTitle>Threshold Configuration</CardTitle>
              <CardDescription>Setting alert thresholds for monitoring</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <PercentageInput
                    label="Alert Threshold"
                    value={thresholdValue}
                    onChange={setThresholdValue}
                    tooltipContent="Set the threshold at which alerts will be triggered"
                    showTooltip
                  />

<div className="pt-6">
                    <div className="relative h-8 bg-[#1E2F3C] rounded-lg overflow-hidden">
                      <div
                        className="absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 to-red-500"
                        style={{ width: "100%" }}
                      />
                      <div
                        className="absolute top-0 h-full border-l-2 border-white"
                        style={{ left: `${thresholdValue}%` }}
                      >
                        <div className="absolute top-full left-0 transform -translate-x-1/2 mt-2 text-xs font-medium">
                          {thresholdValue}%
                        </div>
                      </div>
                    </div>
                    <div className="flex justify-between mt-6 text-xs text-[#B0BEC5]">
                      <span>Normal</span>
                      <span>Warning</span>
                      <span>Critical</span>
                    </div>
                  </div>
                </div>

<div className="space-y-4 bg-[#1E2F3C] p-4 rounded-lg">
                  <h3 className="text-lg font-medium">Threshold Configuration</h3>
                  <p className="text-sm text-[#B0BEC5]">
                    Set the threshold at which the system will trigger alerts. This is commonly used for:
                  </p>
                  <ul className="list-disc list-inside text-sm text-[#B0BEC5] space-y-1">
                    <li>CPU usage alerts</li>
                    <li>Memory utilization warnings</li>
                    <li>Storage capacity notifications</li>
                    <li>Network bandwidth thresholds</li>
                  </ul>

<div className="pt-4 mt-2">
                    <div
                      className={`p-3 rounded-lg ${thresholdValue < 50 ? "bg-green-500/20" : thresholdValue < 80 ? "bg-yellow-500/20" : "bg-red-500/20"}`}
                    >
                      <p className="text-sm font-medium">
                        {thresholdValue < 50
                          ? "System is operating within normal parameters"
                          : thresholdValue < 80
                            ? "Warning: System is approaching critical threshold"
                            : "Critical: System has exceeded safe operating threshold"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Resource Allocation</CardTitle>
              <CardDescription>Allocating resources with percentage distribution</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label>CPU Allocation</Label>
                    <PercentageInput value={cpuAllocation} onChange={setCpuAllocation} variant="primary" />
                  </div>

<div className="space-y-2">
                    <Label>Memory Allocation</Label>
                    <PercentageInput value={memoryAllocation} onChange={setMemoryAllocation} variant="primary" />
                  </div>

<div className="space-y-2">
                    <Label>Storage Allocation</Label>
                    <PercentageInput value={storageAllocation} onChange={setStorageAllocation} variant="primary" />
                  </div>
                </div>

<div className={`p-4 rounded-lg ${isValidAllocation ? "bg-green-500/20" : "bg-red-500/20"}`}>
                  <div className="flex justify-between items-center">
                    <p className="text-sm font-medium">Total Allocation: {totalAllocation}%</p>
                    {isValidAllocation ? (
                      <span className="text-green-400 text-sm">✓ Valid configuration</span>
                    ) : (
                      <span className="text-red-400 text-sm">
                        ✗ Total must equal 100% (currently {totalAllocation}%)
                      </span>
                    )}
                  </div>
                </div>

<div className="h-8 bg-[#1E2F3C] rounded-lg overflow-hidden flex">
                  <div className="h-full bg-blue-500" style={{ width: `${cpuAllocation}%` }}>
                    {cpuAllocation >= 10 && (
                      <div className="h-full flex items-center justify-center text-xs font-medium">
                        CPU {cpuAllocation}%
                      </div>
                    )}
                  </div>
                  <div className="h-full bg-purple-500" style={{ width: `${memoryAllocation}%` }}>
                    {memoryAllocation >= 10 && (
                      <div className="h-full flex items-center justify-center text-xs font-medium">
                        Memory {memoryAllocation}%
                      </div>
                    )}
                  </div>
                  <div className="h-full bg-teal-500" style={{ width: `${storageAllocation}%` }}>
                    {storageAllocation >= 10 && (
                      <div className="h-full flex items-center justify-center text-xs font-medium">
                        Storage {storageAllocation}%
                      </div>
                    )}
                  </div>
                </div>

<div className="pt-4 flex justify-end gap-2">
                  <EnhancedButton
                    variant="secondary"
                    size="sm"
                    onClick={() => {
                      setCpuAllocation(33)
                      setMemoryAllocation(33)
                      setStorageAllocation(34)
                    }}
                  >
                    Reset to Balanced
                  </EnhancedButton>
                  <EnhancedButton variant="primary" size="sm" disabled={!isValidAllocation}>
                    Apply Configuration
                  </EnhancedButton>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>

<EnhancedCard>
            <CardHeader>
              <CardTitle>Settings Configuration</CardTitle>
              <CardDescription>Using percentage for application settings</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <PercentageInput
                    label="Compression Level"
                    value={compressionLevel}
                    onChange={setCompressionLevel}
                    tooltipContent="Higher values provide better compression but slower performance"
                    showTooltip
                  />

<div className="space-y-4 bg-[#1E2F3C] p-4 rounded-lg">
                  <h3 className="text-lg font-medium">Compression Settings</h3>
                  <p className="text-sm text-[#B0BEC5]">
                    Configure the compression level for data storage and transmission. Higher values provide better
                    compression ratios but require more processing power.
                  </p>

<div className="grid grid-cols-2 gap-4 pt-2">
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Compression Level:</p>
                      <p className="font-medium">{formattedCompression}</p>
                    </div>
                    <div>
                      <p className="text-sm text-[#B0BEC5]">Estimated Savings:</p>
                      <p className="font-medium">{Math.round(20 + compressionPercentage * 60)}%</p>
                    </div>
                  </div>

<div className="pt-4 mt-2">
                    <div className="p-3 rounded-lg bg-[#263A49]">
                      <p className="text-sm">
                        {compressionLevel < 30
                          ? "Low compression: Fastest performance, minimal space savings"
                          : compressionLevel < 70
                            ? "Balanced compression: Good performance with reasonable space savings"
                            : "High compression: Maximum space savings with reduced performance"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </EnhancedCard>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/iot/device-threshold-config.tsx"
"use client"

import { useState } from "react"
import { PercentageInput } from "@/components/ui/percentage-input"
import { EnhancedCard } from "@/components/ui/enhanced-card"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EnhancedButton } from "@/components/ui/enhanced-button"
import { EnhancedAlert } from "@/components/ui/enhanced-alert"
import { Label } from "@/components/ui/label"
import { AlertTriangle, BatteryMedium, Cpu, Thermometer } from "lucide-react"

interface DeviceThresholdConfigProps {
  deviceId: string
  deviceName: string
  onSave?: (thresholds: DeviceThresholds) => Promise<void>
  initialThresholds?: DeviceThresholds
}

export interface DeviceThresholds {
  cpu: number
  memory: number
  temperature: number
  battery: number
}

export function DeviceThresholdConfig({
  deviceId,
  deviceName,
  onSave,
  initialThresholds = {
    cpu: 80,
    memory: 85,
    temperature: 70,
    battery: 15,
  },
}: DeviceThresholdConfigProps) {
  const [thresholds, setThresholds] = useState<DeviceThresholds>(initialThresholds)
  const [isSaving, setIsSaving] = useState(false)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [saveSuccess, setSaveSuccess] = useState(false)

const handleSave = async () => {
    if (!onSave) return

setIsSaving(true)
    setSaveError(null)
    setSaveSuccess(false)

try {
      await onSave(thresholds)
      setSaveSuccess(true)

// Clear success message after 3 seconds
      setTimeout(() => {
        setSaveSuccess(false)
      }, 3000)
    } catch (error) {
      setSaveError(error instanceof Error ? error.message : "Failed to save thresholds")
    } finally {
      setIsSaving(false)
    }
  }

const updateThreshold = (key: keyof DeviceThresholds, value: number) => {
    setThresholds((prev) => ({
      ...prev,
      [key]: value,
    }))
  }

return (
    <EnhancedCard>
      <CardHeader>
        <CardTitle>Alert Thresholds: {deviceName}</CardTitle>
        <CardDescription>Configure when alerts will be triggered for this device</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {saveError && (
            <EnhancedAlert variant="error" title="Error Saving Thresholds" description={saveError} withAnimation />
          )}

{saveSuccess && (
            <EnhancedAlert
              variant="success"
              title="Thresholds Saved"
              description="Device alert thresholds have been updated successfully."
              withAnimation
            />
          )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <Cpu className="h-5 w-5 text-[#00FFFF]" />
                <Label>CPU Usage Threshold</Label>
              </div>
              <PercentageInput
                value={thresholds.cpu}
                onChange={(value) => updateThreshold("cpu", value)}
                tooltipContent="Alert when CPU usage exceeds this percentage"
                showTooltip
              />
              <p className="text-sm text-[#B0BEC5]">Alerts will trigger when CPU usage exceeds {thresholds.cpu}%</p>
            </div>

<div className="space-y-4">
              <div className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5 text-[#00FFFF]" />
                <Label>Memory Usage Threshold</Label>
              </div>
              <PercentageInput
                value={thresholds.memory}
                onChange={(value) => updateThreshold("memory", value)}
                tooltipContent="Alert when memory usage exceeds this percentage"
                showTooltip
              />
              <p className="text-sm text-[#B0BEC5]">
                Alerts will trigger when memory usage exceeds {thresholds.memory}%
              </p>
            </div>

<div className="space-y-4">
              <div className="flex items-center gap-2">
                <Thermometer className="h-5 w-5 text-[#00FFFF]" />
                <Label>Temperature Threshold</Label>
              </div>
              <PercentageInput
                value={thresholds.temperature}
                onChange={(value) => updateThreshold("temperature", value)}
                tooltipContent="Alert when temperature exceeds this percentage of maximum"
                showTooltip
              />
              <p className="text-sm text-[#B0BEC5]">
                Alerts will trigger when temperature exceeds {thresholds.temperature}% of maximum
              </p>
            </div>

<div className="space-y-4">
              <div className="flex items-center gap-2">
                <BatteryMedium className="h-5 w-5 text-[#00FFFF]" />
                <Label>Low Battery Threshold</Label>
              </div>
              <PercentageInput
                value={thresholds.battery}
                onChange={(value) => updateThreshold("battery", value)}
                tooltipContent="Alert when battery falls below this percentage"
                showTooltip
              />
              <p className="text-sm text-[#B0BEC5]">
                Alerts will trigger when battery falls below {thresholds.battery}%
              </p>
            </div>
          </div>

<div className="pt-4 border-t border-[#00FFFF]/10 flex justify-end">
            <EnhancedButton variant="primary" onClick={handleSave} isLoading={isSaving} disabled={isSaving || !onSave}>
              Save Thresholds
            </EnhancedButton>
          </div>
        </div>
      </CardContent>
    </EnhancedCard>
  )
}
[V0_FILE]typescriptreact:file="components/iot/resource-allocation-panel.tsx"
"use client"

import { useState } from "react"
import { PercentageInput } from "@/components/ui/percentage-input"
import { EnhancedCard } from "@/components/ui/enhanced-card"
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EnhancedButton } from "@/components/ui/enhanced-button"
import { EnhancedAlert } from "@/components/ui/enhanced-alert"
import { Label } from "@/components/ui/label"
import { EnhancedProgress } from "@/components/ui/enhanced-progress"

interface ResourceAllocationPanelProps {
  onSave?: (allocation: ResourceAllocation) => Promise<void>
  initialAllocation?: ResourceAllocation
  totalAvailable?: number
}

export interface ResourceAllocation {
  [key: string]: number
}

export function ResourceAllocationPanel({
  onSave,
  initialAllocation = {
    cpu: 30,
    memory: 40,
    storage: 20,
    network: 10,
  },
  totalAvailable = 100,
}: ResourceAllocationPanelProps) {
  const [allocation, setAllocation] = useState<ResourceAllocation>(initialAllocation)
  const [isSaving, setIsSaving] = useState(false)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [saveSuccess, setSaveSuccess] = useState(false)

// Calculate total allocation
  const totalAllocated = Object.values(allocation).reduce((sum, value) => sum + value, 0)
  const isValidAllocation = totalAllocated === totalAvailable
  const remainingToAllocate = totalAvailable - totalAllocated

// Generate colors for each resource
  const resourceColors: Record<string, string> = {
    cpu: "bg-blue-500",
    memory: "bg-purple-500",
    storage: "bg-teal-500",
    network: "bg-amber-500",
  }

// Resource labels
  const resourceLabels: Record<string, string> = {
    cpu: "CPU Resources",
    memory: "Memory Resources",
    storage: "Storage Resources",
    network: "Network Bandwidth",
  }

const handleSave = async () => {
    if (!onSave || !isValidAllocation) return

setIsSaving(true)
    setSaveError(null)
    setSaveSuccess(false)

try {
      await onSave(allocation)
      setSaveSuccess(true)

// Clear success message after 3 seconds
      setTimeout(() => {
        setSaveSuccess(false)
      }, 3000)
    } catch (error) {
      setSaveError(error instanceof Error ? error.message : "Failed to save resource allocation")
    } finally {
      setIsSaving(false)
    }
  }

const updateAllocation = (key: string, value: number) => {
    setAllocation((prev) => ({
      ...prev,
      [key]: value,
    }))
  }

// Reset to balanced allocation
  const resetToBalanced = () => {
    const resourceCount = Object.keys(allocation).length
    const baseValue = Math.floor(totalAvailable / resourceCount)
    const remainder = totalAvailable % resourceCount

const newAllocation: ResourceAllocation = {}
    Object.keys(allocation).forEach((key, index) => {
      newAllocation[key] = baseValue + (index < remainder ? 1 : 0)
    })

setAllocation(newAllocation)
  }

return (
    <EnhancedCard>
      <CardHeader>
        <CardTitle>Resource Allocation</CardTitle>
        <CardDescription>Allocate available resources across different components</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {saveError && (
            <EnhancedAlert variant="error" title="Error Saving Allocation" description={saveError} withAnimation />
          )}

{saveSuccess && (
            <EnhancedAlert
              variant="success"
              title="Allocation Saved"
              description="Resource allocation has been updated successfully."
              withAnimation
            />
          )}

<div className={`p-4 rounded-lg ${isValidAllocation ? "bg-green-500/20" : "bg-red-500/20"}`}>
            <div className="flex justify-between items-center">
              <p className="text-sm font-medium">
                Total Allocation: {totalAllocated}% of {totalAvailable}%
              </p>
              {isValidAllocation ? (
                <span className="text-green-400 text-sm">✓ Valid configuration</span>
              ) : (
                <span className="text-red-400 text-sm">
                  {remainingToAllocate > 0
                    ? `${remainingToAllocate}% remaining to allocate`
                    : `${Math.abs(remainingToAllocate)}% over-allocated`}
                </span>
              )}
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {Object.entries(allocation).map(([key, value]) => (
              <div key={key} className="space-y-4">
                <Label>{resourceLabels[key] || key}</Label>
                <PercentageInput
                  value={value}
                  onChange={(newValue) => updateAllocation(key, newValue)}
                  tooltipContent={`Allocate percentage of available resources to ${key}`}
                  showTooltip
                />
                <EnhancedProgress
                  value={value}
                  variant="default"
                  showValue
                  className={resourceColors[key] ? resourceColors[key].replace("bg-", "bg-opacity-50 ") : ""}
                />
              </div>
            ))}
          </div>

<div className="h-8 bg-[#1E2F3C] rounded-lg overflow-hidden flex">
            {Object.entries(allocation).map(([key, value]) => (
              <div
                key={key}
                className={`h-full ${resourceColors[key] || "bg-gray-500"}`}
                style={{ width: `${value}%` }}
              >
                {value >= 10 && (
                  <div className="h-full flex items-center justify-center text-xs font-medium">
                    {key} {value}%
                  </div>
                )}
              </div>
            ))}
          </div>

<div className="pt-4 border-t border-[#00FFFF]/10 flex justify-between">
            <EnhancedButton variant="secondary" onClick={resetToBalanced}>
              Reset to Balanced
            </EnhancedButton>

<EnhancedButton
              variant="primary"
              onClick={handleSave}
              isLoading={isSaving}
              disabled={isSaving || !isValidAllocation || !onSave}
            >
              Apply Allocation
            </EnhancedButton>
          </div>
        </div>
      </CardContent>
    </EnhancedCard>
  )
}
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-[#1E2F3C]">
      <SliderPrimitive.Range className="absolute h-full bg-gradient-to-r from-[#00FFFF]/50 to-[#00FFFF]" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-[#00FFFF] bg-[#263A49] ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }</article></body></html>

About

Tags

Share

More from nexorasim

More Templates Like This

About

Tags

Share

About

Tags

Share

More from nexorasim

More Templates Like This