Lemora Elevated Elegance

// Optimized Animation System
import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'

const FadeInWhenVisible = ({ children }) => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1
  })

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{
        duration: 0.8,
        ease: [0.25, 0.1, 0.25, 1]
      }}
      style={{ willChange: inView ? 'transform, opacity' : 'auto' }}
    >
      {children}
    </motion.div>
  )
}

// Custom animations in Tailwind
const tailwindConfig = {
  theme: {
    extend: {
      animation: {
        'gradient-shift': 'gradientShift 15s ease infinite',
        'float-slow': 'float 6s ease-in-out infinite',
        'shimmer': 'shimmer 2s linear infinite'
      },
      keyframes: {
        gradientShift: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-20px)' }
        }
      }
    }
  }
}

// Type-safe translation system
type TranslationKeys = {
  hero: {
    title: string
    subtitle: string
    cta: string
  }
  product: {
    addToCart: string
    outOfStock: string
    price: (params: { price: string }) => string
  }
  common: {
    loading: string
    error: string
  }
}

// Custom hook with type safety
const useTranslation = () => {
  const { language } = useLanguageContext()

  const t = <K extends keyof TranslationKeys>(
    key: K,
    params?: any
  ): string => {
    const translation = translations[language][key]

    if (typeof translation === 'function') {
      return translation(params)
    }

    return translation
  }

  return { t, language, setLanguage }
}

// Usage with autocomplete
const Hero = () => {
  const { t } = useTranslation()

  return (
    <div>
      <h1>{t('hero.title')}</h1>
      <p>{t('product.price', { price: '49.99' })}</p>
      {/* ✅ Type-safe - IDE autocomplete */}
      {/* ❌ t('invalid.key') - Compile error */}
    </div>
  )
}

// Bilingual form with validation
const orderSchema = z.object({
  name: z.string().min(2, t('form.errors.nameRequired')),
  email: z.string().email(t('form.errors.emailInvalid')),
  phone: z.string().min(10, t('form.errors.phoneRequired')),
  address: z.string().min(5, t('form.errors.addressRequired')),
  city: z.string().min(2, t('form.errors.cityRequired')),
  products: z.array(z.object({
    id: z.string(),
    quantity: z.number().min(1).max(10)
  })).min(1, t('form.errors.noProducts'))
})

const OrderForm = () => {
  const { t } = useTranslation()
  const form = useForm({
    resolver: zodResolver(orderSchema),
    mode: 'onBlur'
  })

  const onSubmit = async (data) => {
    try {
      await submitToGoogleSheets(data)
      toast.success(t('form.success'))
      // Confetti effect on success
      confetti()
    } catch (error) {
      toast.error(t('form.error'))
      // Offer WhatsApp fallback
      setShowWhatsAppFallback(true)
    }
  }

  return (
    <Form {...form}>
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>{t('form.labels.email')}</FormLabel>
            <FormControl>
              <Input {...field} placeholder={t('form.placeholders.email')} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </Form>
  )
}