// Sections — Header / Hero / Stats / TrackRecord / Services / Team / CEO / AIDemo / Contact / Footer const { useState, useEffect, useRef } = React; const useReveal = window.useReveal; const LANGS = [['ko', 'KO', '한국어'], ['en', 'EN', 'English'], ['ja', 'JA', '日本語'], ['zh', 'ZH', '中文']]; function LangMenu({ lang, setLang }) { const [open, setOpen] = useState(false); const wrapRef = useRef(null); useEffect(() => { if (!open) return; const away = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }; const esc = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('pointerdown', away); document.addEventListener('keydown', esc); return () => { document.removeEventListener('pointerdown', away); document.removeEventListener('keydown', esc); }; }, [open]); const active = LANGS.find((l) => l[0] === lang) || LANGS[0]; return (
{open && (
{LANGS.map(([code, abbr, name]) => { const on = code === lang; return ( ); })}
)}
); } // ============================== HEADER ============================== function Header({ t, lang, setLang, tweaks, setTweak }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const f = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', f, { passive: true }); return () => window.removeEventListener('scroll', f); }, []); const links = [ { k: 'verified', href: '#verified' }, { k: 'patentguard', href: '#patentguard' }, { k: 'trust', href: '#trust' }, { k: 'ecodeteam', href: '#ecodeteam' }, { k: 'services', href: '#services' }, { k: 'ceo', href: '#ceo' }, { k: 'team', href: '#team' }, { k: 'disclosure', href: 'announcements/' }]; return (
{/* Language — popover */} {/* Theme toggle */} {e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)';}} onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,.4)';}}> {t.hero.ctaShort || t.hero.cta1} ↗
); } function Logo({ wordmark = false, onInk = true }) { const isDark = onInk; if (wordmark) { return ( ECODE); } return (
ECODE ECODE
); } function PillarIcon({ kind }) { const c = 'var(--ink-fg-2)'; const a = 'var(--accent)'; const m = { shield: <>, gavel: <>, chart: <> }; return {m[kind]}; } // ============================== HERO ============================== function Hero({ t, tweaks }) { const accent = `hsl(${tweaks.accentHue} 100% 55%)`; const variant = tweaks.heroVisual; return (
{/* hero backplate */}
{/* verification dashboard mockup */}
); } function lang_label(t) { return t.method ? (t.method.humanLabel === '사람이 판단' ? 'AI 1차 스캔 → 전문가 2차 재검증 → 수정 후 재확인' : 'AI first-pass scan → expert re-verification → post-fix re-check') : ''; } function StatusDot({ label }) { return ( {label} ); } // ============================== STATS ============================== function Stats({ t }) { const [ref, seen] = useReveal(); return (
{t.metrics.map((m, i) => (
{m.u && ( {m.u} )}
{m.l}
))}
); } function CountUp({ value }) { const raw = String(value); const m = raw.match(/^([\d,]+)(.*)$/); const target = m ? parseInt(m[1].replace(/,/g, ''), 10) : null; const suffix = m ? m[2] : ''; const [n, setN] = useState(target == null ? null : 0); const elRef = useRef(null); useEffect(() => { if (target == null) return; const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion')) || 1; if (motion < 0.05) { setN(target); return; } let raf = 0, done = false; const run = () => { if (done) return; done = true; const t0 = performance.now(); const step = (now) => { const p = Math.min(1, (now - t0) / 1200); setN(Math.round(target * (1 - Math.pow(1 - p, 3)))); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); }; const el = elRef.current; let io; if (el) { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight && r.bottom > 0) run(); io = new IntersectionObserver(([e]) => { if (e.isIntersecting) run(); }, { threshold: 0.2 }); io.observe(el); } // Safety net: show the real figure even if the observer never fires. const fallback = setTimeout(run, 1200); return () => { if (io) io.disconnect(); clearTimeout(fallback); cancelAnimationFrame(raf); }; }, [target]); if (target == null) return {raw}; return {(n || 0).toLocaleString()}{suffix}; } // ============================== TRACK RECORD ============================== function TrackRecord({ t }) { const [ref, seen] = useReveal(); const [active, setActive] = useState(0); return (

{t.proof.title} {t.proof.sub}

{t.record.map((r, i) =>
setActive(i)} onClick={() => setActive(i)} style={{ display: 'grid', gridTemplateColumns: '72px 1fr 80px', gap: 16, alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--line)', cursor: 'pointer', position: 'relative', transition: 'all .25s' }}>
{r.code} · 0{i + 1}
{r.ind}
{active === i ? '— OPEN' : 'VIEW →'}
{[['Problem', r.problem], ['Solution', r.solution], ['Result', r.result]].map(([k, v]) =>
{k}
{v}
)}
)}
); } function SectionEyebrow({ num, label, pre }) { return (
{pre || num} {label}
); } // ============================== SERVICES ============================== function Services({ t }) { const [ref, seen] = useReveal(); return (

{t.services.titleAccent}{t.services.titleRest} {t.services.sub}

{/* Uniform 3-col grid — images are all 16:9, cards share the same shape */}
{t.services.items.map((item, i) => )}
); } function ServiceCard({ item, index }) { const [hover, setHover] = useState(false); const num = String((index ?? 0) + 1).padStart(2, '0'); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 18, padding: 0, display: 'flex', flexDirection: 'column', transition: 'transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s, box-shadow .35s', transform: hover ? 'translateY(-4px)' : 'none', borderColor: hover ? 'var(--accent-edge)' : 'var(--line)', boxShadow: hover ? '0 18px 40px -22px color-mix(in srgb, var(--accent) 35%, transparent)' : 'none', textDecoration: 'none', color: 'inherit' }}> {/* Image — 16:9, compact card height */}
{item.img ? {item.title} :
{item.title}
} {/* Top-left index */}
{num} / SERVICE
{/* Status chip */} {item.status === 'LIVE' && } {item.status}
{/* Body */} ); } function UpcomingCard({ items }) { return (
R&D · UPCOMING
준비 중인 서비스
{items.map((s, i) => {s} )}
); } // ============================== TEAM ============================== function RoleIcon({ kind }) { // Inline SVGs — uses currentColor for accent const stroke = 'currentColor'; const wrap = { width: 36, height: 36, color: 'var(--accent)' }; if (kind === 'lead') return ( ); if (kind === 'cto') return ( ); if (kind === 'coo') return ( ); if (kind === 'dev') return ( ); if (kind === 'design') return ( ); if (kind === 'biz') return ( ); return null; } function OrgIcon({ kind }) { const l = 'rgba(255,255,255,.55)'; const a = 'var(--accent)'; const m = { hex: <>, layers: <>, triangle: <>, pie: <> }; return {m[kind]}; } function PersonGlyph() { return ( ); } function OrgCard({ unit, i, seen, lead }) { return (
{!lead && (
)} {/* navy cap */}
{lead ? unit.name : unit.name}
{lead ? (
{unit.role}
) : ( <>
{unit.members.map((mb, j) => (
{mb.n} — {mb.r} {mb.dual && ( {unit.dualLabel} )}
))}
)}
); } function Team({ t }) { const [ref, seen] = useReveal(); const o = t.team; return (

{o.title}

{o.sub}

{o.corp}
{o.units.map((u, i) => ( ))}
); } // ============================== FOUNDER CARD (typographic) ============================== function FounderCard({ t, seen }) { const careers = t.ceo.careers || []; // Pick 5 most relevant for the card timeline const milestones = careers.slice(0, 6); return (
{/* Header bar */}
FOUNDER / CEO
ACTIVE · 16Y
{/* Portrait */}
이성훈 대표
{/* Timeline */}
CAREER · 16Y TIMELINE
{milestones.map((m, i) =>
{m.period.split(' — ')[0]}
{m.role}
{m.org}
)}
{/* Footer signature */}
SIG · /ecode-founder
); } // ============================== CEO ============================== function CEO({ t, tweaks }) { const [ref, seen] = useReveal(); return (

{t.ceo.name} {t.ceo.role} · {t.ceo.career}

{t.ceo.bio}

"{t.ceo.quote}"
); } // ============================== FOUNDER TABS ============================== function FounderTabs({ t }) { const tabs = [ { id: 'career', label: 'CAREER', n: t.ceo.careers.length }, { id: 'projects', label: 'PROJECTS', n: t.ceo.projectGroups.reduce((a, g) => a + g.items.length, 0) }, { id: 'patents', label: 'PATENTS', n: t.ceo.patents.length }, { id: 'stack', label: 'STACK', n: t.ceo.stack.reduce((a, g) => a + g.items.length, 0) }, { id: 'edu', label: 'EDU · CERT', n: t.ceo.education.length }]; const [active, setActive] = useState('career'); return (
{/* Tab bar */}
{tabs.map((tab) => )}
{/* Content */}
{active === 'career' &&
{t.ceo.careers.map((c, i) =>
{c.current && } {c.period}
{c.org}
{c.role}
)}
} {active === 'projects' &&
{t.ceo.projectGroups.map((g, i) =>
{String(i + 1).padStart(2, '0')} · {g.g}
    {g.items.map((it, j) =>
  • {it}
    • )}
)}
} {active === 'patents' &&
{t.ceo.patents.map((p, i) =>
P{String(i + 1).padStart(2, '0')}
{p.titleKo}
{p.titleEn}
출원 {p.no} · {p.date} · IPC {p.ipc} · {p.role}
{p.status.toUpperCase()}
)}
} {active === 'stack' &&
{t.ceo.stack.map((g, i) =>
{g.c}
{g.items.map((it, j) =>
{it.k} {it.v}
)}
)}
} {active === 'edu' &&
{t.ceo.education.map((e, i) =>
{e.k}
{e.v}
{e.y}
)}
}
); } // ============================== ECODETEAM (SUBSCRIPTION) ============================== // ============================== DEMO HUB MODAL ============================== function DemoHubModal({ t, onClose }) { const e = t.ecodeteam; const [demos, setDemos] = React.useState([]); const [err, setErr] = React.useState(false); const [active, setActive] = React.useState(null); React.useEffect(() => { const onKey = (ev) => { if (ev.key === 'Escape') { active ? setActive(null) : onClose(); } }; document.body.style.overflow = 'hidden'; window.addEventListener('keydown', onKey); fetch('https://demo-deck.pages.dev/demos.json', { cache: 'no-cache' }) .then((r) => r.json()).then((l) => setDemos(Array.isArray(l) ? l : (l.data || []))).catch(() => setErr(true)); return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); }; }, [active, onClose]); return (
ev.stopPropagation()} style={{ width: '100%', maxWidth: 1080, height: '88vh', background: 'var(--bg)', borderRadius: 16, border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 40px 100px -40px rgba(0,0,0,.6)' }}> {/* header */}
{active && ( )} {active ? `${active.icon || ''} ${active.title}` : (e.demoTitle || '데모 허브')}
{active && 새 탭 ↗}
{/* body */} {active ? (