import LanguageSwitcher from "@wrnexus/i18n/components/LanguageSwitcher.wrn"

page InternationalizationShowcase {
  seo {
    title = "Internationalization Showcase"
    description = "English, Hindi, and Marathi localization with WRNexusJS."
  }

  view {
    <main class="min-h-screen bg-[var(--wire-color-bg)] text-[var(--wire-color-text)]">
      <header class="border-b border-[var(--wire-color-border)] bg-[var(--wire-color-surface)]">
        <div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-5 px-6 py-5">
          <div>
            <p class="m-0 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--wire-color-primary)]" data-t="header.eyebrow">WRNexus i18n</p>
            <h1 class="m-0 mt-1 text-xl font-bold" data-t="header.title">Internationalization showcase</h1>
          </div>
          <LanguageSwitcher
            label="Language / भाषा"
            placeholder="Choose language"
            helperText="Saved in your language cookie"
          />
        </div>
      </header>

      <div class="mx-auto grid max-w-6xl gap-8 px-6 py-10">
        <section class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-8 shadow-sm">
          <p class="m-0 text-sm font-medium text-[var(--wire-color-primary)]" data-t="hero.kicker">Three languages, one page</p>
          <h2 class="mb-3 mt-2 text-4xl font-bold tracking-tight" data-t="hero.title">Everything needed for an international product</h2>
          <p class="m-0 max-w-3xl text-lg leading-8 text-[var(--wire-color-muted)]" data-t="hero.description">The server chooses a language from the cookie or Accept-Language header and renders translated HTML.</p>
        </section>

        <section>
          <h2 class="mb-2 text-2xl font-bold" data-t="switcher.variantsTitle">Responsive switcher variants</h2>
          <p class="mb-5 mt-0 text-[var(--wire-color-muted)]" data-t="switcher.variantsDescription">Every variant reads locales from configuration and the active language from the request cookie.</p>
          <div class="grid items-start gap-5 rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 md:grid-cols-2">
            <div class="grid gap-2"><strong data-t="switcher.compactTitle">Compact</strong><LanguageSwitcher variant="compact" showHelper="false" label="Language / भाषा" /></div>
            <div class="grid gap-2"><strong data-t="switcher.segmentedTitle">Segmented</strong><LanguageSwitcher variant="segmented" showHelper="false" label="Language / भाषा" /></div>
          </div>
        </section>

        <section>
          <h2 class="mb-4 text-2xl font-bold" data-t="sections.content">Translated content</h2>
          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            <article class="demo-card"><span class="icon-[lucide--languages] demo-icon"></span><h3 data-t="cards.text.title">Text translation</h3><p data-t="cards.text.body">Headings, paragraphs, buttons, and labels are rendered on the server.</p></article>
            <article class="demo-card"><span class="icon-[lucide--text-cursor-input] demo-icon"></span><h3 data-t="cards.attributes.title">Attribute translation</h3><label class="mt-3 grid gap-1 text-sm"><span data-t="cards.attributes.label">Search label</span><input class="rounded-xl border border-[var(--wire-color-border)] bg-transparent px-3 py-2" t:placeholder="cards.attributes.placeholder" /></label></article>
            <article class="demo-card"><span class="icon-[lucide--message-square-more] demo-icon"></span><h3 data-t="cards.interpolation.title">Interpolation</h3><p data-t="cards.interpolation.body">Parameters such as a person's name are inserted safely.</p><a class="demo-link" href="/api/formats" data-t="cards.interpolation.action">Open the dynamic API</a></article>
            <article class="demo-card"><span class="icon-[lucide--copy-plus] demo-icon"></span><h3 data-t="cards.plural.title">Plural rules</h3><p data-t="cards.plural.body">One item and many items follow locale-aware CLDR rules.</p></article>
            <article class="demo-card"><span class="icon-[lucide--indian-rupee] demo-icon"></span><h3 data-t="cards.numbers.title">Numbers and currency</h3><p data-t="samples.number">12,34,567.89</p><p data-t="samples.currency">₹1,234.50</p><p data-t="samples.percent">78%</p></article>
            <article class="demo-card"><span class="icon-[lucide--calendar-days] demo-icon"></span><h3 data-t="cards.time.title">Dates and relative time</h3><p data-t="samples.date">15 August 2026</p><p data-t="samples.relative">3 days ago</p></article>
            <article class="demo-card"><span class="icon-[lucide--list] demo-icon"></span><h3 data-t="cards.list.title">List formatting</h3><p data-t="samples.list">Mumbai, Pune, and Nagpur</p></article>
            <article class="demo-card"><span class="icon-[lucide--route] demo-icon"></span><h3 data-t="cards.fallback.title">Fallback chains</h3><p data-t="cards.fallback.body">Missing regional content falls back to the base language and then English.</p></article>
            <article class="demo-card"><span class="icon-[lucide--file-code-2] demo-icon"></span><h3 data-t="cards.document.title">Document language</h3><p data-t="cards.document.body">The same cookie sets the server-rendered html lang and dir attributes.</p></article>
          </div>
        </section>

        <section class="rounded-3xl bg-[var(--wire-color-primary)] p-8 text-[var(--wire-color-primary-contrast)]">
          <h2 class="m-0 text-2xl font-bold" data-t="api.title">Try request-aware formatting</h2>
          <p class="mb-5 mt-2 opacity-85" data-t="api.description">The JSON endpoint uses ctx.lang, translations, Intl formatters, interpolation, plurals, and lists.</p>
          <a href="/api/formats" class="inline-flex rounded-xl bg-white px-4 py-2 font-semibold text-slate-900" data-t="api.action">View localized JSON</a>
        </section>
      </div>
    </main>
  }
}