/* global React, Button, Card, Badge, Section, SectionHeader, StatPill */ const { useState, useEffect, useRef } = React; // ────────────────────────────────────────── // Language Toggle (KR | EN) // ────────────────────────────────────────── function LangToggle() { const [loc, setLoc] = window.BD.useLocale(); const opt = (val, label) => { const active = loc === val; return ( ); }; return (
{opt('ko', 'KR')} {opt('en', 'EN')}
); } // ────────────────────────────────────────── // Sticky Nav // ────────────────────────────────────────── function StickyNav() { const [loc] = window.BD.useLocale(); const c = window.BD.COPY[loc]; const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 16); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { href: '#demo', label: c.nav.demo }, { href: '#how', label: c.nav.how }, { href: '#roi', label: c.nav.roi }, { href: '#faq', label: c.nav.faq }, ]; return ( ); } function BadeumMark({ size = 28 }) { return ( ); } // ────────────────────────────────────────── // Hero // ────────────────────────────────────────── function Hero({ heroVariant, industryId }) { const [loc] = window.BD.useLocale(); const c = window.BD.COPY[loc]; const variants = loc === 'ko' ? window.BD.HERO_VARIANTS_KO : window.BD.HERO_VARIANTS_EN; const v = variants.find(h => h.id === heroVariant) || variants[0]; const ind = window.BD.localIndustry(industryId, loc); return (
{c.hero.eyebrow} {c.hero.target(ind.fullLabel)}

{v.headline}

{v.sub}

{v.metric.num}
{v.metric.label}
); } function HeroVisual({ industry, loc }) { const c = window.BD.COPY[loc]; const [tick, setTick] = useState(0); useEffect(() => { const i = setInterval(() => setTick(t => t + 1), 90); return () => clearInterval(i); }, []); const bars = Array.from({ length: 32 }).map((_, i) => { const phase = (i * 0.41 + tick * 0.18); return 12 + Math.abs(Math.sin(phase)) * 36 + Math.abs(Math.sin(phase * 0.5)) * 16; }); const liveLabel = loc === 'ko' ? '● 통화중' : '● Live'; const callerLabel = loc === 'ko' ? `신규 고객 · 010-****-3812` : `New caller · 010-****-3812`; const subLabel = loc === 'ko' ? `${industry.ctx.replace(' 커버', '')} · 받음 응대중` : `${industry.ctx.replace(' coverage','')} · Badeum answering`; return (
{liveLabel} 00:14
{loc === 'ko' ? '김' : 'K'}
{callerLabel}
{subLabel}
{c.demo.caller}
"{industry.sampleCaller}"
{bars.map((h, i) => (
))}
{c.demo.ai}
"{industry.sampleAi}"
); } // ────────────────────────────────────────── // Stats-shock // ────────────────────────────────────────── function StatsShock() { const [loc] = window.BD.useLocale(); const c = window.BD.COPY[loc]; return (
{c.stats.items.map((s, i) => (
))}
); } // ────────────────────────────────────────── // Vertical cards // ────────────────────────────────────────── function VerticalCards({ industryId, setIndustryId }) { const [loc] = window.BD.useLocale(); const c = window.BD.COPY[loc]; return (
{window.BD.INDUSTRIES.map(base => { const ind = window.BD.localIndustry(base.id, loc); const active = ind.id === industryId; return ( ); })}
); } // ────────────────────────────────────────── // How it works // ────────────────────────────────────────── function HowItWorks() { const [loc] = window.BD.useLocale(); const c = window.BD.COPY[loc]; return (
{c.how.steps.map((s, i) => (
{c.how.stepLabel} {s.n}

{s.title}

{s.body}

))}
); } Object.assign(window, { StickyNav, Hero, StatsShock, VerticalCards, HowItWorks });