const { useState, useEffect, useRef } = React;
// Brand tokens
const BRAND = {
yellow: '#FDB913',
yellowDeep: '#E5A310',
navy: '#1A3638',
navyDeep: '#0F2526',
cream: '#FFFBF0',
softGray: '#F4F1EA',
line: 'rgba(26, 54, 56, 0.12)',
};
const WHATSAPP = 'https://wa.me/2347062358122';
const PHONE = '+234 706 235 8122';
// ---------- Small primitives ----------
const SunIcon = ({ size = 20, color = BRAND.yellow }) => (
{[...Array(8)].map((_, i) => {
const a = (i * Math.PI) / 4;
const x1 = 12 + Math.cos(a) * 7;
const y1 = 12 + Math.sin(a) * 7;
const x2 = 12 + Math.cos(a) * 10;
const y2 = 12 + Math.sin(a) * 10;
return ;
})}
);
const WhatsAppGlyph = ({ size = 18, color = '#fff' }) => (
);
const CheckDot = ({ color = BRAND.yellow, size = 18 }) => (
);
const Chevron = ({ open }) => (
);
// ---------- WhatsApp Button ----------
function WhatsAppButton({ label = 'Get a Free Quote on WhatsApp', large = true, block = true, tone = 'green', onClick }) {
const bg = tone === 'green' ? '#25D366' : tone === 'yellow' ? BRAND.yellow : BRAND.navy;
const fg = tone === 'yellow' ? BRAND.navy : '#fff';
return (
{ e.currentTarget.style.transform = 'translateY(-1px)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
>
{label}
);
}
// ---------- Top Bar ----------
function TopBar({ onOpenMenu }) {
return (
);
}
// ---------- Hero ----------
function Hero({ heroImage }) {
return (
{/* Image */}
{/* Gradient overlay for text legibility at bottom */}
{/* Location pill top */}
Serving Ota, Ogun State
{/* Yellow sun badge top-right */}
{/* Hero text block */}
Reliable solar power for your family & business in Ota .
Stop wasting money on fuel and noisy generators. Get 24/7 clean energy with professional installation.
{/* Trust strip */}
{[
{ n: '500+', l: 'Homes powered' },
{ n: '25yr', l: 'Panel warranty' },
{ n: '2–3yr', l: 'Payback period' },
].map((s, i) => (
))}
);
}
// ---------- About ----------
function About() {
return (
◆ The local advantage
Lighting up Nigeria, one rooftop at a time.
Based right here in Ota, Sunergy Light Services understands local energy challenges. Our mission is expert engineering, premium Tier‑1 equipment, and dedicated local support — from survey to switch‑on.
{[
{ t: 'Local', s: 'Ota-based team' },
{ t: 'Tier‑1', s: 'Premium panels only' },
{ t: 'Certified', s: 'Licensed engineers' },
{ t: 'Support', s: 'After-sales care' },
].map((c, i) => (
))}
);
}
// ---------- Packages ----------
const PACKAGES = [
{
id: 'starter',
name: 'Starter Home',
tagline: 'Essentials that stay on',
ideal: 'Lighting, fans, TV, gadget charging',
includes: ['2–4 solar panels', 'Inverter', 'Battery storage'],
benefit: 'No more darkness during blackouts.',
accent: false,
},
{
id: 'family',
name: 'Family Comfort',
tagline: 'Most chosen in Ota',
ideal: 'Fridges, freezers, water pumps, entertainment',
includes: ['6–10 solar panels', 'Hybrid inverter', 'Lithium LiFePO₄ battery'],
benefit: 'Full comfort 24/7 without "NEPA" stress.',
accent: true,
},
{
id: 'business',
name: 'Business Pro',
tagline: 'For shops, offices, industry',
ideal: 'ACs, offices, shops, industrial equipment',
includes: ['Scalable solar array', 'High-capacity battery bank', 'Remote monitoring'],
benefit: 'Zero fuel costs. Maximum productivity.',
accent: false,
},
];
function Packages() {
const [active, setActive] = useState('family');
return (
◆ Service packages
Pick the system sized for your life.
Every install includes a free site survey, load audit, and engineer walkthrough.
{/* Tabs */}
{PACKAGES.map(p => (
setActive(p.id)}
style={{
padding: '10px 6px',
border: 'none',
borderRadius: 10,
background: active === p.id ? BRAND.navy : 'transparent',
color: active === p.id ? '#fff' : BRAND.navy,
fontSize: 12,
fontWeight: 700,
cursor: 'pointer',
letterSpacing: '-0.01em',
transition: 'all 220ms ease',
}}
>
{p.name.split(' ')[0]}
))}
{/* Active card */}
);
}
function PackageCard({ pkg }) {
return (
{pkg.accent && (
<>
RECOMMENDED
{/* Decorative corner sun */}
>
)}
{pkg.tagline}
{pkg.name}
Ideal for
{pkg.ideal}
Includes
{pkg.includes.map((item, i) => (
{item}
))}
"{pkg.benefit}"
);
}
// ---------- Lithium vs Gel ----------
function BatteryCompare() {
const [tab, setTab] = useState('lithium');
const rows = [
{ label: 'Lifespan', lithium: '10+ years', gel: '~2 years', winner: 'lithium' },
{ label: 'Usable capacity', lithium: '90% discharge', gel: '50% discharge', winner: 'lithium' },
{ label: 'Charge speed', lithium: 'Fast', gel: 'Slow', winner: 'lithium' },
{ label: 'Maintenance', lithium: 'None', gel: 'Regular', winner: 'lithium' },
{ label: 'Upfront cost', lithium: 'Higher', gel: 'Lower', winner: 'gel' },
];
return (
◆ Technical expertise
Lithium vs gel. It's not close.
Stop buying batteries every 2 years. Invest once in lithium for long‑term savings.
{/* Visual bars */}
{/* Toggle */}
{['lithium', 'gel'].map(t => (
setTab(t)}
style={{
padding: '10px', border: 'none',
borderRadius: 9, cursor: 'pointer',
background: tab === t ? BRAND.navy : 'transparent',
color: tab === t ? '#fff' : BRAND.navy,
fontWeight: 700, fontSize: 13, textTransform: 'capitalize',
transition: 'all 200ms',
}}
>{t === 'lithium' ? 'Lithium LiFePO₄' : 'Gel / AGM'}
))}
{rows.map((r, i) => (
{r.label}
{tab === 'lithium' ? r.lithium : r.gel}
{r.winner === tab ? '✓ Better' : '– Worse'}
))}
);
}
function Bar({ value, max, label, sub, color, dark }) {
const [w, setW] = useState(0);
const ref = useRef(null);
useEffect(() => {
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) setW((value / max) * 100); });
}, { threshold: 0.4 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [value, max]);
return (
);
}
// ---------- Trusted Brands ----------
function TrustedBrands() {
const brands = ['Jinko Solar', 'Canadian Solar', 'Victron Energy', 'Growatt', 'Deye', 'Felicity Solar'];
return (
◆ Trusted equipment
Tier‑1 brands, straight from the manufacturer.
{brands.map(b => (
{b}
))}
Authentic equipment. Full warranties honored.
);
}
// ---------- FAQ ----------
const FAQS = [
{ q: 'Will solar work during the rainy season?', a: 'Yes. Panels generate power from daylight — not direct sun — so they still work under cloud cover. On rainy days your batteries cover the gap, and a hybrid inverter can blend solar, battery, and grid automatically.' },
{ q: 'Can I run my air conditioner on solar?', a: "Absolutely. We design special high-load systems sized for ACs, with hybrid inverters and lithium batteries that handle the surge and sustain runtime. We'll do a free load audit to size it right." },
{ q: 'What warranty do you offer?', a: 'Solar panels carry a 25-year performance warranty. Lithium batteries are covered 5–10 years depending on brand. Inverters typically 5 years. All installation work is warrantied by Sunergy directly.' },
{ q: 'Generator vs solar — which is cheaper?', a: 'A generator keeps costing you fuel, oil, servicing, and noise. A solar system pays for itself in 2–3 years. After that, your energy is effectively free for the next 20+ years.' },
{ q: 'Is there local support after installation?', a: 'Yes — we are based in Ota. Our engineers are a local call or WhatsApp message away, and most systems include remote monitoring so we can diagnose issues before you even notice them.' },
];
function FAQ() {
const [open, setOpen] = useState(0);
return (
◆ Frequently asked
Questions from real neighbors.
{FAQS.map((f, i) => {
const isOpen = open === i;
return (
setOpen(isOpen ? -1 : i)}
style={{
width: '100%', padding: '18px 18px',
border: 'none', background: 'transparent',
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
cursor: 'pointer', textAlign: 'left',
}}
>
{f.q}
);
})}
);
}
// ---------- Footer CTA + Footer ----------
function FooterCTA() {
return (
{/* Sun flourish */}
Ready for energy independence?
Join hundreds of happy families in Ota. Let's build your system today.
Sunergy Light Services · Ota, Ogun State, Nigeria
© 2026 Sunergy Light Services. All rights reserved.
);
}
// ---------- Sticky WhatsApp FAB ----------
function StickyCTA() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => {
const scrolled = window.scrollY > 500;
// Hide near bottom so it doesn't overlap the footer CTAs
const nearBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 420;
setVisible(scrolled && !nearBottom);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ---------- Main App (mobile-first) ----------
const DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "vertical",
"packageHighlight": "family",
"showStickyCTA": true,
"accentColor": "#FDB913"
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweaks] = useTweaks ? useTweaks(DEFAULTS) : [DEFAULTS, () => {}];
const heroImage = tweaks.heroVariant === 'horizontal' ? 'assets/family-horizontal.png' : 'assets/family-vertical.png';
return (
{tweaks.showStickyCTA &&
}
{window.TweaksPanel && (
setTweaks({ heroVariant: v })}
options={[{ value: 'vertical', label: 'Vertical (mobile)' }, { value: 'horizontal', label: 'Horizontal' }]}
/>
setTweaks({ showStickyCTA: v })}
/>
)}
);
}
// Mobile viewport frame: render full-bleed but max 480px for desktop-preview comfort
function MobileStage() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( );