<script lang="ts">
  import { SITE } from '$lib/config';
</script>

<svelte:head>
  <title>Sign in · {SITE.name}</title>
</svelte:head>

<section class="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-6 py-16">
  <div class="rounded-2xl border border-helix-border bg-helix-bg-2/60 p-10 backdrop-blur">
    <h1 class="text-3xl font-semibold tracking-tight">Sign in to {SITE.name}</h1>
    <p class="mt-3 text-helix-ink-dim">
      HELIX uses your <strong class="text-helix-ink">Gitea</strong> account at
      <code class="font-mono text-sm">{SITE.giteaBaseUrl.replace('https://', '')}</code>.
      Anyone can read; authoring is restricted to the
      <code class="font-mono text-sm">{SITE.giteaOrg}</code> organisation.
    </p>

    <a
      href="/auth/gitea"
      class="mt-8 inline-flex w-full items-center justify-center gap-3 rounded-lg bg-helix-process px-5 py-3 text-base font-medium text-white shadow-lg shadow-helix-process/30 transition hover:bg-helix-area focus:outline-none focus-visible:ring-2 focus-visible:ring-helix-accent"
    >
      <svg viewBox="0 0 24 24" class="h-5 w-5" aria-hidden="true">
        <path
          fill="currentColor"
          d="M12 2a10 10 0 0 0-3.16 19.5c.5.1.68-.21.68-.47v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.52 1.03 1.52 1.03.89 1.52 2.34 1.08 2.91.82.09-.65.35-1.08.63-1.33-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.99 1.03-2.69-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.9-1.29 2.74-1.02 2.74-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.86v2.76c0 .27.18.58.69.48A10 10 0 0 0 12 2"
        />
      </svg>
      Continue with Gitea
    </a>

    <p class="mt-6 text-xs text-helix-ink-faint">
      You'll be redirected to Gitea to approve, then back here. No password is stored by HELIX.
    </p>
  </div>
</section>
