"use client";

import * as React from "react";
import Link from "next/link";
import { Send } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export const meta = {
  name: "Centered contact form",
  description: "Centered card with name, email, company and message fields and a toast on submit.",
  interactive: true,
};

export default function Contact01() {
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    toast.success("Message sent", { description: "Thanks for reaching out. We'll reply within one business day." });
    event.currentTarget.reset();
  }

  return (
    <section className="relative isolate overflow-hidden">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-72 max-w-2xl rounded-full bg-primary/15 blur-3xl"
      />
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
        <div className="mx-auto max-w-xl text-center">
          <p className="text-sm font-medium text-primary">Contact us</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Let&apos;s talk about your data</h2>
          <p className="mt-4 text-muted-foreground">
            Questions about pricing, onboarding or a custom plan? Send us a note and a real human will get back to you.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="mx-auto mt-10 grid max-w-xl gap-5 rounded-2xl border bg-card p-6 shadow-sm sm:p-8">
          <div className="grid gap-5 sm:grid-cols-2">
            <div className="grid gap-2">
              <Label htmlFor="contact-01-first">First name</Label>
              <Input id="contact-01-first" name="firstName" autoComplete="given-name" required />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="contact-01-last">Last name</Label>
              <Input id="contact-01-last" name="lastName" autoComplete="family-name" required />
            </div>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="contact-01-email">Work email</Label>
            <Input id="contact-01-email" name="email" type="email" autoComplete="email" placeholder="you@company.com" required />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="contact-01-company">
              Company <span className="font-normal text-muted-foreground">(optional)</span>
            </Label>
            <Input id="contact-01-company" name="company" autoComplete="organization" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="contact-01-message">How can we help?</Label>
            <Textarea
              id="contact-01-message"
              name="message"
              rows={5}
              placeholder="Tell us a bit about your team and what you'd like to learn from your customers."
              required
            />
          </div>
          <Button type="submit" size="lg" className="w-full">
            Send message <Send />
          </Button>
          <p className="text-center text-xs text-muted-foreground">
            By submitting, you agree to our{" "}
            <Link href="#" className="underline underline-offset-4 hover:text-foreground">
              privacy policy
            </Link>
            .
          </p>
        </form>
      </div>
    </section>
  );
}
Centered contact formInteractive

Split contact details and formInteractive

Contact options with quick formInteractive
