/* ============================================================ Gaung AI — Shared Components ============================================================ */ const { useState, useEffect, useMemo, useRef } = React; // ---- Language context ------------------------------------ const LangCtx = React.createContext({ lang: 'id', setLang: () => {} }); function t(entry, lang) { if (!entry) return ''; if (typeof entry === 'string') return entry; return entry[lang] || entry.id || ''; } // ---- Logo ------------------------------------------------ function Logo() { return ( GAUNG .ai ); } // ---- Nav ------------------------------------------------- function Nav({ route, setRoute }) { const { lang, setLang } = React.useContext(LangCtx); const C = window.GAUNG_CONTENT.nav; const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 6); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ ['home', C.home], ['how', C.how], ['services', C.services], ['cases', C.cases], ['pricing', C.pricing], ['blog', C.blog], ['contact', C.contact], ]; return ( ); } // ---- Footer ---------------------------------------------- function Footer({ setRoute }) { const { lang } = React.useContext(LangCtx); const F = window.GAUNG_CONTENT.footer; const N = window.GAUNG_CONTENT.nav; return ( ); } // ---- Placeholder image ----------------------------------- function Placeholder({ label, ratio = '4 / 3', style }) { return (
{label}
); } // ---- Hero (with variants) -------------------------------- function Hero({ variant, setRoute }) { const { lang } = React.useContext(LangCtx); const H = window.GAUNG_CONTENT.home; const headlines = { A: (

{t(H.heroA1, lang)}
{t(H.heroA2, lang)}{' '} {t(H.heroA3, lang)}

), B: (

{t(H.heroB1, lang)}
{t(H.heroB2, lang)}{' '} {t(H.heroB3, lang)}

), C: (

{t(H.heroC1, lang)}{' '} {t(H.heroC2, lang)}
{t(H.heroC3, lang)}

), }; return (
{t({id:'BARU',en:'NEW'}, lang)} {t(H.badge, lang)}
{headlines[variant] || headlines.A}

{t(H.heroSub, lang)}

{e.preventDefault();setRoute('contact')}}> {t(H.ctaPrimary, lang)} → {e.preventDefault();setRoute('how')}}> {t(H.ctaSecondary, lang)}
{t(H.subHero1, lang)} {t(H.subHero2, lang)} {t(H.subHero3, lang)}
{/* Hero visual - dashboard mock */}
); } // ---- Hero dashboard mock -------------------------------- function HeroDashMock() { const { lang } = React.useContext(LangCtx); return (
{/* top chrome */}
app.gaung.app/dashboard
LIVE {t({id:'Sinkron 12 dtk lalu', en:'Synced 12s ago'}, lang)}
{/* KPI row */}
{[ { l: t({id:'Lead masuk', en:'Leads in'}, lang), v:'2,847', d:'+12.4%' }, { l: t({id:'Balasan WA', en:'WA replies'}, lang), v:'968', d:'+38%' }, { l: t({id:'Meeting ter-booking', en:'Meetings booked'}, lang), v:'142', d:'+24%' }, { l: t({id:'Pipeline value', en:'Pipeline value'}, lang), v:'IDR 4.2B', d:'+19%' }, ].map((k,i) => (
{k.l}
{k.v}
↑ {k.d}
))}
{/* chart zone */}
{t({id:'Lead flow 30 hari', en:'Lead flow, 30 days'}, lang)}
{t({id:'WhatsApp + Email', en:'WhatsApp + Email'}, lang)}
WA Email
{/* Live conversation feed */}
{t({id:'Conversation Engine', en:'Conversation Engine'}, lang)}
{[ { n:'Budi S.', msg: t({id:'Berapa harga paket enterprise?', en:'Price for enterprise tier?'}, lang), tag:'hot' }, { n:'Rina K.', msg: t({id:'Bisa demo minggu ini?', en:'Can we demo this week?'}, lang), tag:'hot' }, { n:'PT Merdeka', msg: t({id:'Kirim proposal', en:'Send proposal'}, lang), tag:'warm' }, ].map((c,i)=> (
{c.n[0]}
{c.n} {c.tag}
{c.msg}
))}
); } Object.assign(window, { LangCtx, t, Logo, Nav, Footer, Placeholder, Hero, HeroDashMock });