Contact 11 – Centered form with supporting sidebar

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  SectionHeading,
  SectionHeadingBody,
  SectionHeadingTagline,
  SectionHeadingTitle,
} from "@/components/shadcncraft/pro-marketing/section-heading";
import { Textarea } from "@/components/ui/textarea";

export function Contact11() {
  return (
    <section className="py-6 lg:py-20">
      <div className="mx-auto flex max-w-7xl flex-col gap-16 px-5 lg:px-8">
        {/* Section Heading */}
        <div className="mx-auto w-full max-w-md">
          <SectionHeading alignment="center">
            <SectionHeadingTagline>Support</SectionHeadingTagline>
            <SectionHeadingTitle>Need Help? We&apos;re Here to Help</SectionHeadingTitle>
            <SectionHeadingBody>
              Our support team is available to assist you with any questions or issues you
              may have.
            </SectionHeadingBody>
          </SectionHeading>
        </div>

        {/* Contact Form */}
        <div className="mx-auto w-full max-w-md">
          <form className="flex flex-col gap-4" aria-label="Contact form">
            <Field>
              <FieldLabel htmlFor="input-1">Name</FieldLabel>
              <Input id="input-1" placeholder="Joe Smith" />
            </Field>

            <Field>
              <FieldLabel htmlFor="input-2">Email</FieldLabel>
              <Input id="input-2" placeholder="joe@example.com" />
            </Field>

            <Field>
              <FieldLabel htmlFor="input-3">Message</FieldLabel>
              <Textarea
                id="input-3"
                placeholder="Hi, this is my message"
                className="h-16"
              />
            </Field>

            <Field orientation="horizontal">
              <Checkbox id="input-4" />
              <FieldLabel htmlFor="input-4" className="font-normal">
                You agree to our simple{" "}
                <a href="#" className="text-primary underline">
                  Privacy Policy
                </a>
              </FieldLabel>
            </Field>

            <Button type="submit" className="w-full">
              Send message
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}