Login 2

"use client";

import { Flame, MessageSquare, Search, Star, ThumbsUp } from "lucide-react";
import * as React from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
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";

export function Login2() {
  const [acceptTerms, setAcceptTerms] = React.useState(false);

  return (
    <section className="flex min-h-screen w-full items-center justify-center bg-[#f8f9fa] px-4 py-12">
      <div className="w-full max-w-5xl overflow-hidden rounded-3xl bg-white shadow-xl">
        <div className="grid grid-cols-1 lg:grid-cols-2">
          {/* Left - Form */}
          <div className="p-8 md:p-12">
            <div className="max-w-sm">
              {/* Header */}
              <h1 className="mb-2 font-bold text-3xl text-gray-900 dark:text-gray-100">
                Sign up
              </h1>
              <p className="mb-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="#"
                >
                  Sign in
                </a>
              </p>

              {/* Form */}
              <form className="space-y-5">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                      NAME
                    </Label>
                    <Input
                      className="h-11 rounded-lg border-gray-200 dark:border-neutral-700"
                      placeholder="Enter Your Name"
                      type="text"
                    />
                  </div>
                  <div>
                    <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                      USERNAME
                    </Label>
                    <Input
                      className="h-11 rounded-lg border-gray-200 dark:border-neutral-700"
                      placeholder="@username"
                      type="text"
                    />
                  </div>
                </div>

                <div>
                  <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                    EMAIL
                  </Label>
                  <Input
                    className="h-11 rounded-lg border-gray-200 dark:border-neutral-700"
                    placeholder="Enter your email"
                    type="email"
                  />
                </div>

                <div>
                  <Label className="mb-2 block font-semibold text-gray-600 text-xs uppercase tracking-wide dark:text-gray-400">
                    PASSWORD
                  </Label>
                  <Input
                    className="h-11 rounded-lg border-gray-200 dark:border-neutral-700"
                    placeholder="Password"
                    type="password"
                  />
                </div>

                <div className="flex items-center gap-2 pt-4">
                  <Checkbox
                    checked={acceptTerms}
                    id="terms"
                    onCheckedChange={(checked) =>
                      setAcceptTerms(checked as boolean)
                    }
                  />
                  <Label
                    className="text-gray-600 text-sm dark:text-gray-400"
                    htmlFor="terms"
                  >
                    I accept the{" "}
                    <a className="underline" href="#">
                      term and conditions
                    </a>
                  </Label>
                </div>

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

          {/* Right - App Preview */}
          <div className="relative hidden overflow-hidden bg-[#f1f5f0] p-8 lg:block">
            {/* Orange decorative shape */}
            <div className="absolute -top-10 -right-10 h-32 w-48 rotate-[-20deg] transform rounded-full bg-[#ff6b35]" />

            {/* Browser mockup */}
            <div className="relative mx-4 mt-8 overflow-hidden rounded-2xl bg-white shadow-lg">
              {/* Browser header */}
              <div className="flex items-center justify-between border-neutral-100 border-b px-4 py-3">
                <div className="flex gap-1.5">
                  <div className="h-3 w-3 rounded-full bg-neutral-300" />
                  <div className="h-3 w-3 rounded-full bg-neutral-300" />
                  <div className="h-3 w-3 rounded-full bg-neutral-300" />
                </div>
                <div className="mx-4 flex-1">
                  <div className="rounded-full bg-neutral-100 px-4 py-1.5 text-center text-neutral-400 text-xs">
                    jambo.com
                  </div>
                </div>
              </div>

              {/* App content */}
              <div className="p-6">
                <h2 className="mb-6 font-bold text-2xl text-gray-900 dark:text-gray-100">
                  Jambo
                </h2>

                {/* Feedback card */}
                <div className="mb-4 rounded-xl bg-neutral-50 p-4">
                  <h3 className="mb-1 flex items-center gap-2 font-semibold text-gray-900 dark:text-gray-100">
                    Send us feedback <span>💐</span>
                  </h3>
                  <p className="text-gray-600 text-sm dark:text-gray-400">
                    Lorem ipsum aliquam erat volutpat – cras dapibus orci eu
                    eros tempus efficitur.
                  </p>
                </div>

                {/* Tabs */}
                <div className="mb-4 flex items-center gap-2">
                  <Badge className="gap-1.5 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-gray-700 dark:border-neutral-700 dark:text-gray-300">
                    <span className="h-2 w-2 rounded-full bg-green-500" />
                    New
                  </Badge>
                  <Badge
                    className="gap-1.5 rounded-full px-3 py-1.5 text-gray-600 dark:text-gray-400"
                    variant="outline"
                  >
                    <Star className="h-3 w-3" />
                    Featured
                  </Badge>
                  <Badge
                    className="gap-1.5 rounded-full px-3 py-1.5 text-gray-600 dark:text-gray-400"
                    variant="outline"
                  >
                    <Flame className="h-3 w-3" />
                    Trending
                  </Badge>
                  <div className="ml-auto flex items-center gap-1 text-neutral-400 text-sm">
                    <Search className="h-4 w-4" />
                    Search...
                  </div>
                </div>

                {/* List items */}
                <div className="space-y-4">
                  {/* Item 1 */}
                  <div className="border-neutral-100 border-t pt-4">
                    <Badge className="mb-2 bg-green-100 text-green-700 text-xs">
                      <span className="mr-1 h-1.5 w-1.5 rounded-full bg-green-500" />
                      Priority
                    </Badge>
                    <h4 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">
                      New Component And Variants
                    </h4>
                    <p className="mb-3 line-clamp-2 text-gray-600 text-sm dark:text-gray-400">
                      Lorem ipsum aliquam vel justo fringillas enigma
                      pellentesquel Nunc non semper tellus vitae mi eros
                      velimperdiet mi. Aliqua...
                    </p>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Avatar className="h-6 w-6">
                          <AvatarFallback className="bg-amber-100 text-xs">
                            AS
                          </AvatarFallback>
                        </Avatar>
                        <span className="font-medium text-sm">Ahmet S.</span>
                        <span className="text-neutral-400 text-xs">
                          2 days ago
                        </span>
                      </div>
                      <div className="flex items-center gap-3 text-neutral-400 text-xs">
                        <span className="flex items-center gap-1">
                          <MessageSquare className="h-3.5 w-3.5" /> 64
                        </span>
                        <span className="flex items-center gap-1">
                          <ThumbsUp className="h-3.5 w-3.5" /> Q1
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Item 2 */}
                  <div className="border-neutral-100 border-t pt-4">
                    <Badge className="mb-2 bg-green-100 text-green-700 text-xs">
                      <span className="mr-1 h-1.5 w-1.5 rounded-full bg-green-500" />
                      Next
                    </Badge>
                    <h4 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">
                      New Component And Variants
                    </h4>
                    <p className="line-clamp-2 text-gray-600 text-sm dark:text-gray-400">
                      Lorem ipsum aliquam vel justo fringillas enigma
                      pellentesquel Nunc non semper tellus vitae mi eros
                      velimperdiet mi. Aliqua...
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Login2;