<script setup lang="ts">
// 커피챗 신청 — 클라이언트 검증 + 완료 화면 (원본 바닐라 JS → Vue 반응형 이식)
import { reactive, ref, nextTick } from 'vue'

useHead({ title: '커피챗 신청 | innertab' })

// 폼 상태
const form = reactive({
  name: '',
  phone: '',
  email: '',
  interest: '',
  when: '',
  current: '',
  message: '',
})
const agreePrivacy = ref(false)
const agreePool = ref(false)

// 검증 에러 상태
const errors = reactive({
  name: false,
  email: false,
  interest: false,
})
const consentInvalid = ref(false)

// 완료 화면 상태
const submitted = ref(false)
const summary = ref<Array<{ k: string; v: string }>>([])
const formCard = ref<HTMLElement | null>(null)

const interestOptions = [
  '브랜드 · 마케팅',
  '콘텐츠 · 디자인',
  '커머스 · 세일즈',
  '글로벌 사업',
  '프로덕트 · 개발',
  'R&D · 상품기획',
  '경영지원 · People',
  '기타',
]
const whenOptions = ['평일 오전', '평일 오후', '평일 저녁', '주말', '조율 가능']

// 입력 시 해당 필드 에러 해제
function clearError(field: keyof typeof errors) {
  errors[field] = false
}
function clearConsent() {
  if (agreePrivacy.value) consentInvalid.value = false
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

async function handleSubmit() {
  errors.name = !form.name.trim()
  errors.email = !EMAIL_RE.test(form.email.trim())
  errors.interest = !form.interest
  consentInvalid.value = !agreePrivacy.value

  const ok = !errors.name && !errors.email && !errors.interest && !consentInvalid.value
  if (!ok) {
    // 첫 번째 오류 위치로 스크롤
    await nextTick()
    const firstErr = formCard.value?.querySelector('.invalid') as HTMLElement | null
    if (firstErr) {
      const y = firstErr.getBoundingClientRect().top + window.scrollY - 120
      window.scrollTo({ top: y, behavior: 'smooth' })
    }
    return
  }

  // 완료 요약 구성
  summary.value = [
    { k: '성명', v: form.name.trim() },
    { k: '이메일', v: form.email.trim() },
    { k: '관심 분야', v: form.interest },
    { k: '희망 시간대', v: form.when || '조율 가능' },
  ]

  // TODO: 백엔드 연동 시 useApi() 기반 composable 로 POST 처리
  submitted.value = true
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<template>
  <div>
    <AppHeader variant="back" />

    <main class="cc">
      <div class="wrap cc-grid">
        <!-- LEFT: 소개 -->
        <section class="intro">
          <p v-reveal class="cc-eyebrow">Coffee Chat</p>
          <h1 v-reveal="{ delay: 80 }">지원 전에,<br >가볍게 먼저 이야기 나눠요.</h1>
          <p v-reveal="{ delay: 160 }" class="lead">
            이너탭이 어떤 곳인지, 어떤 동료들과 일하게 될지 궁금하신가요? 정식 지원이 아니어도
            좋습니다. 편하게 신청해 주시면, 담당자가 일정을 조율해 연락드립니다.
          </p>

          <div class="facts">
            <div v-reveal="{ delay: 60 }" class="fact">
              <span class="ico">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
              </span>
              <div><h3>약 30분 내외</h3><p>부담 없는 짧은 대화로 진행됩니다.</p></div>
            </div>
            <div v-reveal="{ delay: 140 }" class="fact">
              <span class="ico">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18M8 4v16" /></svg>
              </span>
              <div><h3>온라인 · 오프라인</h3><p>편하신 방식으로 진행할 수 있어요.</p></div>
            </div>
            <div v-reveal="{ delay: 220 }" class="fact">
              <span class="ico">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H5.2L4 17.5z" /></svg>
              </span>
              <div><h3>일정 조율 후 안내</h3><p>신청 내용 확인 후 이메일로 연락드립니다.</p></div>
            </div>
          </div>
        </section>

        <!-- RIGHT: 폼 -->
        <section>
          <div ref="formCard" v-reveal="{ delay: 120 }" class="form-card">
            <!-- 입력 폼 -->
            <div v-show="!submitted" class="form-live">
              <h2 class="fc-title">커피챗 신청</h2>
              <p class="fc-sub">아래 정보를 남겨주시면 담당자가 확인 후 연락드립니다.</p>

              <form novalidate @submit.prevent="handleSubmit">
                <div class="two">
                  <div class="field" :class="{ invalid: errors.name }">
                    <label for="name">성명<span class="req">*</span></label>
                    <input
                      id="name"
                      v-model="form.name"
                      class="ctrl"
                      type="text"
                      placeholder="홍길동"
                      autocomplete="name"
                      @input="clearError('name')"
                    >
                    <p class="err-msg">성명을 입력해 주세요.</p>
                  </div>
                  <div class="field">
                    <label for="phone">연락처<span class="opt">선택</span></label>
                    <input
                      id="phone"
                      v-model="form.phone"
                      class="ctrl"
                      type="tel"
                      placeholder="010-0000-0000"
                      autocomplete="tel"
                    >
                  </div>
                </div>

                <div class="field" :class="{ invalid: errors.email }">
                  <label for="email">이메일<span class="req">*</span></label>
                  <input
                    id="email"
                    v-model="form.email"
                    class="ctrl"
                    type="email"
                    placeholder="you@example.com"
                    autocomplete="email"
                    @input="clearError('email')"
                  >
                  <p class="err-msg">올바른 이메일 주소를 입력해 주세요.</p>
                </div>

                <div class="two">
                  <div class="field" :class="{ invalid: errors.interest }">
                    <label for="interest">관심 직무·분야<span class="req">*</span></label>
                    <select id="interest" v-model="form.interest" class="ctrl" @change="clearError('interest')">
                      <option value="" disabled>선택해 주세요</option>
                      <option v-for="opt in interestOptions" :key="opt">{{ opt }}</option>
                    </select>
                    <p class="err-msg">관심 분야를 선택해 주세요.</p>
                  </div>
                  <div class="field">
                    <label for="when">희망 시간대<span class="opt">선택</span></label>
                    <select id="when" v-model="form.when" class="ctrl">
                      <option value="" disabled>선택해 주세요</option>
                      <option v-for="opt in whenOptions" :key="opt">{{ opt }}</option>
                    </select>
                  </div>
                </div>

                <div class="field">
                  <label for="current">현재 소속 · 직무<span class="opt">선택</span></label>
                  <input
                    id="current"
                    v-model="form.current"
                    class="ctrl"
                    type="text"
                    placeholder="예) ○○회사 마케터 / 취업준비생 / 학생"
                  >
                </div>

                <div class="field">
                  <label for="message">사전에 나누고 싶은 이야기<span class="opt">선택</span></label>
                  <textarea
                    id="message"
                    v-model="form.message"
                    class="ctrl"
                    placeholder="궁금한 점이나 듣고 싶은 이야기를 자유롭게 남겨주세요."
                  />
                </div>

                <div class="consent" :class="{ invalid: consentInvalid }">
                  <label class="check">
                    <input v-model="agreePrivacy" type="checkbox" @change="clearConsent" >
                    <span class="box">
                      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7" /></svg>
                    </span>
                    <span class="ctext">
                      <b>(필수)</b> 개인정보 수집·이용에 동의합니다. 성명·이메일 등은 커피챗 진행
                      목적에 한해 이용되며 면담 종료 후 파기됩니다.
                      <NuxtLink to="/privacy" target="_blank">자세히 보기</NuxtLink>
                    </span>
                  </label>
                  <label class="check">
                    <input v-model="agreePool" type="checkbox" >
                    <span class="box">
                      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7" /></svg>
                    </span>
                    <span class="ctext">
                      <b>(선택)</b> 향후 채용 기회 제공을 위한 인재풀 보관에 동의합니다. (동의일로부터
                      1년, 언제든 철회 가능)
                    </span>
                  </label>
                </div>

                <button type="submit" class="submit">커피챗 신청하기</button>
              </form>
            </div>

            <!-- 완료 화면 -->
            <div v-show="submitted" class="success">
              <div class="badge">
                <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6" /></svg>
              </div>
              <h2>신청이 완료되었습니다!</h2>
              <p>
                소중한 신청 감사합니다.<br >담당자가 신청 내용을 확인한 뒤 입력하신 이메일로 일정을
                안내드릴게요.
              </p>
              <div class="summary">
                <div v-for="row in summary" :key="row.k" class="row">
                  <span class="k">{{ row.k }}</span><span class="v">{{ row.v }}</span>
                </div>
              </div>
              <NuxtLink to="/" class="home-link">채용 홈으로 돌아가기 →</NuxtLink>
            </div>
          </div>
        </section>
      </div>
    </main>

    <AppFooter />
  </div>
</template>

<style scoped>
.cc {
  padding: clamp(2.75rem, 6vw, 5.25rem) 0 clamp(4.5rem, 10vw, 7.5rem); /* 44~84px / 72~120px */
}

.cc-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); /* 40~88px */
  align-items: start;
}

/* LEFT 소개 */
.intro {
  position: sticky;
  top: 6.5rem; /* 104px */
}

.cc-eyebrow {
  font-family: var(--font-display);
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.1em;
  color: var(--label);
  font-weight: 700;
}

.intro h1 {
  font-size: clamp(1.875rem, 4vw, 2.875rem); /* 30~46px */
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.22;
  margin-top: 1rem; /* 16px */
}

.intro .lead {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15~17px */
  color: var(--ink-soft);
  line-height: 1.8;
  margin-top: 1.375rem; /* 22px */
}

.facts {
  margin-top: clamp(2rem, 4vw, 3rem); /* 32~48px */
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px */
  border-top: 0.0625rem solid var(--line);
}

.fact {
  display: flex;
  gap: 1.125rem; /* 18px */
  padding: 1.125rem 0; /* 18px */
  border-bottom: 0.0625rem solid var(--line);
}

.fact .ico {
  width: 2.375rem; /* 38px */
  height: 2.375rem;
  border-radius: 0.625rem; /* 10px */
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--brand);
}

.fact .ico svg {
  width: 1.1875rem; /* 19px */
  height: 1.1875rem;
}

.fact h3 {
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
}

.fact p {
  font-size: 0.875rem; /* 14px */
  color: var(--ink-soft);
  margin-top: 0.1875rem; /* 3px */
  line-height: 1.55;
}

/* RIGHT 폼 */
.form-card {
  background: var(--white);
  border: 0.0625rem solid var(--line);
  border-radius: 1.375rem; /* 22px */
  padding: clamp(1.75rem, 3.4vw, 2.875rem); /* 28~46px */
  box-shadow: 0 1.875rem 4.375rem -3.125rem rgba(30, 40, 60, 0.5);
}

.fc-title {
  font-size: clamp(1.25rem, 2vw, 1.5625rem); /* 20~25px */
  font-weight: 800;
  letter-spacing: -0.01em;
}

.fc-sub {
  font-size: 0.875rem; /* 14px */
  color: var(--ink-soft);
  margin-top: 0.5rem; /* 8px */
}

form {
  margin-top: clamp(1.5rem, 3vw, 2.125rem); /* 24~34px */
}

.field {
  margin-bottom: 1.375rem; /* 22px */
}

.field label {
  display: block;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5625rem; /* 9px */
}

.field label .req {
  color: var(--danger);
  margin-left: 0.1875rem; /* 3px */
}

.field label .opt {
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 0.375rem; /* 6px */
  font-size: 0.75rem; /* 12px */
}

.ctrl {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem; /* 15px */
  color: var(--ink);
  background: var(--bg-alt);
  border: 0.09375rem solid transparent; /* 1.5px */
  border-radius: 0.75rem; /* 12px */
  padding: 0.875rem 1rem; /* 14px 16px */
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ctrl::placeholder {
  color: #a2a5ae;
}

.ctrl:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
}

textarea.ctrl {
  resize: vertical;
  min-height: 6.875rem; /* 110px */
  line-height: 1.6;
}

select.ctrl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C6E78' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem; /* 40px */
  cursor: pointer;
}

.field.invalid .ctrl {
  border-color: var(--danger);
  background: #fff;
}

.err-msg {
  display: none;
  font-size: 0.78125rem; /* 12.5px */
  color: var(--danger);
  margin-top: 0.4375rem; /* 7px */
}

.field.invalid .err-msg {
  display: block;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* 16px */
}

/* 동의 */
.consent {
  margin-top: 0.25rem; /* 4px */
  padding-top: 1.375rem; /* 22px */
  border-top: 0.0625rem solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
}

.check {
  display: flex;
  gap: 0.75rem; /* 12px */
  align-items: flex-start;
  cursor: pointer;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check .box {
  flex-shrink: 0;
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  border-radius: 0.375rem; /* 6px */
  border: 0.09375rem solid #c4c7cf; /* 1.5px */
  background: #fff;
  display: grid;
  place-items: center;
  margin-top: 0.0625rem; /* 1px */
  transition: background 0.15s ease, border-color 0.15s ease;
}

.check .box svg {
  width: 0.75rem; /* 12px */
  height: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.check input:checked + .box {
  background: var(--brand);
  border-color: var(--brand);
}

.check input:checked + .box svg {
  opacity: 1;
}

.check input:focus-visible + .box {
  box-shadow: 0 0 0 0.1875rem rgba(32, 42, 68, 0.2); /* 3px */
}

.check .ctext {
  font-size: 0.84375rem; /* 13.5px */
  color: var(--ink-soft);
  line-height: 1.55;
}

.check .ctext b {
  color: var(--ink);
  font-weight: 700;
}

.check .ctext a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.125rem; /* 2px */
}

.consent.invalid .check:first-child .box {
  border-color: var(--danger);
}

.submit {
  width: 100%;
  margin-top: 1.75rem; /* 28px */
  padding: 1.0625rem; /* 17px */
  border: 0;
  border-radius: 6.25rem; /* 100px */
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 1rem; /* 16px */
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.submit:hover {
  background: #161e36;
  transform: translateY(-0.125rem); /* -2px */
}

/* 완료 화면 */
.success {
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0; /* 20~36px */
}

.success .badge {
  width: 4.75rem; /* 76px */
  height: 4.75rem;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); /* 20~28px */
}

.success .badge svg {
  width: 2.125rem; /* 34px */
  height: 2.125rem;
}

.success h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem); /* 22~30px */
  font-weight: 800;
  letter-spacing: -0.02em;
}

.success p {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 0.875rem; /* 14px */
}

.success .summary {
  text-align: left;
  background: var(--bg-alt);
  border-radius: 0.875rem; /* 14px */
  padding: 1.375rem 1.5rem; /* 22px 24px */
  margin-top: 1.75rem; /* 28px */
}

.success .summary .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem; /* 16px */
  padding: 0.5625rem 0; /* 9px */
  font-size: 0.875rem; /* 14px */
}

.success .summary .row .k {
  color: var(--ink-soft);
  flex-shrink: 0;
}

.success .summary .row .v {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.success .home-link {
  display: inline-block;
  margin-top: 1.75rem; /* 28px */
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  color: var(--brand);
}

.success .home-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.1875rem; /* 3px */
}

@media (max-width: 56.25rem) {
  /* 900px */
  .cc-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 6vw, 3.5rem);
  }

  .intro {
    position: static;
  }
}

@media (max-width: 32.5rem) {
  /* 520px */
  .two {
    grid-template-columns: 1fr;
  }
}
</style>
