1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import { Card, CardContent } from "@/components/ui/card";
7import { Checkbox } from "@/components/ui/checkbox";
8import { Eye, EyeOff, Mail, Lock, ArrowRight, Blocks } from "lucide-react";
9import { useState } from "react";
10
11export function LoginBlock3() {
12  const [showPassword, setShowPassword] = useState(false);
13
14  return (
15    <section className="w-full min-h-screen flex">
16      {/* Left Side - Branding */}
17      <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary via-primary/90 to-primary/80 relative overflow-hidden">
18        <div className="absolute inset-0 bg-black/10"></div>
19        <div className="relative z-10 flex flex-col justify-center items-center text-white p-12">
20          <div className="space-y-8 text-center max-w-md">
21            <div className="flex items-center justify-center gap-3">
22              <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
23                <Blocks className="h-6 w-6" />
24              </div>
25              <span className="text-2xl font-bold">Your Brand</span>
26            </div>
27
28            <div className="space-y-4">
29              <h1 className="text-4xl font-bold leading-tight">
30                Welcome to the future of productivity
31              </h1>
32              <p className="text-lg text-white/90">
33                Join thousands of teams who trust our platform to streamline
34                their workflow and boost collaboration.
35              </p>
36            </div>
37
38            <div className="grid grid-cols-3 gap-4 pt-8">
39              <div className="text-center">
40                <div className="text-2xl font-bold">50K+</div>
41                <div className="text-sm text-white/80">Active Users</div>
42              </div>
43              <div className="text-center">
44                <div className="text-2xl font-bold">99.9%</div>
45                <div className="text-sm text-white/80">Uptime</div>
46              </div>
47              <div className="text-center">
48                <div className="text-2xl font-bold">24/7</div>
49                <div className="text-sm text-white/80">Support</div>
50              </div>
51            </div>
52          </div>
53        </div>
54
55        {/* Decorative Elements */}
56        <div className="absolute top-20 right-20 w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
57        <div className="absolute bottom-20 left-20 w-24 h-24 bg-white/10 rounded-full blur-xl"></div>
58      </div>
59
60      {/* Right Side - Login Form */}
61      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-background">
62        <Card className="w-full max-w-md border-0 shadow-none">
63          <CardContent className="p-8 space-y-8">
64            {/* Mobile Brand Header */}
65            <div className="lg:hidden text-center space-y-4">
66              <div className="flex items-center justify-center gap-2">
67                <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
68                  <Blocks className="h-5 w-5 text-primary" />
69                </div>
70                <span className="text-xl font-bold">Your Brand</span>
71              </div>
72            </div>
73
74            <div className="space-y-2 text-center lg:text-left">
75              <h1 className="text-3xl font-bold">Sign in to your account</h1>
76              <p className="text-muted-foreground">
77                Enter your credentials to access your dashboard
78              </p>
79            </div>
80
81            <form className="space-y-6">
82              <div className="space-y-4">
83                <div className="space-y-2">
84                  <Label htmlFor="email">Email address</Label>
85                  <div className="relative">
86                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
87                    <Input
88                      id="email"
89                      type="email"
90                      placeholder="Enter your email"
91                      className="pl-10 h-12"
92                    />
93                  </div>
94                </div>
95
96                <div className="space-y-2">
97                  <Label htmlFor="password">Password</Label>
98                  <div className="relative">
99                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
100                    <Input
101                      id="password"
102                      type={showPassword ? "text" : "password"}
103                      placeholder="Enter your password"
104                      className="pl-10 pr-10 h-12"
105                    />
106                    <Button
107                      type="button"
108                      variant="ghost"
109                      size="icon"
110                      className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
111                      onClick={() => setShowPassword(!showPassword)}
112                    >
113                      {showPassword ? (
114                        <EyeOff className="h-4 w-4 text-muted-foreground" />
115                      ) : (
116                        <Eye className="h-4 w-4 text-muted-foreground" />
117                      )}
118                    </Button>
119                  </div>
120                </div>
121              </div>
122
123              <div className="flex items-center justify-between">
124                <div className="flex items-center space-x-2">
125                  <Checkbox id="remember" />
126                  <Label htmlFor="remember" className="text-sm">
127                    Remember me for 30 days
128                  </Label>
129                </div>
130                <Button variant="link" className="px-0 text-sm">
131                  Forgot password?
132                </Button>
133              </div>
134
135              <Button type="submit" className="w-full h-12 gap-2">
136                Sign in
137                <ArrowRight className="h-4 w-4" />
138              </Button>
139            </form>
140
141            <div className="text-center text-sm text-muted-foreground">
142              Don't have an account?{" "}
143              <Button variant="link" className="px-0 font-medium">
144                Sign up for free
145              </Button>
146            </div>
147          </CardContent>
148        </Card>
149      </div>
150    </section>
151  );
152}