// =========================================
// 태황 — Contact form + Footer
// =========================================

const { useState: useStateC } = React;

const CATEGORIES = [
  "개발행위 인허가", "산지 · 농지 개발", "행정심판 청구",
  "비영리법인 설립", "건설면허 양도양수", "출입국 관리",
  "토지 지목변경", "점용 인허가", "환경분쟁 조정",
];

function Contact() {
  const [form, setForm] = useStateC({
    name: "", phone: "", email: "",
    category: "개발행위 인허가",
    message: "", consent: false,
  });
  const [errors, setErrors] = useStateC({});
  const [submitted, setSubmitted] = useStateC(false);
  const [sending, setSending] = useStateC(false);
  const [sendError, setSendError] = useStateC("");

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = "성함을 입력해 주세요.";
    if (!form.phone.trim()) er.phone = "연락처를 입력해 주세요.";
    else if (!/^[0-9\-+()\s]{8,}$/.test(form.phone)) er.phone = "연락처 형식을 확인해 주세요.";
    if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
      er.email = "이메일 형식을 확인해 주세요.";
    if (!form.message.trim() || form.message.trim().length < 10)
      er.message = "상담 내용을 10자 이상 입력해 주세요.";
    if (!form.consent) er.consent = "개인정보 수집·이용에 동의해 주세요.";
    return er;
  };

  const submit = async (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length !== 0) return;

    setSendError("");
    setSending(true);
    try {
      const res = await fetch("https://formspree.io/f/mlgvzggw", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: form.name,
          phone: form.phone,
          email: form.email,
          message: form.message,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        let msg = "전송에 실패했습니다. 잠시 후 다시 시도해 주세요.";
        try {
          const data = await res.json();
          if (data && data.errors && data.errors.length) msg = data.errors.map((x) => x.message).join(" ");
        } catch (_) {}
        setSendError(msg);
      }
    } catch (_) {
      setSendError("네트워크 오류로 전송하지 못했습니다. 연결을 확인한 뒤 다시 시도해 주세요.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section contact" id="contact" data-screen-label="06 Contact">
      <div className="container">
        <div className="contact-grid single">
          <div className="form-card">
            {submitted ? (
              <div className="form-success">
                <div className="check">✓</div>
                <h4>상담 신청이 접수되었습니다.</h4>
                <p>영업일 기준 24시간 이내 담당 행정사가 직접 연락드립니다.</p>
                <button
                  className="btn btn-ghost"
                  style={{ marginTop: 28 }}
                  onClick={() => { setSubmitted(false); setForm({ name: "", phone: "", email: "", category: "개발행위 인허가", message: "", consent: false }); }}
                >
                  새 상담 신청하기
                </button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="form-header">
                  <h3>상담 신청서</h3>
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>성함 <span className="req">*</span></label>
                    <input
                      type="text"
                      value={form.name}
                      onChange={set("name")}
                      placeholder="홍길동"
                    />
                    {errors.name && <div className="error">{errors.name}</div>}
                  </div>
                  <div className="field">
                    <label>연락처 <span className="req">*</span></label>
                    <input
                      type="tel"
                      value={form.phone}
                      onChange={set("phone")}
                      placeholder="010-0000-0000"
                    />
                    {errors.phone && <div className="error">{errors.phone}</div>}
                  </div>
                </div>

                <div className="field">
                  <label>이메일</label>
                  <input
                    type="email"
                    value={form.email}
                    onChange={set("email")}
                    placeholder="name@example.com"
                  />
                  {errors.email && <div className="error">{errors.email}</div>}
                </div>

                <div className="field">
                  <label>상담 내용 <span className="req">*</span></label>
                  <textarea
                    value={form.message}
                    onChange={set("message")}
                    placeholder="사안의 개요, 관련 부동산이나 처분 정보, 희망 일정 등을 자유롭게 작성해 주세요."
                  />
                  {errors.message && <div className="error">{errors.message}</div>}
                </div>

                <label className="consent">
                  <input
                    type="checkbox"
                    checked={form.consent}
                    onChange={(e) => setForm({ ...form, consent: e.target.checked })}
                  />
                  <span>
                    상담 처리를 위해 성함, 연락처, 상담 내용을 수집·이용하는 것에 동의합니다.
                    수집된 정보는 상담 완료 후 1년간 보관되며, 그 외 목적으로 이용되지 않습니다.
                  </span>
                </label>
                {errors.consent && <div className="error" style={{ marginTop: -10, marginBottom: 14 }}>{errors.consent}</div>}

                {sendError && (
                  <div className="form-senderror" role="alert">
                    <span className="se-icon">!</span>
                    <span>{sendError}</span>
                  </div>
                )}

                <button type="submit" className="form-submit" disabled={sending}>
                  {sending
                    ? <React.Fragment>전송 중<span className="sending-dots">...</span></React.Fragment>
                    : <React.Fragment>상담 신청 보내기 <span className="mono">→</span></React.Fragment>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ onNav }) {
  const [profileOpen, setProfileOpen] = useStateC(false);

  React.useEffect(() => {
    document.body.style.overflow = profileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [profileOpen]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setProfileOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <footer className="footer" id="partner" data-screen-label="07 Footer">
      <div className="container">
        <div className="footer-partners">
          <div className="partners-label">
            <span className="mono">PARTNERS</span>
            <span>협력사</span>
          </div>
          <div className="partners-list">
            <a className="partner" href="태황건설-지명원.html">
              <span className="partner-name serif">주식회사 태황건설</span>
              <span className="partner-en mono">TAEHWANG CONSTRUCTION</span>
              <span className="partner-cta mono">지명원 보기 →</span>
            </a>
          </div>
        </div>
        <div className="footer-main">
          <div className="footer-brand">
            <div className="brand" style={{ cursor: "default" }}>
              <img className="brand-logo" src="assets/logo.svg" alt="태황행정사법인" />
              <div className="brand-text">
                <div className="ko">태황행정사법인</div>
                <div className="en">TaeHwang Licensed Administrative Agent Corp.</div>
              </div>
            </div>
          </div>
          <div className="footer-info">
            <div className="info-row">
              <span><b>대표</b> 김장환</span>
              <span><b>사업자등록번호</b> 499-87-03509</span>
              <span><b>개인정보 관리책임자</b> 조권제</span>
            </div>
            <div className="info-row">
              <span><b>주소</b> 부산광역시 해운대구 센텀중앙로 90, 620호 (큐비이센텀)</span>
            </div>
            <div className="info-row">
              <span><b>Tel</b> 051.727.9473</span>
              <span><b>Fax</b> 051.727.9474</span>
              <span><b>Email</b> <a href="https://mail.naver.com/" target="_blank" rel="noopener" className="footer-mail">taehwang_@naver.com</a></span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 태황행정사법인 · ALL RIGHTS RESERVED</span>
          <span>TAEHWANG LICENSED ADMINISTRATIVE AGENT CORP.</span>
        </div>
      </div>
    </footer>
  );
}

// ----- 태황건설 지명원 modal -----
function PartnerProfile({ open, onClose }) {
  const p = PARTNER;
  return (
    <div className={"svc-overlay" + (open ? " open" : "")} onClick={onClose} aria-hidden={!open}>
      <div className="svc-modal profile-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="svc-close" onClick={onClose} aria-label="닫기">✕</button>
        <div className="svc-modal-head">
          <div className="svc-head-inner">
            <div className="svc-meta">
              <div className="svc-num mono">PARTNER · 협력사 지명원</div>
              <h3 className="serif">{p.name}</h3>
              <div className="profile-en mono">{p.en}</div>
            </div>
          </div>
        </div>
        <div className="svc-body profile-body">
          <p className="profile-intro">{p.intro}</p>

          <div className="profile-section">
            <h4 className="profile-title"><span className="pt-bar"></span>회사 개요</h4>
            <div className="profile-overview">
              {p.overview.map((row) => (
                <div className="ov-item" key={row.label}>
                  <div className="ov-label">{row.label}</div>
                  <div className="ov-value">{row.value}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="profile-section">
            <h4 className="profile-title"><span className="pt-bar"></span>보유 면허 · 등록</h4>
            <div className="license-chips">
              {p.licenses.map((l, i) => (
                <span className="license-chip" key={i}>
                  <span className="chip-num mono">{String(i + 1).padStart(2, "0")}</span>
                  {l}
                </span>
              ))}
            </div>
          </div>

          {p.capability && (
            <div className="profile-section">
              <h4 className="profile-title"><span className="pt-bar"></span>시공능력 평가</h4>
              <div className="capability-grid">
                {p.capability.rows.map((r, i) => (
                  <div className="cap-row" key={i}>
                    <div className="cap-field">{r.field}</div>
                    <div className="cap-value">{r.value}<span className="cap-unit">평가액</span></div>
                    <div className="cap-rank">전국 <strong>{r.rank}</strong>위<span className="cap-total"> / {r.total}개사</span></div>
                  </div>
                ))}
              </div>
              <div className="cap-note mono">{p.capability.note}</div>
            </div>
          )}

          {p.patents && (
            <div className="profile-section">
              <h4 className="profile-title"><span className="pt-bar"></span>특허 · 기술</h4>
              <div className="license-chips">
                {p.patents.map((l, i) => (
                  <span className="license-chip patent-chip" key={i}>{l}</span>
                ))}
              </div>
            </div>
          )}

          <div className="profile-section">
            <h4 className="profile-title"><span className="pt-bar"></span>주요 시공 실적</h4>
            <ul className="profile-records">
              {p.records.map((r, i) => (
                <li key={i}>
                  <span className="rec-year mono">{r.year}</span>
                  <span className="rec-title">{r.title}</span>
                  {r.scale && <span className="rec-scale">{r.scale}</span>}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Contact, Footer, PartnerProfile });