Sign Up

import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Checkbox,
  Input,
  Label,
  Separator,
} from "@cooud-ui/ui";
import { ChartColumnIncreasing, Chrome, Github } from "lucide-react";

export function SignupBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-sm gap-6 shadow-lg">
        <CardHeader className="flex flex-col items-center gap-3 text-center">
          <span className="inline-flex size-11 items-center justify-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
            <ChartColumnIncreasing className="size-5" aria-hidden="true" />
          </span>
          <div className="flex flex-col gap-1">
            <CardTitle className="font-display text-xl">Create your account</CardTitle>
            <p className="text-sm text-fg-secondary">Start building with Cooud in minutes.</p>
          </div>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="signup-name">Full name</Label>
            <Input id="signup-name" placeholder="Mara Castillo" autoComplete="name" />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="signup-email">Email</Label>
            <Input id="signup-email" type="email" placeholder="you@company.com" autoComplete="email" />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="signup-password">Password</Label>
            <Input
              id="signup-password"
              type="password"
              placeholder="••••••••"
              autoComplete="new-password"
            />
            <p className="text-xs text-fg-tertiary">Must be at least 8 characters.</p>
          </div>

          <Label
            htmlFor="signup-terms"
            className="flex items-start gap-2 font-normal text-fg-secondary"
          >
            <Checkbox id="signup-terms" defaultChecked />I agree to the Terms and Privacy Policy.
          </Label>

          <Button variant="gradient" size="lg" className="w-full">
            Create account
          </Button>

          <div className="flex items-center gap-3">
            <Separator className="flex-1" />
            <span className="text-xs text-fg-tertiary">or sign up with</span>
            <Separator className="flex-1" />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Button variant="outline">
              <Github className="size-4" aria-hidden="true" />
              GitHub
            </Button>
            <Button variant="outline">
              <Chrome className="size-4" aria-hidden="true" />
              Google
            </Button>
          </div>
        </CardContent>

        <CardFooter className="justify-center">
          <p className="text-sm text-fg-secondary">
            Already have an account?{" "}
            <a
              href="#signin"
              className="font-medium text-primary underline-offset-4 hover:underline"
            >
              Sign in
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  );
}