const { useState, useEffect, useRef } = React; /* ── SVG Icon Library ─────────────────────────────────────── */ const Ic = ({ name, size = 22, color = '#059669', sw = 1.9 }) => { const d = { check: <>, zap: <>, book: <>, chat: <>, refresh: <>, shield: , gear: <>, chart: <>, target: <>, trending: <>, file: <>, users: <>, dollar: <>, award: <>, clock: <>, calendar: <>, arrow: <>, star: , heart: , eye: <>, lock: <>, store: <>, profit: <>, percent: <>, cro: <>, wa: <>, instagram:<>, mail: <>, }; return ( {d[name] || null} ); }; /* ── Logo ─────────────────────────────────────────────────── */ const Logo = ({ navigate, theme = 'light' }) => (
navigate('home')} style={{ cursor: 'pointer', userSelect: 'none', display: 'flex', alignItems: 'center' }}> Ethereal Solutions
); /* ── Button ───────────────────────────────────────────────── */ const Btn = ({ children, variant = 'primary', onClick, size = 'md', href, style: extra }) => { const [hov, setHov] = useState(false); const base = { display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', border: 'none', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, borderRadius: 50, transition: 'all 0.2s ease', textDecoration: 'none', lineHeight: 1 }; const sizes = { sm: { fontSize: 13, padding: '9px 20px' }, md: { fontSize: 14, padding: '13px 28px' }, lg: { fontSize: 15, padding: '16px 36px' } }; const vars = { primary: { background: hov ? '#047857' : '#059669', color: 'white', boxShadow: hov ? '0 8px 28px rgba(5,150,105,0.45)' : '0 4px 14px rgba(5,150,105,0.3)' }, outline: { background: 'transparent', color: hov ? '#059669' : '#1e293b', border: `2px solid ${hov ? '#059669' : '#cbd5e1'}` }, white: { background: hov ? '#f0fdf4' : 'white', color: '#059669', boxShadow: hov ? '0 4px 16px rgba(0,0,0,0.12)' : '0 2px 8px rgba(0,0,0,0.08)' }, whatsapp: { background: hov ? '#1da851' : '#25d366', color: 'white', boxShadow: hov ? '0 8px 28px rgba(37,211,102,0.4)' : '0 4px 14px rgba(37,211,102,0.25)' }, calendly: { background: hov ? '#075985' : '#0369a1', color: 'white', boxShadow: hov ? '0 8px 28px rgba(3,105,161,0.4)' : '0 4px 14px rgba(3,105,161,0.25)' }, dark: { background: hov ? '#1e293b' : '#0f172a', color: 'white' }, }; const El = href ? 'a' : 'button'; return setHov(true)} onMouseLeave={() => setHov(false)} style={{ ...base, ...sizes[size], ...vars[variant], ...extra }}>{children}; }; /* ── Shared primitives ────────────────────────────────────── */ const Badge = ({ children }) => ( {children} ); const Stars = () => ( ★★★★★ ); const IcBox = ({ icon, size = 50, bg, color = '#059669' }) => (
); const SectionHeader = ({ badge, title, sub, center = true, dark }) => (
{badge &&
{badge}
}

{title}

{sub &&

{sub}

}
); /* ── Marquee ticker ───────────────────────────────────────── */ const Marquee = ({ items }) => (
{[...items, ...items].map((item, i) => ( ◆ {item} ))}
); /* ── FeatureCard ──────────────────────────────────────────── */ const FeatureCard = ({ icon, title, desc, dark, wide, tall }) => { const [hov, setHov] = useState(false); return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ background: dark ? (hov ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)') : 'white', borderRadius: 20, padding: wide ? '32px 36px' : tall ? '36px 28px' : '28px 24px', boxShadow: hov && !dark ? '0 12px 40px rgba(0,0,0,0.09)' : dark ? 'none' : '0 2px 16px rgba(0,0,0,0.05)', border: `1px solid ${dark ? 'rgba(255,255,255,0.09)' : hov ? '#a7f3d0' : '#f1f5f9'}`, transition: 'all 0.25s', transform: hov ? 'translateY(-2px)' : 'none', display: wide ? 'flex' : 'block', gap: wide ? 28 : 0, alignItems: wide ? 'center' : 'flex-start', height: '100%' }}>
{title}
{desc}
); }; /* ── Testimonial ──────────────────────────────────────────── */ const TestimonialCard = ({ name, date, country, text, title, large }) => (
{large &&
"
}
{name[0]}
{name}
{date} · {country}
{title &&
{title}
}

{text}

); /* ── GMC Status Widget ────────────────────────────────────── */ const GMCWidget = () => (
✓ Approved in 7 days
GMC Status
Approved ✓
{[['2,847','Products Listed'],['€18.2K','Monthly Revenue']].map(([v,l]) => (
{v}
{l}
))}
Compliance Score 85%
); /* ── Shopping Widget ──────────────────────────────────────── */ const ShoppingWidget = () => (
▲ +24% MoM
Google Shopping
Campaigns Active
{[['4.2×','ROAS'],['€142K','Monthly Revenue']].map(([v,l]) => (
{v}
{l}
))}
Ad Efficiency 92%
); /* ── CTA Banner ───────────────────────────────────────────── */ const CTABanner = ({ navigate }) => (

Ready to Start Selling on Google Shopping?

Join 110+ successful e-commerce businesses. No cure, no pay guarantee on every GMC service.

navigate('contact')}>Get GMC Approved Book a Free Call WhatsApp
); /* ── FAQ Accordion ────────────────────────────────────────── */ const FAQ = ({ items }) => { const [open, setOpen] = useState(null); return (
{items.map((item, i) => (
setOpen(open === i ? null : i)} style={{ border: '1px solid #e2e8f0', borderRadius: 14, marginBottom: 10, overflow: 'hidden', cursor: 'pointer' }}>
{item.q} +
{open === i &&
{item.a}
}
))}
); }; const TESTIMONIALS = [ { name: 'K.', date: '19 Aug 2025', country: 'NL', title: 'Aan de slag gegaan met Kamal en Mick...', text: 'Recent aan de slag gegaan met Kamal en Mick en ben heel tevreden. Zodra ik een vraag heb of ergens extra hulp bij nodig heb, zitten ze er direct op. Top service!' }, { name: 'Dion', date: '1 Aug 2025', country: 'NL', title: 'Ik werk nu al een tijdje met Ethereal..', text: 'Ze reageren altijd mega snel. Als er iets misgaat wordt het direct opgepakt en opgelost. Alles loopt soepel en professioneel, met een persoonlijke touch.' }, { name: 'Sam Van Es', date: '23 Jul 2025', country: 'FR', title: 'Topservice en zichtbare resultaten!', text: 'Geen stress of gedoe, en het mooiste: zichtbaar resultaat in campagnes. Snelle reacties en 100% vertrouwen.' }, ]; /* ── Nav ──────────────────────────────────────────────────── */ const Nav = ({ currentPage, navigate }) => { const [mobile, setMobile] = useState(false); const [servOpen, setServOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', fn); return () => window.removeEventListener('scroll', fn); }, []); useEffect(() => { window.scrollTo(0, 0); }, [currentPage]); const links = [ { label: 'Home', page: 'home' }, { label: 'Services', dropdown: [{ label: 'GMC Services', page: 'gmc', desc: 'Approval, recovery & monitoring' }, { label: 'Google Shopping Ads', page: 'shopping', desc: 'Profit-first media buying & scaling' }, { label: 'Insider Service', page: 'insider', desc: 'Exclusive high-end recovery' }, { label: 'Pre-Approved GMC Store', page: 'preapproved', desc: 'Ready-made stores, live in 2 days' }] }, { label: 'Results', page: 'cases' }, { label: 'Pricing', page: 'pricing' }, { label: 'About', page: 'about' }, { label: 'Partner', page: 'partner' }, ]; const lStyle = (active) => ({ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 14, color: active ? '#059669' : '#334155', padding: '8px 12px', borderRadius: 8, transition: 'color 0.15s', display: 'block' }); return ( ); }; /* ── Footer ───────────────────────────────────────────────── */ const Footer = ({ navigate }) => ( ); Object.assign(window, { Ic, IcBox, Logo, Btn, Badge, Stars, SectionHeader, Marquee, FeatureCard, TestimonialCard, GMCWidget, ShoppingWidget, CTABanner, FAQ, Nav, Footer, TESTIMONIALS });