[V0_FILE]typescriptreact:file="app/components/ProjectCard.tsx" isMerged="true" "use client" import Image from "next/image" import { motion } from "framer-motion" interface ProjectCardProps { title: string description: string image: string size: "square" | "wide" } export default function ProjectCard({ title, description, image, size }: ProjectCardProps) { return ( {title}
{title}

{description}
) } [V0_FILE]typescriptreact:file="app/components/LottieAnimation.tsx" isMerged="true" export default function LottieAnimation() { return (
Lottie Animation Placeholder
) } [V0_FILE]typescriptreact:file="app/components/CustomCursor.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" export default function CustomCursor() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const updateMousePosition = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", updateMousePosition) return () => { window.removeEventListener("mousemove", updateMousePosition) } }, []) return (
) } [V0_FILE]typescriptreact:file="app/components/AboutUs.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export default function AboutUs() { return (
About Us
We are Creative Innovators

At CreativeAgency, we blend cutting-edge technology with artistic vision to create digital experiences that captivate and inspire. Our team of passionate designers, developers, and strategists work tirelessly to push the boundaries of what's possible in the digital realm.
With a focus on innovation and user-centric design, we've helped countless brands transform their digital presence and connect with their audience in meaningful ways.
Creative Team at Work
) } [V0_FILE]typescriptreact:file="app/components/Services.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Code, Paintbrush, Megaphone, Smartphone } from "lucide-react" const services = [ { icon: , title: "UI/UX Design", description: "Crafting intuitive and visually stunning interfaces that engage and delight users.", }, { icon:
,
    title: "Web Development",
    description: "Building robust, scalable, and high-performance websites and web applications.",
  },
  {
    icon: ,
    title: "Digital Marketing",
    description: "Developing strategic campaigns that increase brand visibility and drive conversions.",
  },
  {
    icon: ,
    title: "Mobile App Development",
    description: "Creating innovative mobile applications for iOS and Android platforms.",
  },
]

export default function Services() {
  return (
    
      
        
          Our Services
        
        
          {services.map((service, index) => (
            
              {service.icon}
              {service.title}
              {service.description}
            
          ))}
        
      
    
  )
}

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

import { motion } from "framer-motion"
import Image from "next/image"

const testimonials = [
  {
    quote:
      "CreativeAgency transformed our brand's digital presence. Their innovative approach and attention to detail exceeded our expectations.",
    author: "Jane Doe",
    position: "CEO, TechCorp",
    image: "/placeholder.svg?height=100&width=100",
  },
  {
    quote:
      "Working with CreativeAgency was a game-changer for our startup. Their expertise in UI/UX design significantly improved our user engagement.",
    author: "John Smith",
    position: "Founder, InnovateTech",
    image: "/placeholder.svg?height=100&width=100",
  },
  {
    quote:
      "The team at CreativeAgency are true professionals. Their digital marketing strategies helped us reach new audiences and boost our conversions.",
    author: "Emily Brown",
    position: "Marketing Director, GrowthCo",
    image: "/placeholder.svg?height=100&width=100",
  },
]

export default function Testimonials() {
  return (
    
      
        
          What Our Clients Say
        
        
          {testimonials.map((testimonial, index) => (
            
              "{testimonial.quote}"
              
                
                
                  {testimonial.author}
                  {testimonial.position}
                
              
            
          ))}
        
      
    
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { toast } from "@/components/ui/use-toast"

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
  message: z.string().min(10, {
    message: "Message must be at least 10 characters.",
  }),
})

export default function Contact() {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const form = useForm>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
  })

  function onSubmit(values: z.infer) {
    setIsSubmitting(true)
    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      toast({
        title: "Message sent!",
        description: "We'll get back to you as soon as possible.",
      })
      form.reset()
    }, 2000)
  }

  return (
    
      
        
          Get in Touch
        
        
          
            
               (
                  
                    Name
                    
                      
                    
                    
                  
                )}
              />
               (
                  
                    Email
                    
                      
                    
                    
                  
                )}
              />
               (
                  
                    Message
                    
                                          </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? "Sending..." : "Send Message"}
              </Button>
            </form>
          </Form>
        </motion.div>
      </div>
    </section>
  )
}

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

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"

const products = [
  {
    id: 1,
    name: "Innovative Web Design",
    description: "Cutting-edge web experiences that captivate and convert.",
    image: "/placeholder.svg?height=600&width=600",
  },
  {
    id: 2,
    name: "Mobile App Development",
    description: "Intuitive and powerful apps for iOS and Android platforms.",
    image: "/placeholder.svg?height=600&width=600",
  },
  {
    id: 3,
    name: "Brand Identity Design",
    description: "Memorable and impactful branding that tells your story.",
    image: "/placeholder.svg?height=600&width=600",
  },
]

export default function ProductShowcase() {
  const [currentProduct, setCurrentProduct] = useState(0)

  const nextProduct = () => {
    setCurrentProduct((prev) => (prev + 1) % products.length)
  }

  const prevProduct = () => {
    setCurrentProduct((prev) => (prev - 1 + products.length) % products.length)
  }

  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 overflow-hidden">
      <div className="container mx-auto">
        <h2 className="section-title">Our Expertise</h2>
        <div className="relative">
          <AnimatePresence mode="wait">
            <motion.div
              key={currentProduct}
              className="flex flex-col md:flex-row items-center justify-between"
              initial={{ opacity: 0, x: 100 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -100 }}
              transition={{ duration: 0.5 }}
            >
              <div className="md:w-1/2 mb-8 md:mb-0">
                <h3 className="text-3xl font-bold mb-4">{products[currentProduct].name}</h3>
                <p className="text-xl text-gray-600 mb-8">{products[currentProduct].description}</p>
                <button className="apple-button">Learn More</button>
              </div>
              <div className="md:w-1/2">
                <Image
                  src={products[currentProduct].image || "/placeholder.svg"}
                  alt={products[currentProduct].name}
                  width={600}
                  height={600}
                  className="rounded-2xl shadow-lg"
                />
              </div>
            </motion.div>
          </AnimatePresence>
          <button
            className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-lg"
            onClick={prevProduct}
          >
            ←
          </button>
          <button
            className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-lg"
            onClick={nextProduct}
          >
            →
          </button>
        </div>
      </div>
    </section>
  )
}

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

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"

export default function FloatingActionButton() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.pageYOffset > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

    window.addEventListener("scroll", toggleVisibility)

    return () => window.removeEventListener("scroll", toggleVisibility)
  }, [])

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.button
          className="fixed bottom-8 right-8 bg-gray-900 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg z-50"
          onClick={scrollToTop}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 20 }}
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
        >
          ↑
        </motion.button>
      )}
    </AnimatePresence>
  )
}

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

import { motion, AnimatePresence } from "framer-motion"
import Link from "next/link"

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

export default function FullScreenMenu({ isOpen, onClose }: FullScreenMenuProps) {
  const menuItems = ["Work", "About", "Services", "Contact"]

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 bg-white z-50 flex items-center justify-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <button className="absolute top-6 right-6 text-gray-900" onClick={onClose}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              className="w-8 h-8"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <nav className="text-center">
            {menuItems.map((item, index) => (
              <motion.div
                key={item}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                <Link
                  href={`#${item.toLowerCase()}`}
                  className="block text-4xl font-bold text-gray-900 mb-6 hover:text-gray-600 transition-colors"
                  onClick={onClose}
                >
                  {item}
                </Link>
              </motion.div>
            ))}
          </nav>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

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

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"

const projects = [
  {
    id: 1,
    title: "Minimalist Brand Identity",
    description: "Clean and modern visual communication for a tech startup",
    imageUrl: "/placeholder.svg?height=600&width=800",
    category: "Branding",
  },
  {
    id: 2,
    title: "Sleek Web Experience",
    description: "Elegant online presence for a luxury fashion brand",
    imageUrl: "/placeholder.svg?height=800&width=600",
    category: "Web Design",
  },
  {
    id: 3,
    title: "Intuitive Mobile App",
    description: "User-friendly app design for a health and wellness company",
    imageUrl: "/placeholder.svg?height=600&width=800",
    category: "Mobile App",
  },
  {
    id: 4,
    title: "Elegant Digital Campaign",
    description: "Sophisticated marketing strategy for a luxury automotive brand",
    imageUrl: "/placeholder.svg?height=800&width=600",
    category: "Digital Marketing",
  },
  {
    id: 5,
    title: "Refined UI/UX Design",
    description: "Streamlined user interfaces for a financial services platform",
    imageUrl: "/placeholder.svg?height=600&width=800",
    category: "UI/UX",
  },
  {
    id: 6,
    title: "Minimalist Product Design",
    description: "Sleek and functional design for a smart home device",
    imageUrl: "/placeholder.svg?height=800&width=600",
    category: "Product Design",
  },
]

const categories = ["All", ...new Set(projects.map((project) => project.category))]

export default function PortfolioGrid() {
  const [filter, setFilter] = useState("All")

  const filteredProjects = filter === "All" ? projects : projects.filter((project) => project.category === filter)

  return (
    <section className="py-20 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <h2 className="text-3xl font-bold text-foreground sm:text-4xl">Our Work</h2>
          <p className="mt-4 text-lg text-muted-foreground">
            A showcase of our minimalist designs and creative solutions.
          </p>
        </motion.div>

        <div className="flex justify-center space-x-4 mb-8">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setFilter(category)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                filter === category
                  ? "bg-primary text-primary-foreground"
                  : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
              }`}
            >
              {category}
            </button>
          ))}
        </div>

        <motion.div layout className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <AnimatePresence>
            {filteredProjects.map((project) => (
              <motion.div
                key={project.id}
                layout
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.5 }}
                className="bg-background rounded-3xl shadow-lg overflow-hidden hover-lift transition-all duration-300 ease-in-out border-2 border-transparent hover:border-primary/10"
              >
                <div className="relative h-64 overflow-hidden">
                  <Image
                    src={project.imageUrl || "/placeholder.svg"}
                    alt={project.title}
                    layout="fill"
                    objectFit="cover"
                    className="transition-transform duration-300 ease-in-out group-hover:scale-105"
                  />
                  <motion.div
                    className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 transition-opacity duration-300"
                    whileHover={{ opacity: 1 }}
                  >
                    <p className="text-white text-center px-4">{project.description}</p>
                  </motion.div>
                </div>
                <div className="p-6">
                  <div className="text-sm font-medium text-primary mb-1">{project.category}</div>
                  <h3 className="text-xl font-semibold text-foreground mb-2">{project.title}</h3>
                  <a
                    href="https://www.flowersandsaints.com.au"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary hover:underline inline-flex items-center"
                  >
                    View Project
                    <svg
                      className="w-4 h-4 ml-2"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                  </a>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </motion.div>
      </div>
    </section>
  )
}

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

import { useRef, useEffect, useState } from "react"
import { motion, useAnimation, useMotionValue } from "framer-motion"

const features = [
  {
    title: "Minimal Design",
    description: "Clean aesthetics that put your content in the spotlight.",
    icon: "✨",
  },
  {
    title: "Responsive",
    description: "Flawless experiences across all devices and screen sizes.",
    icon: "📱",
  },
  {
    title: "Fast Performance",
    description: "Lightning-quick load times for smooth user interactions.",
    icon: "⚡",
  },
  {
    title: "Accessibility",
    description: "Inclusive design practices for all users.",
    icon: "🌈",
  },
  {
    title: "SEO Optimized",
    description: "Built to help your site rank higher in search results.",
    icon: "🔍",
  },
]

export default function FeatureCarousel() {
  const [width, setWidth] = useState(0)
  const carousel = useRef<HTMLDivElement>(null)
  const x = useMotionValue(0)
  const controls = useAnimation()

  useEffect(() => {
    if (carousel.current) {
      setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
    }
  }, [])

  const handleDragEnd = () => {
    const currentX = x.get()
    if (currentX > 0) {
      controls.start({ x: 0, transition: { type: "spring", stiffness: 300, damping: 30 } })
    } else if (currentX < -width) {
      controls.start({ x: -width, transition: { type: "spring", stiffness: 300, damping: 30 } })
    }
  }

  return (
    <div className="py-20 bg-gradient-to-b from-background to-secondary/20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-center mb-12 text-foreground">Why Choose Us</h2>
        <motion.div ref={carousel} className="cursor-grab overflow-hidden">
          <motion.div
            drag="x"
            dragConstraints={{ right: 0, left: -width }}
            whileTap={{ cursor: "grabbing" }}
            animate={controls}
            style={{ x }}
            onDragEnd={handleDragEnd}
            className="flex"
          >
            {features.map((feature, index) => (
              <motion.div
                key={index}
                className="min-w-[300px] h-[400px] p-8 m-4 bg-background rounded-3xl shadow-lg flex flex-col justify-between hover-lift transition-all duration-300 ease-in-out border-2 border-transparent hover:border-primary/10"
              >
                <div>
                  <div className="text-4xl mb-4">{feature.icon}</div>
                  <h3 className="text-xl font-semibold mb-2 text-foreground">{feature.title}</h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
                <div className="mt-4">
                  <a
                    href="https://www.flowersandsaints.com.au"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-primary hover:underline"
                  >
                    Learn more →
                  </a>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}

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

import { useState, useRef } from "react"
import { motion, useScroll, useTransform, useSpring, useInView } from "framer-motion"

const timelineEvents = [
  {
    year: 2018,
    title: "Flowers & Saints Founded",
    description: "Our journey began with a passion for minimal design and floral artistry.",
    details:
      "Founded by Jane Doe and John Smith, Flowers & Saints started as a small studio in Sydney's Surry Hills, combining their love for minimalist design and botanical beauty.",
  },
  {
    year: 2019,
    title: "First Major Exhibition",
    description: "Showcased our unique blend of digital art and floral arrangements at the Sydney Design Festival.",
    details:
      "Our exhibition 'Digital Bloom' attracted over 10,000 visitors and received critical acclaim for its innovative approach to merging technology with natural elements.",
  },
  {
    year: 2020,
    title: "Launch of Online Store",
    description: "Expanded our reach by bringing our creations to the digital world.",
    details:
      "In response to global changes, we pivoted to e-commerce, offering our unique designs and virtual floral workshops to a worldwide audience.",
  },
  {
    year: 2021,
    title: "Collaboration with Top Brands",
    description: "Partnered with leading lifestyle brands to create exclusive collections.",
    details:
      "Our collaborations included limited edition prints with Australian fashion label Zimmermann and a bespoke fragrance line with Aesop.",
  },
  {
    year: 2022,
    title: "International Recognition",
    description: "Received the prestigious International Floral Design Award.",
    details:
      "Our 'Ethereal Echoes' installation, which combined holographic projections with live flowers, won the gold medal at the Chelsea Flower Show.",
  },
  {
    year: 2023,
    title: "Expansion to Physical Stores",
    description: "Opened our first flagship store in the heart of Sydney.",
    details:
      "Our Bondi Beach location features an immersive retail experience, blending digital installations with a curated selection of floral arrangements and lifestyle products.",
  },
]

const FlowerIcon = ({ progress }: { progress: number }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-6 h-6"
    style={{ transform: `scale(${progress})` }}
  >
    <path
      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
      stroke="currentColor"
      strokeWidth="2"
    />
    <path
      d="M12 8C12 8 14 10 14 12C14 14 12 16 12 16C12 16 10 14 10 12C10 10 12 8 12 8Z"
      stroke="currentColor"
      strokeWidth="2"
    />
  </svg>
)

export default function Timeline() {
  const [expandedEvent, setExpandedEvent] = useState<number | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  })

  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  })

  return (
    <section ref={containerRef} className="py-20 bg-background overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <h2 className="text-3xl font-bold text-foreground sm:text-4xl">Our Journey</h2>
          <p className="mt-4 text-lg text-muted-foreground">The evolution of Flowers & Saints through the years</p>
        </motion.div>

        <div className="relative">
          {/* Vertical line */}
          <motion.div
            className="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-primary/20"
            style={{ scaleY: scaleX }}
          />

          {/* Flower icon */}
          <motion.div
            className="sticky top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10 text-primary"
            style={{ y: useTransform(scrollYProgress, [0, 1], [0, 100]) }}
          >
            <FlowerIcon progress={useTransform(scrollYProgress, [0, 1], [0.5, 1]) as any} />
          </motion.div>

          {timelineEvents.map((event, index) => (
            <TimelineEvent
              key={event.year}
              event={event}
              index={index}
              isExpanded={expandedEvent === index}
              onToggle={() => setExpandedEvent(expandedEvent === index ? null : index)}
            />
          ))}
        </div>
      </div>
    </section>
  )
}

function TimelineEvent({
  event,
  index,
  isExpanded,
  onToggle,
}: {
  event: (typeof timelineEvents)[0]
  index: number
  isExpanded: boolean
  onToggle: () => void
}) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })

  return (
    <motion.div
      ref={ref}
      className={`mb-8 flex justify-between items-center w-full ${index % 2 === 0 ? "flex-row-reverse" : ""}`}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.8, delay: index * 0.1 }}
    >
      <div className="w-5/12" />
      <div className="z-20">
        <div className="flex items-center justify-center w-8 h-8 bg-primary rounded-full">
          <div className="w-3 h-3 bg-background rounded-full" />
        </div>
      </div>
      <motion.div
        className="w-5/12 cursor-pointer"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={onToggle}
      >
        <div className="p-4 bg-background rounded-lg shadow-md border border-primary/10">
          <span className="font-bold text-primary">{event.year}</span>
          <h3 className="text-lg font-semibold mb-1">{event.title}</h3>
          <p className="text-muted-foreground">{event.description}</p>
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: isExpanded ? "auto" : 0, opacity: isExpanded ? 1 : 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <p className="mt-2 text-sm text-muted-foreground">{event.details}</p>
          </motion.div>
        </div>
      </motion.div>
    </motion.div>
  )
}

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

import { motion } from "framer-motion"

export default function Marquee() {
  return (
    <div className="relative w-full overflow-hidden bg-background py-16">
      <div className="absolute inset-0 bg-gradient-to-r from-background via-transparent to-background z-10" />
      <motion.div
        className="flex whitespace-nowrap"
        animate={{ x: ["0%", "-50%"] }}
        transition={{ repeat: Number.POSITIVE_INFINITY, ease: "linear", duration: 20 }}
      >
        {[...Array(4)].map((_, index) => (
          <div key={index} className="flex items-center mx-4">
            <span
              className="text-7xl sm:text-8xl md:text-9xl font-bold text-transparent px-4"
              style={{
                WebkitTextStroke: "1px rgb(156 163 175)", // tailwind gray-400
              }}
            >
              Flowers & Saints
            </span>
          </div>
        ))}
      </motion.div>
    </div>
  )
}

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

import { motion } from "framer-motion"

export default function WearYourStory() {
  return (
    <section className="bg-background py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center"
        >
          <h2 className="text-4xl sm:text-5xl md:text-6xl font-bold text-foreground mb-6">Wear Your Story</h2>
          <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto">
            Every piece from Flowers & Saints is a canvas for your unique narrative. Our designs blend minimal
            aesthetics with nature's beauty, allowing you to express your individuality.
          </p>
          <motion.div
            className="mt-10"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <a
              href="https://www.flowersandsaints.com.au"
              target="_blank"
              rel="noopener noreferrer"
              className="apple-button inline-flex items-center"
            >
              Explore Collection
              <svg
                className="w-5 h-5 ml-2"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
              </svg>
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"

const formSchema = z.object({
  name: z.string().min(2, { message: "Name must be at least 2 characters." }),
  email: z.string().email({ message: "Please enter a valid email address." }),
  phoneNumber: z.string().min(10, { message: "Please enter a valid phone number." }),
  budget: z.string().min(1, { message: "Please enter your budget." }),
  message: z.string().min(10, { message: "Message must be at least 10 characters." }),
})

export default function ContactForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      phoneNumber: "",
      budget: "",
      message: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      form.reset()
      alert("Thank you for your message. We'll get back to you soon!")
    }, 2000)
  }

  return (
    <section className="bg-background py-20">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl font-bold text-foreground sm:text-4xl mb-4">Get in Touch</h2>
          <p className="text-lg text-muted-foreground">
            We'd love to hear from you. Fill out the form below and we'll get back to you as soon as possible.
          </p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
        >
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input placeholder="John Doe" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input placeholder="john@example.com" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="phoneNumber"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Phone Number</FormLabel>
                    <FormControl>
                      <Input placeholder="+1 (555) 000-0000" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="budget"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Budget</FormLabel>
                    <FormControl>
                      <Input placeholder="$1,000 - $5,000" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="message"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Message</FormLabel>
                    <FormControl>
                      <Textarea placeholder="Tell us about your project..." className="min-h-[120px]" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? "Sending..." : "Send Message"}
              </Button>
            </form>
          </Form>
        </motion.div>
      </div>
    </section>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form"

const formSchema = z.object({
  email: z.string().email({ message: "Please enter a valid email address." }),
})

export default function NewsletterSubscribe() {
  const [isSubmitting, setIsSubmitting] = useState(false)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      form.reset()
      alert("Thank you for subscribing to our newsletter!")
    }, 2000)
  }

  return (
    <section className="bg-background py-20">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-3xl p-8 shadow-lg"
        >
          <h2 className="text-2xl font-bold text-foreground mb-4 text-center">Stay Inspired</h2>
          <p className="text-muted-foreground mb-6 text-center">
            Subscribe to our newsletter for the latest updates on minimal design and floral artistry.
          </p>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <Input placeholder="Enter your email" {...field} className="rounded-full" />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full rounded-full" disabled={isSubmitting}>
                {isSubmitting ? "Subscribing..." : "Subscribe"}
              </Button>
            </form>
          </Form>
        </motion.div>
      </div>
    </section>
  )
}

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

import { useRef, useEffect, useState, useCallback } from "react"
import { motion } from "framer-motion"

interface Particle {
  x: number
  y: number
  size: number
  speedX: number
  speedY: number
  color: string
  opacity: number
}

interface AnimatedBackgroundProps {
  variant?: "network" | "globe" | "data" | "waves"
  intensity?: number
  colorScheme?: "blue" | "purple" | "green" | "multi"
}

export default function AnimatedBackground({
  variant = "network",
  intensity = 50,
  colorScheme = "blue",
}: AnimatedBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const particlesRef = useRef<Particle[]>([])
  const lastFrameTimeRef = useRef<number>(0)
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
  const [isInitialized, setIsInitialized] = useState(false)
  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null)

  // Frame rate limit (60 FPS)
  const frameLimit = 60

  // Color schemes
  const colorSchemes = {
    blue: ["#0070f3", "#00a2ff", "#0047ab", "#1e90ff"],
    purple: ["#8a2be2", "#9370db", "#ba55d3", "#9932cc"],
    green: ["#00fa9a", "#00ff7f", "#32cd32", "#3cb371"],
    multi: ["#0070f3", "#8a2be2", "#00fa9a", "#ff6347"],
  }

  const selectedColors = colorSchemes[colorScheme]

  // Debounced resize handler
  const debouncedResize = useCallback(() => {
    if (resizeTimeoutRef.current) {
      clearTimeout(resizeTimeoutRef.current)
    }

    resizeTimeoutRef.current = setTimeout(() => {
      if (canvasRef.current) {
        const { width, height } = canvasRef.current.getBoundingClientRect()
        canvasRef.current.width = width
        canvasRef.current.height = height
        setDimensions({ width, height })
      }
    }, 200)
  }, [])

  // Initialize canvas and handle resize
  useEffect(() => {
    if (!canvasRef.current) return

    const updateDimensions = () => {
      if (canvasRef.current) {
        const { width, height } = canvasRef.current.getBoundingClientRect()
        canvasRef.current.width = width
        canvasRef.current.height = height
        setDimensions({ width, height })
      }
    }

    updateDimensions()
    window.addEventListener("resize", debouncedResize)

    // Handle visibility change to pause animation when tab is not active
    const handleVisibilityChange = () => {
      if (document.hidden) {
        if (animationRef.current) {
          cancelAnimationFrame(animationRef.current)
        }
      } else {
        if (isInitialized) {
          animationRef.current = requestAnimationFrame(animate)
        }
      }
    }

    document.addEventListener("visibilitychange", handleVisibilityChange)

    return () => {
      window.removeEventListener("resize", debouncedResize)
      document.removeEventListener("visibilitychange", handleVisibilityChange)
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current)
      }
    }
  }, [debouncedResize, isInitialized])

  // Initialize particles when dimensions or settings change
  useEffect(() => {
    if (dimensions.width === 0 || dimensions.height === 0) return

    // Adjust particle count based on screen size and intensity
    const isMobile = dimensions.width < 768
    const baseCount = isMobile ? 30 : 50
    const particleCount = Math.floor((intensity * baseCount) / 100)
    const newParticles: Particle[] = []

    for (let i = 0; i < particleCount; i++) {
      const color = selectedColors[Math.floor(Math.random() * selectedColors.length)]

      newParticles.push({
        x: Math.random() * dimensions.width,
        y: Math.random() * dimensions.height,
        size: Math.random() * (isMobile ? 2 : 3) + 1,
        speedX: (Math.random() - 0.5) * (isMobile ? 0.3 : 0.5),
        speedY: (Math.random() - 0.5) * (isMobile ? 0.3 : 0.5),
        color,
        opacity: Math.random() * 0.5 + 0.2,
      })
    }

    particlesRef.current = newParticles
    setIsInitialized(true)
  }, [dimensions, intensity, selectedColors])

  // Animation function with frame rate limiting
  const animate = (timestamp: number) => {
    // Frame rate limiting
    if (timestamp - lastFrameTimeRef.current < 1000 / frameLimit) {
      animationRef.current = requestAnimationFrame(animate)
      return
    }
    lastFrameTimeRef.current = timestamp

    if (!canvasRef.current) return

    const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    if (!ctx) return

    ctx.clearRect(0, 0, dimensions.width, dimensions.height)

    // Update and draw particles
    const particles = particlesRef.current

    for (let i = 0; i < particles.length; i++) {
      const p = particles[i]

      // Update position
      p.x += p.speedX
      p.y += p.speedY

      // Bounce off edges
      if (p.x < 0 || p.x > dimensions.width) p.speedX *= -1
      if (p.y < 0 || p.y > dimensions.height) p.speedY *= -1

      // Draw particle
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
      ctx.fillStyle = p.color
      ctx.globalAlpha = p.opacity
      ctx.fill()

      // Draw connections (for network variant)
      if (variant === "network") {
        // Limit connection checks for better performance
        const connectionLimit = dimensions.width < 768 ? 5 : 10
        const checkLimit = Math.min(particles.length, i + connectionLimit)

        for (let j = i + 1; j < checkLimit; j++) {
          const p2 = particles[j]
          const dx = p.x - p2.x
          const dy = p.y - p2.y
          const distance = Math.sqrt(dx * dx + dy * dy)

          const connectionDistance = dimensions.width < 768 ? 70 : 100
          if (distance < connectionDistance) {
            ctx.beginPath()
            ctx.moveTo(p.x, p.y)
            ctx.lineTo(p2.x, p2.y)
            ctx.strokeStyle = `rgba(${Number.parseInt(p.color.slice(1, 3), 16)}, ${Number.parseInt(p.color.slice(3, 5), 16)}, ${Number.parseInt(p.color.slice(5, 7), 16)}, ${0.2 - distance / 500})`
            ctx.stroke()
          }
        }
      }
    }

    animationRef.current = requestAnimationFrame(animate)
  }

  // Start animation loop
  useEffect(() => {
    if (!canvasRef.current || !isInitialized || dimensions.width === 0) return

    // Only start animation if page is visible
    if (!document.hidden) {
      animationRef.current = requestAnimationFrame(animate)
    }

    return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [dimensions, isInitialized]) // Removed 'animate' dependency

  // Render different variants
  const renderVariant = () => {
    // Adjust rendering based on screen size
    const isMobile = dimensions.width < 768

    switch (variant) {
      case "globe":
        return (
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <motion.div
              className={`${isMobile ? "w-[300px] h-[300px]" : "w-[500px] h-[500px]"} rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20`}
              animate={{
                scale: [1, 1.05, 1],
                rotate: [0, 360],
              }}
              transition={{
                duration: 20,
                repeat: Number.POSITIVE_INFINITY,
                ease: "linear",
              }}
            />
          </div>
        )
      case "waves":
        return (
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {[...Array(isMobile ? 3 : 5)].map((_, i) => (
              <motion.div
                key={i}
                className="absolute bottom-0 left-0 right-0 h-[100px] bg-gradient-to-t from-blue-500/10 to-transparent"
                style={{
                  bottom: `${i * 50}px`,
                  opacity: 1 - i * 0.15,
                }}
                animate={{
                  y: [0, -20, 0],
                }}
                transition={{
                  duration: 3 + i,
                  repeat: Number.POSITIVE_INFINITY,
                  ease: "easeInOut",
                  delay: i * 0.5,
                }}
              />
            ))}
          </div>
        )
      case "data":
        return (
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-0 opacity-30">
              {[...Array(isMobile ? 10 : 20)].map((_, i) => (
                <motion.div
                  key={i}
                  className="absolute h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent"
                  style={{
                    top: `${Math.random() * 100}%`,
                    left: 0,
                    right: 0,
                    height: `${Math.random() * 2 + 1}px`,
                  }}
                  animate={{
                    x: ["-100%", "100%"],
                    opacity: [0, 1, 0],
                  }}
                  transition={{
                    duration: Math.random() * 5 + 5,
                    repeat: Number.POSITIVE_INFINITY,
                    delay: Math.random() * 5,
                  }}
                />
              ))}
            </div>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />
      {renderVariant()}
    </div>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Settings } from "lucide-react"

interface BackgroundControlsProps {
  onVariantChange: (variant: "network" | "globe" | "data" | "waves") => void
  onIntensityChange: (intensity: number) => void
  onColorSchemeChange: (scheme: "blue" | "purple" | "green" | "multi") => void
}

export default function BackgroundControls({
  onVariantChange,
  onIntensityChange,
  onColorSchemeChange,
}: BackgroundControlsProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [intensity, setIntensity] = useState(50)

  const handleIntensityChange = (value: number[]) => {
    const newIntensity = value[0]
    setIntensity(newIntensity)
    onIntensityChange(newIntensity)
  }

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <Button variant="outline" size="icon" className="rounded-full shadow-lg" onClick={() => setIsOpen(!isOpen)}>
        <Settings className="h-4 w-4" />
      </Button>

      <motion.div
        className="absolute bottom-full right-0 mb-2 p-4 bg-background/80 backdrop-blur-md rounded-lg shadow-lg w-64"
        initial={{ opacity: 0, y: 10, scale: 0.9 }}
        animate={isOpen ? { opacity: 1, y: 0, scale: 1 } : { opacity: 0, y: 10, scale: 0.9 }}
        transition={{ duration: 0.2 }}
      >
        <h3 className="font-medium mb-3">Background Settings</h3>

        <div className="space-y-4">
          <div className="space-y-2">
            <label className="text-sm text-muted-foreground">Animation Style</label>
            <Select onValueChange={(value) => onVariantChange(value as any)} defaultValue="network">
              <SelectTrigger>
                <SelectValue placeholder="Select style" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="network">Network</SelectItem>
                <SelectItem value="globe">Globe</SelectItem>
                <SelectItem value="waves">Waves</SelectItem>
                <SelectItem value="data">Data Flow</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <label className="text-sm text-muted-foreground">Color Scheme</label>
            <Select onValueChange={(value) => onColorSchemeChange(value as any)} defaultValue="blue">
              <SelectTrigger>
                <SelectValue placeholder="Select colors" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="blue">Blue</SelectItem>
                <SelectItem value="purple">Purple</SelectItem>
                <SelectItem value="green">Green</SelectItem>
                <SelectItem value="multi">Multi-color</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <div className="flex justify-between">
              <label className="text-sm text-muted-foreground">Intensity</label>
              <span className="text-sm text-muted-foreground">{intensity}%</span>
            </div>
            <Slider defaultValue={[50]} value={[intensity]} max={100} step={1} onValueChange={handleIntensityChange} />
          </div>
        </div>
      </motion.div>
    </div>
  )
}

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

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Check } from "lucide-react"

const formSchema = z.object({
  fullName: z.string().min(2, { message: "Full name must be at least 2 characters." }),
  email: z.string().email({ message: "Please enter a valid email address." }),
  phoneNumber: z.string().min(10, { message: "Please enter a valid phone number." }),
  country: z.string().min(1, { message: "Please select a country." }),
  dataPackage: z.string().min(1, { message: "Please select a data package." }),
})

const countries = [
  { value: "th", label: "Thailand" },
  { value: "sg", label: "Singapore" },
  { value: "my", label: "Malaysia" },
  { value: "jp", label: "Japan" },
  { value: "kr", label: "South Korea" },
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "au", label: "Australia" },
]

const dataPackages = [
  { value: "1gb-7days", label: "1GB / 7 Days - $10" },
  { value: "3gb-15days", label: "3GB / 15 Days - $20" },
  { value: "5gb-30days", label: "5GB / 30 Days - $30" },
  { value: "10gb-30days", label: "10GB / 30 Days - $50" },
  { value: "unlimited-7days", label: "Unlimited / 7 Days - $35" },
]

export default function ESIMOrderForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSuccess, setIsSuccess] = useState(false)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: "",
      email: "",
      phoneNumber: "",
      country: "",
      dataPackage: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      setIsSuccess(true)
      // Reset success state after 3 seconds
      setTimeout(() => setIsSuccess(false), 3000)
    }, 2000)
  }

  return (
    <Card className="w-full max-w-md mx-auto bg-background/80 backdrop-blur-md shadow-xl border-primary/10">
      <CardHeader>
        <CardTitle className="text-2xl">Order Your eSIM</CardTitle>
        <CardDescription>Get instant connectivity worldwide with our AI-powered eSIM</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="fullName"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Full Name</FormLabel>
                  <FormControl>
                    <Input placeholder="John Doe" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="john@example.com" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="phoneNumber"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Phone Number</FormLabel>
                  <FormControl>
                    <Input placeholder="+95 9123456789" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="country"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Destination Country</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select country" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {countries.map((country) => (
                        <SelectItem key={country.value} value={country.value}>
                          {country.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="dataPackage"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Data Package</FormLabel>
                  <Select onValueChange={field.onChange} defaultValue={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select package" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      {dataPackages.map((pkg) => (
                        <SelectItem key={pkg.value} value={pkg.value}>
                          {pkg.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full mt-4" disabled={isSubmitting || isSuccess}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Processing...
                </>
              ) : isSuccess ? (
                <>
                  <Check className="mr-2 h-4 w-4" />
                  Order Successful!
                </>
              ) : (
                "Order Now"
              )}
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex justify-center text-xs text-muted-foreground">
        Your eSIM will be delivered instantly to your email
      </CardFooter>
    </Card>
  )
}

[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "esim-myanmar",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "framer-motion": "^10.16.4",
    "lucide-react": "^0.292.0",
    "next": "14.0.3",
    "next-themes": "^0.2.1",
    "qrcode.react": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20.9.2",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.54.0",
    "eslint-config-next": "14.0.3",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.2.2"
  }
}

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

import { useState, useEffect, useRef } from "react"

export default function PerformanceMonitor() {
  const [fps, setFps] = useState(0)
  const [isVisible, setIsVisible] = useState(false)
  const frameCountRef = useRef(0)
  const lastTimeRef = useRef(performance.now())
  const animationRef = useRef(0)

  useEffect(() => {
    const updateFPS = (time: number) => {
      frameCountRef.current++

      const elapsed = time - lastTimeRef.current

      if (elapsed >= 1000) {
        setFps(Math.round((frameCountRef.current * 1000) / elapsed))
        frameCountRef.current = 0
        lastTimeRef.current = time
      }

      animationRef.current = requestAnimationFrame(updateFPS)
    }

    animationRef.current = requestAnimationFrame(updateFPS)

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

  return (
    <div className="fixed bottom-4 left-4 z-50">
      <button
        onClick={() => setIsVisible(!isVisible)}
        className="bg-background/80 backdrop-blur-md text-xs px-2 py-1 rounded border border-border"
      >
        {isVisible ? "Hide Stats" : "Show Stats"}
      </button>

      {isVisible && (
        <div className="mt-2 bg-background/80 backdrop-blur-md p-2 rounded border border-border text-xs">
          <p>FPS: {fps}</p>
        </div>
      )}
    </div>
  )
}

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

import { useState, useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { X, Send, Bot, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface AIAssistantProps {
  onClose: () => void
  currentStep: number
}

interface Message {
  id: number
  text: string
  sender: "ai" | "user"
  timestamp: Date
}

export default function AIAssistant({ onClose, currentStep }: AIAssistantProps) {
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

  // Initial greeting based on current step
  useEffect(() => {
    const initialMessages = [
      "Hi there! I'm your AI assistant. I can help you select the best carrier for your needs. What type of usage are you planning?",
      "I'll help you verify your contact information. Do you have any questions about why we need this information?",
      "I can recommend a data plan based on your usage. How much data do you typically use per month?",
      "I'll help you choose a payment method. Do you prefer mobile payment or bank transfer?",
      "I'll guide you through uploading your payment proof. Need help with taking a clear screenshot?",
      "I'm reviewing your order details. Is there anything specific you'd like me to explain?",
      "Congratulations on your new eSIM! Do you need help with installation?",
    ]

    setMessages([
      {
        id: 1,
        text: initialMessages[currentStep],
        sender: "ai",
        timestamp: new Date(),
      },
    ])
  }, [currentStep])

  // Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [])

  // Handle sending a message
  const handleSendMessage = () => {
    if (!input.trim()) return

    // Add user message
    const userMessage: Message = {
      id: Date.now(),
      text: input,
      sender: "user",
      timestamp: new Date(),
    }

    setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsTyping(true)

    // Simulate AI response
    setTimeout(() => {
      const responses = [
        "Great question! For your usage, I recommend MYTEL as they have the best coverage in urban areas and competitive data rates.",
        "We need your email to send the eSIM QR code and your phone number for verification purposes. All your data is encrypted and secure.",
        "Based on your usage, I recommend the 5GB plan. It's our most popular option and offers a good balance of data and cost.",
        "Myanmar Pay is currently offering a 5% discount on all transactions. Would you like to proceed with that?",
        "Your payment proof looks good! Make sure the transaction ID is visible in the screenshot for faster verification.",
        "Your order details look perfect. Your eSIM will be delivered to your email within minutes after activation.",
        "To install your eSIM, go to Settings > Mobile Data > Add Data Plan, then scan the QR code we sent to your email.",
      ]

      const aiMessage: Message = {
        id: Date.now(),
        text: responses[Math.floor(Math.random() * responses.length)],
        sender: "ai",
        timestamp: new Date(),
      }

      setMessages((prev) => [...prev, aiMessage])
      setIsTyping(false)
    }, 1500)
  }

  return (
    <motion.div
      className="absolute bottom-12 left-1/2 transform -translate-x-1/2 w-full max-w-md bg-background rounded-lg shadow-xl border border-primary/10 overflow-hidden z-10"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      transition={{ duration: 0.3 }}
    >
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b">
        <div className="flex items-center gap-2">
          <Bot className="h-5 w-5 text-primary" />
          <span className="font-medium">AI Assistant</span>
        </div>
        <Button variant="ghost" size="icon" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      {/* Messages */}
      <div className="p-4 h-80 overflow-y-auto">
        {messages.map((message) => (
          <div key={message.id} className={`flex mb-4 ${message.sender === "user" ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[80%] rounded-lg p-3 ${
                message.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
              }`}
            >
              <div className="flex items-center gap-2 mb-1">
                {message.sender === "ai" ? <Bot className="h-4 w-4" /> : <User className="h-4 w-4" />}
                <span className="text-xs opacity-70">{message.sender === "ai" ? "AI Assistant" : "You"}</span>
              </div>
              <p className="text-sm">{message.text}</p>
            </div>
          </div>
        ))}

        {isTyping && (
          <div className="flex mb-4 justify-start">
            <div className="bg-muted max-w-[80%] rounded-lg p-3">
              <div className="flex items-center gap-2 mb-1">
                <Bot className="h-4 w-4" />
                <span className="text-xs opacity-70">AI Assistant</span>
              </div>
              <div className="flex gap-1">
                <div className="w-2 h-2 rounded-full bg-primary animate-bounce" style={{ animationDelay: "0ms" }}></div>
                <div
                  className="w-2 h-2 rounded-full bg-primary animate-bounce"
                  style={{ animationDelay: "150ms" }}
                ></div>
                <div
                  className="w-2 h-2 rounded-full bg-primary animate-bounce"
                  style={{ animationDelay: "300ms" }}
                ></div>
              </div>
            </div>
          </div>
        )}

        <div ref={messagesEndRef} />
      </div>

      {/* Input */}
      <div className="p-3 border-t">
        <div className="flex gap-2">
          <Input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type your question..."
            onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
          />
          <Button size="icon" onClick={handleSendMessage}>
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/ContactVerification.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { CheckCircle, AlertCircle } from "lucide-react"

interface ContactVerificationProps {
  phoneNumber: string
  email: string
  onPhoneChange: (phone: string) => void
  onEmailChange: (email: string) => void
}

export default function ContactVerification({
  phoneNumber,
  email,
  onPhoneChange,
  onEmailChange,
}: ContactVerificationProps) {
  const [phoneVerified, setPhoneVerified] = useState(false)
  const [emailVerified, setEmailVerified] = useState(false)
  const [verificationCode, setVerificationCode] = useState("")
  const [showPhoneVerification, setShowPhoneVerification] = useState(false)

  const handleVerifyPhone = () => {
    setShowPhoneVerification(true)
  }

  const handleSubmitCode = () => {
    if (verificationCode === "123456") {
      setPhoneVerified(true)
    }
  }

  const handleVerifyEmail = () => {
    // Simulate email verification
    setTimeout(() => {
      setEmailVerified(true)
    }, 1500)
  }

  return (
    <div>
      <h3 className="text-lg font-medium mb-4">Verify Your Contact Information</h3>
      <p className="text-sm text-muted-foreground mb-4">
        We'll send your eSIM details to your email and verification code to your phone.
      </p>

      <div className="space-y-4">
        <div>
          <Label htmlFor="phone" className="flex items-center justify-between">
            Phone Number
            {phoneVerified && (
              <span className="text-xs flex items-center text-green-500">
                <CheckCircle className="h-3 w-3 mr-1" />
                Verified
              </span>
            )}
          </Label>
          <div className="flex gap-2 mt-1">
            <Input
              id="phone"
              placeholder="+95 9123456789"
              value={phoneNumber}
              onChange={(e) => onPhoneChange(e.target.value)}
              className={phoneVerified ? "border-green-500" : ""}
            />
            <Button
              variant="outline"
              size="sm"
              onClick={handleVerifyPhone}
              disabled={!phoneNumber || phoneNumber.length < 10 || phoneVerified}
            >
              Verify
            </Button>
          </div>
        </div>

        {showPhoneVerification && !phoneVerified && (
          <div className="bg-muted p-3 rounded-lg">
            <Label htmlFor="code" className="text-sm">
              Enter the 6-digit code sent to your phone
            </Label>
            <div className="flex gap-2 mt-1">
              <Input
                id="code"
                placeholder="123456"
                value={verificationCode}
                onChange={(e) => setVerificationCode(e.target.value)}
                maxLength={6}
              />
              <Button variant="outline" size="sm" onClick={handleSubmitCode} disabled={verificationCode.length !== 6}>
                Submit
              </Button>
            </div>
            <p className="text-xs text-muted-foreground mt-2">
              For demo purposes, enter "123456" as the verification code.
            </p>
          </div>
        )}

        <div>
          <Label htmlFor="email" className="flex items-center justify-between">
            Email Address
            {emailVerified && (
              <span className="text-xs flex items-center text-green-500">
                <CheckCircle className="h-3 w-3 mr-1" />
                Verified
              </span>
            )}
          </Label>
          <div className="flex gap-2 mt-1">
            <Input
              id="email"
              type="email"
              placeholder="your@email.com"
              value={email}
              onChange={(e) => onEmailChange(e.target.value)}
              className={emailVerified ? "border-green-500" : ""}
            />
            <Button
              variant="outline"
              size="sm"
              onClick={handleVerifyEmail}
              disabled={!email || !email.includes("@") || emailVerified}
            >
              Verify
            </Button>
          </div>
        </div>

        <div className="flex items-start gap-2 text-sm text-muted-foreground bg-yellow-50 dark:bg-yellow-950/30 p-2 rounded-lg">
          <AlertCircle className="h-4 w-4 text-yellow-500 mt-0.5" />
          <p>Your contact information is securely encrypted and only used for eSIM delivery and service updates.</p>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/PaymentMethod.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Check, CreditCard, Smartphone, Building } from "lucide-react"

interface PaymentMethodProps {
  selectedMethod: string
  onSelect: (method: string) => void
}

const paymentMethods = [
  {
    id: "myanmarpay",
    name: "Myanmar Pay",
    icon: <Smartphone className="h-5 w-5" />,
    description: "Fast mobile payment",
    recommended: true,
  },
  {
    id: "kbzpay",
    name: "KBZ Pay",
    icon: <Smartphone className="h-5 w-5" />,
    description: "Secure mobile wallet",
  },
  {
    id: "wavepay",
    name: "Wave Pay",
    icon: <Smartphone className="h-5 w-5" />,
    description: "Quick digital payments",
  },
  {
    id: "banktransfer",
    name: "Bank Transfer",
    icon: <Building className="h-5 w-5" />,
    description: "Direct bank deposit",
  },
  {
    id: "creditcard",
    name: "Credit Card",
    icon: <CreditCard className="h-5 w-5" />,
    description: "Visa, Mastercard, JCB",
  },
]

export default function PaymentMethod({ selectedMethod, onSelect }: PaymentMethodProps) {
  return (
    <div>
      <h3 className="text-lg font-medium mb-4">Select Payment Method</h3>
      <p className="text-sm text-muted-foreground mb-4">
        Our AI will recommend the most convenient payment method for you.
      </p>

      <div className="space-y-3 max-h-[250px] overflow-y-auto pr-2">
        {paymentMethods.map((method) => (
          <motion.div
            key={method.id}
            className={`border rounded-lg p-3 cursor-pointer relative ${
              selectedMethod === method.id ? "border-primary bg-primary/5" : "border-border hover:border-primary/50"
            }`}
            onClick={() => onSelect(method.id)}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 p-2 rounded-full text-primary">{method.icon}</div>
                <div>
                  <h4 className="font-medium">{method.name}</h4>
                  <p className="text-xs text-muted-foreground">{method.description}</p>
                </div>
              </div>

              {method.recommended && (
                <div className="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full h-fit">AI Recommended</div>
              )}
            </div>

            {selectedMethod === method.id && (
              <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-0.5">
                <Check className="h-3 w-3" />
              </div>
            )}
          </motion.div>
        ))}
      </div>
    </div>
  )
}

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

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

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

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

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

import type React from "react"

import { useState, useEffect, createContext, useContext } from "react"

type ToastProps = {
  title: string
  description?: string
  duration?: number
}

type ToastContextType = {
  toast: (props: ToastProps) => void
}

const ToastContext = createContext<ToastContextType>({
  toast: () => {},
})

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<(ToastProps & { id: number })[]>([])

  const toast = ({ title, description, duration = 3000 }: ToastProps) => {
    const id = Date.now()
    setToasts((prev) => [...prev, { id, title, description, duration }])
  }

  useEffect(() => {
    if (toasts.length > 0) {
      const timer = setTimeout(() => {
        setToasts((prev) => prev.slice(1))
      }, toasts[0].duration)

      return () => clearTimeout(timer)
    }
  }, [toasts])

  return (
    <ToastContext.Provider value={{ toast }}>
      {children}
      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
        {toasts.map((toast) => (
          <div
            key={toast.id}
            className="bg-background border rounded-lg shadow-lg p-4 max-w-sm animate-in fade-in slide-in-from-bottom-5"
          >
            <div className="font-medium">{toast.title}</div>
            {toast.description && <div className="text-sm text-muted-foreground mt-1">{toast.description}</div>}
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  )
}

export const useToast = () => useContext(ToastContext)

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

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

type Language = "en" | "my"

type LanguageContextType = {
  language: Language
  setLanguage: (language: Language) => void
  t: (key: string) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

// English translations
const enTranslations: Record<string, string> = {
  // Header
  "nav.plans": "Plans",
  "nav.features": "Features",
  "nav.coverage": "Coverage",
  "nav.support": "Support",
  "nav.login": "Log in",
  "nav.getStarted": "Get Started",

  // Homepage
  "home.title": "AI-Powered eSIM",
  "home.subtitle":
    "Experience our intelligent ordering system that personalizes your eSIM selection and activation process.",
  "home.feature1": "Instant Activation",
  "home.feature2": "Global Coverage",
  "home.feature3": "AI-Optimized Plans",
  "home.feature4": "Secure Transactions",

  // Order Flow
  "order.steps.carrier": "carrier",
  "order.steps.contact": "contact",
  "order.steps.plan": "plan",
  "order.steps.payment": "payment",
  "order.steps.confirmation": "confirmation",
  "order.steps.activation": "activation",

  "order.ai.welcome": "Welcome! I'll help you select the best eSIM for your needs.",
  "order.ai.carrier": "Let's start by selecting your preferred carrier. I've analyzed coverage in your area.",
  "order.ai.contact": "Great! Now I need your contact details to set up your eSIM.",
  "order.ai.plan": "Now, let's choose a data plan that fits your needs. I've analyzed your typical usage patterns.",
  "order.ai.payment": "Please complete the payment using MyanmarPay MMQR to continue.",
  "order.ai.confirmation": "Let's review your order before finalizing.",
  "order.ai.activation": "Your eSIM is being activated! You'll receive details shortly.",

  "order.carrier.title": "Select Your Carrier",
  "order.carrier.description": "Choose your preferred network provider",

  "order.contact.title": "Your Contact Information",
  "order.contact.description": "We'll use these details to deliver your eSIM",
  "order.contact.phoneNumber": "Phone Number",
  "order.contact.email": "Email",
  "order.contact.continue": "Continue",

  "order.plan.title": "Choose Your Data Plan",
  "order.plan.description": "Select the plan that best fits your needs",
  "order.plan.for": "for",
  "order.plan.continue": "Continue to Payment",

  "order.payment.title": "Payment",
  "order.payment.description": "Complete your payment to activate your eSIM",
  "order.payment.mmk": "MMK",
  "order.payment.order": "Order #",
  "order.payment.transactionRef": "Transaction Ref:",
  "order.payment.expires": "QR code expires in",
  "order.payment.instructions":
    "Open your MyanmarPay app|Scan this QR code|Confirm the payment amount|Complete the payment",
  "order.payment.completed": "I've completed the payment",
  "order.payment.back": "Back",
  "order.payment.processing": "Processing Payment",
  "order.payment.wait": "Please wait while we verify your payment. This will only take a moment.",
  "order.payment.successful": "Payment Successful!",
  "order.payment.received": "Your payment has been received.",
  "order.payment.details": "Payment Details",
  "order.payment.transactionID": "Transaction ID:",
  "order.payment.method": "Payment Method:",
  "order.payment.date": "Date:",
  "order.payment.continue": "Continue to Activation",
  "order.payment.expired": "Payment Time Expired",
  "order.payment.expiredMessage": "The QR code has expired. Please try again with a new QR code.",
  "order.payment.newQR": "Generate New QR Code",

  "order.confirmation.title": "Confirm Your Order",
  "order.confirmation.description": "Review your eSIM details before finalizing",
  "order.confirmation.summary": "Order Summary",
  "order.confirmation.carrier": "Carrier:",
  "order.confirmation.plan": "Plan:",
  "order.confirmation.validity": "Validity:",
  "order.confirmation.paymentMethod": "Payment Method:",
  "order.confirmation.contact": "Contact:",
  "order.confirmation.phone": "Phone:",
  "order.confirmation.total": "Total:",
  "order.confirmation.confirm": "Confirm and Activate",
  "order.confirmation.processing": "Processing...",

  "order.activation.title": "eSIM Activation",
  "order.activation.description": "Your eSIM is being activated",
  "order.activation.complete": "Activation Complete!",
  "order.activation.success":
    "Your eSIM has been successfully activated. You'll receive an email with all the details.",
  "order.activation.details": "eSIM Details",
  "order.activation.esimID": "eSIM ID:",
  "order.activation.activationDate": "Activation Date:",
  "order.activation.expiryDate": "Expiry Date:",
  "order.activation.download": "Download eSIM",
  "order.activation.instructions": "View Instructions",
  "order.activation.activating": "Activating Your eSIM",
  "order.activation.wait": "Please wait while we activate your eSIM. This will only take a moment.",

  // Language switcher
  language: "ဗမာ",
}

// Myanmar (Burmese) translations
const myTranslations: Record<string, string> = {
  // Header
  "nav.plans": "အစီအစဉ်များ",
  "nav.features": "အင်္ဂါရပ်များ",
  "nav.coverage": "ဖုံးလွှမ်းမှု",
  "nav.support": "အကူအညီ",
  "nav.login": "အကောင့်ဝင်ရန်",
  "nav.getStarted": "စတင်ရန်",

  // Homepage
  "home.title": "AI-အခြေခံ eSIM",
  "home.subtitle": "သင့်ရွေးချယ်မှုနှင့် eSIM အသက်သွင်းခြင်းလုပ်ငန်းစဉ်ကို ကိုယ်ပိုင်ပြုလုပ်ပေးသော ကျွန်ုပ်တို့၏ ဉာဏ်ရည်တု မှာယူမှုစနစ်ကို အသုံးပြုကြည့်ပါ။",
  "home.feature1": "ချက်ချင်းအသက်သွင်းခြင်း",
  "home.feature2": "ကမ္ဘာလုံးဆိုင်ရာဖုံးလွှမ်းမှု",
  "home.feature3": "AI-အကောင်းဆုံးပြုလုပ်ထားသော အစီအစဉ်များ",
  "home.feature4": "လုံခြုံသော ငွေပေးချေမှုများ",

  // Order Flow
  "order.steps.carrier": "ဆက်သွယ်ရေးကုမ္ပဏီ",
  "order.steps.contact": "ဆက်သွယ်ရန်",
  "order.steps.plan": "အစီအစဉ်",
  "order.steps.payment": "ငွေပေးချေမှု",
  "order.steps.confirmation": "အတည်ပြုခြင်း",
  "order.steps.activation": "အသက်သွင်းခြင်း",

  "order.ai.welcome": "ကြိုဆိုပါတယ်! သင့်အတွက် အကောင်းဆုံး eSIM ရွေးချယ်ရာတွင် ကူညီပေးပါမယ်။",
  "order.ai.carrier": "သင်နှစ်သက်ရာ ဆက်သွယ်ရေးကုမ္ပဏီကို ရွေးချယ်ခြင်းဖြင့် စတင်ကြပါစို့။ သင့်ဒေသရှိ ဖုံးလွှမ်းမှုကို ကျွန်ုပ်စိစစ်ထားပါသည်။",
  "order.ai.contact": "ကောင်းပါပြီ! ယခု သင့် eSIM ကို စတင်ရန် သင့်ဆက်သွယ်ရန် အချက်အလက်များ လိုအပ်ပါသည်။",
  "order.ai.plan": "ယခု သင့်လိုအပ်ချက်နှင့် ကိုက်ညီသော ဒေတာအစီအစဉ်ကို ရွေးချယ်ကြပါစို့။ သင့်အသုံးပြုမှုပုံစံကို ကျွန်ုပ်စိစစ်ထားပါသည်။",
  "order.ai.payment": "ဆက်လက်ရန် MyanmarPay MMQR ကို အသုံးပြု၍ ငွေပေးချေမှုပြုလုပ်ပါ။",
  "order.ai.confirmation": "အပြီးသတ်မလုပ်မီ သင့်အော်ဒါကို ပြန်လည်စစ်ဆေးကြည့်ကြပါစို့။",
  "order.ai.activation": "သင့် eSIM ကို အသက်သွင်းနေပါပြီ! အသေးစိတ်အချက်အလက်များကို မကြာမီ ရရှိပါမည်။",

  "order.carrier.title": "သင့်ဆက်သွယ်ရေးကုမ္ပဏီကို ရွေးချယ်ပါ",
  "order.carrier.description": "သင်နှစ်သက်ရာ ကွန်ရက်ပေးသူကို ရွေးချယ်ပါ",

  "order.contact.title": "သင့်ဆက်သွယ်ရန် အချက်အလက်",
  "order.contact.description": "သင့် eSIM ပေးပို့ရန် ဤအချက်အလက်များကို အသုံးပြုပါမည်",
  "order.contact.phoneNumber": "ဖုန်းနံပါတ်",
  "order.contact.email": "အီးမေးလ်",
  "order.contact.continue": "ဆက်လက်ရန်",

  "order.plan.title": "သင့်ဒေတာအစီအစဉ်ကို ရွေးချယ်ပါ",
  "order.plan.description": "သင့်လိုအပ်ချက်နှင့် အကိုက်ညီဆုံး အစီအစဉ်ကို ရွေးချယ်ပါ",
  "order.plan.for": "အတွက်",
  "order.plan.continue": "ငွေပေးချေရန် ဆက်သွားမည်",

  "order.payment.title": "ငွေပေးချေမှု",
  "order.payment.description": "သင့် eSIM ကို အသက်သွင်းရန် ငွေပေးချေမှုပြုလုပ်ပါ",
  "order.payment.mmk": "ကျပ်",
  "order.payment.order": "အော်ဒါ #",
  "order.payment.transactionRef": "ငွေပေးချေမှု ကိုးကားချက်:",
  "order.payment.expires": "QR ကုဒ် သက်တမ်းကုန်ဆုံးချိန်",
  "order.payment.instructions": "သင့် MyanmarPay အက်ပ်ကို ဖွင့်ပါ|ဤ QR ကုဒ်ကို စကင်ဖတ်ပါ|ငွေပေးချေမှုပမာဏကို အတည်ပြုပါ|ငွေပေးချေမှုပြုလုပ်ပါ",
  "order.payment.completed": "ငွေပေးချေမှု ပြီးဆုံးပါပြီ",
  "order.payment.back": "နောက်သို့",
  "order.payment.processing": "ငွေပေးချေမှု ဆောင်ရွက်နေသည်",
  "order.payment.wait": "သင့်ငွေပေးချေမှုကို စစ်ဆေးနေစဉ် ခဏစောင့်ပါ။ ဤသည်မှာ ခဏသာကြာပါမည်။",
  "order.payment.successful": "ငွေပေးချေမှု အောင်မြင်ပါသည်!",
  "order.payment.received": "သင့်ငွေပေးချေမှုကို လက်ခံရရှိပါပြီ။",
  "order.payment.details": "ငွေပေးချေမှု အသေးစိတ်",
  "order.payment.transactionID": "ငွေပေးချေမှု ID:",
  "order.payment.method": "ငွေပေးချေမှုနည်းလမ်း:",
  "order.payment.date": "ရက်စွဲ:",
  "order.payment.continue": "အသက်သွင်းခြင်းသို့ ဆက်သွားရန်",
  "order.payment.expired": "ငွေပေးချေမှု အချိန်ကုန်ဆုံးသွားပါပြီ",
  "order.payment.expiredMessage": "QR ကုဒ် သက်တမ်းကုန်ဆုံးသွားပါပြီ။ QR ကုဒ်အသစ်ဖြင့် ထပ်မံကြိုးစားပါ။",
  "order.payment.newQR": "QR ကုဒ်အသစ် ထုတ်ယူရန်",

  "order.confirmation.title": "သင့်အော်ဒါကို အတည်ပြုပါ",
  "order.confirmation.description": "အပြီးသတ်မလုပ်မီ သင့် eSIM အသေးစိတ်အချက်အလက်များကို ပြန်လည်စစ်ဆေးပါ",
  "order.confirmation.summary": "အော်ဒါအကျဉ်းချုပ်",
  "order.confirmation.carrier": "ဆက်သွယ်ရေးကုမ္ပဏီ:",
  "order.confirmation.plan": "အစီအစဉ်:",
  "order.confirmation.validity": "သက်တမ်း:",
  "order.confirmation.paymentMethod": "ငွေပေးချေမှုနည်းလမ်း:",
  "order.confirmation.contact": "ဆက်သွယ်ရန်:",
  "order.confirmation.phone": "ဖုန်း:",
  "order.confirmation.total": "စုစုပေါင်း:",
  "order.confirmation.confirm": "အတည်ပြု၍ အသက်သွင်းရန်",
  "order.confirmation.processing": "ဆောင်ရွက်နေသည်...",

  "order.activation.title": "eSIM အသက်သွင်းခြင်း",
  "order.activation.description": "သင့် eSIM ကို အသက်သွင်းနေပါသည်",
  "order.activation.complete": "အသက်သွင်းခြင်း ပြီးဆုံးပါပြီ!",
  "order.activation.success": "သင့် eSIM ကို အောင်မြင်စွာ အသက်သွင်းပြီးပါပြီ။ အသေးစိတ်အချက်အလက်အားလုံးပါဝင်သော အီးမေးလ်တစ်စောင် ရရှိပါမည်။",
  "order.activation.details": "eSIM အသေးစိတ်အချက်အလက်များ",
  "order.activation.esimID": "eSIM ID:",
  "order.activation.activationDate": "အသက်သွင်းသည့်ရက်စွဲ:",
  "order.activation.expiryDate": "သက်တမ်းကုန်ဆုံးရက်:",
  "order.activation.download": "eSIM ဒေါင်းလုဒ်လုပ်ရန်",
  "order.activation.instructions": "ညွှန်ကြားချက်များကြည့်ရန်",
  "order.activation.activating": "သင့် eSIM ကို အသက်သွင်းနေပါသည်",
  "order.activation.wait": "သင့် eSIM ကို အသက်သွင်းနေစဉ် ခဏစောင့်ပါ။ ဤသည်မှာ ခဏသာကြာပါမည်။",

  // Language switcher
  language: "English",
}

export const LanguageProvider = ({ children }: { children: ReactNode }) => {
  const [language, setLanguageState] = useState<Language>("en")

  // Load language preference from localStorage on initial render
  useEffect(() => {
    const savedLanguage = localStorage.getItem("language") as Language
    if (savedLanguage && (savedLanguage === "en" || savedLanguage === "my")) {
      setLanguageState(savedLanguage)
    }
  }, [])

  // Save language preference to localStorage when it changes
  const setLanguage = (newLanguage: Language) => {
    setLanguageState(newLanguage)
    localStorage.setItem("language", newLanguage)
  }

  // Translation function
  const t = (key: string): string => {
    const translations = language === "en" ? enTranslations : myTranslations
    return translations[key] || key
  }

  return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export const useLanguage = () => {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import "./globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import Header from "./components/Header"
import Footer from "./components/Footer"
import { ToastProvider } from "@/components/ui/use-toast"
import { LanguageProvider } from "./contexts/LanguageContext"
import type React from "react"

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

export const metadata = {
  title: "eSIM Myanmar - AI-Powered eSIM Solutions",
  description: "Get instant access to mobile connectivity worldwide with our AI-powered eSIM platform",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.className} min-h-screen bg-background text-foreground`}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <LanguageProvider>
            <ToastProvider>
              <Header />
              <main className="relative">{children}</main>
              <Footer />
            </ToastProvider>
          </LanguageProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isQuickEdit="true" isMerged="true"
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        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))",
        },
        airalo: {
          blue: "#0066FF",
          lightBlue: "#E6F0FF",
          darkBlue: "#004ECC",
          gray: "#F5F7FA",
          darkGray: "#6B7280",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      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 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 214 100% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 214 100% 97%;
    --secondary-foreground: 214 100% 50%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 214 100% 97%;
    --accent-foreground: 214 100% 50%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 214 100% 50%;
    --radius: 1rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 214 100% 50%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 214 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600;
}

.hover-lift {
  @apply transition-all duration-300 ease-in-out hover:-translate-y-1 hover:shadow-lg;
}

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

import { useState, useEffect } from "react"
import Link from "next/link"
import { useTheme } from "next-themes"
import { motion } from "framer-motion"
import { MoonIcon, SunIcon, Menu, X, ShoppingCart } from "lucide-react"
import { Button } from "@/components/ui/button"
import LanguageSwitcher from "./LanguageSwitcher"
import { useLanguage } from "../contexts/LanguageContext"

export default function Header() {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { t } = useLanguage()

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

  return (
    <header className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
      <div className="mx-auto flex max-w-7xl items-center justify-between p-4 lg:px-8" aria-label="Global">
        <div className="flex lg:flex-1">
          <Link href="/" className="-m-1.5 p-1.5">
            <span className="sr-only">Airalo eSIM</span>
            <div className="flex items-center">
              <div className="h-8 w-8 rounded-lg bg-airalo-blue text-white flex items-center justify-center font-bold">
                A
              </div>
              <span className="font-bold text-lg ml-2">Airalo</span>
            </div>
          </Link>
        </div>

        <div className="flex lg:hidden">
          <button
            type="button"
            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
            onClick={() => setIsMenuOpen(true)}
          >
            <span className="sr-only">Open main menu</span>
            <Menu className="h-6 w-6" aria-hidden="true" />
          </button>
        </div>

        <div className="hidden lg:flex lg:gap-x-8">
          <Link
            href="#esim"
            className="text-sm font-medium leading-6 text-gray-700 hover:text-airalo-blue transition-colors"
          >
            eSIMs
          </Link>
          <Link
            href="#regions"
            className="text-sm font-medium leading-6 text-gray-700 hover:text-airalo-blue transition-colors"
          >
            Regions
          </Link>
          <Link
            href="#countries"
            className="text-sm font-medium leading-6 text-gray-700 hover:text-airalo-blue transition-colors"
          >
            Countries
          </Link>
          <Link
            href="#support"
            className="text-sm font-medium leading-6 text-gray-700 hover:text-airalo-blue transition-colors"
          >
            Support
          </Link>
        </div>

        <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:gap-x-4 items-center">
          <LanguageSwitcher />
          <Link href="#cart" className="text-gray-700 hover:text-airalo-blue">
            <ShoppingCart className="h-5 w-5" />
          </Link>
          <Button size="sm" className="rounded-full bg-airalo-blue hover:bg-airalo-darkBlue">
            {t("nav.login")}
          </Button>
          {mounted && (
            <button
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
              className="rounded-full p-2 text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            >
              {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
            </button>
          )}
        </div>
      </div>

      {/* Mobile menu */}
      <div className={`lg:hidden ${isMenuOpen ? "fixed inset-0 z-50" : "hidden"}`}>
        <div className="fixed inset-0 bg-black/25" onClick={() => setIsMenuOpen(false)} />

        <motion.div
          className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:bg-gray-900 px-6 py-6 sm:max-w-sm"
          initial={{ x: "100%" }}
          animate={{ x: isMenuOpen ? 0 : "100%" }}
          transition={{ duration: 0.3 }}
        >
          <div className="flex items-center justify-between">
            <Link href="/" className="-m-1.5 p-1.5">
              <span className="sr-only">Airalo eSIM</span>
              <div className="flex items-center">
                <div className="h-8 w-8 rounded-lg bg-airalo-blue text-white flex items-center justify-center font-bold">
                  A
                </div>
                <span className="font-bold text-lg ml-2">Airalo</span>
              </div>
            </Link>
            <button
              type="button"
              className="-m-2.5 rounded-md p-2.5 text-gray-700"
              onClick={() => setIsMenuOpen(false)}
            >
              <span className="sr-only">Close menu</span>
              <X className="h-6 w-6" aria-hidden="true" />
            </button>
          </div>

          <div className="mt-6 flow-root">
            <div className="-my-6 divide-y divide-gray-200 dark:divide-gray-800">
              <div className="space-y-2 py-6">
                <Link
                  href="#esim"
                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-medium leading-7 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                  onClick={() => setIsMenuOpen(false)}
                >
                  eSIMs
                </Link>
                <Link
                  href="#regions"
                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-medium leading-7 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                  onClick={() => setIsMenuOpen(false)}
                >
                  Regions
                </Link>
                <Link
                  href="#countries"
                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-medium leading-7 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                  onClick={() => setIsMenuOpen(false)}
                >
                  Countries
                </Link>
                <Link
                  href="#support"
                  className="-mx-3 block rounded-lg px-3 py-2 text-base font-medium leading-7 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                  onClick={() => setIsMenuOpen(false)}
                >
                  Support
                </Link>
              </div>

              <div className="py-6 space-y-2">
                <div className="flex justify-between items-center mb-4">
                  <LanguageSwitcher />
                  <Link href="#cart" className="text-gray-700 dark:text-gray-200">
                    <ShoppingCart className="h-5 w-5" />
                  </Link>
                </div>
                <Button
                  className="w-full rounded-full bg-airalo-blue hover:bg-airalo-darkBlue"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {t("nav.login")}
                </Button>
              </div>

              <div className="py-6 flex justify-center">
                {mounted && (
                  <button
                    onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
                    className="rounded-full p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                  >
                    {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
                  </button>
                )}
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </header>
  )
}

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

import { useLanguage } from "../contexts/LanguageContext"
import { Button } from "@/components/ui/button"
import { Globe } from "lucide-react"

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

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

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={toggleLanguage}
      className="flex items-center gap-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full px-3"
    >
      <Globe className="h-4 w-4" />
      <span className="text-sm font-medium">{t("language")}</span>
    </Button>
  )
}

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

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Globe, Smartphone, Zap } from "lucide-react"

export default function Hero() {
  return (
    <div className="relative bg-white dark:bg-gray-900 overflow-hidden">
      <div className="mx-auto max-w-7xl px-6 py-12 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-20">
        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg lg:flex-shrink-0">
          <motion.div
            className="mb-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <span className="inline-block rounded-full bg-airalo-lightBlue px-3 py-1 text-sm font-medium text-airalo-blue mb-4">
              Travel Smarter
            </span>
            <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
              Stay Connected Anywhere with eSIM
            </h1>
            <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
              Instant mobile data for 200+ countries and regions. No physical SIM card needed.
            </p>
          </motion.div>

          <motion.div
            className="flex flex-col sm:flex-row gap-4 mb-10"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <Button className="rounded-full bg-airalo-blue hover:bg-airalo-darkBlue text-white px-6 py-6 h-auto">
              Get Your eSIM Now
            </Button>
            <Button
              variant="outline"
              className="rounded-full border-gray-300 text-gray-700 dark:text-gray-200 px-6 py-6 h-auto"
            >
              How It Works
            </Button>
          </motion.div>

          <motion.div
            className="grid grid-cols-3 gap-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            <div className="flex flex-col items-center text-center">
              <div className="w-12 h-12 rounded-full bg-airalo-lightBlue flex items-center justify-center mb-2">
                <Globe className="h-6 w-6 text-airalo-blue" />
              </div>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">200+ Countries</span>
            </div>
            <div className="flex flex-col items-center text-center">
              <div className="w-12 h-12 rounded-full bg-airalo-lightBlue flex items-center justify-center mb-2">
                <Smartphone className="h-6 w-6 text-airalo-blue" />
              </div>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Instant Activation</span>
            </div>
            <div className="flex flex-col items-center text-center">
              <div className="w-12 h-12 rounded-full bg-airalo-lightBlue flex items-center justify-center mb-2">
                <Zap className="h-6 w-6 text-airalo-blue" />
              </div>
              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">24/7 Support</span>
            </div>
          </motion.div>
        </div>

        <motion.div
          className="mt-16 sm:mt-24 lg:mt-0 lg:flex-1 lg:pl-10"
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
        >
          <div className="relative">
            <div className="absolute -left-10 -top-10 h-72 w-72 rounded-full bg-airalo-lightBlue blur-3xl opacity-30"></div>
            <img
              src="/placeholder.svg?height=600&width=500"
              alt="eSIM App Demo"
              className="relative z-10 rounded-3xl shadow-xl mx-auto lg:mx-0"
              width={500}
              height={600}
            />
            <div className="absolute -right-10 -bottom-10 h-72 w-72 rounded-full bg-airalo-lightBlue blur-3xl opacity-30"></div>
          </div>
        </motion.div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/DataPlanSelection.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"

interface DataPlanSelectionProps {
  selectedPlan: string
  onSelect: (plan: string) => void
}

const dataPlans = [
  {
    id: "basic",
    name: "Basic",
    data: "1GB",
    validity: "7 Days",
    price: "9.00",
    features: ["Social Media Access", "Email & Messaging"],
  },
  {
    id: "standard",
    name: "Standard",
    data: "3GB",
    validity: "15 Days",
    price: "19.00",
    features: ["Video Streaming", "Social Media Access", "Email & Messaging"],
    recommended: true,
  },
  {
    id: "premium",
    name: "Premium",
    data: "5GB",
    validity: "30 Days",
    price: "29.00",
    features: ["HD Video Streaming", "Gaming", "Social Media Access", "Email & Messaging"],
  },
  {
    id: "unlimited",
    name: "Unlimited",
    data: "Unlimited",
    validity: "30 Days",
    price: "49.00",
    features: ["Unlimited Data", "HD Video Streaming", "Gaming", "Social Media Access"],
  },
]

export default function DataPlanSelection({ selectedPlan, onSelect }: DataPlanSelectionProps) {
  return (
    <div>
      <h3 className="text-xl font-bold mb-2">Choose Your Data Plan</h3>
      <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">Select the plan that best fits your needs</p>

      <div className="space-y-4 max-h-[350px] overflow-y-auto pr-2">
        {dataPlans.map((plan) => (
          <motion.div
            key={plan.id}
            className={`border rounded-xl p-4 cursor-pointer relative transition-all ${
              selectedPlan === plan.id
                ? "border-airalo-blue bg-airalo-lightBlue"
                : "border-gray-200 dark:border-gray-700 hover:border-airalo-blue"
            }`}
            onClick={() => onSelect(plan.id)}
            whileHover={{ scale: 1.01 }}
            whileTap={{ scale: 0.99 }}
          >
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center mb-2">
                  <h4 className="font-bold text-lg">{plan.name}</h4>
                  {plan.recommended && (
                    <span className="ml-2 text-xs bg-airalo-blue text-white px-2 py-1 rounded-full">Best Value</span>
                  )}
                </div>

                <div className="flex items-baseline gap-2 mb-3">
                  <span className="text-2xl font-bold">{plan.data}</span>
                  <span className="text-sm text-gray-500 dark:text-gray-400">for {plan.validity}</span>
                </div>

                <ul className="space-y-1 mb-4">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                      <Check className="h-4 w-4 text-airalo-blue" />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>

                <div className="flex items-center justify-between">
                  <div className="text-xl font-bold text-airalo-blue">${plan.price}</div>
                  <Button
                    size="sm"
                    className={`rounded-full ${
                      selectedPlan === plan.id
                        ? "bg-airalo-blue hover:bg-airalo-darkBlue"
                        : "bg-white text-airalo-blue border border-airalo-blue hover:bg-airalo-lightBlue"
                    }`}
                    onClick={() => onSelect(plan.id)}
                  >
                    {selectedPlan === plan.id ? "Selected" : "Select"}
                  </Button>
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/CarrierSelection.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Check, Signal } from "lucide-react"
import Image from "next/image"

interface CarrierSelectionProps {
  selectedCarrier: string
  onSelect: (carrier: string) => void
}

const carriers = [
  {
    id: "airalo",
    name: "Airalo",
    logo: "/placeholder.svg?height=40&width=80",
    coverage: "Global Coverage",
    speed: "4G/LTE",
  },
  {
    id: "holafly",
    name: "Holafly",
    logo: "/placeholder.svg?height=40&width=80",
    coverage: "180+ Countries",
    speed: "4G/LTE+",
  },
  {
    id: "ubigi",
    name: "Ubigi",
    logo: "/placeholder.svg?height=40&width=80",
    coverage: "Europe & Americas",
    speed: "4G+",
  },
  {
    id: "simify",
    name: "Simify",
    logo: "/placeholder.svg?height=40&width=80",
    coverage: "Asia & Pacific",
    speed: "4G",
  },
]

export default function CarrierSelection({ selectedCarrier, onSelect }: CarrierSelectionProps) {
  return (
    <div>
      <h3 className="text-xl font-bold mb-2">Select Your eSIM Provider</h3>
      <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
        Choose your preferred eSIM provider for your destination
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {carriers.map((carrier) => (
          <motion.div
            key={carrier.id}
            className={`border rounded-xl p-4 cursor-pointer relative transition-all ${
              selectedCarrier === carrier.id
                ? "border-airalo-blue bg-airalo-lightBlue"
                : "border-gray-200 dark:border-gray-700 hover:border-airalo-blue"
            }`}
            onClick={() => onSelect(carrier.id)}
            whileHover={{ scale: 1.01 }}
            whileTap={{ scale: 0.99 }}
          >
            <div className="flex items-center gap-4">
              <div className="w-16 h-12 bg-white rounded-lg flex items-center justify-center p-2">
                <Image
                  src={carrier.logo || "/placeholder.svg"}
                  alt={carrier.name}
                  width={80}
                  height={40}
                  className="object-contain"
                />
              </div>

              <div className="flex-1">
                <h4 className="font-bold">{carrier.name}</h4>
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mt-1">
                  <Signal className="h-3 w-3 mr-1" />
                  <span>{carrier.coverage}</span>
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{carrier.speed}</div>
              </div>

              {selectedCarrier === carrier.id && (
                <div className="w-6 h-6 bg-airalo-blue rounded-full flex items-center justify-center">
                  <Check className="h-4 w-4 text-white" />
                </div>
              )}
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  )
}

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

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Loader2, Check, ArrowRight, ArrowLeft, MapPin } from "lucide-react"
import { useLanguage } from "../contexts/LanguageContext"

// Define the steps in the order flow
const orderSteps = ["destination", "plan", "contact", "payment", "confirmation", "activation"]

// Define the countries
const countries = [
  { id: "us", name: "United States", flag: "🇺🇸", continent: "North America" },
  { id: "uk", name: "United Kingdom", flag: "🇬🇧", continent: "Europe" },
  { id: "jp", name: "Japan", flag: "🇯🇵", continent: "Asia" },
  { id: "au", name: "Australia", flag: "🇦🇺", continent: "Oceania" },
  { id: "th", name: "Thailand", flag: "🇹🇭", continent: "Asia" },
  { id: "sg", name: "Singapore", flag: "🇸🇬", continent: "Asia" },
  { id: "fr", name: "France", flag: "🇫🇷", continent: "Europe" },
  { id: "fr", name: "France", flag: "🇫🇷", continent: "Europe" },
  { id: "de", name: "Germany", flag: "🇩🇪", continent: "Europe" },
  { id: "ca", name: "Canada", flag: "🇨🇦", continent: "North America" },
]

// Define the data plans
const dataPlans = [
  {
    id: "basic",
    name: "Basic",
    data: "1GB",
    validity: "7 days",
    price: 9.0,
    features: ["Basic internet browsing", "Social media access", "Email"],
  },
  {
    id: "standard",
    name: "Standard",
    data: "3GB",
    validity: "15 days",
    price: 19.0,
    features: ["HD video streaming", "Fast browsing", "Social media", "Email"],
    recommended: true,
  },
  {
    id: "premium",
    name: "Premium",
    data: "5GB",
    validity: "30 days",
    price: 29.0,
    features: ["4K video streaming", "Ultra-fast browsing", "All apps and services", "Priority support"],
  },
  {
    id: "unlimited",
    name: "Unlimited",
    data: "Unlimited",
    validity: "30 days",
    price: 49.0,
    features: ["Unlimited data", "Unlimited calls", "Premium support", "No speed throttling"],
  },
]

// Define the form schema for contact information
const contactSchema = z.object({
  phoneNumber: z.string().min(9, { message: "Phone number must be at least 9 digits." }),
  email: z.string().email({ message: "Please enter a valid email address." }),
})

export default function AiOrderFlow() {
  const { t, language } = useLanguage()
  const [currentStep, setCurrentStep] = useState(0)
  const [selectedCountry, setSelectedCountry] = useState("")
  const [selectedPlan, setSelectedPlan] = useState("")
  const [contactInfo, setContactInfo] = useState({ phoneNumber: "", email: "" })
  const [isProcessing, setIsProcessing] = useState(false)
  const [isComplete, setIsComplete] = useState(false)
  const [orderId] = useState(`${Math.floor(100000 + Math.random() * 900000)}`)

  // Contact form
  const contactForm = useForm<z.infer<typeof contactSchema>>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      phoneNumber: "",
      email: "",
    },
  })

  // Handle country selection
  const handleCountrySelect = (countryId: string) => {
    setSelectedCountry(countryId)
    setTimeout(() => {
      setCurrentStep(1)
    }, 500)
  }

  // Handle contact form submission
  const onContactSubmit = (values: z.infer<typeof contactSchema>) => {
    setContactInfo(values)
    setCurrentStep(3)
  }

  // Handle plan selection
  const handlePlanSelect = (planId: string) => {
    setSelectedPlan(planId)
    setTimeout(() => {
      setCurrentStep(2)
    }, 500)
  }

  // Handle payment completion
  const handlePaymentComplete = () => {
    setCurrentStep(4)
  }

  // Handle order confirmation
  const handleConfirmOrder = () => {
    setIsProcessing(true)

    // Simulate order processing
    setTimeout(() => {
      setIsProcessing(false)
      setCurrentStep(5)

      // Simulate activation completion
      setTimeout(() => {
        setIsComplete(true)
      }, 3000)
    }, 2000)
  }

  // Calculate progress percentage
  const progress = ((currentStep + 1) / orderSteps.length) * 100

  // Get the selected country and plan objects
  const country = countries.find((c) => c.id === selectedCountry)
  const plan = dataPlans.find((p) => p.id === selectedPlan)

  return (
    <div className="w-full max-w-3xl mx-auto">
      {/* Progress bar */}
      <div className="mb-6">
        <Progress value={progress} className="h-2 bg-gray-100 dark:bg-gray-800" />
        <div className="flex justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
          {orderSteps.map((step, index) => (
            <div key={step} className={`capitalize ${index <= currentStep ? "text-airalo-blue font-medium" : ""}`}>
              {step}
            </div>
          ))}
        </div>
      </div>

      {/* Main content */}
      <AnimatePresence mode="wait">
        <motion.div
          key={currentStep}
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -10 }}
          transition={{ duration: 0.3 }}
        >
          {/* Step 1: Destination Selection */}
          {currentStep === 0 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <CardTitle className="text-xl font-bold">Where are you traveling?</CardTitle>
                <CardDescription>Select your destination to find the best eSIM plan</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="mb-4">
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <MapPin className="h-5 w-5 text-gray-400" />
                    </div>
                    <Input
                      placeholder="Search countries..."
                      className="pl-10 rounded-xl border-gray-200 dark:border-gray-700"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[350px] overflow-y-auto pr-1">
                  {countries.map((country) => (
                    <motion.div
                      key={country.id}
                      className={`border rounded-xl p-3 cursor-pointer transition-all ${
                        selectedCountry === country.id
                          ? "border-airalo-blue bg-airalo-lightBlue"
                          : "border-gray-200 dark:border-gray-700 hover:border-airalo-blue"
                      }`}
                      onClick={() => handleCountrySelect(country.id)}
                      whileHover={{ scale: 1.01 }}
                      whileTap={{ scale: 0.99 }}
                    >
                      <div className="flex items-center gap-3">
                        <div className="text-2xl">{country.flag}</div>
                        <div className="flex-1">
                          <h4 className="font-medium">{country.name}</h4>
                          <p className="text-xs text-gray-500 dark:text-gray-400">{country.continent}</p>
                        </div>
                        {selectedCountry === country.id && (
                          <div className="w-6 h-6 bg-airalo-blue rounded-full flex items-center justify-center">
                            <Check className="h-4 w-4 text-white" />
                          </div>
                        )}
                      </div>
                    </motion.div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

          {/* Step 2: Plan Selection */}
          {currentStep === 1 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xl">{country?.flag}</span>
                  <CardTitle className="text-xl font-bold">{country?.name} eSIM</CardTitle>
                </div>
                <CardDescription>Choose a data plan that fits your needs</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="space-y-4 max-h-[350px] overflow-y-auto pr-1">
                  {dataPlans.map((plan) => (
                    <motion.div
                      key={plan.id}
                      className={`border rounded-xl p-4 cursor-pointer relative transition-all ${
                        selectedPlan === plan.id
                          ? "border-airalo-blue bg-airalo-lightBlue"
                          : "border-gray-200 dark:border-gray-700 hover:border-airalo-blue"
                      }`}
                      onClick={() => handlePlanSelect(plan.id)}
                      whileHover={{ scale: 1.01 }}
                      whileTap={{ scale: 0.99 }}
                    >
                      <div className="flex justify-between items-start">
                        <div className="flex-1">
                          <div className="flex items-center mb-2">
                            <h4 className="font-bold text-lg">{plan.name}</h4>
                            {plan.recommended && (
                              <span className="ml-2 text-xs bg-airalo-blue text-white px-2 py-1 rounded-full">
                                Best Value
                              </span>
                            )}
                          </div>

                          <div className="flex items-baseline gap-2 mb-3">
                            <span className="text-2xl font-bold">{plan.data}</span>
                            <span className="text-sm text-gray-500 dark:text-gray-400">for {plan.validity}</span>
                          </div>

                          <ul className="space-y-1 mb-4">
                            {plan.features.map((feature, index) => (
                              <li
                                key={index}
                                className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300"
                              >
                                <Check className="h-4 w-4 text-airalo-blue" />
                                <span>{feature}</span>
                              </li>
                            ))}
                          </ul>

                          <div className="flex items-center justify-between">
                            <div className="text-xl font-bold text-airalo-blue">${plan.price.toFixed(2)}</div>
                            <Button
                              size="sm"
                              className={`rounded-full ${
                                selectedPlan === plan.id
                                  ? "bg-airalo-blue hover:bg-airalo-darkBlue"
                                  : "bg-white text-airalo-blue border border-airalo-blue hover:bg-airalo-lightBlue"
                              }`}
                              onClick={() => handlePlanSelect(plan.id)}
                            >
                              {selectedPlan === plan.id ? "Selected" : "Select"}
                            </Button>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </CardContent>
              <CardFooter className="border-t border-gray-100 dark:border-gray-800 p-4">
                <div className="flex justify-between w-full">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentStep(0)}
                    className="rounded-xl border-gray-200 dark:border-gray-700"
                  >
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                  <Button
                    onClick={() => setCurrentStep(2)}
                    disabled={!selectedPlan}
                    className="rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue"
                  >
                    Continue
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                </div>
              </CardFooter>
            </Card>
          )}

          {/* Step 3: Contact Information */}
          {currentStep === 2 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <CardTitle className="text-xl font-bold">Your Contact Information</CardTitle>
                <CardDescription>We'll use these details to deliver your eSIM</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <Form {...contactForm}>
                  <form onSubmit={contactForm.handleSubmit(onContactSubmit)} className="space-y-4">
                    <FormField
                      control={contactForm.control}
                      name="email"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-gray-700 dark:text-gray-300">Email</FormLabel>
                          <FormControl>
                            <Input
                              placeholder="your.email@example.com"
                              {...field}
                              className="rounded-xl border-gray-200 dark:border-gray-700"
                            />
                          </FormControl>
                          <FormMessage className="text-red-500" />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={contactForm.control}
                      name="phoneNumber"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-gray-700 dark:text-gray-300">Phone Number</FormLabel>
                          <FormControl>
                            <Input
                              placeholder="+1 123 456 7890"
                              {...field}
                              className="rounded-xl border-gray-200 dark:border-gray-700"
                            />
                          </FormControl>
                          <FormMessage className="text-red-500" />
                        </FormItem>
                      )}
                    />
                  </form>
                </Form>
              </CardContent>
              <CardFooter className="border-t border-gray-100 dark:border-gray-800 p-4">
                <div className="flex justify-between w-full">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentStep(1)}
                    className="rounded-xl border-gray-200 dark:border-gray-700"
                  >
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                  <Button
                    onClick={contactForm.handleSubmit(onContactSubmit)}
                    className="rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue"
                  >
                    Continue to Payment
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                </div>
              </CardFooter>
            </Card>
          )}

          {/* Step 4: Payment */}
          {currentStep === 3 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <CardTitle className="text-xl font-bold">Payment</CardTitle>
                <CardDescription>Complete your payment to activate your eSIM</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 mb-6">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <span className="text-xl">{country?.flag}</span>
                      <span className="font-medium">{country?.name} eSIM</span>
                    </div>
                    <span className="text-sm text-gray-500 dark:text-gray-400">{plan?.validity}</span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500 dark:text-gray-400">{plan?.data} Data</span>
                    <span className="font-bold text-lg">${plan?.price.toFixed(2)}</span>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M21 4H3C1.89543 4 1 4.89543 1 6V18C1 19.1046 1.89543 20 3 20H21C22.1046 20 23 19.1046 23 18V6C23 4.89543 22.1046 4 21 4Z"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M1 10H23"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium">Credit / Debit Card</div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">Visa, Mastercard, Amex</div>
                      </div>
                    </div>
                    <div className="w-6 h-6 border-2 border-airalo-blue rounded-full flex items-center justify-center">
                      <div className="w-3 h-3 bg-airalo-blue rounded-full"></div>
                    </div>
                  </div>

                  <div className="border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M17 9V7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7V9"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M5 9H19C20.1046 9 21 9.89543 21 11V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V11C3 9.89543 3.89543 9 5 9Z"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <circle cx="12" cy="16" r="1" fill="#0066FF" />
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium">PayPal</div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">Fast and secure</div>
                      </div>
                    </div>
                    <div className="w-6 h-6 border-2 border-gray-300 dark:border-gray-600 rounded-full"></div>
                  </div>

                  <div className="border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            d="M12 17H12.01"
                            stroke="#0066FF"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                      <div>
                        <div className="font-medium">Other Payment Methods</div>
                        <div className="text-xs text-gray-500 dark:text-gray-400">Apple Pay, Google Pay, etc.</div>
                      </div>
                    </div>
                    <div className="w-6 h-6 border-2 border-gray-300 dark:border-gray-600 rounded-full"></div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="border-t border-gray-100 dark:border-gray-800 p-4">
                <div className="flex justify-between w-full">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentStep(2)}
                    className="rounded-xl border-gray-200 dark:border-gray-700"
                  >
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                  <Button
                    onClick={handlePaymentComplete}
                    className="rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue"
                  >
                    Pay ${plan?.price.toFixed(2)}
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                </div>
              </CardFooter>
            </Card>
          )}

          {/* Step 5: Order Confirmation */}
          {currentStep === 4 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <CardTitle className="text-xl font-bold">Confirm Your Order</CardTitle>
                <CardDescription>Review your eSIM details before finalizing</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="space-y-6">
                  <div className="bg-gray-50 dark:bg-gray-800 rounded-xl p-4">
                    <h3 className="font-medium mb-3">Order Summary</h3>
                    <div className="space-y-3">
                      <div className="flex justify-between">
                        <div className="flex items-center gap-2">
                          <span className="text-xl">{country?.flag}</span>
                          <span className="text-gray-700 dark:text-gray-300">{country?.name} eSIM</span>
                        </div>
                        <span className="font-medium">{plan?.data}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-500 dark:text-gray-400">Validity:</span>
                        <span className="font-medium">{plan?.validity}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-500 dark:text-gray-400">Contact:</span>
                        <span className="font-medium">{contactInfo.email}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-500 dark:text-gray-400">Phone:</span>
                        <span className="font-medium">{contactInfo.phoneNumber}</span>
                      </div>
                      <div className="border-t pt-2 mt-2">
                        <div className="flex justify-between text-lg font-bold">
                          <span>Total:</span>
                          <span className="text-airalo-blue">${plan?.price.toFixed(2)}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="bg-airalo-lightBlue rounded-xl p-4">
                    <div className="flex items-start gap-3">
                      <div className="mt-1 text-airalo-blue">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path
                            d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 15C9.45 15 9 14.55 9 14C9 13.45 9.45 13 10 13C10.55 13 11 13.45 11 14C11 14.55 10.55 15 10 15ZM11 10C11 10.55 10.55 11 10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10Z"
                            fill="#0066FF"
                          />
                        </svg>
                      </div>
                      <div>
                        <h4 className="font-medium text-airalo-blue">Important Information</h4>
                        <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
                          Your eSIM will be delivered to your email immediately after purchase. Make sure your device is
                          eSIM compatible.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="border-t border-gray-100 dark:border-gray-800 p-4">
                <div className="flex justify-between w-full">
                  <Button
                    variant="outline"
                    onClick={() => setCurrentStep(3)}
                    className="rounded-xl border-gray-200 dark:border-gray-700"
                  >
                    <ArrowLeft className="h-4 w-4 mr-2" />
                    Back
                  </Button>
                  <Button
                    onClick={handleConfirmOrder}
                    disabled={isProcessing}
                    className="rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue"
                  >
                    {isProcessing ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        Processing...
                      </>
                    ) : (
                      <>
                        Confirm and Activate
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </>
                    )}
                  </Button>
                </div>
              </CardFooter>
            </Card>
          )}

          {/* Step 6: Activation */}
          {currentStep === 5 && (
            <Card className="border-gray-200 dark:border-gray-800 shadow-sm rounded-2xl overflow-hidden">
              <CardHeader className="bg-white dark:bg-gray-900 pb-4">
                <CardTitle className="text-xl font-bold">eSIM Activation</CardTitle>
                <CardDescription>Your eSIM is being activated</CardDescription>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="text-center py-6">
                  {isComplete ? (
                    <motion.div
                      initial={{ scale: 0.8, opacity: 0 }}
                      animate={{ scale: 1, opacity: 1 }}
                      transition={{ duration: 0.5 }}
                    >
                      <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                        <Check className="h-8 w-8 text-green-600 dark:text-green-400" />
                      </div>
                      <h3 className="text-xl font-bold mb-2">Activation Complete!</h3>
                      <p className="text-gray-500 dark:text-gray-400 mb-6">
                        Your eSIM has been successfully activated. You'll receive an email with all the details.
                      </p>

                      <div className="bg-gray-50 dark:bg-gray-800 rounded-xl p-4 text-left mb-6">
                        <h4 className="font-medium mb-3">eSIM Details</h4>
                        <div className="space-y-2 text-sm">
                          <div className="flex justify-between">
                            <span className="text-gray-500 dark:text-gray-400">eSIM ID:</span>
                            <span className="font-medium">ESM-{Math.floor(Math.random() * 1000000)}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-500 dark:text-gray-400">Activation Date:</span>
                            <span className="font-medium">{new Date().toLocaleDateString()}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-gray-500 dark:text-gray-400">Expiry Date:</span>
                            <span className="font-medium">
                              {new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                      </div>

                      <div className="flex flex-col sm:flex-row gap-3">
                        <Button className="flex-1 rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue">
                          Download eSIM
                        </Button>
                        <Button variant="outline" className="flex-1 rounded-xl border-gray-200 dark:border-gray-700">
                          View Instructions
                        </Button>
                      </div>
                    </motion.div>
                  ) : (
                    <div>
                      <Loader2 className="h-16 w-16 animate-spin text-airalo-blue mx-auto mb-4" />
                      <h3 className="text-xl font-bold mb-2">Activating Your eSIM</h3>
                      <p className="text-gray-500 dark:text-gray-400">
                        Please wait while we activate your eSIM. This will only take a moment.
                      </p>
                    </div>
                  )}
                </div>
              </CardContent>
              {isComplete && (
                <CardFooter className="border-t border-gray-100 dark:border-gray-800 p-4">
                  <Button
                    className="w-full rounded-xl bg-airalo-blue hover:bg-airalo-darkBlue"
                    onClick={() => window.location.reload()}
                  >
                    Buy Another eSIM
                  </Button>
                </CardFooter>
              )}
            </Card>
          )}
        </motion.div>
      </AnimatePresence>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/Footer.tsx" isMerged="true"
import Link from "next/link"
import { Facebook, Twitter, Instagram, Mail, MapPin } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-12 sm:py-16 lg:px-8">
        <div className="mb-10 flex justify-center">
          <div className="flex items-center">
            <div className="h-10 w-10 rounded-lg bg-airalo-blue text-white flex items-center justify-center font-bold mr-2">
              A
            </div>
            <span className="font-bold text-xl">Airalo</span>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-5 lg:gap-12">
          <div>
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">eSIMs</h3>
            <ul className="mt-4 space-y-3">
              {["Global", "Regional", "Local", "Topup"].map((item) => (
                <li key={item}>
                  <Link
                    href="#"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Company</h3>
            <ul className="mt-4 space-y-3">
              {["About", "Careers", "Blog", "Press"].map((item) => (
                <li key={item}>
                  <Link
                    href="#"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Resources</h3>
            <ul className="mt-4 space-y-3">
              {["Help Center", "eSIM Compatibility", "Referral Program", "Affiliate Program"].map((item) => (
                <li key={item}>
                  <Link
                    href="#"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Legal</h3>
            <ul className="mt-4 space-y-3">
              {["Terms of Service", "Privacy Policy", "Refund Policy", "Cookie Policy"].map((item) => (
                <li key={item}>
                  <Link
                    href="#"
                    className="text-sm text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
                  >
                    {item}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Contact</h3>
            <ul className="mt-4 space-y-3">
              <li className="flex items-center">
                <Mail className="h-4 w-4 mr-2 text-gray-600 dark:text-gray-400" />
                <span className="text-sm text-gray-600 dark:text-gray-400">support@airalo.com</span>
              </li>
              <li className="flex items-start">
                <MapPin className="h-4 w-4 mr-2 text-gray-600 dark:text-gray-400 mt-1" />
                <span className="text-sm text-gray-600 dark:text-gray-400">123 eSIM Street, Toronto, Canada</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-10 border-t border-gray-100 dark:border-gray-800 pt-8 flex flex-col sm:flex-row justify-between items-center">
          <div className="flex space-x-6 mb-4 sm:mb-0">
            <Link
              href="#"
              className="text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
            >
              <Facebook className="h-5 w-5" />
            </Link>
            <Link
              href="#"
              className="text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
            >
              <Twitter className="h-5 w-5" />
            </Link>
            <Link
              href="#"
              className="text-gray-600 dark:text-gray-400 hover:text-airalo-blue dark:hover:text-airalo-blue"
            >
              <Instagram className="h-5 w-5" />
            </Link>
          </div>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            © {new Date().getFullYear()} Airalo. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/components/ui/loading-state.tsx"
"use client"

import { motion } from "framer-motion"
import { Loader2 } from "lucide-react"

interface LoadingStateProps {
  text?: string
  size?: "sm" | "md" | "lg"
  variant?: "default" | "card" | "overlay"
  className?: string
}

export function LoadingState({
  text = "Loading...",
  size = "md",
  variant = "default",
  className = "",
}: LoadingStateProps) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-8 w-8",
    lg: "h-12 w-12",
  }

  if (variant === "overlay") {
    return (
      <motion.div
        className="absolute inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center z-50"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.2 }}
      >
        <Loader2 className={`${sizeClasses[size]} text-primary animate-spin mb-2`} />
        {text && <p className="text-sm text-muted-foreground">{text}</p>}
      </motion.div>
    )
  }

  if (variant === "card") {
    return (
      <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
        <Loader2 className={`${sizeClasses[size]} text-primary animate-spin mb-2`} />
        {text && <p className="text-sm text-muted-foreground">{text}</p>}
      </div>
    )
  }

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <Loader2 className={`${sizeClasses[size]} text-primary animate-spin`} />
      {text && <p className="text-sm text-muted-foreground">{text}</p>}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/ui/skeleton-loader.tsx"
"use client"

import { motion } from "framer-motion"

interface SkeletonLoaderProps {
  className?: string
  count?: number
  type?: "card" | "text" | "circle" | "button" | "input"
}

export function SkeletonLoader({ className = "", count = 1, type = "text" }: SkeletonLoaderProps) {
  const getTypeClass = () => {
    switch (type) {
      case "card":
        return "h-40 w-full rounded-xl"
      case "circle":
        return "h-10 w-10 rounded-full"
      case "button":
        return "h-10 w-24 rounded-full"
      case "input":
        return "h-10 w-full rounded-md"
      case "text":
      default:
        return "h-4 w-full rounded"
    }
  }

  const baseClass = `bg-muted animate-pulse ${getTypeClass()} ${className}`

  const shimmer = {
    hidden: { opacity: 0.3 },
    visible: {
      opacity: 0.6,
      transition: {
        repeat: Number.POSITIVE_INFINITY,
        repeatType: "reverse" as const,
        duration: 1.5,
      },
    },
  }

  return (
    <>
      {Array.from({ length: count }).map((_, i) => (
        <motion.div key={i} className={baseClass} variants={shimmer} initial="hidden" animate="visible" />
      ))}
    </>
  )
}

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

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Sparkles, ArrowRight, ArrowLeft, Check, Bot, Shield } from "lucide-react"
import CarrierSelection from "./order-steps/CarrierSelection"
import ContactVerification from "./order-steps/ContactVerification"
import DataPlanSelection from "./order-steps/DataPlanSelection"
import PaymentMethod from "./order-steps/PaymentMethod"
import PaymentProof from "./order-steps/PaymentProof"
import OrderConfirmation from "./order-steps/OrderConfirmation"
import ActivationSuccess from "./order-steps/ActivationSuccess"
import AIAssistant from "./AIAssistant"
import { LoadingState } from "@/components/ui/loading-state"

// Define the steps in the order process
const steps = [
  "Carrier Selection",
  "Contact Verification",
  "Data Plan",
  "Payment Method",
  "Payment Proof",
  "Confirmation",
  "Activation",
]

export default function AIOrderForm() {
  const [currentStep, setCurrentStep] = useState(0)
  const [formData, setFormData] = useState({
    carrier: "",
    phoneNumber: "",
    email: "",
    dataPlan: "",
    paymentMethod: "",
    paymentProof: null,
  })
  const [isAssistantOpen, setIsAssistantOpen] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)
  const [aiSuggestion, setAiSuggestion] = useState("")
  const [isStepLoading, setIsStepLoading] = useState(false)
  const [securityInfo, setSecurityInfo] = useState("")

  // Calculate progress percentage
  const progress = ((currentStep + 1) / steps.length) * 100

  // Update form data
  const updateFormData = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  // Simulate AI suggestions based on current step
  useEffect(() => {
    const suggestions = [
      "Based on your location in Yangon, MYTEL offers the best coverage.",
      "Your email has been verified. We'll send your eSIM details there.",
      "Based on your usage patterns, the 5GB plan would be optimal for you.",
      "Most users in your area prefer Myanmar Pay for faster processing.",
      "Your payment proof looks clear. Processing now...",
      "All details look good! Your eSIM will be ready in moments.",
      "Your eSIM has been activated successfully!",
    ]

    const securityMessages = [
      "Your carrier selection is encrypted end-to-end.",
      "Your contact information is protected with AES-256 encryption.",
      "Your plan selection is secured with our privacy-first technology.",
      "Payment information is never stored on our servers.",
      "Your payment proof is processed securely and then deleted.",
      "All your order details are protected under our security policy.",
      "Your eSIM QR code is encrypted and only accessible by you.",
    ]

    // Simulate AI thinking with a delay
    setAiSuggestion("")
    setIsProcessing(true)
    setSecurityInfo(securityMessages[currentStep])

    const timer = setTimeout(() => {
      setAiSuggestion(suggestions[currentStep])
      setIsProcessing(false)
    }, 1500)

    return () => clearTimeout(timer)
  }, [currentStep])

  // Handle next step
  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setIsStepLoading(true)
      // Simulate loading between steps
      setTimeout(() => {
        setCurrentStep((prev) => prev + 1)
        setIsStepLoading(false)
      }, 800)
    }
  }

  // Handle previous step
  const handlePrevious = () => {
    if (currentStep > 0) {
      setIsStepLoading(true)
      // Simulate loading between steps
      setTimeout(() => {
        setCurrentStep((prev) => prev - 1)
        setIsStepLoading(false)
      }, 800)
    }
  }

  // Render current step content
  const renderStepContent = () => {
    if (isStepLoading) {
      return (
        <div className="min-h-[320px] flex items-center justify-center">
          <LoadingState text="Loading next step..." variant="card" />
        </div>
      )
    }

    switch (currentStep) {
      case 0:
        return (
          <CarrierSelection
            selectedCarrier={formData.carrier}
            onSelect={(carrier) => updateFormData("carrier", carrier)}
          />
        )
      case 1:
        return (
          <ContactVerification
            phoneNumber={formData.phoneNumber}
            email={formData.email}
            onPhoneChange={(phone) => updateFormData("phoneNumber", phone)}
            onEmailChange={(email) => updateFormData("email", email)}
          />
        )
      case 2:
        return (
          <DataPlanSelection selectedPlan={formData.dataPlan} onSelect={(plan) => updateFormData("dataPlan", plan)} />
        )
      case 3:
        return (
          <PaymentMethod
            selectedMethod={formData.paymentMethod}
            onSelect={(method) => updateFormData("paymentMethod", method)}
          />
        )
      case 4:
        return (
          <PaymentProof
            paymentProof={formData.paymentProof}
            onUpload={(proof) => updateFormData("paymentProof", proof)}
          />
        )
      case 5:
        return <OrderConfirmation formData={formData} />
      case 6:
        return <ActivationSuccess email={formData.email} />
      default:
        return null
    }
  }

  return (
    <div className="relative">
      <Card className="w-full max-w-md mx-auto bg-background/80 backdrop-blur-md shadow-xl border-primary/10">
        <CardContent className="p-6">
          {/* Progress bar */}
          <div className="mb-6">
            <div className="flex justify-between text-xs text-muted-foreground mb-2">
              <span>
                Step {currentStep + 1} of {steps.length}
              </span>
              <span>{steps[currentStep]}</span>
            </div>
            <Progress value={progress} className="h-2" />
          </div>

          {/* Security indicator */}
          {securityInfo && (
            <motion.div
              className="mb-4 flex items-center gap-2 text-xs text-muted-foreground bg-primary/5 p-2 rounded-lg"
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
            >
              <Shield className="h-3 w-3 text-primary" />
              <span>{securityInfo}</span>
            </motion.div>
          )}

          {/* Step content with animations */}
          <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 }}
              className="min-h-[320px]"
            >
              {renderStepContent()}
            </motion.div>
          </AnimatePresence>

          {/* AI Suggestion */}
          <div className="mt-6 mb-4">
            <div className="flex items-center gap-2 mb-2">
              <Sparkles className="h-4 w-4 text-blue-500" />
              <span className="text-sm font-medium">AI Suggestion</span>
            </div>
            <div className="bg-primary/5 rounded-lg p-3 min-h-[60px] flex items-center">
              {isProcessing ? (
                <div className="flex items-center gap-2 text-muted-foreground">
                  <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
                  <span>AI is analyzing your information...</span>
                </div>
              ) : (
                <p className="text-sm">{aiSuggestion}</p>
              )}
            </div>
          </div>

          {/* Navigation buttons */}
          <div className="flex justify-between mt-6">
            <Button
              variant="outline"
              onClick={handlePrevious}
              disabled={currentStep === 0 || isStepLoading}
              className="flex items-center gap-1"
            >
              <ArrowLeft className="h-4 w-4" />
              Back
            </Button>

            <Button
              onClick={handleNext}
              disabled={currentStep === steps.length - 1 || isStepLoading}
              className="flex items-center gap-1"
            >
              {isStepLoading ? (
                <>
                  <LoadingState size="sm" text="Loading..." />
                </>
              ) : currentStep === steps.length - 2 ? (
                <>
                  Activate
                  <Check className="h-4 w-4 ml-1" />
                </>
              ) : (
                <>
                  Next
                  <ArrowRight className="h-4 w-4 ml-1" />
                </>
              )}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* AI Assistant Button */}
      <Button
        variant="outline"
        size="icon"
        className="absolute -bottom-5 left-1/2 transform -translate-x-1/2 rounded-full h-10 w-10 shadow-lg border-primary/20"
        onClick={() => setIsAssistantOpen(!isAssistantOpen)}
      >
        <Bot className="h-5 w-5 text-primary" />
      </Button>

      {/* AI Assistant Chat */}
      <AnimatePresence>
        {isAssistantOpen && <AIAssistant onClose={() => setIsAssistantOpen(false)} currentStep={currentStep} />}
      </AnimatePresence>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/ActivationSuccess.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { CheckCircle, Download, Smartphone, Copy, Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LoadingState } from "@/components/ui/loading-state"

interface ActivationSuccessProps {
  email: string
}

export default function ActivationSuccess({ email }: ActivationSuccessProps) {
  const [isDownloading, setIsDownloading] = useState(false)
  const [isCopied, setIsCopied] = useState(false)
  const [activeTab, setActiveTab] = useState("qrcode")

  const handleDownload = () => {
    setIsDownloading(true)
    // Simulate download delay
    setTimeout(() => {
      setIsDownloading(false)
      // In a real app, this would trigger the actual download
      const link = document.createElement("a")
      link.href = "/placeholder.svg?height=150&width=150"
      link.download = "esim-qrcode.png"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }, 1500)
  }

  const handleCopyLink = () => {
    // In a real app, this would copy the actual link
    navigator.clipboard.writeText("https://esim.example.com/activate/12345")
    setIsCopied(true)
    setTimeout(() => setIsCopied(false), 2000)
  }

  return (
    <div className="text-center">
      <motion.div
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.5 }}
        className="flex justify-center mb-4"
      >
        <div className="bg-green-100 dark:bg-green-900/30 p-4 rounded-full">
          <CheckCircle className="h-12 w-12 text-green-500" />
        </div>
      </motion.div>

      <h3 className="text-xl font-bold mb-2">eSIM Activated Successfully!</h3>
      <p className="text-sm text-muted-foreground mb-6">Your eSIM has been activated and sent to {email}</p>

      <Tabs defaultValue="qrcode" className="mb-6" onValueChange={setActiveTab}>
        <TabsList className="grid grid-cols-3 mb-4">
          <TabsTrigger value="qrcode">QR Code</TabsTrigger>
          <TabsTrigger value="share">Share</TabsTrigger>
          <TabsTrigger value="instructions">Instructions</TabsTrigger>
        </TabsList>

        <TabsContent value="qrcode" className="bg-muted p-4 rounded-lg">
          <div className="flex justify-center mb-4">
            <img src="/placeholder.svg?height=150&width=150" alt="eSIM QR Code" className="h-36 w-36" />
          </div>
          <p className="text-xs text-muted-foreground mb-2">
            Scan this QR code with your phone's camera to install your eSIM
          </p>
          <Button
            variant="outline"
            size="sm"
            className="flex items-center gap-1 w-full justify-center"
            onClick={handleDownload}
            disabled={isDownloading}
          >
            {isDownloading ? (
              <LoadingState size="sm" text="Downloading..." />
            ) : (
              <>
                <Download className="h-4 w-4" />
                Download QR Code
              </>
            )}
          </Button>
        </TabsContent>

        <TabsContent value="share" className="bg-muted p-4 rounded-lg">
          <p className="text-sm mb-4">Share your eSIM activation link via:</p>
          <div className="grid grid-cols-2 gap-3 mb-4">
            <Button variant="outline" className="flex items-center gap-2 justify-center">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                  fill="#7360F2"
                />
                <path
                  d="M16.5 8.5C16.5 7.12 15.38 6 14 6C12.62 6 11.5 7.12 11.5 8.5C11.5 9.88 12.62 11 14 11C15.38 11 16.5 9.88 16.5 8.5Z"
                  fill="white"
                />
                <path
                  d="M7.5 13.5C7.5 12.12 8.62 11 10 11C11.38 11 12.5 12.12 12.5 13.5C12.5 14.88 11.38 16 10 16C8.62 16 7.5 14.88 7.5 13.5Z"
                  fill="white"
                />
                <path
                  d="M16.5 13.5C16.5 14.88 15.38 16 14 16C12.62 16 11.5 14.88 11.5 13.5C11.5 12.12 12.62 11 14 11C15.38 11 16.5 12.12 16.5 13.5Z"
                  fill="white"
                />
              </svg>
              Viber
            </Button>
            <Button variant="outline" className="flex items-center gap-2 justify-center">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                  fill="#0084FF"
                />
                <path
                  d="M12 5.5C8.41 5.5 5.5 8.19 5.5 11.5C5.5 13.31 6.44 14.93 7.88 15.95V18.5L10.4 17.13C10.91 17.25 11.44 17.31 12 17.31C15.59 17.31 18.5 14.63 18.5 11.31C18.5 8 15.59 5.5 12 5.5Z"
                  fill="white"
                />
                <path d="M13 14L10.5 11.5L8 14L10.5 9L13 11.5L15.5 9L13 14Z" fill="#0084FF" />
              </svg>
              Messenger
            </Button>
          </div>
          <div className="flex items-center gap-2 mt-4">
            <div className="flex-1 bg-background rounded-md px-3 py-2 text-xs truncate">
              https://esim.example.com/activate/12345
            </div>
            <Button variant="outline" size="icon" className="h-9 w-9" onClick={handleCopyLink}>
              {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
            </Button>
          </div>
        </TabsContent>

        <TabsContent value="instructions" className="bg-muted p-4 rounded-lg">
          <div className="space-y-3">
            <h4 className="font-medium text-sm">Installation Instructions</h4>
            <div className="flex items-start gap-2 text-left">
              <div className="bg-primary/10 p-1 rounded-full text-primary">
                <span className="flex h-4 w-4 items-center justify-center text-xs font-bold">1</span>
              </div>
              <p className="text-sm">
                Go to <span className="font-medium">Settings > Mobile Data > Add Data Plan</span> on your device
              </p>
            </div>
            <div className="flex items-start gap-2 text-left">
              <div className="bg-primary/10 p-1 rounded-full text-primary">
                <span className="flex h-4 w-4 items-center justify-center text-xs font-bold">2</span>
              </div>
              <p className="text-sm">Scan the QR code or enter the details manually</p>
            </div>
            <div className="flex items-start gap-2 text-left">
              <div className="bg-primary/10 p-1 rounded-full text-primary">
                <span className="flex h-4 w-4 items-center justify-center text-xs font-bold">3</span>
              </div>
              <p className="text-sm">Follow the on-screen instructions to complete setup</p>
            </div>
          </div>
        </TabsContent>
      </Tabs>

      <div className="mt-6">
        <Button variant="outline" className="flex items-center gap-1">
          <Smartphone className="h-4 w-4" />
          Need Help? Contact Support
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/PaymentProof.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Upload, X, Check, ImageIcon, Shield, AlertTriangle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { LoadingState } from "@/components/ui/loading-state"

interface PaymentProofProps {
  paymentProof: File | null
  onUpload: (file: File | null) => void
}

export default function PaymentProof({ paymentProof, onUpload }: PaymentProofProps) {
  const [dragActive, setDragActive] = useState(false)
  const [isVerifying, setIsVerifying] = useState(false)
  const [isVerified, setIsVerified] = useState(false)
  const [fileError, setFileError] = useState<string | null>(null)

  // Handle drag events
  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }

  // Handle drop event
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setDragActive(false)

    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFile(e.dataTransfer.files[0])
    }
  }

  // Handle file input change
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.preventDefault()

    if (e.target.files && e.target.files[0]) {
      handleFile(e.target.files[0])
    }
  }

  // Process the file
  const handleFile = (file: File) => {
    setFileError(null)

    // Check if file is an image
    if (!file.type.match("image.*")) {
      setFileError("Please upload an image file (JPG, PNG, or GIF)")
      return
    }

    // Check file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      setFileError("File size exceeds 5MB limit")
      return
    }

    onUpload(file)

    // Simulate AI verification
    setIsVerifying(true)
    setTimeout(() => {
      setIsVerifying(false)
      setIsVerified(true)
    }, 2000)
  }

  // Remove the uploaded file
  const handleRemove = () => {
    onUpload(null)
    setIsVerified(false)
    setFileError(null)
  }

  return (
    <div>
      <h3 className="text-lg font-medium mb-4">Upload Payment Proof</h3>
      <p className="text-sm text-muted-foreground mb-4">Our AI will verify your payment screenshot instantly.</p>

      <div className="flex items-center gap-2 text-xs text-muted-foreground bg-primary/5 p-2 rounded-lg mb-4">
        <Shield className="h-3 w-3 text-primary" />
        <span>Your payment proof is encrypted and will be deleted after verification</span>
      </div>

      {!paymentProof ? (
        <motion.div
          className={`border-2 border-dashed rounded-lg p-6 text-center ${
            dragActive
              ? "border-primary bg-primary/5"
              : fileError
                ? "border-red-500 bg-red-50 dark:bg-red-900/10"
                : "border-border"
          }`}
          whileHover={{ scale: 1.01 }}
          onDragEnter={handleDrag}
          onDragLeave={handleDrag}
          onDragOver={handleDrag}
          onDrop={handleDrop}
        >
          <input type="file" id="file-upload" className="hidden" accept="image/*" onChange={handleChange} />

          <div className="flex flex-col items-center justify-center space-y-3">
            {fileError ? (
              <div className="bg-red-100 dark:bg-red-900/30 p-3 rounded-full text-red-500">
                <AlertTriangle className="h-6 w-6" />
              </div>
            ) : (
              <div className="bg-primary/10 p-3 rounded-full text-primary">
                <Upload className="h-6 w-6" />
              </div>
            )}

            <div>
              {fileError ? (
                <p className="text-sm font-medium text-red-500">{fileError}</p>
              ) : (
                <>
                  <p className="text-sm font-medium">Drag and drop your payment screenshot</p>
                  <p className="text-xs text-muted-foreground mt-1">or</p>
                </>
              )}
            </div>

            <label
              htmlFor="file-upload"
              className={`${
                fileError
                  ? "bg-red-500 hover:bg-red-600 text-white"
                  : "bg-primary text-primary-foreground hover:bg-primary/90"
              } text-sm px-4 py-2 rounded-lg cursor-pointer transition-colors`}
            >
              {fileError ? "Try Again" : "Browse Files"}
            </label>

            <p className="text-xs text-muted-foreground">Supported formats: JPG, PNG, GIF (Max 5MB)</p>
          </div>
        </motion.div>
      ) : (
        <div className="border rounded-lg p-4">
          <div className="flex justify-between items-center mb-3">
            <div className="flex items-center gap-2">
              <ImageIcon className="h-5 w-5 text-primary" />
              <span className="text-sm font-medium">{paymentProof.name}</span>
            </div>
            <Button variant="ghost" size="icon" onClick={handleRemove}>
              <X className="h-4 w-4" />
            </Button>
          </div>

          <div className="relative bg-muted rounded-lg overflow-hidden h-40 flex items-center justify-center">
            <img
              src={URL.createObjectURL(paymentProof) || "/placeholder.svg"}
              alt="Payment proof"
              className="max-h-full max-w-full object-contain"
            />

            {isVerifying && (
              <div className="absolute inset-0 bg-background/80 flex items-center justify-center">
                <div className="flex flex-col items-center">
                  <LoadingState text="AI is verifying your payment..." size="md" />
                </div>
              </div>
            )}

            {isVerified && (
              <div className="absolute top-2 right-2 bg-green-500 text-white rounded-full p-1">
                <Check className="h-4 w-4" />
              </div>
            )}
          </div>

          {isVerified && (
            <div className="mt-3 bg-green-50 dark:bg-green-950/30 p-2 rounded-lg text-sm text-green-700 dark:text-green-300 flex items-center gap-2">
              <Check className="h-4 w-4" />
              Payment proof verified successfully!
            </div>
          )}
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/order-steps/OrderConfirmation.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"

interface OrderConfirmationProps {
  formData: {
    carrier: string
    phoneNumber: string
    email: string
    dataPlan: string
    paymentMethod: string
    paymentProof: File | null
  }
}

// Helper function to get readable names
const getReadableName = (id: string, type: string) => {
  const mappings: Record<string, Record<string, string>> = {
    carrier: {
      mytel: "MYTEL",
      atom: "ATOM",
      ooredoo: "OOREDOO",
      mpt: "MPT",
    },
    dataPlan: {
      basic: "Basic (2GB / 7 Days)",
      standard: "Standard (5GB / 15 Days)",
      premium: "Premium (10GB / 30 Days)",
      unlimited: "Unlimited (30 Days)",
    },
    paymentMethod: {
      myanmarpay: "Myanmar Pay",
      kbzpay: "KBZ Pay",
      wavepay: "Wave Pay",
      banktransfer: "Bank Transfer",
      creditcard: "Credit Card",
    },
  }

  return mappings[type]?.[id] || id
}

export default function OrderConfirmation({ formData }: OrderConfirmationProps) {
  // Generate order ID
  const orderId = `ESIM-${Math.floor(100000 + Math.random() * 900000)}`

  // Get prices based on data plan
  const getPlanPrice = (plan: string) => {
    const prices: Record<string, string> = {
      basic: "5,000 MMK",
      standard: "10,000 MMK",
      premium: "18,000 MMK",
      unlimited: "30,000 MMK",
    }
    return prices[plan] || "N/A"
  }

  return (
    <div>
      <h3 className="text-lg font-medium mb-4">Order Confirmation</h3>
      <p className="text-sm text-muted-foreground mb-4">Please review your order details before activation.</p>

      <div className="space-y-4">
        <div className="bg-primary/5 p-3 rounded-lg">
          <p className="text-xs text-muted-foreground">Order ID</p>
          <p className="font-medium">{orderId}</p>
        </div>

        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Carrier</span>
            <span className="font-medium">{getReadableName(formData.carrier, "carrier")}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Data Plan</span>
            <span className="font-medium">{getReadableName(formData.dataPlan, "dataPlan")}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Payment Method</span>
            <span className="font-medium">{getReadableName(formData.paymentMethod, "paymentMethod")}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Contact Email</span>
            <span className="font-medium">{formData.email}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Contact Phone</span>
            <span className="font-medium">{formData.phoneNumber}</span>
          </div>

          <div className="border-t my-2"></div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Subtotal</span>
            <span className="font-medium">{getPlanPrice(formData.dataPlan)}</span>
          </div>

          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">Service Fee</span>
            <span className="font-medium">500 MMK</span>
          </div>

          <div className="flex justify-between font-medium mt-2">
            <span>Total</span>
            <span className="text-primary">
              {formData.dataPlan === "basic"
                ? "5,500 MMK"
                : formData.dataPlan === "standard"
                  ? "10,500 MMK"
                  : formData.dataPlan === "premium"
                    ? "18,500 MMK"
                    : "30,500 MMK"}
            </span>
          </div>
        </div>

        <div className="bg-green-50 dark:bg-green-950/30 p-3 rounded-lg">
          <div className="flex items-start gap-2">
            <Check className="h-4 w-4 text-green-500 mt-0.5" />
            <div>
              <p className="text-sm font-medium text-green-700 dark:text-green-300">Payment Verified</p>
              <p className="text-xs text-green-600 dark:text-green-400">
                Your payment has been verified and your eSIM is ready for activation.
              </p>
            </div>
          </div>
        </div>

        <div className="bg-primary/5 p-3 rounded-lg">
          <p className="text-sm font-medium mb-2">Receive updates via:</p>
          <div className="grid grid-cols-2 gap-2">
            <Button variant="outline" size="sm" className="flex items-center gap-1">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                  fill="#7360F2"
                />
                <path
                  d="M16.5 8.5C16.5 7.12 15.38 6 14 6C12.62 6 11.5 7.12 11.5 8.5C11.5 9.88 12.62 11 14 11C15.38 11 16.5 9.88 16.5 8.5Z"
                  fill="white"
                />
                <path
                  d="M7.5 13.5C7.5 12.12 8.62 11 10 11C11.38 11 12.5 12.12 12.5 13.5C12.5 14.88 11.38 16 10 16C8.62 16 7.5 14.88 7.5 13.5Z"
                  fill="white"
                />
                <path
                  d="M16.5 13.5C16.5 14.88 15.38 16 14 16C12.62 16 11.5 14.88 11.5 13.5C11.5 12.12 12.62 11 14 11C15.38 11 16.5 12.12 16.5 13.5Z"
                  fill="white"
                />
              </svg>
              Viber
            </Button>
            <Button variant="outline" size="sm" className="flex items-center gap-1">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                  fill="#0084FF"
                />
                <path
                  d="M12 5.5C8.41 5.5 5.5 8.19 5.5 11.5C5.5 13.31 6.44 14.93 7.88 15.95V18.5L10.4 17.13C10.91 17.25 11.44 17.31 12 17.31C15.59 17.31 18.5 14.63 18.5 11.31C18.5 8 15.59 5.5 12 5.5Z"
                  fill="white"
                />
                <path d="M13 14L10.5 11.5L8 14L10.5 9L13 11.5L15.5 9L13 14Z" fill="#0084FF" />
              </svg>
              Messenger
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

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

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { QrCode, Check, ArrowLeft, Loader2, Copy, RefreshCw, Shield } from "lucide-react"
import QRCode from "qrcode.react"
import { useToast } from "@/components/ui/use-toast"
import { useLanguage } from "../contexts/LanguageContext"
import { LoadingState } from "@/components/ui/loading-state"

interface MyanmarPaymentProps {
  amount: number
  orderId: string
  onPaymentComplete: () => void
  onBack: () => void
}

const useQRCodeLoader = () => {
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1200)

    return () => clearTimeout(timer)
  }, [])

  return isLoading
}

export default function MyanmarPayment({ amount, orderId, onPaymentComplete, onBack }: MyanmarPaymentProps) {
  const { t } = useLanguage()
  const [paymentStatus, setPaymentStatus] = useState<"pending" | "processing" | "complete" | "failed">("pending")
  const [selectedMethod, setSelectedMethod] = useState<"mmqr" | "kbzpay" | "wavepay">("mmqr")
  const [countdown, setCountdown] = useState(300) // 5 minutes in seconds
  const [isVerifying, setIsVerifying] = useState(false)
  const { toast } = useToast()
  const isQRLoading = useQRCodeLoader()

  // Generate a transaction reference
  const transactionRef = `ESM-${orderId}-${Date.now().toString().slice(-6)}`

  // Format amount with commas
  const formattedAmount = new Intl.NumberFormat("en-MM").format(amount)

  // Generate MMQR data (this would normally come from your backend)
  // This is a simplified example - in production, this should be generated server-side
  const generateMmqrData = () => {
    // This is a placeholder - in a real app, you'd generate this properly
    // Format: merchant ID + amount + transaction reference
    return `00020101021126500015com.mmqrpay.www0115ESIMMYANMAR123${amount}0208${transactionRef}5204581253031045802MM5914eSIM Myanmar6008Yangon610511041643600020115eSIM Myanmar0207Yangon6304${Math.floor(Math.random() * 10000)}`
  }

  // Copy transaction reference to clipboard
  const copyTransactionRef = () => {
    navigator.clipboard.writeText(transactionRef)
    toast({
      title: "Copied to clipboard",
      description: "Transaction reference copied to clipboard",
    })
  }

  // Handle manual verification
  const handleVerifyPayment = () => {
    setIsVerifying(true)

    // Simulate payment verification
    setTimeout(() => {
      setIsVerifying(false)
      setPaymentStatus("complete")

      // Notify parent component
      setTimeout(() => {
        onPaymentComplete()
      }, 2000)
    }, 2000)
  }

  // Countdown timer
  useEffect(() => {
    if (paymentStatus === "pending" && countdown > 0) {
      const timer = setTimeout(() => {
        setCountdown(countdown - 1)
      }, 1000)

      return () => clearTimeout(timer)
    } else if (countdown === 0 && paymentStatus === "pending") {
      setPaymentStatus("failed")
    }
  }, [countdown, paymentStatus])

  // Format countdown time as MM:SS
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>{t("order.payment.title")}</CardTitle>
        <CardDescription>{t("order.payment.description")}</CardDescription>
      </CardHeader>

      <CardContent>
        <AnimatePresence mode="wait">
          {paymentStatus === "pending" && (
            <motion.div key="payment-pending" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
              <Tabs defaultValue="mmqr" className="w-full">
                <TabsList className="grid grid-cols-3 mb-4">
                  <TabsTrigger value="mmqr" onClick={() => setSelectedMethod("mmqr")}>
                    MMQR
                  </TabsTrigger>
                  <TabsTrigger value="kbzpay" onClick={() => setSelectedMethod("kbzpay")}>
                    KBZ Pay
                  </TabsTrigger>
                  <TabsTrigger value="wavepay" onClick={() => setSelectedMethod("wavepay")}>
                    Wave Pay
                  </TabsTrigger>
                </TabsList>

                <TabsContent value="mmqr" className="space-y-4">
                  <div className="bg-muted/50 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-primary mb-1">
                      {formattedAmount} {t("order.payment.mmk")}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {t("order.payment.order")}
                      {orderId}
                    </div>
                  </div>

                  <div className="flex justify-center my-4">
                    <div className="p-3 bg-white rounded-lg relative">
                      {isQRLoading ? (
                        <div className="h-[200px] w-[200px] flex items-center justify-center">
                          <LoadingState text="Generating QR code..." />
                        </div>
                      ) : (
                        <QRCode value={generateMmqrData()} size={200} level="H" renderAs="svg" includeMargin={true} />
                      )}

                      {/* Security indicator */}
                      <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-primary/10 text-primary text-xs px-2 py-1 rounded-full flex items-center gap-1">
                        <Shield className="h-3 w-3" />
                        <span>Secure QR</span>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-4">
                    <div className="flex items-center justify-between bg-muted p-2 rounded-md">
                      <div className="text-sm">
                        <span className="text-muted-foreground">{t("order.payment.transactionRef")} </span>
                        <span className="font-medium">{transactionRef}</span>
                      </div>
                      <Button variant="ghost" size="icon" onClick={copyTransactionRef}>
                        <Copy className="h-4 w-4" />
                      </Button>
                    </div>

                    <div className="text-center">
                      <div className="text-sm text-muted-foreground mb-1">{t("order.payment.expires")}</div>
                      <div className={`font-mono text-lg font-bold ${countdown < 60 ? "text-red-500" : ""}`}>
                        {formatTime(countdown)}
                      </div>
                    </div>

                    <div className="bg-yellow-50 dark:bg-yellow-900/20 p-3 rounded-lg text-sm text-yellow-800 dark:text-yellow-200">
                      <ol className="list-decimal list-inside space-y-1">
                        {t("order.payment.instructions")
                          .split("|")
                          .map((instruction, index) => (
                            <li key={index}>{instruction}</li>
                          ))}
                      </ol>
                    </div>

                    <Button variant="outline" className="w-full" onClick={handleVerifyPayment} disabled={isQRLoading}>
                      {t("order.payment.completed")}
                    </Button>
                  </div>
                </TabsContent>

                <TabsContent value="kbzpay" className="space-y-4">
                  <div className="bg-muted/50 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-primary mb-1">
                      {formattedAmount} {t("order.payment.mmk")}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {t("order.payment.order")}
                      {orderId}
                    </div>
                  </div>

                  <div className="flex justify-center my-4">
                    <div className="w-48 h-48 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 flex items-center justify-center text-white">
                      <div className="text-center">
                        <QrCode className="h-12 w-12 mx-auto mb-2" />
                        <div className="text-sm">KBZ Pay</div>
                      </div>
                    </div>
                  </div>

                  <div className="text-center text-sm text-muted-foreground">KBZ Pay integration coming soon</div>
                </TabsContent>

                <TabsContent value="wavepay" className="space-y-4">
                  <div className="bg-muted/50 p-4 rounded-lg text-center">
                    <div className="text-2xl font-bold text-primary mb-1">
                      {formattedAmount} {t("order.payment.mmk")}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      {t("order.payment.order")}
                      {orderId}
                    </div>
                  </div>

                  <div className="flex justify-center my-4">
                    <div className="w-48 h-48 rounded-lg bg-gradient-to-r from-red-500 to-red-700 flex items-center justify-center text-white">
                      <div className="text-center">
                        <QrCode className="h-12 w-12 mx-auto mb-2" />
                        <div className="text-sm">Wave Pay</div>
                      </div>
                    </div>
                  </div>

                  <div className="text-center text-sm text-muted-foreground">Wave Pay integration coming soon</div>
                </TabsContent>
              </Tabs>
            </motion.div>
          )}

          {paymentStatus === "processing" && (
            <motion.div
              key="payment-processing"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="text-center py-8"
            >
              <LoadingState text={t("order.payment.processing")} size="lg" variant="card" />
              <p className="text-muted-foreground mt-4">{t("order.payment.wait")}</p>
            </motion.div>
          )}

          {paymentStatus === "complete" && (
            <motion.div
              key="payment-complete"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0 }}
              className="text-center py-8"
            >
              <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <Check className="h-8 w-8 text-green-600 dark:text-green-400" />
              </div>
              <h3 className="text-xl font-bold mb-2">{t("order.payment.successful")}</h3>
              <p className="text-muted-foreground mb-6">{t("order.payment.received")}</p>
              <div className="bg-muted/50 p-4 rounded-lg text-left mb-6">
                <h4 className="font-medium mb-2">{t("order.payment.details")}</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("order.payment.transactionID")}</span>
                    <span className="font-medium">{transactionRef}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("order.payment.method")}</span>
                    <span className="font-medium">
                      {selectedMethod === "mmqr"
                        ? "Myanmar Pay MMQR"
                        : selectedMethod === "kbzpay"
                          ? "KBZ Pay"
                          : "Wave Pay"}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">{t("order.payment.date")}</span>
                    <span className="font-medium">{new Date().toLocaleString()}</span>
                  </div>
                </div>
              </div>
            </motion.div>
          )}

          {paymentStatus === "failed" && (
            <motion.div
              key="payment-failed"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="text-center py-8"
            >
              <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-8 w-8 text-red-600 dark:text-red-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-2">{t("order.payment.expired")}</h3>
              <p className="text-muted-foreground mb-6">{t("order.payment.expiredMessage")}</p>
              <Button
                onClick={() => {
                  setPaymentStatus("pending")
                  setCountdown(300)
                }}
                className="flex items-center gap-2"
              >
                <RefreshCw className="h-4 w-4" />
                {t("order.payment.newQR")}
              </Button>
            </motion.div>
          )}
        </AnimatePresence>
      </CardContent>

      <CardFooter className="flex justify-between">
        {paymentStatus === "pending" && (
          <Button variant="outline" onClick={onBack} disabled={isQRLoading}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            {t("order.payment.back")}
          </Button>
        )}

        {paymentStatus === "complete" && (
          <Button className="w-full" onClick={onPaymentComplete}>
            {t("order.payment.continue")}
          </Button>
        )}

        {paymentStatus === "failed" && (
          <Button variant="outline" onClick={onBack} className="mr-auto">
            <ArrowLeft className="h-4 w-4 mr-2" />
            {t("order.payment.back")}
          </Button>
        )}

        {isVerifying && (
          <Button disabled className="ml-auto">
            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            Verifying...
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/ui/page-loading.tsx"
"use client"

import { motion } from "framer-motion"

export function PageLoading() {
  return (
    <motion.div
      className="fixed inset-0 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center z-50"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3 }}
    >
      <div className="relative w-24 h-24 mb-4">
        <motion.div
          className="absolute inset-0 rounded-full border-t-2 border-primary"
          animate={{ rotate: 360 }}
          transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
        />
        <motion.div
          className="absolute inset-2 rounded-full border-t-2 border-primary/70"
          animate={{ rotate: -360 }}
          transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
        />
        <motion.div
          className="absolute inset-4 rounded-full border-t-2 border-primary/40"
          animate={{ rotate: 360 }}
          transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M8 12L11 15L16 10"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>
      <h3 className="text-xl font-bold mb-2">Loading eSIM Data</h3>
      <p className="text-muted-foreground">Please wait while we prepare your experience</p>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
"use client"
import { useState, useEffect } from "react"
import Hero from "./components/Hero"
import AiOrderFlow from "./components/AiOrderFlow"
import { motion, AnimatePresence } from "framer-motion"
import { useLanguage } from "./contexts/LanguageContext"
import { PageLoading } from "./components/ui/page-loading"

export default function Home() {
  const { t } = useLanguage()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Simulate initial page loading
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <>
      <AnimatePresence>{isLoading && <PageLoading />}</AnimatePresence>

      <Hero />

      <section className="relative py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Get Your eSIM in 3 Simple Steps</h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
              No physical SIM card needed. Just select, pay, and connect.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <AiOrderFlow />
          </motion.div>
        </div>
      </section>
    </>
  )
}
</article></body></html>
About

Tags

Share

More from i-cover-aolcom

More Templates Like This

About

Tags

Share

About

Tags

Share

More from i-cover-aolcom

More Templates Like This
