Contact 4

"use client";

import Link from "next/link";
import * as React from "react";
import { z } from "zod";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const schema = z.object({
  email: z.email("Please enter a valid email."),
  firstName: z.string().min(1, { message: "Please enter your first name." }),
  lastName: z.string().min(1, { message: "Please enter your last name." }),
  message: z.string().min(1, { message: "Please enter your message." }),
  phone: z.string().min(1, { message: "Please enter your phone number." }),
});

type Errors = Record<string, string | string[]>;

export default function Component() {
  const [loading, setLoading] = React.useState(false);
  const [errors, setErrors] = React.useState<Errors>({});

  const onSubmit = async (event: React.SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    setLoading(true);
    const result = schema.safeParse(Object.fromEntries(formData));
    await new Promise((r) => setTimeout(r, 800));
    if (!result.success) {
      setErrors(
        result.error.flatten((issue) => issue.message).fieldErrors as Errors,
      );
    } else {
      setErrors({});
    }
    setLoading(false);
  };

  return (
    <section className="relative min-h-screen w-full overflow-hidden bg-white px-4 py-12 sm:px-6 sm:py-24 dark:bg-background">
      <div>
        <svg
          className="absolute bottom-0 left-0 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="173"
          viewBox="0 0 565 173"
          width="565"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_contact3_bl)">
            <path
              d="M624.397 459.26C639.052 348.921 614.275 239.669 552.008 189.103C479.521 130.236 356.226 150.899 185.185 341.956C258.688 -373.405 -97.0201 381.43 -11.1897 43.599"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_contact3_bl">
              <rect fill="white" height="173" width="565" />
            </clipPath>
          </defs>
        </svg>

        <svg
          className="absolute top-0 right-0 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="173"
          viewBox="0 0 231 173"
          width="231"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_contact3_tr)">
            <path
              d="M54.6842 -3.62396e-05C11.9702 46.7737 7.62612 97.7134 54.6842 127.274C109.466 161.686 233.908 167.125 448.569 103.29C192.422 409.071 731.375 119.177 561.032 257.562"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_contact3_tr">
              <rect fill="white" height="173" width="231" />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 mx-auto w-full max-w-lg">
        <div className="mb-8 flex justify-center">
          <Badge
            className="border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
            variant="secondary"
          >
            <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
            Real Feedback
          </Badge>
        </div>

        <div className="mb-4 text-center">
          <h1 className="font-medium text-4xl text-neutral-900 tracking-tight md:text-5xl dark:text-neutral-100">
            Feel free to send our
            <br />
            friendly team a message
          </h1>
        </div>

        <div className="mb-12 text-center">
          <p className="text-lg text-neutral-600 dark:text-neutral-400">
            Real stories from teams transforming workflows with Cnippet.
          </p>
        </div>

        <Form
          className="flex flex-col gap-6"
          errors={errors}
          onSubmit={onSubmit}
        >
          <div className="grid gap-6 md:grid-cols-2">
            <Field className="gap-3" name="firstName">
              <FieldLabel className="text-neutral-900 dark:text-neutral-100">
                Your Name <span className="text-blue-500">*</span>
              </FieldLabel>
              <Input
                className="border-neutral-200 bg-white py-1 dark:border-neutral-700 dark:bg-background dark:text-neutral-100 dark:placeholder:text-neutral-500"
                disabled={loading}
                name="firstName"
                placeholder="John"
              />
              <FieldError />
            </Field>
            <Field className="gap-3" name="lastName">
              <FieldLabel className="text-neutral-900 dark:text-neutral-100">
                Last Name <span className="text-blue-500">*</span>
              </FieldLabel>
              <Input
                className="border-neutral-200 bg-white py-1 dark:border-neutral-700 dark:bg-background dark:text-neutral-100 dark:placeholder:text-neutral-500"
                disabled={loading}
                name="lastName"
                placeholder="Doe"
              />
              <FieldError />
            </Field>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            <Field className="gap-3" name="email">
              <FieldLabel className="text-neutral-900 dark:text-neutral-100">
                Email <span className="text-blue-500">*</span>
              </FieldLabel>
              <Input
                className="border-neutral-200 bg-white py-1 dark:border-neutral-700 dark:bg-background dark:text-neutral-100 dark:placeholder:text-neutral-500"
                disabled={loading}
                name="email"
                placeholder="cnippet@connect.com"
                type="email"
              />
              <FieldError />
            </Field>
            <Field className="gap-3" name="phone">
              <FieldLabel className="text-neutral-900 dark:text-neutral-100">
                Phone Number <span className="text-blue-500">*</span>
              </FieldLabel>
              <Input
                className="border-neutral-200 bg-white py-1 dark:border-neutral-700 dark:bg-background dark:text-neutral-100 dark:placeholder:text-neutral-500"
                disabled={loading}
                name="phone"
                placeholder="(555) 000-0000"
                type="tel"
              />
              <FieldError />
            </Field>
          </div>

          <Field className="gap-3" name="message">
            <FieldLabel className="text-neutral-900 dark:text-neutral-100">
              How can we help? <span className="text-blue-500">*</span>
            </FieldLabel>
            <Textarea
              className="min-h-32 resize-none border-neutral-200 bg-white py-4 dark:border-neutral-700 dark:bg-background dark:text-neutral-100 dark:placeholder:text-neutral-500"
              disabled={loading}
              name="message"
              placeholder="Write your message here..."
            />
            <FieldError />
          </Field>

          <div className="flex items-center gap-2">
            <Checkbox
              className="border-neutral-300 dark:border-neutral-600"
              id="privacy"
            />
            <Label
              className="cursor-pointer text-neutral-900 text-sm dark:text-neutral-100"
              htmlFor="privacy"
            >
              I Agree to the privacy policy
            </Label>
          </div>

          <div className="flex flex-col gap-4 pt-4 md:flex-row md:items-center md:justify-between">
            <p className="w-full text-neutral-600 text-xs md:w-1/2 dark:text-neutral-400">
              By submitting, I acknowledge that I have read and agree to the{" "}
              <Link
                className="text-neutral-900 underline hover:no-underline dark:text-neutral-100"
                href="#"
              >
                Privacy Policy.
              </Link>
            </p>

            <Button
              className="rounded-lg border-blue-500 bg-blue-600 px-6 py-2 font-medium text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
              disabled={loading}
              type="submit"
            >
              Submit Form
            </Button>
          </div>
        </Form>
      </div>
    </section>
  );
}