[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222 47% 11%; --foreground: 210 40% 98%; --card: 222 47% 11%; --card-foreground: 210 40% 98%; --popover: 222 47% 11%; --popover-foreground: 210 40% 98%; --primary: 262 83% 58%; --primary-foreground: 210 40% 98%; --secondary: 217 33% 17%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 17%; --muted-foreground: 215 20.2% 65.1%; --accent: 262 83% 58%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217 33% 17%; --input: 217 33% 17%; --ring: 262 83% 58%; --radius: 0.5rem; /* Custom colors */ --dark-blue: 222 47% 11%; --aqua: 180 100% 50%; /* Updated brand colors */ --cyan: 180 100% 50%; --cyan-hover: 180 100% 40%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .glassmorphism { @apply bg-white/5 backdrop-blur-md border border-white/10 shadow-xl; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.7); } /* Gradient text */ .gradient-text { @apply bg-gradient-to-r from-violet-500 via-fuchsia-400 to-blue-500 text-transparent bg-clip-text; } /* Animated background */ .animated-bg { background: linear-gradient(-45deg, #8b5cf6, #6366f1, #3b82f6, #0ea5e9); 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%; } } /* Pulse animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .cyan-theme a { color: hsl(var(--cyan)); } .cyan-theme a:hover { color: hsl(var(--cyan-hover)); } /* Anti-copy protection styles */ .prevent-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .content-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: transparent; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider, type ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ChatbotInterface.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" const ChatbotInterface = () => { const [messages, setMessages] = useState<{ text: string; isUser: boolean }[]>([]) const [input, setInput] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (input.trim()) { setMessages([...messages, { text: input, isUser: true }]) // Here you would typically send the message to your AI backend // For now, we'll just simulate a response setTimeout(() => { setMessages((prev) => [ ...prev, { text: "Thank you for your message. An agent will respond shortly.", isUser: false }, ]) }, 1000) setInput("") } } return (

{messages.map((message, index) => (

{message.text}

))}

) } export default ChatbotInterface [V0_FILE]typescriptreact:file="components/AIAssistant.tsx" isMerged="true" "use client" import { useState } from "react" import { Bot, X } from "lucide-react" import { motion } from "framer-motion" const AIAssistant = () => { const [isOpen, setIsOpen] = useState(false) return ( <> {isOpen && (

AI Assistant

{/* Chat messages will go here */}

How can I assist you today?

)} ) } export default AIAssistant [V0_FILE]typescriptreact:file="hooks/useNoCopy.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" export const useNoCopy = () => { useEffect(() => { // Basic copy prevention const preventDefault = (e: Event) => { e.preventDefault() e.stopPropagation() return false } // Handle keyboard shortcuts const preventShortcuts = (e: KeyboardEvent) => { // Prevent Ctrl+S, Ctrl+U, Ctrl+P, F12 if ( (e.ctrlKey && (e.key === "s" || e.key === "u" || e.key === "p" || e.key === "c")) || e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "i") || (e.ctrlKey && e.shiftKey && e.key === "c") || (e.ctrlKey && e.shiftKey && e.key === "j") ) { e.preventDefault() e.stopPropagation() return false } } // Detect and prevent DevTools const detectDevTools = () => { const threshold = 160 const checkDevTools = () => { const widthThreshold = window.outerWidth - window.innerWidth > threshold const heightThreshold = window.outerHeight - window.innerHeight > threshold if (widthThreshold || heightThreshold) { document.body.innerHTML = "Developer tools detected. Please close DevTools to continue." } } window.addEventListener("resize", checkDevTools) return () => window.removeEventListener("resize", checkDevTools) } // Apply invisible overlay const createOverlay = () => { document.body.classList.add("prevent-select") const overlay = document.createElement("div") overlay.className = "content-overlay" document.body.appendChild(overlay) return () => { if (overlay && overlay.parentNode) { overlay.parentNode.removeChild(overlay) } document.body.classList.remove("prevent-select") } } // Register all event listeners document.addEventListener("copy", preventDefault) document.addEventListener("cut", preventDefault) document.addEventListener("paste", preventDefault) document.addEventListener("contextmenu", preventDefault) document.addEventListener("selectstart", preventDefault) document.addEventListener("dragstart", preventDefault) document.addEventListener("keydown", preventShortcuts) // Create overlay and detect DevTools const cleanupOverlay = createOverlay() const cleanupDevTools = detectDevTools() return () => { document.removeEventListener("copy", preventDefault) document.removeEventListener("cut", preventDefault) document.removeEventListener("paste", preventDefault) document.removeEventListener("contextmenu", preventDefault) document.removeEventListener("selectstart", preventDefault) document.removeEventListener("dragstart", preventDefault) document.removeEventListener("keydown", preventShortcuts) cleanupOverlay() cleanupDevTools() } }, []) // Return a function to apply no-copy to specific elements return (element: HTMLElement) => { element.classList.add("prevent-select") element.addEventListener("contextmenu", (e) => e.preventDefault()) element.addEventListener("selectstart", (e) => e.preventDefault()) } } [V0_FILE]typescript:file="app/api/ai-faq/route.ts" isMerged="true" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" export async function POST(req: Request) { const { query } = await req.json() try { const { text } = await generateText({ model: openai("gpt-4o"), prompt: `Answer the following question about eSIMs: ${query}`, system: "You are an AI assistant for eSIM Myanmar, providing accurate and helpful information about eSIMs, their setup, compatibility, and usage.", }) return new Response(JSON.stringify({ answer: text }), { headers: { "Content-Type": "application/json" }, }) } catch (error) { return new Response(JSON.stringify({ error: "Failed to generate answer" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } } [V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Search, HelpCircle, ChevronDown, ChevronUp } from "lucide-react" export default function FAQPage() { const [query, setQuery] = useState("") const [answer, setAnswer] = useState("") const [isLoading, setIsLoading] = useState(false) const [activeCategory, setActiveCategory] = useState("general") const [openQuestion, setOpenQuestion] = useState(null) const handleSearch = async (e: React.FormEvent) => { e.preventDefault() if (!query.trim()) return setIsLoading(true) setAnswer("") try { const response = await fetch("/api/ai-faq", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query }), }) const data = await response.json() if (data.answer) { setAnswer(data.answer) } else { setAnswer("Sorry, I couldn't find an answer to that question.") } } catch (error) { setAnswer("An error occurred while searching for the answer. Please try again later.") } finally { setIsLoading(false) } } const faqCategories = [ { id: "general", name: "General eSIM Questions", questions: [ { id: "what-is-esim", question: "What is an eSIM?", answer: "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 directly into your device and can be programmed remotely with your carrier's information.", }, { id: "esim-advantages", question: "What are the advantages of using an eSIM in Myanmar?", answer: "Using an eSIM in Myanmar offers several benefits: instant activation without visiting a store, ability to store multiple plans on one device, seamless switching between carriers, reduced plastic waste, and convenience for travelers who can set up their connectivity before arriving in Myanmar.", }, { id: "esim-vs-physical", question: "Is an eSIM better than a physical SIM card?", answer: "Whether an eSIM is better depends on your needs. eSIMs offer advantages like remote activation, multiple profiles, and space-saving design. However, physical SIMs are still more widely supported and can be easily transferred between devices. For travelers to Myanmar, eSIMs provide the convenience of setting up connectivity before arrival.", }, { id: "multiple-esims", question: "Can I have multiple eSIMs on my device?", answer: "Yes, most eSIM-compatible devices can store multiple eSIM profiles, though usually only one or two can be active simultaneously depending on your device. This allows you to have different plans for different purposes (e.g., one for data and one for calls) or switch between carriers without physically changing SIM cards.", }, ], }, { id: "compatibility", name: "Device Compatibility", questions: [ { id: "which-devices", question: "Which devices support eSIM in Myanmar?", answer: "Many modern smartphones, tablets, and smartwatches support eSIM technology in Myanmar. These include iPhone XS/XR and newer, Samsung Galaxy S20 and newer, Google Pixel 3 and newer, and recent models from Huawei, Xiaomi, and other manufacturers. Always check your specific device model for eSIM compatibility.", }, { id: "check-compatibility", question: "How do I check if my device supports eSIM?", answer: "To check if your device supports eSIM, you can: 1) Look in your device settings for 'Add Cellular Plan' or 'Add Mobile Plan' options, 2) Check your device manufacturer's website for specifications, 3) Contact your device manufacturer's customer support, or 4) Check the settings under Cellular/Mobile Data for eSIM options.", }, { id: "carrier-locked", question: "Will my carrier-locked phone work with a Myanmar eSIM?", answer: "If your phone is carrier-locked, it may not work with a Myanmar eSIM. Carrier locks restrict which SIM cards (including eSIMs) can be used with your device. You'll need to contact your original carrier to request an unlock before using a Myanmar eSIM. Tourists should ensure their devices are unlocked before traveling to Myanmar.", }, ], }, { id: "activation", name: "Activation & Setup", questions: [ { id: "how-to-activate", question: "How do I activate an eSIM in Myanmar?", answer: "To activate an eSIM in Myanmar: 1) Purchase an eSIM plan from a provider like MPT, Ooredoo, or Telenor, 2) You'll receive a QR code either in person or digitally, 3) Go to your device's cellular/mobile settings, 4) Select 'Add Cellular/Mobile Plan', 5) Scan the QR code, and 6) Follow the on-screen instructions to complete setup. The process takes just a few minutes.", }, { id: "tourist-activation", question: "Can tourists activate an eSIM before arriving in Myanmar?", answer: "Yes, tourists can activate an eSIM before arriving in Myanmar through online services. MPT, Ooredoo, and Telenor offer online eSIM activation for tourists. You'll need to provide passport details, select a plan, make payment online, and then receive a QR code via email. This allows you to set up your connectivity before your trip and connect immediately upon arrival.", }, { id: "required-documents", question: "What documents do I need to get an eSIM in Myanmar?", answer: "To get an eSIM in Myanmar, you'll need: 1) For tourists: a valid passport, 2) For residents: a National Registration Card (NRC), 3) A compatible device, and 4) Payment method for the plan. Some providers may also require proof of address or additional verification, especially for postpaid plans.", }, ], }, { id: "providers", name: "Myanmar eSIM Providers", questions: [ { id: "available-providers", question: "Which providers offer eSIM services in Myanmar?", answer: "The main providers offering eSIM services in Myanmar are: 1) MPT (Myanmar Posts and Telecommunications) - the largest provider with the widest coverage, 2) Ooredoo - known for fast data speeds in urban areas, 3) Telenor - offering balanced coverage and competitive pricing, and 4) Mytel - a newer provider with growing coverage and budget-friendly options.", }, { id: "best-coverage", question: "Which provider has the best coverage in Myanmar?", answer: "MPT (Myanmar Posts and Telecommunications) offers the most extensive coverage in Myanmar, reaching approximately 95% of the population. They have the strongest network in rural and remote areas. Telenor follows with about 85% coverage, while Ooredoo and Mytel have good coverage in urban areas but may be limited in some remote regions.", }, { id: "tourist-plans", question: "What are the best eSIM plans for tourists in Myanmar?", answer: "For tourists visiting Myanmar, the best eSIM plans include: 1) MPT Tourist SIM with 10GB data valid for 14 days, 2) Ooredoo Tourist Pack with unlimited social media and 8GB data for 10 days, and 3) Telenor Travel Pass with 15GB data valid for 15 days. All these plans include some local call minutes and are specifically designed for short-term visitors.", }, ], }, { id: "troubleshooting", name: "Troubleshooting", questions: [ { id: "no-service", question: "Why is my eSIM showing 'No Service' in Myanmar?", answer: "If your eSIM shows 'No Service' in Myanmar, try these solutions: 1) Toggle Airplane mode on and off, 2) Ensure mobile data is enabled for the eSIM, 3) Check if you're in a covered area (especially in remote regions), 4) Verify your plan is active and has credit, 5) Try manually selecting the network in settings, 6) Check APN settings, or 7) Contact your provider's customer support for assistance.", }, { id: "slow-data", question: "Why is my eSIM data speed slow in Myanmar?", answer: "Slow data speeds with your Myanmar eSIM could be due to: 1) Network congestion in busy areas, 2) Being in an area with weak signal strength, 3) Reaching your high-speed data limit (some plans throttle speeds after a certain usage), 4) Network maintenance or technical issues, or 5) Device-related problems. Try moving to a different location or contacting your provider if the issue persists.", }, { id: "cant-scan-qr", question: "What if I can't scan the QR code for eSIM activation?", answer: "If you can't scan the QR code for eSIM activation: 1) Ensure good lighting conditions, 2) Clean your camera lens, 3) Try entering the activation code manually if provided (check for an option like 'Enter Details Manually'), 4) Take a screenshot of the QR code and try scanning it from your photo gallery, or 5) Contact your provider for an alternative activation method or a new QR code.", }, ], }, ] const toggleQuestion = (id: string) => { if (openQuestion === id) { setOpenQuestion(null) } else { setOpenQuestion(id) } } return (

Frequently Asked Questions

Find answers to common questions about eSIM services in Myanmar. Can't find what you're looking for? Use our AI-powered search to get instant answers.

Ask Our AI Assistant

{answer && (

Answer:

{answer}

)}

{faqCategories.map((category) => ( ))}

{faqCategories.map((category) => (

{category.name}

{category.questions.map((item) => (

{openQuestion === item.id && (

{item.answer}

)}

))}

Can't find the answer you're looking for? Contact our support team for assistance.

Contact Support

) } [V0_FILE]typescriptreact:file="components/eSIMDataAdd.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, X, ChevronRight, Wifi } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" const eSIMDataAdd = () => { const [isModalOpen, setIsModalOpen] = useState(false) const [selectedPlan, setSelectedPlan] = useState(null) const dataPlanOptions = [ { id: 1, name: "Basic", data: "1GB", price: "$10" }, { id: 2, name: "Standard", data: "5GB", price: "$25" }, { id: 3, name: "Premium", data: "10GB", price: "$40" }, { id: 4, name: "Unlimited", data: "Unlimited", price: "$60" }, ] const handleAddData = () => { setIsModalOpen(true) } const handleSelectPlan = (plan) => { setSelectedPlan(plan) setIsModalOpen(false) // Here you would typically send this selection to your backend console.log("Selected plan:", plan) } return (

eSIM Data Management

{selectedPlan ? (

{selectedPlan.name} Plan

{selectedPlan.data} - {selectedPlan.price}

) : ( Add Data Plan )} {isModalOpen && (

Select a Data Plan

{dataPlanOptions.map((plan, index) => ( handleSelectPlan(plan)} className="w-full bg-aqua/20 hover:bg-aqua/30 text-aqua py-3 px-4 rounded-lg transition-colors flex items-center justify-between" >

{plan.name}

{plan.data} - {plan.price}

))}

)}

) } export default eSIMDataAdd [V0_FILE]typescript:file="app/api/esim-ai/route.ts" isMerged="true" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" export async function POST(req: Request) { const { prompt } = await req.json() try { const { text } = await generateText({ model: openai("gpt-4o"), prompt, system: `You are an AI assistant specializing in eSIM data services for Myanmar. Provide accurate and helpful information about eSIM data plans, usage, activation, and troubleshooting. Keep responses concise and focused on eSIM data-related topics. If a query is not related to eSIM data, politely redirect the conversation back to eSIM data services.`, }) return new Response(JSON.stringify({ text }), { headers: { "Content-Type": "application/json" }, }) } catch (error) { console.error("Error generating AI response:", error) return new Response(JSON.stringify({ error: "Failed to generate response" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } } [V0_FILE]typescriptreact:file="components/ESIMDataAdd.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, X, ChevronRight, Wifi, Loader2, Check, AlertCircle, Info } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" interface DataPlan { id: number name: string data: string price: string validity: string speed: string coverage: string } const ESIMDataAdd = () => { const [isModalOpen, setIsModalOpen] = useState(false) const [selectedPlan, setSelectedPlan] = useState(null) const [dataPlanOptions, setDataPlanOptions] = useState([]) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const [activationStatus, setActivationStatus] = useState("") // Sample data plans for demonstration const samplePlans = [ { id: 1, name: "Basic", data: "1GB", price: "10,000 MMK", validity: "7 days", speed: "Up to 10 Mbps", coverage: "Urban areas", }, { id: 2, name: "Standard", data: "5GB", price: "25,000 MMK", validity: "15 days", speed: "Up to 50 Mbps", coverage: "Nationwide", }, { id: 3, name: "Premium", data: "10GB", price: "40,000 MMK", validity: "30 days", speed: "Up to 100 Mbps", coverage: "Nationwide + Roaming", }, { id: 4, name: "Unlimited", data: "Unlimited", price: "60,000 MMK", validity: "30 days", speed: "Up to 50 Mbps", coverage: "Nationwide", }, ] const handleAddData = async () => { setIsLoading(true) setError("") try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) // In a real app, you would fetch from your API // const response = await fetch("https://ai.esim.com.mm/data-plans") // if (!response.ok) throw new Error("Failed to fetch data plans") // const plans = await response.json() setDataPlanOptions(samplePlans) setIsModalOpen(true) } catch (error) { console.error("Error fetching data plans:", error) setError("Unable to load data plans. Please try again later.") } finally { setIsLoading(false) } } const handleSelectPlan = async (plan: DataPlan) => { setActivationStatus("processing") try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) // In a real app, you would post to your API // const response = await fetch("https://ai.esim.com.mm/select-plan", { // method: "POST", // headers: { "Content-Type": "application/json" }, // body: JSON.stringify(plan), // }) // if (!response.ok) throw new Error("Failed to select plan") // const result = await response.json() setSelectedPlan(plan) setActivationStatus("success") // Close modal after showing success for a moment setTimeout(() => { setIsModalOpen(false) setActivationStatus("") }, 1500) } catch (error) { console.error("Error selecting plan:", error) setActivationStatus("error") setError("Failed to activate plan. Please try again.") // Reset error state after a few seconds setTimeout(() => { setActivationStatus("") setError("") }, 3000) } } // Calculate data usage percentage for visualization const getDataUsagePercentage = () => { if (!selectedPlan) return 0 // This would normally come from your backend // For demo purposes, we'll generate a random percentage return Math.floor(Math.random() * 60) + 10 } return (

eSIM Data Management

{selectedPlan ? (

{selectedPlan.name} Plan

Data: {selectedPlan.data}

Price: {selectedPlan.price}

Validity: {selectedPlan.validity}

Data Usage {getDataUsagePercentage()}%

) : ( {isLoading ? ( <> Loading Plans... ) : ( <> Add Data Plan )} )} {error && (

{error}

)} {isModalOpen && (

Select a Data Plan

{activationStatus === "processing" ? (

Activating your plan...

) : activationStatus === "success" ? (

Plan activated successfully!

) : activationStatus === "error" ? (

Failed to activate plan

Please try again later

) : (

{dataPlanOptions.map((plan, index) => (

{plan.name} Plan

{plan.price}

Data: {plan.data}

Validity: {plan.validity}

Speed: {plan.speed}

Coverage: {plan.coverage}

))}

)}

Selected plans will be activated immediately and charged to your account. Data validity starts from the moment of activation.

)}

) } export default ESIMDataAdd [V0_FILE]typescriptreact:file="components/ESIMStorageManager.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Database, HardDrive, BarChart2, AlertTriangle, RefreshCw, Shield } from "lucide-react" import DataUsageIndicator from "./DataUsageIndicator" interface ESIM { id: number name: string totalSpace: number usedSpace: number lastUpdated?: string securityStatus?: "secure" | "warning" | "critical" } const ESIMStorageManager: React.FC = () => { const [activeESIM, setActiveESIM] = useState(0) const [isRefreshing, setIsRefreshing] = useState(false) const esimData: ESIM[] = [ { id: 1, name: "eSIM 1", totalSpace: 256, usedSpace: 128, lastUpdated: "Today, 10:30 AM", securityStatus: "secure", }, { id: 2, name: "eSIM 2", totalSpace: 512, usedSpace: 384, lastUpdated: "Yesterday, 3:15 PM", securityStatus: "warning", }, { id: 3, name: "eSIM 3", totalSpace: 128, usedSpace: 32, lastUpdated: "3 days ago", securityStatus: "secure", }, ] const getUsagePercentage = (used: number, total: number): number => { return (used / total) * 100 } const getUsageColor = (percentage: number): string => { if (percentage < 50) return "bg-green-500" if (percentage < 80) return "bg-yellow-500" return "bg-red-500" } const handleRefresh = () => { setIsRefreshing(true) // Simulate refresh setTimeout(() => { setIsRefreshing(false) }, 1500) } const getSecurityStatusIcon = (status: string) => { switch (status) { case "secure": return case "warning": return case "critical": return default: return } } return (

eSIM Storage Management

{esimData.map((esim, index) => ( setActiveESIM(index)} className={`p-4 rounded-lg transition-colors ${ activeESIM === index ? "bg-gradient-to-r from-aqua/20 to-blue-400/20 border border-aqua/30" : "bg-dark-blue/30 border border-gray-700 hover:border-aqua/20" }`} >

{esim.name}

{getSecurityStatusIcon(esim.securityStatus)}

{esim.usedSpace} KB / {esim.totalSpace} KB

Last updated: {esim.lastUpdated}

))}

{esimData[activeESIM].name} Details

Storage Allocation

System

32 KB

User Data

{esimData[activeESIM].usedSpace - 32} KB

Free

{esimData[activeESIM].totalSpace - esimData[activeESIM].usedSpace} KB

Total

{esimData[activeESIM].totalSpace} KB

Security Status

{esimData[activeESIM].securityStatus === "secure" ? (

Your eSIM storage is secure and encrypted.

) : esimData[activeESIM].securityStatus === "warning" ? (

Security update recommended for this eSIM.

) : (

Critical security update required immediately.

)}

{getUsagePercentage(esimData[activeESIM].usedSpace, esimData[activeESIM].totalSpace) > 80 && (

Storage usage is high. Consider managing your eSIM data.

)}

) } export default ESIMStorageManager [V0_FILE]typescriptreact:file="app/providers/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Check, X, AlertTriangle, Wifi, MapPin, Clock, CreditCard, AlertCircle } from "lucide-react" export const metadata = { title: "eSIM Providers in Myanmar | Compare Services", description: "Compare eSIM providers in Myanmar. Find the best data plans, coverage, and prices for tourists and locals.", } export default function ProvidersPage() { const providers = [ { id: "mpt-esim", name: "MPT eSIM", logo: "/placeholder.svg?height=100&width=100&text=MPT", description: "Myanmar's largest telecom provider offering nationwide eSIM coverage with reliable service.", coverage: 95, speedMbps: "10-50", touristPlans: true, dataRollover: true, support: ["English", "Burmese"], pricing: { daily: "3,000 MMK", weekly: "15,000 MMK", monthly: "45,000 MMK", }, pros: ["Widest coverage in Myanmar", "Reliable network stability", "Multiple service centers"], cons: ["Higher pricing than competitors", "Slower data speeds in some areas", "Security concerns with website"], securityWarning: "The official website (esim.com.mm) currently lacks proper security measures. Exercise caution when using their online services.", }, { id: "ooredoo-esim", name: "Ooredoo eSIM", logo: "/placeholder.svg?height=100&width=100&text=Ooredoo", description: "Fast data speeds with excellent urban coverage and competitive pricing for eSIM users.", coverage: 80, speedMbps: "20-100", touristPlans: true, dataRollover: false, support: ["English", "Burmese"], pricing: { daily: "2,500 MMK", weekly: "12,000 MMK", monthly: "40,000 MMK", }, pros: ["Fastest data speeds", "Excellent urban coverage", "Competitive pricing"], cons: ["Limited rural coverage", "No data rollover"], }, { id: "telenor-esim", name: "Telenor eSIM", logo: "/placeholder.svg?height=100&width=100&text=Telenor", description: "Balanced option with good coverage, reasonable speeds and tourist-friendly packages.", coverage: 85, speedMbps: "15-80", touristPlans: true, dataRollover: true, support: ["English", "Burmese", "Thai"], pricing: { daily: "2,800 MMK", weekly: "13,500 MMK", monthly: "42,000 MMK", }, pros: ["Good balance of coverage and speed", "Tourist-friendly packages", "Multi-language support"], cons: ["Occasional network congestion", "Limited premium data options"], }, { id: "mytel-esim", name: "Mytel eSIM", logo: "/placeholder.svg?height=100&width=100&text=Mytel", description: "Newer provider with growing coverage and competitive pricing for budget-conscious users.", coverage: 75, speedMbps: "10-60", touristPlans: false, dataRollover: true, support: ["Burmese", "English"], pricing: { daily: "2,200 MMK", weekly: "11,000 MMK", monthly: "35,000 MMK", }, pros: ["Most affordable pricing", "Good data rollover policy", "Growing network coverage"], cons: ["Less coverage in remote areas", "No specific tourist plans", "Newer network with occasional issues"], }, ] return (

Security Alert: eSIM Myanmar Website

We've identified a security issue with the eSIM Myanmar website (esim.com.mm). The site currently doesn't use a secure connection, potentially putting user data at risk.

When comparing providers, please consider this security concern and prioritize providers with secure websites and data handling practices.

eSIM Providers in Myanmar

Compare the leading eSIM providers in Myanmar to find the best option for your connectivity needs. Whether you're a tourist or local resident, this guide will help you choose the right provider.

Provider Comparison

{providers.map((provider, index) => ( ))}

Provider	Coverage	Speed	Tourist Plans	Data Rollover	Monthly Price	Security
{provider.name}	{provider.coverage}%	{provider.speedMbps} Mbps	{provider.touristPlans ? ( ) : ( )}	{provider.dataRollover ? ( ) : ( )}	{provider.pricing.monthly}	{provider.id === "mpt-esim" ? ( Caution ) : ( )}

{providers.map((provider, index) => (

{provider.name}

{provider.description}

Network Details

Coverage: {provider.coverage}% of Myanmar
Data Speed: {provider.speedMbps} Mbps
Support Languages: {provider.support.join(", ")}

Pricing

Daily Plan: {provider.pricing.daily}
Weekly Plan: {provider.pricing.weekly}
Monthly Plan: {provider.pricing.monthly}

Pros

{pro}

Cons

{con}

{provider.securityWarning && (

{provider.securityWarning}

)}

View Activation Guide

))}

Choosing the Right Provider

When selecting an eSIM provider in Myanmar, consider these key factors:

Coverage Area

If you'll be traveling to remote areas or smaller towns, prioritize providers with the widest coverage. MPT currently offers the most extensive network throughout Myanmar.

Data Speed Needs

For streaming, video calls, or large file uploads, consider providers with faster data speeds. Ooredoo typically offers the fastest speeds in urban areas.

Duration of Stay

Short-term visitors should look for providers with flexible tourist packages. Both MPT and Telenor offer specific plans designed for tourists with shorter durations.

Budget Considerations

If price is your primary concern, Mytel typically offers the most affordable rates, though you may sacrifice some coverage or speed compared to premium providers.

Ready to Get Started?

View Activation Guide Common Questions

) } [V0_FILE]typescriptreact:file="app/activation/page.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" import { Smartphone, QrCode, Wifi, Settings, Check, AlertTriangle, HelpCircle } from "lucide-react" export const metadata = { title: "eSIM Activation Guide | Myanmar eSIM Services", description: "Step-by-step instructions for activating and using eSIMs in Myanmar. Compatible devices, QR code scanning, and troubleshooting tips.", } export default function ActivationPage() { const providers = [ { id: "mpt-esim", name: "MPT eSIM", activationSteps: [ "Visit any MPT service center with your passport or ID", "Request an eSIM activation and select your preferred plan", "Staff will provide a QR code to scan with your device", "Follow the on-screen instructions to complete setup", "Restart your device to finalize activation", ], onlineActivation: true, onlineUrl: "https://www.mpt.com.mm/en/esim/", }, { id: "ooredoo-esim", name: "Ooredoo eSIM", activationSteps: [ "Download the My Ooredoo app from App Store or Google Play", "Register or log in to your account", "Select 'eSIM Activation' from the services menu", "Complete the verification process", "Scan the provided QR code and follow on-screen instructions", ], onlineActivation: true, onlineUrl: "https://www.ooredoo.com.mm/esim/", }, { id: "telenor-esim", name: "Telenor eSIM", activationSteps: [ "Visit a Telenor store with your identification", "Purchase an eSIM package and provide your details", "Receive your QR code for activation", "Scan the QR code using your device's camera", "Follow the setup wizard to complete installation", ], onlineActivation: true, onlineUrl: "https://www.telenor.com.mm/en/esim/", }, { id: "mytel-esim", name: "Mytel eSIM", activationSteps: [ "Visit a Mytel service center with valid ID", "Select your preferred eSIM data plan", "Complete the registration process", "Receive your activation QR code", "Scan the code and follow device instructions to activate", ], onlineActivation: false, onlineUrl: null, }, ] const compatibleDevices = [ { brand: "Apple", models: "iPhone XS/XR and newer, iPad Pro (3rd gen) and newer, iPad Air (3rd gen) and newer" }, { brand: "Samsung", models: "Galaxy S20/Note 20 and newer, Galaxy Z Fold/Flip series, Galaxy Tab S7 and newer" }, { brand: "Google", models: "Pixel 3 and newer" }, { brand: "Huawei", models: "P40, Mate 40 series and newer" }, { brand: "Xiaomi", models: "Mi 10, Mi 11 series and newer" }, { brand: "OnePlus", models: "9 series and newer" }, { brand: "Oppo", models: "Find X3 and newer" }, { brand: "Motorola", models: "Edge series and newer" }, ] return (

eSIM Activation Guide

Follow these step-by-step instructions to activate and use your eSIM in Myanmar. This guide covers device compatibility, activation processes for different providers, and troubleshooting tips.

Compatible Devices

Before activating an eSIM, ensure your device supports this technology. Here's a list of eSIM-compatible devices available in Myanmar:

{compatibleDevices.map((device, index) => (

{device.brand}

{device.models}

))}

Note: Even if your device model is listed, carrier locks or regional variants may affect eSIM compatibility. Check with your device manufacturer or carrier if you're unsure about your specific device.

General Activation Process

1

Check Device Compatibility

Ensure your device supports eSIM technology by checking the manufacturer's specifications or our compatibility list.
2

Choose a Provider

Select an eSIM provider based on your coverage needs, data requirements, and budget.
3

Purchase an eSIM Plan

Visit a provider's store or website to purchase an eSIM plan. You'll need to provide identification.
4

Scan QR Code

You'll receive a QR code that you'll need to scan with your device's camera during the setup process.
5

Complete Setup

Follow the on-screen instructions to complete the eSIM installation and activation.

Important Tips:

Ensure you have a stable internet connection (Wi-Fi recommended) during the activation process.
Keep your device charged or connected to a power source during activation.
Have your identification (passport for tourists, NRC for locals) ready for registration.
Save the QR code or activation details in case you need to reinstall the eSIM later.

Provider-Specific Activation

{providers.map((provider, index) => (

{provider.name} Activation

Step-by-Step Process:

{i + 1}
{step}

Activation Options:

In-Store Activation

Available at all {provider.name} service centers

{provider.onlineActivation ? (

Online Activation

Available through their official website: Visit {provider.name} Website

) : (

Online Activation

Not currently available. Visit a physical store for activation.

)}

))}

Device-Specific Instructions

iPhone (iOS 12.1 or later)

1. Go to Settings > Cellular/Mobile Data
2. Tap "Add Cellular/Mobile Plan"
3. Use your camera to scan the QR code
4. Follow the on-screen instructions
5. Select "Add Cellular Plan" when prompted
6. Choose labels for your plans if you have multiple
7. Select your default line for calls, SMS, and data

Android (Android 10 or later)

1. Go to Settings > Network & Internet > Mobile Network
2. Tap "+" or "Add network" or "Add mobile plan"
3. Tap "Download a SIM instead?" or "Don't have a SIM card?"
4. Scan the QR code provided by your carrier
5. Follow the on-screen instructions to complete setup
6. If prompted, enter the confirmation code provided
7. Set your preferences for calls, SMS, and data

Samsung Galaxy

1. Go to Settings > Connections > SIM card manager
2. Tap "Add mobile plan" or "+ Add eSIM"
3. Select "Scan carrier QR code"
4. Scan the QR code provided by your carrier
5. Follow the on-screen instructions
6. Set your SIM card preferences
7. Restart your device if prompted

Google Pixel

1. Go to Settings > Network & Internet
2. Tap "+" or "Add network"
3. Select "Download a SIM instead"
4. Scan the QR code provided by your carrier
5. Follow the on-screen instructions
6. Choose a name for your eSIM profile
7. Set your preferences for calls and data

Note: The exact steps may vary slightly depending on your device model and software version. If you encounter any issues, refer to your device manufacturer's support documentation or contact your eSIM provider for assistance.

Troubleshooting

QR Code Scanning Issues

• Ensure good lighting when scanning the QR code
• Clean your camera lens
• Try entering the activation code manually if provided
• Request a new QR code if the current one doesn't work

Activation Failures

• Check your internet connection (stable Wi-Fi recommended)
• Restart your device and try again
• Ensure your device is not carrier-locked
• Verify that your device supports eSIM technology
• Contact your provider's customer support for assistance

Connection Issues After Activation

• Toggle Airplane mode on and off
• Check if mobile data is enabled for the eSIM
• Verify APN settings (contact your provider for correct settings)
• Ensure your account and plan are active
• Try manually selecting the network in your device settings

eSIM Not Showing Up

• Restart your device
• Check if your device has the latest software update
• Verify that your eSIM wasn't removed accidentally
• Contact your provider to confirm the eSIM was properly provisioned

Still Have Questions?

View FAQ Contact Support

) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Calendar, User, ArrowRight } from "lucide-react" export const metadata = { title: "Blog | Myanmar eSIM Services", description: "Latest news, guides, and updates about eSIM technology and services in Myanmar.", } export default function BlogPage() { const blogPosts = [ { id: "5g-esim-rollout", title: "5G eSIM Rollout in Myanmar: What to Expect", excerpt: "Learn about the upcoming 5G network expansion and how it will enhance eSIM performance throughout Myanmar.", date: "March 15, 2024", author: "Aung Min", category: "Technology", image: "/placeholder.svg?height=300&width=600&text=5G+eSIM+Rollout", featured: true, }, { id: "best-esim-plans-tourists", title: "Best eSIM Plans for Tourists Visiting Myanmar", excerpt: "A comprehensive guide to choosing the right eSIM plan for your visit to Myanmar, including pricing and coverage details.", date: "March 10, 2024", author: "Nay Lin", category: "Travel", image: "/placeholder.svg?height=300&width=600&text=Tourist+eSIM+Plans", featured: true, }, { id: "esim-vs-physical-sim", title: "eSIM vs Physical SIM: The Comprehensive Comparison", excerpt: "Explore the advantages and disadvantages of both options for Myanmar connectivity, with real-world performance tests.", date: "March 5, 2024", author: "Kyaw Thu", category: "Guides", image: "/placeholder.svg?height=300&width=600&text=eSIM+vs+Physical", featured: true, }, { id: "myanmar-connectivity-guide", title: "Myanmar Connectivity Guide: Urban vs Rural Areas", excerpt: "Detailed analysis of mobile network coverage and performance across different regions of Myanmar.", date: "February 28, 2024", author: "Mya Mya", category: "Guides", image: "/placeholder.svg?height=300&width=600&text=Connectivity+Guide", }, { id: "esim-security-features", title: "Understanding eSIM Security Features", excerpt: "An in-depth look at the security advantages of eSIM technology and how it protects your data.", date: "February 20, 2024", author: "Tun Tun", category: "Security", image: "/placeholder.svg?height=300&width=600&text=eSIM+Security", }, { id: "dual-sim-setup-guide", title: "How to Set Up Dual SIM with eSIM in Myanmar", excerpt: "Step-by-step instructions for configuring and optimizing dual SIM functionality with an eSIM.", date: "February 15, 2024", author: "Su Su", category: "Tutorials", image: "/placeholder.svg?height=300&width=600&text=Dual+SIM+Setup", }, { id: "esim-for-business-travelers", title: "eSIM Solutions for Business Travelers to Myanmar", excerpt: "The best eSIM options for business professionals visiting Myanmar for short or extended stays.", date: "February 10, 2024", author: "Min Thu", category: "Business", image: "/placeholder.svg?height=300&width=600&text=Business+eSIM", }, { id: "future-of-esim-myanmar", title: "The Future of eSIM Technology in Myanmar", excerpt: "Predictions and insights about how eSIM adoption will evolve in Myanmar over the next five years.", date: "February 5, 2024", author: "Zaw Zaw", category: "Technology", image: "/placeholder.svg?height=300&width=600&text=Future+of+eSIM", }, ] const featuredPosts = blogPosts.filter((post) => post.featured) const regularPosts = blogPosts.filter((post) => !post.featured) const categories = [...new Set(blogPosts.map((post) => post.category))] return (

eSIM Myanmar Blog

Stay updated with the latest news, guides, and information about eSIM technology and services in Myanmar.

All Articles

{categories.map((category, index) => ( {category} ))}

{regularPosts.map((post, index) => (

{post.date} {post.category}

{post.title}

{post.excerpt}

{post.author} Read more

))}

Subscribe to Our Newsletter

Get the latest updates on eSIM technology, new provider offerings, and exclusive guides delivered directly to your inbox.

) } [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true" import Link from "next/link" import { Calendar, User, Tag, ArrowLeft, Share2 } from "lucide-react" import { notFound } from "next/navigation" // This would typically come from a CMS or database const getBlogPosts = () => { return [ { id: "5g-esim-rollout", title: "5G eSIM Rollout in Myanmar: What to Expect", excerpt: "Learn about the upcoming 5G network expansion and how it will enhance eSIM performance throughout Myanmar.", date: "March 15, 2024", author: "Aung Min", category: "Technology", content: `

The Future of Connectivity in Myanmar

Myanmar's telecommunications landscape is on the verge of a significant transformation with the upcoming rollout of 5G networks. This advancement will particularly benefit eSIM users, offering unprecedented speeds and connectivity options.

Current State of 5G in Myanmar

As of early 2024, Myanmar's major telecom providers are in various stages of 5G implementation. MPT, the country's largest provider, has begun testing 5G infrastructure in Yangon and Mandalay, with plans to expand to other urban centers by the end of the year. Ooredoo has also announced ambitious plans to launch 5G services in select areas within the next six months.

These developments come as part of Myanmar's broader digital transformation strategy, aiming to enhance connectivity and support growing digital services across the country.

How 5G Will Transform eSIM Experience

For eSIM users in Myanmar, the introduction of 5G networks promises several significant improvements:

Enhanced Speeds: 5G can deliver speeds up to 100 times faster than 4G, enabling seamless streaming, gaming, and large file transfers.
Lower Latency: Reduced response times will improve real-time applications like video conferencing and online gaming.
Greater Capacity: 5G networks can support more connected devices simultaneously, reducing congestion in densely populated areas.
Improved Remote Provisioning: eSIM activation and updates will become even more efficient with 5G's enhanced connectivity.
Advanced IoT Applications: The combination of eSIM and 5G will enable more sophisticated IoT deployments across Myanmar.

Timeline for Nationwide Coverage

While the initial 5G rollout will focus on major urban centers like Yangon, Mandalay, and Naypyidaw, providers have outlined plans for expanding coverage over the next few years:

Phase 1 (2024): Major cities and business districts
Phase 2 (2025): Secondary cities and tourist destinations
Phase 3 (2026-2027): Expansion to suburban and select rural areas

This phased approach means that eSIM users in urban areas will be the first to benefit from 5G capabilities, with coverage gradually extending to more remote regions.

Preparing for 5G eSIM

To take advantage of 5G when it becomes available, Myanmar eSIM users should consider the following preparations:

Ensure your device supports both eSIM and 5G technology
Check with your provider about 5G-compatible eSIM plans
Be prepared for potential plan upgrades to access 5G services
Stay informed about coverage expansion in your area

Challenges and Considerations

Despite the promising outlook, the 5G rollout in Myanmar faces several challenges:

Infrastructure Investment: Building 5G networks requires significant capital investment
Geographic Challenges: Myanmar's diverse terrain makes comprehensive coverage difficult
Device Adoption: Many users will need to upgrade to 5G-capable devices
Regulatory Framework: Ongoing development of policies to govern 5G implementation

Conclusion

The combination of eSIM technology and 5G networks represents the next frontier in Myanmar's telecommunications evolution. While the rollout will take time to reach nationwide coverage, the benefits for eSIM users will be substantial, offering faster, more reliable, and more versatile connectivity options.

As Myanmar continues its digital transformation journey, staying informed about these technological advancements will help both residents and visitors make the most of the country's evolving telecommunications landscape.

`, }, { id: "best-esim-plans-tourists", title: "Best eSIM Plans for Tourists Visiting Myanmar", excerpt: "A comprehensive guide to choosing the right eSIM plan for your visit to Myanmar, including pricing and coverage details.", date: "March 10, 2024", author: "Nay Lin", category: "Travel", content: `

Planning Your Connectivity in Myanmar

For tourists visiting Myanmar, staying connected is essential for navigation, translation, and sharing your experiences. eSIM technology offers a convenient solution, allowing you to set up your connectivity before you even arrive in the country.

This guide will help you choose the best eSIM plan based on your travel duration, data needs, and budget.

Short-Term Visitor Plans (1-7 Days)

MPT Tourist eSIM

Data: 5GB
Validity: 7 days
Price: 10,000 MMK (approximately $5 USD)
Coverage: Excellent nationwide coverage, including most tourist destinations
Additional Features: Includes 30 minutes of local calls

Ooredoo Tourist Pack

Data: 3GB + Unlimited Social Media
Validity: 5 days
Price: 8,500 MMK (approximately $4 USD)
Coverage: Very good in urban areas, limited in some remote regions
Additional Features: Unlimited use of Facebook, Instagram, and WhatsApp

Medium-Term Visitor Plans (1-2 Weeks)

Telenor Travel eSIM

Data: 10GB
Validity: 14 days
Price: 15,000 MMK (approximately $7.50 USD)
Coverage: Good nationwide coverage with strong performance in tourist areas
Additional Features: Includes 60 minutes of local calls and 60 SMS

MPT Explorer eSIM

Data: 15GB
Validity: 15 days
Price: 20,000 MMK (approximately $10 USD)
Coverage: Excellent nationwide coverage, including remote areas
Additional Features: Includes 100 minutes of local calls and access to MPT WiFi hotspots

Long-Term Visitor Plans (2+ Weeks)

Ooredoo Extended Stay

Data: 20GB
Validity: 30 days
Price: 30,000 MMK (approximately $15 USD)
Coverage: Very good in urban areas, improving in rural regions
Additional Features: Includes unlimited social media and 120 minutes of local calls

Telenor Monthly Traveler

Data: 30GB
Validity: 30 days
Price: 35,000 MMK (approximately $17.50 USD)
Coverage: Good nationwide coverage
Additional Features: Includes 200 minutes of local calls and 10GB of nighttime bonus data

How to Choose the Right Plan

Consider these factors when selecting your Myanmar eSIM plan:

Travel Itinerary: If you're visiting remote areas or archaeological sites, prioritize providers with wider coverage like MPT.
Data Usage Habits: Heavy social media users might benefit from Ooredoo's unlimited social media packages.
Budget Considerations: Shorter plans offer better value for brief visits.
Device Compatibility: Ensure your device supports the specific eSIM technology used by your chosen provider.

How to Purchase and Activate

You have several options for purchasing a tourist eSIM for Myanmar:

Online Before Travel: All major providers offer online purchase options, allowing you to set up your eSIM before arrival.
At the Airport: All international airports in Myanmar have provider kiosks where you can purchase and activate an eSIM upon arrival.
Provider Stores: Visit any MPT, Ooredoo, or Telenor store in major cities with your passport to purchase an eSIM.

Tips for Tourists

Download essential apps (maps, translation, travel guides) before activating your eSIM to save data.
Consider downloading offline maps for areas with potentially limited coverage.
Most tourist eSIMs can be topped up if you need additional data during your stay.
Keep your activation QR code saved in case you need to reinstall your eSIM.
Enable data-saving mode on your device to maximize your data allowance.

Conclusion

eSIM technology has made staying connected in Myanmar easier than ever for tourists. By choosing the right plan based on your specific needs, you can enjoy seamless connectivity throughout your journey, enhancing your travel experience while avoiding excessive costs.

Remember to check the latest offerings from providers before your trip, as plans and pricing may change periodically.

`, }, // Additional blog posts would be defined here ] } export async function generateMetadata({ params }) { const posts = getBlogPosts() const post = posts.find((p) => p.id === params.slug) if (!post) { return { title: "Post Not Found", description: "The requested blog post could not be found", } } return { title: `${post.title} | Myanmar eSIM Blog`, description: post.excerpt, } } export default function BlogPostPage({ params }) { const posts = getBlogPosts() const post = posts.find((p) => p.id === params.slug) if (!post) { notFound() } // Find related posts (same category, excluding current post) const relatedPosts = posts.filter((p) => p.category === post.category && p.id !== post.id).slice(0, 3) return (

Back to all articles

{post.category}

{post.title}

{post.date} {post.author}

{post.title}

Category: {post.category}

{relatedPosts.length > 0 && (

{relatedPosts.map((relatedPost, index) => (

{relatedPost.title}

{relatedPost.excerpt}

))}

)}

) } [V0_FILE]typescriptreact:file="app/support/page.tsx" isMerged="true" import { MapPin, Clock } from "lucide-react" import ContactInfo from "@/components/ContactInfo" export const metadata = { title: "Support | Myanmar eSIM Services", description: "Get help with your eSIM services in Myanmar. Contact our support team for assistance with activation, troubleshooting, and general inquiries.", } export default function SupportPage() { return (

Customer Support

Need help with your eSIM? Our support team is ready to assist you with any questions or issues.

Visit Us

123 Connectivity Street, Yangon, Myanmar

Mon-Fri: 9am-6pm, Sat: 10am-4pm

Submit a Support Ticket

Need Immediate Assistance?

For urgent issues or activation problems, please contact our 24/7 hotline.

Call Now: +95 9 876 543 210

) } [V0_FILE]typescriptreact:file="components/LoadingAnimation.tsx" isMerged="true" import type React from "react" const LoadingAnimation: React.FC = () => { return (

) } export default LoadingAnimation [V0_FILE]typescript:file="app/api/ai-search/route.ts" isMerged="true" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" export async function POST(req: Request) { const { query } = await req.json() try { const { text } = await generateText({ model: openai("gpt-4o"), prompt: `Search query for eSIM management: ${query}`, system: "You are an AI assistant for eSIM management in Myanmar. Provide concise and relevant information based on the user's search query.", }) // Simulate fetching data from ai.esim.com.mm const response = await fetch("https://ai.esim.com.mm/search", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query, aiResponse: text }), }) if (!response.ok) { throw new Error("Failed to fetch data from ai.esim.com.mm") } const data = await response.json() return new Response(JSON.stringify(data), { headers: { "Content-Type": "application/json" }, }) } catch (error) { console.error("Error in AI search:", error) return new Response(JSON.stringify({ error: "Failed to process search query" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } } [V0_FILE]typescriptreact:file="app/manage/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useCompletion } from "ai/react" import { Smartphone, Wifi, Search, Loader2, BarChart2, Settings, CreditCard, Power, RefreshCw, PlusCircle, Download, HelpCircle, AlertTriangle, } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import ESIMDataAdd from "@/components/ESIMDataAdd" import ESIMStorageManager from "@/components/ESIMStorageManager" import ESIMProfileManager from "@/components/ESIMProfileManager" import DataUsageChart from "@/components/DataUsageChart" import ESIMActivationModal from "@/components/ESIMActivationModal" interface ESIMProfile { id: number name: string status: "active" | "inactive" dataRemaining: number dataTotal: number expiryDate: string provider: string number: string planType: string } export default function ManagePage() { const [searchQuery, setSearchQuery] = useState("") const [searchResults, setSearchResults] = useState(null) const [activeTab, setActiveTab] = useState("dashboard") const [isActivationModalOpen, setIsActivationModalOpen] = useState(false) const [activeESIM, setActiveESIM] = useState(0) const [esimProfiles, setEsimProfiles] = useState([ { id: 1, name: "MPT Myanmar", status: "active", dataRemaining: 4.5, dataTotal: 10, expiryDate: "2024-04-15", provider: "MPT", number: "+95 9 7654 3210", planType: "Tourist Plan", }, { id: 2, name: "Ooredoo Myanmar", status: "inactive", dataRemaining: 2.8, dataTotal: 5, expiryDate: "2024-04-10", provider: "Ooredoo", number: "+95 9 9876 5432", planType: "Standard Data", }, ]) const { complete, completion, isLoading } = useCompletion({ api: "/api/ai-search", }) const handleSearch = async (e) => { e.preventDefault() if (!searchQuery.trim()) return try { const result = await complete(searchQuery) setSearchResults(result) } catch (error) { console.error("Error during search:", error) setSearchResults("An error occurred during the search. Please try again.") } } const toggleESIMStatus = (id: number) => { setEsimProfiles((profiles) => profiles.map((profile) => profile.id === id ? { ...profile, status: profile.status === "active" ? "inactive" : "active" } : profile, ), ) } const deleteESIMProfile = (id: number) => { setEsimProfiles((profiles) => profiles.filter((profile) => profile.id !== id)) } const tabs = [ { id: "dashboard", label: "Dashboard", icon: }, { id: "profiles", label: "eSIM Profiles", icon: }, { id: "data", label: "Data Management", icon: }, { id: "billing", label: "Billing", icon: }, { id: "settings", label: "Settings", icon: }, ] return (

eSIM Management

{searchResults && (

Search Results:

{searchResults}

)}

{tabs.map((tab) => ( ))}

{activeTab === "dashboard" && (

Active eSIMs

{esimProfiles.filter((p) => p.status === "active").length} / {esimProfiles.length}

Active profiles

Data Usage

{esimProfiles .reduce( (total, profile) => profile.status === "active" ? total + (profile.dataTotal - profile.dataRemaining) : total, 0, ) .toFixed(1)}{" "} GB

Used this month

Billing

$24.99

Current period

Active eSIM Profiles

{esimProfiles.map((profile) => (

{profile.name}

Data Remaining {profile.dataRemaining} GB / {profile.dataTotal} GB

))}

Quick Actions

Myanmar eSIM Updates

New 5G coverage available in Yangon and Mandalay

2 days ago

Scheduled maintenance on April 10, 2024

Service may be interrupted from 2AM to 4AM

New tourist data packages available

1 week ago

)} {activeTab === "profiles" && ( setIsActivationModalOpen(true)} activeProfile={activeESIM} setActiveProfile={setActiveESIM} /> )} {activeTab === "data" && (

)} {activeTab === "billing" && (

Billing & Payment

Current Plan

Myanmar Tourist Premium

10GB Data Plan

$24.99

Billing Period March 15 - April 15, 2024

Auto-Renewal Enabled

Payment Method Visa •••• 4321

Payment History

Date	Description	Amount
Mar 15, 2024	Myanmar Tourist Premium	$24.99
Feb 15, 2024	Myanmar Tourist Premium	$24.99
Jan 15, 2024	Myanmar Tourist Premium	$24.99

Payment Methods

VISA

Visa ending in 4321

Expires 05/2025

Default

)} {activeTab === "settings" && (

eSIM Settings

Account Preferences

Auto-Renewal

Automatically renew your plan when it expires

Usage Notifications

Receive alerts when you reach 80% of your data limit

Data Saving Mode

Optimize data usage for longer battery life

Security

Two-Factor Authentication

Add an extra layer of security to your account

Biometric Authentication

Use fingerprint or face recognition to access your account

Regional Settings

Preferred Language

Time Zone

)} setIsActivationModalOpen(false)} onActivate={(profile) => { setEsimProfiles([ ...esimProfiles, { ...profile, id: esimProfiles.length + 1, status: "inactive", dataRemaining: profile.dataTotal, }, ]) setIsActivationModalOpen(false) }} />

) } [V0_FILE]typescriptreact:file="components/ContactInfo.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { MapPin, Phone, Mail, Twitter } from "lucide-react" import LoadingAnimation from "./LoadingAnimation" const ContactInfo = () => { const [isLoading, setIsLoading] = useState(true) useEffect(() => { // Simulate loading delay const timer = setTimeout(() => { setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, []) if (isLoading) { return (

Contact Information

) } return (

Contact Information

@eSIMMyanmar

09650000172

info@esim.com.mm

Yangon, Myanmar

) } export default ContactInfo [V0_FILE]typescriptreact:file="components/LiveChatPopup.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { MessageSquare, X } from "lucide-react" const LiveChatPopup: React.FC = () => { const [isOpen, setIsOpen] = useState(false) return ( <> {isOpen && (

Live Chat

How can we assist you today?

)} ) } export default LiveChatPopup [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { 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))", }, 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))", }, aqua: "#00FFFF", // Direct color reference cyan: { DEFAULT: "hsl(var(--cyan))", hover: "hsl(var(--cyan-hover))", }, }, 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%": { boxShadow: "0 0 10px rgba(139, 92, 246, 0.5)" }, "50%": { boxShadow: "0 0 20px rgba(139, 92, 246, 0.8)" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "pulse-glow": "pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", float: "float 3s ease-in-out infinite", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/DataUsageChart.tsx" isMerged="true" "use client" import { useState } from "react" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from "recharts" import { Calendar, ChevronDown, ChevronUp } from "lucide-react" const dailyData = [ { name: "Apr 1", usage: 0.4 }, { name: "Apr 2", usage: 0.6 }, { name: "Apr 3", usage: 0.3 }, { name: "Apr 4", usage: 0.8 }, { name: "Apr 5", usage: 1.2 }, { name: "Apr 6", usage: 0.5 }, { name: "Apr 7", usage: 0.2 }, ] const weeklyData = [ { name: "Week 1", usage: 3.8 }, { name: "Week 2", usage: 4.2 }, { name: "Week 3", usage: 2.9 }, { name: "Week 4", usage: 5.1 }, ] const monthlyData = [ { name: "Jan", usage: 12.5 }, { name: "Feb", usage: 10.8 }, { name: "Mar", usage: 14.2 }, { name: "Apr", usage: 8.0 }, ] const DataUsageChart = () => { const [timeframe, setTimeframe] = useState("daily") const [isExpanded, setIsExpanded] = useState(true) const getChartData = () => { switch (timeframe) { case "daily": return dailyData case "weekly": return weeklyData case "monthly": return monthlyData default: return dailyData } } return (

Data Usage Analytics

{isExpanded && ( <>

Timeframe:

{timeframe === "daily" ? ( [`${value} GB`, "Usage"]} /> ) : ( [`${value} GB`, "Usage"]} /> )}

Average Daily

0.57 GB

Peak Usage

1.2 GB

Projected Monthly

17.1 GB

)}

) } export default DataUsageChart [V0_FILE]typescriptreact:file="components/ESIMProfileManager.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Smartphone, Power, Trash2, Edit, PlusCircle, ChevronRight, Download, RefreshCw } from "lucide-react" interface ESIMProfile { id: number name: string status: string dataRemaining: number dataTotal: number expiryDate: string provider: string number: string planType: string } interface ESIMProfileManagerProps { profiles: ESIMProfile[] onToggleStatus: (id: number) => void onDeleteProfile: (id: number) => void onAddProfile: () => void activeProfile: number setActiveProfile: (index: number) => void } const ESIMProfileManager: React.FC = ({ profiles, onToggleStatus, onDeleteProfile, onAddProfile, activeProfile, setActiveProfile, }) => { const [showConfirmDelete, setShowConfirmDelete] = useState(null) const handleDeleteClick = (id) => { setShowConfirmDelete(id) } const confirmDelete = (id) => { onDeleteProfile(id) setShowConfirmDelete(null) } const cancelDelete = () => { setShowConfirmDelete(null) } return (

eSIM Profiles

{profiles.map((profile) => (

{showConfirmDelete === profile.id && (

Are you sure you want to delete this eSIM profile?

)}

{profile.name}

Data Remaining {profile.dataRemaining} GB / {profile.dataTotal} GB

))}

Profile Details

{profiles[activeProfile] && (

{profiles[activeProfile].name}

{profiles[activeProfile].status === "active" ? "Active" : "Inactive"}

Provider

{profiles[activeProfile].provider}

Phone Number

{profiles[activeProfile].number}

Plan Type

{profiles[activeProfile].planType}

Data Usage

{profiles[activeProfile].dataRemaining} GB / {profiles[activeProfile].dataTotal} GB

{Math.round( (profiles[activeProfile].dataRemaining / profiles[activeProfile].dataTotal) * 100, )} % remaining

Expiry Date

{profiles[activeProfile].expiryDate}

Quick Actions

)}

) } export default ESIMProfileManager [V0_FILE]typescriptreact:file="components/ESIMActivationModal.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { X, ChevronRight, Smartphone, QrCode, Check } from "lucide-react" const ESIMActivationModal = ({ isOpen, onClose, onActivate }) => { const [step, setStep] = useState(1) const [selectedProvider, setSelectedProvider] = useState(null) const [selectedPlan, setSelectedPlan] = useState(null) const [qrScanned, setQrScanned] = useState(false) const [activationComplete, setActivationComplete] = useState(false) const providers = [ { id: "mpt", name: "MPT", logo: "/placeholder.svg?height=60&width=60&text=MPT" }, { id: "ooredoo", name: "Ooredoo", logo: "/placeholder.svg?height=60&width=60&text=Ooredoo" }, { id: "telenor", name: "Telenor", logo: "/placeholder.svg?height=60&width=60&text=Telenor" }, { id: "mytel", name: "Mytel", logo: "/placeholder.svg?height=60&width=60&text=Mytel" }, ] const plans = { mpt: [ { id: "mpt-basic", name: "Basic", data: 5, price: "$10", validity: "7 days" }, { id: "mpt-standard", name: "Standard", data: 10, price: "$20", validity: "15 days" }, { id: "mpt-premium", name: "Premium", data: 20, price: "$35", validity: "30 days" }, ], ooredoo: [ { id: "ooredoo-basic", name: "Basic", data: 3, price: "$8", validity: "7 days" }, { id: "ooredoo-standard", name: "Standard", data: 8, price: "$18", validity: "15 days" }, { id: "ooredoo-premium", name: "Premium", data: 15, price: "$30", validity: "30 days" }, ], telenor: [ { id: "telenor-basic", name: "Basic", data: 4, price: "$9", validity: "7 days" }, { id: "telenor-standard", name: "Standard", data: 12, price: "$22", validity: "15 days" }, { id: "telenor-premium", name: "Premium", data: 25, price: "$40", validity: "30 days" }, ], mytel: [ { id: "mytel-basic", name: "Basic", data: 2, price: "$5", validity: "7 days" }, { id: "mytel-standard", name: "Standard", data: 7, price: "$15", validity: "15 days" }, { id: "mytel-premium", name: "Premium", data: 18, price: "$32", validity: "30 days" }, ], } const resetModal = () => { setStep(1) setSelectedProvider(null) setSelectedPlan(null) setQrScanned(false) setActivationComplete(false) } const handleClose = () => { resetModal() onClose() } const handleProviderSelect = (provider) => { setSelectedProvider(provider) setStep(2) } const handlePlanSelect = (plan) => { setSelectedPlan(plan) setStep(3) } const handleQrScan = () => { // Simulate QR scanning setTimeout(() => { setQrScanned(true) setStep(4) }, 1500) } const handleActivation = () => { // Simulate activation process setTimeout(() => { setActivationComplete(true) // Create the new profile const newProfile = { name: `${selectedProvider.name} ${selectedPlan.name}`, dataTotal: selectedPlan.data, expiryDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], provider: selectedProvider.name, number: "+95 9 " + Math.floor(1000 + Math.random() * 9000) + " " + Math.floor(1000 + Math.random() * 9000), planType: `${selectedPlan.name} Plan`, } // Pass the new profile to parent component onActivate(newProfile) // Reset the modal state resetModal() }, 2000) } return ( {isOpen && (

Activate New eSIM

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

{stepNumber < step ? : stepNumber}

{stepNumber === 1 ? "Provider" : stepNumber === 2 ? "Plan" : stepNumber === 3 ? "Activation" : "Complete"}

))}

{step === 1 && (

Select eSIM Provider

{providers.map((provider) => ( ))}

)} {step === 2 && selectedProvider && (

Select {selectedProvider.name} Data Plan

{plans[selectedProvider.id].map((plan) => ( ))}

)} {step === 3 && selectedPlan && (

Scan QR Code to Activate

{qrScanned && (

)}

Scan this QR code with your device's camera to download and install your eSIM profile.

)} {step === 4 && (

Activation Complete

{activationComplete ? (

eSIM Activated Successfully!

Your new {selectedProvider.name} {selectedPlan.name} eSIM has been activated and is ready to use.

) : (

Activating Your eSIM...

Please wait while we activate your {selectedProvider.name} {selectedPlan.name} eSIM.

)}

Plan Details

Provider:

{selectedProvider.name}

Plan:

{selectedPlan.name}

Data:

{selectedPlan.data} GB

Validity:

{selectedPlan.validity}

Price:

{selectedPlan.price}

)}

)} ) } export default ESIMActivationModal [V0_FILE]typescriptreact:file="components/AIFeatureShowcase.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Smartphone, Zap, Brain, Sparkles } from "lucide-react" const AIFeatureShowcase = () => { const [activeFeature, setActiveFeature] = useState(0) const features = [ { title: "Smart Data Optimization", description: "Our AI analyzes your usage patterns to optimize data consumption and extend your plan's lifespan.", icon: , color: "from-aqua/20 to-blue-400/20", }, { title: "Predictive Network Selection", description: "AI automatically connects to the strongest network based on your location and activity.", icon: , color: "from-blue-400/20 to-purple-400/20", }, { title: "Personalized Recommendations", description: "Get AI-powered suggestions for plans and features based on your unique usage patterns.", icon: , color: "from-purple-400/20 to-aqua/20", }, ] useEffect(() => { const interval = setInterval(() => { setActiveFeature((prev) => (prev + 1) % features.length) }, 5000) return () => clearInterval(interval) }, []) return (

AI-Powered Features

{features.map((_, index) => (

{features[activeFeature].icon}

{features[activeFeature].title}

{features[activeFeature].description}

) } export default AIFeatureShowcase [V0_FILE]typescriptreact:file="components/AISearchBar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Search, Loader2, X, Command, Sparkles } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" interface AISearchBarProps { className?: string } const AISearchBar = ({ className = "" }: AISearchBarProps) => { const [query, setQuery] = useState("") const [isSearching, setIsSearching] = useState(false) const [searchResults, setSearchResults] = useState(null) const [isFocused, setIsFocused] = useState(false) const handleSearch = async (e: React.FormEvent) => { e.preventDefault() if (!query.trim()) return setIsSearching(true) setSearchResults(null) // Simulate AI search results setTimeout(() => { setIsSearching(false) setSearchResults([ { type: "provider", title: "MPT eSIM", description: "Myanmar's largest telecom provider with nationwide coverage", url: "/providers#mpt-esim", }, { type: "article", title: "How to Activate Your eSIM", description: "Step-by-step guide to activating your new eSIM", url: "/activation", }, { type: "faq", title: "What devices support eSIM in Myanmar?", description: "List of compatible devices and requirements", url: "/faq#device-compatibility", }, ]) }, 1500) } const clearSearch = () => { setQuery("") setSearchResults(null) } return (

{searchResults && (

eSIM AI-powered results

{searchResults.map((result, index) => (

{result.title}

{result.description}

{result.type}

))}

Press Enter to see all results

)}

) } export default AISearchBar [V0_FILE]typescriptreact:file="components/AIAssistantPreview.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Bot, MessageSquare, User, ArrowRight, Sparkles } from "lucide-react" import Link from "next/link" const AIAssistantPreview = () => { const [currentStep, setCurrentStep] = useState(0) const conversation = [ { role: "assistant", content: "Hello! How can I help with your eSIM needs today?" }, { role: "user", content: "I'm traveling to Myanmar next week. What eSIM plan do you recommend?" }, { role: "assistant", content: "Based on your travel duration and typical data usage patterns, I'd recommend the MPT Tourist eSIM with 10GB data valid for 14 days. It offers excellent coverage throughout Myanmar, including major tourist destinations.", }, { role: "user", content: "That sounds good. Will it work with my iPhone 13?" }, { role: "assistant", content: "Yes, your iPhone 13 is fully compatible with Myanmar eSIMs. I've checked the specifications and it supports all the necessary bands used by MPT. Would you like me to guide you through the activation process?", }, ] const features = [ { title: "Personalized Recommendations", description: "Our AI assistant analyzes your needs and usage patterns to recommend the perfect eSIM plan.", icon: , }, { title: "Device Compatibility Check", description: "Instant verification of your device's compatibility with different eSIM providers.", icon: , }, { title: "24/7 Intelligent Support", description: "Get expert assistance anytime with our AI assistant that learns and improves with every interaction.", icon: , }, ] return (

AI Assistant

Our intelligent assistant provides personalized recommendations, answers your questions, and guides you through every step of your eSIM journey.

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

Try the AI Assistant

eSIM AI Assistant

{conversation.slice(0, currentStep + 1).map((message, index) => (

{message.role === "assistant" ? ( ) : ( )} {message.role === "assistant" ? "AI Assistant" : "You"}

{message.content}

))} {currentStep < conversation.length - 1 && (

)} {currentStep === conversation.length - 1 && (

)}

) } export default AIAssistantPreview [V0_FILE]typescriptreact:file="components/PersonalizedRecommendations.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Sparkles, ChevronRight, ChevronLeft, Smartphone, Wifi, CreditCard } from "lucide-react" import Link from "next/link" import Image from "next/image" const PersonalizedRecommendations = () => { const [activeIndex, setActiveIndex] = useState(0) const recommendations = [ { type: "plan", title: "MPT Tourist Premium", description: "Based on your travel history and data usage patterns, this plan offers the optimal balance of data and coverage for your needs.", image: "/placeholder.svg?height=120&width=120&text=MPT", details: { data: "15GB", validity: "14 days", price: "$25", coverage: "95% of Myanmar", }, match: 98, link: "/providers#mpt-esim", }, { type: "device", title: "Samsung Galaxy S23", description: "Our AI has identified this device as highly compatible with Myanmar's eSIM infrastructure based on your usage requirements.", image: "/placeholder.svg?height=120&width=120&text=Samsung", details: { compatibility: "Excellent", performance: "High", batteryLife: "Very Good", price: "$799", }, match: 95, link: "/esim-info#compatibility", }, { type: "feature", title: "Data Pooling", description: "This feature allows you to share data across multiple devices, which aligns with your multi-device usage pattern.", image: "/placeholder.svg?height=120&width=120&text=Data+Pooling", details: { savings: "Up to 30%", devices: "Up to 5", management: "Centralized", availability: "All major providers", }, match: 92, link: "/esim-info#features", }, ] const nextRecommendation = () => { setActiveIndex((prev) => (prev + 1) % recommendations.length) } const prevRecommendation = () => { setActiveIndex((prev) => (prev - 1 + recommendations.length) % recommendations.length) } const getIcon = (type) => { switch (type) { case "plan": return case "device": return case "feature": return default: return } } return (

AI Recommendations

Our AI analyzes your usage patterns, travel history, and preferences to provide personalized recommendations tailored specifically to you.

{getIcon(recommendations[activeIndex].type)}

{recommendations[activeIndex].type.charAt(0).toUpperCase() + recommendations[activeIndex].type.slice(1)}

{recommendations[activeIndex].title}

{recommendations[activeIndex].match}% Match

{recommendations[activeIndex].description}

{Object.entries(recommendations[activeIndex].details).map(([key, value]) => (

{key.charAt(0).toUpperCase() + key.slice(1)}

{value}

))}

Learn More

{recommendations.map((_, index) => (

) } export default PersonalizedRecommendations [V0_FILE]typescriptreact:file="components/Header.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" import { Menu, X, Home, Info, BarChart2, Settings, HelpCircle, MessageSquare, Zap } from "lucide-react" import { MENU_TITLES } from "@/lib/title-data" const Header = () => { const [isMenuOpen, setIsMenuOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const pathname = usePathname() useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } const closeMenu = () => { setIsMenuOpen(false) } const menuItems = [ { href: "/", icon: , titleKey: "home" }, { href: "/esim-info", icon: , titleKey: "esimInfo" }, { href: "/dashboard", icon: , titleKey: "dashboard" }, { href: "/manage", icon: , titleKey: "manage" }, { href: "/support", icon: , titleKey: "support" }, { href: "/faq", icon: , titleKey: "faq" }, { href: "/analytics", icon: , titleKey: "aiDashboard" }, ] return (

eSIM Myanmar {/* Desktop Navigation */} {/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && ( )}

) } export default Header [V0_FILE]typescriptreact:file="components/Footer.tsx" isMerged="true" import Link from "next/link" import { Cpu, Twitter, Facebook, Instagram, Mail, ArrowUp } from "lucide-react" const Footer = () => { const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }) } return ( ) } export default Footer [V0_FILE]typescriptreact:file="components/AnimatedBackground.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" const AnimatedBackground = () => { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions const setCanvasDimensions = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } setCanvasDimensions() window.addEventListener("resize", setCanvasDimensions) // Create particles const particlesArray: Particle[] = [] const numberOfParticles = Math.min(50, Math.floor(window.innerWidth / 30)) class Particle { x: number y: number size: number speedX: number speedY: number color: string alpha: number constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 3 + 1 this.speedX = (Math.random() - 0.5) * 0.5 this.speedY = (Math.random() - 0.5) * 0.5 this.color = "#00FFFF" this.alpha = Math.random() * 0.5 + 0.1 } update() { this.x += this.speedX this.y += this.speedY if (this.x > canvas.width) this.x = 0 else if (this.x < 0) this.x = canvas.width if (this.y > canvas.height) this.y = 0 else if (this.y < 0) this.y = canvas.height } draw() { if (!ctx) return ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fillStyle = this.color ctx.globalAlpha = this.alpha ctx.fill() } } const init = () => { for (let i = 0; i < numberOfParticles; i++) { particlesArray.push(new Particle()) } } const connect = () => { if (!ctx) return for (let a = 0; a < particlesArray.length; a++) { for (let b = a; b < particlesArray.length; b++) { const dx = particlesArray[a].x - particlesArray[b].x const dy = particlesArray[a].y - particlesArray[b].y const distance = Math.sqrt(dx * dx + dy * dy) if (distance < 200) { const opacity = 1 - distance / 200 ctx.strokeStyle = `rgba(0, 255, 255, ${opacity * 0.2})` ctx.lineWidth = 1 ctx.beginPath() ctx.moveTo(particlesArray[a].x, particlesArray[a].y) ctx.lineTo(particlesArray[b].x, particlesArray[b].y) ctx.stroke() } } } } const animate = () => { if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) // Create gradient background const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height) gradient.addColorStop(0, "#1E2F3C") gradient.addColorStop(1, "#0F1A24") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update() particlesArray[i].draw() } connect() requestAnimationFrame(animate) } init() animate() return () => { window.removeEventListener("resize", setCanvasDimensions) } }, []) return (

) } export default AnimatedBackground [V0_FILE]typescriptreact:file="components/AILoadingAnimation.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Brain, Sparkles, Zap } from "lucide-react" const AILoadingAnimation = () => { return (

AI Processing

Our AI is analyzing data and preparing your personalized experience...

) } export default AILoadingAnimation [V0_FILE]typescriptreact:file="components/DashboardCard.tsx" isMerged="true" "use client" import type { ReactNode } from "react" import { motion } from "framer-motion" interface DashboardCardProps { title: string icon: ReactNode children: ReactNode className?: string } const DashboardCard = ({ title, icon, children, className = "" }: DashboardCardProps) => { return (

{icon}

{title}

{children}

) } export default DashboardCard [V0_FILE]typescriptreact:file="components/LoadingSpinner.tsx" isMerged="true" "use client" import { motion } from "framer-motion" const LoadingSpinner = () => { return (

) } export default LoadingSpinner [V0_FILE]typescriptreact:file="components/DataUsageIndicator.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Info } from "lucide-react" interface DataUsageIndicatorProps { used: number total: number unit?: string showDetails?: boolean className?: string } const DataUsageIndicator = ({ used, total, unit = "GB", showDetails = true, className = "", }: DataUsageIndicatorProps) => { const [showInfo, setShowInfo] = useState(false) // Calculate percentage const percentage = Math.min(100, Math.round((used / total) * 100)) // Determine color based on usage const getColor = () => { if (percentage < 50) return "from-green-400 to-green-500" if (percentage < 80) return "from-yellow-400 to-orange-400" return "from-orange-500 to-red-500" } return (

Data Usage {showDetails && ( )}

{used} / {total} {unit}

{showInfo && showDetails && ( {percentage >= 80 ? (

Your data usage is high. Consider upgrading your plan or managing your usage.

) : percentage >= 50 ? (

Your data usage is moderate. You still have {total - used} {unit} remaining.

) : (

Your data usage is low. You have plenty of data remaining for this billing cycle.

)} )}

) } export default DataUsageIndicator [V0_FILE]typescriptreact:file="components/AIInsightCard.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { ChevronRight, X, Sparkles } from "lucide-react" interface AIInsightCardProps { title: string description: string icon: React.ReactNode actionText: string color: "blue" | "purple" | "red" | "green" priority?: "normal" | "high" } const AIInsightCard = ({ title, description, icon, actionText, color = "blue", priority = "normal", }: AIInsightCardProps) => { const [dismissed, setDismissed] = useState(false) if (dismissed) return null const getColorClasses = () => { switch (color) { case "blue": return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400" case "purple": return "from-violet-500/20 to-fuchsia-500/20 border-violet-500/30 text-violet-400" case "red": return "from-red-500/20 to-orange-500/20 border-red-500/30 text-red-400" case "green": return "from-emerald-500/20 to-green-500/20 border-emerald-500/30 text-emerald-400" default: return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400" } } const pulseAnimation = priority === "high" ? { animate: { boxShadow: [ "0 0 0 0 rgba(239, 68, 68, 0)", "0 0 0 8px rgba(239, 68, 68, 0.2)", "0 0 0 0 rgba(239, 68, 68, 0)", ], }, transition: { duration: 2, repeat: Number.POSITIVE_INFINITY, }, } : {} return (

{icon}

{title}

eSIM AI Insight

{description}

) } export default AIInsightCard [V0_FILE]typescriptreact:file="components/ESIMSmartManager.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Smartphone, Wifi, Zap, Plus, ChevronRight, Check, BarChart2, RefreshCw, Shield } from "lucide-react" import { Progress } from "@/components/ui/progress" // Add proper TypeScript interface for the ESIM type interface ESIM { id: number name: string provider: string dataRemaining: number dataTotal: number status: "active" | "inactive" | "expired" expiryDate: string networkQuality: number aiOptimized: boolean } // Update the component to use the interface const ESIMSmartManager: React.FC = () => { const [activeESIM, setActiveESIM] = useState(0) const [optimizing, setOptimizing] = useState(false) const esims: ESIM[] = [ { id: 1, name: "Travel eSIM", provider: "MPT Myanmar", dataRemaining: 3.2, dataTotal: 5, status: "active", expiryDate: "2024-05-15", networkQuality: 85, aiOptimized: true, }, { id: 2, name: "Business eSIM", provider: "Ooredoo", dataRemaining: 1.5, dataTotal: 10, status: "active", expiryDate: "2024-05-20", networkQuality: 72, aiOptimized: false, }, { id: 3, name: "Backup eSIM", provider: "Telenor", dataRemaining: 0.5, dataTotal: 2, status: "inactive", expiryDate: "2024-06-01", networkQuality: 65, aiOptimized: false, }, ] const handleOptimize = () => { setOptimizing(true) setTimeout(() => { setOptimizing(false) // In a real app, you would update the eSIM data here }, 2000) } const getStatusColor = (status: string) => { switch (status) { case "active": return "text-emerald-400" case "inactive": return "text-amber-400" case "expired": return "text-red-400" default: return "text-gray-400" } } const getNetworkQualityColor = (quality: number) => { if (quality >= 80) return "bg-emerald-500" if (quality >= 60) return "bg-amber-500" return "bg-red-500" } const getDataPercentage = (remaining: number, total: number) => { return (remaining / total) * 100 } return (

Smart eSIM Management

{esims.map((esim, index) => ( setActiveESIM(index)} className={`relative cursor-pointer rounded-xl p-4 border transition-all ${ activeESIM === index ? "bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20 border-violet-500/40" : "bg-slate-800/50 border-slate-700/50 hover:border-slate-600/50" }`} > {esim.aiOptimized && (

AI Optimized

)}

{esim.name}

{esim.provider}

Data Remaining {esim.dataRemaining} GB / {esim.dataTotal} GB

{esim.status.charAt(0).toUpperCase() + esim.status.slice(1)}

))}

{esims[activeESIM].name}

{esims[activeESIM].provider}

{esims[activeESIM].status.charAt(0).toUpperCase() + esims[activeESIM].status.slice(1)} Expires: {esims[activeESIM].expiryDate}

Data Usage

Remaining {esims[activeESIM].dataRemaining} GB / {esims[activeESIM].dataTotal} GB

Daily average: 0.2 GB

Estimated to last: 16 days

Network Quality

{esims[activeESIM].networkQuality}

AI Optimization

{esims[activeESIM].aiOptimized ? (

This eSIM is AI-optimized for best performance

) : (

Optimization recommended for better performance

)}

) } export default ESIMSmartManager [V0_FILE]typescriptreact:file="components/DataUsagePrediction.tsx" isMerged="true" "use client" import { useState } from "react" import { BarChart2, Calendar, TrendingUp, TrendingDown, AlertTriangle, RefreshCw } from "lucide-react" import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from "recharts" const data = [ { day: "Mon", usage: 0.4, prediction: 0.45 }, { day: "Tue", usage: 0.5, prediction: 0.55 }, { day: "Wed", usage: 0.3, prediction: 0.35 }, { day: "Thu", usage: 0.7, prediction: 0.65 }, { day: "Fri", usage: 0.6, prediction: 0.7 }, { day: "Sat", usage: 0.9, prediction: 0.85 }, { day: "Sun", usage: 0.8, prediction: 0.75 }, { day: "Mon", prediction: 0.6 }, { day: "Tue", prediction: 0.7 }, { day: "Wed", prediction: 0.5 }, ] const DataUsagePrediction = () => { const [timeframe, setTimeframe] = useState("week") const [isRefreshing, setIsRefreshing] = useState(false) const handleRefresh = () => { setIsRefreshing(true) setTimeout(() => { setIsRefreshing(false) }, 1500) } // Calculate total usage and prediction const totalUsage = data.reduce((sum, item) => sum + (item.usage || 0), 0) const totalPrediction = data.reduce((sum, item) => sum + (item.prediction || 0), 0) const trend = totalPrediction > totalUsage ? "up" : "down" const trendPercentage = Math.abs(Math.round(((totalPrediction - totalUsage) / totalUsage) * 100)) return (

AI Data Usage Prediction

Past Usage

{totalUsage.toFixed(1)} GB

Last 7 days

Predicted Usage

{totalPrediction.toFixed(1)} GB

Next 7 days

Usage Trend

{trendPercentage}%

{trend === "up" ? ( ) : ( )}

{trend === "up" ? "Increasing" : "Decreasing"} trend

Actual Usage

AI Prediction

Updated 2 hours ago

{trend === "up" && trendPercentage > 20 && (

AI predicts a significant increase in your data usage. Consider optimizing your usage patterns.

)}

) } export default DataUsagePrediction [V0_FILE]typescriptreact:file="components/NetworkQualityMonitor.tsx" isMerged="true" "use client" import { useState } from "react" import { Wifi, Signal, MapPin, RefreshCw, Zap, AlertTriangle } from "lucide-react" import { Progress } from "@/components/ui/progress" const NetworkQualityMonitor = () => { const [isRefreshing, setIsRefreshing] = useState(false) const [signalStrength, setSignalStrength] = useState(78) const [latency, setLatency] = useState(45) const [stability, setStability] = useState(92) const handleRefresh = () => { setIsRefreshing(true) // Simulate network refresh with slight variations setTimeout(() => { setSignalStrength(Math.min(100, Math.max(0, signalStrength + (Math.random() * 10 - 5)))) setLatency(Math.min(200, Math.max(10, latency + (Math.random() * 20 - 10)))) setStability(Math.min(100, Math.max(0, stability + (Math.random() * 10 - 5)))) setIsRefreshing(false) }, 1500) } const getQualityColor = (value: number) => { if (value >= 80) return "bg-emerald-500" if (value >= 60) return "bg-amber-500" return "bg-red-500" } const getLatencyQuality = (value: number) => { if (value <= 30) return { color: "text-emerald-500", quality: "Excellent" } if (value <= 60) return { color: "text-amber-500", quality: "Good" } if (value <= 100) return { color: "text-amber-500", quality: "Fair" } return { color: "text-red-500", quality: "Poor" } } const latencyQuality = getLatencyQuality(latency) // Calculate overall network score const networkScore = Math.round(signalStrength * 0.4 + (100 - latency / 2) * 0.3 + stability * 0.3) return (

Network Quality Monitor

{networkScore} AI Score

Network Quality

Yangon, Myanmar

MPT 4G Network

AI Recommendation

{networkScore >= 80 ? (

Your network quality is excellent. No action needed.

) : networkScore >= 60 ? (

Consider switching to 5G for better performance.

) : (

Move to a location with better signal strength.

)}

Signal Strength

{Math.round(signalStrength)}%

Latency

{Math.round(latency)} ms

{latencyQuality.quality}

Stability

{Math.round(stability)}%

{networkScore < 60 && (

Poor network quality detected. This may affect your eSIM performance and data usage efficiency.

)}

) } export default NetworkQualityMonitor [V0_FILE]typescriptreact:file="components/SmartRecommendations.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Sparkles, ChevronRight, Zap, CreditCard, Clock, Wifi, Check } from "lucide-react" interface Recommendation { id: string title: string description: string type: "plan" | "feature" | "security" | "savings" icon: React.ReactNode actionText: string matchPercentage: number applied?: boolean } const SmartRecommendations = () => { const [recommendations, setRecommendations] = useState([ { id: "rec1", title: "Upgrade to eSIM Tourist Premium Plan", description: "Based on your usage patterns, this plan offers better value with 15GB data for 45,000 MMK and nationwide coverage.", type: "plan", icon: , actionText: "View Plan", matchPercentage: 95, }, { id: "rec2", title: "Enable Data Saving Mode", description: "Our AI predicts you could save up to 30% data by enabling this feature during video streaming.", type: "feature", icon: , actionText: "Enable Now", matchPercentage: 87, }, { id: "rec3", title: "Schedule Off-Peak Downloads", description: "Set your device to download updates and content during network off-peak hours for better speeds.", type: "savings", icon: , actionText: "Schedule", matchPercentage: 82, applied: true, }, { id: "rec4", title: "Add Auto-Renewal", description: "Never run out of data by enabling auto-renewal with a 5% discount on each renewal.", type: "savings", icon: , actionText: "Add Now", matchPercentage: 78, }, ]) const handleApplyRecommendation = (id: string) => { setRecommendations((prev) => prev.map((rec) => (rec.id === id ? { ...rec, applied: !rec.applied } : rec))) } const getTypeColor = (type: string) => { switch (type) { case "plan": return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400" case "feature": return "from-violet-500/20 to-fuchsia-500/20 border-violet-500/30 text-violet-400" case "security": return "from-red-500/20 to-orange-500/20 border-red-500/30 text-red-400" case "savings": return "from-emerald-500/20 to-green-500/20 border-emerald-500/30 text-emerald-400" default: return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400" } } return (

AI Smart eSIM Recommendations

{recommendations.map((recommendation) => (

{recommendation.matchPercentage}% Match

{recommendation.icon}

{recommendation.title}

{recommendation.description}

))}

) } export default SmartRecommendations [V0_FILE]typescriptreact:file="components/AIAssistantButton.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Bot, X, Send, Sparkles, Loader2, Mic, Image, Paperclip } from "lucide-react" const AIAssistantButton = () => { const [isOpen, setIsOpen] = useState(false) const [messages, setMessages] = useState([ { role: "assistant", content: "Hello! I'm your eSIM AI assistant. How can I help you today?" }, ]) const [input, setInput] = useState("") const [isTyping, setIsTyping] = useState(false) const handleSendMessage = () => { if (!input.trim()) return // Add user message setMessages((prev) => [...prev, { role: "user", content: input }]) setInput("") // Simulate AI thinking setIsTyping(true) // Simulate AI response after a delay setTimeout(() => { setMessages((prev) => [ ...prev, { role: "assistant", content: "I'm analyzing your eSIM data and usage patterns to provide a personalized response. Based on your current plan and usage history, I recommend optimizing your data settings when streaming video content. This could save you approximately 10,000 MMK per month on your eSIM data costs.", }, ]) setIsTyping(false) }, 2000) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return ( <> setIsOpen(true)} className="fixed bottom-6 right-6 z-50 bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white p-4 rounded-full shadow-lg" > {isOpen && (

eSIM AI Assistant

{messages.map((message, index) => (

{message.role === "assistant" && (

eSIM AI Assistant

)}

{message.content}

))} {isTyping && (

eSIM AI Assistant

)}

setInput(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Ask about your eSIM..."
                    className="flex-grow bg-slate-800 border border-slate-700 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-violet-500 text-white resize-none"
                    rows={2}
                    disabled={isTyping}
                  />
                  <button
                    onClick={handleSendMessage}
                    disabled={!input.trim() || isTyping}
                    className="bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white px-4 rounded-r-lg hover:opacity-90 transition-colors disabled:opacity-50 flex items-center justify-center"
                  >
                    {isTyping ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-5 h-5" />}
                  </button>
                </div>

<div className="mt-2 text-xs text-gray-500 flex items-center">
                  <Sparkles className="w-3 h-3 mr-1" />
                  Powered by eSIM AI with access to your data and usage patterns
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

export default AIAssistantButton

[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import {
  BarChart3,
  LineChart,
  PieChart,
  Zap,
  Wifi,
  Globe,
  ArrowUpRight,
  Clock,
  Calendar,
  Download,
  Share2,
  Sparkles,
  Brain,
} from "lucide-react"
import { Progress } from "@/components/ui/progress"

export default function AnalyticsPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [selectedTimeframe, setSelectedTimeframe] = useState("week")
  const [selectedMetric, setSelectedMetric] = useState("data")

// Simulate loading state
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)
    return () => clearTimeout(timer)
  }, [])

const metrics = [
    { id: "data", name: "Data Usage", icon: <Wifi className="w-5 h-5" /> },
    { id: "speed", name: "Network Speed", icon: <Zap className="w-5 h-5" /> },
    { id: "coverage", name: "Coverage", icon: <Globe className="w-5 h-5" /> },
  ]

const timeframes = [
    { id: "day", name: "Today" },
    { id: "week", name: "This Week" },
    { id: "month", name: "This Month" },
    { id: "year", name: "This Year" },
  ]

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background">
      {/* Hero Section with Animated Background */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 z-0">
          <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-aqua/5 to-blue-400/5"></div>
          <div className="absolute top-20 left-10 w-72 h-72 bg-aqua/10 rounded-full filter blur-3xl"></div>
          <div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-400/10 rounded-full filter blur-3xl"></div>
        </div>

<div className="container mx-auto px-4 py-16 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-center mb-12"
          >
            <div className="inline-flex items-center justify-center mb-4 bg-aqua/10 border border-aqua/20 rounded-full px-4 py-2">
              <Brain className="w-5 h-5 text-aqua mr-2" />
              <span className="text-aqua font-medium">AI-Powered Insights</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
              eSIM Network Analytics
            </h1>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Gain deep insights into your eSIM performance with our advanced AI analytics platform
            </p>
          </motion.div>

{/* Metric Selector Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
            {metrics.map((metric) => (
              <motion.button
                key={metric.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: metrics.indexOf(metric) * 0.1 }}
                onClick={() => setSelectedMetric(metric.id)}
                className={`relative overflow-hidden rounded-xl p-6 border transition-all ${
                  selectedMetric === metric.id
                    ? "bg-gradient-to-br from-aqua/20 to-blue-400/20 border-aqua/40 shadow-lg shadow-aqua/5"
                    : "bg-dark-blue/30 border-gray-700/50 hover:border-aqua/30"
                }`}
              >
                <div className="absolute top-0 right-0 w-24 h-24 bg-aqua/5 rounded-full filter blur-xl transform translate-x-8 -translate-y-8"></div>
                <div className="relative z-10">
                  <div className="flex items-center mb-2">
                    <div
                      className={`p-2 rounded-lg ${selectedMetric === metric.id ? "bg-aqua/20" : "bg-dark-blue/50"} mr-3`}
                    >
                      {metric.icon}
                    </div>
                    <h3 className="text-xl font-semibold text-white">{metric.name}</h3>
                  </div>
                  <p className="text-gray-400 text-sm">
                    {metric.id === "data" && "Track your data consumption patterns"}
                    {metric.id === "speed" && "Monitor your network speed performance"}
                    {metric.id === "coverage" && "Analyze your network coverage quality"}
                  </p>
                  {selectedMetric === metric.id && (
                    <div className="absolute bottom-3 right-3">
                      <div className="w-6 h-6 rounded-full bg-aqua/20 flex items-center justify-center">
                        <ArrowUpRight className="w-4 h-4 text-aqua" />
                      </div>
                    </div>
                  )}
                </div>
              </motion.button>
            ))}
          </div>

{/* Timeframe Selector */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="flex justify-center mb-12"
          >
            <div className="inline-flex bg-dark-blue/50 rounded-lg p-1 border border-gray-700/50">
              {timeframes.map((timeframe) => (
                <button
                  key={timeframe.id}
                  onClick={() => setSelectedTimeframe(timeframe.id)}
                  className={`px-4 py-2 rounded-lg transition-colors ${
                    selectedTimeframe === timeframe.id
                      ? "bg-gradient-to-r from-aqua/20 to-blue-400/20 text-white"
                      : "text-gray-400 hover:text-white"
                  }`}
                >
                  {timeframe.name}
                </button>
              ))}
            </div>
          </motion.div>
        </div>
      </div>

{/* Main Content */}
      <div className="container mx-auto px-4 pb-16">
        {/* Analytics Dashboard */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
          {/* Main Chart */}
          <div className="lg:col-span-2">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: isLoading ? 0 : 1, y: isLoading ? 20 : 0 }}
              transition={{ duration: 0.5 }}
              className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6 h-full"
            >
              <div className="flex justify-between items-center mb-6">
                <div>
                  <h2 className="text-xl font-semibold text-white">
                    {selectedMetric === "data" && "Data Usage Trends"}
                    {selectedMetric === "speed" && "Network Speed Analysis"}
                    {selectedMetric === "coverage" && "Coverage Quality Map"}
                  </h2>
                  <p className="text-gray-400 text-sm">
                    {selectedTimeframe === "day" && "Today's metrics"}
                    {selectedTimeframe === "week" && "Last 7 days"}
                    {selectedTimeframe === "month" && "Last 30 days"}
                    {selectedTimeframe === "year" && "Last 12 months"}
                  </p>
                </div>
                <div className="flex space-x-2">
                  <button className="p-2 rounded-lg bg-dark-blue/50 text-gray-400 hover:text-white transition-colors">
                    <Download className="w-5 h-5" />
                  </button>
                  <button className="p-2 rounded-lg bg-dark-blue/50 text-gray-400 hover:text-white transition-colors">
                    <Share2 className="w-5 h-5" />
                  </button>
                </div>
              </div>

{isLoading ? (
                <div className="flex items-center justify-center h-64">
                  <div className="w-12 h-12 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
                </div>
              ) : (
                <div className="relative h-64 w-full">
                  {/* Placeholder for chart - in a real app, you'd use a chart library */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    {selectedMetric === "data" && <BarChart3 className="w-32 h-32 text-aqua/50" />}
                    {selectedMetric === "speed" && <LineChart className="w-32 h-32 text-aqua/50" />}
                    {selectedMetric === "coverage" && <PieChart className="w-32 h-32 text-aqua/50" />}
                  </div>
                  <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-aqua/10 to-transparent"></div>
                </div>
              )}
            </motion.div>
          </div>

{/* Stats Cards */}
          <div className="space-y-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: isLoading ? 0 : 1, y: isLoading ? 20 : 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-medium text-white">Current Usage</h3>
                <Clock className="w-5 h-5 text-aqua" />
              </div>
              {isLoading ? (
                <div className="h-20 flex items-center justify-center">
                  <div className="w-8 h-8 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
                </div>
              ) : (
                <>
                  <div className="flex items-end justify-between mb-2">
                    <div>
                      <p className="text-3xl font-bold text-white">
                        {selectedMetric === "data" && "4.2 GB"}
                        {selectedMetric === "speed" && "42 Mbps"}
                        {selectedMetric === "coverage" && "87%"}
                      </p>
                      <p className="text-sm text-gray-400">
                        {selectedMetric === "data" && "of 10 GB plan"}
                        {selectedMetric === "speed" && "download speed"}
                        {selectedMetric === "coverage" && "network quality"}
                      </p>
                    </div>
                    <div className="text-sm">
                      <span className="text-green-400 flex items-center">
                        <ArrowUpRight className="w-4 h-4 mr-1" />
                        12%
                      </span>
                    </div>
                  </div>
                  <Progress value={42} className="h-2 bg-dark-blue/50" />
                </>
              )}
            </motion.div>

<motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: isLoading ? 0 : 1, y: isLoading ? 20 : 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-medium text-white">AI Prediction</h3>
                <Sparkles className="w-5 h-5 text-aqua" />
              </div>
              {isLoading ? (
                <div className="h-20 flex items-center justify-center">
                  <div className="w-8 h-8 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
                </div>
              ) : (
                <div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20">
                  <p className="text-white mb-2">
                    {selectedMetric === "data" && "You'll likely use 8.5 GB this month based on current patterns."}
                    {selectedMetric === "speed" && "Network speeds may drop by 15% during peak hours (8-10 PM)."}
                    {selectedMetric === "coverage" && "Coverage will improve by 5% in your area within 2 weeks."}
                  </p>
                  <div className="flex items-center">
                    <Calendar className="w-4 h-4 text-aqua mr-1" />
                    <span className="text-xs text-aqua">Predicted for next 30 days</span>
                  </div>
                </div>
              )}
            </motion.div>

<motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: isLoading ? 0 : 1, y: isLoading ? 20 : 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-medium text-white">Optimization</h3>
                <Zap className="w-5 h-5 text-aqua" />
              </div>
              {isLoading ? (
                <div className="h-20 flex items-center justify-center">
                  <div className="w-8 h-8 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
                </div>
              ) : (
                <button className="w-full bg-gradient-to-r from-aqua to-blue-400 text-dark-blue font-medium py-3 px-4 rounded-lg hover:opacity-90 transition-colors flex items-center justify-center">
                  <Sparkles className="w-5 h-5 mr-2" />
                  Optimize with AI
                </button>
              )}
            </motion.div>
          </div>
        </div>

{/* Insights Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: isLoading ? 0 : 1, y: isLoading ? 20 : 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          <h2 className="text-2xl font-bold mb-6 bg-gradient-to-r from-aqua to-blue-400 text-transparent bg-clip-text">
            AI-Generated Insights
          </h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <InsightCard
              title="Data Usage Pattern"
              description="Your data usage peaks between 8-10 PM daily. Consider downloading content during off-peak hours to optimize speed."
              icon={<BarChart3 className="w-5 h-5" />}
              color="blue"
            />
            <InsightCard
              title="Network Optimization"
              description="Switching to 5G when available could improve your speeds by up to 40% based on your location patterns."
              icon={<Zap className="w-5 h-5" />}
              color="purple"
            />
            <InsightCard
              title="Coverage Analysis"
              description="You experience signal drops in 3 locations. We've identified alternative networks that provide better coverage in these areas."
              icon={<Globe className="w-5 h-5" />}
              color="green"
            />
          </div>
        </motion.div>
      </div>
    </div>
  )
}

interface InsightCardProps {
  title: string
  description: string
  icon: React.ReactNode
  color: "blue" | "purple" | "green"
}

const InsightCard: React.FC<InsightCardProps> = ({ title, description, icon, color }) => {
  const getGradient = () => {
    switch (color) {
      case "blue":
        return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400"
      case "purple":
        return "from-violet-500/20 to-fuchsia-500/20 border-violet-500/30 text-violet-400"
      case "green":
        return "from-emerald-500/20 to-green-500/20 border-emerald-500/30 text-emerald-400"
      default:
        return "from-blue-500/20 to-cyan-500/20 border-blue-500/30 text-blue-400"
    }
  }

return (
    <motion.div
      whileHover={{ y: -5 }}
      className={`bg-gradient-to-br ${getGradient()} rounded-xl p-5 border relative overflow-hidden`}
    >
      <div className="flex items-start mb-3">
        <div className="bg-white/10 p-2 rounded-lg mr-3">{icon}</div>
        <h3 className="font-semibold text-white">{title}</h3>
      </div>

<p className="text-gray-300 text-sm mb-4">{description}</p>

<button className="w-full bg-white/10 hover:bg-white/20 text-white py-2 px-3 rounded-lg transition-colors flex items-center justify-between text-sm">
        <span>View Details</span>
        <ArrowUpRight className="w-4 h-4" />
      </button>

<div className="absolute -bottom-6 -right-6 w-24 h-24 bg-white/5 rounded-full blur-xl"></div>
      <div className="absolute -top-6 -left-6 w-24 h-24 bg-white/5 rounded-full blur-xl"></div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/usage-reports/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import {
  FileText,
  Download,
  Filter,
  Calendar,
  ChevronDown,
  Search,
  ArrowUpRight,
  Smartphone,
  Wifi,
  Clock,
  Zap,
  Globe,
  Sparkles,
} from "lucide-react"

export default function UsageReportsPage() {
  const [selectedPeriod, setSelectedPeriod] = useState("month")
  const [searchQuery, setSearchQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)

const reports = [
    {
      id: 1,
      title: "Monthly Usage Summary",
      description: "Complete breakdown of your eSIM data usage patterns",
      date: "March 2024",
      type: "summary",
      size: "1.2 MB",
      insights: "High video streaming usage detected",
    },
    {
      id: 2,
      title: "Network Performance Analysis",
      description: "Detailed analysis of network speed and reliability",
      date: "February 2024",
      type: "analysis",
      size: "2.4 MB",
      insights: "5G connection available in your frequent locations",
    },
    {
      id: 3,
      title: "Data Usage Forecast",
      description: "AI-generated predictions for your future data needs",
      date: "Q2 2024",
      type: "forecast",
      size: "0.8 MB",
      insights: "Predicted 15% increase in data consumption",
    },
    {
      id: 4,
      title: "Coverage Quality Report",
      description: "Analysis of network coverage in your frequent locations",
      date: "January 2024",
      type: "coverage",
      size: "3.1 MB",
      insights: "Coverage gaps identified in 2 locations",
    },
    {
      id: 5,
      title: "eSIM Performance Optimization",
      description: "Recommendations for improving your eSIM performance",
      date: "March 2024",
      type: "optimization",
      size: "1.5 MB",
      insights: "3 optimization opportunities found",
    },
  ]

const filteredReports = reports.filter(
    (report) =>
      report.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      report.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getReportTypeIcon = (type) => {
    switch (type) {
      case "summary":
        return <FileText className="w-5 h-5 text-blue-400" />
      case "analysis":
        return <Zap className="w-5 h-5 text-violet-400" />
      case "forecast":
        return <Sparkles className="w-5 h-5 text-emerald-400" />
      case "coverage":
        return <Globe className="w-5 h-5 text-amber-400" />
      case "optimization":
        return <Wifi className="w-5 h-5 text-red-400" />
      default:
        return <FileText className="w-5 h-5 text-blue-400" />
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
          <div>
            <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-aqua to-blue-400 text-transparent bg-clip-text">
              eSIM Usage Reports
            </h1>
            <p className="text-gray-300 max-w-2xl">
              Access detailed reports and insights about your eSIM usage, network performance, and AI-generated
              recommendations
            </p>
          </div>

<div className="mt-4 md:mt-0 flex items-center space-x-3">
            <button className="bg-aqua/20 hover:bg-aqua/30 text-aqua px-4 py-2 rounded-lg transition-colors flex items-center">
              <Sparkles className="w-5 h-5 mr-2" />
              Generate AI Report
            </button>
          </div>
        </div>

{/* Search and Filters */}
        <div className="mb-8">
          <div className="flex flex-col md:flex-row gap-4 mb-4">
            <div className="relative flex-grow">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="Search reports..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-dark-blue/30 border border-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-aqua text-white"
              />
            </div>

<div className="flex gap-3">
              <div className="relative">
                <button
                  onClick={() => setShowFilters(!showFilters)}
                  className="bg-dark-blue/30 border border-gray-700 hover:border-aqua/30 text-white px-4 py-2 rounded-lg transition-colors flex items-center"
                >
                  <Filter className="w-5 h-5 mr-2" />
                  Filters
                  <ChevronDown className="w-4 h-4 ml-2" />
                </button>

{showFilters && (
                  <div className="absolute right-0 mt-2 w-48 bg-dark-blue/90 border border-gray-700 rounded-lg shadow-lg z-10">
                    <div className="p-3">
                      <h3 className="text-sm font-medium text-white mb-2">Report Type</h3>
                      <div className="space-y-2">
                        <label className="flex items-center">
                          <input type="checkbox" className="mr-2" />
                          <span className="text-gray-300 text-sm">Summary</span>
                        </label>
                        <label className="flex items-center">
                          <input type="checkbox" className="mr-2" />
                          <span className="text-gray-300 text-sm">Analysis</span>
                        </label>
                        <label className="flex items-center">
                          <input type="checkbox" className="mr-2" />
                          <span className="text-gray-300 text-sm">Forecast</span>
                        </label>
                      </div>
                    </div>
                  </div>
                )}
              </div>

<div className="relative">
                <button className="bg-dark-blue/30 border border-gray-700 hover:border-aqua/30 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                  <Calendar className="w-5 h-5 mr-2" />
                  {selectedPeriod === "month"
                    ? "This Month"
                    : selectedPeriod === "quarter"
                      ? "This Quarter"
                      : "This Year"}
                  <ChevronDown className="w-4 h-4 ml-2" />
                </button>
              </div>
            </div>
          </div>
        </div>

{/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          <motion.div
            whileHover={{ y: -5 }}
            className="bg-gradient-to-br from-blue-500/10 to-aqua/10 rounded-xl p-6 border border-blue-500/20"
          >
            <div className="flex items-center mb-4">
              <div className="p-3 bg-blue-500/20 rounded-lg mr-3">
                <Smartphone className="w-6 h-6 text-blue-400" />
              </div>
              <div>
                <h3 className="text-lg font-medium text-white">Active eSIMs</h3>
                <p className="text-gray-400 text-sm">Currently monitored</p>
              </div>
            </div>
            <p className="text-3xl font-bold text-white">3</p>
          </motion.div>

<motion.div
            whileHover={{ y: -5 }}
            className="bg-gradient-to-br from-violet-500/10 to-fuchsia-500/10 rounded-xl p-6 border border-violet-500/20"
          >
            <div className="flex items-center mb-4">
              <div className="p-3 bg-violet-500/20 rounded-lg mr-3">
                <Clock className="w-6 h-6 text-violet-400" />
              </div>
              <div>
                <h3 className="text-lg font-medium text-white">Report Period</h3>
                <p className="text-gray-400 text-sm">Current selection</p>
              </div>
            </div>
            <p className="text-3xl font-bold text-white">March 2024</p>
          </motion.div>

<motion.div
            whileHover={{ y: -5 }}
            className="bg-gradient-to-br from-emerald-500/10 to-green-500/10 rounded-xl p-6 border border-emerald-500/20"
          >
            <div className="flex items-center mb-4">
              <div className="p-3 bg-emerald-500/20 rounded-lg mr-3">
                <Sparkles className="w-6 h-6 text-emerald-400" />
              </div>
              <div>
                <h3 className="text-lg font-medium text-white">AI Insights</h3>
                <p className="text-gray-400 text-sm">Generated this month</p>
              </div>
            </div>
            <p className="text-3xl font-bold text-white">12</p>
          </motion.div>
        </div>

{/* Reports List */}
        <div className="mb-8">
          <h2 className="text-2xl font-bold mb-6 text-white">Available Reports</h2>

<div className="space-y-4">
            {filteredReports.map((report) => (
              <motion.div
                key={report.id}
                whileHover={{ y: -3 }}
                className="bg-dark-blue/30 border border-gray-700 hover:border-aqua/30 rounded-xl p-5 transition-all"
              >
                <div className="flex flex-col md:flex-row md:items-center justify-between">
                  <div className="flex items-start mb-4 md:mb-0">
                    <div className="p-3 bg-dark-blue/50 rounded-lg mr-3">{getReportTypeIcon(report.type)}</div>
                    <div>
                      <h3 className="text-lg font-medium text-white mb-1">{report.title}</h3>
                      <p className="text-gray-400 text-sm">{report.description}</p>
                      <div className="flex items-center mt-2">
                        <Calendar className="w-4 h-4 text-gray-500 mr-1" />
                        <span className="text-xs text-gray-500 mr-3">{report.date}</span>
                        <FileText className="w-4 h-4 text-gray-500 mr-1" />
                        <span className="text-xs text-gray-500">{report.size}</span>
                      </div>
                    </div>
                  </div>

<div className="flex items-center space-x-3">
                    <div className="bg-aqua/10 text-aqua px-3 py-1 rounded-full text-xs flex items-center">
                      <Sparkles className="w-3 h-3 mr-1" />
                      <span>AI Insight</span>
                    </div>
                    <button className="bg-aqua/20 hover:bg-aqua/30 text-aqua p-2 rounded-lg transition-colors">
                      <Download className="w-5 h-5" />
                    </button>
                    <button className="bg-dark-blue/50 hover:bg-dark-blue/70 text-white p-2 rounded-lg transition-colors">
                      <ArrowUpRight className="w-5 h-5" />
                    </button>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>

{/* Generate Custom Report */}
        <div className="bg-gradient-to-br from-aqua/10 to-blue-400/10 rounded-xl p-8 border border-aqua/20">
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="mb-6 md:mb-0">
              <h2 className="text-2xl font-bold mb-2 text-white">Generate Custom Report</h2>
              <p className="text-gray-300 max-w-xl">
                Use our AI-powered analytics to create a custom report tailored to your specific needs and preferences
              </p>
            </div>
            <button className="bg-gradient-to-r from-aqua to-blue-400 text-dark-blue font-medium px-6 py-3 rounded-lg hover:opacity-90 transition-colors flex items-center">
              <Sparkles className="w-5 h-5 mr-2" />
              Create Custom Report
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/order/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronRight, ChevronLeft, Check, Smartphone, Shield, QrCode, Camera, Send } from "lucide-react"

export default function ESIMOrderPage() {
  const [currentStep, setCurrentStep] = useState(1)
  const [orderNumber, setOrderNumber] = useState("")
  const [formData, setFormData] = useState({
    email: "",
    phone: "",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isLoading, setIsLoading] = useState(false)
  const [qrCodeData, setQrCodeData] = useState("")
  const [isOrderComplete, setIsOrderComplete] = useState(false)

const totalSteps = 4

const handleNextStep = async () => {
    if (currentStep === 1) {
      // Validate email and phone
      const newErrors: Record<string, string> = {}
      if (!formData.email) newErrors.email = "Email is required"
      if (!formData.phone) newErrors.phone = "Phone number is required"

setErrors(newErrors)
      if (Object.keys(newErrors).length > 0) return

// Generate order number
      const generatedOrderNumber = generateOrderNumber()
      setOrderNumber(generatedOrderNumber)
    }

if (currentStep === 2) {
      // Generate QR code data
      const generatedQRCodeData = generateQRCodeData()
      setQrCodeData(generatedQRCodeData)
    }

if (currentStep === totalSteps) {
      // Process order completion
      setIsLoading(true)
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))
      setIsLoading(false)
      setIsOrderComplete(true)
      return
    }

setCurrentStep((prev) => prev + 1)
  }

const handlePreviousStep = () => {
    if (currentStep > 1) {
      setCurrentStep((prev) => prev - 1)
    }
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))

// Clear error when user starts typing
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[name]
        return newErrors
      })
    }
  }

const generateOrderNumber = () => {
    // In a real application, this should be handled server-side
    const randomNumber = Math.floor(100000 + Math.random() * 900000)
    return randomNumber.toString().padStart(6, "0")
  }

const generateQRCodeData = () => {
    // This is a placeholder. In a real application, you'd generate this server-side
    return "00020101021126500015com.mmqrpay.www01152235110100143210208100155515204581253031045802MM5914Archway Bistro6008Kamaryut61051104164360002MY0115Archway Bistro0207Kamaryut63041892"
  }

const getStepTitle = () => {
    switch (currentStep) {
      case 1:
        return "Customer Information"
      case 2:
        return "Order Confirmation"
      case 3:
        return "Payment"
      case 4:
        return "Verify Payment"
      default:
        return ""
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background py-12">
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
            Order Your Myanmar eSIM
          </h1>
          <p className="text-gray-300 max-w-2xl mx-auto">
            Complete your eSIM order securely with our streamlined process
          </p>
        </div>

{/* Progress Bar */}
        <div className="mb-8">
          <div className="flex justify-between items-center mb-2">
            {Array.from({ length: totalSteps }).map((_, index) => (
              <div
                key={index}
                className={`relative flex items-center justify-center ${
                  index + 1 < currentStep ? "text-aqua" : index + 1 === currentStep ? "text-white" : "text-gray-500"
                }`}
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
                    index + 1 < currentStep
                      ? "bg-aqua border-aqua text-dark-blue"
                      : index + 1 === currentStep
                        ? "border-aqua bg-dark-blue/50"
                        : "border-gray-700 bg-dark-blue/30"
                  }`}
                >
                  {index + 1 < currentStep ? <Check className="w-6 h-6" /> : <span>{index + 1}</span>}
                </div>
                <span className="absolute -bottom-6 text-xs whitespace-nowrap">
                  {index === 0
                    ? "Information"
                    : index === 1
                      ? "Confirmation"
                      : index === 2
                        ? "Payment"
                        : "Verification"}
                </span>
              </div>
            ))}
          </div>
          <div className="relative h-2 bg-dark-blue/50 rounded-full mt-8">
            <div
              className="absolute top-0 left-0 h-full bg-gradient-to-r from-aqua to-blue-400 rounded-full transition-all duration-300"
              style={{ width: `${((currentStep - 1) / (totalSteps - 1)) * 100}%` }}
            ></div>
          </div>
        </div>

{/* Main Content */}
        <div className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6 md:p-8 mb-8">
          <h2 className="text-2xl font-bold mb-6 text-white">{getStepTitle()}</h2>

<AnimatePresence mode="wait">
            <motion.div
              key={currentStep}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -20 }}
              transition={{ duration: 0.3 }}
            >
              {/* Step 1: Customer Information */}
              {currentStep === 1 && (
                <div className="space-y-6">
                  <div>
                    <label className="block text-gray-300 mb-2 text-sm">Email Address*</label>
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      className={`w-full bg-dark-blue/50 border ${
                        errors.email ? "border-red-500" : "border-gray-700"
                      } rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                    />
                    {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
                  </div>

<div>
                    <label className="block text-gray-300 mb-2 text-sm">Phone Number*</label>
                    <input
                      type="tel"
                      name="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      className={`w-full bg-dark-blue/50 border ${
                        errors.phone ? "border-red-500" : "border-gray-700"
                      } rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                    />
                    {errors.phone && <p className="text-red-500 text-xs mt-1">{errors.phone}</p>}
                  </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                    <Shield className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                    <div>
                      <p className="text-white font-medium mb-1">Secure Information</p>
                      <p className="text-sm text-gray-300">
                        Your email and phone number are required for order confirmation and eSIM delivery. We ensure
                        your data is protected and never shared with third parties.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{/* Step 2: Order Confirmation */}
              {currentStep === 2 && (
                <div className="space-y-6">
                  <div className="bg-dark-blue/50 rounded-lg p-6 border border-gray-700">
                    <h3 className="text-lg font-medium text-white mb-4">Order Summary</h3>
                    <div className="space-y-4">
                      <div className="flex justify-between pb-2 border-b border-gray-700">
                        <span className="text-gray-300">Order Number:</span>
                        <span className="text-white font-medium">{orderNumber}</span>
                      </div>
                      <div className="flex justify-between pb-2 border-b border-gray-700">
                        <span className="text-gray-300">Email:</span>
                        <span className="text-white font-medium">{formData.email}</span>
                      </div>
                      <div className="flex justify-between pb-2 border-b border-gray-700">
                        <span className="text-gray-300">Phone:</span>
                        <span className="text-white font-medium">{formData.phone}</span>
                      </div>
                      {/* Add more order details here */}
                    </div>
                  </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                    <Smartphone className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                    <div>
                      <p className="text-white font-medium mb-1">Next Steps</p>
                      <p className="text-sm text-gray-300">
                        After confirming your order, you'll proceed to the payment step where you'll scan a Myanmar Pay
                        QR code to complete your purchase.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{/* Step 3: Payment */}
              {currentStep === 3 && (
                <div className="space-y-6">
                  <div className="bg-dark-blue/50 rounded-lg p-6 border border-gray-700">
                    <h3 className="text-lg font-medium text-white mb-4">Myanmar Pay QR Code</h3>
                    <p className="text-gray-300 mb-4">
                      Scan the QR code below with your Myanmar Pay app to complete your purchase.
                    </p>
                    <div className="flex justify-center mb-4">
                      <div className="bg-white p-4 rounded-lg">
                        <QrCode className="w-48 h-48 text-dark-blue" />
                      </div>
                    </div>
                    <p className="text-sm text-gray-400 text-center">QR Code Data: {qrCodeData.slice(0, 20)}...</p>
                  </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                    <Shield className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                    <div>
                      <p className="text-white font-medium mb-1">Secure Payment</p>
                      <p className="text-sm text-gray-300">
                        Your payment is processed securely through Myanmar Pay. We do not store any of your payment
                        details.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{/* Step 4: Verify Payment */}
              {currentStep === 4 && !isOrderComplete && (
                <div className="space-y-6">
                  <div className="bg-dark-blue/50 rounded-lg p-6 border border-gray-700">
                    <h3 className="text-lg font-medium text-white mb-4">Verify Your Payment</h3>
                    <p className="text-gray-300 mb-4">To complete your order, please follow these steps:</p>
                    <ol className="list-decimal list-inside space-y-2 text-gray-300">
                      <li>Take a screenshot of your Myanmar Pay transaction confirmation</li>
                      <li>Send the screenshot to our Viber number: 09650000172</li>
                      <li>Our admin team will verify the payment and confirm your order</li>
                    </ol>
                  </div>

<div className="flex items-center justify-center space-x-4">
                    <div className="flex flex-col items-center">
                      <div className="w-16 h-16 bg-dark-blue/50 rounded-full flex items-center justify-center mb-2">
                        <Camera className="w-8 h-8 text-aqua" />
                      </div>
                      <span className="text-sm text-gray-300">Take Screenshot</span>
                    </div>
                    <ChevronRight className="w-6 h-6 text-gray-500" />
                    <div className="flex flex-col items-center">
                      <div className="w-16 h-16 bg-dark-blue/50 rounded-full flex items-center justify-center mb-2">
                        <Send className="w-8 h-8 text-aqua" />
                      </div>
                      <span className="text-sm text-gray-300">Send via Viber</span>
                    </div>
                    <ChevronRight className="w-6 h-6 text-gray-500" />
                    <div className="flex flex-col items-center">
                      <div className="w-16 h-16 bg-dark-blue/50 rounded-full flex items-center justify-center mb-2">
                        <Check className="w-8 h-8 text-aqua" />
                      </div>
                      <span className="text-sm text-gray-300">Order Confirmed</span>
                    </div>
                  </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                    <Shield className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                    <div>
                      <p className="text-white font-medium mb-1">Verification Process</p>
                      <p className="text-sm text-gray-300">
                        Our admin team will verify your payment as quickly as possible. Once confirmed, you'll receive
                        your eSIM details via email.
                      </p>
                    </div>
                  </div>
                </div>
              )}

{/* Order Complete */}
              {isOrderComplete && (
                <div className="text-center py-6">
                  <div className="w-20 h-20 bg-gradient-to-r from-aqua to-blue-400 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Check className="w-10 h-10 text-dark-blue" />
                  </div>

<h3 className="text-2xl font-bold text-white mb-2">Order Submitted Successfully!</h3>
                  <p className="text-gray-300 mb-6">
                    Your order has been submitted for verification. Please check your email for further instructions.
                  </p>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 inline-block mb-6">
                    <p className="text-gray-400 text-sm">Order Number</p>
                    <p className="text-xl font-bold text-white">{orderNumber}</p>
                  </div>

<button
                    onClick={() => {
                      // Handle navigation to dashboard or home page
                    }}
                    className="bg-gradient-to-r from-aqua to-blue-400 text-dark-blue px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-colors"
                  >
                    Go to Dashboard
                  </button>
                </div>
              )}
            </motion.div>
          </AnimatePresence>
        </div>

{/* Navigation Buttons */}
        {!isOrderComplete && (
          <div className="flex justify-between">
            {currentStep > 1 ? (
              <button
                onClick={handlePreviousStep}
                className="bg-dark-blue/50 text-white border border-gray-700 hover:border-aqua/30 px-6 py-3 rounded-lg transition-colors flex items-center"
              >
                <ChevronLeft className="w-5 h-5 mr-2" />
                Previous
              </button>
            ) : (
              <div></div> // Empty div to maintain flex spacing
            )}

<button
              onClick={handleNextStep}
              disabled={isLoading}
              className={`px-6 py-3 rounded-lg transition-colors flex items-center ${
                isLoading
                  ? "bg-aqua/50 text-dark-blue cursor-not-allowed"
                  : "bg-gradient-to-r from-aqua to-blue-400 text-dark-blue hover:opacity-90"
              }`}
            >
              {isLoading ? (
                <>
                  <div className="w-5 h-5 border-2 border-t-transparent border-dark-blue rounded-full animate-spin mr-2"></div>
                  Processing...
                </>
              ) : (
                <>
                  {currentStep === totalSteps ? "Complete Order" : "Next"}
                  <ChevronRight className="w-5 h-5 ml-2" />
                </>
              )}
            </button>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/order-success/page.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { Check, Download, Smartphone, QrCode, Calendar, Clock, ArrowRight, Sparkles, Brain } from "lucide-react"
import Link from "next/link"

interface OrderDetails {
  orderNumber: string
  plan: string
  data: string
  validity: string
  price: string
  activationDate: string
  expiryDate: string
}

export default function OrderSuccessPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [orderDetails, setOrderDetails] = useState<OrderDetails>({
    orderNumber: "ESIM-123456",
    plan: "Tourist Plus",
    data: "10GB",
    validity: "15 days",
    price: "25,000 MMK",
    activationDate: new Date().toISOString().split("T")[0],
    expiryDate: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
  })

useEffect(() => {
    // Simulate loading order details
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)
    return () => clearTimeout(timer)
  }, [])

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background py-12">
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Success Header */}
        <div className="text-center mb-12">
          <motion.div
            initial={{ scale: 0, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.5, type: "spring" }}
            className="w-24 h-24 bg-gradient-to-r from-aqua to-blue-400 rounded-full flex items-center justify-center mx-auto mb-6"
          >
            <Check className="w-12 h-12 text-dark-blue" />
          </motion.div>

<motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-4xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text"
          >
            Order Successful!
          </motion.h1>

<motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="text-xl text-gray-300 max-w-2xl mx-auto"
          >
            Your eSIM has been ordered successfully and is ready for activation
          </motion.p>
        </div>

{/* Order Details Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: isLoading ? 0.5 : 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6 md:p-8 mb-8"
        >
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold text-white">Order Details</h2>
            <div className="bg-aqua/20 text-aqua px-3 py-1 rounded-full text-sm">Completed</div>
          </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                  <p className="text-gray-400 text-sm mb-1">Plan</p>
                  <p className="text-xl font-bold text-white">{orderDetails.plan}</p>
                </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                  <p className="text-gray-400 text-sm mb-1">Data</p>
                  <div className="flex items-center">
                    <p className="text-xl font-bold text-white mr-2">{orderDetails.data}</p>
                    <p className="text-sm text-gray-400">({orderDetails.validity})</p>
                  </div>
                </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                  <p className="text-gray-400 text-sm mb-1">Price</p>
                  <p className="text-xl font-bold text-white">{orderDetails.price}</p>
                </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                  <p className="text-gray-400 text-sm mb-1">Activation Date</p>
                  <div className="flex items-center">
                    <Calendar className="w-5 h-5 text-aqua mr-2" />
                    <p className="text-white">{orderDetails.activationDate}</p>
                  </div>
                </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                  <p className="text-gray-400 text-sm mb-1">Expiry Date</p>
                  <div className="flex items-center">
                    <Clock className="w-5 h-5 text-aqua mr-2" />
                    <p className="text-white">{orderDetails.expiryDate}</p>
                  </div>
                </div>
              </div>

<button className="bg-dark-blue/50 text-white border border-aqua/30 px-6 py-3 rounded-lg font-medium hover:bg-dark-blue/70 transition-colors flex items-center justify-center">
                  <Download className="w-5 h-5 mr-2" />
                  Download Details
                </button>
              </div>
            </>
          )}
        </motion.div>

{/* Activation Instructions */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: isLoading ? 0.5 : 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6 md:p-8 mb-8"
        >
          <h2 className="text-2xl font-bold text-white mb-6">Activation Instructions</h2>

{isLoading ? (
            <div className="flex justify-center py-12">
              <div className="w-12 h-12 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="flex flex-col md:flex-row gap-6">
                <div key="step1" className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 flex-1">
                  <div className="flex items-center mb-3">
                    <div className="bg-aqua/20 text-aqua w-8 h-8 rounded-full flex items-center justify-center mr-3">
                      1
                    </div>
                    <h3 className="text-lg font-medium text-white">Check Your Email</h3>
                  </div>
                  <p className="text-gray-300 text-sm">
                    We've sent your eSIM QR code to your registered email address. Open the email and save the QR code
                    image.
                  </p>
                </div>

<div key="step2" className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 flex-1">
                  <div className="flex items-center mb-3">
                    <div className="bg-aqua/20 text-aqua w-8 h-8 rounded-full flex items-center justify-center mr-3">
                      2
                    </div>
                    <h3 className="text-lg font-medium text-white">Open Settings</h3>
                  </div>
                  <p className="text-gray-300 text-sm">
                    On your device, go to Settings > Cellular/Mobile Data > Add Cellular/Mobile Plan.
                  </p>
                </div>

<div key="step3" className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 flex-1">
                  <div className="flex items-center mb-3">
                    <div className="bg-aqua/20 text-aqua w-8 h-8 rounded-full flex items-center justify-center mr-3">
                      3
                    </div>
                    <h3 className="text-lg font-medium text-white">Scan QR Code</h3>
                  </div>
                  <p className="text-gray-300 text-sm">
                    Use your device's camera to scan the QR code and follow the on-screen instructions to complete
                    activation.
                  </p>
                </div>
              </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                <Brain className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                <div>
                  <p className="text-white font-medium mb-1">Need Help with Activation?</p>
                  <p className="text-sm text-gray-300 mb-3">
                    Our AI assistant can guide you through the activation process with step-by-step instructions
                    tailored to your specific device.
                  </p>
                  <button className="bg-aqua/20 hover:bg-aqua/30 text-aqua px-4 py-2 rounded-lg transition-colors flex items-center text-sm">
                    <Sparkles className="w-4 h-4 mr-2" />
                    Launch AI Activation Assistant
                  </button>
                </div>
              </div>
            </div>
          )}
        </motion.div>

{/* What's Next */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: isLoading ? 0.5 : 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.6 }}
          className="bg-gradient-to-br from-aqua/10 to-blue-400/10 rounded-xl p-6 md:p-8 border border-aqua/20"
        >
          <h2 className="text-2xl font-bold text-white mb-6">What's Next?</h2>

{isLoading ? (
            <div className="flex justify-center py-12">
              <div className="w-12 h-12 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin"></div>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div className="bg-dark-blue/30 rounded-lg p-4 border border-gray-700/50">
                  <div className="flex items-center mb-3">
                    <Smartphone className="w-6 h-6 text-aqua mr-2" />
                    <h3 className="font-medium text-white">Manage Your eSIM</h3>
                  </div>
                  <p className="text-sm text-gray-300 mb-3">
                    View your data usage, check balance, and manage your eSIM settings from your dashboard.
                  </p>
                  <Link href="/dashboard" className="text-aqua hover:text-aqua/80 text-sm flex items-center">
                    Go to Dashboard
                    <ArrowRight className="w-4 h-4 ml-1" />
                  </Link>
                </div>

<div className="bg-dark-blue/30 rounded-lg p-4 border border-gray-700/50">
                  <div className="flex items-center mb-3">
                    <QrCode className="w-6 h-6 text-aqua mr-2" />
                    <h3 className="font-medium text-white">Add More Data</h3>
                  </div>
                  <p className="text-sm text-gray-300 mb-3">
                    Running low on data? You can easily top up your eSIM or purchase additional data packages.
                  </p>
                  <Link href="/order" className="text-aqua hover:text-aqua/80 text-sm flex items-center">
                    Buy Data Package
                    <ArrowRight className="w-4 h-4 ml-1" />
                  </Link>
                </div>

<div className="bg-dark-blue/30 rounded-lg p-4 border border-gray-700/50">
                  <div className="flex items-center mb-3">
                    <Brain className="w-6 h-6 text-aqua mr-2" />
                    <h3 className="font-medium text-white">AI Recommendations</h3>
                  </div>
                  <p className="text-sm text-gray-300 mb-3">
                    Get personalized recommendations for optimizing your data usage and network performance.
                  </p>
                  <Link href="/analytics" className="text-aqua hover:text-aqua/80 text-sm flex items-center">
                    View Insights
                    <ArrowRight className="w-4 h-4 ml-1" />
                  </Link>
                </div>
              </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/dashboard"
                  className="bg-gradient-to-r from-aqua to-blue-400 text-dark-blue px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-colors text-center"
                >
                  Go to Dashboard
                </Link>
                <Link
                  href="/support"
                  className="bg-dark-blue/50 text-white border border-aqua/30 px-6 py-3 rounded-lg font-medium hover:bg-dark-blue/70 transition-colors text-center"
                >
                  Contact Support
                </Link>
              </div>
            </>
          )}
        </motion.div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/esim-data/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Wifi, Shield, Search, Filter, Check, ChevronDown, Clock, Info } from "lucide-react"
import Image from "next/image"
import { Progress } from "@/components/ui/progress"
import ESIMComparisonTable from "@/components/ESIMComparisonTable"
import ESIMDataPurchaseModal from "@/components/ESIMDataPurchaseModal"
import ESIMProviderCard from "@/components/ESIMProviderCard"

// Define types for our data
interface ESIMProvider {
  id: string
  name: string
  logo: string
  description: string
  coverage: number
  dataPlans: ESIMDataPlan[]
  features: string[]
  rating: number
}

interface ESIMDataPlan {
  id: string
  name: string
  data: string
  validity: string
  price: number
  features: string[]
  bestFor?: string
  popular?: boolean
}

export default function ESIMDataPage() {
  const [selectedProvider, setSelectedProvider] = useState<string | null>(null)
  const [selectedPlan, setSelectedPlan] = useState<ESIMDataPlan | null>(null)
  const [isPurchaseModalOpen, setIsPurchaseModalOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)
  const [selectedFilters, setSelectedFilters] = useState({
    dataAmount: "all",
    validity: "all",
    price: "all",
  })

// Simulated data for the providers
  const providers: ESIMProvider[] = [
    {
      id: "mpt",
      name: "MPT",
      logo: "/placeholder.svg?height=80&width=80&text=MPT",
      description: "Myanmar's largest telecom provider with nationwide coverage and reliable service.",
      coverage: 95,
      rating: 4.2,
      features: [
        "Nationwide coverage",
        "4G/5G where available",
        "24/7 customer support",
        "Data rollover available",
        "Unlimited social media options",
      ],
      dataPlans: [
        {
          id: "mpt-basic",
          name: "Tourist Essential",
          data: "5GB",
          validity: "7 days",
          price: 15000,
          features: ["Nationwide coverage", "4G/5G where available", "Unlimited social media"],
          bestFor: "Short trips",
        },
        {
          id: "mpt-standard",
          name: "Tourist Plus",
          data: "10GB",
          validity: "15 days",
          price: 25000,
          features: ["Nationwide coverage", "4G/5G where available", "Unlimited social media", "24/7 support"],
          popular: true,
          bestFor: "Medium-length stays",
        },
        {
          id: "mpt-premium",
          name: "Tourist Premium",
          data: "20GB",
          validity: "30 days",
          price: 45000,
          features: [
            "Nationwide coverage",
            "4G/5G priority",
            "Unlimited social media",
            "24/7 support",
            "Hotspot capability",
          ],
          bestFor: "Long-term visitors",
        },
      ],
    },
    {
      id: "ooredoo",
      name: "Ooredoo",
      logo: "/placeholder.svg?height=80&width=80&text=Ooredoo",
      description: "Fast data speeds with excellent urban coverage and competitive pricing for eSIM users.",
      coverage: 80,
      rating: 4.0,
      features: [
        "Fastest urban speeds",
        "Excellent city coverage",
        "Competitive pricing",
        "Unlimited streaming options",
        "Easy top-up system",
      ],
      dataPlans: [
        {
          id: "ooredoo-basic",
          name: "Basic Travel",
          data: "3GB",
          validity: "7 days",
          price: 12000,
          features: ["Urban coverage", "4G speeds", "Social media access"],
          bestFor: "City travelers",
        },
        {
          id: "ooredoo-standard",
          name: "Standard Travel",
          data: "8GB",
          validity: "15 days",
          price: 22000,
          features: ["Urban coverage", "4G/5G speeds", "Social media access", "Video streaming"],
          popular: true,
          bestFor: "Digital nomads",
        },
        {
          id: "ooredoo-premium",
          name: "Premium Travel",
          data: "15GB",
          validity: "30 days",
          price: 40000,
          features: ["Urban coverage", "4G/5G speeds", "Social media access", "Video streaming", "Gaming optimization"],
          bestFor: "Heavy data users",
        },
      ],
    },
    {
      id: "mytel",
      name: "MYTEL",
      logo: "/placeholder.svg?height=80&width=80&text=MYTEL",
      description: "Newer provider with growing coverage and competitive pricing for budget-conscious users.",
      coverage: 75,
      rating: 3.8,
      features: [
        "Budget-friendly options",
        "Growing network coverage",
        "Good data rollover policy",
        "Affordable top-ups",
        "Simple activation process",
      ],
      dataPlans: [
        {
          id: "mytel-basic",
          name: "Budget Travel",
          data: "2GB",
          validity: "7 days",
          price: 8000,
          features: ["Basic coverage", "4G speeds", "Social media access"],
          bestFor: "Budget travelers",
        },
        {
          id: "mytel-standard",
          name: "Value Travel",
          data: "7GB",
          validity: "15 days",
          price: 18000,
          features: ["Growing coverage", "4G speeds", "Social media access", "Basic streaming"],
          popular: true,
          bestFor: "Value seekers",
        },
        {
          id: "mytel-premium",
          name: "Extended Travel",
          data: "18GB",
          validity: "30 days",
          price: 32000,
          features: ["Growing coverage", "4G speeds", "Social media access", "Video streaming", "Data rollover"],
          bestFor: "Long-term budget stays",
        },
      ],
    },
    {
      id: "atom",
      name: "ATOM",
      logo: "/placeholder.svg?height=80&width=80&text=ATOM",
      description: "Specialized eSIM provider focusing on high-quality service and innovative features.",
      coverage: 70,
      rating: 4.5,
      features: [
        "Specialized eSIM services",
        "Premium customer support",
        "Innovative features",
        "Flexible plans",
        "Advanced security",
      ],
      dataPlans: [
        {
          id: "atom-basic",
          name: "Explorer Basic",
          data: "4GB",
          validity: "7 days",
          price: 14000,
          features: ["Urban coverage", "4G/5G speeds", "Enhanced security"],
          bestFor: "Security-conscious users",
        },
        {
          id: "atom-standard",
          name: "Explorer Plus",
          data: "9GB",
          validity: "15 days",
          price: 26000,
          features: ["Urban coverage", "4G/5G speeds", "Enhanced security", "Priority support"],
          popular: true,
          bestFor: "Business travelers",
        },
        {
          id: "atom-premium",
          name: "Explorer Premium",
          data: "22GB",
          validity: "30 days",
          price: 48000,
          features: ["Urban coverage", "4G/5G speeds", "Enhanced security", "Priority support", "Multi-device support"],
          bestFor: "Premium users",
        },
      ],
    },
  ]

// Simulate loading data
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)
    return () => clearTimeout(timer)
  }, [])

// Filter providers based on search query
  const filteredProviders = providers.filter((provider) =>
    provider.name.toLowerCase().includes(searchQuery.toLowerCase()),
  )

// Filter data plans based on selected filters
  const getFilteredDataPlans = (plans: ESIMDataPlan[]) => {
    return plans.filter((plan) => {
      // Filter by data amount
      if (selectedFilters.dataAmount !== "all") {
        const dataGB = Number.parseInt(plan.data.replace("GB", ""))
        if (selectedFilters.dataAmount === "small" && dataGB > 5) return false
        if (selectedFilters.dataAmount === "medium" && (dataGB <= 5 || dataGB > 15)) return false
        if (selectedFilters.dataAmount === "large" && dataGB <= 15) return false
      }

// Filter by validity
      if (selectedFilters.validity !== "all") {
        const days = Number.parseInt(plan.validity.replace(" days", ""))
        if (selectedFilters.validity === "short" && days > 7) return false
        if (selectedFilters.validity === "medium" && (days <= 7 || days > 15)) return false
        if (selectedFilters.validity === "long" && days <= 15) return false
      }

// Filter by price
      if (selectedFilters.price !== "all") {
        if (selectedFilters.price === "budget" && plan.price > 15000) return false
        if (selectedFilters.price === "standard" && (plan.price <= 15000 || plan.price > 30000)) return false
        if (selectedFilters.price === "premium" && plan.price <= 30000) return false
      }

return true
    })
  }

const handlePurchase = (plan: ESIMDataPlan) => {
    setSelectedPlan(plan)
    setIsPurchaseModalOpen(true)
  }

const handleProviderSelect = (providerId: string) => {
    setSelectedProvider(providerId === selectedProvider ? null : providerId)
  }

const formatPrice = (price: number) => {
    return new Intl.NumberFormat("en-US").format(price) + " MMK"
  }

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background">
      <div className="container mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-aqua to-blue-400 text-transparent bg-clip-text">
            eSIM Data Plans
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Compare and purchase eSIM data plans from Myanmar's leading providers. Get connected instantly with our
            secure, integrated system.
          </p>
        </div>

{/* Search and Filters */}
        <div className="mb-8">
          <div className="flex flex-col md:flex-row gap-4 mb-4">
            <div className="relative flex-grow">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="Search providers..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-dark-blue/30 border border-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-aqua text-white"
              />
            </div>

<div className="relative">
              <button
                onClick={() => setShowFilters(!showFilters)}
                className="bg-dark-blue/30 border border-gray-700 hover:border-aqua/30 text-white px-4 py-2 rounded-lg transition-colors flex items-center"
              >
                <Filter className="w-5 h-5 mr-2" />
                Filters
                <ChevronDown className="w-4 h-4 ml-2" />
              </button>

{showFilters && (
                <div className="absolute right-0 mt-2 w-64 bg-dark-blue/90 border border-gray-700 rounded-lg shadow-lg z-10 p-4">
                  <h3 className="text-sm font-medium text-white mb-3">Data Amount</h3>
                  <div className="space-y-2 mb-4">
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="dataAmount"
                        checked={selectedFilters.dataAmount === "all"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, dataAmount: "all" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">All</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="dataAmount"
                        checked={selectedFilters.dataAmount === "small"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, dataAmount: "small" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Small (≤ 5GB)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="dataAmount"
                        checked={selectedFilters.dataAmount === "medium"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, dataAmount: "medium" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Medium (6-15GB)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="dataAmount"
                        checked={selectedFilters.dataAmount === "large"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, dataAmount: "large" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Large (> 15GB)</span>
                    </label>
                  </div>

<h3 className="text-sm font-medium text-white mb-3">Validity</h3>
                  <div className="space-y-2 mb-4">
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="validity"
                        checked={selectedFilters.validity === "all"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, validity: "all" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">All</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="validity"
                        checked={selectedFilters.validity === "short"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, validity: "short" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Short (≤ 7 days)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="validity"
                        checked={selectedFilters.validity === "medium"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, validity: "medium" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Medium (8-15 days)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="validity"
                        checked={selectedFilters.validity === "long"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, validity: "long" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Long (> 15 days)</span>
                    </label>
                  </div>

<h3 className="text-sm font-medium text-white mb-3">Price Range</h3>
                  <div className="space-y-2">
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="price"
                        checked={selectedFilters.price === "all"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, price: "all" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">All</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="price"
                        checked={selectedFilters.price === "budget"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, price: "budget" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Budget (≤ 15,000 MMK)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="price"
                        checked={selectedFilters.price === "standard"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, price: "standard" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Standard (15,001-30,000 MMK)</span>
                    </label>
                    <label className="flex items-center">
                      <input
                        type="radio"
                        name="price"
                        checked={selectedFilters.price === "premium"}
                        onChange={() => setSelectedFilters({ ...selectedFilters, price: "premium" })}
                        className="mr-2"
                      />
                      <span className="text-gray-300 text-sm">Premium (> 30,000 MMK)</span>
                    </label>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

{/* Provider Cards */}
        {isLoading ? (
          <div className="flex justify-center py-12">
            <div className="flex flex-col items-center">
              <div className="w-16 h-16 border-4 border-t-aqua border-r-aqua/30 border-b-aqua/30 border-l-aqua/30 rounded-full animate-spin mb-4"></div>
              <p className="text-aqua">Loading providers...</p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {filteredProviders.map((provider) => (
              <ESIMProviderCard
                key={provider.id}
                provider={provider}
                isSelected={selectedProvider === provider.id}
                onSelect={() => handleProviderSelect(provider.id)}
              />
            ))}
          </div>
        )}

{/* Provider Details and Plans */}
        <AnimatePresence>
          {selectedProvider && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              transition={{ duration: 0.3 }}
              className="mb-12 overflow-hidden"
            >
              {providers
                .filter((provider) => provider.id === selectedProvider)
                .map((provider) => (
                  <div key={provider.id} className="bg-dark-blue/30 border border-gray-700 rounded-xl p-6">
                    <div className="flex flex-col md:flex-row gap-6 mb-8">
                      <div className="md:w-1/4 flex flex-col items-center text-center">
                        <div className="bg-dark-blue/50 p-6 rounded-lg mb-4">
                          <Image
                            src={provider.logo || "/placeholder.svg"}
                            alt={provider.name}
                            width={120}
                            height={120}
                            className="rounded-lg"
                          />
                        </div>
                        <h2 className="text-2xl font-bold text-white mb-2">{provider.name}</h2>
                        <div className="flex items-center mb-2">
                          {[...Array(5)].map((_, i) => (
                            <svg
                              key={i}
                              className={`w-5 h-5 ${i < Math.floor(provider.rating) ? "text-yellow-400" : "text-gray-500"}`}
                              fill="currentColor"
                              viewBox="0 0 20 20"
                            >
                              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                          ))}
                          <span className="ml-1 text-white">{provider.rating.toFixed(1)}</span>
                        </div>
                        <div className="mb-4">
                          <div className="flex justify-between text-sm text-gray-400 mb-1">
                            <span>Coverage</span>
                            <span>{provider.coverage}%</span>
                          </div>
                          <Progress value={provider.coverage} className="h-2 bg-dark-blue/50" />
                        </div>
                      </div>

<div className="md:w-3/4">
                        <h3 className="text-xl font-semibold text-white mb-4">About {provider.name}</h3>
                        <p className="text-gray-300 mb-6">{provider.description}</p>

<h3 className="text-xl font-semibold text-white mb-4">Key Features</h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                          {provider.features.map((feature, index) => (
                            <div key={index} className="flex items-start">
                              <Check className="w-5 h-5 text-aqua mr-2 mt-0.5 flex-shrink-0" />
                              <span className="text-gray-300">{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

<h3 className="text-xl font-semibold text-white mb-6">Available Data Plans</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {getFilteredDataPlans(provider.dataPlans).map((plan) => (
                        <div
                          key={plan.id}
                          className={`relative bg-dark-blue/50 border ${plan.popular ? "border-aqua/40" : "border-gray-700"} rounded-xl p-6 hover:border-aqua/30 transition-all`}
                        >
                          {plan.popular && (
                            <div className="absolute -top-3 -right-3 bg-gradient-to-r from-aqua to-blue-400 text-dark-blue text-xs px-3 py-1 rounded-full font-medium">
                              Most Popular
                            </div>
                          )}

<h4 className="text-lg font-semibold text-white mb-2">{plan.name}</h4>
                          <div className="flex items-baseline mb-4">
                            <span className="text-2xl font-bold text-white mr-2">{formatPrice(plan.price)}</span>
                            <span className="text-gray-400 text-sm">/ {plan.validity}</span>
                          </div>

<div className="mb-4">
                            <div className="flex items-center mb-2">
                              <Wifi className="w-5 h-5 text-aqua mr-2" />
                              <span className="text-white font-medium">{plan.data} Data</span>
                            </div>
                            <div className="flex items-center">
                              <Clock className="w-5 h-5 text-aqua mr-2" />
                              <span className="text-white font-medium">{plan.validity} Validity</span>
                            </div>
                          </div>

{plan.bestFor && (
                            <div className="bg-dark-blue/30 rounded-lg p-2 mb-4 flex items-center">
                              <Info className="w-4 h-4 text-aqua mr-2" />
                              <span className="text-sm text-gray-300">Best for: {plan.bestFor}</span>
                            </div>
                          )}

<ul className="space-y-2 mb-6">
                            {plan.features.map((feature, index) => (
                              <li key={index} className="flex items-start">
                                <Check className="w-4 h-4 text-aqua mr-2 mt-1 flex-shrink-0" />
                                <span className="text-gray-300 text-sm">{feature}</span>
                              </li>
                            ))}
                          </ul>

<button
                            onClick={() => handlePurchase(plan)}
                            className="w-full bg-gradient-to-r from-aqua to-blue-400 text-dark-blue font-medium py-2 rounded-lg hover:opacity-90 transition-colors"
                          >
                            Purchase Now
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
            </motion.div>
          )}
        </AnimatePresence>

{/* Provider Comparison */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-6 text-white">Provider Comparison</h2>
          <div className="bg-dark-blue/30 border border-gray-700 rounded-xl p-6 overflow-x-auto">
            <ESIMComparisonTable providers={providers} />
          </div>
        </div>

{/* Security Information */}
        <div className="bg-gradient-to-br from-aqua/10 to-blue-400/10 rounded-xl p-6 border border-aqua/20 mb-12">
          <div className="flex items-start">
            <Shield className="w-8 h-8 text-aqua mr-4 flex-shrink-0 mt-1" />
            <div>
              <h2 className="text-2xl font-bold mb-4 text-white">Secure eSIM Data Integration</h2>
              <p className="text-gray-300 mb-4">
                Our eSIM data integration system ensures complete security and privacy for all your transactions. We've
                implemented industry-leading security measures to protect your personal and payment information.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-dark-blue/30 p-4 rounded-lg">
                  <h3 className="font-semibold text-aqua mb-2">End-to-End Encryption</h3>
                  <p className="text-sm text-gray-300">
                    All data transmitted through our platform is encrypted using advanced protocols to prevent
                    unauthorized access.
                  </p>
                </div>
                <div className="bg-dark-blue/30 p-4 rounded-lg">
                  <h3 className="font-semibold text-aqua mb-2">Secure Payment Processing</h3>
                  <p className="text-sm text-gray-300">
                    Myanmar Pay QR integration with secure transaction handling and no storage of sensitive payment
                    details.
                  </p>
                </div>
                <div className="bg-dark-blue/30 p-4 rounded-lg">
                  <h3 className="font-semibold text-aqua mb-2">Self-Contained System</h3>
                  <p className="text-sm text-gray-300">
                    Our platform operates entirely within our secure environment with no redirects to external websites.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* FAQ Section */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-6 text-white">Frequently Asked Questions</h2>
          <div className="space-y-4">
            <div className="bg-dark-blue/30 border border-gray-700 rounded-lg overflow-hidden">
              <button className="w-full text-left p-4 flex justify-between items-center hover:bg-dark-blue/50 transition-colors">
                <span className="font-medium text-white">How do I activate my eSIM after purchase?</span>
                <ChevronDown className="w-5 h-5 text-aqua" />
              </button>
              <div className="p-4 bg-dark-blue/20 border-t border-gray-700">
                <p className="text-gray-300">
                  After completing your purchase, you'll receive a QR code via email. Open your device's settings,
                  navigate to the cellular or mobile data section, select "Add eSIM" or "Add Cellular Plan," and scan
                  the QR code. Follow the on-screen instructions to complete the activation process.
                </p>
              </div>
            </div>

<div className="bg-dark-blue/30 border border-gray-700 rounded-lg overflow-hidden">
              <button className="w-full text-left p-4 flex justify-between items-center hover:bg-dark-blue/50 transition-colors">
                <span className="font-medium text-white">Which devices are compatible with eSIMs?</span>
                <ChevronDown className="w-5 h-5 text-aqua" />
              </button>
              <div className="p-4 bg-dark-blue/20 border-t border-gray-700">
                <p className="text-gray-300">
                  Most modern smartphones support eSIM technology, including iPhone XS/XR and newer, Samsung Galaxy S20
                  and newer, Google Pixel 3 and newer, and many other recent models. Check your device specifications or
                  contact your manufacturer to confirm eSIM compatibility.
                </p>
              </div>
            </div>

<div className="bg-dark-blue/30 border border-gray-700 rounded-lg overflow-hidden">
              <button className="w-full text-left p-4 flex justify-between items-center hover:bg-dark-blue/50 transition-colors">
                <span className="font-medium text-white">Is my payment information secure?</span>
                <ChevronDown className="w-5 h-5 text-aqua" />
              </button>
              <div className="p-4 bg-dark-blue/20 border-t border-gray-700">
                <p className="text-gray-300">
                  Yes, all payment information is processed securely through our integrated Myanmar Pay QR system. We
                  use end-to-end encryption and don't store your sensitive payment details on our servers. Our platform
                  is regularly audited for security compliance.
                </p>
              </div>
            </div>

<div className="bg-dark-blue/30 border border-gray-700 rounded-lg overflow-hidden">
              <button className="w-full text-left p-4 flex justify-between items-center hover:bg-dark-blue/50 transition-colors">
                <span className="font-medium text-white">Can I use multiple eSIMs on one device?</span>
                <ChevronDown className="w-5 h-5 text-aqua" />
              </button>
              <div className="p-4 bg-dark-blue/20 border-t border-gray-700">
                <p className="text-gray-300">
                  Yes, most eSIM-compatible devices can store multiple eSIM profiles, though usually only one or two can
                  be active simultaneously depending on your device. This allows you to have different plans for
                  different purposes or switch between carriers without physically changing SIM cards.
                </p>
              </div>
            </div>
          </div>
        </div>

{/* Call to Action */}
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-4 text-white">Ready to Get Connected?</h2>
          <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
            Choose from our range of eSIM data plans and enjoy instant connectivity with secure, hassle-free activation.
          </p>
          <button
            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
            className="bg-gradient-to-r from-aqua to-blue-400 text-dark-blue px-8 py-3 rounded-lg text-lg font-semibold hover:opacity-90 transition-colors"
          >
            Explore Plans
          </button>
        </div>
      </div>

{/* Purchase Modal */}
      {selectedPlan && (
        <ESIMDataPurchaseModal
          isOpen={isPurchaseModalOpen}
          onClose={() => setIsPurchaseModalOpen(false)}
          plan={selectedPlan}
          provider={providers.find((p) => p.dataPlans.some((plan) => plan.id === selectedPlan.id))}
        />
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ESIMComparisonTable.tsx" isMerged="true"
"use client"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface ESIMProvider {
  id: string
  name: string
  logo: string
  description: string
  coverage: number
  dataPlans: ESIMDataPlan[]
  features: string[]
  rating: number
}

interface ESIMDataPlan {
  id: string
  name: string
  data: string
  validity: string
  price: number
  features: string[]
  bestFor?: string
  popular?: boolean
}

interface ESIMComparisonTableProps {
  providers: ESIMProvider[]
}

export default function ESIMComparisonTable({ providers }: ESIMComparisonTableProps) {
  // Get the most popular plan for each provider
  const getPopularPlan = (provider: ESIMProvider) => {
    const popularPlan = provider.dataPlans.find((plan) => plan.popular)
    return popularPlan || provider.dataPlans[0]
  }

return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[180px]">Provider</TableHead>
          <TableHead>Coverage</TableHead>
          <TableHead>Popular Plan</TableHead>
          <TableHead>Data</TableHead>
          <TableHead>Validity</TableHead>
          <TableHead>Price</TableHead>
          <TableHead>Features</TableHead>
          <TableHead>Rating</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {providers.map((provider) => {
          const popularPlan = getPopularPlan(provider)
          return (
            <TableRow key={provider.id}>
              <TableCell className="font-medium">{provider.name}</TableCell>
              <TableCell>{provider.coverage}%</TableCell>
              <TableCell>{popularPlan.name}</TableCell>
              <TableCell>{popularPlan.data}</TableCell>
              <TableCell>{popularPlan.validity}</TableCell>
              <TableCell>{new Intl.NumberFormat("en-US").format(popularPlan.price)} MMK</TableCell>
              <TableCell>
                <div className="flex flex-wrap gap-1">
                  {provider.features.slice(0, 3).map((feature, index) => (
                    <TooltipProvider key={index}>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <span className="inline-block bg-dark-blue/50 text-aqua text-xs px-2 py-1 rounded-full">
                            {feature.split(" ")[0]}...
                          </span>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>{feature}</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  ))}
                  {provider.features.length > 3 && (
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <span className="inline-block bg-dark-blue/50 text-gray-400 text-xs px-2 py-1 rounded-full">
                            +{provider.features.length - 3}
                          </span>
                        </TooltipTrigger>
                        <TooltipContent>
                          <div className="space-y-1">
                            {provider.features.slice(3).map((feature, index) => (
                              <p key={index}>{feature}</p>
                            ))}
                          </div>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  )}
                </div>
              </TableCell>
              <TableCell>
                <div className="flex items-center">
                  {[...Array(5)].map((_, i) => (
                    <svg
                      key={i}
                      className={`w-4 h-4 ${i < Math.floor(provider.rating) ? "text-yellow-400" : "text-gray-500"}`}
                      fill="currentColor"
                      viewBox="0 0 20 20"
                    >
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  ))}
                  <span className="ml-1 text-sm">{provider.rating.toFixed(1)}</span>
                </div>
              </TableCell>
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}

[V0_FILE]typescriptreact:file="components/ESIMProviderCard.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import Image from "next/image"
import { Wifi, Check } from "lucide-react"
import { Progress } from "@/components/ui/progress"

interface ESIMProvider {
  id: string
  name: string
  logo: string
  description: string
  coverage: number
  dataPlans: any[]
  features: string[]
  rating: number
}

interface ESIMProviderCardProps {
  provider: ESIMProvider
  isSelected: boolean
  onSelect: () => void
}

export default function ESIMProviderCard({ provider, isSelected, onSelect }: ESIMProviderCardProps) {
  return (
    <motion.div
      whileHover={{ y: -5 }}
      onClick={onSelect}
      className={`cursor-pointer rounded-xl p-6 border transition-all ${
        isSelected
          ? "bg-gradient-to-br from-aqua/20 to-blue-400/20 border-aqua/40"
          : "bg-dark-blue/30 border-gray-700 hover:border-gray-600"
      }`}
    >
      <div className="flex items-center mb-4">
        <div className="bg-dark-blue/50 p-3 rounded-lg mr-3">
          <Image
            src={provider.logo || "/placeholder.svg"}
            alt={provider.name}
            width={50}
            height={50}
            className="rounded"
          />
        </div>
        <div>
          <h3 className="font-semibold text-white">{provider.name}</h3>
          <div className="flex items-center">
            {[...Array(5)].map((_, i) => (
              <svg
                key={i}
                className={`w-4 h-4 ${i < Math.floor(provider.rating) ? "text-yellow-400" : "text-gray-500"}`}
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            ))}
            <span className="ml-1 text-xs text-gray-400">{provider.rating.toFixed(1)}</span>
          </div>
        </div>
      </div>

<p className="text-gray-300 text-sm mb-4 line-clamp-2">{provider.description}</p>

<div className="mb-4">
        <div className="flex justify-between text-xs text-gray-400 mb-1">
          <span>Coverage</span>
          <span>{provider.coverage}%</span>
        </div>
        <Progress value={provider.coverage} className="h-1.5 bg-dark-blue/50" />
      </div>

<div className="space-y-1 mb-4">
        {provider.features.slice(0, 3).map((feature, index) => (
          <div key={index} className="flex items-start">
            <Check className="w-4 h-4 text-aqua mr-1 mt-0.5 flex-shrink-0" />
            <span className="text-gray-300 text-xs">{feature}</span>
          </div>
        ))}
      </div>

<div className="flex items-center justify-between text-sm">
        <div className="flex items-center text-aqua">
          <Wifi className="w-4 h-4 mr-1" />
          <span>{provider.dataPlans.length} plans</span>
        </div>
        <span className="text-gray-400">
          From {new Intl.NumberFormat("en-US").format(Math.min(...provider.dataPlans.map((plan) => plan.price)))} MMK
        </span>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/ESIMDataPurchaseModal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { X, QrCode, Check, AlertCircle, Smartphone, Shield, Loader2 } from "lucide-react"
import Image from "next/image"

interface ESIMProvider {
  id: string
  name: string
  logo: string
  description: string
  coverage: number
  dataPlans: ESIMDataPlan[]
  features: string[]
  rating: number
}

interface ESIMDataPlan {
  id: string
  name: string
  data: string
  validity: string
  price: number
  features: string[]
  bestFor?: string
  popular?: boolean
}

interface ESIMDataPurchaseModalProps {
  isOpen: boolean
  onClose: () => void
  plan: ESIMDataPlan
  provider: ESIMProvider | undefined
}

export default function ESIMDataPurchaseModal({ isOpen, onClose, plan, provider }: ESIMDataPurchaseModalProps) {
  const [currentStep, setCurrentStep] = useState(1)
  const [isProcessing, setIsProcessing] = useState(false)
  const [isComplete, setIsComplete] = useState(false)
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    agreeTerms: false,
  })
  const [errors, setErrors] = useState<Record<string, string>>({})

const totalSteps = 3

const handleNextStep = () => {
    if (currentStep === 1) {
      // Validate personal information
      const newErrors: Record<string, string> = {}
      if (!formData.firstName) newErrors.firstName = "First name is required"
      if (!formData.lastName) newErrors.lastName = "Last name is required"
      if (!formData.email) newErrors.email = "Email is required"
      else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = "Email is invalid"
      if (!formData.phone) newErrors.phone = "Phone number is required"
      if (!formData.agreeTerms) newErrors.agreeTerms = "You must agree to the terms and conditions"

setErrors(newErrors)
      if (Object.keys(newErrors).length > 0) return
    }

if (currentStep === totalSteps) {
      // Process payment
      setIsProcessing(true)
      // Simulate payment processing
      setTimeout(() => {
        setIsProcessing(false)
        setIsComplete(true)
      }, 2000)
      return
    }

setCurrentStep((prev) => prev + 1)
  }

const handlePreviousStep = () => {
    if (currentStep > 1) {
      setCurrentStep((prev) => prev - 1)
    }
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }))

const formatPrice = (price: number) => {
    return new Intl.NumberFormat("en-US").format(price) + " MMK"
  }

if (!isOpen || !plan || !provider) return null

return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      >
        <motion.div
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.9, opacity: 0 }}
          className="bg-dark-blue/90 glassmorphism rounded-xl w-full max-w-2xl relative border border-aqua/30"
        >
          <button
            onClick={onClose}
            className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
            disabled={isProcessing}
          >
            <X className="w-6 h-6" />
          </button>

<div className="p-6">
            <h2 className="text-2xl font-semibold mb-6 bg-gradient-to-r from-aqua to-blue-400 text-transparent bg-clip-text">
              Purchase eSIM Data Plan
            </h2>

{/* Progress Steps */}
            {!isComplete && (
              <div className="mb-8">
                <div className="flex justify-between items-center relative">
                  {[1, 2, 3].map((step) => (
                    <div
                      key={step}
                      className={`z-10 flex flex-col items-center ${
                        step < currentStep ? "text-aqua" : step === currentStep ? "text-white" : "text-gray-500"
                      }`}
                    >
                      <div
                        className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${
                          step < currentStep
                            ? "bg-aqua text-dark-blue"
                            : step === currentStep
                              ? "bg-aqua/20 text-white border border-aqua"
                              : "bg-dark-blue/50 text-gray-500 border border-gray-700"
                        }`}
                      >
                        {step < currentStep ? <Check className="w-6 h-6" /> : step}
                      </div>
                      <span className="text-xs">{step === 1 ? "Your Info" : step === 2 ? "Review" : "Payment"}</span>
                    </div>
                  ))}
                  <div className="absolute top-5 left-0 right-0 h-0.5 bg-gray-700">
                    <div
                      className="h-full bg-aqua transition-all duration-500"
                      style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            )}

<AnimatePresence mode="wait">
              <motion.div
                key={currentStep}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.3 }}
              >
                {/* Step 1: Personal Information */}
                {currentStep === 1 && (
                  <div className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-gray-300 mb-2 text-sm">First Name*</label>
                        <input
                          type="text"
                          name="firstName"
                          value={formData.firstName}
                          onChange={handleInputChange}
                          className={`w-full bg-dark-blue/50 border ${errors.firstName ? "border-red-500" : "border-gray-700"} rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                        />
                        {errors.firstName && <p className="text-red-500 text-xs mt-1">{errors.firstName}</p>}
                      </div>

<div>
                        <label className="block text-gray-300 mb-2 text-sm">Last Name*</label>
                        <input
                          type="text"
                          name="lastName"
                          value={formData.lastName}
                          onChange={handleInputChange}
                          className={`w-full bg-dark-blue/50 border ${errors.lastName ? "border-red-500" : "border-gray-700"} rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                        />
                        {errors.lastName && <p className="text-red-500 text-xs mt-1">{errors.lastName}</p>}
                      </div>

<div>
                        <label className="block text-gray-300 mb-2 text-sm">Email Address*</label>
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleInputChange}
                          className={`w-full bg-dark-blue/50 border ${errors.email ? "border-red-500" : "border-gray-700"} rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                        />
                        {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
                      </div>

<div>
                        <label className="block text-gray-300 mb-2 text-sm">Phone Number*</label>
                        <input
                          type="tel"
                          name="phone"
                          value={formData.phone}
                          onChange={handleInputChange}
                          className={`w-full bg-dark-blue/50 border ${errors.phone ? "border-red-500" : "border-gray-700"} rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-aqua`}
                        />
                        {errors.phone && <p className="text-red-500 text-xs mt-1">{errors.phone}</p>}
                      </div>
                    </div>

<div className="mt-6">
                      <label className="flex items-start">
                        <input
                          type="checkbox"
                          name="agreeTerms"
                          checked={formData.agreeTerms}
                          onChange={handleInputChange}
                          className="mt-1 mr-2"
                        />
                        <span className="text-gray-300 text-sm">
                          I agree to the{" "}
                          <a href="#" className="text-aqua hover:underline">
                            Terms and Conditions
                          </a>{" "}
                          and{" "}
                          <a href="#" className="text-aqua hover:underline">
                            Privacy Policy
                          </a>
                        </span>
                      </label>
                      {errors.agreeTerms && <p className="text-red-500 text-xs mt-1">{errors.agreeTerms}</p>}
                    </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                      <div className="flex items-center mb-2">
                        <Shield className="w-5 h-5 text-aqua mr-2" />
                        <h3 className="font-medium text-white">Data Protection</h3>
                      </div>
                      <p className="text-sm text-gray-300">
                        Your personal information is securely encrypted and will only be used to process your eSIM
                        order. We do not share your data with third parties.
                      </p>
                    </div>
                  </div>
                )}

{/* Step 2: Review Order */}
                {currentStep === 2 && (
                  <div className="space-y-6">
                    <div className="bg-dark-blue/50 rounded-lg p-6 border border-gray-700">
                      <div className="flex items-center mb-4">
                        <div className="bg-dark-blue/70 p-3 rounded-lg mr-3">
                          <Image
                            src={provider.logo || "/placeholder.svg"}
                            alt={provider.name}
                            width={60}
                            height={60}
                            className="rounded"
                          />
                        </div>
                        <div>
                          <h3 className="text-xl font-semibold text-white">{provider.name}</h3>
                          <p className="text-gray-400">{plan.name}</p>
                        </div>
                      </div>

<div className="flex justify-between pb-2 border-b border-gray-700">
                          <span className="text-gray-300">Validity:</span>
                          <span className="text-white font-medium">{plan.validity}</span>
                        </div>

<div className="flex justify-between pb-2 border-b border-gray-700">
                          <span className="text-gray-300">Features:</span>
                          <div className="text-right">
                            {plan.features.map((feature, index) => (
                              <div key={index} className="text-white font-medium">
                                {feature}
                              </div>
                            ))}
                          </div>
                        </div>

<div className="flex justify-between pt-2">
                          <span className="text-white font-medium">Total:</span>
                          <span className="text-xl font-bold text-white">{formatPrice(plan.price)}</span>
                        </div>
                      </div>
                    </div>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700">
                      <h3 className="font-medium text-white mb-3">Customer Information</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <p className="text-gray-400 text-sm">Name:</p>
                          <p className="text-white">
                            {formData.firstName} {formData.lastName}
                          </p>
                        </div>
                        <div>
                          <p className="text-gray-400 text-sm">Email:</p>
                          <p className="text-white">{formData.email}</p>
                        </div>
                        <div>
                          <p className="text-gray-400 text-sm">Phone:</p>
                          <p className="text-white">{formData.phone}</p>
                        </div>
                      </div>
                    </div>

<div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 flex items-start">
                      <AlertCircle className="w-5 h-5 text-aqua mr-2 mt-1 flex-shrink-0" />
                      <div>
                        <p className="text-white font-medium mb-1">Important Information</p>
                        <p className="text-sm text-gray-300">
                          After completing your purchase, you will receive an email with your eSIM QR code and
                          activation instructions. Please ensure your email address is correct.
                        </p>
                      </div>
                    </div>
                  </div>
                )}

{/* Step 3: Payment */}
                {currentStep === 3 && !isComplete && (
                  <div className="space-y-6">
                    <div className="bg-dark-blue/50 rounded-lg p-6 border border-gray-700">
                      <h3 className="font-medium text-white mb-4">Payment Method</h3>

<div className="mb-6">
                        <p className="text-gray-300 mb-4">
                          Scan the QR code below with your Myanmar Pay app to complete your purchase.
                        </p>

<div className="text-center">
                        <p className="text-white font-medium mb-1">Total Amount</p>
                        <p className="text-2xl font-bold text-aqua mb-2">{formatPrice(plan.price)}</p>
                        <p className="text-sm text-gray-400">
                          Scan the QR code with your Myanmar Pay app and follow the instructions to complete payment
                        </p>
                      </div>
                    </div>

<div className="flex items-center justify-between p-4 bg-dark-blue/50 rounded-lg border border-gray-700">
                      <div className="flex items-center">
                        <Shield className="w-5 h-5 text-aqua mr-2" />
                        <span className="text-white">Secure Payment</span>
                      </div>
                      <div className="flex items-center">
                        <Image
                          src="/placeholder.svg?height=30&width=100&text=Myanmar+Pay"
                          alt="Myanmar Pay"
                          width={100}
                          height={30}
                        />
                      </div>
                    </div>

{isProcessing && (
                      <div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 flex items-center justify-center">
                        <Loader2 className="w-6 h-6 text-aqua animate-spin mr-2" />
                        <span className="text-white">Processing your payment...</span>
                      </div>
                    )}
                  </div>
                )}

{/* Order Complete */}
                {isComplete && (
                  <div className="text-center py-6">
                    <div className="w-20 h-20 bg-gradient-to-r from-aqua to-blue-400 rounded-full flex items-center justify-center mx-auto mb-6">
                      <Check className="w-10 h-10 text-dark-blue" />
                    </div>

<h3 className="text-2xl font-bold text-white mb-2">Purchase Successful!</h3>
                    <p className="text-gray-300 mb-6">
                      Your eSIM data plan has been purchased successfully. Check your email for activation instructions.
                    </p>

<div className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700 inline-block mb-6">
                      <p className="text-gray-400 text-sm">Order Number</p>
                      <p className="text-xl font-bold text-white">ESIM-{Math.floor(100000 + Math.random() * 900000)}</p>
                    </div>

<div className="space-y-4 mb-8">
                      <div className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-lg p-4 border border-aqua/20 text-left">
                        <div className="flex items-center mb-2">
                          <Smartphone className="w-5 h-5 text-aqua mr-2" />
                          <h4 className="font-medium text-white">Next Steps</h4>
                        </div>
                        <ol className="space-y-2 text-sm text-gray-300">
                          <li className="flex items-start">
                            <span className="bg-aqua/20 text-aqua w-5 h-5 rounded-full flex items-center justify-center mr-2 flex-shrink-0 text-xs">
                              1
                            </span>
                            <span>Check your email for the eSIM QR code</span>
                          </li>
                          <li className="flex items-start">
                            <span className="bg-aqua/20 text-aqua w-5 h-5 rounded-full flex items-center justify-center mr-2 flex-shrink-0 text-xs">
                              2
                            </span>
                            <span>Open your phone's settings and scan the QR code</span>
                          </li>
                          <li className="flex items-start">
                            <span className="bg-aqua/20 text-aqua w-5 h-5 rounded-full flex items-center justify-center mr-2 flex-shrink-0 text-xs">
                              3
                            </span>
                            <span>Follow the on-screen instructions to activate your eSIM</span>
                          </li>
                        </ol>
                      </div>
                    </div>

<button
                      onClick={onClose}
                      className="bg-gradient-to-r from-aqua to-blue-400 text-dark-blue px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-colors"
                    >
                      Close
                    </button>
                  </div>
                )}
              </motion.div>
            </AnimatePresence>

{/* Navigation Buttons */}
            {!isComplete && (
              <div className="flex justify-between mt-8">
                {currentStep > 1 ? (
                  <button
                    onClick={handlePreviousStep}
                    disabled={isProcessing}
                    className="bg-dark-blue/50 text-white border border-gray-700 hover:border-aqua/30 px-6 py-3 rounded-lg transition-colors disabled:opacity-50"
                  >
                    Previous
                  </button>
                ) : (
                  <div></div> // Empty div to maintain flex spacing
                )}

<button
                  onClick={handleNextStep}
                  disabled={isProcessing}
                  className={`px-6 py-3 rounded-lg transition-colors ${
                    isProcessing
                      ? "bg-aqua/50 text-dark-blue cursor-not-allowed"
                      : "bg-gradient-to-r from-aqua to-blue-400 text-dark-blue hover:opacity-90"
                  }`}
                >
                  {isProcessing ? (
                    <>
                      <Loader2 className="w-5 h-5 animate-spin mr-2 inline-block" />
                      Processing...
                    </>
                  ) : currentStep === totalSteps ? (
                    "Complete Purchase"
                  ) : (
                    "Next"
                  )}
                </button>
              </div>
            )}
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="app/shop/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Globe, ShoppingCart, Search, ChevronDown } from "lucide-react"
import ESIMCard from "@/components/ESIMCard"
import AIRecommendation from "@/components/AIRecommendation"
import ComparisonModal from "@/components/ComparisonModal"
import CartSidebar from "@/components/CartSidebar"
import LoadingSpinner from "@/components/LoadingSpinner"

// Simulated eSIM data (replace with actual data fetching in production)
const esimData = [
  {
    id: "mytel-tourist",
    provider: "MYTEL",
    name: "Tourist eSIM",
    data: "10GB",
    validity: "15 days",
    price: 15000,
    coverage: ["Yangon", "Mandalay", "Bagan"],
    features: ["4G/LTE", "Tethering allowed", "Auto-renewal option"],
  },
  {
    id: "atom-traveler",
    provider: "ATOM",
    name: "Traveler eSIM",
    data: "5GB",
    validity: "7 days",
    price: 10000,
    coverage: ["Yangon", "Mandalay", "Inle Lake"],
    features: ["5G where available", "Unlimited social media", "24/7 support"],
  },
  {
    id: "ooredoo-premium",
    provider: "OOREDOO",
    name: "Premium eSIM",
    data: "20GB",
    validity: "30 days",
    price: 25000,
    coverage: ["Nationwide"],
    features: ["5G network", "Unlimited calls within network", "Data rollover"],
  },
  {
    id: "mpt-basic",
    provider: "MPT",
    name: "Basic eSIM",
    data: "3GB",
    validity: "10 days",
    price: 8000,
    coverage: ["Major cities"],
    features: ["4G/LTE", "Affordable option", "Easy top-up"],
  },
]

export default function ShopPage() {
  const [isLoading, setIsLoading] = useState(true)
  const [selectedESIMs, setSelectedESIMs] = useState<string[]>([])
  const [showComparison, setShowComparison] = useState(false)
  const [showCart, setShowCart] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterProvider, setFilterProvider] = useState("All")
  const [sortOption, setSortOption] = useState("recommended")

useEffect(() => {
    // Simulate loading time
    const timer = setTimeout(() => setIsLoading(false), 1500)
    return () => clearTimeout(timer)
  }, [])

const handleESIMToggle = (esimId: string) => {
    setSelectedESIMs((prev) => (prev.includes(esimId) ? prev.filter((id) => id !== esimId) : [...prev, esimId]))
  }

const filteredESIMs = esimData
    .filter((esim) => esim.name.toLowerCase().includes(searchQuery.toLowerCase()))
    .filter((esim) => filterProvider === "All" || esim.provider === filterProvider)

const sortedESIMs = [...filteredESIMs].sort((a, b) => {
    if (sortOption === "price-low-high") return a.price - b.price
    if (sortOption === "price-high-low") return b.price - a.price
    if (sortOption === "data-high-low") return Number.parseInt(b.data) - Number.parseInt(a.data)
    return 0 // Default to recommended order
  })

return (
    <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background py-12">
      <div className="container mx-auto px-4">
        {/* Hero Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
            eSIM Myanmar Smart Shop
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Find the perfect eSIM for your stay in Myanmar with our AI-powered recommendations and easy comparison
            tools.
          </p>
        </motion.div>

{/* Search and Filters */}
        <div className="mb-8">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="relative flex-grow">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
              <input
                type="text"
                placeholder="Search eSIMs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-dark-blue/30 border border-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-aqua text-white"
              />
            </div>
            <div className="flex gap-4">
              <div className="relative">
                <select
                  value={filterProvider}
                  onChange={(e) => setFilterProvider(e.target.value)}
                  className="appearance-none bg-dark-blue/30 border border-gray-700 text-white rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-aqua"
                >
                  <option value="All">All Providers</option>
                  <option value="MYTEL">MYTEL</option>
                  <option value="ATOM">ATOM</option>
                  <option value="OOREDOO">OOREDOO</option>
                  <option value="MPT">MPT</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
              </div>
              <div className="relative">
                <select
                  value={sortOption}
                  onChange={(e) => setSortOption(e.target.value)}
                  className="appearance-none bg-dark-blue/30 border border-gray-700 text-white rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-aqua"
                >
                  <option value="recommended">Recommended</option>
                  <option value="price-low-high">Price: Low to High</option>
                  <option value="price-high-low">Price: High to Low</option>
                  <option value="data-high-low">Data: High to Low</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
              </div>
            </div>
          </div>
        </div>

{/* AI Recommendation */}
        <AIRecommendation />

{/* eSIM Grid */}
        {isLoading ? (
          <div className="flex justify-center items-center h-64">
            <LoadingSpinner />
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
            {sortedESIMs.map((esim) => (
              <ESIMCard
                key={esim.id}
                esim={esim}
                isSelected={selectedESIMs.includes(esim.id)}
                onToggleSelect={() => handleESIMToggle(esim.id)}
              />
            ))}
          </div>
        )}

{/* Comparison and Cart Buttons */}
        <div className="fixed bottom-4 right-4 flex flex-col space-y-4">
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-aqua text-dark-blue px-4 py-2 rounded-lg font-medium hover:bg-aqua/80 transition-colors flex items-center"
            onClick={() => setShowComparison(true)}
            disabled={selectedESIMs.length < 2}
          >
            <Globe className="w-5 h-5 mr-2" />
            Compare ({selectedESIMs.length})
          </motion.button>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-violet-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-violet-600 transition-colors flex items-center"
            onClick={() => setShowCart(true)}
          >
            <ShoppingCart className="w-5 h-5 mr-2" />
            View Cart
          </motion.button>
        </div>

{/* Comparison Modal */}
        <ComparisonModal
          isOpen={showComparison}
          onClose={() => setShowComparison(false)}
          selectedESIMs={selectedESIMs.map((id) => esimData.find((esim) => esim.id === id)!)}
        />

{/* Cart Sidebar */}
        <CartSidebar isOpen={showCart} onClose={() => setShowCart(false)} />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ESIMCard.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion } from "framer-motion"
import { Wifi, Globe, Clock, Check, Plus } from "lucide-react"

interface ESIMCardProps {
  esim: {
    id: string
    provider: string
    name: string
    data: string
    validity: string
    price: number
    coverage: string[]
    features: string[]
  }
  isSelected: boolean
  onToggleSelect: () => void
}

const ESIMCard: React.FC<ESIMCardProps> = ({ esim, isSelected, onToggleSelect }) => {
  return (
    <motion.div
      whileHover={{ y: -5 }}
      className={`bg-dark-blue/30 border ${
        isSelected ? "border-aqua" : "border-gray-700"
      } rounded-xl p-6 transition-all`}
    >
      <div className="flex justify-between items-start mb-4">
        <div>
          <h3 className="text-xl font-semibold text-white mb-1">{esim.name}</h3>
          <p className="text-aqua">{esim.provider}</p>
        </div>
        <button
          onClick={onToggleSelect}
          className={`p-2 rounded-full ${
            isSelected ? "bg-aqua text-dark-blue" : "bg-dark-blue/50 text-aqua hover:bg-dark-blue/70"
          } transition-colors`}
        >
          {isSelected ? <Check className="w-5 h-5" /> : <Plus className="w-5 h-5" />}
        </button>
      </div>

<div className="space-y-3 mb-4">
        <div className="flex items-center">
          <Wifi className="w-5 h-5 text-aqua mr-2" />
          <span className="text-white">{esim.data} Data</span>
        </div>
        <div className="flex items-center">
          <Clock className="w-5 h-5 text-aqua mr-2" />
          <span className="text-white">{esim.validity} Validity</span>
        </div>
        <div className="flex items-center">
          <Globe className="w-5 h-5 text-aqua mr-2" />
          <span className="text-white">{esim.coverage.join(", ")}</span>
        </div>
      </div>

<ul className="text-sm text-gray-300 mb-4">
        {esim.features.map((feature, index) => (
          <li key={index} className="flex items-center">
            <Check className="w-4 h-4 text-aqua mr-2" />
            {feature}
          </li>
        ))}
      </ul>

<div className="flex justify-between items-center">
        <span className="text-2xl font-bold text-white">{esim.price.toLocaleString()} MMK</span>
        <button className="bg-aqua/20 hover:bg-aqua/30 text-aqua px-4 py-2 rounded-lg transition-colors">
          Add to Cart
        </button>
      </div>
    </motion.div>
  )
}

export default ESIMCard

[V0_FILE]typescriptreact:file="components/AIRecommendation.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sparkles, ChevronDown, ChevronUp } from "lucide-react"

const AIRecommendation = () => {
  const [isExpanded, setIsExpanded] = useState(false)

return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-xl p-6 border border-aqua/20 mb-8"
    >
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center">
          <Sparkles className="w-6 h-6 text-aqua mr-2" />
          <h2 className="text-xl font-semibold text-white">AI Recommendation</h2>
        </div>
        <button onClick={() => setIsExpanded(!isExpanded)} className="text-aqua hover:text-white transition-colors">
          {isExpanded ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
        </button>
      </div>

<p className="text-gray-300 mb-4">
        Based on your browsing history and typical tourist usage patterns, we recommend the following eSIM:
      </p>

<div className="bg-dark-blue/30 rounded-lg p-4 border border-aqua/30">
        <h3 className="text-lg font-medium text-white mb-2">MYTEL Tourist eSIM</h3>
        <p className="text-gray-300 mb-2">
          This plan offers the best balance of data, coverage, and price for most tourists visiting Myanmar.
        </p>
        <ul className="text-sm text-gray-300 mb-4">
          <li>• 10GB of high-speed data</li>
          <li>• 15 days validity</li>
          <li>• Coverage in major tourist destinations</li>
          <li>• 24/7 English customer support</li>
        </ul>
        <button className="bg-aqua text-dark-blue px-4 py-2 rounded-lg font-medium hover:bg-aqua/80 transition-colors">
          View Details
        </button>
      </div>

{isExpanded && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ duration: 0.3 }}
          className="mt-4"
        >
          <h3 className="text-lg font-medium text-white mb-2">Why we recommend this:</h3>
          <ul className="text-sm text-gray-300 list-disc list-inside">
            <li>Covers the average stay duration of most tourists (10-14 days)</li>
            <li>Provides ample data for social media, navigation, and video calls</li>
            <li>Offers reliable coverage in popular tourist areas</li>
            <li>Competitive pricing compared to other tourist-oriented plans</li>
          </ul>
        </motion.div>
      )}
    </motion.div>
  )
}

export default AIRecommendation

[V0_FILE]typescriptreact:file="components/ComparisonModal.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion, AnimatePresence } from "framer-motion"
import { X, Check } from "lucide-react"

interface ComparisonModalProps {
  isOpen: boolean
  onClose: () => void
  selectedESIMs: {
    id: string
    provider: string
    name: string
    data: string
    validity: string
    price: number
    coverage: string[]
    features: string[]
  }[]
}

const ComparisonModal: React.FC<ComparisonModalProps> = ({ isOpen, onClose, selectedESIMs }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4"
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            className="bg-dark-blue/90 rounded-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto"
          >
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-white">eSIM Comparison</h2>
              <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
                <X className="w-6 h-6" />
              </button>
            </div>

<div className="overflow-x-auto">
              <table className="w-full text-left">
                <thead>
                  <tr className="border-b border-gray-700">
                    <th className="py-2 px-4 text-aqua">Feature</th>
                    {selectedESIMs.map((esim) => (
                      <th key={esim.id} className="py-2 px-4 text-aqua">
                        {esim.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-gray-700">
                    <td className="py-2 px-4 text-white">Provider</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        {esim.provider}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b border-gray-700">
                    <td className="py-2 px-4 text-white">Data</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        {esim.data}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b border-gray-700">
                    <td className="py-2 px-4 text-white">Validity</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        {esim.validity}
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b border-gray-700">
                    <td className="py-2 px-4 text-white">Price</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        {esim.price.toLocaleString()} MMK
                      </td>
                    ))}
                  </tr>
                  <tr className="border-b border-gray-700">
                    <td className="py-2 px-4 text-white">Coverage</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        {esim.coverage.join(", ")}
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="py-2 px-4 text-white">Features</td>
                    {selectedESIMs.map((esim) => (
                      <td key={esim.id} className="py-2 px-4 text-gray-300">
                        <ul>
                          {esim.features.map((feature, index) => (
                            <li key={index} className="flex items-center mb-1">
                              <Check className="w-4 h-4 text-aqua mr-2" />
                              {feature}
                            </li>
                          ))}
                        </ul>
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>

<div className="mt-6 flex justify-end">
              <button
                onClick={onClose}
                className="bg-aqua text-dark-blue px-4 py-2 rounded-lg font-medium hover:bg-aqua/80 transition-colors"
              >
                Close Comparison
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

export default ComparisonModal

[V0_FILE]typescriptreact:file="components/CartSidebar.tsx" isMerged="true"
"use client"

import type React from "react"

import { motion, AnimatePresence } from "framer-motion"
import { X, ShoppingCart, Trash2 } from "lucide-react"

interface CartSidebarProps {
  isOpen: boolean
  onClose: () => void
}

const CartSidebar: React.FC<CartSidebarProps> = ({ isOpen, onClose }) => {
  // Simulated cart items (replace with actual cart management logic)
  const cartItems = [
    { id: 1, name: "MYTEL Tourist eSIM", price: 15000, quantity: 1 },
    { id: 2, name: "ATOM Traveler eSIM", price: 10000, quantity: 1 },
  ]

const total = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)

return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50"
          onClick={onClose}
        >
          <motion.div
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={{ type: "tween", duration: 0.3 }}
            className="fixed top-0 right-0 h-full w-full max-w-md bg-dark-blue/90 shadow-lg p-6 overflow-y-auto"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-white flex items-center">
                <ShoppingCart className="w-6 h-6 mr-2" />
                Your Cart
              </h2>
              <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors">
                <X className="w-6 h-6" />
              </button>
            </div>

{cartItems.length === 0 ? (
              <p className="text-gray-300">Your cart is empty.</p>
            ) : (
              <>
                <ul className="space-y-4 mb-6">
                  {cartItems.map((item) => (
                    <li key={item.id} className="flex justify-between items-center bg-dark-blue/50 p-4 rounded-lg">
                      <div>
                        <h3 className="text-white font-medium">{item.name}</h3>
                        <p className="text-gray-300">{item.price.toLocaleString()} MMK</p>
                      </div>
                      <div className="flex items-center">
                        <button className="text-gray-400 hover:text-white transition-colors">
                          <Trash2 className="w-5 h-5" />
                        </button>
                      </div>
                    </li>
                  ))}
                </ul>

<div className="border-t border-gray-700 pt-4 mb-6">
                  <div className="flex justify-between items-center mb-4">
                    <span className="text-white font-medium">Total:</span>
                    <span className="text-2xl font-bold text-aqua">{total.toLocaleString()} MMK</span>
                  </div>
                  <button className="w-full bg-aqua text-dark-blue py-3 rounded-lg font-medium hover:bg-aqua/80 transition-colors">
                    Proceed to Checkout
                  </button>
                </div>
              </>
            )}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

export default CartSidebar

[V0_FILE]typescriptreact:file="components/ESIMGuide.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronDown, ChevronUp } from "lucide-react"

const faqItems = [
  {
    question: "What is an eSIM?",
    answer:
      "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 remotely.",
  },
  {
    question: "How do I activate my eSIM?",
    answer:
      "To activate your eSIM, go to your device settings, select 'Add Cellular Plan' or 'Add Mobile Plan', and then scan the QR code provided in your eSIM purchase confirmation email.",
  },
  {
    question: "Can I use multiple eSIMs on one device?",
    answer:
      "Yes, most modern devices support multiple eSIM profiles. However, you can usually only use one eSIM at a time, in addition to a physical SIM card if your device has a SIM slot.",
  },
  {
    question: "What if I change or upgrade my device?",
    answer:
      "When you change devices, you'll need to transfer your eSIM profile to the new device. This usually involves deactivating the eSIM on your old device and activating it on the new one using the original QR code.",
  },
]

const ESIMGuide: React.FC = () => {
  const [openItem, setOpenItem] = useState<number | null>(null)

const toggleItem = (index: number) => {
    setOpenItem(openItem === index ? null : index)
  }

return (
    <div className="space-y-4">
      {faqItems.map((item, index) => (
        <motion.div
          key={index}
          initial={false}
          animate={{ backgroundColor: openItem === index ? "rgba(56, 189, 248, 0.1)" : "rgba(17, 24, 39, 0.5)" }}
          className="border border-gray-700 rounded-lg overflow-hidden"
        >
          <button className="w-full text-left p-4 flex justify-between items-center" onClick={() => toggleItem(index)}>
            <span className="font-medium text-white">{item.question}</span>
            {openItem === index ? (
              <ChevronUp className="w-5 h-5 text-aqua" />
            ) : (
              <ChevronDown className="w-5 h-5 text-aqua" />
            )}
          </button>
          <AnimatePresence>
            {openItem === index && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ duration: 0.3 }}
                className="p-4 bg-dark-blue/30 border-t border-gray-700"
              >
                <p className="text-gray-300">{item.answer}</p>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      ))}
    </div>
  )
}

export default ESIMGuide

[V0_FILE]typescriptreact:file="components/AISupport.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Send } from "lucide-react"

const AISupport: React.FC = () => {
  const [query, setQuery] = useState("")
  const [response, setResponse] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!query.trim()) return

setIsLoading(true)
    setResponse(null)

// Simulate AI response
    setTimeout(() => {
      const mockResponse =
        "Thank you for your question. eSIMs are digital SIM cards that allow you to activate a cellular plan without using a physical SIM card. They're convenient for travelers and can be easily switched between different plans. If you need more specific information, please let me know!"
      setResponse(mockResponse)
      setIsLoading(false)
    }, 1500)

setQuery("")
  }

return (
    <div>
      <form onSubmit={handleSubmit} className="mb-4">
        <div className="flex">
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Ask anything about eSIMs..."
            className="flex-grow bg-dark-blue/50 border border-gray-700 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-aqua text-white"
          />
          <button
            type="submit"
            className="bg-aqua text-dark-blue px-4 py-2 rounded-r-lg hover:bg-aqua/80 transition-colors flex items-center"
            disabled={isLoading}
          >
            {isLoading ? "Thinking..." : <Send className="w-5 h-5" />}
          </button>
        </div>
      </form>

{isLoading && (
        <div className="text-center text-gray-400">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-aqua"></div>
        </div>
      )}

{response && (
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="bg-dark-blue/30 border border-gray-700 rounded-lg p-4"
        >
          <p className="text-white">{response}</p>
        </motion.div>
      )}
    </div>
  )
}

export default AISupport

[V0_FILE]typescriptreact:file="components/ErrorBoundary.tsx" isEdit="true" isMerged="true"
"use client"

import { Component, type ErrorInfo, type ReactNode } from "react"
import { AlertTriangle, RefreshCw } from "lucide-react"
import { createErrorInfo, logError, ErrorType, ErrorSeverity } from "@/lib/error-handling"

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
  errorInfo: ErrorInfo | null
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
    error: null,
    errorInfo: null,
  }

public static getDerivedStateFromError(error: Error): State {
    // Update state so the next render will show the fallback UI
    return { hasError: true, error, errorInfo: null }
  }

public componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // Log the error to an error reporting service
    const errorData = createErrorInfo(
      error.message,
      ErrorType.CLIENT,
      ErrorSeverity.ERROR,
      { componentStack: errorInfo.componentStack },
      error,
    )

logError(errorData)
  }

private handleReset = (): void => {
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null,
    })
  }

public render(): ReactNode {
    if (this.state.hasError) {
      // Custom fallback UI
      if (this.props.fallback) {
        return this.props.fallback
      }

// Default fallback UI
      return (
        <div className="p-6 bg-dark-blue/30 border border-red-500/30 rounded-lg text-white">
          <div className="flex items-center mb-4">
            <AlertTriangle className="w-6 h-6 text-red-400 mr-2" />
            <h2 className="text-xl font-semibold text-red-400">Something went wrong</h2>
          </div>

<p className="mb-4 text-gray-300">
            We encountered an error while rendering this component. Please try refreshing the page.
          </p>

{this.state.error && (
            <div className="mb-4 p-3 bg-dark-blue/50 rounded border border-red-500/20 overflow-auto">
              <p className="text-red-400 font-mono text-sm">{this.state.error.toString()}</p>
            </div>
          )}

<button
            onClick={this.handleReset}
            className="flex items-center px-4 py-2 bg-aqua/20 hover:bg-aqua/30 text-aqua rounded-lg transition-colors"
          >
            <RefreshCw className="w-4 h-4 mr-2" />
            Try Again
          </button>
        </div>
      )
    }

// Render children if there's no error
    return this.props.children
  }
}

export default ErrorBoundary

[V0_FILE]typescriptreact:file="components/OrderHistory.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { AlertTriangle } from "lucide-react"
import { logError } from "@/utils/errorLogging"

interface Order {
  id: string
  date: string
  status: string
  plan: string
}

interface OrderHistoryProps {
  userId: string | null
}

const OrderHistory: React.FC<OrderHistoryProps> = ({ userId }) => {
  const [orders, setOrders] = useState<Order[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchOrderHistory = async () => {
      try {
        // Simulate API call
        await new Promise((resolve) => setTimeout(resolve, 1000))
        const mockOrders: Order[] = [
          { id: "ORD001", date: "2023-05-01", status: "Active", plan: "Tourist 7-Day" },
          { id: "ORD002", date: "2023-05-15", status: "Expired", plan: "Local 30-Day" },
          { id: "ORD003", date: "2023-06-01", status: "Pending", plan: "Data Only 15-Day" },
        ]
        setOrders(mockOrders)
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "Failed to fetch order history"
        setError(errorMessage)
        logError("Order history fetch failed", errorMessage)
      } finally {
        setIsLoading(false)
      }
    }

fetchOrderHistory()
  }, [])

if (isLoading) {
    return <div className="text-center text-gray-400">Loading order history...</div>
  }

if (error) {
    return (
      <div className="bg-red-500/20 text-red-400 p-4 rounded-lg flex items-center">
        <AlertTriangle className="w-6 h-6 mr-2" />
        <span>Error: {error}</span>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {orders.map((order, index) => (
        <motion.div
          key={order.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: index * 0.1 }}
          className="bg-dark-blue/50 rounded-lg p-4 border border-gray-700"
        >
          <div className="flex justify-between items-center mb-2">
            <span className="text-aqua font-medium">{order.id}</span>
            <span className="text-sm text-gray-400">{order.date}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-white">{order.plan}</span>
            <span
              className={`px-2 py-1 rounded-full text-xs ${
                order.status === "Active"
                  ? "bg-green-500/20 text-green-400"
                  : order.status === "Expired"
                    ? "bg-red-500/20 text-red-400"
                    : "bg-yellow-500/20 text-yellow-400"
              }`}
            >
              {order.status}
            </span>
          </div>
        </motion.div>
      ))}
    </div>
  )
}

export default OrderHistory

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import ClientLayout from "./ClientLayout"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "AI-Powered eSIM Myanmar System",
  description: "Intelligent eSIM management and activation for Myanmar with advanced AI features",
  generator: "v0.dev",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <ClientLayout>{children}</ClientLayout>
}

[V0_FILE]typescriptreact:file="app/ClientLayout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
import AnimatedBackground from "@/components/AnimatedBackground"
import LiveChatAIPopup from "@/components/LiveChatAIPopup"
import AILoadingAnimation from "@/components/AILoadingAnimation"
import Link from "next/link"
import { ShoppingCart } from "lucide-react"
import { useNoCopy } from "@/hooks/useNoCopy"

const inter = Inter({ subsets: ["latin"] })

export default function ClientLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // Apply anti-copy protection
  useNoCopy()

return (
    <html lang="en">
      <body
        className={`${inter.className} flex flex-col min-h-screen bg-background text-foreground cyan-theme prevent-select`}
      >
        <AnimatedBackground />
        <Header />
        <main className="flex-grow relative">
          <React.Suspense fallback={<AILoadingAnimation />}>{children}</React.Suspense>
        </main>
        <Footer />
        <LiveChatAIPopup />
        <Link
          href="https://esm.mobi/"
          target="_blank"
          rel="noopener noreferrer"
          className="fixed bottom-4 left-4 bg-gradient-to-r from-aqua to-blue-400 text-dark-blue px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition-colors z-50 flex items-center"
        >
          <ShoppingCart className="mr-2" size={20} />
          eSIM Shop
        </Link>
      </body>
    </html>
  )
}

[V0_FILE]typescript:file="lib/vercel-data.ts" isMerged="true"
/**
 * Vercel Data Utilities
 *
 * This module provides utilities for working with Vercel-specific data storage
 * and edge functions for the eSIM Myanmar application.
 */

// Types for eSIM data
export interface ESIMData {
  id: string
  provider: string
  plan: string
  dataAmount: string
  validity: string
  price: number
  coverage: string[]
  activationCode?: string
  qrCode?: string
  purchaseDate?: string
  expiryDate?: string
  status?: "active" | "inactive" | "expired"
  dataUsed?: string
}

export interface UserESIMProfile {
  userId: string
  esims: ESIMData[]
  preferences: {
    defaultProvider?: string
    notifications: boolean
    dataAlerts: boolean
    dataThreshold: number
  }
}

// Mock data - would be replaced with actual Vercel KV or other data store in production
const MOCK_ESIM_DATA: ESIMData[] = [
  {
    id: "esim-001",
    provider: "Myanmar Telecom",
    plan: "Tourist Premium",
    dataAmount: "10GB",
    validity: "15 days",
    price: 15.99,
    coverage: ["Yangon", "Mandalay", "Bagan"],
    status: "active",
    dataUsed: "2.3GB",
    purchaseDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
    expiryDate: new Date(Date.now() + 12 * 24 * 60 * 60 * 1000).toISOString(),
  },
  {
    id: "esim-002",
    provider: "Myanmar Connect",
    plan: "Business",
    dataAmount: "20GB",
    validity: "30 days",
    price: 29.99,
    coverage: ["Nationwide"],
    status: "inactive",
  },
  {
    id: "esim-003",
    provider: "Myanmar Digital",
    plan: "Explorer",
    dataAmount: "5GB",
    validity: "7 days",
    price: 9.99,
    coverage: ["Yangon", "Mandalay", "Tourist Areas"],
    status: "expired",
    dataUsed: "5GB",
    purchaseDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
    expiryDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
  },
]

// Simulated Vercel KV operations
export async function getESIMData(): Promise<ESIMData[]> {
  // In production, this would use Vercel KV or other data store
  // Example: return await kv.get('esim-data') || [];
  return MOCK_ESIM_DATA
}

export async function getUserESIMProfile(userId: string): Promise<UserESIMProfile | null> {
  // In production, this would fetch from Vercel KV or other data store
  // Example: return await kv.get(`user-profile:${userId}`);
  return {
    userId,
    esims: MOCK_ESIM_DATA,
    preferences: {
      defaultProvider: "Myanmar Telecom",
      notifications: true,
      dataAlerts: true,
      dataThreshold: 80,
    },
  }
}

export async function saveESIMData(data: ESIMData): Promise<boolean> {
  // In production, this would save to Vercel KV or other data store
  // Example: await kv.set(`esim:${data.id}`, data);
  console.log("Saving eSIM data:", data)
  return true
}

export async function getNetworkStatus(): Promise<{
  status: string
  latency: number
  uptime: number
  lastUpdated: string
}> {
  // In production, this would fetch real network status data
  return {
    status: Math.random() > 0.1 ? "Operational" : "Degraded Performance",
    latency: Math.floor(Math.random() * 100) + 20,
    uptime: 99.95,
    lastUpdated: new Date().toISOString(),
  }
}

export async function getRealTimeStats(): Promise<{
  activeUsers: number
  networkStatus: string
  dataUsage: string
  timestamp: string
}> {
  return {
    activeUsers: Math.floor(Math.random() * 100) + 50,
    networkStatus: Math.random() > 0.2 ? "Excellent" : "Good",
    dataUsage: `${(Math.random() * 10).toFixed(2)}GB`,
    timestamp: new Date().toISOString(),
  }
}

[V0_FILE]typescript:file="app/api/esim-ai/real-time-data/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { createErrorInfo, logError, ErrorType, ErrorSeverity } from "@/lib/error-handling"

// Mock real-time data generator
function generateRealTimeData() {
  return {
    activeUsers: Math.floor(Math.random() * 100) + 50,
    networkStatus: Math.random() > 0.2 ? "Excellent" : "Good",
    dataUsage: `${(Math.random() * 10).toFixed(2)}GB`,
    timestamp: new Date().toISOString(),
  }
}

export async function GET() {
  try {
    // In production, this would fetch real data from a database or service
    // For now, we'll generate mock data
    const data = generateRealTimeData()

return NextResponse.json(data, {
      status: 200,
      headers: {
        // Add cache control headers to prevent caching
        "Cache-Control": "no-store, max-age=0",
        // Add CORS headers if needed
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET",
        "Access-Control-Allow-Headers": "Content-Type",
      },
    })
  } catch (error) {
    // Handle and log the error
    const errorInfo = createErrorInfo(
      "Failed to fetch real-time data",
      ErrorType.SERVER,
      ErrorSeverity.ERROR,
      { endpoint: "GET /api/esim-ai/real-time-data" },
      error instanceof Error ? error : undefined,
    )

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/esim-data/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { validateESIMData, type ESIMData } from "@/lib/data-validation"
import { ErrorType, ErrorSeverity, createErrorInfo, logError, retryWithBackoff } from "@/lib/error-handling"

// Mock database for development
const mockESIMData: ESIMData[] = [
  {
    id: "esim-001",
    provider: "Myanmar Telecom",
    plan: "Tourist Premium",
    dataAmount: "10GB",
    validity: "15 days",
    price: 15.99,
    coverage: ["Yangon", "Mandalay", "Bagan"],
    status: "active",
    dataUsed: "2.3GB",
    purchaseDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
    expiryDate: new Date(Date.now() + 12 * 24 * 60 * 60 * 1000).toISOString(),
  },
  {
    id: "esim-002",
    provider: "Myanmar Connect",
    plan: "Business",
    dataAmount: "20GB",
    validity: "30 days",
    price: 29.99,
    coverage: ["Nationwide"],
    status: "inactive",
  },
  {
    id: "esim-003",
    provider: "Myanmar Digital",
    plan: "Explorer",
    dataAmount: "5GB",
    validity: "7 days",
    price: 9.99,
    coverage: ["Yangon", "Mandalay", "Tourist Areas"],
    status: "expired",
    dataUsed: "5GB",
    purchaseDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
    expiryDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
  },
]

// Simulated database operations
async function getESIMDataFromDB(): Promise<ESIMData[]> {
  // In production, this would fetch from a real database
  // Simulate potential network delay
  await new Promise((resolve) => setTimeout(resolve, 100))
  return [...mockESIMData]
}

async function saveESIMDataToDB(data: ESIMData): Promise<boolean> {
  // In production, this would save to a real database
  // Simulate potential network delay
  await new Promise((resolve) => setTimeout(resolve, 200))

// Find and update existing item or add new one
  const index = mockESIMData.findIndex((item) => item.id === data.id)
  if (index >= 0) {
    mockESIMData[index] = data
  } else {
    mockESIMData.push(data)
  }

return true
}

export async function GET(request: Request) {
  try {
    // Get query parameters
    const { searchParams } = new URL(request.url)
    const id = searchParams.get("id")
    const provider = searchParams.get("provider")

// Fetch data with retry logic
    const data = await retryWithBackoff(getESIMDataFromDB, 3, 300, { endpoint: "GET /api/esim-data", id, provider })

// Filter data if needed
    let filteredData = data
    if (id) {
      filteredData = filteredData.filter((item) => item.id === id)
    }
    if (provider) {
      filteredData = filteredData.filter((item) => item.provider === provider)
    }

// Validate each item in the filtered data
    const validatedData = filteredData.filter((item) => {
      if (!validateESIMData(item)) {
        logError(
          createErrorInfo(`Invalid eSIM data found: ${item.id}`, ErrorType.DATA, ErrorSeverity.WARNING, { item }),
        )
        return false
      }
      return true
    })

return NextResponse.json(validatedData, { status: 200 })
  } catch (error) {
    // Handle and log the error
    const errorInfo = createErrorInfo(
      "Failed to fetch eSIM data",
      ErrorType.SERVER,
      ErrorSeverity.ERROR,
      { endpoint: "GET /api/esim-data" },
      error instanceof Error ? error : undefined,
    )

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    // Parse and validate the request body
    const body = await request.json()

if (!validateESIMData(body)) {
      const errorInfo = createErrorInfo("Invalid eSIM data provided", ErrorType.VALIDATION, ErrorSeverity.WARNING, {
        body,
      })

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 400 })
    }

// Save data with retry logic
    const success = await retryWithBackoff(() => saveESIMDataToDB(body), 3, 300, {
      endpoint: "POST /api/esim-data",
      id: body.id,
    })

if (success) {
      return NextResponse.json({ success: true, id: body.id }, { status: 201 })
    } else {
      const errorInfo = createErrorInfo("Failed to save eSIM data", ErrorType.SERVER, ErrorSeverity.ERROR, {
        endpoint: "POST /api/esim-data",
        id: body.id,
      })

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 500 })
    }
  } catch (error) {
    // Handle and log the error
    const errorInfo = createErrorInfo(
      "Failed to process eSIM data request",
      ErrorType.SERVER,
      ErrorSeverity.ERROR,
      { endpoint: "POST /api/esim-data" },
      error instanceof Error ? error : undefined,
    )

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/user-profile/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getUserESIMProfile } from "@/lib/vercel-data"

export async function GET(request: Request) {
  try {
    // In a real app, you would get the user ID from authentication
    // For now, we'll use a query parameter
    const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId") || "default-user"

const profile = await getUserESIMProfile(userId)

if (!profile) {
      return NextResponse.json({ error: "User profile not found" }, { status: 404 })
    }

return NextResponse.json(profile, { status: 200 })
  } catch (error) {
    console.error("Error fetching user profile:", error)
    return NextResponse.json({ error: "Failed to fetch user profile" }, { status: 500 })
  }
}

[V0_FILE]typescript:file="app/api/network-status/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { createErrorInfo, logError, ErrorType, ErrorSeverity } from "@/lib/error-handling"

// Mock network status generator
function generateNetworkStatus() {
  return {
    status: Math.random() > 0.1 ? "Operational" : "Degraded Performance",
    latency: Math.floor(Math.random() * 100) + 20,
    uptime: 99.95,
    lastUpdated: new Date().toISOString(),
  }
}

export async function GET() {
  try {
    // In production, this would fetch real network status data
    // For now, we'll generate mock data
    const status = generateNetworkStatus()

return NextResponse.json(status, {
      status: 200,
      headers: {
        // Add cache control headers to prevent caching
        "Cache-Control": "no-store, max-age=0",
      },
    })
  } catch (error) {
    // Handle and log the error
    const errorInfo = createErrorInfo(
      "Failed to fetch network status",
      ErrorType.SERVER,
      ErrorSeverity.ERROR,
      { endpoint: "GET /api/network-status" },
      error instanceof Error ? error : undefined,
    )

logError(errorInfo)

return NextResponse.json({ error: errorInfo.message, code: errorInfo.code }, { status: 500 })
  }
}

[V0_FILE]typescript:file="lib/error-handling.ts" isMerged="true"
/**
 * Error Handling Utilities
 *
 * This module provides utilities for consistent error handling,
 * logging, and recovery throughout the eSIM Myanmar application.
 */

// Error types for better categorization
export enum ErrorType {
  NETWORK = "network",
  DATA = "data",
  VALIDATION = "validation",
  AUTHENTICATION = "authentication",
  AUTHORIZATION = "authorization",
  SERVER = "server",
  CLIENT = "client",
  UNKNOWN = "unknown",
}

// Error severity levels
export enum ErrorSeverity {
  INFO = "info",
  WARNING = "warning",
  ERROR = "error",
  CRITICAL = "critical",
}

// Interface for structured error information
export interface ErrorInfo {
  type: ErrorType
  severity: ErrorSeverity
  message: string
  code?: string
  timestamp: string
  context?: Record<string, any>
  originalError?: Error
}

// Create a structured error object
export function createErrorInfo(
  message: string,
  type: ErrorType = ErrorType.UNKNOWN,
  severity: ErrorSeverity = ErrorSeverity.ERROR,
  context?: Record<string, any>,
  originalError?: Error,
  code?: string,
): ErrorInfo {
  return {
    type,
    severity,
    message,
    code,
    timestamp: new Date().toISOString(),
    context,
    originalError,
  }
}

// Log error to console and potentially to a monitoring service
export function logError(errorInfo: ErrorInfo): void {
  // In production, this would send to a logging service like Vercel Logs
  console.error(`[${errorInfo.severity.toUpperCase()}][${errorInfo.type}] ${errorInfo.message}`, {
    code: errorInfo.code,
    timestamp: errorInfo.timestamp,
    context: errorInfo.context,
  })

// If we have the original error, log its stack trace
  if (errorInfo.originalError) {
    console.error(errorInfo.originalError)
  }

// For critical errors, we might want to notify developers immediately
  if (errorInfo.severity === ErrorSeverity.CRITICAL) {
    // In production, this would send an alert via email, Slack, etc.
    console.error("CRITICAL ERROR - IMMEDIATE ATTENTION REQUIRED")
  }
}

// Handle API response errors
export function handleApiError(error: unknown, context?: Record<string, any>): ErrorInfo {
  if (error instanceof Response) {
    return createErrorInfo(
      `API error: ${error.statusText}`,
      ErrorType.NETWORK,
      error.status >= 500 ? ErrorSeverity.ERROR : ErrorSeverity.WARNING,
      { ...context, status: error.status },
      undefined,
      `HTTP_${error.status}`,
    )
  }

if (error instanceof Error) {
    // Network errors
    if (error.name === "NetworkError" || error.message.includes("network")) {
      return createErrorInfo(
        "Network connection error",
        ErrorType.NETWORK,
        ErrorSeverity.WARNING,
        context,
        error,
        "NETWORK_ERROR",
      )
    }

// Timeout errors
    if (error.name === "TimeoutError" || error.message.includes("timeout")) {
      return createErrorInfo(
        "Request timed out",
        ErrorType.NETWORK,
        ErrorSeverity.WARNING,
        context,
        error,
        "TIMEOUT_ERROR",
      )
    }

// Generic error with the original error object
    return createErrorInfo(error.message, ErrorType.UNKNOWN, ErrorSeverity.ERROR, context, error)
  }

// Unknown error type
  return createErrorInfo("An unknown error occurred", ErrorType.UNKNOWN, ErrorSeverity.ERROR, context)
}

// Data validation utility
export function validateData<T>(data: T, validator: (data: T) => boolean, errorMessage = "Data validation failed"): T {
  if (!validator(data)) {
    const error = createErrorInfo(errorMessage, ErrorType.VALIDATION, ErrorSeverity.WARNING)
    logError(error)
    throw new Error(errorMessage)
  }
  return data
}

// Retry a function with exponential backoff
export async function retryWithBackoff<T>(
  fn: () => Promise<T>,
  maxRetries = 3,
  initialDelay = 300,
  context?: Record<string, any>,
): Promise<T> {
  let retries = 0
  let delay = initialDelay

while (true) {
    try {
      return await fn()
    } catch (error) {
      retries++

if (retries >= maxRetries) {
        const errorInfo = handleApiError(error, {
          ...context,
          retries,
          maxRetries,
        })
        logError(errorInfo)
        throw error
      }

// Log the retry attempt
      console.warn(`Retry attempt ${retries}/${maxRetries} after ${delay}ms`)

// Wait for the delay period
      await new Promise((resolve) => setTimeout(resolve, delay))

// Exponential backoff with jitter
      delay = delay * 2 + Math.random() * 100
    }
  }
}

[V0_FILE]typescript:file="lib/data-validation.ts" isMerged="true"
/**
 * Data Validation Utilities
 *
 * This module provides utilities for validating data structures
 * throughout the eSIM Myanmar application.
 */

import { ErrorType, ErrorSeverity, createErrorInfo, logError } from "./error-handling"

// Basic validation functions
export const isString = (value: any): value is string => typeof value === "string"
export const isNumber = (value: any): value is number => typeof value === "number" && !isNaN(value)
export const isBoolean = (value: any): value is boolean => typeof value === "boolean"
export const isObject = (value: any): value is object =>
  typeof value === "object" && value !== null && !Array.isArray(value)
export const isArray = (value: any): value is any[] => Array.isArray(value)
export const isDate = (value: any): value is Date => value instanceof Date && !isNaN(value.getTime())
export const isISODateString = (value: any): boolean => {
  if (!isString(value)) return false
  const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,3})?Z$/
  return isoDateRegex.test(value)
}

// Email validation
export const isValidEmail = (email: string): boolean => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return emailRegex.test(email)
}

// Phone number validation (basic international format)
export const isValidPhoneNumber = (phone: string): boolean => {
  const phoneRegex = /^\+?[0-9]{10,15}$/
  return phoneRegex.test(phone)
}

// URL validation
export const isValidUrl = (url: string): boolean => {
  try {
    new URL(url)
    return true
  } catch {
    return false
  }
}

// eSIM specific validations
export const isValidESIMProvider = (provider: string): boolean => {
  const validProviders = ["Myanmar Telecom", "Myanmar Connect", "Myanmar Digital", "MPT", "Ooredoo", "Telenor", "Mytel"]
  return validProviders.includes(provider)
}

export const isValidDataAmount = (amount: string): boolean => {
  const dataAmountRegex = /^(\d+(\.\d+)?)(MB|GB|TB)$/i
  return dataAmountRegex.test(amount)
}

export const isValidValidity = (validity: string): boolean => {
  const validityRegex = /^(\d+) (day|days|week|weeks|month|months|year|years)$/i
  return validityRegex.test(validity)
}

// Validate eSIM data structure
export interface ESIMData {
  id: string
  provider: string
  plan: string
  dataAmount: string
  validity: string
  price: number
  coverage: string[]
  activationCode?: string
  qrCode?: string
  purchaseDate?: string
  expiryDate?: string
  status?: "active" | "inactive" | "expired"
  dataUsed?: string
}

export function validateESIMData(data: any): data is ESIMData {
  // Required fields
  if (!isObject(data)) return false
  if (!isString(data.id)) return false
  if (!isString(data.provider)) return false
  if (!isString(data.plan)) return false
  if (!isString(data.dataAmount)) return false
  if (!isString(data.validity)) return false
  if (!isNumber(data.price)) return false
  if (!isArray(data.coverage) || !data.coverage.every(isString)) return false

// Optional fields
  if (data.activationCode !== undefined && !isString(data.activationCode)) return false
  if (data.qrCode !== undefined && !isString(data.qrCode)) return false
  if (data.purchaseDate !== undefined && !isISODateString(data.purchaseDate)) return false
  if (data.expiryDate !== undefined && !isISODateString(data.expiryDate)) return false
  if (data.status !== undefined && !["active", "inactive", "expired"].includes(data.status)) return false
  if (data.dataUsed !== undefined && !isString(data.dataUsed)) return false

// Additional validations
  if (!isValidDataAmount(data.dataAmount)) {
    logError(
      createErrorInfo(`Invalid data amount format: ${data.dataAmount}`, ErrorType.VALIDATION, ErrorSeverity.WARNING),
    )
    return false
  }

if (!isValidValidity(data.validity)) {
    logError(createErrorInfo(`Invalid validity format: ${data.validity}`, ErrorType.VALIDATION, ErrorSeverity.WARNING))
    return false
  }

return true
}

// Validate user profile structure
export interface UserProfile {
  userId: string
  email?: string
  phone?: string
  name?: string
  preferences?: {
    defaultProvider?: string
    notifications: boolean
    dataAlerts: boolean
    dataThreshold: number
  }
}

export function validateUserProfile(data: any): data is UserProfile {
  // Required fields
  if (!isObject(data)) return false
  if (!isString(data.userId)) return false

// Optional fields
  if (data.email !== undefined && (!isString(data.email) || !isValidEmail(data.email))) return false
  if (data.phone !== undefined && (!isString(data.phone) || !isValidPhoneNumber(data.phone))) return false
  if (data.name !== undefined && !isString(data.name)) return false

// Preferences
  if (data.preferences !== undefined) {
    if (!isObject(data.preferences)) return false

const { defaultProvider, notifications, dataAlerts, dataThreshold } = data.preferences

if (defaultProvider !== undefined && !isString(defaultProvider)) return false
    if (notifications !== undefined && !isBoolean(notifications)) return false
    if (dataAlerts !== undefined && !isBoolean(dataAlerts)) return false
    if (dataThreshold !== undefined && (!isNumber(dataThreshold) || dataThreshold < 0 || dataThreshold > 100))
      return false
  }

return true
}

// Safe data parsing with validation
export function safeParseJSON<T>(json: string, validator: (data: any) => data is T, fallback: T): T {
  try {
    const parsed = JSON.parse(json)
    if (validator(parsed)) {
      return parsed
    } else {
      logError(createErrorInfo("JSON validation failed", ErrorType.VALIDATION, ErrorSeverity.WARNING, { json }))
      return fallback
    }
  } catch (error) {
    logError(
      createErrorInfo(
        "JSON parsing failed",
        ErrorType.DATA,
        ErrorSeverity.WARNING,
        { json },
        error instanceof Error ? error : undefined,
      ),
    )
    return fallback
  }
}

[V0_FILE]typescriptreact:file="components/DataErrorAlert.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { AlertTriangle, X, RefreshCw } from "lucide-react"

interface DataErrorAlertProps {
  title?: string
  message: string
  onRetry?: () => void
  onDismiss?: () => void
  showDismiss?: boolean
  severity?: "warning" | "error" | "critical"
}

export default function DataErrorAlert({
  title = "Data Error",
  message,
  onRetry,
  onDismiss,
  showDismiss = true,
  severity = "warning",
}: DataErrorAlertProps) {
  const [dismissed, setDismissed] = useState(false)

if (dismissed) return null

const handleDismiss = () => {
    setDismissed(true)
    if (onDismiss) onDismiss()
  }

// Determine styles based on severity
  const getSeverityStyles = () => {
    switch (severity) {
      case "critical":
        return {
          container: "bg-red-500/20 border-red-500/50",
          icon: "text-red-500",
          title: "text-red-400",
          message: "text-red-300",
        }
      case "error":
        return {
          container: "bg-red-500/10 border-red-500/30",
          icon: "text-red-400",
          title: "text-red-400",
          message: "text-gray-300",
        }
      case "warning":
      default:
        return {
          container: "bg-yellow-500/10 border-yellow-500/30",
          icon: "text-yellow-400",
          title: "text-yellow-400",
          message: "text-gray-300",
        }
    }
  }

const styles = getSeverityStyles()

return (
    <div className={`p-4 rounded-lg ${styles.container} mb-4`} role="alert">
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center">
          <AlertTriangle className={`w-5 h-5 ${styles.icon} mr-2`} />
          <h3 className={`font-medium ${styles.title}`}>{title}</h3>
        </div>

{showDismiss && (
          <button
            onClick={handleDismiss}
            className="text-gray-400 hover:text-gray-300 transition-colors"
            aria-label="Dismiss"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>

<p className={`text-sm ${styles.message}`}>{message}</p>

{onRetry && (
        <button
          onClick={onRetry}
          className="mt-2 text-xs flex items-center text-aqua hover:text-aqua/80 transition-colors"
        >
          <RefreshCw className="w-3 h-3 mr-1" /> Retry
        </button>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/useDataFetching.ts" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { createErrorInfo, logError, ErrorType, ErrorSeverity, retryWithBackoff } from "@/lib/error-handling"

interface FetchState<T> {
  data: T | null
  isLoading: boolean
  error: string | null
  lastUpdated: Date | null
}

interface FetchOptions {
  initialFetch?: boolean
  retryCount?: number
  retryDelay?: number
  refreshInterval?: number | null
  validateData?: (data: any) => boolean
}

export function useDataFetching<T>(
  url: string,
  options: FetchOptions = {},
): [FetchState<T>, () => Promise<void>, () => void] {
  const {
    initialFetch = true,
    retryCount = 3,
    retryDelay = 300,
    refreshInterval = null,
    validateData = () => true,
  } = options

const [state, setState] = useState<FetchState<T>>({
    data: null,
    isLoading: initialFetch,
    error: null,
    lastUpdated: null,
  })

const fetchData = useCallback(async () => {
    setState((prev) => ({ ...prev, isLoading: true, error: null }))

try {
      const fetchWithRetry = () =>
        fetch(url, { cache: "no-store" }).then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`)
          }
          return response.json()
        })

const data = await retryWithBackoff(fetchWithRetry, retryCount, retryDelay, { url })

// Validate the data
      if (!validateData(data)) {
        throw new Error("Data validation failed")
      }

setState({
        data,
        isLoading: false,
        error: null,
        lastUpdated: new Date(),
      })
    } catch (error) {
      const errorInfo = createErrorInfo(
        error instanceof Error ? error.message : "Failed to fetch data",
        ErrorType.NETWORK,
        ErrorSeverity.WARNING,
        { url },
        error instanceof Error ? error : undefined,
      )

logError(errorInfo)

setState((prev) => ({
        ...prev,
        isLoading: false,
        error: errorInfo.message,
        lastUpdated: prev.lastUpdated,
      }))
    }
  }, [url, retryCount, retryDelay, validateData])

const cancelRefresh = useCallback(() => {
    if (refreshInterval !== null) {
      // This function will be used to cancel any active interval
      // It's returned from the hook for manual cancellation
    }
  }, [refreshInterval])

useEffect(() => {
    if (initialFetch) {
      fetchData()
    }

let intervalId: NodeJS.Timeout | null = null

if (refreshInterval !== null && refreshInterval > 0) {
      intervalId = setInterval(fetchData, refreshInterval)
    }

return () => {
      if (intervalId !== null) {
        clearInterval(intervalId)
      }
    }
  }, [fetchData, initialFetch, refreshInterval])

return [state, fetchData, cancelRefresh]
}

[V0_FILE]typescriptreact:file="components/ESIMDataDisplay.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useDataFetching } from "@/hooks/useDataFetching"
import { validateESIMData, type ESIMData } from "@/lib/data-validation"
import DataErrorAlert from "@/components/DataErrorAlert"
import { Smartphone, Signal, Calendar, Globe, AlertTriangle } from "lucide-react"

interface ESIMDataDisplayProps {
  userId?: string
  esimId?: string
  showDetails?: boolean
}

export default function ESIMDataDisplay({ userId, esimId, showDetails = true }: ESIMDataDisplayProps) {
  const [expanded, setExpanded] = useState<Record<string, boolean>>({})

// Construct the API URL with query parameters
  const apiUrl = new URL("/api/esim-data", window.location.origin)
  if (userId) apiUrl.searchParams.append("userId", userId)
  if (esimId) apiUrl.searchParams.append("id", esimId)

const [{ data, isLoading, error }, refetch] = useDataFetching<ESIMData[]>(apiUrl.toString(), {
    validateData: (data) => {
      if (!Array.isArray(data)) return false
      return data.every((item) => validateESIMData(item))
    },
    refreshInterval: 60000, // Refresh every minute
  })

const toggleExpand = (id: string) => {
    setExpanded((prev) => ({
      ...prev,
      [id]: !prev[id],
    }))
  }

if (isLoading) {
    return (
      <div className="animate-pulse space-y-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="bg-dark-blue/30 rounded-lg p-4 border border-aqua/10">
            <div className="h-6 bg-aqua/10 rounded w-1/3 mb-3"></div>
            <div className="space-y-2">
              <div className="h-4 bg-aqua/10 rounded w-full"></div>
              <div className="h-4 bg-aqua/10 rounded w-3/4"></div>
            </div>
          </div>
        ))}
      </div>
    )
  }

if (error) {
    return <DataErrorAlert title="eSIM Data Error" message={error} onRetry={refetch} severity="error" />
  }

if (!data || data.length === 0) {
    return (
      <div className="bg-dark-blue/30 rounded-lg p-6 border border-aqua/20 text-center">
        <AlertTriangle className="w-12 h-12 text-yellow-400 mx-auto mb-4" />
        <h3 className="text-xl font-medium text-white mb-2">No eSIM Data Found</h3>
        <p className="text-gray-400 mb-4">
          {esimId ? "We couldn't find the requested eSIM." : "You don't have any eSIMs yet."}
        </p>
        <button
          onClick={refetch}
          className="bg-aqua/20 hover:bg-aqua/30 text-aqua px-4 py-2 rounded-lg transition-colors"
        >
          Refresh
        </button>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {data.map((esim) => (
        <div key={esim.id} className="bg-dark-blue/30 rounded-lg border border-aqua/20 overflow-hidden">
          <div
            className="p-4 cursor-pointer hover:bg-dark-blue/50 transition-colors"
            onClick={() => toggleExpand(esim.id)}
          >
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                <Smartphone className="w-5 h-5 text-aqua mr-2" />
                <h3 className="font-medium text-white">
                  {esim.provider} - {esim.plan}
                </h3>
              </div>
              <div className="flex items-center">
                <span
                  className={`text-xs px-2 py-1 rounded-full ${
                    esim.status === "active"
                      ? "bg-green-500/20 text-green-400"
                      : esim.status === "inactive"
                        ? "bg-yellow-500/20 text-yellow-400"
                        : "bg-red-500/20 text-red-400"
                  }`}
                >
                  {esim.status?.charAt(0).toUpperCase() + esim.status?.slice(1) || "Unknown"}
                </span>
              </div>
            </div>

<div className="grid grid-cols-2 gap-2 mt-3 text-sm">
              <div className="flex items-center text-gray-300">
                <Signal className="w-4 h-4 text-aqua/70 mr-1" />
                Data: {esim.dataAmount}
              </div>

<div className="flex items-center text-gray-300">
                <Calendar className="w-4 h-4 text-aqua/70 mr-1" />
                Validity: {esim.validity}
              </div>
            </div>
          </div>

{showDetails && expanded[esim.id] && (
            <div className="p-4 border-t border-aqua/10 bg-dark-blue/50">
              <div className="grid grid-cols-2 gap-4 mb-3">
                <div>
                  <p className="text-xs text-gray-400 mb-1">Data Used</p>
                  <p className="text-lg font-medium text-white">{esim.dataUsed || "0 GB"}</p>
                </div>

<div>
                  <p className="text-xs text-gray-400 mb-1">Price</p>
                  <p className="text-lg font-medium text-white">${esim.price.toFixed(2)}</p>
                </div>
              </div>

<div className="mb-3">
                <p className="text-xs text-gray-400 mb-1">Coverage</p>
                <div className="flex flex-wrap gap-1">
                  {esim.coverage.map((area) => (
                    <span
                      key={area}
                      className="inline-flex items-center px-2 py-1 bg-aqua/10 text-aqua text-xs rounded-full"
                    >
                      <Globe className="w-3 h-3 mr-1" />
                      {area}
                    </span>
                  ))}
                </div>
              </div>

{esim.purchaseDate && (
                <div className="text-xs text-gray-400">
                  Purchased: {new Date(esim.purchaseDate).toLocaleDateString()}
                </div>
              )}

{esim.expiryDate && (
                <div className="text-xs text-gray-400">Expires: {new Date(esim.expiryDate).toLocaleDateString()}</div>
              )}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/title-data.ts" isEdit="true" isQuickEdit="true"
/**
 * Title Data Management
 *
 * This module provides consistent title data throughout the application.
 */

// Application title configuration
export const APP_TITLE = "eSIM Myanmar"
export const APP_DESCRIPTION = "Your trusted eSIM provider in Myanmar"

// Menu titles
export interface MenuTitle {
  key: string
  title: string
  description?: string
}

export const MENU_TITLES: Record<string, MenuTitle> = {
  home: {
    key: "home",
    title: "eSIM Myanmar Home",
    description: "Your trusted eSIM provider in Myanmar",
  },
  esimInfo: {
    key: "esimInfo",
    title: "eSIM Myanmar Guide",
    description: "Complete guide to eSIM technology in Myanmar",
  },
  dashboard: {
    key: "dashboard",
    title: "eSIM Myanmar Dashboard",
    description: "Manage all your eSIM services in one place",
  },
  manage: {
    key: "manage",
    title: "eSIM Management",
    description: "Control your active eSIMs",
  },
  support: {
    key: "support",
    title: "eSIM Support",
    description: "Get help with your eSIM",
  },
  faq: {
    key: "faq",
    title: "eSIM FAQ",
    description: "Frequently asked questions",
  },
  aiDashboard: {
    key: "aiDashboard",
    title: "eSIM AI Dashboard",
    description: "AI-powered insights for your eSIM",
  },
  providers: {
    key: "providers",
    title: "eSIM Providers",
    description: "Browse available eSIM providers",
  },
  activation: {
    key: "activation",
    title: "eSIM Activation",
    description: "Activate your new eSIM",
  },
  blog: {
    key: "blog",
    title: "eSIM Blog",
    description: "Latest news and updates",
  },
  analytics: {
    key: "analytics",
    title: "eSIM Analytics",
    description: "Analyze your eSIM usage",
  },
  usageReports: {
    key: "usageReports",
    title: "eSIM Usage Reports",
    description: "Detailed reports of your data usage",
  },
  order: {
    key: "order",
    title: "eSIM Order",
    description: "Order a new eSIM",
  },
  shop: {
    key: "shop",
    title: "eSIM Shop",
    description: "Browse and purchase eSIMs",
  },
}

// Page title generator
export function getPageTitle(key: string): string {
  return MENU_TITLES[key]?.title || `${APP_TITLE} - Unknown Page`
}

// Full page title with app name
export function getFullPageTitle(key: string): string {
  const pageTitle = getPageTitle(key)
  return pageTitle === APP_TITLE ? APP_TITLE : `${pageTitle} | ${APP_TITLE}`
}

// Page description generator
export function getPageDescription(key: string): string {
  return MENU_TITLES[key]?.description || APP_DESCRIPTION
}

// Meta data generator for pages
export function getPageMetadata(key: string) {
  return {
    title: getFullPageTitle(key),
    description: getPageDescription(key),
    keywords: `eSIM, Myanmar, mobile data, ${key}, ${MENU_TITLES[key]?.title || ""}`.trim(),
    openGraph: {
      title: getFullPageTitle(key),
      description: getPageDescription(key),
      siteName: APP_TITLE,
      locale: "en_US",
      type: "website",
    },
  }
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import type { Metadata } from "next"
import HomeClient from "./home-client"
import { getPageMetadata } from "@/lib/title-data"

// Generate metadata for the page
export const metadata: Metadata = getPageMetadata("home")

export default function Home() {
  return <HomeClient />
}

[V0_FILE]typescriptreact:file="app/home-client.tsx" isFixed="true" isQuickEdit="true"
"use client"
import Link from "next/link"
import { motion } from "framer-motion"
import { Smartphone, Globe, Zap, ArrowRight } from "lucide-react"
import ErrorBoundary from "@/components/ErrorBoundary"

export default function HomeClient() {
  return (
    <ErrorBoundary>
      <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background">
        {/* Hero Section */}
        <section className="pt-32 pb-16 px-4">
          <div className="container mx-auto max-w-6xl">
            <ErrorBoundary>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="text-center"
              >
                <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
                  eSIM Myanmar Home
                </h1>
                <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
                  Stay connected anywhere in Myanmar with our digital eSIM solutions. No physical SIM card needed.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Link
                    href="/shop"
                    className="bg-aqua hover:bg-aqua/80 text-dark-blue px-6 py-3 rounded-lg font-medium transition-colors inline-flex items-center"
                  >
                    <Smartphone className="w-5 h-5 mr-2" />
                    Get Your eSIM
                  </Link>
                  <Link
                    href="/esim-info"
                    className="bg-transparent hover:bg-white/10 text-white border border-white/20 px-6 py-3 rounded-lg font-medium transition-colors inline-flex items-center"
                  >
                    <Globe className="w-5 h-5 mr-2" />
                    Learn About eSIM
                  </Link>
                </div>
              </motion.div>
            </ErrorBoundary>
          </div>
        </section>

{/* Features Section */}
        <section className="py-16 px-4">
          <div className="container mx-auto max-w-6xl">
            <ErrorBoundary>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="text-center mb-12"
              >
                <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">Why Choose eSIM Myanmar?</h2>
                <p className="text-xl text-gray-300 max-w-3xl mx-auto">
                  Experience the future of mobile connectivity with our digital eSIM technology.
                </p>
              </motion.div>
            </ErrorBoundary>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.3 }}
                  className="bg-dark-blue/30 border border-aqua/20 rounded-xl p-6 hover:bg-dark-blue/50 transition-colors"
                >
                  <div className="bg-aqua/20 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                    <Smartphone className="w-7 h-7 text-aqua" />
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-white">Instant Activation</h3>
                  <p className="text-gray-300">
                    Get connected immediately with our digital eSIM. No waiting for physical delivery.
                  </p>
                </motion.div>
              </ErrorBoundary>

<ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.4 }}
                  className="bg-dark-blue/30 border border-aqua/20 rounded-xl p-6 hover:bg-dark-blue/50 transition-colors"
                >
                  <div className="bg-aqua/20 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                    <Globe className="w-7 h-7 text-aqua" />
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-white">Nationwide Coverage</h3>
                  <p className="text-gray-300">
                    Stay connected throughout Myanmar with our extensive network coverage.
                  </p>
                </motion.div>
              </ErrorBoundary>

<ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.5 }}
                  className="bg-dark-blue/30 border border-aqua/20 rounded-xl p-6 hover:bg-dark-blue/50 transition-colors"
                >
                  <div className="bg-aqua/20 w-14 h-14 rounded-full flex items-center justify-center mb-4">
                    <Zap className="w-7 h-7 text-aqua" />
                  </div>
                  <h3 className="text-xl font-bold mb-2 text-white">High-Speed Data</h3>
                  <p className="text-gray-300">
                    Experience fast and reliable internet connectivity for all your needs.
                  </p>
                </motion.div>
              </ErrorBoundary>
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="py-16 px-4">
          <div className="container mx-auto max-w-6xl">
            <ErrorBoundary>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.6 }}
                className="bg-gradient-to-r from-aqua/20 to-blue-500/20 rounded-2xl p-8 border border-aqua/30"
              >
                <div className="flex flex-col md:flex-row items-center justify-between">
                  <div className="mb-6 md:mb-0">
                    <h2 className="text-3xl font-bold mb-2 text-white">Ready to Get Started?</h2>
                    <p className="text-xl text-gray-300">Join thousands of satisfied customers using eSIM Myanmar.</p>
                  </div>
                  <Link
                    href="/shop"
                    className="bg-aqua hover:bg-aqua/80 text-dark-blue px-6 py-3 rounded-lg font-medium transition-colors inline-flex items-center"
                  >
                    Get Your eSIM
                    <ArrowRight className="w-5 h-5 ml-2" />
                  </Link>
                </div>
              </motion.div>
            </ErrorBoundary>
          </div>
        </section>
      </div>
    </ErrorBoundary>
  )
}

[V0_FILE]typescriptreact:file="app/esim-info/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import type { Metadata } from "next"
import ESIMInfoClient from "./esim-info-client"
import { getPageMetadata } from "@/lib/title-data"

// Generate metadata for the page
export const metadata: Metadata = getPageMetadata("esimInfo")

export default function ESIMInfo() {
  return <ESIMInfoClient />
}

[V0_FILE]typescriptreact:file="app/esim-info/esim-info-client.tsx" isFixed="true" isQuickEdit="true"
"use client"
import { motion } from "framer-motion"
import { Smartphone, Download, Check, HelpCircle, AlertTriangle } from "lucide-react"
import ErrorBoundary from "@/components/ErrorBoundary"

export default function ESIMInfoClient() {
  return (
    <ErrorBoundary>
      <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background py-12">
        <div className="container mx-auto px-4 max-w-6xl">
          <ErrorBoundary>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-center mb-12"
            >
              <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
                eSIM Myanmar Guide
              </h1>
              <p className="text-xl text-gray-300">
                Everything you need to know about using eSIM technology in Myanmar.
              </p>
            </motion.div>
          </ErrorBoundary>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <ErrorBoundary>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="lg:col-span-2 bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
              >
                <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                  <Smartphone className="w-6 h-6 mr-2" />
                  What is an eSIM?
                </h2>
                <p className="text-gray-300 mb-4">
                  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. It's built into your device and can be programmed to work
                  with any supported carrier.
                </p>
                <p className="text-gray-300 mb-4">With eSIM technology, you can:</p>
                <ul className="space-y-2 mb-4">
                  <li className="flex items-start">
                    <Check className="w-5 h-5 text-aqua mr-2 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">Use one device with multiple phone numbers</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="w-5 h-5 text-aqua mr-2 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">Switch between carriers without changing physical SIM cards</span>
                  </li>
                  <li className="flex items-start">
                    <Check className="w-5 h-5 text-aqua mr-2 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">
                      Activate a cellular plan quickly without waiting for a physical SIM
                    </span>
                  </li>
                  <li className="flex items-start">
                    <Check className="w-5 h-5 text-aqua mr-2 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">Use a local data plan when traveling to avoid roaming charges</span>
                  </li>
                </ul>
              </motion.div>
            </ErrorBoundary>

<ErrorBoundary>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.3 }}
                className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
              >
                <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                  <HelpCircle className="w-6 h-6 mr-2" />
                  Compatible Devices
                </h2>
                <p className="text-gray-300 mb-4">Check if your device supports eSIM technology:</p>
                <ul className="space-y-2">
                  <li className="text-gray-300">• iPhone XS or newer</li>
                  <li className="text-gray-300">• Samsung Galaxy S20 or newer</li>
                  <li className="text-gray-300">• Google Pixel 3 or newer</li>
                  <li className="text-gray-300">• iPad Pro (2018) or newer</li>
                  <li className="text-gray-300">• Many newer Android devices</li>
                </ul>
                <div className="mt-4 p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/30">
                  <div className="flex items-start">
                    <AlertTriangle className="w-5 h-5 text-yellow-400 mr-2 mt-0.5 flex-shrink-0" />
                    <p className="text-sm text-gray-300">
                      Not all carriers in Myanmar support eSIM technology yet. Check with your carrier for
                      compatibility.
                    </p>
                  </div>
                </div>
              </motion.div>
            </ErrorBoundary>
          </div>

<ErrorBoundary>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6 mb-12"
            >
              <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                <Download className="w-6 h-6 mr-2" />
                How to Activate Your eSIM
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="bg-dark-blue/50 p-4 rounded-lg border border-aqua/10">
                  <div className="bg-aqua/20 w-10 h-10 rounded-full flex items-center justify-center mb-3">
                    <span className="text-aqua font-bold">1</span>
                  </div>
                  <h3 className="text-lg font-medium mb-2 text-white">Purchase an eSIM</h3>
                  <p className="text-gray-300 text-sm">Buy an eSIM plan from our website that suits your needs.</p>
                </div>
                <div className="bg-dark-blue/50 p-4 rounded-lg border border-aqua/10">
                  <div className="bg-aqua/20 w-10 h-10 rounded-full flex items-center justify-center mb-3">
                    <span className="text-aqua font-bold">2</span>
                  </div>
                  <h3 className="text-lg font-medium mb-2 text-white">Scan QR Code</h3>
                  <p className="text-gray-300 text-sm">
                    Scan the QR code we provide or enter the activation code manually.
                  </p>
                </div>
                <div className="bg-dark-blue/50 p-4 rounded-lg border border-aqua/10">
                  <div className="bg-aqua/20 w-10 h-10 rounded-full flex items-center justify-center mb-3">
                    <span className="text-aqua font-bold">3</span>
                  </div>
                  <h3 className="text-lg font-medium mb-2 text-white">Activate & Connect</h3>
                  <p className="text-gray-300 text-sm">
                    Follow the on-screen instructions to activate your eSIM and connect.
                  </p>
                </div>
              </div>
            </motion.div>
          </ErrorBoundary>

<ErrorBoundary>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.5 }}
              className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-xl p-6 border border-aqua/20"
            >
              <h2 className="text-2xl font-bold mb-4 text-white">Frequently Asked Questions</h2>
              <div className="space-y-4">
                <div className="border-b border-gray-700/50 pb-4">
                  <h3 className="text-lg font-medium mb-2 text-aqua">Can I use both physical SIM and eSIM?</h3>
                  <p className="text-gray-300">
                    Yes, most eSIM-compatible devices support Dual SIM functionality, allowing you to use both a
                    physical SIM and an eSIM simultaneously.
                  </p>
                </div>
                <div className="border-b border-gray-700/50 pb-4">
                  <h3 className="text-lg font-medium mb-2 text-aqua">What happens if I change phones?</h3>
                  <p className="text-gray-300">
                    You'll need to transfer your eSIM to your new device. This usually involves deactivating it on your
                    old device and activating it on your new one.
                  </p>
                </div>
                <div>
                  <h3 className="text-lg font-medium mb-2 text-aqua">Is eSIM better than physical SIM?</h3>
                  <p className="text-gray-300">
                    eSIMs offer more flexibility and convenience, especially for travelers or those who switch between
                    multiple carriers. However, not all carriers support eSIM technology yet.
                  </p>
                </div>
              </div>
            </motion.div>
          </ErrorBoundary>
        </div>
      </div>
    </ErrorBoundary>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { Smartphone, Clock, Download, HelpCircle, Zap } from "lucide-react"
import OrderHistory from "@/components/OrderHistory"
import ESIMGuide from "@/components/ESIMGuide"
import AISupport from "@/components/AISupport"
import LoadingSpinner from "@/components/LoadingSpinner"
import ErrorBoundary from "@/components/ErrorBoundary"
import { logError } from "@/utils/errorLogging"
import VercelDataStatus from "@/components/VercelDataStatus"
import ESIMDataDisplay from "@/components/ESIMDataDisplay"
import DataErrorAlert from "@/components/DataErrorAlert"
import { createErrorInfo, ErrorType, ErrorSeverity } from "@/lib/error-handling"
import { getPageTitle } from "@/lib/title-data"

export default function Dashboard() {
  const [userId, setUserId] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const detectDeviceAndAssignUserId = async () => {
      try {
        // Simulate device detection and user ID assignment
        await new Promise((resolve) => setTimeout(resolve, 1500))
        const generatedUserId = `EM${Math.floor(100000 + Math.random() * 900000)}`
        setUserId(generatedUserId)
        setIsLoading(false)
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "An unknown error occurred"
        setError(errorMessage)

const errorInfo = createErrorInfo("Device detection failed", ErrorType.CLIENT, ErrorSeverity.ERROR, {
          errorMessage,
        })
        logError(errorInfo)

setIsLoading(false)
      }
    }

detectDeviceAndAssignUserId()
  }, [])

if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <LoadingSpinner />
      </div>
    )
  }

if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="max-w-md w-full">
          <DataErrorAlert title="Dashboard Error" message={error} severity="error" showDismiss={false} />
        </div>
      </div>
    )
  }

return (
    <ErrorBoundary>
      <div className="min-h-screen bg-gradient-to-b from-dark-blue/50 to-background py-12">
        <div className="container mx-auto px-4 max-w-6xl">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-center mb-12"
          >
            <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-aqua via-blue-400 to-violet-400 text-transparent bg-clip-text">
              {getPageTitle("dashboard")}
            </h1>
            <p className="text-xl text-gray-300">
              Manage your eSIMs, track orders, and get support - all in one place.
            </p>
            <div className="mt-4 inline-block bg-aqua/20 text-aqua px-4 py-2 rounded-full">
              <Smartphone className="w-5 h-5 inline-block mr-2" />
              User ID: {userId}
            </div>
          </motion.div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <div className="lg:col-span-2 space-y-8">
              <ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.2 }}
                  className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
                >
                  <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                    <Smartphone className="w-6 h-6 mr-2" />
                    Your eSIMs
                  </h2>
                  <ESIMDataDisplay userId={userId || undefined} />
                </motion.div>
              </ErrorBoundary>

<ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.5 }}
                  className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
                >
                  <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                    <Download className="w-6 h-6 mr-2" />
                    eSIM Activation
                  </h2>
                  <p className="text-gray-300 mb-4">Download and activate your purchased eSIMs here.</p>
                  <button className="bg-aqua text-dark-blue px-4 py-2 rounded-lg font-medium hover:bg-aqua/80 transition-colors">
                    Manage eSIMs
                  </button>
                </motion.div>
              </ErrorBoundary>

<ErrorBoundary>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.6 }}
                  className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6"
                >
                  <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
                    <HelpCircle className="w-6 h-6 mr-2" />
                    eSIM Guide
                  </h2>
                  <ESIMGuide />
                </motion.div>
              </ErrorBoundary>
            </div>
          </div>

<ErrorBoundary>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.7 }}
              className="bg-gradient-to-r from-aqua/10 to-blue-400/10 rounded-xl p-6 border border-aqua/20"
            >
              <h2 className="text-2xl font-bold mb-4 text-white flex items-center">
                <Zap className="w-6 h-6 mr-2 text-aqua" />
                AI-Powered Support
              </h2>
              <AISupport />
            </motion.div>
          </ErrorBoundary>
        </div>
      </div>
    </ErrorBoundary>
  )
}

[V0_FILE]typescriptreact:file="components/VercelDataStatus.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Activity, Server, Clock, RefreshCw } from "lucide-react"
import { createErrorInfo, logError, ErrorType, ErrorSeverity } from "@/lib/error-handling"
import DataErrorAlert from "@/components/DataErrorAlert"

export default function VercelDataStatus() {
  const [status, setStatus] = useState<{
    status: string
    latency: number
    uptime: number
    lastUpdated: string
  } | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const fetchStatus = async () => {
    setIsLoading(true)
    setError(null)

try {
      const response = await fetch("/api/network-status", {
        cache: "no-store",
        next: { revalidate: 0 },
      })

if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`)
      }

const data = await response.json()
      setStatus(data)
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Failed to fetch network status"
      setError(errorMessage)

const errorInfo = createErrorInfo(
        errorMessage,
        ErrorType.NETWORK,
        ErrorSeverity.WARNING,
        { component: "VercelDataStatus" },
        err instanceof Error ? err : undefined,
      )

logError(errorInfo)
    } finally {
      setIsLoading(false)
    }
  }

useEffect(() => {
    fetchStatus()

// Set up interval to refresh data
    const intervalId = setInterval(fetchStatus, 30000) // Refresh every 30 seconds

// Clean up interval on component unmount
    return () => clearInterval(intervalId)
  }, [fetchStatus]) // Added fetchStatus to the dependency array

const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "operational":
        return "text-green-400"
      case "degraded performance":
        return "text-yellow-400"
      default:
        return "text-red-400"
    }
  }

if (error) {
    return (
      <div className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6">
        <h2 className="text-2xl font-bold mb-4 text-aqua flex items-center">
          <Server className="w-6 h-6 mr-2" />
          Network Status
        </h2>
        <DataErrorAlert title="Network Status Error" message={error} onRetry={fetchStatus} severity="warning" />
      </div>
    )
  }

return (
    <div className="bg-dark-blue/30 border border-gray-700/50 rounded-xl p-6">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-2xl font-bold text-aqua flex items-center">
          <Server className="w-6 h-6 mr-2" />
          Network Status
        </h2>
        <button
          onClick={fetchStatus}
          disabled={isLoading}
          className="text-gray-400 hover:text-aqua transition-colors"
          aria-label="Refresh network status"
        >
          <RefreshCw className={`w-5 h-5 ${isLoading ? "animate-spin" : ""}`} />
        </button>
      </div>

{isLoading && !status ? (
        <div className="animate-pulse space-y-3">
          <div className="h-6 bg-aqua/10 rounded w-1/2"></div>
          <div className="h-4 bg-aqua/10 rounded w-full"></div>
          <div className="h-4 bg-aqua/10 rounded w-3/4"></div>
        </div>
      ) : status ? (
        <div>
          <div className="flex items-center mb-3">
            <Activity className="w-5 h-5 mr-2 text-aqua" />
            <span className="text-gray-300 mr-2">Status:</span>
            <span className={`font-medium ${getStatusColor(status.status)}`}>{status.status}</span>
          </div>

<div className="grid grid-cols-2 gap-4 mb-3">
            <div>
              <p className="text-xs text-gray-400 mb-1">Latency</p>
              <p className="text-lg font-medium text-white">{status.latency} ms</p>
            </div>

<div>
              <p className="text-xs text-gray-400 mb-1">Uptime</p>
              <p className="text-lg font-medium text-white">{status.uptime}%</p>
            </div>
          </div>

<div className="text-xs text-gray-400 flex items-center">
            <Clock className="w-3 h-3 mr-1" />
            Last updated: {new Date(status.lastUpdated).toLocaleTimeString()}
          </div>
        </div>
      ) : null}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/LiveChatAIPopup.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { MessageSquare, X, Send, Bot, AlertTriangle } from "lucide-react"
import { createErrorInfo, logError, ErrorType, ErrorSeverity } from "@/lib/error-handling"

export default function LiveChatAIPopup() {
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<{ role: "user" | "assistant"; content: string }[]>([
    { role: "assistant", content: "Hello! How can I help you with your eSIM today?" },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const messagesEndRef = useRef<HTMLDivElement>(null)

const toggleChat = () => {
    setIsOpen(!isOpen)
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value)
  }

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    if (isOpen) {
      scrollToBottom()
    }
  }, [isOpen])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!input.trim()) return

const userMessage = input.trim()
    setInput("")
    setMessages((prev) => [...prev, { role: "user", content: userMessage }])
    setIsLoading(true)
    setError(null)

try {
      const response = await fetch("/api/esim-ai/real-time-data", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      })

if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`)
      }

const data = await response.json()

// Simulate AI response using the real-time data
      setTimeout(() => {
        const aiResponse = `Based on our current data (${data.timestamp}), we have ${data.activeUsers} active users with ${data.networkStatus} network status. The average data usage is ${data.dataUsage}. How else can I assist you with your eSIM?`

setMessages((prev) => [...prev, { role: "assistant", content: aiResponse }])
        setIsLoading(false)
      }, 1000)
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Failed to get AI response"
      setError(errorMessage)

const errorInfo = createErrorInfo(
        errorMessage,
        ErrorType.NETWORK,
        ErrorSeverity.WARNING,
        { component: "LiveChatAIPopup", userMessage },
        err instanceof Error ? err : undefined,
      )

logError(errorInfo)

setIsLoading(false)
      setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: "I apologize, but I encountered an error while processing your request. Please try again later.",
        },
      ])
    } finally {
      scrollToBottom()
    }
  }

return (
    <>
      {/* Chat Button */}
      <button
        onClick={toggleChat}
        className="fixed bottom-6 right-6 bg-aqua hover:bg-aqua/80 text-dark-blue p-4 rounded-full shadow-lg transition-all z-50"
        aria-label="Chat with AI Assistant"
      >
        {isOpen ? <X className="w-6 h-6" /> : <MessageSquare className="w-6 h-6" />}
      </button>

{/* Chat Window */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 20, scale: 0.95 }}
            transition={{ duration: 0.2 }}
            className="fixed bottom-24 right-6 w-80 sm:w-96 bg-dark-blue/95 backdrop-blur-md border border-aqua/20 rounded-xl shadow-xl overflow-hidden z-50"
          >
            {/* Chat Header */}
            <div className="bg-gradient-to-r from-aqua/20 to-blue-500/20 p-4 border-b border-aqua/20">
              <div className="flex items-center">
                <Bot className="w-6 h-6 text-aqua mr-2" />
                <h3 className="font-medium text-white">eSIM AI Assistant</h3>
              </div>
              <button onClick={toggleChat} className="ml-auto text-white hover:text-gray-200 transition-colors">
                <X size={20} />
              </button>
            </div>

{/* Chat Messages */}
            <div className="h-80 overflow-y-auto p-4 space-y-4">
              {messages.map((message, index) => (
                <div key={index} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
                  <div
                    className={`max-w-[80%] rounded-lg p-3 ${
                      message.role === "user" ? "bg-aqua/20 text-white" : "bg-gray-700/50 text-white"
                    }`}
                  >
                    {message.content}
                  </div>
                </div>
              ))}

{isLoading && (
                <div className="flex justify-start">
                  <div className="bg-gray-700/50 text-white max-w-[80%] rounded-lg p-3">
                    <div className="flex space-x-2">
                      <div
                        className="w-2 h-2 rounded-full bg-gray-400 animate-bounce"
                        style={{ animationDelay: "0ms" }}
                      ></div>
                      <div
                        className="w-2 h-2 rounded-full bg-gray-400 animate-bounce"
                        style={{ animationDelay: "150ms" }}
                      ></div>
                      <div
                        className="w-2 h-2 rounded-full bg-gray-400 animate-bounce"
                        style={{ animationDelay: "300ms" }}
                      ></div>
                    </div>
                  </div>
                </div>
              )}

{error && (
                <div className="flex justify-center">
                  <div className="bg-red-500/20 text-red-300 max-w-[90%] rounded-lg p-3 flex items-start">
                    <AlertTriangle className="w-4 h-4 mr-2 flex-shrink-0 mt-0.5" />
                    <span className="text-sm">{error}</span>
                  </div>
                </div>
              )}

{/* Chat Input */}
            <form onSubmit={handleSubmit} className="p-4 border-t border-gray-700/50">
              <div className="flex items-center">
                <input
                  type="text"
                  value={input}
                  onChange={handleInputChange}
                  placeholder="Type your message..."
                  className="flex-1 bg-gray-700/50 text-white placeholder-gray-400 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-aqua"
                  disabled={isLoading}
                />
                <button
                  type="submit"
                  className="bg-aqua hover:bg-aqua/80 text-dark-blue p-2 rounded-r-lg transition-colors"
                  disabled={isLoading || !input.trim()}
                >
                  <Send className="w-5 h-5" />
                </button>
              </div>
            </form>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

[V0_FILE]typescript:file="utils/errorLogging.ts" isEdit="true"
import { createErrorInfo, logError as libLogError, type ErrorInfo } from "@/lib/error-handling"

// Re-export the logError function for backward compatibility
export const logError = libLogError

// Export a simplified version for quick logging
export function logErrorMessage(message: string, error?: Error): void {
  const errorInfo: ErrorInfo = createErrorInfo(message, "unknown", "error", undefined, error)

libLogError(errorInfo)
}
</article></body></html>

AI Assistant

Frequently Asked Questions

Ask Our AI Assistant

Answer:

{category.name}

eSIM Data Management

Select a Data Plan

eSIM Data Management

Select a Data Plan

{plan.name} Plan

eSIM Storage Management

{esim.name}

{esimData[activeESIM].name} Details

Security Alert: eSIM Myanmar Website

eSIM Providers in Myanmar

Provider Comparison

{provider.name}

Network Details

Pricing

Pros

Cons

Choosing the Right Provider

Coverage Area

Data Speed Needs

Duration of Stay

Budget Considerations

Ready to Get Started?

eSIM Activation Guide

Compatible Devices

{device.brand}

General Activation Process

Check Device Compatibility

Choose a Provider

Purchase an eSIM Plan

Scan QR Code

Complete Setup

Important Tips:

Provider-Specific Activation

{provider.name} Activation

Step-by-Step Process:

Activation Options:

Device-Specific Instructions

iPhone (iOS 12.1 or later)

Android (Android 10 or later)

Samsung Galaxy

Google Pixel

Troubleshooting

QR Code Scanning Issues

Activation Failures

Connection Issues After Activation

eSIM Not Showing Up

Still Have Questions?

eSIM Myanmar Blog

Featured Articles

{post.title}

All Articles

{post.title}

Subscribe to Our Newsletter

The Future of Connectivity in Myanmar

Current State of 5G in Myanmar

How 5G Will Transform eSIM Experience

Timeline for Nationwide Coverage

Preparing for 5G eSIM

Challenges and Considerations

Conclusion

Planning Your Connectivity in Myanmar

Short-Term Visitor Plans (1-7 Days)

MPT Tourist eSIM

Ooredoo Tourist Pack

Medium-Term Visitor Plans (1-2 Weeks)

Telenor Travel eSIM

MPT Explorer eSIM

Long-Term Visitor Plans (2+ Weeks)

Ooredoo Extended Stay

Telenor Monthly Traveler

How to Choose the Right Plan

How to Purchase and Activate

Tips for Tourists

Conclusion

{post.title}

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This