o2o-negosium-original/landing/app/components/sections/contact.tsx

import { useState } from "react"
import { AnimatePresence, motion } from "motion/react"
import { Check, Loader2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input, Textarea } from "@/components/ui/input"
import { Section } from "@/components/ui/section"
import { SectionHeading } from "@/components/ui/section-heading"
import { Typography } from "@/components/ui/typography"
import { EASE_OUT_EXPO } from "@/lib/motion"
import { submitLead } from "@/lib/lead"

const EMPTY_FORM = {
  companyName: '',
  contactName: '',
  email: '',
  phone: '',
  message: '',
}

/*
 * 상담 신청 폼 — 고관여 경로. 저관여 리드 캡처는 데모 요청 모달이 맡는다.
 *
 * 예전에는 백엔드가 없어서 1.2초 뒤 성공 화면만 띄웠다. 화면은 "접수되었습니다"인데
 * 영업이 받을 리드는 존재하지 않았고, 아무도 그 사실을 몰랐다. 지금은 데모 요청과
 * 같은 서버리스 함수(api/lead.ts)로 보내고, 서버가 리드를 확보했을 때만 성공을 띄운다.
 */
export function Contact() {
  const [formData, setFormData] = useState(EMPTY_FORM)
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.companyName || !formData.contactName || !formData.email || !formData.phone) {
      return
    }

    setStatus('submitting')
    const result = await submitLead({
      source: 'contact',
      name: formData.contactName,
      email: formData.email,
      company: formData.companyName,
      phone: formData.phone,
      message: formData.message,
    })
    setStatus(result.ok ? 'success' : 'error')
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

  const submitting = status === 'submitting'

  return (
    <Section id="contact-section" bordered>
      <SectionHeading
        align="center"
        eyebrow="Get in Touch"
        title="도입 문의"
        description="품목과 협력사 규모를 알려주시면, 예상 절감 구간과 도입 절차를 정리해 드립니다."
        descriptionClassName="max-w-xl"
      />

      <div className="max-w-2xl mx-auto">
        <AnimatePresence mode="wait">
          {status !== 'success' ? (
            <motion.form
              key="contact-form"
              onSubmit={handleSubmit}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5, ease: EASE_OUT_EXPO }}
              className="space-y-9"
            >
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-9">
                <FormField label="회사명" required>
                  <Input
                    type="text"
                    name="companyName"
                    required
                    placeholder="예: (주)한빛유통"
                    value={formData.companyName}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>

                <FormField label="담당자 성함 / 직책" required>
                  <Input
                    type="text"
                    name="contactName"
                    required
                    placeholder="예: 홍길동 팀장"
                    value={formData.contactName}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-9">
                <FormField label="이메일 주소" required>
                  <Input
                    type="email"
                    name="email"
                    required
                    placeholder="example@company.com"
                    value={formData.email}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>

                <FormField label="연락처" required>
                  <Input
                    type="tel"
                    name="phone"
                    required
                    placeholder="010-0000-0000"
                    value={formData.phone}
                    onChange={handleChange}
                    disabled={submitting}
                  />
                </FormField>
              </div>

              <FormField label="상세 문의 및 요구사항">
                <Textarea
                  name="message"
                  rows={4}
                  placeholder="협상 자동화를 검토 중인 품목이나 현재 겪는 어려움을 적어주세요."
                  value={formData.message}
                  onChange={handleChange}
                  disabled={submitting}
                />
              </FormField>

              {/* 대체 연락처(이메일 등)를 넣으려면 실제 영업 주소를 받아서 채워야 한다.
                  임의의 주소를 공개 랜딩에 박아둘 수는 없다. */}
              {status === 'error' && (
                <p role="alert" className="text-[13px] text-ink-soft leading-[1.6] break-keep">
                  지금은 접수가 어렵습니다. 잠시 후 다시 시도해 주세요.
                </p>
              )}

              <Typography variant="caption" className="font-medium">
                입력하신 정보는 문의 응답과 도입 검토 목적으로만 사용됩니다.
              </Typography>

              <div className="pt-2">
                <Button type="submit" disabled={submitting} size="lg" className="w-full">
                  {submitting ? (
                    <>
                      <Loader2 className="w-5 h-5 animate-spin" />
                      <span>신청서 전송 중...</span>
                    </>
                  ) : (
                    <span>상담 신청</span>
                  )}
                </Button>
              </div>
            </motion.form>
          ) : (
            <motion.div
              key="success-message"
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.6, ease: EASE_OUT_EXPO }}
              className="text-center py-20 px-6 border border-line-strong rounded-card text-ink break-keep"
            >
              <div className="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6">
                <Check className="w-6 h-6" strokeWidth={2.5} />
              </div>
              <h3 className="text-[24px] font-semibold tracking-[-0.02em] text-ink mb-3">도입 문의 신청이 접수되었습니다</h3>
              <p className="text-ink-soft text-[15px] leading-[1.6] max-w-md mx-auto mb-8">
                {formData.contactName} 님께 영업일 기준 하루 안에 연락드리겠습니다.
              </p>
              <Button
                type="button"
                size="md"
                onClick={() => {
                  setFormData(EMPTY_FORM)
                  setStatus('idle')
                }}
              >
                새로 문의하기
              </Button>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </Section>
  )
}

/* 라벨 옆 작은 아이콘은 정보를 더하지 않는다 — "회사명" 옆의 빌딩 아이콘이 알려주는 건
   이미 글자가 말한 것뿐이고, 필드마다 반복되면 폼이 산만해진다. 글자만 남긴다. */
function FormField({ label, required = false, children }: { label: string; required?: boolean; children: React.ReactNode }) {
  return (
    <div className="space-y-2.5">
      <label className="block text-[14px] font-medium text-ink">
        {label}
        {required && <span className="text-primary ml-1" aria-hidden>*</span>}
      </label>
      {children}
    </div>
  )
}