<Layouts.app flash={@flash} current_user={@current_user}>
  <div class="min-h-screen bg-gradient-to-br from-base-100 via-secondary/5 to-base-200 flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
      <div class="text-center mb-8">
        <h2 class="text-neutral text-2xl">
          Sign in with your email
        </h2>
      </div>

      <div class="bg-base-100 rounded-2xl shadow-2xl border border-base-200 overflow-hidden">
        <div class="p-8">
          <form phx-submit="request_magic_link" class="space-y-5">
            <.input
              type="email"
              name="email"
              id="email"
              label="Email Address"
              value={@email}
              required
              placeholder="you@example.com"
            />

            <button
              type="submit"
              disabled={@loading}
              class="btn btn-secondary mt-2 w-full rounded-xl text-white"
            >
              <%= if @loading do %>
                Sending...
              <% else %>
                Request Magic Link
              <% end %>
            </button>
          </form>
        </div>

        <div class="px-8 py-4 bg-base-200 border-t border-base-300">
          <p class="text-xs text-center text-neutral">
            We'll send you a secure link to sign in without a password
          </p>
        </div>
      </div>

      <div class="mt-6 text-center">
        <.link
          navigate="/"
          class="inline-flex items-center gap-2 text-sm text-neutral hover:text-secondary transition-colors"
        >
          <.icon name="hero-arrow-left" class="size-4" />
          <span>Back to home</span>
        </.link>
      </div>
    </div>
  </div>
</Layouts.app>
