문의하기: 상담 신청 폼 + 네이비 연락처 패널

import { useState, type FormEvent } from "react";

const FONT = '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';
const CHAT = "https://example.com/chat";

const FIELD = "w-full rounded-[10px] border-[1.5px] border-transparent bg-white px-4 py-3.5 text-base text-[#172031] outline-none transition-colors focus:border-[#1B263B]";
const LABEL = "mb-2 block font-bold text-[#172031]";

function Req() {
  return <em className="ml-1 not-italic text-[#c2410c]">*</em>;
}

export default function ContactSection() {
  const [message, setMessage] = useState("");

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const invalid = form.querySelector<HTMLInputElement | HTMLTextAreaElement>(":invalid");
    if (invalid) {
      const label = form.querySelector(`label[for="${invalid.id}"]`)?.firstChild?.textContent ?? "";
      setMessage(`필수 항목을 입력해 주세요: ${label}`);
      invalid.focus();
      return;
    }
    setMessage("입력 내용을 확인했습니다. 전송은 사이트의 문의 접수 기능과 연결한 뒤 동작합니다.");
  };

  return (
    <section className="w-full bg-white" style={{ fontFamily: FONT }}>
      <div className="mx-auto grid w-full max-w-[1200px] grid-cols-1 items-start gap-8 px-4 py-12 sm:px-6 lg:grid-cols-[1fr_360px] lg:gap-14 lg:py-16">
        <form onSubmit={onSubmit} noValidate className="rounded-2xl bg-[#f4f6f9] px-5 py-6 sm:p-10">
          <div className="grid grid-cols-1 gap-[22px] sm:grid-cols-2 sm:gap-4">
            <div>
              <label htmlFor="cf-name" className={LABEL}>
                이름<Req />
              </label>
              <input id="cf-name" name="name" type="text" required autoComplete="name" className={FIELD} />
            </div>
            <div>
              <label htmlFor="cf-phone" className={LABEL}>
                연락처<Req />
              </label>
              <input id="cf-phone" name="phone" type="tel" required autoComplete="tel" placeholder="010-0000-0000" className={FIELD} />
            </div>
          </div>
          <div className="mt-[22px]">
            <label htmlFor="cf-email" className={LABEL}>
              이메일<Req />
            </label>
            <input id="cf-email" name="email" type="email" required autoComplete="email" className={FIELD} />
          </div>
          <div className="mt-[22px]">
            <label htmlFor="cf-article" className={LABEL}>
              문의 내용<Req />
            </label>
            <textarea id="cf-article" name="article" required placeholder="관심 있는 클래스나 궁금한 점을 적어 주세요." className={`${FIELD} min-h-[200px] resize-y`} />
          </div>
          <div className="mt-[22px]">
            <label htmlFor="cf-captcha" className={LABEL}>
              보안문자<Req />
            </label>
            <input id="cf-captcha" name="captcha" type="text" required autoComplete="off" className={FIELD} />
            <p className="mt-4 text-sm text-[#8a93a3]">이 위치에 보안문자 이미지가 표시됩니다.</p>
          </div>
          <div className="mt-8 flex gap-2">
            <button type="submit" className="inline-flex h-[52px] items-center rounded-full bg-[#1B263B] px-[26px] font-bold text-white transition hover:-translate-y-0.5 hover:bg-[#3D64B1]">
              문의하기
            </button>
          </div>
          {message && (
            <p role="status" className="mt-4 rounded-[10px] bg-[#fff7dc] px-4 py-3.5 text-[15px] text-[#172031]">
              {message}
            </p>
          )}
        </form>

        <dl className="rounded-2xl bg-[#1B263B] px-[22px] py-2 sm:px-8 sm:py-3">
          <div className="py-[22px]">
            <dt className="text-sm text-white/55">전화 상담</dt>
            <dd className="mt-1 text-2xl font-bold leading-[1.4] tabular-nums text-[#F5C842]">
              02-1234-5678
              <br />
              02-1234-5679
            </dd>
          </div>
          <div className="border-t border-white/[0.12] py-[22px]">
            <dt className="text-sm text-white/55">채팅</dt>
            <dd className="mt-1 text-xl font-bold text-white">
              <a href={CHAT} target="_blank" rel="noopener noreferrer" title="새 창으로 열림" className="hover:text-[#F5C842]">
                채팅 상담 바로가기
                <svg viewBox="0 0 24 24" className="ml-1 inline-block h-3 w-3 opacity-60" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M7 7h10v10" />
                  <path d="M7 17 17 7" />
                </svg>
                <span className="sr-only">(새 창)</span>
              </a>
            </dd>
          </div>
          <div className="border-t border-white/[0.12] py-[22px]">
            <dt className="text-sm text-white/55">이메일</dt>
            <dd className="mt-1 break-all text-xl font-bold text-white">hello@example.com</dd>
          </div>
          <div className="border-t border-white/[0.12] py-[22px]">
            <dt className="text-sm text-white/55">방문 상담</dt>
            <dd className="mt-1 text-base font-semibold text-white">서울특별시 예시구 빛담로 120, 3층</dd>
          </div>
        </dl>
      </div>
    </section>
  );
}