const { Badge, Button } = window.HisabCheckAccountancyDesignSystem_95b7f0;
const SD = window.SiteData;
function fadeInDecoded(e) {
const img = e.currentTarget;
const show = () => { img.style.opacity = 1; };
if (img.decode) img.decode().then(show).catch(show); else show();
}
// Ref callback: images already loaded from the preload cache before React
// mounts never fire onLoad, so reveal them immediately.
function fadeInRef(el) {
if (el && el.complete && el.naturalWidth) el.style.opacity = 1;
}
function BrandLogo({ height = 76 }) {
return
{SOCIAL_PATHS[pathKey]}
);
}
function SocialRow({ theme = 'dark' }) {
return {SOCIAL_ORDER.map(k =>
;
}
function BrandNavbar({ activeLink }) {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const linkHref = l => l === 'FAQs' ? 'faqs.html' : (l.toLowerCase() + '.html');
return (
);
}
function BrandFooter() {
const columns = [
{ title: 'Services', links: [['Self Assessment', 'service-self-assessment.html'], ['Limited Company Accounts', 'service-limited-company-accounts.html'], ['Bookkeeping', 'service-bookkeeping.html'], ['Payroll', 'service-payroll.html'], ['VAT Returns', 'service-vat.html']] },
{ title: 'Company', links: [['About Us', 'about.html'], ['Pricing', 'pricing.html'], ['Resources', 'resources.html'], ['Contact', 'contact.html']] },
{ title: 'Legal', links: [['Privacy Policy', 'privacy.html'], ['Terms & Conditions', 'terms.html'], ['Cookie Policy', 'cookies.html']] },
];
return (
Modern, digital-first accounting for UK businesses โ remote consultations, secure document sharing and clear, upfront pricing.
Location: United Kingdom | India
{columns.map(col => (
{col.title}
{col.links.map(([label, href]) =>
{label} )}
))}
ยฉ 2026 HisabCheck Accountancy. All rights reserved.
);
}
function BrandWhatsAppButton() {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setVisible(window.scrollY > 220);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
e.currentTarget.style.background = 'var(--color-accent-green-hover)'}
onMouseLeave={e => e.currentTarget.style.background = 'var(--color-accent-green)'}>
);
}
function Field({ label, type = 'text', name, textarea, value, onChange, required }) {
const [focused, setFocused] = React.useState(false);
const filled = value && value.length > 0;
const Comp = textarea ? 'textarea' : 'input';
return (
setFocused(true)} onBlur={() => setFocused(false)}
style={{ width: '100%', padding: textarea ? '22px 16px 10px' : '20px 16px 8px', borderRadius: 'var(--radius-input)', border: `1.5px solid ${focused ? 'var(--color-accent-primary)' : 'var(--color-border)'}`, fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', color: 'var(--color-text-primary)', outline: 'none', boxShadow: focused ? 'var(--shadow-focus)' : 'none', transition: 'all var(--dur-fast) var(--ease-standard)', resize: textarea ? 'vertical' : 'none', boxSizing: 'border-box' }} />
{label}
);
}
const COUNTRY_CODES = [
{ code: 'GB', dial: '44', name: 'United Kingdom', flag: '๐ฌ๐ง' },
{ code: 'IN', dial: '91', name: 'India', flag: '๐ฎ๐ณ' },
{ code: 'US', dial: '1', name: 'United States', flag: '๐บ๐ธ' },
{ code: 'CA', dial: '1', name: 'Canada', flag: '๐จ๐ฆ' },
{ code: 'AU', dial: '61', name: 'Australia', flag: '๐ฆ๐บ' },
{ code: 'IE', dial: '353', name: 'Ireland', flag: '๐ฎ๐ช' },
{ code: 'NZ', dial: '64', name: 'New Zealand', flag: '๐ณ๐ฟ' },
{ code: 'ZA', dial: '27', name: 'South Africa', flag: '๐ฟ๐ฆ' },
{ code: 'AE', dial: '971', name: 'United Arab Emirates', flag: '๐ฆ๐ช' },
{ code: 'PK', dial: '92', name: 'Pakistan', flag: '๐ต๐ฐ' },
{ code: 'BD', dial: '880', name: 'Bangladesh', flag: '๐ง๐ฉ' },
{ code: 'DE', dial: '49', name: 'Germany', flag: '๐ฉ๐ช' },
{ code: 'FR', dial: '33', name: 'France', flag: '๐ซ๐ท' },
{ code: 'ES', dial: '34', name: 'Spain', flag: '๐ช๐ธ' },
{ code: 'IT', dial: '39', name: 'Italy', flag: '๐ฎ๐น' },
{ code: 'NL', dial: '31', name: 'Netherlands', flag: '๐ณ๐ฑ' },
{ code: 'SG', dial: '65', name: 'Singapore', flag: '๐ธ๐ฌ' },
{ code: 'AE', dial: '966', name: 'Saudi Arabia', flag: '๐ธ๐ฆ' },
{ code: 'NG', dial: '234', name: 'Nigeria', flag: '๐ณ๐ฌ' },
{ code: 'KE', dial: '254', name: 'Kenya', flag: '๐ฐ๐ช' },
];
function PhoneInput({ value, onChange, error }) {
const [country, setCountry] = React.useState(COUNTRY_CODES[0]);
const [open, setOpen] = React.useState(false);
const [query, setQuery] = React.useState('');
const wrapRef = React.useRef(null);
React.useEffect(() => {
const onDoc = e => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, []);
const national = value.replace(/^\+\d+\s*/, '');
React.useEffect(() => { if (national) onChange(`+${country.dial} ${national}`); }, [country]);
const filtered = COUNTRY_CODES.filter(c => c.name.toLowerCase().includes(query.toLowerCase()) || c.dial.includes(query));
const setNational = n => onChange(n ? `+${country.dial} ${n}` : '');
return (
setOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '0 12px', border: 'none', borderRight: '1.5px solid var(--color-border)', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', cursor: 'pointer' }}>
{country.flag} +{country.dial}
setNational(e.target.value.replace(/[^\d\s]/g, ''))} placeholder="e.g. 7123 456789" style={{ flex: 1, padding: '14px 16px', border: 'none', outline: 'none', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', minWidth: 0 }} />
{error &&
{error}
}
{open && (
{filtered.map((c, i) => (
{ setCountry(c); setOpen(false); setQuery(''); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-small)' }}
onMouseEnter={e => e.currentTarget.style.background = 'var(--color-bg-page)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{c.flag} {c.name} +{c.dial}
))}
)}
);
}
function SuccessNote({ title, description }) {
return (
โ
{title}
{description}
);
}
function BrandConsultationForm() {
const services = SD.services.map(s => s.title);
const [service, setService] = React.useState(services[0]);
const [name, setName] = React.useState('');
const [phone, setPhone] = React.useState('');
const [error, setError] = React.useState('');
const [status, setStatus] = React.useState('idle');
const submit = e => {
e.preventDefault();
if (phone.replace(/\D/g, '').length < 7) { setError('Enter a valid phone number'); return; }
setError(''); setStatus('success');
window.open(SD.brand.whatsappCtaLink, '_self');
};
if (status === 'success') return
setOpen(o => !o)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, padding: '18px 22px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-body)', fontWeight: 'var(--fw-semibold)', fontSize: 'var(--fs-body)', color: 'var(--color-text-primary)' }}>
{q}
);
}
function SearchableFAQ({ categories }) {
const [query, setQuery] = React.useState('');
const q = query.trim().toLowerCase();
const filtered = categories.map(cat => ({ ...cat, items: cat.items.filter(i => !q || i.q.toLowerCase().includes(q) || i.a.toLowerCase().includes(q)) })).filter(cat => cat.items.length);
return (
setQuery(e.target.value)} placeholder="Search questionsโฆ" style={{ width: '100%', padding: '16px 20px', borderRadius: 'var(--radius-input)', border: '1.5px solid var(--color-border)', fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', marginBottom: 48, boxSizing: 'border-box', boxShadow: 'var(--shadow-card)' }} />
{filtered.length === 0 &&
No matching questions โ try a different search term.
}
{filtered.map(cat => (
{cat.category}
{cat.items.map(item =>
))}
);
}
function CardLink({ href, children }) {
return ;
}
function BrandCTABanner({ title = 'Ready to simplify your accounting?', description = 'Book a free consultation and see how HisabCheck can help.', ctaLabel = 'Book your free call', href = 'contact.html' }) {
return (
);
}
function BrandPricingCard({ tier, price, period = '/one-off', description, features = [], featured = false, ctaLabel = 'Get started', href = 'contact.html' }) {
return (
{featured &&
Most popular }
{tier}
{price}
{period}
{description}
{features.map(f => (
โ {f}
))}
{ctaLabel}
;
}
Object.assign(window, { BrandNavbar, BrandFooter, BrandWhatsAppButton, BrandUnifiedContactForm, PageShell, BrandLogo, Field, PhoneInput, SuccessNote, CardLink, BrandCTABanner, BrandPricingCard, FeatureImage, fadeInDecoded, fadeInRef, SearchableFAQ });
