// Home page (route: /). SSR-first: the view is server-rendered, then components
// (.wrn files under app/components) hydrate in the browser. Styled with Tailwind.
page Home {
  seo {
    title = "Home"
    description = "web — built with WrNexus, an SSR-first Bun framework."
  }

  view {
    <main class="relative min-h-screen overflow-hidden bg-white text-slate-900 dark:bg-[#0b0f1e] dark:text-slate-100">
      <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-40 mx-auto h-96 max-w-2xl rounded-full bg-indigo-500/20 blur-3xl"></div>

      <div class="relative mx-auto flex min-h-screen max-w-3xl flex-col px-6">
        <header class="flex items-center justify-between py-6">
          <span class="flex items-center gap-2.5 font-semibold tracking-tight">
            <span class="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-600 text-sm font-bold text-white">W</span>
            web
          </span>
          <button data-wire-theme-toggle class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-slate-400 dark:hover:border-white/20 dark:hover:text-white">
            Toggle theme
          </button>
        </header>

        <section class="flex flex-1 flex-col items-center justify-center py-16 text-center">
          <p class="font-mono text-xs uppercase tracking-[0.2em] text-indigo-500 dark:text-indigo-400">SSR-first · Bun-native</p>

          <h1 class="mt-5 text-4xl font-bold leading-[1.1] tracking-tight sm:text-6xl">
            Server-rendered.<br />
            Instantly <span class="bg-gradient-to-r from-indigo-500 to-violet-500 bg-clip-text text-transparent">interactive</span>.
          </h1>

          <p class="mt-5 max-w-md text-base leading-relaxed text-slate-600 dark:text-slate-400">
            web runs on WrNexus — write <code class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.85em] text-slate-800 dark:bg-white/10 dark:text-slate-200">.wrn</code> components, ship no client boilerplate, and let the server do the work.
          </p>

          <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
            <a href="/about" class="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">Get started</a>
            <a href="/api/hello" class="rounded-lg border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:border-slate-300 dark:border-white/10 dark:text-slate-300 dark:hover:border-white/20">View API</a>
          </div>

          <div class="mt-14 w-full max-w-md rounded-2xl border border-slate-200 bg-white p-6 text-left shadow-sm dark:border-white/10 dark:bg-white/5">
            <div class="flex items-center gap-2 font-mono text-xs text-slate-400">
              <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
              live · hydrated on the server
            </div>
            <div class="mt-4 flex items-center justify-between gap-4">
              <div data-component="counter" start="0" label="Clicks"></div>
              <span class="max-w-[10rem] text-right text-xs leading-snug text-slate-500">This button works. You wrote zero client JavaScript.</span>
            </div>
          </div>

          <p class="mt-10 font-mono text-xs text-slate-400 dark:text-slate-600">
            edit <span class="text-slate-600 dark:text-slate-400">app/pages/index.wrn</span> to make it yours
          </p>
        </section>

        <footer class="border-t border-slate-100 py-6 text-center text-xs text-slate-400 dark:border-white/5 dark:text-slate-600">
          Built with <a href="https://www.npmjs.com/package/@wrnexus/cli" class="text-slate-600 underline-offset-2 hover:underline dark:text-slate-400">WrNexus</a>
        </footer>
      </div>
    </main>
  }
}