"use client";
import { useId, useRef, useState } from "react";
import { COUNTRY_CALLING_CODES, getFirstInvalidField, getMinDate, isPhoneRequired, validateField, validateForm, } from "./Contact01.types";
import "./Contact01.tailwind.css";
const INITIAL_VALUES = {
    name: "",
    email: "",
    contactMethod: null,
    countryIso2: "QA",
    phone: "",
    date: "",
    time: "",
    newsletter: false,
};
const CONTACT_METHODS = [
    { value: "email", label: "Email" },
    { value: "phone", label: "Phone" },
    { value: "whatsapp", label: "WhatsApp" },
];
function ErrorText({ id, message }) {
    if (!message)
        return null;
    return (<p id={id} role="alert" className="al-contact01-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 01 — the most complete form in the collection: name, email,
 * preferred contact method (real radio group), phone with a country-code
 * selector, a scheduling date/time pair, and an optional newsletter opt-in.
 * Preferred contact method drives the phone field's required state live
 * (`aria-required` and the visible "*" both track `isPhoneRequired`).
 */
function Contact01() {
    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({});
    const minDate = getMinDate();
    const phoneRequired = isPhoneRequired(values.contactMethod);
    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 handleContactMethodChange(method) {
        setTouched((prev) => ({ ...prev, contactMethod: true }));
        setValues((prev) => {
            const next = { ...prev, contactMethod: method };
            setErrors((prevErrors) => ({
                ...prevErrors,
                contactMethod: undefined,
                phone: touched.phone ? validateField("phone", next) : prevErrors.phone,
            }));
            return next;
        });
    }
    function handleSubmit(event) {
        event.preventDefault();
        if (status === "submitting")
            return;
        const nextErrors = validateForm(values);
        setErrors(nextErrors);
        setTouched({ name: true, email: true, contactMethod: true, phone: true, date: true, time: true });
        const firstInvalid = getFirstInvalidField(nextErrors);
        if (firstInvalid) {
            fieldRefs.current[firstInvalid]?.focus();
            return;
        }
        setStatus("submitting");
        window.setTimeout(() => setStatus("success"), 900);
    }
    const nameErrorId = `${baseId}-name-error`;
    const emailErrorId = `${baseId}-email-error`;
    const methodErrorId = `${baseId}-method-error`;
    const phoneErrorId = `${baseId}-phone-error`;
    const dateErrorId = `${baseId}-date-error`;
    return (<section className="al-contact01-section bg-white px-4 py-24 sm:px-6 lg:px-8 lg:py-32">
      <div className="mx-auto w-full max-w-2xl">
        <div className="flex flex-col items-center text-center">
          <span className="inline-flex items-center rounded-full border border-border bg-white px-3 py-1 text-xs font-medium tracking-wide text-foreground">
            Contact Us
          </span>
          <h2 className="mt-5 text-[clamp(2.25rem,1.7rem+2.4vw,3.5rem)] leading-[1.05] font-semibold tracking-tight text-foreground">
            Get in touch
          </h2>
          <p className="mt-4 max-w-lg text-base leading-relaxed text-muted-foreground sm:text-lg">
            We&rsquo;d love to hear from you. Fill out the form below and our team will reply soon.
          </p>
        </div>

        <form noValidate onSubmit={handleSubmit} className="mx-auto mt-12 max-w-xl space-y-6 text-left sm:mt-16">
          <div>
            <label htmlFor={`${baseId}-name`} className="text-sm font-medium text-foreground">
              Name <span className="text-red-500">*</span>
            </label>
            <input id={`${baseId}-name`} name="name" type="text" autoComplete="name" ref={(el) => {
            fieldRefs.current.name = el;
        }} value={values.name} onChange={(event) => updateValue("name", event.target.value, "name")} onBlur={() => handleBlur("name")} aria-required="true" aria-invalid={Boolean(touched.name && errors.name)} aria-describedby={touched.name && errors.name ? nameErrorId : undefined} placeholder="Jane Smith" className="al-contact01-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={nameErrorId} message={touched.name ? errors.name : undefined}/>
          </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 ? emailErrorId : undefined} placeholder="jane@email.com" className="al-contact01-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={emailErrorId} message={touched.email ? errors.email : undefined}/>
          </div>

          <fieldset>
            <legend className="text-sm font-medium text-foreground">
              Preferred contact method <span className="text-red-500">*</span>
            </legend>
            <div className="mt-3 flex flex-wrap gap-x-6 gap-y-3">
              {CONTACT_METHODS.map((method, index) => (<label key={method.value} className="inline-flex cursor-pointer items-center gap-2 text-sm text-foreground">
                  <input type="radio" name="contactMethod" value={method.value} ref={index === 0
                ? (el) => {
                    fieldRefs.current.contactMethod = el;
                }
                : undefined} checked={values.contactMethod === method.value} onChange={() => handleContactMethodChange(method.value)} aria-describedby={touched.contactMethod && errors.contactMethod ? methodErrorId : undefined} className="al-contact01-field size-4 accent-brand"/>
                  {method.label}
                </label>))}
            </div>
            <ErrorText id={methodErrorId} message={touched.contactMethod ? errors.contactMethod : undefined}/>
          </fieldset>

          <div>
            <label htmlFor={`${baseId}-phone-number`} className="text-sm font-medium text-foreground">
              Phone {phoneRequired && <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) => updateValue("countryIso2", event.target.value, "phone")} className="al-contact01-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-number`} 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={phoneRequired} aria-invalid={Boolean(touched.phone && errors.phone)} aria-describedby={touched.phone && errors.phone ? phoneErrorId : undefined} placeholder="+1 (222) 333 444" className="al-contact01-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={phoneErrorId} message={touched.phone ? errors.phone : undefined}/>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div>
              <label htmlFor={`${baseId}-date`} className="text-sm font-medium text-foreground">
                Date <span className="text-red-500">*</span>
              </label>
              <input id={`${baseId}-date`} name="date" type="date" min={minDate} ref={(el) => {
            fieldRefs.current.date = el;
        }} value={values.date} onChange={(event) => updateValue("date", event.target.value, "date")} onBlur={() => handleBlur("date")} aria-required="true" aria-invalid={Boolean(touched.date && errors.date)} aria-describedby={touched.date && errors.date ? dateErrorId : undefined} className="al-contact01-field mt-2 block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground"/>
              <ErrorText id={dateErrorId} message={touched.date ? errors.date : undefined}/>
            </div>
            <div>
              <label htmlFor={`${baseId}-time`} className="text-sm font-medium text-foreground">
                Time
              </label>
              <input id={`${baseId}-time`} name="time" type="time" ref={(el) => {
            fieldRefs.current.time = el;
        }} value={values.time} onChange={(event) => updateValue("time", event.target.value, "time")} className="al-contact01-field mt-2 block w-full rounded-lg border border-border bg-white px-4 py-2.5 text-base text-foreground"/>
            </div>
          </div>

          <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground">
            <input type="checkbox" checked={values.newsletter} onChange={(event) => setValues((prev) => ({ ...prev, newsletter: event.target.checked }))} className="size-4 rounded accent-brand"/>
            Subscribe to newsletter
          </label>

          <button type="submit" disabled={status === "submitting"} className="al-contact01-submit group 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 />}
            <span>{status === "submitting" ? "Sending…" : status === "success" ? "Validated ✓" : "Submit"}</span>
            {status === "idle" && (<svg viewBox="0 0 16 16" className="al-contact01-submit-arrow size-4" fill="none" aria-hidden="true">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>)}
          </button>

          <div role="status" aria-live="polite">
            {status === "success" && (<p className="al-contact01-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>
    </section>);
}
export { Contact01 };
Contact 01

Requirements

Dependencies

Usage
