/* ============================================================ Serabi CRM โ€” Landing page ============================================================ */ const { useState, useEffect, useRef } = React; /* Bilingual content dictionary. Each value: [id, en] */ const L = { nav: [["Fitur","Cara Kerja","Harga","FAQ"], ["Features","How it works","Pricing","FAQ"]], signIn: ["Masuk", "Sign in"], tryFree: ["Coba Gratis", "Start free"], heroBadge: ["AI sudah aktif untuk 2.400+ toko", "AI live for 2,400+ shops"], heroH1a: ["Biarkan AI yang jaga chat,", "Let AI mind the chats,"], heroH1b: ["kamu fokus", "you focus on"], heroH1c: ["jualan.", "selling."], heroSub: ["Serabi menyatukan semua chat WhatsApp bisnismu dalam satu inbox dan membalas pelanggan otomatis 24 jam dengan AI yang paham produkmu โ€” dan tahu kapan harus memanggilmu.", "Serabi brings all your business WhatsApp chats into one inbox and replies to customers 24/7 with AI that knows your products โ€” and knows when to hand over to you."], heroCta1: ["Daftar Gratis", "Sign up Free"], heroCta2: ["Explore Fitur", "Explore Features"], trust1: ["Tanpa kartu kredit", "No credit card"], trust2: ["Pasang < 1 menit", "Setup in < 1 min"], trust3: ["100.000 Token AI gratis", "100,000 free AI Tokens"], phoneName: ["Dapur Serabi Bu Imah", "Dapur Serabi Bu Imah"], phoneOnline:["online", "online"], pm1: ["Halo kak, serabi cokelat masih ready buat besok? ๐Ÿ˜Š", "Hi, is chocolate serabi available for tomorrow? ๐Ÿ˜Š"], pm2: ["Halo Kak! ๐Ÿซ Serabi Cokelat ready ya. Rp 7.000/pcs, 1 box isi 10 (Rp 70.000). Mau ambil berapa box, Kak?", "Hi! ๐Ÿซ Chocolate serabi is available. Rp 7,000/pcs, 1 box of 10 (Rp 70,000). How many boxes would you like?"], pm3: ["Ambil 3 box ya, antar pagi ๐Ÿ™", "I'll take 3 boxes, morning delivery ๐Ÿ™"], floatReply: ["Balasan AI", "AI replies"], floatTime: ["Waktu respons", "Response time"], stripLabel: ["Dipercaya UMKM kuliner & retail di seluruh Indonesia", "Trusted by F&B and retail SMEs across Indonesia"], stat1: ["2.400+", "Toko aktif", "2,400+", "Active shops"], stat2: ["78%", "Chat dijawab AI", "78%", "Chats handled by AI"], stat3: ["1,4 mnt", "Rata-rata respons", "1.4 min", "Avg. response"], stat4: ["24/7", "Selalu siaga", "24/7", "Always on"], probTag: ["Kenapa Serabi", "Why Serabi"], probH2: ["Chat numpuk, pelanggan kabur", "Piled-up chats, lost customers"], probLead: ["Setiap chat yang lambat dibalas adalah orderan yang hilang. Ini yang dihadapi pemilik toko setiap hari:", "Every slow reply is a lost order. Here's what shop owners face every day:"], prob: [ ["clock", "Telat balas, hilang order", "Pelanggan WhatsApp ingin dibalas dalam hitungan menit. Kalau telat, mereka pindah ke kompetitor.", "Slow replies lose orders", "WhatsApp customers expect replies in minutes. Reply late and they move to a competitor."], ["chat", "Pertanyaan yang itu-itu lagi", "Harga? Ready? Bisa kirim? Kamu menjawab pertanyaan yang sama puluhan kali setiap hari.", "The same questions, again", "Price? In stock? Delivery? You answer the same questions dozens of times a day."], ["megaphone", "Promo bikin nomor kena ban", "Broadcast manual ke ratusan kontak gampang bikin nomor WhatsApp-mu diblokir.", "Blasts get your number banned", "Manually broadcasting to hundreds of contacts easily gets your WhatsApp number blocked."], ], featTag: ["Fitur", "Features"], featH2: ["Semua yang toko WhatsApp-mu butuhkan", "Everything your WhatsApp shop needs"], featLead: ["Satu aplikasi untuk membalas, mengelola, dan menumbuhkan pelangganmu โ€” ditenagai AI.", "One app to reply, manage, and grow your customers โ€” powered by AI."], feat: [ ["bot","violet", "AI Auto-reply", "AI membalas pelanggan otomatis 24 jam, dengan gaya bahasa dan harga sesuai tokomu.", "AI Auto-reply", "AI replies to customers 24/7, in your tone and with your real prices."], ["chat","green", "Unified Inbox", "Semua chat dalam satu layar rapi. Pin, filter, dan nyalakan AI per percakapan.", "Unified Inbox", "Every chat in one tidy screen. Pin, filter, and toggle AI per conversation."], ["book","blue", "Knowledge Base", "Ajari AI sekali dengan FAQ atau unggah katalog โ€” AI menjawab akurat selamanya.", "Knowledge Base", "Teach the AI once with FAQs or upload your catalog โ€” accurate answers forever."], ["alert","red", "Eskalasi Pintar", "AI tahu batasnya. Saat ragu atau ada komplain, kamu langsung dinotifikasi.", "Smart Escalation", "The AI knows its limits. When unsure or facing a complaint, you're notified instantly."], ["shieldCheck","green", "Broadcast Anti-ban", "Kirim promo ke ratusan kontak dengan jeda acak & rate limit agar nomor tetap aman.", "Anti-ban Broadcast", "Send promos to hundreds with random delays & rate limits so your number stays safe."], ["home","amber", "Dashboard Analitik", "Pantau volume chat, waktu respons, dan performa AI dalam satu pandangan.", "Analytics Dashboard", "Track chat volume, response time, and AI performance at a glance."], ], show1Tag: ["AI Auto-reply", "AI Auto-reply"], show1H: ["AI yang benar-benar paham tokomu", "AI that truly understands your shop"], show1P: ["Bukan bot kaku. Serabi belajar dari katalog, harga, dan FAQ-mu, lalu membalas dengan hangat seperti kamu sendiri yang menjawab.", "Not a rigid bot. Serabi learns from your catalog, prices, and FAQs, then replies as warmly as you would yourself."], show1List: [["Jawab harga & stok dari data aslimu","Gaya bahasa bisa diatur: ramah, santai, formal","Tidak pernah mengarang harga"], ["Answers price & stock from your real data","Tone is adjustable: friendly, casual, formal","Never makes up prices"]], show2Tag: ["Eskalasi ke Manusia", "Human Handover"], show2H: ["AI tahu kapan harus memanggilmu", "The AI knows when to call you in"], show2P: ["Saat pelanggan minta nego, komplain, atau kirim foto โ€” AI berhenti dan langsung mengoper ke kamu lewat notifikasi WhatsApp. Tidak ada pelanggan penting yang terlewat.", "When a customer negotiates, complains, or sends a photo โ€” the AI pauses and hands over to you via WhatsApp notification. No important customer slips through."], show2List: [["Notifikasi instan ke nomor adminmu","Picu otomatis lewat kata kunci sensitif","Ambil alih & kembalikan ke AI kapan saja"], ["Instant alert to your admin number","Auto-trigger on sensitive keywords","Take over & hand back to AI anytime"]], howTag: ["Cara Kerja", "How it works"], howH2: ["Aktif dalam 3 langkah mudah", "Live in 3 easy steps"], howLead: ["Tanpa setup teknis. Kalau kamu bisa pakai WhatsApp, kamu bisa pakai Serabi.", "No technical setup. If you can use WhatsApp, you can use Serabi."], how: [ ["Hubungkan WhatsApp", "Scan QR sekali dari HP-mu. Nomor bisnismu tersambung dalam kurang dari semenit.", "Connect WhatsApp", "Scan a QR once from your phone. Your business number connects in under a minute."], ["Ajari AI-mu", "Isi FAQ atau unggah katalog & daftar harga. AI langsung belajar menjawab.", "Teach your AI", "Fill in FAQs or upload your catalog & price list. The AI learns to answer instantly."], ["AI mulai membalas", "AI menangani chat masuk otomatis. Kamu pantau dari dashboard & ambil alih kapan saja.", "AI starts replying", "The AI handles incoming chats automatically. You watch from the dashboard & step in anytime."], ], shieldH: ["Broadcast tanpa takut diblokir", "Broadcast without fear of bans"], shieldP: ["Proteksi anti-ban bawaan: jeda acak 8โ€“25 detik, batas kirim per jam, warmup nomor, variasi pesan (spintax), dan auto-pause saat ada anomali.", "Built-in anti-ban protection: random 8โ€“25s delays, hourly send limits, number warmup, message variation (spintax), and auto-pause on anomalies."], shieldBadges: [["Jeda acak","Rate limit per jam","Variasi spintax","Auto-pause"], ["Random delays","Hourly rate limit","Spintax variation","Auto-pause"]], shieldRingLabel: ["lebih aman", "safer"], priceTag: ["Harga", "Pricing"], priceH2: ["Gratis selama masa beta", "Free during beta"], priceLead: ["Serabi sedang uji coba. Semua paket GRATIS sekarang โ€” lengkap dengan 100.000 Token AI tiap bulan. Tanpa kartu kredit.", "Serabi is in beta. Every plan is FREE right now โ€” including 100,000 AI Tokens every month. No credit card."], perMo: ["/bln", "/mo"], freeLabel: ["GRATIS", "FREE"], betaPill: ["Selama beta", "During beta"], plans: [ ["CRM Basic", "Inbox, kontak, dashboard & broadcast.", "99.000", ["1 nomor WhatsApp","Unified inbox + media","Kontak & tahap lead","Broadcast anti-ban","Dashboard analitik"], "Coba gratis", "green", "CRM Basic", "Inbox, contacts, dashboard & broadcast.", ["1 WhatsApp number","Unified inbox + media","Contacts & lead stages","Anti-ban broadcast","Analytics dashboard"], "Try free"], ["AI Add-on", "Semua di Basic + AI auto-reply cerdas.", "149.000", ["Semua fitur CRM Basic","AI auto-reply 24/7","Knowledge base + RAG","Eskalasi ke manusia","100.000 Token AI / bulan"], "Coba gratis", "amber", "AI Add-on", "Everything in Basic + smart AI auto-reply.", ["All CRM Basic features","AI auto-reply 24/7","Knowledge base + RAG","Human escalation","100,000 AI Tokens / month"], "Try free"], ], popular: ["Gratis saat beta", "Free in beta"], priceNote: ["1 token = 1 kata. Kalau token gratis habis, top-up mulai Rp 10.000 untuk 100.000 token โ€” sampai Rp 350.000 untuk 5.000.000 token.", "1 token = 1 word. If your free tokens run out, top up from Rp 10,000 for 100,000 tokens โ€” up to Rp 350,000 for 5,000,000 tokens."], testTag: ["Testimoni", "Testimonials"], testH2: ["Dicintai pemilik toko", "Loved by shop owners"], test: [ ["Sejak pakai Serabi, chat malam hari tetap kebalas. Orderan naik hampir 30% tanpa nambah karyawan.", "Imah K.", "Dapur Serabi Bu Imah ยท Bandung", "Since using Serabi, night-time chats still get answered. Orders rose nearly 30% without hiring."], ["AI-nya jawabnya sopan banget, pelanggan kira itu admin asli. Aku jadi punya waktu buat produksi.", "Dewi L.", "Kopi Senja ยท Jakarta", "The AI replies so politely customers think it's a real admin. I finally have time for production."], ["Fitur broadcast-nya aman, nomorku gak pernah kena banned lagi. Promo gajian laku keras.", "Andi P.", "Snack Hits ID ยท Tangerang", "The broadcast is safe, my number never gets banned anymore. Payday promos sell out fast."], ], faqTag: ["FAQ", "FAQ"], faqH2: ["Pertanyaan yang sering ditanya", "Frequently asked questions"], faq: [ ["Apakah nomor WhatsApp saya aman?", "Ya. Serabi memakai protokol perangkat tertaut resmi WhatsApp โ€” sama seperti WhatsApp Web. Kami tidak menyimpan chat atau kata sandimu, dan broadcast memakai throttling anti-ban.", "Is my WhatsApp number safe?", "Yes. Serabi uses WhatsApp's official linked-device protocol โ€” just like WhatsApp Web. We never store your chats or password, and broadcasts use anti-ban throttling."], ["Apakah saya perlu keahlian teknis?", "Tidak sama sekali. Cukup scan QR, isi beberapa FAQ atau unggah katalog, dan AI langsung siap. Kalau bisa pakai WhatsApp, kamu bisa pakai Serabi.", "Do I need technical skills?", "Not at all. Just scan a QR, add a few FAQs or upload a catalog, and the AI is ready. If you can use WhatsApp, you can use Serabi."], ["Bagaimana kalau AI tidak bisa menjawab?", "AI dirancang untuk tahu batasnya. Saat ragu, ada komplain, atau pelanggan minta bicara dengan orang โ€” AI berhenti dan langsung menotifikasi kamu.", "What if the AI can't answer?", "The AI is built to know its limits. When unsure, facing a complaint, or asked for a human โ€” it pauses and notifies you instantly."], ["Apa itu Token AI?", "1 token = 1 kata. Token dipakai setiap kali AI membalas pesan (โ‰ˆ 40 token per balasan). Selama beta kamu dapat 100.000 token gratis tiap bulan, dan bisa top-up mulai Rp 10.000 untuk 100.000 token.", "What are AI Tokens?", "1 token = 1 word. Tokens are used each time the AI replies (โ‰ˆ 40 tokens per reply). During beta you get 100,000 free tokens monthly, and can top up from Rp 10,000 for 100,000 tokens."], ["Berapa biaya Serabi?", "Selama masa beta, semua paket GRATIS โ€” termasuk 100.000 Token AI tiap bulan. Tanpa kartu kredit, dan kamu bisa berhenti kapan saja.", "How much does Serabi cost?", "During beta, every plan is FREE โ€” including 100,000 AI Tokens monthly. No credit card, and you can cancel anytime."], ], finalH: ["Siap berhenti kewalahan balas chat?", "Ready to stop drowning in chats?"], finalP: ["Mulai gratis hari ini. Pasang dalam semenit, dan biarkan AI yang jaga tokomu.", "Start free today. Set up in a minute, and let AI mind your shop."], finalCta1: ["Daftar Gratis", "Sign up Free"], finalCta2: ["Hubungi kami", "Contact us"], footTagline:["CRM WhatsApp + AI untuk UMKM Indonesia. Balas lebih cepat, jualan lebih banyak, kerja lebih tenang.", "WhatsApp CRM + AI for Indonesian SMEs. Reply faster, sell more, work calmer."], footProduct:["Produk", "Product"], footCompany:["Perusahaan", "Company"], footSupport:["Bantuan", "Support"], footLinks: { product: [["Fitur"], ["Features"]], company: [["Tentang"], ["About"]], support: [["Panduan"], ["Guides"]], }, footRights: ["ยฉ 2026 Serabi. Dibuat dengan โค๏ธ untuk UMKM Indonesia.", "ยฉ 2026 Serabi. Made with โค๏ธ for Indonesian SMEs."], }; function useReveal() { useEffect(() => { const els = document.querySelectorAll(".lp-reveal"); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } function Nav({ lang, setLang, i }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", h); return () => window.removeEventListener("scroll", h); }, []); const links = L.nav[i]; const anchors = ["#fitur", "#cara-kerja", "#harga", "#faq"]; return (
{links.map((l, k) => {l})}
{L.signIn[i]} {L.tryFree[i]}
); } function Hero({ i }) { return (
{L.heroBadge[i]}

{L.heroH1a[i]}
{L.heroH1b[i]} {L.heroH1c[i]}

{L.heroSub[i]}

{L.heroCta1[i]} {L.heroCta2[i]}
{[L.trust1[i], L.trust2[i], L.trust3[i]].map((t, k) => ( {t} ))}
78%
{L.floatReply[i]}
Rina Wijaya
{L.phoneOnline[i]}
{L.pm1[i]}09:12
{L.floatReply[i]} {L.pm2[i]}09:12 โœ“โœ“
{L.pm3[i]}09:13
1,4 mnt
{L.floatTime[i]}
); } function Strip({ i }) { const stats = [L.stat1, L.stat2, L.stat3, L.stat4]; return (
{L.stripLabel[i]}
{stats.map((s, k) => ( {k > 0 && }
{s[i === 0 ? 0 : 2]}
{s[i === 0 ? 1 : 3]}
 ))}
); } function Problem({ i }) { return (
{L.probTag[i]}

{L.probH2[i]}

{L.probLead[i]}

{L.prob.map((p, k) => (

{p[i === 0 ? 1 : 3]}

{p[i === 0 ? 2 : 4]}

))}
); } function Features({ i }) { return (
{L.featTag[i]}

{L.featH2[i]}

{L.featLead[i]}

{L.feat.map((f, k) => (

{f[i === 0 ? 2 : 4]}

{f[i === 0 ? 3 : 5]}

))}
); } function Showcase({ i }) { return (
{/* Show 1 โ€” AI auto-reply */}
{L.show1Tag[i]}

{L.show1H[i]}

{L.show1P[i]}

    {L.show1List[i].map((t, k) =>
  • {t}
    • )}
Knowledge Base
{i === 0 ? "Berapa harga serabi?" : "How much is serabi?"}
{i === 0 ? "Original Rp 5.000, Cokelat Rp 7.000, Keju Rp 8.000 per pcs." : "Original Rp 5,000, Chocolate Rp 7,000, Cheese Rp 8,000 each."}
{i === 0 ? "Area pengantaran?" : "Delivery area?"}
{i === 0 ? "Bandung, Cimahi & sekitarnya. Luar kota via ekspedisi frozen." : "Bandung, Cimahi & nearby. Out-of-town via frozen courier."}
{i === 0 ? "AI menjawab dari sumber ini" : "AI answers from these sources"}
{i === 0 ? "6 FAQ ยท 3 dokumen terindeks" : "6 FAQs ยท 3 indexed documents"}
{/* Show 2 โ€” escalation */}
{L.show2Tag[i]}

{L.show2H[i]}

{L.show2P[i]}

    {L.show2List[i].map((t, k) =>
  • {t}
    • )}
Inbox ยท Pak Bambang
{i === 0 ? "200 pax, tapi saya mau nego harga. Bisa bicara sama ownernya langsung?" : "200 pax, but I want to negotiate. Can I speak to the owner directly?"}08:42
{i === 0 ? "AI dijeda โ€” perlu manusia" : "AI paused โ€” needs a human"}
{i === 0 ? "Admin dinotifikasi via WhatsApp" : "Admin notified via WhatsApp"}
{i === 0 ? "Perlu Manusia" : "Needs Human"}
); } function How({ i }) { return (
{L.howTag[i]}

{L.howH2[i]}

{L.howLead[i]}

{L.how.map((s, k) => (
{k + 1}

{s[i === 0 ? 0 : 2]}

{s[i === 0 ? 1 : 3]}

{k < 2 &&
}
))}
); } function ShieldBand({ i }) { return (
Anti-ban

{L.shieldH[i]}

{L.shieldP[i]}

{L.shieldBadges[i].map((b, k) => {b})}
99% {L.shieldRingLabel[i]}
); } function Pricing({ i }) { return (
{L.priceTag[i]}

{L.priceH2[i]}

{L.priceLead[i]}

{L.plans.map((p, k) => { const feat = k === 1; return (
{feat && {L.popular[i]}}

{p[i === 0 ? 0 : 6]}

{p[i === 0 ? 1 : 7]}
{L.freeLabel[i]} Rp {p[2]}{L.perMo[i]}
{L.betaPill[i]}
    {p[i === 0 ? 3 : 8].map((f, j) =>
  • {f}
    • )}
{p[i === 0 ? 4 : 9]}
); })}

{L.priceNote[i]}

); } function Testimonials({ i }) { return (
{L.testTag[i]}

{L.testH2[i]}

{L.test.map((t, k) => (
{Array.from({ length: 5 }).map((_, s) => )}

"{t[i === 0 ? 0 : 3]}"

{t[1]}
{t[2]}
))}
); } function FAQ({ i }) { const [open, setOpen] = useState(0); return (
{L.faqTag[i]}

{L.faqH2[i]}

{L.faq.map((f, k) => (

{f[i === 0 ? 1 : 3]}

))}
); } function FinalCTA({ i }) { return (

{L.finalH[i]}

{L.finalP[i]}

{L.finalCta1[i]} {L.finalCta2[i]}
); } function Footer({ i }) { const cols = [ [L.footProduct[i], L.footLinks.product[i]], [L.footCompany[i], L.footLinks.company[i]], [L.footSupport[i], L.footLinks.support[i]], ]; return (

{L.footTagline[i]}

{cols.map(([title, links], k) => (

{title}

{links.map((l, j) => {l})}
))}
{L.footRights[i]}
); } function Landing() { // SEO: Using semantic HTML with main landmark const [lang, setLang] = useState("id"); const i = lang === "en" ? 1 : 0; useReveal(); useEffect(() => { document.documentElement.lang = lang; }, [lang]); return (
); } ReactDOM.createRoot(document.getElementById("root")).render();