"use client";
import { useId, useRef, useState } from "react";
import { COUNTRY_CALLING_CODES, getFirstInvalidField, validateField, validateForm, } from "./Contact02.types";
import "./Contact02.tailwind.css";
const INITIAL_VALUES = {
    firstName: "",
    lastName: "",
    email: "",
    countryIso2: "QA",
    phone: "",
    message: "",
    consent: false,
};
function ErrorText({ id, message }) {
    if (!message)
        return null;
    return (<p id={id} role="alert" className="al-contact02-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>);
}
/**
 * Contact 02 — concise intro copy paired with a bordered "Write us a
 * message" form card. Desktop splits the two side by side; mobile stacks
 * intro above the card.
 */
function Contact02() {
    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, phone: 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`,
        phone: `${baseId}-phone-error`,
        message: `${baseId}-message-error`,
        consent: `${baseId}-consent-error`,
    };
    return (<section className="al-contact02-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:items-start 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. Fill out the form and we&rsquo;ll reply as soon as we can.
          </p>
        </div>

        <div className="al-contact02-card rounded-2xl border border-border bg-white p-6 sm:p-8">
          <h3 className="text-lg font-semibold text-foreground">Write us a message</h3>

          <form noValidate onSubmit={handleSubmit} className="mt-6 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-contact02-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-contact02-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-contact02-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}-phone`} className="text-sm font-medium text-foreground">
                Phone <span className="text-red-500">*</span>
              </label>
              <div className="mt-2 flex gap-2">
                <select aria-label="Country calling code" value={values.countryIso2} onChange={(event) => setValues((prev) => ({ ...prev, countryIso2: event.target.value }))} className="al-contact02-field w-[6.5rem] shrink-0 rounded-lg border border-border bg-white px-2 py-2.5 text-sm text-foreground">
                  {COUNTRY_CALLING_CODES.map((country) => (<option key={country.iso2} value={country.iso2}>
                      {country.dialCode} {country.iso2}
                    </option>))}
                </select>
                <input id={`${baseId}-phone`} name="phone" type="tel" inputMode="tel" autoComplete="tel" ref={(el) => {
            fieldRefs.current.phone = el;
        }} value={values.phone} onChange={(event) => updateValue("phone", event.target.value, "phone")} onBlur={() => handleBlur("phone")} aria-required="true" aria-invalid={Boolean(touched.phone && errors.phone)} aria-describedby={touched.phone && errors.phone ? ids.phone : undefined} placeholder="+1 (222) 333 444" className="al-contact02-field block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground placeholder:text-muted-foreground"/>
              </div>
              <ErrorText id={ids.phone} message={touched.phone ? errors.phone : 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-contact02-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 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-contact02-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 { Contact02 };
Contact 02

Requirements

Dependencies

Usage
