Register 2

"use client";

import { CheckCircle2, Eye, EyeOff, Wifi } from "lucide-react";
import * as React from "react";
import { Badge } from "@/components/ui/badge";
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 { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

// Google Icon
function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={cn("h-5 w-5", className)} viewBox="0 0 24 24">
      <path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
        fill="#4285F4"
      />
      <path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
        fill="#FBBC05"
      />
      <path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </svg>
  );
}

// X (Twitter) Icon
function XIcon({ className }: { className?: string }) {
  return (
    <svg className={cn("h-5 w-5", className)} viewBox="0 0 24 24">
      <path
        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
        fill="currentColor"
      />
    </svg>
  );
}

// Mastercard Icon
function MastercardIcon({ className }: { className?: string }) {
  return (
    <div className={cn("flex", className)}>
      <div className="-mr-2 h-6 w-6 rounded-full bg-red-500" />
      <div className="h-6 w-6 rounded-full bg-orange-400" />
    </div>
  );
}

// Chip Icon
function ChipIcon({ className }: { className?: string }) {
  return (
    <svg className={cn("h-8 w-10", className)} viewBox="0 0 40 32">
      <rect fill="#c9a227" height="32" rx="4" width="40" x="0" y="0" />
      <rect fill="#9a7b1c" height="16" rx="1" width="12" x="4" y="8" />
      <rect fill="#9a7b1c" height="6" rx="1" width="8" x="20" y="8" />
      <rect fill="#9a7b1c" height="6" rx="1" width="8" x="20" y="18" />
      <rect fill="#9a7b1c" height="16" rx="1" width="4" x="32" y="8" />
    </svg>
  );
}

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

  return (
    <section className="flex min-h-screen w-full bg-white dark:bg-background">
      {/* Left - Form */}
      <div className="flex w-full items-center justify-center p-8 lg:w-1/2 lg:p-16">
        <div className="w-full max-w-md">
          {/* Badge */}
          <Badge
            className="mb-6 rounded-full border-gray-200 px-4 py-1.5 text-gray-600 dark:border-neutral-700 dark:text-gray-400"
            variant="outline"
          >
            Login Vario
          </Badge>

          {/* Header */}
          <h1 className="mb-2 font-bold text-3xl text-gray-900 md:text-4xl dark:text-gray-100">
            Welcome to Vario
          </h1>
          <p className="mb-8 text-gray-600 text-sm dark:text-gray-400">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          {/* Social Login */}
          <div className="mb-6 space-y-3">
            <Button
              className="h-12 w-full rounded-full border-gray-200 bg-white hover:bg-neutral-50 dark:border-neutral-700 dark:bg-background"
              variant="outline"
            >
              <GoogleIcon className="mr-3" />
              <span className="text-gray-700 dark:text-gray-300">
                Continue with Google
              </span>
            </Button>
            <Button
              className="h-12 w-full rounded-full border-gray-200 bg-white hover:bg-neutral-50 dark:border-neutral-700 dark:bg-background"
              variant="outline"
            >
              <XIcon className="mr-3" />
              <span className="text-gray-700 dark:text-gray-300">
                Continue with Twitter
              </span>
            </Button>
          </div>

          {/* Divider */}
          <div className="mb-6 flex items-center gap-4">
            <Separator className="flex-1 border-dashed" />
            <span className="text-neutral-400 text-xs">or</span>
            <Separator className="flex-1 border-dashed" />
          </div>

          {/* Form */}
          <form className="space-y-4">
            <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-lg 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-lg 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">
              <Checkbox
                checked={rememberMe}
                id="remember-vario"
                onCheckedChange={(checked) => setRememberMe(checked as boolean)}
              />
              <Label
                className="text-gray-600 text-sm dark:text-gray-400"
                htmlFor="remember-vario"
              >
                Remember me
              </Label>
            </div>

            <Button
              className="h-12 w-full rounded-full bg-violet-600 font-medium text-white hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
              type="submit"
            >
              Login
            </Button>
          </form>

          {/* Footer */}
          <p className="mt-8 text-gray-600 text-sm dark:text-gray-400">
            Already have an account?{" "}
            <a
              className="font-medium text-gray-900 underline dark:text-gray-100"
              href="#"
            >
              Register
            </a>
          </p>
        </div>
      </div>

      {/* Right - Card Preview */}
      <div className="hidden w-1/2 items-center justify-center bg-gray-50 p-8 lg:flex dark:bg-neutral-900">
        <div className="w-full max-w-md">
          {/* Security Header */}
          <div className="mb-8 text-center">
            <h3 className="mb-4 font-semibold text-gray-900 text-lg dark:text-gray-100">
              Vario World Class Security:
            </h3>
            <div className="flex flex-wrap justify-center gap-2">
              <Badge
                className="rounded-full border-gray-200 bg-white px-4 py-2 dark:border-neutral-700 dark:bg-background"
                variant="outline"
              >
                <CheckCircle2 className="mr-2 h-4 w-4 text-orange-500" />
                Free 7-day trial
              </Badge>
              <Badge
                className="rounded-full border-gray-200 bg-white px-4 py-2 dark:border-neutral-700 dark:bg-background"
                variant="outline"
              >
                <CheckCircle2 className="mr-2 h-4 w-4 text-orange-500" />
                No credit card required
              </Badge>
              <Badge
                className="rounded-full border-gray-200 bg-white px-4 py-2 dark:border-neutral-700 dark:bg-background"
                variant="outline"
              >
                <CheckCircle2 className="mr-2 h-4 w-4 text-orange-500" />
                Cancel anytime
              </Badge>
            </div>
          </div>

          {/* Credit Cards Stack */}
          <div className="relative mx-auto h-56 w-80">
            {/* Background card */}
            <div className="absolute top-0 left-1/2 h-8 w-72 -translate-x-1/2 rounded-t-2xl bg-linear-to-r from-orange-400 to-orange-500" />

            {/* Main card */}
            <div className="absolute top-6 left-1/2 w-72 -translate-x-1/2 rounded-2xl bg-neutral-900 p-6 shadow-2xl">
              {/* Card header */}
              <div className="mb-12 flex items-center justify-between">
                <ChipIcon />
                <div className="flex items-center gap-2">
                  <Wifi className="h-5 w-5 text-white/60" />
                </div>
                <MastercardIcon />
              </div>

              {/* Cardholder */}
              <div>
                <p className="mb-1 text-white/60 text-xs">Cardholder Name</p>
                <p className="font-medium text-lg text-white">Arthur Taylor</p>
              </div>

              {/* Mastercard logo small */}
              <div className="absolute right-6 bottom-6">
                <div className="h-8 w-8 rounded-full border-2 border-white/30" />
              </div>
            </div>

            {/* Gray card behind */}
            <div className="absolute top-16 right-4 h-36 w-24 rounded-xl bg-neutral-400" />
          </div>

          {/* Credit Score */}
          <div className="mt-8 text-center">
            <p className="text-gray-700 dark:text-gray-300">
              Your <span className="font-semibold">credit score</span> is{" "}
              <span className="font-bold">710</span>
            </p>
            <p className="text-gray-600 text-sm dark:text-gray-400">
              This score is considered to be Excellent.
            </p>

            {/* Score bar */}
            <div className="mt-4 flex items-center justify-center gap-0.5">
              {Array.from({ length: 30 }).map((_, i) => (
                <div
                  className={cn(
                    "h-6 w-2 rounded-sm",
                    i < 20 ? "bg-orange-500" : "bg-neutral-200",
                  )}
                  // biome-ignore lint/suspicious/noArrayIndexKey:<>
                  key={i}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Register2;