import { initializeI18n } from '@/lib/i18n/config'

// Initialize i18n
const i18n = initializeI18n()

// Change language
await i18n.changeLanguage('es')

import { useI18n } from '@/hooks/use-i18n'

function MyComponent() {
  const { t } = useI18n()

  return (
    <div>
      <h1>{t('app.name')}</h1>
      <p>{t('app.description')}</p>
    </div>
  )
}

const { t } = useI18n()

<p>{t('notifications.newMessage', { sender: 'John' })}</p>
// Output: "New message from John"

const { t } = useI18n()

<p>{t('time.minute', { count: 1 })}</p>  // "1 minute"
<p>{t('time.minute', { count: 5 })}</p>  // "5 minutes"

import { useDateFormat } from '@/hooks/use-i18n'

function DateDisplay() {
  const { formatDate, formatRelativeTime } = useDateFormat()

  return (
    <div>
      <p>{formatDate(new Date(), { dateStyle: 'long' })}</p>
      <p>{formatRelativeTime(new Date())}</p>
    </div>
  )
}

import { useNumberFormat } from '@/hooks/use-i18n'

function PriceDisplay() {
  const { formatCurrency, formatNumber } = useNumberFormat()

  return (
    <div>
      <p>{formatCurrency(99.99, 'USD')}</p>
      <p>{formatNumber(1000000)}</p>
    </div>
  )
}

import { useRTL } from '@/hooks/use-i18n'

function MyComponent() {
  const isRTL = useRTL()

  return (
    <div className={isRTL ? 'rtl-layout' : 'ltr-layout'}>
      {/* Content */}
    </div>
  )
}

// src/lib/i18n/locales.ts
export const SUPPORTED_LOCALES = {
  // ... existing locales
  newLang: {
    code: 'newLang',
    name: 'Native Name',
    englishName: 'English Name',
    script: 'Latn',
    direction: 'ltr',
    bcp47: 'new-LANG',
    flag: '🏳️',
    dateFnsLocale: 'newLang',
    numberLocale: 'new-LANG',
    pluralRule: 'other',
    isComplete: false,
    completionPercent: 0,
  },
}

// Skip links
<a href="#main" className="skip-link">
  Skip to main content
</a>

// Focus management
<button className="focus-ring">
  Accessible Button
</button>

<button aria-label="Close dialog">
  <X className="h-4 w-4" aria-hidden="true" />
</button>

<input
  type="text"
  aria-label="Search messages"
  aria-describedby="search-hint"
/>
<p id="search-hint" className="sr-only">
  Type to search through messages
</p>

import { HighContrastMode } from '@/components/accessibility/HighContrastMode'

function Settings() {
  return (
    <div>
      <HighContrastMode />
    </div>
  )
}

// CSS class for manual control
<div className="reduce-motion">
  {/* Content with animations disabled */}
</div>

import { AccessibilityMenu } from '@/components/accessibility/AccessibilityMenu'

function Layout() {
  return (
    <div>
      <AccessibilityMenu />
    </div>
  )
}

import { expectNoA11yViolations } from '@/lib/accessibility/test-utils'

test('Component is accessible', async () => {
  await expectNoA11yViolations(<MyComponent />)
})

import { test } from '@playwright/test'
import { injectAxe, checkA11y } from 'axe-playwright'

test('Page is accessible', async ({ page }) => {
  await page.goto('/')
  await injectAxe(page)
  await checkA11y(page)
})

import { checkColorContrast } from '@/lib/accessibility/wcag-audit'

const result = checkColorContrast('#000000', '#FFFFFF', 16, false)
console.log(result)
// { ratio: 21, passes: true, level: 'AAA' }

import { runWCAGAudit, generateWCAGReport } from '@/lib/accessibility/wcag-audit'

const report = generateWCAGReport()
console.log(`Passed: ${report.passed}/${report.total}`)
console.log(`Conformance: ${report.conformanceLevel}`)

// Good ✅
<button onClick={handleClick}>Click me</button>

// Bad ❌
<div onClick={handleClick}>Click me</div>

// Good ✅
<button aria-label="Delete message">
  <Trash className="h-4 w-4" aria-hidden="true" />
</button>

// Bad ❌
<button>
  <Trash className="h-4 w-4" />
</button>

// Good ✅
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" />

// Bad ❌
<Input type="email" placeholder="Email" />

// Good ✅ - 4.5:1 ratio
color: #000000;
background: #FFFFFF;

// Bad ❌ - 2.1:1 ratio
color: #CCCCCC;
background: #FFFFFF;

// Good ✅
<button className="focus-ring">Button</button>

// Bad ❌
button:focus { outline: none; }