"use client"
import { useRef, useEffect, useState } from "react"
import type React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import {
  MagnifyingGlassIcon,
  PaperAirplaneIcon,
  FaceSmileIcon,
  PaperClipIcon,
  EllipsisHorizontalIcon,
  CheckIcon,
  EnvelopeIcon,
  LockClosedIcon,
  UserIcon,
  BellIcon,
  ShieldCheckIcon,
  MoonIcon,
  CreditCardIcon,
  BanknotesIcon,
  ArrowRightIcon,
  ShoppingCartIcon,
} from "@heroicons/react/24/outline"
import { useMaterial } from "@/contexts/material-context"
import { useColorPalette } from "@/contexts/color-context"
import { cn } from "@/lib/utils"

// Embedded Glass Shader Component
function BannerGlassShader() {
  const { selectedMaterial } = useMaterial()
  const { primaryColor, systemColors, currentTheme } = useColorPalette()
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const [isGlass, setIsGlass] = useState(false)

  // Enhanced color utility functions
  const hexToRgb = (hex: string) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
      ? {
          r: Number.parseInt(result[1], 16),
          g: Number.parseInt(result[2], 16),
          b: Number.parseInt(result[3], 16),
        }
      : { r: 59, g: 130, b: 246 }
  }

  const rgbToHsl = (r: number, g: number, b: number) => {
    r /= 255
    g /= 255
    b /= 255
    const max = Math.max(r, g, b)
    const min = Math.min(r, g, b)
    let h = 0,
      s = 0,
      l = (max + min) / 2

    if (max !== min) {
      const d = max - min
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
      switch (max) {
        case r:
          h = (g - b) / d + (g < b ? 6 : 0)
          break
        case g:
          h = (b - r) / d + 2
          break
        case b:
          h = (r - g) / d + 4
          break
      }
      h /= 6
    }
    return { h: h * 360, s: s * 100, l: l * 100 }
  }

  const hslToRgb = (h: number, s: number, l: number) => {
    h /= 360
    s /= 100
    l /= 100
    const a = s * Math.min(l, 1 - l)
    const f = (n: number) => {
      const k = (n + h * 12) % 12
      return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
    }
    return {
      r: Math.round(f(0) * 255),
      g: Math.round(f(8) * 255),
      b: Math.round(f(4) * 255),
    }
  }

  // Generate harmonious gradient colors based on primary color and theme
  const generateGradientColors = () => {
    const primaryRgb = hexToRgb(primaryColor)
    const primaryHsl = rgbToHsl(primaryRgb.r, primaryRgb.g, primaryRgb.b)

    // Get background color for context
    const bgColor = systemColors.backgroundPrimary || (currentTheme === "dark" ? "#0f0f0f" : "#fafafa")
    const bgRgb = hexToRgb(bgColor)
    const bgHsl = rgbToHsl(bgRgb.r, bgRgb.g, bgRgb.b)

    const isDarkTheme = currentTheme === "dark"

    // Create complementary and analogous colors
    const colors = []

    // Primary color (center of gradient)
    colors.push({
      ...primaryRgb,
      opacity: isDarkTheme ? 0.3 : 0.25,
    })

    // Analogous color 1 (30 degrees clockwise)
    const analogous1Hsl = {
      h: (primaryHsl.h + 30) % 360,
      s: Math.max(primaryHsl.s * 0.8, 20), // Slightly desaturated
      l: isDarkTheme ? Math.min(primaryHsl.l + 10, 70) : Math.max(primaryHsl.l - 5, 30),
    }
    const analogous1Rgb = hslToRgb(analogous1Hsl.h, analogous1Hsl.s, analogous1Hsl.l)
    colors.push({
      ...analogous1Rgb,
      opacity: isDarkTheme ? 0.2 : 0.18,
    })

    // Analogous color 2 (30 degrees counter-clockwise)
    const analogous2Hsl = {
      h: (primaryHsl.h - 30 + 360) % 360,
      s: Math.max(primaryHsl.s * 0.8, 20),
      l: isDarkTheme ? Math.min(primaryHsl.l + 10, 70) : Math.max(primaryHsl.l - 5, 30),
    }
    const analogous2Rgb = hslToRgb(analogous2Hsl.h, analogous2Hsl.s, analogous2Hsl.l)
    colors.push({
      ...analogous2Rgb,
      opacity: isDarkTheme ? 0.15 : 0.12,
    })

    // Triadic color (120 degrees)
    const triadicHsl = {
      h: (primaryHsl.h + 120) % 360,
      s: Math.max(primaryHsl.s * 0.6, 15), // More desaturated
      l: isDarkTheme ? Math.min(primaryHsl.l + 15, 65) : Math.max(primaryHsl.l - 10, 35),
    }
    const triadicRgb = hslToRgb(triadicHsl.h, triadicHsl.s, triadicHsl.l)
    colors.push({
      ...triadicRgb,
      opacity: isDarkTheme ? 0.1 : 0.08,
    })

    // Background-influenced color (blend with background)
    const blendedHsl = {
      h: primaryHsl.h,
      s: Math.max(primaryHsl.s * 0.4, 10), // Very desaturated
      l: isDarkTheme ? Math.min(bgHsl.l + 20, 50) : Math.max(bgHsl.l - 15, 20),
    }
    const blendedRgb = hslToRgb(blendedHsl.h, blendedHsl.s, blendedHsl.l)
    colors.push({
      ...blendedRgb,
      opacity: isDarkTheme ? 0.05 : 0.04,
    })

    return colors
  }

  // Update isGlass state when material changes
  useEffect(() => {
    setIsGlass(selectedMaterial?.id === "glass")
  }, [selectedMaterial])

  // Canvas animation effect
  useEffect(() => {
    if (!canvasRef.current || !isGlass) return

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

    // Set canvas size to match parent
    const resizeCanvas = () => {
      const parent = canvas.parentElement
      if (parent) {
        canvas.width = parent.offsetWidth
        canvas.height = parent.offsetHeight
      }
    }

    resizeCanvas()
    window.addEventListener("resize", resizeCanvas)

    // Generate dynamic colors
    const gradientColors = generateGradientColors()

    // Animation variables
    let time = 0
    const speed = 0.001 // Slightly slower for more elegant movement

    // Animation function
    const animate = () => {
      if (!isGlass) return

      time += speed

      // Create multiple animated gradients for layered effect
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // Create multiple gradient layers
      gradientColors.forEach((color, index) => {
        const phase = index * Math.PI * 0.5 + time * (2 + index * 0.5)
        const radiusMultiplier = 0.4 + index * 0.1

        const gradient = ctx.createRadialGradient(
          canvas.width / 2 + Math.sin(phase) * canvas.width * 0.15,
          canvas.height / 2 + Math.cos(phase * 0.8) * canvas.height * 0.15,
          0,
          canvas.width / 2 + Math.sin(phase * 0.6) * canvas.width * 0.05,
          canvas.height / 2 + Math.cos(phase * 0.4) * canvas.height * 0.05,
          Math.max(canvas.width, canvas.height) * radiusMultiplier,
        )

        // Create gradient with dynamic colors
        gradient.addColorStop(0, `rgba(${color.r}, ${color.g}, ${color.b}, ${color.opacity})`)
        gradient.addColorStop(0.4, `rgba(${color.r}, ${color.g}, ${color.b}, ${color.opacity * 0.6})`)
        gradient.addColorStop(1, `rgba(${color.r}, ${color.g}, ${color.b}, ${color.opacity * 0.1})`)

        // Apply gradient with blend mode
        ctx.globalCompositeOperation = index === 0 ? "source-over" : "soft-light"
        ctx.fillStyle = gradient
        ctx.fillRect(0, 0, canvas.width, canvas.height)
      })

      // Continue animation
      animationRef.current = requestAnimationFrame(animate)
    }

    // Start animation
    animate()

    // Cleanup
    return () => {
      cancelAnimationFrame(animationRef.current)
      window.removeEventListener("resize", resizeCanvas)
    }
  }, [isGlass, primaryColor, systemColors, currentTheme])

  if (!isGlass) return null

  return (
    <canvas
      ref={canvasRef}
      className="absolute inset-0 pointer-events-none"
      style={{
        mixBlendMode: "soft-light",
        opacity: 1.0,
        zIndex: 1,
      }}
      aria-hidden="true"
    />
  )
}

export function BannerVersionTwo() {
  const containerRef = useRef<HTMLDivElement>(null)
  const headerRef = useRef<HTMLDivElement>(null)
  const gridRef = useRef<HTMLDivElement>(null)
  const [isLoaded, setIsLoaded] = useState(false)

  // Section padding classes matching styleguide exactly
  const sectionPaddingClasses = cn(
    "pt-32 pb-32", // Top and bottom padding (8rem each)
    "px-4", // Mobile: 1rem padding on left and right
    "md:px-16", // Medium+: 4rem padding on both sides
    "2xl:px-32", // Extra large screens (1536px+): 8rem padding on both sides
  )

  // Custom background style matching styleguide
  const sectionBackgroundStyle = {
    backgroundColor: "var(--background-primary) !important",
  } as React.CSSProperties

  // Trigger animations on mount - but delay longer to ensure layout is stable
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true)
    }, 800) // Longer delay to ensure no layout shifts

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

  return (
    <section
      className={cn(
        "scroll-mt-16 style-guide-section w-full bg-background-primary !pt-0 relative overflow-hidden",
        sectionPaddingClasses,
        "mx-auto relative z-10",
      )}
      style={{
        ...sectionBackgroundStyle,
        // Disable all transitions during initial load
        transition: "none",
      }}
      data-use-background-primary="true"
      ref={containerRef}
      id="banner-version-two"
    >
      {/* Glass Shader Effect */}
      <BannerGlassShader />

      {/* Header Section */}
      <div ref={headerRef} className="w-full flex flex-col justify-center pb-12 relative z-10">
        {/* Main heading with supporting elements */}
        <div className="relative max-w-4xl">
          <h1
            className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-2 sm:mb-4 leading-tight pt-16"
            style={{
              // Only animate vertically, never horizontally
              transform: isLoaded ? "translateY(0)" : "translateY(20px)",
              opacity: isLoaded ? 1 : 0,
              transition: "transform 1000ms ease-out, opacity 1000ms ease-out",
              willChange: "transform, opacity",
              // Prevent any horizontal movement
              position: "relative",
              left: 0,
              right: 0,
            }}
          >
            Beautiful components,
            <br />
            endless possibilities
          </h1>
          <p
            className="text-base sm:text-lg md:text-xl text-muted-foreground"
            style={{
              // Only animate vertically, never horizontally
              transform: isLoaded ? "translateY(0)" : "translateY(20px)",
              opacity: isLoaded ? 1 : 0,
              transition: "transform 1000ms ease-out 300ms, opacity 1000ms ease-out 300ms",
              willChange: "transform, opacity",
              // Prevent any horizontal movement
              position: "relative",
              left: 0,
              right: 0,
            }}
          >
            Copy-paste components, customize with ease, and build stunning interfaces faster than ever.
          </p>
        </div>
      </div>

      {/* Masonry Layout Section - Responsive grid */}
      <div ref={gridRef} className="w-full relative z-10">
        <div className="flex flex-col md:flex-row gap-4 md:gap-6">
          {/* Column 1 - Full width on mobile, 50% on desktop */}
          <div className="w-full md:w-1/2 flex flex-col gap-4 md:gap-6">
            {/* Improved Form Controls Group */}
            <Card
              className="shadow-sm"
              style={{
                transform: isLoaded ? "translateY(0)" : "translateY(30px)",
                opacity: isLoaded ? 1 : 0,
                transition: "transform 700ms ease-out 700ms, opacity 700ms ease-out 700ms",
              }}
            >
              <CardHeader className="pb-2">
                <CardTitle className="text-sm">Registration Form</CardTitle>
                <CardDescription className="text-xs">Enter your details to create an account</CardDescription>
              </CardHeader>
              <CardContent className="p-4 space-y-4">
                {/* Name Input with Label and Icon */}
                <div className="space-y-1.5">
                  <Label htmlFor="name" className="text-xs font-medium">
                    Full Name
                  </Label>
                  <div className="relative">
                    <UserIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input id="name" placeholder="John Doe" className="pl-9" />
                  </div>
                </div>

                {/* Email Input with Label and Icon */}
                <div className="space-y-1.5">
                  <Label htmlFor="email" className="text-xs font-medium">
                    Email Address
                  </Label>
                  <div className="relative">
                    <EnvelopeIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input id="email" type="email" placeholder="example@email.com" className="pl-9" />
                  </div>
                </div>

                {/* Password Input with Label and Icon */}
                <div className="space-y-1.5">
                  <Label htmlFor="password" className="text-xs font-medium">
                    Password
                  </Label>
                  <div className="relative">
                    <LockClosedIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input id="password" type="password" placeholder="••••••••" className="pl-9" />
                  </div>
                </div>

                {/* Account Type Select with Label */}
                <div className="space-y-1.5">
                  <Label htmlFor="account-type" className="text-xs font-medium">
                    Account Type
                  </Label>
                  <Select>
                    <SelectTrigger id="account-type" className="w-full">
                      <SelectValue placeholder="Select account type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="personal">Personal</SelectItem>
                      <SelectItem value="professional">Professional</SelectItem>
                      <SelectItem value="business">Business</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* Terms Checkbox */}
                <div className="flex items-start space-x-2 pt-2">
                  <Checkbox id="terms" className="mt-0.5" />
                  <div>
                    <Label htmlFor="terms" className="text-xs">
                      I agree to the Terms of Service and Privacy Policy
                    </Label>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="px-4 pb-4 pt-0">
                <Button className="w-full">Create Account</Button>
              </CardFooter>
            </Card>

            {/* Chat Interface using Design System Components */}
            <Card
              className=""
              style={{
                transform: isLoaded ? "translateY(0)" : "translateY(30px)",
                opacity: isLoaded ? 1 : 0,
                transition: "transform 700ms ease-out 1000ms, opacity 700ms ease-out 1000ms",
              }}
            >
              <CardHeader className="px-4 py-3 border-b">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Avatar>
                      <AvatarImage src="/avatar-woman-1.jpg" alt="User" />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-sm mb-0.5">Jane Doe</CardTitle>
                      <CardDescription className="text-xs">Online</CardDescription>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="ghost" size="icon">
                      <MagnifyingGlassIcon className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon">
                      <EllipsisHorizontalIcon className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>

              <CardContent className="p-4 space-y-4 bg-card">
                {/* Time Indicator */}
                <div className="flex justify-center">
                  <Badge variant="outline" className="text-xs font-normal">
                    Today, 10:32 AM
                  </Badge>
                </div>

                {/* Received Message */}
                <div className="flex items-start gap-2 max-w-[85%]">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/avatar-woman-1.jpg" alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <div className="space-y-1">
                    <Card className="shadow-none border bg-muted">
                      <CardContent className="p-2 text-sm">Hi there! How can I help you today?</CardContent>
                    </Card>
                    <span className="text-xs text-muted-foreground pl-1">10:32 AM</span>
                  </div>
                </div>

                {/* Sent Message */}
                <div className="flex items-start justify-end gap-1 ml-auto max-w-[85%]">
                  <div className="space-y-1 flex flex-col items-end">
                    <Card className="shadow-none border-0 bg-primary text-primary-foreground">
                      <CardContent className="p-2 text-sm">
                        I'm looking for information about your design system.
                      </CardContent>
                    </Card>
                    <div className="flex items-center gap-1 pr-1">
                      <span className="text-xs text-muted-foreground">10:33 AM</span>
                      <CheckIcon className="h-3 w-3 text-primary" />
                    </div>
                  </div>
                </div>

                {/* Received Message */}
                <div className="flex items-start gap-2 max-w-[85%]">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/avatar-woman-1.jpg" alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <div className="space-y-1">
                    <Card className="shadow-none border bg-muted">
                      <CardContent className="p-2 text-sm">
                        Our design system includes components, patterns, and guidelines to help create consistent user
                        experiences. Would you like me to show you some examples?
                      </CardContent>
                    </Card>
                    <span className="text-xs text-muted-foreground pl-1">10:34 AM</span>
                  </div>
                </div>

                {/* Typing Indicator */}
                <div className="flex items-start gap-2 max-w-[85%]">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src="/avatar-woman-1.jpg" alt="User" />
                    <AvatarFallback>JD</AvatarFallback>
                  </Avatar>
                  <Card className="shadow-none border bg-muted">
                    <CardContent className="p-2 flex items-center">
                      <div className="flex gap-1">
                        <Badge variant="secondary" className="w-1.5 h-1.5 p-0 rounded-full" />
                        <Badge variant="secondary" className="w-1.5 h-1.5 p-0 rounded-full" />
                        <Badge variant="secondary" className="w-1.5 h-1.5 p-0 rounded-full" />
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </CardContent>

              <CardFooter className="p-3 border-t flex items-center gap-2">
                <Button variant="ghost" size="icon">
                  <PaperClipIcon className="h-4 w-4" />
                </Button>
                <div className="relative flex-1">
                  <Input placeholder="Type a message..." className="pr-8" />
                  <Button variant="ghost" size="icon" className="absolute right-0 top-0">
                    <FaceSmileIcon className="h-4 w-4" />
                  </Button>
                </div>
                <Button size="icon">
                  <PaperAirplaneIcon className="h-4 w-4" />
                </Button>
              </CardFooter>
            </Card>
          </div>

          {/* Column 2 - Full width on mobile, 50% on desktop */}
          <div className="w-full md:w-1/2 flex flex-col gap-4 md:gap-6">
            {/* Simplified Tabs with Account and Settings */}
            <Card
              className="shadow-sm"
              style={{
                transform: isLoaded ? "translateY(0)" : "translateY(30px)",
                opacity: isLoaded ? 1 : 0,
                transition: "transform 700ms ease-out 900ms, opacity 700ms ease-out 900ms",
              }}
            >
              <CardContent className="p-4 pt-4">
                <Tabs defaultValue="account" className="w-full">
                  <TabsList className="grid w-full grid-cols-2">
                    <TabsTrigger value="account">Account</TabsTrigger>
                    <TabsTrigger value="settings">Settings</TabsTrigger>
                  </TabsList>

                  {/* Account Tab */}
                  <TabsContent value="account" className="p-4 text-sm mt-2 border rounded-md">
                    <div className="space-y-4">
                      {/* Profile Section */}
                      <div className="flex items-center gap-4">
                        <Avatar className="h-12 w-12">
                          <AvatarImage src="/avatar-man-1.jpg" alt="User" />
                          <AvatarFallback>JD</AvatarFallback>
                        </Avatar>
                        <div>
                          <h4 className="font-medium mb-1">John Doe</h4>
                          <p className="text-xs text-muted-foreground">john.doe@example.com</p>
                        </div>
                      </div>

                      <Separator className="my-3" />

                      {/* Account Details */}
                      <div className="space-y-2">
                        <h4 className="text-xs font-medium text-muted-foreground mb-2">ACCOUNT DETAILS</h4>

                        <div className="flex justify-between items-center py-1">
                          <span className="text-xs">Plan</span>
                          <Badge>Pro</Badge>
                        </div>

                        <div className="flex justify-between items-center py-1">
                          <span className="text-xs">Joined</span>
                          <span className="text-xs text-muted-foreground">March 2023</span>
                        </div>

                        <div className="flex justify-between items-center py-1">
                          <span className="text-xs">Storage</span>
                          <span className="text-xs text-muted-foreground">8.5 GB / 10 GB</span>
                        </div>
                      </div>

                      <Separator className="my-3" />

                      {/* Actions */}
                      <div className="flex gap-2">
                        <Button size="sm">Edit Profile</Button>
                        <Button size="sm" variant="outline">
                          Upgrade Plan
                        </Button>
                      </div>
                    </div>
                  </TabsContent>

                  {/* Settings Tab */}
                  <TabsContent value="settings" className="p-3 text-sm mt-2 border rounded-md">
                    <div className="space-y-4">
                      {/* Notifications Section */}
                      <div className="space-y-2">
                        <h4 className="text-xs font-medium text-muted-foreground">NOTIFICATIONS</h4>

                        <div className="flex items-center justify-between py-1">
                          <div className="flex items-center gap-2">
                            <BellIcon className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs">Email Notifications</span>
                          </div>
                          <Switch id="email-notifications" />
                        </div>

                        <div className="flex items-center justify-between py-1">
                          <div className="flex items-center gap-2">
                            <BellIcon className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs">Push Notifications</span>
                          </div>
                          <Switch id="push-notifications" defaultChecked />
                        </div>
                      </div>

                      <Separator />

                      {/* Privacy Section */}
                      <div className="space-y-2">
                        <h4 className="text-xs font-medium text-muted-foreground">PRIVACY</h4>

                        <div className="flex items-center justify-between py-1">
                          <div className="flex items-center gap-2">
                            <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs">Two-Factor Authentication</span>
                          </div>
                          <Switch id="two-factor" />
                        </div>

                        <div className="flex items-center justify-between py-1">
                          <div className="flex items-center gap-2">
                            <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs">Activity Tracking</span>
                          </div>
                          <Switch id="activity-tracking" defaultChecked />
                        </div>
                      </div>

                      <Separator />

                      {/* Appearance Section */}
                      <div className="space-y-2">
                        <h4 className="text-xs font-medium text-muted-foreground">APPEARANCE</h4>

                        <div className="flex items-center justify-between py-1">
                          <div className="flex items-center gap-2">
                            <MoonIcon className="h-4 w-4 text-muted-foreground" />
                            <span className="text-xs">Dark Mode</span>
                          </div>
                          <Switch id="dark-mode" />
                        </div>

                        <div className="flex items-center justify-between py-1">
                          <span className="text-xs">Language</span>
                          <Select defaultValue="english">
                            <SelectTrigger className="h-7 w-24">
                              <SelectValue placeholder="Select" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="english">English</SelectItem>
                              <SelectItem value="spanish">Spanish</SelectItem>
                              <SelectItem value="french">French</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>

                      <Button size="sm" className="w-full">
                        Save Changes
                      </Button>
                    </div>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>

            {/* Checkout Component */}
            <Card
              className="shadow-sm"
              style={{
                transform: isLoaded ? "translateY(0)" : "translateY(30px)",
                opacity: isLoaded ? 1 : 0,
                transition: "transform 700ms ease-out 1200ms, opacity 700ms ease-out 1200ms",
              }}
            >
              <CardHeader className="px-4 py-3 border-b">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-sm">Checkout</CardTitle>
                    <CardDescription className="text-xs">Complete your purchase</CardDescription>
                  </div>
                  <ShoppingCartIcon className="h-5 w-5 text-muted-foreground" />
                </div>
              </CardHeader>
              <CardContent className="p-4 space-y-4">
                {/* Order Summary */}
                <div className="space-y-3">
                  <h4 className="text-xs font-medium text-muted-foreground">ORDER SUMMARY</h4>

                  <div className="flex items-center justify-between py-1 border-b">
                    <div className="flex items-start gap-2">
                      <div className="h-10 w-10 bg-muted rounded flex items-center justify-center">
                        <img src="/diverse-products-still-life.png" alt="Product" className="h-8 w-8 object-cover" />
                      </div>
                      <div>
                        <h5 className="text-xs font-medium">Premium Headphones</h5>
                        <p className="text-xs text-muted-foreground">Black, Wireless</p>
                      </div>
                    </div>
                    <span className="text-xs font-medium">$249.99</span>
                  </div>

                  {/* Price Breakdown */}
                  <div className="space-y-1 pt-1">
                    <div className="flex justify-between text-xs">
                      <span className="text-muted-foreground">Subtotal</span>
                      <span>$249.99</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-muted-foreground">Shipping</span>
                      <span>$4.99</span>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span className="text-muted-foreground">Tax</span>
                      <span>$25.00</span>
                    </div>
                    <Separator className="my-2" />
                    <div className="flex justify-between text-sm font-medium">
                      <span>Total</span>
                      <span>$279.98</span>
                    </div>
                  </div>
                </div>

                {/* Payment Method */}
                <div className="space-y-3">
                  <h4 className="text-xs font-medium text-muted-foreground">PAYMENT METHOD</h4>

                  <RadioGroup defaultValue="card" className="space-y-2">
                    <div className="flex items-center space-x-2 border rounded-md p-2">
                      <RadioGroupItem value="card" id="card" />
                      <Label htmlFor="card" className="flex items-center gap-2 text-xs cursor-pointer">
                        <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
                        Credit Card
                      </Label>
                    </div>

                    <div className="flex items-center space-x-2 border rounded-md p-2">
                      <RadioGroupItem value="paypal" id="paypal" />
                      <Label htmlFor="paypal" className="flex items-center gap-2 text-xs cursor-pointer">
                        <BanknotesIcon className="h-4 w-4 text-muted-foreground" />
                        PayPal
                      </Label>
                    </div>
                  </RadioGroup>

                  {/* Credit Card Form */}
                  <div className="space-y-3">
                    <div className="space-y-1.5">
                      <Label htmlFor="card-number" className="text-xs">
                        Card Number
                      </Label>
                      <Input id="card-number" placeholder="1234 5678 9012 3456" />
                    </div>

                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-1.5">
                        <Label htmlFor="expiry" className="text-xs">
                          Expiry Date
                        </Label>
                        <Input id="expiry" placeholder="MM/YY" />
                      </div>
                      <div className="space-y-1.5">
                        <Label htmlFor="cvc" className="text-xs">
                          CVC
                        </Label>
                        <Input id="cvc" placeholder="123" />
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="px-4 py-3 border-t">
                <Button className="w-full flex items-center justify-center gap-1">
                  Complete Purchase
                  <ArrowRightIcon className="h-4 w-4" />
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}