/* global React, Reveal, Eyebrow, SectionHead, Btn */
const { useState: useStateC } = React;

function ContactPage() {
 return (
 <div className="page-fade">
 <ContactHero />
 <ContactBody />
 </div>
 );
}

function ContactHero() {
 return (
 <section className="block" style={{ paddingTop: "clamp(80px, 9vw, 130px)", paddingBottom: "clamp(32px, 4vw, 64px)" }}>
 <div className="container">
 <Reveal><Eyebrow>CONTACT</Eyebrow></Reveal>
 <Reveal delay={80}>
 <h1 style={{ maxWidth: "22ch", marginTop: 22, fontSize: "clamp(36px, 5.2vw, 68px)" }}>
 <span className="lb">어떤 문의든</span><br />
 <span className="lb"><span className="serif-it">대표가 직접</span> 받습니다.</span>
 </h1>
 </Reveal>
 <Reveal delay={160}>
 <p className="lede" style={{ marginTop: 28 }}>
 <span className="lb">아직 작은 회사라서 모든 문의를</span>{" "}
 <span className="lb">대표가 직접 응대합니다.</span>{" "}
 <span className="lb">영업일 기준 24시간 이내에 답신드립니다.</span>
 </p>
 </Reveal>
 </div>
 </section>
 );
}

function ContactBody() {
 return (
 <section className="block" style={{ paddingTop: 0, borderTop: 0 }}>
 <div className="container">
 <div className="contact-layout">
 <ContactForm />
 <ContactSidebar />
 </div>
 </div>
 <style>{`
 .contact-layout {
 display: grid;
 grid-template-columns: 1.6fr 1fr;
 gap: clamp(28px, 4vw, 64px);
 align-items: start;
 }
 @media (max-width: 980px) {
 .contact-layout { grid-template-columns: 1fr; }
 }
 `}</style>
 </section>
 );
}

/* --------- form --------- */
function ContactForm() {
 const [form, setForm] = useStateC({
 purpose: "일반 문의",
 name: "",
 company: "",
 role: "",
 email: "",
 phone: "",
 message: "",
 privacy: false,
 });
 const [errors, setErrors] = useStateC({});
 const [submitted, setSubmitted] = useStateC(false);

 const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

 const validate = () => {
 const e = {};
 if (!form.name.trim()) e.name = "이름을 입력해주세요.";
 if (!form.email.trim()) {
 e.email = "이메일을 입력해주세요.";
 } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
 e.email = "올바른 이메일 형식이 아닙니다.";
 }
 if (form.phone && !/^[0-9+\-\s()]{7,}$/.test(form.phone)) e.phone = "전화번호 형식을 확인해주세요.";
 if (form.message.trim().length < 10) e.message = "최소 10자 이상으로 작성해주세요.";
 if (!form.privacy) e.privacy = "개인정보 처리 방침에 동의해주세요.";
 return e;
 };

 const onSubmit = (e) => {
 e.preventDefault();
 const errs = validate();
 setErrors(errs);
 if (Object.keys(errs).length === 0) {
 setSubmitted(true);
 window.scrollTo({ top: 0, behavior: "smooth" });
 }
 };

 const showVenueFields = false;

 if (submitted) {
 return (
 <Reveal>
 <div className="card" style={{ padding: "56px 48px", textAlign: "center" }}>
 <div style={{
 width: 56, height: 56, margin: "0 auto", borderRadius: 50,
 background: "var(--bg-sub)", display: "grid", placeItems: "center",
 border: "1px solid var(--line)",
 }}>
 <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
 <path d="M4 11.5L9 16.5L18 6.5" stroke="var(--ink)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
 </svg>
 </div>
 <h2 style={{ marginTop: 28, fontWeight: 500 }}>
 문의가 <span className="serif-it">접수되었습니다.</span>
 </h2>
 <p className="lede" style={{ margin: "20px auto 28px", maxWidth: "44ch", textAlign: "center" }}>
 확인 메일을 <span style={{ color: "var(--ink)", fontWeight: 500 }}>{form.email}</span> 으로 발송했습니다.
 영업일 기준 24시간 이내에 대표가 직접 회신드립니다.
 </p>
 <div className="row gap-16" style={{ justifyContent: "center" }}>
 <Btn variant="secondary" onClick={() => { setSubmitted(false); setForm({ ...form, message: "" }); }}>새 문의 작성</Btn>
 </div>

 <div style={{ marginTop: 48, padding: 24, background: "var(--bg-sub)", borderRadius: 12, textAlign: "left" }}>
 <div className="eyebrow" style={{ marginBottom: 16 }}>접수 요약</div>
 <div className="col gap-8" style={{ fontSize: 13.5 }}>
 <Row k="이름 / 회사" v={`${form.name}${form.company ? " / " + form.company : ""}`} />
 <Row k="문의 번호" v={`INQ-${Math.floor(Math.random() * 90000 + 10000)}-${new Date().getFullYear()}`} />
 </div>
 </div>
 </div>
 </Reveal>
 );
 }

 const purposes = ["일반 문의", "제품 / 서비스", "자금 / 투자", "채용", "기타"];

 return (
 <form className="card" style={{ padding: "clamp(28px, 3.4vw, 44px)" }} onSubmit={onSubmit} noValidate>
 <div className="form-grid">
 <Field id="name" label="이름 *" value={form.name} onChange={(v) => set("name", v)} error={errors.name} placeholder="홍길동" />
 <Field id="role" label="직책" value={form.role} onChange={(v) => set("role", v)} placeholder="" />
 <Field id="company" label="회사 / 소속" value={form.company} onChange={(v) => set("company", v)} placeholder="" />
 <Field id="email" label="이메일 *" type="email" value={form.email} onChange={(v) => set("email", v)} error={errors.email} placeholder="you@example.com" />
 <Field id="phone" label="전화번호" value={form.phone} onChange={(v) => set("phone", v)} error={errors.phone} placeholder="010-0000-0000" />
 </div>

 <div style={{ marginTop: 36 }}>
 <div className="field">
 <label htmlFor="message">문의 내용 * (최소 10자)</label>
 <textarea
 id="message"
 value={form.message}
 onChange={(e) => set("message", e.target.value)}
 placeholder="궁금한 점을 자유롭게 적어주세요."
 style={{ minHeight: 160 }}
 />
 <div className="err" style={{ color: "hsl(var(--neg))", fontSize: 12.5 }}>{errors.message}</div>
 <div className="muted" style={{ fontSize: 11.5, textAlign: "right" }}>
 {form.message.length} / 2000
 </div>
 </div>
 </div>

 <label style={{
 marginTop: 24, display: "flex", gap: 12, alignItems: "flex-start",
 cursor: "pointer", fontSize: 13.5, color: "var(--ink-2)",
 padding: 16, background: "var(--bg-sub)", borderRadius: 10,
 border: errors.privacy ? "1px solid hsl(var(--neg))" : "1px solid transparent",
 }}>
 <input
 type="checkbox"
 checked={form.privacy}
 onChange={(e) => set("privacy", e.target.checked)}
 style={{ marginTop: 2 }}
 />
 <span>
 개인정보 수집과 이용에 동의합니다. 이름, 회사명, 이메일, 전화번호는 문의 회신 목적으로만 사용되며,
 관련 법령에 따라 <span style={{ color: "var(--ink)", fontWeight: 500 }}>3년간</span> 보관 후 파기됩니다.
 </span>
 </label>
 {errors.privacy && <div style={{ color: "hsl(var(--neg))", fontSize: 12.5, marginTop: 8 }}>{errors.privacy}</div>}

 <div className="row gap-16" style={{ marginTop: 32, justifyContent: "space-between", flexWrap: "wrap" }}>
 <div className="muted" style={{ fontSize: 12 }}>
 모든 입력은 SSL TLS 1.3으로 암호화됩니다.
 </div>
 <Btn size="lg" arrow type="submit">문의 보내기</Btn>
 </div>

 <style>{`
 .form-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px 20px;
 }
 @media (max-width: 720px) {
 .form-grid { grid-template-columns: 1fr; }
 }
 .purpose-chip {
 height: 40px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: var(--bg);
 color: var(--ink-2);
 font-family: inherit;
 font-size: 13.5px;
 cursor: pointer;
 transition: all .15s ease;
 }
 .purpose-chip:hover { color: var(--ink); border-color: var(--ink-3); }
 .purpose-chip[data-active="true"] {
 background: var(--ink);
 color: var(--bg);
 border-color: var(--ink);
 }
 `}</style>
 </form>
 );
}

function Field({ id, label, value, onChange, type = "text", placeholder, error }) {
 return (
 <div className={`field ${error ? "invalid" : ""}`}>
 <label htmlFor={id}>{label}</label>
 <input
 id={id}
 type={type}
 value={value}
 placeholder={placeholder}
 onChange={(e) => onChange(e.target.value)}
 />
 <div className="err" style={{ color: "hsl(var(--neg))", fontSize: 12.5 }}>{error}</div>
 </div>
 );
}

function Row({ k, v }) {
 return (
 <div style={{ display: "flex", justifyContent: "space-between", gap: 16, paddingBottom: 6, borderBottom: "1px dashed var(--line)" }}>
 <span className="muted">{k}</span>
 <span style={{ color: "var(--ink)", textAlign: "right" }}>{v}</span>
 </div>
 );
}

function ContactSidebar() {
 return (
 <div className="col gap-24">
 <Reveal>
 <div className="card" style={{ padding: 28 }}>
 <div className="eyebrow" style={{ marginBottom: 16 }}>DIRECT</div>
 <div className="col gap-16">
 <SidebarRow lbl="대표 직통" v="contact@eonlab.kr" />
 <SidebarRow lbl="제품 / 서비스" v="hello@eonlab.kr" />
 <SidebarRow lbl="자금 / 투자" v="ir@eonlab.kr" />
 <SidebarRow lbl="채용" v="careers@eonlab.kr" />
 </div>
 </div>
 </Reveal>

 <Reveal delay={120}>
 <div className="card" style={{ padding: 28 }}>
 <div className="eyebrow" style={{ marginBottom: 16 }}>OFFICE</div>
 <div className="col gap-16">
 <div>
 <div style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink)", textTransform: "uppercase" }}>CHEONGJU HQ</div>
 <div style={{ marginTop: 10, fontSize: 14.5, color: "var(--ink)", lineHeight: 1.55 }}>
 <div>충청북도 청주시 서원구</div>
 <div>내수동로108번길 4층</div>
 </div>
 <div className="muted" style={{ marginTop: 10, fontSize: 12.5 }}>
 영업일 기준 09:00–18:00 KST
 </div>
 </div>
 </div>
 </div>
 </Reveal>

 <Reveal delay={200}>
 <div className="card" style={{ padding: 28, background: "var(--ink)", color: "var(--bg)", border: 0 }}>
 <div className="eyebrow" style={{ color: "color-mix(in oklab, var(--bg) 65%, transparent)" }}>
 <span className="dot" style={{ background: "var(--bg)" }} />
 모든 문의, 대표가 직접
 </div>
 <p style={{ marginTop: 16, fontSize: 14.5, color: "color-mix(in oklab, var(--bg) 85%, transparent)", lineHeight: 1.6 }}>
 <span className="lb">제품 문의든, 협업 제안이든,</span>{" "}
 <span className="lb">자금이나 채용에 대한 이야기든,</span>{" "}
 <span className="lb">대표가 직접 읽고 답신드립니다.</span>{" "}
 <span className="lb">필요하면 통화나 미팅도 일정 협의 후 잡습니다.</span>
 </p>
 </div>
 </Reveal>
 </div>
 );
}

function SidebarRow({ lbl, v }) {
 return (
 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
 <span className="muted" style={{ fontSize: 13 }}>{lbl}</span>
 <a href={`mailto:${v}`} style={{ fontSize: 13.5, color: "var(--ink)" }}>{v}</a>
 </div>
 );
}

window.ContactPage = ContactPage;