Auth Floating

"use client";

import { useId, useState, type FormEvent } from "react";
import { ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AuthFloatingProps {
  brand?: string;
  title?: string;
  subtitle?: string;
  onSubmit?: (email: string) => void | Promise<void>;
  onGoogle?: () => void;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Sign-up screen: centered glass card (Google + email magic link) surrounded by floating, gently bobbing glass preview cards (recap, tasks) on large screens. */
export function AuthFloating({
  brand = "Halo",
  title = "Create your Halo account",
  subtitle = "Free for your first 10 meetings. No card needed.",
  onSubmit,
  onGoogle,
  className,
}: AuthFloatingProps) {
  const id = useId();
  const [sent, setSent] = useState("");

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const email = String(new FormData(e.currentTarget).get("email"));
    await onSubmit?.(email);
    setSent(email);
  };

  return (
    <div className={cn("relative grid min-h-dvh place-items-center overflow-hidden px-4 py-12 text-da-fg", className)}>
      <div aria-hidden className="pointer-events-none absolute inset-0 hidden lg:block">
        <div className={cn("glass-bob absolute top-[14%] left-[8%] w-64 -rotate-6 rounded-da-lg p-4 shadow-da-lg", GLASS)}>
          <p className="flex items-center gap-1.5 text-xs font-semibold text-da-primary">
            <Sparkles className="size-3.5" /> AI recap
          </p>
          <p className="mt-2 text-sm font-semibold">Design critique</p>
          <p className="mt-1 text-xs text-da-muted-fg">Keep the 3-step flow. Drop the video step. Jin owns illustrations.</p>
        </div>
        <div className={cn("glass-bob absolute right-[8%] bottom-[16%] w-60 rotate-6 rounded-da-lg p-4 shadow-da-lg [animation-delay:-3s]", GLASS)}>
          <p className="text-xs font-semibold">Action items</p>
          <ul className="mt-2 space-y-1.5 text-xs">
            <li className="flex items-center gap-1.5">
              <CheckCircle2 className="size-3.5 text-da-success" /> Ship pricing variant B
            </li>
            <li className="flex items-center gap-1.5">
              <span className="size-3.5 rounded-full border border-da-border-strong" /> Draft offline RFC
            </li>
          </ul>
        </div>
        <div className="glass-bob absolute top-[20%] right-[14%] size-24 rounded-full bg-gradient-to-br from-da-primary to-da-accent opacity-60 blur-2xl [animation-delay:-1.5s]" />
      </div>

      <main className={cn("relative w-full max-w-sm rounded-da-lg p-8 shadow-da-lg", GLASS)}>
        <p className="flex items-center gap-2 font-da-display text-lg font-semibold">
          <span aria-hidden className="size-7 rounded-full bg-gradient-to-br from-da-primary to-da-accent" />
          {brand}
        </p>
        <h1 className="mt-6 font-da-display text-2xl font-semibold tracking-da-display">{title}</h1>
        <p className="mt-1 text-sm text-da-muted-fg">{subtitle}</p>
        {sent ? (
          <p role="status" className="mt-8 rounded-da-md bg-da-success/15 p-4 text-sm">
            <span className="font-semibold">Check your inbox.</span> We sent a sign-in link to <span className="font-semibold">{sent}</span>.
          </p>
        ) : (
          <>
            <button
              type="button"
              onClick={onGoogle}
              className="da-focus da-transition da-stroke mt-8 flex h-12 w-full items-center justify-center gap-2.5 rounded-da-pill bg-da-surface font-semibold hover:bg-da-secondary"
            >
              <svg aria-hidden viewBox="0 0 24 24" className="size-4">
                <path fill="#4285F4" d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.4h6.5a5.6 5.6 0 0 1-2.4 3.6v3h3.9c2.2-2.1 3.5-5.1 3.5-8.7Z" />
                <path fill="#34A853" d="M12 24c3.2 0 6-1.1 7.9-2.9l-3.9-3a7.2 7.2 0 0 1-10.7-3.8H1.3v3.1A12 12 0 0 0 12 24Z" />
                <path fill="#FBBC05" d="M5.3 14.3a7.2 7.2 0 0 1 0-4.6V6.6H1.3a12 12 0 0 0 0 10.8l4-3.1Z" />
                <path fill="#EA4335" d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4A12 12 0 0 0 1.3 6.6l4 3.1A7.2 7.2 0 0 1 12 4.8Z" />
              </svg>
              Continue with Google
            </button>
            <div className="my-5 flex items-center gap-3 text-xs text-da-muted-fg">
              <span className="h-px flex-1 bg-da-border-strong" /> or <span className="h-px flex-1 bg-da-border-strong" />
            </div>
            <form onSubmit={submit} className="grid gap-3">
              <label htmlFor={id} className="text-sm font-semibold">
                Work email
              </label>
              <input
                id={id}
                name="email"
                type="email"
                required
                autoComplete="email"
                placeholder="you@company.com"
                className="da-focus da-stroke h-12 rounded-da-pill bg-da-input px-5 placeholder:text-da-muted-fg"
              />
              <button
                type="submit"
                className="da-focus da-transition group mt-1 inline-flex h-12 items-center justify-center gap-2 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5"
              >
                Continue with email
                <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
              </button>
            </form>
          </>
        )}
        <p className="mt-6 text-center text-sm text-da-muted-fg">
          Already have an account?{" "}
          <a href="#login" className="da-focus rounded-da-sm font-semibold text-da-fg hover:underline">
            Sign in
          </a>
        </p>
      </main>
      <style href="glass-bob" precedence="default">{`
        @keyframes glass-bob { 50% { translate: 0 -12px } }
        .glass-bob { animation: glass-bob 6s ease-in-out infinite }
        @media (prefers-reduced-motion: reduce) { .glass-bob { animation: none } }
      `}</style>
    </div>
  );
}

export default AuthFloating;