Cross-Cultural UX: Designing SaaS Interfaces for Global Users

// Adapt color scheme based on locale
const colorSchemes = {
  en: {
    primary: "#2563EB",    // Blue — trust
    success: "#16A34A",    // Green — success
    danger: "#DC2626",     // Red — danger
    warning: "#F59E0B",    // Yellow — warning
  },
  zh: {
    primary: "#DC2626",    // Red — prosperity, auspicious
    success: "#16A34A",    // Green — harmony
    danger: "#DC2626",     // Still red for errors
    warning: "#F59E0B",    // Yellow — still caution
  },
}

// German text can expand 30-40% compared to English
interface ResponsiveTextProps {
  en: string
  de: string
  zh: string
}

const buttonLabels: ResponsiveTextProps = {
  en: "Subscribe",
  de: "Abonnieren",           // ~25% longer
  zh: "订阅",                  // 50% shorter
}

// In CSS, account for language-specific widths
.button {
  &[lang="de"] { min-width: 140px; }
  &[lang="en"] { min-width: 100px; }
  &[lang="zh"] { min-width: 80px; }
}

// Adapt form fields per locale
const addressFormats = {
  en: ["Street", "City", "State", "ZIP Code"],
  de: ["Straße", "PLZ", "Ort", "Bundesland"],
  zh: ["省份", "城市", "区/县", "详细地址"],
}

const phoneFormats = {
  en: "+1 (555) 123-4567",
  de: "+49 30 12345678",
  zh: "+86 138 1234 5678",
}

// Date format adaptation
function getDateFormat(locale: string): string {
  const formats: Record<string, string> = {
    en: "MM/DD/YYYY",
    de: "DD.MM.YYYY",
    zh: "YYYY-MM-DD",
  }
  return formats[locale] ?? "YYYY-MM-DD"
}

// Show payment methods based on user locale
function PaymentMethods({ locale }: { locale: string }) {
  const methods = {
    en: ["card", "paypal"],
    de: ["card", "sepa", "paypal", "sofort"],
    zh: ["alipay", "wechat", "card"],
  }

  return (
    <div className="payment-methods">
      {methods[locale as keyof typeof methods]?.map((method) => (
        <PaymentMethodCard key={method} method={method} />
      ))}
    </div>
  )
}

function Navigation({ locale }: { locale: string }) {
  // Chinese users expect more navigation items visible
  const items = locale === "zh"
    ? ["Home", "Pricing", "Features", "Docs", "Blog", "Support", "API", "Changelog"]
    : ["Home", "Pricing", "Docs", "Blog"]

  // German users expect detailed sub-navigation
  const showSubNav = locale === "de"

  return (
    <nav>
      {items.map((item) => (
        <NavItem key={item} label={item} showSubNav={showSubNav} />
      ))}
    </nav>
  )
}

const a11yRequirements = {
  en: "WCAG 2.1 AA (ADA compliance)",
  de: "BITV 2.0 (Barrierefreiheit)",
  zh: "GB/T 37668 (Information Accessibility)",
}

// Common WCAG practices that benefit all users:
function AccessibleButton({ label, locale }: { label: string; locale: string }) {
  return (
    <button
      aria-label={label}
      // German interfaces are expected to have high contrast
      className={locale === "de" ? "high-contrast" : ""}
    >
      {label}
    </button>
  )
}