Register 3

"use client";

import { Eye, EyeOff } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

// Decorative blob shape
function BlobDecoration({ className }: { className?: string }) {
  return (
    <svg
      className={cn("pointer-events-none absolute", className)}
      viewBox="0 0 200 200"
    >
      <path
        d="M45,-67.5C57.4,-57.8,65.8,-43.3,71.2,-27.6C76.6,-11.9,79,5,74.8,19.8C70.6,34.6,59.8,47.3,46.5,57.1C33.2,66.9,17.6,73.8,0.5,73.1C-16.6,72.4,-33.2,64.1,-47.8,53.3C-62.4,42.5,-75,29.2,-79.2,13.5C-83.4,-2.2,-79.2,-20.3,-69.8,-34.5C-60.4,-48.7,-45.8,-59,-30.8,-67.3C-15.8,-75.6,-0.4,-81.9,13.3,-78.7C27,-75.5,32.6,-77.2,45,-67.5Z"
        fill="#f0f0f0"
        transform="translate(100 100)"
      />
    </svg>
  );
}

export function Register3() {
  const [showPassword, setShowPassword] = React.useState(false);

  return (
    <section className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-white px-4 py-12 dark:bg-background">
      {/* Decorative blobs */}
      <BlobDecoration className="top-0 right-0 h-80 w-80 translate-x-1/3 -translate-y-1/4" />
      <BlobDecoration className="right-0 bottom-0 h-96 w-96 translate-x-1/4 translate-y-1/4" />
      <BlobDecoration className="bottom-0 left-0 h-64 w-64 -translate-x-1/3 translate-y-1/3 opacity-50" />

      <div className="relative z-10 w-full max-w-2xl">
        {/* Header */}
        <div className="mb-10 text-center">
          <h1 className="mb-3 font-bold text-4xl text-gray-900 md:text-5xl dark:text-gray-100">
            Register
          </h1>
          <p className="text-gray-600 dark:text-gray-400">
            Create new account, lorem ipsum is a placeholder text.
          </p>
        </div>

        {/* Form */}
        <form className="space-y-6">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                FIRST NAME
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 bg-white dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Your first name..."
                type="text"
              />
            </div>
            <div>
              <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                LAST NAME
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 bg-white dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Your last name..."
                type="text"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                EMAIL
              </Label>
              <Input
                className="h-14 rounded-xl border-gray-200 bg-white dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                placeholder="Enter email..."
                type="email"
              />
            </div>
            <div>
              <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                PASSWORD
              </Label>
              <div className="relative">
                <Input
                  className="h-14 rounded-xl border-gray-200 bg-white pr-12 dark:border-neutral-700 dark:bg-black dark:text-white dark:placeholder:text-gray-400"
                  placeholder="Enter password..."
                  type={showPassword ? "text" : "password"}
                />
                <button
                  className="absolute top-1/2 right-4 -translate-y-1/2 text-neutral-400 hover:text-neutral-600"
                  onClick={() => setShowPassword(!showPassword)}
                  type="button"
                >
                  {showPassword ? (
                    <EyeOff className="h-5 w-5" />
                  ) : (
                    <Eye className="h-5 w-5" />
                  )}
                </button>
              </div>
            </div>
          </div>

          <div className="flex justify-center pt-4">
            <Button
              className="h-14 w-full max-w-md rounded-full bg-violet-600 font-medium text-base text-white hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
              type="submit"
            >
              Submit
            </Button>
          </div>
        </form>

        {/* Footer */}
        <p className="mt-8 text-center text-gray-600 text-sm dark:text-gray-400">
          Don't have an account yet?{" "}
          <a
            className="font-medium text-violet-600 hover:underline dark:text-violet-400"
            href="#"
          >
            Sign up now
          </a>
        </p>
      </div>
    </section>
  );
}

export default Register3;