Login 1

"use client";

import { Apple } 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 { 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>
  );
}

// Lotus/Flower Logo
function SanaLogo({ className }: { className?: string }) {
  return (
    <div className={cn("flex flex-col items-center", className)}>
      <svg className="mb-1 h-10 w-12" viewBox="0 0 60 50">
        <g fill="#2d2d2d">
          {/* Center petals */}
          <ellipse cx="30" cy="25" rx="4" ry="12" />
          <ellipse
            cx="30"
            cy="25"
            rx="4"
            ry="12"
            transform="rotate(30 30 25)"
          />
          <ellipse
            cx="30"
            cy="25"
            rx="4"
            ry="12"
            transform="rotate(60 30 25)"
          />
          <ellipse
            cx="30"
            cy="25"
            rx="4"
            ry="12"
            transform="rotate(90 30 25)"
          />
          <ellipse
            cx="30"
            cy="25"
            rx="4"
            ry="12"
            transform="rotate(120 30 25)"
          />
          <ellipse
            cx="30"
            cy="25"
            rx="4"
            ry="12"
            transform="rotate(150 30 25)"
          />
        </g>
      </svg>
      <span className="font-medium text-neutral-700 text-xs tracking-[0.3em]">
        SANA
      </span>
    </div>
  );
}

// Decorative leaf
function LeafDecoration({ className }: { className?: string }) {
  return (
    <svg
      className={cn("h-28 w-20", className)}
      fill="none"
      viewBox="0 0 80 120"
    >
      <path
        d="M40 10 Q60 40 50 80 Q45 100 40 110 Q35 100 30 80 Q20 40 40 10"
        fill="#c5d4b8"
        opacity="0.6"
      />
      <path
        d="M40 15 Q40 60 40 105"
        fill="none"
        stroke="#9ab089"
        strokeWidth="1.5"
      />
    </svg>
  );
}

// Decorative arc
function ArcDecoration({ className }: { className?: string }) {
  return (
    <svg
      className={cn("h-48 w-48", className)}
      fill="none"
      viewBox="0 0 200 200"
    >
      <circle
        cx="100"
        cy="100"
        fill="none"
        opacity="0.6"
        r="90"
        stroke="#e8e4db"
        strokeWidth="1.5"
      />
    </svg>
  );
}

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

  return (
    <section className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#f4f3ed] px-4 py-12">
      {/* Decorative elements */}
      <LeafDecoration className="absolute top-20 left-8 -rotate-12 opacity-70" />
      <LeafDecoration className="absolute bottom-20 left-16 rotate-12 opacity-50" />
      <LeafDecoration className="absolute top-32 right-12 rotate-[25deg] opacity-60" />
      <LeafDecoration className="absolute right-8 bottom-16 -rotate-[20deg] opacity-70" />
      <ArcDecoration className="absolute top-10 right-20 opacity-40" />
      <ArcDecoration className="absolute bottom-0 left-1/4 opacity-30" />

      {/* Logo */}
      <SanaLogo className="mb-8" />

      {/* Login Card */}
      <div className="relative w-full max-w-md">
        {/* Dashed border */}
        <div className="absolute inset-0 rounded-3xl border-2 border-[#c9b99a] border-dashed" />

        {/* Card content */}
        <div className="relative m-2 rounded-3xl bg-[#faf9f6]/80 p-8 backdrop-blur-sm">
          {/* Header */}
          <div className="mb-8 text-center">
            <h1 className="mb-2 font-serif text-3xl text-neutral-800">
              Sign In
            </h1>
            <p className="text-neutral-500 text-sm">
              Don't have an account yet?{" "}
              <a
                className="font-medium text-[#2a7d5f] hover:underline"
                href="#"
              >
                Register here
              </a>
            </p>
          </div>

          {/* Social Login Buttons */}
          <div className="mb-6 flex gap-3">
            <Button
              className="h-12 flex-1 rounded-full border-neutral-200 bg-white hover:bg-neutral-50"
              variant="outline"
            >
              <span className="mr-2 text-neutral-600 text-sm">Login with</span>
              <Apple className="h-5 w-5" />
            </Button>
            <Button
              className="h-12 flex-1 rounded-full border-neutral-200 bg-white hover:bg-neutral-50"
              variant="outline"
            >
              <span className="mr-2 text-neutral-600 text-sm">Login with</span>
              <GoogleIcon />
            </Button>
          </div>

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

          {/* Form */}
          <form className="space-y-5">
            <div>
              <Label className="mb-2 block text-[#9b7e5e] text-sm">
                Email address<span className="text-[#2a7d5f]">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl border-neutral-200 bg-[#faf9f6]"
                placeholder="Enter Your Email"
                type="email"
              />
            </div>

            <div>
              <Label className="mb-2 block text-[#9b7e5e] text-sm">
                Password<span className="text-[#2a7d5f]">*</span>
              </Label>
              <Input
                className="h-12 rounded-xl border-neutral-200 bg-[#faf9f6]"
                placeholder="Enter Your Password"
                type="password"
              />
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                checked={rememberMe}
                id="remember"
                onCheckedChange={(checked) => setRememberMe(checked as boolean)}
              />
              <Label className="text-neutral-600 text-sm" htmlFor="remember">
                Remember me
              </Label>
            </div>

            <Button
              className="h-12 w-full rounded-xl bg-[#3d5a45] font-medium text-white hover:bg-[#2d4535]"
              type="submit"
            >
              Join Sana
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}

export default Login1;