const { useState, useEffect } = React; /* ── Shared helpers ── */ const Sec = ({ id, bg = '#1A1A1A', children, py = '100px' }) => (
{children}
); const Badge = ({ text }) => (
{text}
); const ImgPlaceholder = ({ label, height = 260 }) => (
{label}
); const Stars = ({ n = 5 }) => (
{Array.from({ length: 5 }).map((_, i) => ( ))}
); /* ── Countdown Timer ── */ const Countdown = ({ ms, large = false }) => { const [left, setLeft] = useState(ms); useEffect(() => { const iv = setInterval(() => setLeft(p => Math.max(0, p - 1000)), 1000); return () => clearInterval(iv); }, []); const h = Math.floor(left / 3.6e6); const m = Math.floor((left % 3.6e6) / 6e4); const s = Math.floor((left % 6e4) / 1000); const pad = n => n.toString().padStart(2, '0'); const numSize = large ? '56px' : '36px'; const labelSize = '9px'; return (
{[[pad(h), 'HRS'], [pad(m), 'MIN'], [pad(s), 'SEC']].map(([v, l], i, arr) => (
{v}
{l}
{i < 2 && :} ))}
); }; /* ── Progress Bar ── */ const ProgressBar = ({ current, target, label }) => { const [w, setW] = useState(0); const pct = Math.min(100, (current / target) * 100); useEffect(() => { const t = setTimeout(() => setW(pct), 400); return () => clearTimeout(t); }, [pct]); return (
{label} {current} / {target}
{Math.round(pct)}% COMPLETE
); }; /* ════════════════════════════════ SECTION 2 — CHALLENGE ════════════════════════════════ */ const ChallengeSection = () => { const [ch, setCh] = useState({ bags: 127, bagsTarget: 200, boxes: 43, boxesTarget: 100 }); useEffect(() => { if (!window.SUPABASE_READY) return; (async () => { const { data } = await window.db.from('cms_settings').select('key,value') .in('key', ['challenge_72hr_current','challenge_72hr_target','challenge_30day_current','challenge_30day_target']); if (data) { const m = Object.fromEntries(data.map(r => [r.key, +r.value])); setCh({ bags: m['challenge_72hr_current']||0, bagsTarget: m['challenge_72hr_target']||200, boxes: m['challenge_30day_current']||0, boxesTarget: m['challenge_30day_target']||100 }); } })(); }, []); return (

The Street
Challenge
is LIVE

We're on a mission to move 200 packs in 72 hours. Join the movement.

TIME REMAINING
Every bag you order counts toward the challenge. Place your order and be part of the movement.
Join the challenge →
); }; /* ════════════════════════════════ SECTION 3 — PRODUCTS ════════════════════════════════ */ const ProductSection = () => (

You Remember
This.

Xiexiang Crunch Oat Chocolates — the snack that had everyone talking. Real oats. Real crunch. Real energy. Now available again in Accra, delivered straight to you.

{/* Image gallery */}
3 bags of Xiexiang Crunch Oat Chocolates Single pack — Xiexiang Crunch Oat Chocolates Oat Choco bars close-up
{/* Pricing tiers — Single / 2-pack / 3-pack (with super challenge override) */} ); const PricingTiers = () => { const [superActive, setSuperActive] = useState(window.EGGBOY_CONFIG?.business?.superChallengeActive || false); useEffect(() => { if (!window.SUPABASE_READY) return; (async () => { const { data } = await window.db.from('cms_settings').select('value').eq('key', 'super_challenge_active').maybeSingle(); if (data) setSuperActive(data.value === 'true' || data.value === '1'); })(); }, []); const c = window.EGGBOY_CONFIG?.business || {}; const single = c.pricePerBag || 40; const two = c.bundle2Price || 75; const three = superActive ? (c.bundleChallengePrice || 99) : (c.bundle3Price || 110); const threeLabel = superActive ? 'SUPER CHALLENGE' : 'EVERYDAY BUNDLE'; const tiers = [ { key:'single', img:'uploads/1-pack.jpeg', label:'SINGLE BAG', qty:1, price:single, save:0, bg:'#242424', border:'1px solid rgba(245,240,235,0.08)', desc:'One bag. Perfect to try us out.', }, { key:'double', img:'uploads/1-pack-4.jpeg', label:'GRAB 2', qty:2, price:two, save:single*2 - two, bg:'#1E1E1E', border:'1px solid rgba(232,106,0,0.18)', desc:'Pair them up. Snack now, snack later.', }, { key:'triple', img:'uploads/pack-of-3-img2.jpeg', label: threeLabel, qty:3, price:three, save:single*3 - three, bg:'#1F1000', border:'2px solid #E86A00', desc: superActive ? 'Limited-time challenge price — 3 bags GHS 99!' : 'Three bags. Stock up for the week.', featured:true, coupon: superActive ? 'STREET99' : null, }, ]; return (
{tiers.map(t => (
{t.featured &&
{superActive ? 'CHALLENGE PRICE' : 'BEST VALUE'}
} {t.label}
{t.label}
GHS {t.price}
{t.save > 0 &&
SAVE GHS {t.save}
}
{t.qty > 1 &&
{t.qty} bags · GHS {(t.price/t.qty).toFixed(0)} per bag
}
{t.desc}
{t.coupon && (
{t.coupon}
)} {t.qty === 1 ? 'Order Now' : `Grab ${t.qty} Bags`} →
))}
); }; /* ════════════════════════════════ SECTION 4 — FLASH SALE BANNER ════════════════════════════════ */ const BannerSection = () => (
); /* ════════════════════════════════ SECTION 5 — HOW IT WORKS ════════════════════════════════ */ const HowItWorksSection = () => (

How It Works

{[ ['01', 'Place Your Order', 'Order online or reserve with a GHS 10 deposit. Takes less than 2 minutes.'], ['02', 'Pay Your Way', 'Pay via MoMo, Paystack, or choose cash on delivery. Flexible for everyone.'], ['03', 'We Deliver', 'Same-day or next-day delivery across Accra. Track your order in real time.'], ].map(([num, title, desc], i) => (
0 ? '1px solid rgba(245,240,235,0.06)' : 'none', position: 'relative', }}>
{num}
{num}
{title}
{desc}
))}
); /* ════════════════════════════════ SECTION 6 — DELIVERY ZONES ════════════════════════════════ */ const DeliverySection = () => (

We Come
To You.

Covering all major zones in Accra. Same-day delivery available. WhatsApp us to confirm your area.

e.currentTarget.style.background = '#26a35a'} onMouseLeave={e => e.currentTarget.style.background = '#1E8449'} > WhatsApp to Order
{[ ['Kasoa', 'GHS 10'], ['Accra Central / Lapaz / Achimota', 'GHS 15'], ['East Legon / Spintex / Airport', 'GHS 20'], ['Outside Accra', 'GHS 40'], ].map(([zone, fee], i) => (
{zone} {fee}
))}
Free delivery available on orders above GHS 120. WhatsApp for bulk orders.
); /* ════════════════════════════════ SECTION 7 — TESTIMONIALS ════════════════════════════════ */ const TestimonialsSection = () => { const [reviews, setReviews] = useState([ { name: 'Kofi Asante', loc: 'Accra Central', stars: 5, text: 'Brother this snack is no joke. I bought 3 bags and they were gone in 2 days. The crunch is real and it\'s actually filling.' }, { name: 'Abena Mensah', loc: 'East Legon', stars: 5, text: 'Finally! I\'ve been searching for these everywhere. Delivered same day and came well-wrapped. EggBoyGH is different.' }, { name: 'Kwame Darko', loc: 'Lapaz', stars: 5, text: 'The bundle deal at GHS 99 is unbeatable. Real oats, real taste. EggBoyGH is doing big things for Accra.' }, ]); useEffect(() => { if (!window.SUPABASE_READY) return; (async () => { const { data } = await window.db.from('testimonials') .select('name,location,rating,text').eq('live', true); if (data && data.length) setReviews(data.map(r => ({ name: r.name, loc: r.location, stars: r.rating, text: r.text }))); })(); }, []); return (

What People Are Saying
About the Return

{reviews.map((r, i) => (

"{r.text}"

{r.name}
{r.loc}
))}
); }; /* ════════════════════════════════ SECTION 8 — ABOUT ════════════════════════════════ */ const AboutSection = () => (
WHY EGGBOYGH

Built for
the Hustle.

We're not just delivering snacks. We're bringing back what Ghana loved and building something bigger. EggBoyGH is Ghana's street fuel brand — affordable, energetic, and built for the hustle. Oat Chocolates today. More coming soon.

); /* ════════════════════════════════ VIDEO REVIEWS SLIDER ════════════════════════════════ */ const DEMO_VIDEOS = [ { id:1, customer_name:'Kofi Asante', location:'Lapaz', url:null, thumbnail:null }, { id:2, customer_name:'Abena Mensah', location:'East Legon', url:null, thumbnail:null }, { id:3, customer_name:'Kwame Darko', location:'Kasoa', url:null, thumbnail:null }, { id:4, customer_name:'Ama Owusu', location:'Spintex', url:null, thumbnail:null }, ]; const VideoSlider = () => { const [videos, setVideos] = useState(DEMO_VIDEOS); useEffect(() => { if (!window.SUPABASE_READY) return; (async () => { const { data } = await window.db.from('videos').select('*').eq('active', true).order('sort_order'); if (data && data.length) setVideos(data); })(); }, []); return (

They Tried It.
Now They Can't Stop.

{videos.map(v => (
{v.url ? (
))} {/* CTA card */}
Share Your Review
Tried EggBoyGH? Send us your video on WhatsApp!
WhatsApp Us
); }; Object.assign(window, { ChallengeSection, ProductSection, PricingTiers, BannerSection, HowItWorksSection, DeliverySection, TestimonialsSection, AboutSection, VideoSlider, CutoffBanner, Leaderboard, }); /* ════════════════════════════════ SAME-DAY CUTOFF BANNER ════════════════════════════════ */ function CutoffBanner() { const [ms, setMs] = useState(window.timeUntilCutoff ? window.timeUntilCutoff() : 0); useEffect(() => { const iv = setInterval(() => setMs(window.timeUntilCutoff ? window.timeUntilCutoff() : 0), 1000); return () => clearInterval(iv); }, []); if (!ms || ms <= 0) return null; const cutoffPast = new Date().getUTCHours() >= (window.EGGBOY_CONFIG?.business?.sameDayCutoffHour || 14); if (cutoffPast) return null; const h = Math.floor(ms / 3.6e6); const m = Math.floor((ms % 3.6e6) / 6e4); const s = Math.floor((ms % 6e4) / 1000); const pad = n => n.toString().padStart(2, '0'); return (
🛵 Order in {pad(h)}:{pad(m)}:{pad(s)} for same-day Accra delivery!
); } /* ════════════════════════════════ LEADERBOARD — TOP CONTRIBUTORS ════════════════════════════════ */ function Leaderboard() { const demo = [ { name:'Akua Barimah', bags:24, location:'East Legon' }, { name:'Kwame Asante', bags:18, location:'Accra Central' }, { name:'Kofi Mensah', bags:15, location:'Lapaz' }, { name:'Abena Owusu', bags:12, location:'Spintex' }, { name:'Yaw Boateng', bags:9, location:'Kasoa' }, ]; const [list, setList] = useState(demo); useEffect(() => { if (!window.SUPABASE_READY) return; (async () => { const since = new Date(); since.setDate(since.getDate() - 30); const { data } = await window.db.from('orders').select('name,zone,qty') .gte('created_at', since.toISOString()).neq('status', 'Cancelled'); if (data && data.length) { const agg = {}; data.forEach(o => { if (!agg[o.name]) agg[o.name] = { name:o.name, bags:0, location:o.zone }; agg[o.name].bags += o.qty; }); const sorted = Object.values(agg).sort((a,b) => b.bags - a.bags).slice(0,5); if (sorted.length) setList(sorted); } })(); }, []); return (

Top Buyers
This Month

Real customers driving the movement. The top 3 each month win a free bag and bragging rights.

Climb the board →
{list.map((p, i) => { const rank = i + 1; const medal = ['🥇','🥈','🥉'][i] || ''; return (
{medal || `#${rank}`}
{p.name}
{p.location.toUpperCase()}
{p.bags}
BAGS
); })}
); }