const { useState, useEffect, useRef, useMemo } = React; const I18N = window.I18N; // ─────────────────────────────────────────────────────────────────────────── // Responsive hook // ─────────────────────────────────────────────────────────────────────────── function useIsMobile(breakpoint = 760) { const [m, setM] = useState(() => typeof window !== "undefined" && window.innerWidth <= breakpoint); useEffect(() => { const onR = () => setM(window.innerWidth <= breakpoint); window.addEventListener("resize", onR); return () => window.removeEventListener("resize", onR); }, [breakpoint]); return m; } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#1f4ed8", "surface": "warm", "headerStyle": "split", "showGrid": true, "density": "comfortable" } /*EDITMODE-END*/; // ─────────────────────────────────────────────────────────────────────────── // Surfaces // ─────────────────────────────────────────────────────────────────────────── const SURFACES = { warm: { bg: "#f6f4ef", panel: "#ffffff", ink: "#1a1714", muted: "#6b6660", line: "#e5e0d7", subtle: "#efece5" }, cool: { bg: "#f1f3f6", panel: "#ffffff", ink: "#14171c", muted: "#5e6573", line: "#dde1e8", subtle: "#e7ebf1" }, dark: { bg: "#0f1115", panel: "#161922", ink: "#eef0f5", muted: "#8a91a1", line: "#252a36", subtle: "#1c2029" } }; // ─────────────────────────────────────────────────────────────────────────── // Small atoms // ─────────────────────────────────────────────────────────────────────────── function Mono({ children, style }) { return {children}; } function SectionLabel({ index, label, accent }) { return (
§ {index} {label}
); } // ─────────────────────────────────────────────────────────────────────────── // Language toggle // ─────────────────────────────────────────────────────────────────────────── function LangToggle({ lang, setLang, accent }) { const opts = [ { v: "ko", label: "KOR" }, { v: "en", label: "ENG" }]; return (
{opts.map((o) => { const active = lang === o.v; return ( ); })}
); } // ─────────────────────────────────────────────────────────────────────────── // Header // ─────────────────────────────────────────────────────────────────────────── function TopBar({ accent, onJump, t, lang, setLang }) { const isMobile = useIsMobile(); const [open, setOpen] = useState(false); const links = t.nav; return (
{t.brand}
{isMobile ?
:
}
{isMobile && open && }
); } // ─────────────────────────────────────────────────────────────────────────── // Hero // ─────────────────────────────────────────────────────────────────────────── function Hero({ accent, surface, headerStyle, density, t }) { const isMobile = useIsMobile(); return (
{t.heroEyebrow}

{t.heroHeading1}
{t.heroHeadingAcc}{t.heroHeading2}
{t.heroHeading3}

{t.heroSub &&
{t.heroSub}
}

{t.heroBody}

{headerStyle === "split" &&
{t.heroStats.map((s, i) =>
3 ? 26 : 36 : s.k.length > 3 ? 36 : 48, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.02em" }}>{s.k}
{s.u.toUpperCase()}
{s.d}
)}
}
); } // ─────────────────────────────────────────────────────────────────────────── // Credibility Bar (Hero 직하) // ─────────────────────────────────────────────────────────────────────────── function CredibilityBar({ accent, surface, t }) { const isMobile = useIsMobile(); if (!t.cred || !t.cred.length) return null; const isDarkSurface = surface.bg === "#0f1115"; const barBg = isDarkSurface ? surface.panel : surface.ink; const barFg = surface.bg; const labelColor = "rgba(255,255,255,0.62)"; const dividerColor = "rgba(255,255,255,0.10)"; return (
{t.cred.map((c, i) =>
= 2 ? `1px solid ${dividerColor}` : "none", position: "relative" }}>
12 ? 18 : c.v.length > 9 ? 20 : 24, fontWeight: 700, letterSpacing: "-0.01em", color: barFg, lineHeight: 1.2, wordBreak: "keep-all", whiteSpace: "pre-line" }}>{c.v}
{c.l} {c.s && {c.s} }
)}
); } // ─────────────────────────────────────────────────────────────────────────── // About / Profile // ─────────────────────────────────────────────────────────────────────────── function About({ accent, surface, t }) { const isMobile = useIsMobile(); const P = t.profile; return (
{P.nameKo}
{P.nameKo}
{P.nameEn.toUpperCase()}
{P.title}
{P.subtitle}

{P.bio}

{P.certsLabel}
{P.certs.map((c, i) => { const lines = c.text.split("\n"); return (
{c.label.toUpperCase()}
{lines[0]}
{lines.slice(1).map((line, idx) => (
{line}
))}
); })}
{P.timelineLabel}
{P.career.filter((c) => !c.tier || c.tier === "A").map((c, i) =>
{c.period}
{c.org}
{c.role}
)}
{P.career.some((c) => c.tier === "B") &&
{P.earlierLabel || "Earlier"}
{P.career.filter((c) => c.tier === "B").map((c, i) =>
{c.period}
{c.org}
{c.role}
)}
}
); } // ─────────────────────────────────────────────────────────────────────────── // Domains // ─────────────────────────────────────────────────────────────────────────── function Domains({ accent, surface, t }) { const [hovered, setHovered] = useState(null); const isMobile = useIsMobile(); return (

{t.domainsHeading}

{t.domainsBody}

{t.domains.map((d, i) =>
setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ background: hovered === i ? "var(--ink)" : "var(--panel)", color: hovered === i ? "var(--bg)" : "var(--ink)", padding: isMobile ? 24 : 32, transition: "all 0.18s ease", cursor: "default", minHeight: isMobile ? "auto" : 280, display: "flex", flexDirection: "column" }}>
{d.code} / {d.en.toUpperCase()} →

{d.title}

{d.desc}

{d.bullets.map((b, j) =>
· {b}
)}
)}
); } // ─────────────────────────────────────────────────────────────────────────── // Cases // ─────────────────────────────────────────────────────────────────────────── function Cases({ accent, surface, t }) { const [active, setActive] = useState(0); const isMobile = useIsMobile(); const segs = t.portfolioSegments || []; const metrics = t.portfolioMetrics || []; const s = segs[active] || segs[0]; return (

{t.portfolioHeading}

{t.portfolioBody}

{/* Segment list */}
{(t.portfolioSegmentsLabel || "Advisory Segments").toUpperCase()} · {segs.length}
{segs.map((seg, i) => )}
{/* Detail panel */}
{String(active + 1).padStart(2, "0")} / {s.title.toUpperCase()}

{s.summary}

{t.portfolioActivitiesLabel || "Advisory Activities"}
{(s.activities || []).map((a, i) =>
→ {a}
)}
{t.portfolioTopicsLabel || "Key Topics"}
{(s.topics || "").split(",").map((kw, i) =>
{kw.trim()}
)}
); } // ─────────────────────────────────────────────────────────────────────────── // Recognition — Awards & Publications // ─────────────────────────────────────────────────────────────────────────── function Recognition({ accent, surface, t }) { const isMobile = useIsMobile(); if (!t.awards || !t.publications) return null; return (

{t.recognitionHeading}

{t.recognitionBody}

{/* Awards column */}
{t.recognitionAwardsLabel.toUpperCase()} ×{t.awards.length}
{t.awards.map((a, i) =>
{a.year}
{a.title}
{a.org.toUpperCase()} {a.note &&
{a.note}
}
)}
{/* Publications column */}
{t.recognitionPublicationsLabel.toUpperCase()} ×{t.publications.length}
{t.publications.map((p, i) =>
{p.year}
{p.venue}
{p.note && {p.note} }
)} {t.scholarUrl && }
); } // ─────────────────────────────────────────────────────────────────────────── // How We Work — engagement formats (공개 캘린더 iframe 제거) // ─────────────────────────────────────────────────────────────────────────── function Schedule({ accent, surface, t }) { const isMobile = useIsMobile(); const formats = t.scheduleFormats || []; return (

{t.scheduleHeading}

{t.scheduleBody}

{t.scheduleFormatsLabel}
{formats.map((f, i) =>
{f.code}
{f.k}

{f.d}

)}
{t.scheduleNote && {t.scheduleNote} }
); } // ─────────────────────────────────────────────────────────────────────────── // Contact // ─────────────────────────────────────────────────────────────────────────── function Contact({ accent, surface, t }) { const [form, setForm] = useState({ name: "", company: "", title: "", email: "", area: t.domains[1].title, inquiry: t.formInquiryOpts[0], timing: "", nda: t.formNdaOpts[0], message: "" }); const [sent, setSent] = useState(false); const [errors, setErrors] = useState({}); // When language changes, reset language-specific select fields to the active language useEffect(() => { setForm((f) => ({ ...f, area: t.domains[1].title, inquiry: t.formInquiryOpts[0], nda: t.formNdaOpts[0] })); }, [t]); function submit(e) { e.preventDefault(); const err = {}; if (!form.name.trim()) err.name = t.err.name; if (!form.company.trim()) err.company = t.err.company; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) err.email = t.err.email; if (form.message.trim().length < 10) err.message = t.err.message; setErrors(err); if (Object.keys(err).length === 0) { const to = "ptk2201@naver.com"; const ml = t.mailLabels; const subject = `${t.mailSubjectPrefix} ${form.company} — ${form.inquiry}`; const body = `${ml.name}: ${form.name}\n` + `${ml.company}: ${form.company}\n` + `${ml.title}: ${form.title}\n` + `${ml.email}: ${form.email}\n` + `${ml.area}: ${form.area}\n` + `${ml.inquiry}: ${form.inquiry}\n` + `${ml.timing}: ${form.timing}\n` + `${ml.nda}: ${form.nda}\n` + `\n` + `${ml.sep}\n` + `${ml.bodyTitle}\n` + `${ml.sep}\n` + `${form.message}\n`; const mailto = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; // window.open is more reliable in sandboxed environments than window.location.href try { const a = document.createElement('a'); a.href = mailto; a.target = '_blank'; a.rel = 'noopener'; document.body.appendChild(a); a.click(); document.body.removeChild(a); } catch (_) { window.open(mailto, '_blank'); } setSent(mailto); setTimeout(() => setSent(false), 8000); } } const inputStyle = { width: "100%", padding: "14px 16px", background: "transparent", border: "1px solid var(--line)", color: "var(--ink)", fontSize: 14, fontFamily: "inherit", outline: "none", transition: "border-color 0.15s" }; const isMobile = useIsMobile(); return (

{t.contactHeading}

{(t.contactBody || "").split("\n\n").map((para, i) =>

0 ? "14px 0 0" : 0, wordBreak: "keep-all" }}> {para}

)}
{t.contactSteps &&
{t.contactSteps.map((step, i) =>
{step.n}
{step.k}
{step.d}
›
)}
}
setForm({ ...form, name: e.target.value })} placeholder={t.formNamePh} /> setForm({ ...form, company: e.target.value })} placeholder={t.formCompanyPh} />
setForm({ ...form, title: e.target.value })} placeholder={t.formTitlePh} /> setForm({ ...form, email: e.target.value })} placeholder={t.formEmailPh} />