1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import { Separator } from "@/components/ui/separator";
14import { Checkbox } from "@/components/ui/checkbox";
15import {
16  Eye,
17  EyeOff,
18  Mail,
19  Lock,
20  User,
21  Phone,
22  ArrowRight,
23  Github,
24  Chrome,
25} from "lucide-react";
26import { useState } from "react";
27
28export function LoginBlock4() {
29  const [showPassword, setShowPassword] = useState(false);
30  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
31  const [acceptTerms, setAcceptTerms] = useState(false);
32
33  return (
34    <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 to-blue-50 dark:from-background dark:to-muted/20 p-4">
35      <Card className="w-full max-w-lg border-2 shadow-2xl">
36        <CardHeader className="space-y-4 text-center">
37          <div className="mx-auto w-16 h-16 bg-gradient-to-br from-green-500 to-blue-500 rounded-full flex items-center justify-center">
38            <User className="h-8 w-8 text-white" />
39          </div>
40          <div className="space-y-2">
41            <CardTitle className="text-2xl font-bold">
42              Create Your Account
43            </CardTitle>
44            <CardDescription className="text-muted-foreground">
45              Join us today and start your journey
46            </CardDescription>
47          </div>
48        </CardHeader>
49
50        <CardContent className="space-y-6">
51          {/* Social Signup */}
52          <div className="space-y-3">
53            <Button variant="outline" className="w-full gap-3 h-11">
54              <Chrome className="h-4 w-4 text-blue-500" />
55              Sign up with Google
56            </Button>
57            <Button variant="outline" className="w-full gap-3 h-11">
58              <Github className="h-4 w-4" />
59              Sign up with GitHub
60            </Button>
61          </div>
62
63          <div className="relative">
64            <div className="absolute inset-0 flex items-center">
65              <Separator className="w-full" />
66            </div>
67            <div className="relative flex justify-center text-xs uppercase">
68              <span className="bg-background px-2 text-muted-foreground">
69                Or sign up with email
70              </span>
71            </div>
72          </div>
73
74          {/* Registration Form */}
75          <form className="space-y-4">
76            <div className="grid grid-cols-2 gap-4">
77              <div className="space-y-2">
78                <Label htmlFor="firstName">First Name</Label>
79                <div className="relative">
80                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
81                  <Input id="firstName" placeholder="John" className="pl-10" />
82                </div>
83              </div>
84              <div className="space-y-2">
85                <Label htmlFor="lastName">Last Name</Label>
86                <div className="relative">
87                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
88                  <Input id="lastName" placeholder="Doe" className="pl-10" />
89                </div>
90              </div>
91            </div>
92
93            <div className="space-y-2">
94              <Label htmlFor="email">Email Address</Label>
95              <div className="relative">
96                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
97                <Input
98                  id="email"
99                  type="email"
100                  placeholder="john@example.com"
101                  className="pl-10"
102                />
103              </div>
104            </div>
105
106            <div className="space-y-2">
107              <Label htmlFor="phone">Phone Number (Optional)</Label>
108              <div className="relative">
109                <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
110                <Input
111                  id="phone"
112                  type="tel"
113                  placeholder="+1 (555) 000-0000"
114                  className="pl-10"
115                />
116              </div>
117            </div>
118
119            <div className="space-y-2">
120              <Label htmlFor="password">Password</Label>
121              <div className="relative">
122                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
123                <Input
124                  id="password"
125                  type={showPassword ? "text" : "password"}
126                  placeholder="Create a strong password"
127                  className="pl-10 pr-10"
128                />
129                <Button
130                  type="button"
131                  variant="ghost"
132                  size="icon"
133                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
134                  onClick={() => setShowPassword(!showPassword)}
135                >
136                  {showPassword ? (
137                    <EyeOff className="h-4 w-4 text-muted-foreground" />
138                  ) : (
139                    <Eye className="h-4 w-4 text-muted-foreground" />
140                  )}
141                </Button>
142              </div>
143            </div>
144
145            <div className="space-y-2">
146              <Label htmlFor="confirmPassword">Confirm Password</Label>
147              <div className="relative">
148                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
149                <Input
150                  id="confirmPassword"
151                  type={showConfirmPassword ? "text" : "password"}
152                  placeholder="Confirm your password"
153                  className="pl-10 pr-10"
154                />
155                <Button
156                  type="button"
157                  variant="ghost"
158                  size="icon"
159                  className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
160                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
161                >
162                  {showConfirmPassword ? (
163                    <EyeOff className="h-4 w-4 text-muted-foreground" />
164                  ) : (
165                    <Eye className="h-4 w-4 text-muted-foreground" />
166                  )}
167                </Button>
168              </div>
169            </div>
170
171            <div className="space-y-4">
172              <div className="flex items-start space-x-2">
173                <Checkbox
174                  id="terms"
175                  checked={acceptTerms}
176                  onCheckedChange={() => {
177                    setAcceptTerms(!acceptTerms);
178                  }}
179                  className="mt-1"
180                />
181                <Label htmlFor="terms" className="text-sm leading-relaxed">
182                  I agree to the{" "}
183                  <Button variant="link" className="px-0 h-auto text-sm">
184                    Terms of Service
185                  </Button>{" "}
186                  and{" "}
187                  <Button variant="link" className="px-0 h-auto text-sm">
188                    Privacy Policy
189                  </Button>
190                </Label>
191              </div>
192
193              <div className="flex items-center space-x-2">
194                <Checkbox id="newsletter" />
195                <Label htmlFor="newsletter" className="text-sm">
196                  Send me product updates and marketing emails
197                </Label>
198              </div>
199            </div>
200
201            <Button
202              type="submit"
203              className="w-full gap-2 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
204              disabled={!acceptTerms}
205            >
206              Create Account
207              <ArrowRight className="h-4 w-4" />
208            </Button>
209          </form>
210
211          <div className="text-center text-sm text-muted-foreground">
212            Already have an account?{" "}
213            <Button variant="link" className="px-0 font-medium">
214              Sign in here
215            </Button>
216          </div>
217        </CardContent>
218      </Card>
219    </section>
220  );
221}