"use client";
import { useId, useRef, useState } from "react";
import { CONTACT_INFO, getFirstInvalidField, validateField, validateForm, } from "./Contact05.types";
import "./Contact05.tailwind.css";
const INITIAL_VALUES = {
    firstName: "",
    lastName: "",
    email: "",
    message: "",
    consent: false,
};
function MailIcon() {
    return (<svg viewBox="0 0 24 24" className="size-5" fill="none" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="m4 7 8 6 8-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
function PhoneIcon() {
    return (<svg viewBox="0 0 24 24" className="size-5" fill="none" aria-hidden="true">
      <path d="M6.5 3h2.7l1.5 4.5-2 1.5a11 11 0 0 0 6.3 6.3l1.5-2 4.5 1.5v2.7c0 1.1-.9 2-2 2C10.6 19.5 4.5 13.4 4.5 5c0-1.1.9-2 2-2Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
function MapPinIcon() {
    return (<svg viewBox="0 0 24 24" className="size-5" fill="none" aria-hidden="true">
      <path d="M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <circle cx="12" cy="9.5" r="2.3" stroke="currentColor" strokeWidth="1.6"/>
    </svg>);
}
const ICONS = {
    Email: <MailIcon />,
    Phone: <PhoneIcon />,
    Office: <MapPinIcon />,
};
function ErrorText({ id, message }) {
    if (!message)
        return null;
    return (<p id={id} role="alert" className="al-contact05-error mt-1.5 text-sm text-red-600">
      {message}
    </p>);
}
function SpinnerIcon() {
    return (<svg viewBox="0 0 24 24" className="size-4 animate-spin" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2.5" opacity="0.25"/>
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
    </svg>);
}
function ContactInfoRow({ item }) {
    return (<li className="al-contact05-item flex items-start gap-4">
      <span className="al-contact05-icon flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-foreground">
        {ICONS[item.label]}
      </span>
      <div>
        <p className="text-sm font-semibold text-foreground">{item.label}</p>
        <p className="mt-0.5 text-sm text-muted-foreground">{item.description}</p>
        <a href={item.href} className="mt-0.5 inline-block text-sm font-medium text-foreground underline underline-offset-2">
          {item.value}
        </a>
      </div>
    </li>);
}
/**
 * Contact 05 — denser, business-oriented split: a compact contact-details
 * list on the left, a focused message form card on the right (no phone
 * field here — Contact 02 already covers that combination).
 */
function Contact05() {
    const baseId = useId();
    const [values, setValues] = useState(INITIAL_VALUES);
    const [touched, setTouched] = useState({});
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState("idle");
    const fieldRefs = useRef({});
    function revalidate(field, next) {
        setErrors((prev) => ({ ...prev, [field]: validateField(field, next) }));
    }
    function handleBlur(field) {
        setTouched((prev) => ({ ...prev, [field]: true }));
        revalidate(field, values);
    }
    function updateValue(key, value, relatedField) {
        setValues((prev) => {
            const next = { ...prev, [key]: value };
            if (touched[relatedField])
                revalidate(relatedField, next);
            return next;
        });
    }
    function handleSubmit(event) {
        event.preventDefault();
        if (status === "submitting")
            return;
        const nextErrors = validateForm(values);
        setErrors(nextErrors);
        setTouched({ firstName: true, lastName: true, email: true, message: true, consent: true });
        const firstInvalid = getFirstInvalidField(nextErrors);
        if (firstInvalid) {
            fieldRefs.current[firstInvalid]?.focus();
            return;
        }
        setStatus("submitting");
        window.setTimeout(() => setStatus("success"), 900);
    }
    const ids = {
        firstName: `${baseId}-first-error`,
        lastName: `${baseId}-last-error`,
        email: `${baseId}-email-error`,
        message: `${baseId}-message-error`,
        consent: `${baseId}-consent-error`,
    };
    return (<section className="al-contact05-section bg-white px-4 py-24 sm:px-6 lg:px-8 lg:py-32">
      <div className="mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-2 lg:gap-16">
        <div>
          <h2 className="text-[clamp(2.25rem,1.8rem+2vw,3.25rem)] leading-[1.05] font-semibold tracking-tight text-foreground">
            Contact us
          </h2>
          <p className="mt-4 max-w-md text-base leading-relaxed text-muted-foreground sm:text-lg">
            We&rsquo;d love to hear from you. Reach out directly, or send a message using the form.
          </p>
          <ul className="mt-10 space-y-7">
            {CONTACT_INFO.map((item) => (<ContactInfoRow key={item.label} item={item}/>))}
          </ul>
        </div>

        <div className="rounded-2xl border border-border bg-white p-6 sm:p-8">
          <form noValidate onSubmit={handleSubmit} className="space-y-5">
            <div className="grid gap-5 sm:grid-cols-2">
              <div>
                <label htmlFor={`${baseId}-first`} className="text-sm font-medium text-foreground">
                  First name <span className="text-red-500">*</span>
                </label>
                <input id={`${baseId}-first`} name="firstName" type="text" autoComplete="given-name" ref={(el) => {
            fieldRefs.current.firstName = el;
        }} value={values.firstName} onChange={(event) => updateValue("firstName", event.target.value, "firstName")} onBlur={() => handleBlur("firstName")} aria-required="true" aria-invalid={Boolean(touched.firstName && errors.firstName)} aria-describedby={touched.firstName && errors.firstName ? ids.firstName : undefined} placeholder="Jane" className="al-contact05-field mt-2 block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground placeholder:text-muted-foreground"/>
                <ErrorText id={ids.firstName} message={touched.firstName ? errors.firstName : undefined}/>
              </div>
              <div>
                <label htmlFor={`${baseId}-last`} className="text-sm font-medium text-foreground">
                  Last name <span className="text-red-500">*</span>
                </label>
                <input id={`${baseId}-last`} name="lastName" type="text" autoComplete="family-name" ref={(el) => {
            fieldRefs.current.lastName = el;
        }} value={values.lastName} onChange={(event) => updateValue("lastName", event.target.value, "lastName")} onBlur={() => handleBlur("lastName")} aria-required="true" aria-invalid={Boolean(touched.lastName && errors.lastName)} aria-describedby={touched.lastName && errors.lastName ? ids.lastName : undefined} placeholder="Smith" className="al-contact05-field mt-2 block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground placeholder:text-muted-foreground"/>
                <ErrorText id={ids.lastName} message={touched.lastName ? errors.lastName : undefined}/>
              </div>
            </div>

            <div>
              <label htmlFor={`${baseId}-email`} className="text-sm font-medium text-foreground">
                Email <span className="text-red-500">*</span>
              </label>
              <input id={`${baseId}-email`} name="email" type="email" autoComplete="email" ref={(el) => {
            fieldRefs.current.email = el;
        }} value={values.email} onChange={(event) => updateValue("email", event.target.value, "email")} onBlur={() => handleBlur("email")} aria-required="true" aria-invalid={Boolean(touched.email && errors.email)} aria-describedby={touched.email && errors.email ? ids.email : undefined} placeholder="jane@email.com" className="al-contact05-field mt-2 block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground placeholder:text-muted-foreground"/>
              <ErrorText id={ids.email} message={touched.email ? errors.email : undefined}/>
            </div>

            <div>
              <label htmlFor={`${baseId}-message`} className="text-sm font-medium text-foreground">
                Message <span className="text-red-500">*</span>
              </label>
              <textarea id={`${baseId}-message`} name="message" rows={4} ref={(el) => {
            fieldRefs.current.message = el;
        }} value={values.message} onChange={(event) => updateValue("message", event.target.value, "message")} onBlur={() => handleBlur("message")} aria-required="true" aria-invalid={Boolean(touched.message && errors.message)} aria-describedby={touched.message && errors.message ? ids.message : undefined} placeholder="Leave us a message…" className="al-contact05-field mt-2 block w-full resize-y rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground placeholder:text-muted-foreground"/>
              <ErrorText id={ids.message} message={touched.message ? errors.message : undefined}/>
            </div>

            <div>
              <label className="flex cursor-pointer items-start gap-2.5 text-sm text-foreground">
                <input type="checkbox" ref={(el) => {
            fieldRefs.current.consent = el;
        }} checked={values.consent} onChange={(event) => updateValue("consent", event.target.checked, "consent")} onBlur={() => handleBlur("consent")} aria-required="true" aria-invalid={Boolean(touched.consent && errors.consent)} aria-describedby={touched.consent && errors.consent ? ids.consent : undefined} className="mt-0.5 size-4 shrink-0 rounded accent-brand"/>
                <span>
                  I agree to the <a href="#privacy-policy" className="font-medium text-foreground underline underline-offset-2">privacy policy</a>.
                </span>
              </label>
              <ErrorText id={ids.consent} message={touched.consent ? errors.consent : undefined}/>
            </div>

            <button type="submit" disabled={status === "submitting"} className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-brand px-6 py-3 text-sm font-semibold text-brand-foreground transition-opacity disabled:opacity-70">
              {status === "submitting" && <SpinnerIcon />}
              {status === "submitting" ? "Sending…" : status === "success" ? "Validated ✓" : "Submit"}
            </button>

            <div role="status" aria-live="polite">
              {status === "success" && (<p className="al-contact05-success rounded-lg border border-border bg-white px-4 py-3 text-sm text-foreground">
                  Thanks — your message has been validated successfully. This is a demo form; no data was sent.
                </p>)}
            </div>
          </form>
        </div>
      </div>
    </section>);
}
export { Contact05 };
Contact 05

Requirements

Dependencies

Usage
