/* ============================================================ Gaung AI — Home page sections (below hero) ============================================================ */ function OfficeSection() { const { lang } = React.useContext(LangCtx); return (
{t({id:'Di balik layar', en:'Behind the scenes'}, lang)}

{t({id:'Autonomous AI', en:'Autonomous AI'}, lang)}
{t({id:'Sales Orchestration', en:'Sales Orchestration'}, lang)}

{t({ id:'Gaung AI bekerja 24/7 menjalankan agent-agent sales Anda. Lead Gen menyisir sumber data, Conversation Agent membalas leads di WhatsApp, Analytics menilai pipeline — semua dalam satu otak, semua terhubung.', en:'Gaung AI runs your sales agents 24/7. Lead Gen sweeps sources, Conversation Agent replies on WhatsApp, Analytics scores the pipeline — one brain, one system.' }, lang)}

); } function MarqueeStrip() { const { lang } = React.useContext(LangCtx); const items = [ t({id:'Dipercaya oleh tim pertumbuhan di Indonesia',en:'Trusted by growth teams across Indonesia'}, lang), 'PT Graha Merdeka', 'Nusa Manufaktur', 'Sekawan Logistik', 'Bintang SaaS', 'Arta Konstruksi', 'Duta Pharma', 'Harmoni FinTech', 'Mitra Industri', ]; const doubled = [...items, ...items]; return (
{doubled.map((x, i) => {x})}
); } function HowItWorksSection() { const { lang } = React.useContext(LangCtx); const steps = [ { n:'01', agent:'dna', title:{id:'Business DNA', en:'Business DNA'}, desc:{id:'AI baca website Anda, ekstrak ICP, value prop, dan profil bisnis secara otomatis — tanpa form, tanpa brief manual.', en:'AI reads your website, extracts ICP, value props, and business profile automatically — no forms, no manual briefs.'} }, { n:'02', agent:'lead', title:{id:'Lead Generation', en:'Lead Generation'}, desc:{id:'Ratusan qualified leads dari berbagai sumber data — disaring berdasarkan intent signal dan kecocokan ICP.', en:'Hundreds of qualified leads sourced from multiple databases — filtered by intent signal and ICP fit.'} }, { n:'03', agent:'outreach', title:{id:'Outreach', en:'Outreach'}, desc:{id:'Pesan personalisasi terkirim sesuai profil dan industri masing-masing lead.', en:'Personalized messages sent tailored to each lead\'s profile and industry.'} }, { n:'04', agent:'conversation', title:{id:'Conversation', en:'Conversation'}, desc:{id:'AI agent membalas, menjawab pertanyaan, dan mendorong leads menuju meeting — 24/7 tanpa jeda.', en:'AI agent replies, answers questions, and moves leads toward meetings — 24/7 without pause.'} }, { n:'05', agent:'nurture', title:{id:'Nurture', en:'Nurture'}, desc:{id:'Leads yang belum konversi difollow-up otomatis: 7, 14, 30 hari. Tidak ada yang jatuh dari pipeline.', en:'Unconverted leads get automated follow-ups at 7, 14, 30 days. Nothing falls through the pipeline.'} }, { n:'06', agent:'optimize', title:{id:'Optimize', en:'Optimize'}, desc:{id:'Analytics evaluasi setiap langkah. Gaung AI perbarui strategi otomatis — tiap siklus makin tajam.', en:'Analytics evaluates every step. Gaung AI auto-updates strategy — each cycle gets sharper.'} }, ]; const colors = ['#ea008c','#ee1090','#f03080','#f55030','#ff7020','#ff8a10']; // Animated AI agent figures per step — robot body inlined per type to avoid Babel fragment-shorthand issues function AgentSVG({ type, color }) { const a = color; const Bot = () => ( ); if (type === 'dna') return ( ); if (type === 'lead') return ( ); if (type === 'outreach') return ( ); if (type === 'conversation') return ( ); if (type === 'nurture') return ( ); if (type === 'optimize') return ( ); return null; } function StepCard({ step, color, extra }) { return (
{/* Step number — small label, NOT bigger than title */}
{step.n}
{/* Title — dominant visual element */}

{t(step.title, lang)}

{t(step.desc, lang)}

{extra &&
{extra}
} {/* Animated agent — bottom right */}
); } function ArrowH({ dir, c1, c2 }) { const r = dir === 'right'; return (
{r ? : }
); } // WhatsApp + Email badges for Outreach card const outreachExtra = (
WhatsApp
Email
); const top = steps.slice(0, 3); const bot = [...steps.slice(3)].reverse(); // 06, 05, 04 return (
{/* Header — no subtitle */}
{t({id:'CARA KERJA', en:'HOW IT WORKS'}, lang)}

{t({id:'Loop agentic yang', en:'An agentic loop that'}, lang)}
{t({id:'tidak pernah berhenti.', en:'never stops.'}, lang)}

{/* Row 1: 01 → 02 → 03 */}
{top.map((s, i) => ( {i < 2 && } ))}
{/* Turn gap: down on right, up-loop on left */}
{/* Left: loop-return up arrow (06 → 01) */}
{/* Right: down arrow (03 → 04) */}
{/* Row 2: 06 ← 05 ← 04 */}
{bot.map((s, i) => ( {i < 2 && } ))}
{/* Loop badge */}
↻ {t({id:'Siklus berulang — tiap iterasi Gaung AI makin cerdas.', en:'Cycle repeats — each iteration Gaung AI gets smarter.'}, lang)}
); } function EnginesSection() { const { lang } = React.useContext(LangCtx); const H = window.GAUNG_CONTENT.home; // Editorial layout: feature the 3 engines that map most directly to a CMO's // pain (sourcing, conversation, nurture) at full size, then list the rest as // a tight strip below. Breaks the symmetric 6-card grid that read as AI slop // and lets the page compress to 1-2-3 hierarchy instead of 1-1-1-1-1-1. const featured = [ { n:'02', t:H.e2t, d:H.e2d, icon:'radar', stage:{ id:'Sourcing', en:'Sourcing'} }, { n:'04', t:H.e4t, d:H.e4d, icon:'chat', stage:{ id:'Conversation', en:'Conversation'} }, { n:'05', t:H.e5t, d:H.e5d, icon:'seed', stage:{ id:'Nurture', en:'Nurture'} }, ]; const rest = [ { n:'01', t:H.e1t, stage:{ id:'Strategy', en:'Strategy'} }, { n:'03', t:H.e3t, stage:{ id:'Outreach', en:'Outreach'} }, { n:'06', t:H.e6t, stage:{ id:'Optimization', en:'Optimization'} }, ]; return (
{t(H.enginesEyebrow, lang)}

{t(H.enginesH, lang).split(',')[0]},
{(t(H.enginesH, lang).split(',')[1] || '').trim()}

{t(H.enginesLead, lang)}

{featured.map((e, i) => (
{e.n} · {t(e.stage, lang)}

{t(e.t, lang)}

{t(e.d, lang)}

))}
{t({ id:'+ agent pendukung:', en:'+ supporting agents:'}, lang)}
{rest.map((e, i) => (
{e.n} {t(e.t, lang)} {t(e.stage, lang)}
))}
); } function EngineIcon({ type }) { // Simple geometric glyphs — squares, circles, lines. No figurative SVG. const s = { width: 40, height: 40 }; const stroke = 'var(--ink)'; const common = { fill: 'none', stroke, strokeWidth: 1.4 }; if (type === 'dna') return ( ); if (type === 'radar') return ( ); if (type === 'flow') return ( ); if (type === 'chat') return ( ); if (type === 'seed') return ( ); if (type === 'bars') return ( ); return null; } function NumbersSection() { const { lang } = React.useContext(LangCtx); const H = window.GAUNG_CONTENT.home; const nums = [ { v: H.n1, l: H.n1l }, { v: H.n2, l: H.n2l }, { v: H.n3, l: H.n3l }, { v: H.n4, l: H.n4l }, ]; return (
{t(H.numEyebrow, lang)}

{t(H.numH, lang).split(',')[0]},
{(t(H.numH, lang).split(',')[1] || '').trim()}

{nums.map((n, i) => (
{t(n.v, lang)}
{t(n.l, lang)}
))}
); } function FinalCTA({ setRoute }) { const { lang } = React.useContext(LangCtx); const H = window.GAUNG_CONTENT.home; return (
{t(H.ctaEyebrow, lang)}

{t(H.ctaH, lang).split(' dengan').length > 1 ? <>{t(H.ctaH, lang).split(' dengan')[0]} dengan{t(H.ctaH, lang).split(' dengan')[1]} : t(H.ctaH, lang).split(' on ').length > 1 ? <>{t(H.ctaH, lang).split(' on ')[0]} on{t(H.ctaH, lang).split(' on ')[1]} : t(H.ctaH, lang)}

{t(H.ctaD, lang)}

); } // ---- HOW IT WORKS page ---- Object.assign(window, { OfficeSection, MarqueeStrip, HowItWorksSection, EnginesSection, NumbersSection, FinalCTA, EngineIcon });