import React from "react";

const Register: React.FC = () => {
  return (
    <div
      className="fixed inset-0 z-[80] grid min-h-dvh place-items-center overflow-y-auto bg-neutral-950/70 p-4 backdrop-blur-sm sm:p-6"
      role="dialog"
      aria-modal="true"
      aria-labelledby="register-title"
    >
      <div className="relative w-full max-w-md overflow-hidden rounded-2xl border border-neutral-800/70 bg-neutral-900/70 p-6 shadow-2xl backdrop-blur supports-[backdrop-filter]:bg-neutral-900/60">
        <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-neutral-700/60" />
        <header className="mb-5 flex flex-col gap-1">
          <h1
            id="register-title"
            className="text-lg font-semibold tracking-tight text-white md:text-xl"
          >
            Register
          </h1>
        </header>
        <form className="space-y-4">
          <div className="space-y-2">
            <label
              htmlFor="email"
              className="block text-xs font-medium uppercase tracking-wider text-neutral-400"
            >
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="you@example.com"
              className="w-full rounded-lg border border-neutral-700/70 bg-neutral-800/60 px-3 py-2 text-sm text-neutral-100 placeholder:text-neutral-500 shadow-inner shadow-black/20 outline-none transition focus:border-neutral-500 focus:bg-neutral-800 focus:ring-2 focus:ring-indigo-500/40"
            />
          </div>
          <button
            type="submit"
            className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-tr from-indigo-600 to-fuchsia-600 px-4 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white/10 transition hover:from-indigo-500 hover:to-fuchsia-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900"
          >
            Register
          </button>
        </form>
        <div className="pointer-events-none absolute -bottom-24 right-0 h-48 w-48 translate-x-12 rounded-full bg-gradient-to-tr from-indigo-600/30 via-violet-600/20 to-fuchsia-600/30 blur-3xl" />
      </div>
    </div>
  );
};

export default Register;