Login 3

"use client";

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

// Vario Logo
function VarioLogo({ className }: { className?: string }) {
  return (
    <div className={cn("flex items-center gap-1", className)}>
      <svg className="h-8 w-8" viewBox="0 0 32 32">
        <circle cx="10" cy="16" fill="#ff6b35" r="4" />
        <circle cx="22" cy="10" fill="#ff6b35" r="3" />
        <circle cx="22" cy="22" fill="#ff6b35" r="3" />
      </svg>
      <span className="font-bold text-2xl text-gray-900 dark:text-gray-100">
        Vario<sup className="font-normal text-neutral-400 text-xs">UI</sup>
      </span>
    </div>
  );
}

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

  return (
    <section className="flex min-h-screen w-full flex-col items-center justify-center bg-[#f0f0f0] px-4 py-12">
      {/* Background pattern */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }}
      />

      {/* Logo */}
      <VarioLogo className="relative z-10 mb-12" />

      {/* Login Card */}
      <div className="relative w-full max-w-lg rounded-3xl border border-gray-200 bg-white p-8 shadow-sm md:p-10 dark:border-neutral-700">
        {/* Header */}
        <div className="mb-8">
          <h1 className="mb-2 font-bold text-2xl text-gray-900 dark:text-gray-100">
            Login to Vario
          </h1>
          <p className="text-gray-600 text-sm dark:text-gray-400">
            Lorem ipsum dolor sit amet consectetur.
          </p>
        </div>

        {/* Form */}
        <form className="space-y-5">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                First Name <span className="text-red-500">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl border-gray-200 dark:border-neutral-700"
                placeholder="John"
                type="text"
              />
            </div>
            <div>
              <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
                Last Name <span className="text-red-500">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl border-gray-200 dark:border-neutral-700"
                placeholder="Smith"
                type="text"
              />
            </div>
          </div>

          <div>
            <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
              Email Address <span className="text-red-500">*</span>
            </Label>
            <Input
              className="h-12 rounded-xl border-gray-200 dark:border-neutral-700"
              placeholder="john@example.com"
              type="email"
            />
          </div>

          <div>
            <Label className="mb-2 block font-medium text-gray-700 text-sm dark:text-gray-300">
              Password <span className="text-red-500">*</span>
            </Label>
            <div className="relative">
              <Input
                className="h-12 rounded-xl border-gray-200 pr-12 dark:border-neutral-700"
                placeholder="••••••••"
                type={showPassword ? "text" : "password"}
              />
              <button
                className="absolute top-1/2 right-4 -translate-y-1/2 text-neutral-400 hover:text-gray-600 dark:text-gray-400"
                onClick={() => setShowPassword(!showPassword)}
                type="button"
              >
                {showPassword ? (
                  <EyeOff className="h-5 w-5" />
                ) : (
                  <Eye className="h-5 w-5" />
                )}
              </button>
            </div>
          </div>

          <div className="flex items-center gap-2 pt-2">
            <Checkbox
              checked={agreeTerms}
              id="terms-vario"
              onCheckedChange={(checked) => setAgreeTerms(checked as boolean)}
            />
            <Label
              className="text-gray-600 text-sm dark:text-gray-400"
              htmlFor="terms-vario"
            >
              I agree to the{" "}
              <a
                className="font-medium text-gray-900 hover:underline dark:text-gray-100"
                href="#"
              >
                Terms
              </a>{" "}
              and{" "}
              <a
                className="font-medium text-gray-900 hover:underline dark:text-gray-100"
                href="#"
              >
                Privacy Policy
              </a>
            </Label>
          </div>

          <Button
            className="mt-4 h-12 w-full rounded-xl bg-neutral-900 font-medium text-white hover:bg-neutral-800"
            type="submit"
          >
            Register
          </Button>
        </form>
      </div>
    </section>
  );
}

export default Login3;