/* ============================================================
sections-c.jsx — Process, FAQ, Final CTA (form), Footer, MobileBar
============================================================ */
/* ---------------- Process ---------------- */
const PROCESS = [
{ n: '01', icon: 'pen-tool', t: '기획', d: ['업종, 타겟, 경쟁사를 분석해', '조회수와 문의를 만드는 콘텐츠를 설계합니다.'], note: '* 직역별 광고심의 기준을 준수합니다.' },
{ n: '02', icon: 'video', t: '방문 촬영', d: ['사무실·병원으로 직접 방문해 촬영합니다.', '(1~2시간 소요)'] },
{ n: '03', icon: 'scissors', t: '편집', d: ['후킹 3초·자막·BGM까지', '알고리즘에 최적화된 영상으로 완성합니다.'] },
{ n: '04', icon: 'upload', t: '업로드', d: ['완성된 영상과 캡션을 전달드립니다.', '검수 후 업로드만 해주시면 됩니다.'] }];
function Process() {
const isMobile = window.useIsMobile();
const { Container, Reveal, Dot } = window;
return (
하루 20분만 투자하세요.
복잡한 과정은 모두 저희가 진행합니다.
{PROCESS.map((s, i) =>
{s.n}
{s.t}
{s.d.map((line, j) => {j > 0 &&
}{line})}
{s.note &&
{s.note}
}
{i < PROCESS.length - 1 &&
}
)}
{item.a.map((line, k) => {k > 0 &&
}{line})}
);
}
function Faq() {
const isMobile = window.useIsMobile();
const { Section, Container, Reveal, Dot } = window;
const [open, setOpen] = React.useState(0);
return (
자주 묻는 질문
{FAQS.map((f, i) =>
setOpen(open === i ? -1 : i)} />
)}
);
}
/* ---------------- Final CTA + form ---------------- */
function Field({ label, required = true, children }) {
return (
);
}
/* ── Formspree endpoint ──────────────────────────────────────
1. formspree.io 에 가입 → New Form 생성 → 이메일을 tjdcks4053@naver.com 으로 설정
2. 발급된 Form ID(예: xpzgkrda)를 아래에 붙여넣기
─────────────────────────────────────────────────────────── */
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xgobrodo';
function FinalCta() {
const isMobile = window.useIsMobile();
const { Container, Reveal, Button, Dot } = window;
const [form, setForm] = React.useState({ name: '', phone: '', company: '', worry: '', time: '' });
const [errs, setErrs] = React.useState({});
const [done, setDone] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const [submitErr, setSubmitErr] = React.useState('');
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const setPhone = (e) => {
const digits = e.target.value.replace(/\D/g, '').slice(0, 11);
let formatted = digits;
if (digits.length > 3 && digits.length <= 7) formatted = digits.slice(0, 3) + '-' + digits.slice(3);else
if (digits.length > 7) formatted = digits.slice(0, 3) + '-' + digits.slice(3, 7) + '-' + digits.slice(7);
setForm((f) => ({ ...f, phone: formatted }));
};
const submit = async (e) => {
e.preventDefault();
const next = {};
if (!form.name.trim()) next.name = true;
if (!form.phone.trim()) next.phone = true;
if (!form.company.trim()) next.company = true;
setErrs(next);
if (Object.keys(next).length > 0) return;
setSubmitting(true);
setSubmitErr('');
try {
const data = new FormData();
data.append('_subject', `[블루닷스튜디오] 무료상담 신청 — ${form.name}`);
data.append('_gotcha', '');
data.append('성함', form.name);
data.append('연락처', form.phone);
data.append('회사명', form.company);
data.append('현재고민', form.worry);
data.append('연락가능시간', form.time);
const res = await fetch(FORMSPREE_ENDPOINT, {
method: 'POST',
headers: { 'Accept': 'application/json' },
body: data
});
const json = await res.json().catch(() => ({}));
if (res.ok) {
setDone(true);
} else {
const detail = (json.errors || []).map((e) => e.message).join(' / ') || `오류 ${res.status}`;
setSubmitErr(`제출 실패: ${detail}`);
}
} catch (err) {
setSubmitErr('네트워크 오류입니다. 연결을 확인해주세요.');
} finally {
setSubmitting(false);
}
};
return (
{/* copy */}
지금 바로
무료상담 받아보세요
억지 영업은 하지 않습니다.
현재 상황을 함께 살펴보고,
가장 효과적인 방향을 제안해드립니다.
{/* form card */}
{!done ?
:
신청이 완료되었습니다
{form.name ? `${form.name}님, ` : ''}영업일 기준 24시간 내에 남겨주신 연락처로 연락드리겠습니다.
}
);
}
Object.assign(window, { Process, Faq, FinalCta, SiteFooter, MobileBar });