// Site chrome — Header, Footer, page hero, floating CTAs, chat bubble, quote modal. // Used by every page. // === Web3Forms submission === // Each lead form posts to Web3Forms with its own access key (public/frontend-safe). // Submissions are delivered to the inbox tied to each key in the Web3Forms dashboard. const WEB3FORMS = { quote: '2567e442-f1c2-410f-b193-6964b14fc1fc', // Services/Destinations pop-up contact: 'a81167b0-fb1f-4619-8066-e5339a24b1bd', // Contact — customer enquiry partner: '9fbd34e4-135e-4337-86f8-fbd452652ec1', // Services — partner registration }; async function submitWeb3Form(accessKey, fields) { const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: accessKey, ...fields }), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.success) throw new Error(json.message || 'Submission failed'); return json; } window.WEB3FORMS = WEB3FORMS; window.submitWeb3Form = submitWeb3Form; // === hCaptcha (for forms with captcha enabled in the Web3Forms dashboard) === // Web3Forms' shared sitekey. The widget is rendered explicitly (not via auto-detect) // so it works for forms inside modals that mount after the API script loads. const HCAPTCHA_SITEKEY = '50b2fe65-b00b-4b9e-ad62-3ba471098be2'; function useHCaptcha(ref, active = true) { const widgetId = React.useRef(null); React.useEffect(() => { if (!active) return; let cancelled = false; let tries = 0; const render = () => { if (cancelled) return; const el = ref.current; if (window.hcaptcha && el && widgetId.current === null) { try { widgetId.current = window.hcaptcha.render(el, { sitekey: HCAPTCHA_SITEKEY }); } catch (e) {} return; } if (tries++ < 100) setTimeout(render, 100); // wait for the async api.js (up to ~10s) }; render(); return () => { cancelled = true; if (window.hcaptcha && widgetId.current !== null) { try { window.hcaptcha.remove(widgetId.current); } catch (e) {} widgetId.current = null; } }; }, [active]); const getToken = () => { if (window.hcaptcha && widgetId.current !== null) { try { return window.hcaptcha.getResponse(widgetId.current) || ''; } catch (e) { return ''; } } return ''; }; const reset = () => { if (window.hcaptcha && widgetId.current !== null) { try { window.hcaptcha.reset(widgetId.current); } catch (e) {} } }; return { getToken, reset }; } window.useHCaptcha = useHCaptcha; const NAV_LINKS = [ { href: 'index.html', label: 'Home' }, { href: 'about.html', label: 'About' }, { href: 'services.html', label: 'Services' }, { href: 'destinations.html', label: 'Destinations' }, { href: 'blog.html', label: 'Blog' }, { href: 'contact.html', label: 'Contact' }, ]; // === Sticky header (transparent over hero, solid white on scroll) === function Header({ active, overHero = true, onPlan }) { const bp = useBP(); const mob = bp === 'mobile'; const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Lock body scroll while the mobile menu is open React.useEffect(() => { if (menuOpen) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [menuOpen]); // Close the menu if we grow past mobile React.useEffect(() => { if (!mob) setMenuOpen(false); }, [mob]); const transparent = overHero && !scrolled && !menuOpen; const ease = 'cubic-bezier(.2,.7,.2,1)'; const hPad = mob ? (scrolled ? '10px 18px' : '14px 18px') : bp === 'tablet' ? (scrolled ? '8px 32px' : '18px 32px') : (scrolled ? '8px 56px' : '22px 56px'); return (
{!mob && ( )}
{mob && ( )}
{/* Mobile slide-down menu — kept OUTSIDE
on purpose: the header's backdrop-filter makes it a containing block for fixed descendants, which would trap this overlay inside the 72px bar instead of the viewport. */} {mob && (
{/* scrim */}
setMenuOpen(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(7,42,53,0.45)', backdropFilter: 'blur(2px)', opacity: menuOpen ? 1 : 0, transition: 'opacity .3s ease', }}/> {/* panel */}
)} ); } window.Header = Header; // === Page hero (dark image hero used by interior pages) === function PageHero({ eyebrow, title, lede, photo, height = 460 }) { const bp = useBP(); const mob = bp === 'mobile'; const h = bpv(bp, Math.max(380, Math.round(height * 0.74)), Math.round(height * 0.9), height); return (
{eyebrow && (
{eyebrow}
)}

{title}

{lede && (

{lede}

)}
); } window.PageHero = PageHero; // === Footer === function Footer() { const bp = useBP(); const mob = bp === 'mobile'; return (

Built on family, passion, and deep industry expertise. We make every trip seamless, memorable, and personal.

{[ { ico: Icon.whatsapp, href: 'https://wa.me/916238983511', label: 'WhatsApp' }, { ico: Icon.instagram, href: 'https://www.instagram.com/tripsnflys?igsh=MW9nY2RocXN1M2h4ZQ==', label: 'Instagram' }, { ico: Icon.facebook, href: 'https://www.facebook.com/share/1HoLacn1uk/?mibextid=wwXIfr', label: 'Facebook' }, ].map((s, i) => ( ))}
({ label: s.label, href: 'services.html' }))}/>
Visit us
First Floor Vattuthottam Complex
Ernakulam Road, Piravom
Ernakulam 686664, Kerala
© 2026 Trips N Flys Travel Solutions — All rights reserved.
); } window.Footer = Footer; function FooterCol({ title, items }) { const mob = useBP() === 'mobile'; return (
{title}
{items.map(i => {i.label})}
); } // === Floating CTAs (chat / call) === function FloatingCtas() { return (
); } window.FloatingCtas = FloatingCtas; function floatBtn(bg, fg) { return { width: 52, height: 52, borderRadius: '50%', border: 'none', background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', boxShadow: '0 8px 24px rgba(0,0,0,0.18)', textDecoration: 'none', }; } // === Live chat bubble === function ChatBubble({ open, onClose, accent = TNF.blueDk }) { const [msgs, setMsgs] = React.useState([ { who: 'them', text: 'Hi! I’m Anjali from Trips N Flys ✈️ How can I help plan your trip?' }, ]); const [v, setV] = React.useState(''); const send = () => { const text = InputGuard.text(v, 500).trim(); if (!text) return; setMsgs(m => [...m, { who: 'me', text }]); setV(''); setTimeout(() => setMsgs(m => [...m, { who: 'them', text: 'Lovely — let me check a few options and get back to you within an hour. Could you share your travel dates?' }]), 900); }; if (!open) return null; return (
Anjali Menon
Travel consultant · Replies in ~10 min
{msgs.map((m, i) => (
{m.text}
))}
setV(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Type a message..." maxLength={500} style={{ flex: 1, border: 'none', padding: '12px 14px', fontSize: 13, outline: 'none', background: 'transparent', fontFamily: 'inherit' }}/>
); } window.ChatBubble = ChatBubble; // === Quote modal (multi-step) === function QuoteModal({ open, onClose, accent = TNF.blueDk, initialDestination = '', initial = {} }) { const bp = useBP(); const mob = bp === 'mobile'; const [step, setStep] = React.useState(0); const [errors, setErrors] = React.useState({}); const [nudge, setNudge] = React.useState(0); const [sending, setSending] = React.useState(false); const [data, setData] = React.useState({ type: '', destination: '', from: '', to: '', adults: 2, kids: 0, budget: '', name: '', email: '', countryCode: 'IN', phone: '', }); const [notice, setNotice] = React.useState(''); // Abuse deterrents: honeypot + min fill time + max 4 submits / minute. const guard = useFormGuard('quote', { maxPerWindow: 4, windowMs: 60000, minFillMs: 1200 }); React.useEffect(() => { if (open) { guard.reset(); setNotice(''); setSending(false); // Prefill from the launching context — a destination card, or the home quick-enquiry form. setData(d => ({ ...d, destination: initialDestination || d.destination, name: initial.name || d.name, email: initial.email || d.email, countryCode: initial.countryCode || d.countryCode, phone: initial.phone || d.phone, })); } else { setTimeout(() => { setStep(0); setErrors({}); setData(d => ({ ...d, name: '', email: '', countryCode: 'IN', phone: '' })); }, 300); } }, [open, initialDestination]); // Updating a field clears any pending error on it. Sanitize by field type. const update = (k, v) => { let cv = v; if (k === 'name') cv = InputGuard.line(v, 80); else if (k === 'email') cv = InputGuard.email(v); else if (k === 'phone') cv = InputGuard.phone(v); else if (k === 'countryCode') cv = InputGuard.oneOf(v, COUNTRY_CODES.map(c => c.c), 'IN'); else if (k === 'destination') cv = InputGuard.oneOf(v, [...(window.DESTINATIONS || []).map(d => d.name), 'Multiple / not sure yet'], ''); else if (k === 'type') cv = InputGuard.oneOf(v, ['leisure', 'honeymoon', 'family', 'corporate'], ''); else if (k === 'budget') cv = InputGuard.oneOf(v, ['Under 50k', '50k – 1L', '1L – 2L', '2L – 5L', '5L+'], ''); else if (k === 'adults') cv = InputGuard.int(v, 1, 30, 1); else if (k === 'kids') cv = InputGuard.int(v, 0, 20, 0); else if (k === 'from' || k === 'to') cv = /^\d{0,4}(-\d{0,2}){0,2}$/.test(String(v)) ? v : ''; setData(d => ({ ...d, [k]: cv })); setErrors(e => { if (!e[k]) return e; const n = { ...e }; delete n[k]; return n; }); }; // Which required fields on the current step are still empty/invalid (strict checks). const missingOn = (s) => { const m = {}; if (s === 0 && !data.type) m.type = true; if (s === 1) { if (!data.destination) m.destination = true; if (!data.from) m.from = true; } if (s === 3) { if (!isFilledName(data.name)) m.name = true; if (!isEmail(data.email)) m.email = true; if (!isPhone(data.phone)) m.phone = true; } return m; }; if (!open) return null; const next = async () => { const m = missingOn(step); if (Object.keys(m).length) { setErrors(m); setNudge(n => n + 1); return; } // Final step = the actual submission → apply abuse deterrents, then send. if (step === 3) { const g = guard.evaluate(); if (!g.ok) { if (g.bot) { setErrors({}); setStep(4); return; } // honeypot → soak silently if (g.reason === 'too-fast') { setNotice('That was quick — take a moment, then send.'); setNudge(n => n + 1); return; } if (g.reason === 'rate') { setNotice(`Too many requests. Please wait ${Math.ceil((g.retryInMs || 0) / 1000)}s.`); setNudge(n => n + 1); return; } return; } setErrors({}); setNotice(''); setSending(true); const dial = (COUNTRY_CODES.find(c => c.c === data.countryCode) || {}).code || ''; try { await submitWeb3Form(WEB3FORMS.quote, { subject: `New quote request — ${data.name || 'Website visitor'}`, from_name: 'Trips N Flys Website', form_name: 'Services/Destinations Quote', trip_type: data.type, destination: data.destination, departure: data.from, return_date: data.to || '—', adults: data.adults, children: data.kids, budget_per_person: data.budget || '—', name: data.name, email: data.email, phone: `${dial} ${data.phone}`.trim(), }); } catch (err) { setSending(false); setNotice('Could not send right now. Please try again, or call/WhatsApp us.'); setNudge(n => n + 1); return; } guard.accept(); setSending(false); setErrors({}); setNotice(''); setStep(4); return; } setErrors({}); setNotice(''); setStep(s => Math.min(s + 1, 4)); }; const back = () => { setErrors({}); setNotice(''); setStep(s => Math.max(s - 1, 0)); }; const hasErr = Object.keys(errors).length > 0; return (
e.stopPropagation()}>
Plan your trip
{[0,1,2,3].map(k => (
))}
{step === 0 && (

What kind of trip are you dreaming of?

{[ { v: 'leisure', l: 'Leisure / Holiday', i: Icon.globe }, { v: 'honeymoon', l: 'Honeymoon', i: Icon.star }, { v: 'family', l: 'Family vacation', i: Icon.user }, { v: 'corporate', l: 'Corporate travel', i: Icon.briefcase }, ].map(o => ( ))}
)} {step === 1 && (

Where would you like to go?
update('from', e.target.value)} style={{ ...qInp, borderColor: errors.from ? QERR : TNF.line }}/> update('to', e.target.value)} style={qInp}/>
)} {step === 2 && (

Who's traveling, and what's the budget?

update('adults', v)} min={1}/> update('kids', v)} min={0}/>
{['Under 50k', '50k – 1L', '1L – 2L', '2L – 5L', '5L+'].map(b => ( ))}
)} {step === 3 && (

How can we reach you?

update('name', e.target.value)} placeholder="Your name" maxLength={80} autoComplete="name" style={{ ...qInp, borderColor: errors.name ? QERR : TNF.line }}/> update('email', e.target.value)} placeholder="you@email.com" maxLength={254} autoComplete="email" style={{ ...qInp, borderColor: errors.email ? QERR : TNF.line }}/>
update('countryCode', v)} triggerStyle={qInp} fixed/> update('phone', e.target.value)} placeholder="Phone number" inputMode="tel" autoComplete="tel" maxLength={24} style={{ ...qInp, flex: 1, borderColor: errors.phone ? QERR : TNF.line }}/>
)} {step === 4 && (

We’re on it, {data.name.split(' ')[0] || 'traveler'}!

A travel consultant will reach out within the next 24 business hours.

)}
{step < 4 && (
{step > 0 && }
{(notice || hasErr) && ( {notice || 'Please fill the required fields'} )}
)}
); } window.QuoteModal = QuoteModal; const qH = { fontFamily: 'var(--tnf-display)', fontSize: 24, color: TNF.ink, margin: 0, fontWeight: 500, letterSpacing: '-0.01em' }; const QERR = '#D14343'; const qInp = { width: '100%', padding: '12px 14px', border: `1px solid ${TNF.line}`, borderRadius: 10, fontSize: 14, fontFamily: 'inherit', outline: 'none', background: TNF.cream, color: TNF.ink, boxSizing: 'border-box', }; // === Country code picker (shared by the contact form + the quote pop-up) === // Lives here (loaded on every page) so both the Contact page and QuoteModal can use it. const COUNTRY_CODES = [ { c: 'IN', f: '🇮🇳', code: '+91', n: 'India' }, { c: 'AE', f: '🇦🇪', code: '+971', n: 'United Arab Emirates' }, { c: 'OM', f: '🇴🇲', code: '+968', n: 'Oman' }, { c: 'SA', f: '🇸🇦', code: '+966', n: 'Saudi Arabia' }, { c: 'QA', f: '🇶🇦', code: '+974', n: 'Qatar' }, { c: 'KW', f: '🇰🇼', code: '+965', n: 'Kuwait' }, { c: 'BH', f: '🇧🇭', code: '+973', n: 'Bahrain' }, { c: 'US', f: '🇺🇸', code: '+1', n: 'United States' }, { c: 'GB', f: '🇬🇧', code: '+44', n: 'United Kingdom' }, { c: 'CA', f: '🇨🇦', code: '+1', n: 'Canada' }, { c: 'AU', f: '🇦🇺', code: '+61', n: 'Australia' }, { c: 'SG', f: '🇸🇬', code: '+65', n: 'Singapore' }, { c: 'MY', f: '🇲🇾', code: '+60', n: 'Malaysia' }, { c: 'LK', f: '🇱🇰', code: '+94', n: 'Sri Lanka' }, { c: 'BD', f: '🇧🇩', code: '+880', n: 'Bangladesh' }, { c: 'NP', f: '🇳🇵', code: '+977', n: 'Nepal' }, { c: 'MV', f: '🇲🇻', code: '+960', n: 'Maldives' }, { c: 'DE', f: '🇩🇪', code: '+49', n: 'Germany' }, { c: 'FR', f: '🇫🇷', code: '+33', n: 'France' }, { c: 'IT', f: '🇮🇹', code: '+39', n: 'Italy' }, { c: 'ES', f: '🇪🇸', code: '+34', n: 'Spain' }, { c: 'CH', f: '🇨🇭', code: '+41', n: 'Switzerland' }, { c: 'TR', f: '🇹🇷', code: '+90', n: 'Turkey' }, { c: 'EG', f: '🇪🇬', code: '+20', n: 'Egypt' }, { c: 'ZA', f: '🇿🇦', code: '+27', n: 'South Africa' }, { c: 'TH', f: '🇹🇭', code: '+66', n: 'Thailand' }, { c: 'JP', f: '🇯🇵', code: '+81', n: 'Japan' }, { c: 'KR', f: '🇰🇷', code: '+82', n: 'South Korea' }, { c: 'ID', f: '🇮🇩', code: '+62', n: 'Indonesia' }, { c: 'PH', f: '🇵🇭', code: '+63', n: 'Philippines' }, { c: 'VN', f: '🇻🇳', code: '+84', n: 'Vietnam' }, { c: 'CN', f: '🇨🇳', code: '+86', n: 'China' }, { c: 'HK', f: '🇭🇰', code: '+852', n: 'Hong Kong' }, { c: 'PK', f: '🇵🇰', code: '+92', n: 'Pakistan' }, { c: 'NZ', f: '🇳🇿', code: '+64', n: 'New Zealand' }, { c: 'IE', f: '🇮🇪', code: '+353', n: 'Ireland' }, { c: 'NL', f: '🇳🇱', code: '+31', n: 'Netherlands' }, { c: 'BE', f: '🇧🇪', code: '+32', n: 'Belgium' }, { c: 'AT', f: '🇦🇹', code: '+43', n: 'Austria' }, { c: 'PT', f: '🇵🇹', code: '+351', n: 'Portugal' }, { c: 'GR', f: '🇬🇷', code: '+30', n: 'Greece' }, { c: 'SE', f: '🇸🇪', code: '+46', n: 'Sweden' }, { c: 'NO', f: '🇳🇴', code: '+47', n: 'Norway' }, { c: 'DK', f: '🇩🇰', code: '+45', n: 'Denmark' }, { c: 'FI', f: '🇫🇮', code: '+358', n: 'Finland' }, { c: 'PL', f: '🇵🇱', code: '+48', n: 'Poland' }, { c: 'CZ', f: '🇨🇿', code: '+420', n: 'Czechia' }, { c: 'RU', f: '🇷🇺', code: '+7', n: 'Russia' }, { c: 'JO', f: '🇯🇴', code: '+962', n: 'Jordan' }, { c: 'LB', f: '🇱🇧', code: '+961', n: 'Lebanon' }, { c: 'IL', f: '🇮🇱', code: '+972', n: 'Israel' }, { c: 'KE', f: '🇰🇪', code: '+254', n: 'Kenya' }, { c: 'TZ', f: '🇹🇿', code: '+255', n: 'Tanzania' }, { c: 'NG', f: '🇳🇬', code: '+234', n: 'Nigeria' }, { c: 'MA', f: '🇲🇦', code: '+212', n: 'Morocco' }, { c: 'MU', f: '🇲🇺', code: '+230', n: 'Mauritius' }, { c: 'BR', f: '🇧🇷', code: '+55', n: 'Brazil' }, { c: 'MX', f: '🇲🇽', code: '+52', n: 'Mexico' }, { c: 'AR', f: '🇦🇷', code: '+54', n: 'Argentina' }, { c: 'BT', f: '🇧🇹', code: '+975', n: 'Bhutan' }, ]; // Flag image — uses flagcdn.com for cross-platform rendering (Windows/Linux don't ship flag emoji) function Flag({ code, size = 22 }) { const lc = code.toLowerCase(); // Prefer a bundled resource when present (offline/standalone build); else use flagcdn. const bundled = (typeof window !== 'undefined' && window.__resources && window.__resources['flag_' + lc]) || null; const src = bundled || `https://flagcdn.com/w80/${lc}.png`; const extra = bundled ? {} : { srcSet: `https://flagcdn.com/w160/${lc}.png 2x` }; return ( {code} ); } // `triggerStyle` lets each form match its own inputs (contact = inpC / white, pop-up = qInp / cream). // `fixed` renders the dropdown viewport-anchored so it isn't clipped by the modal's scroll/overflow box. function CountryCodePicker({ value, onChange, triggerStyle, fixed = false }) { const [open, setOpen] = React.useState(false); const [q, setQ] = React.useState(''); const [coords, setCoords] = React.useState(null); const ref = React.useRef(null); const btnRef = React.useRef(null); const place = React.useCallback(() => { const el = btnRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vw = window.innerWidth, vh = window.innerHeight; const width = Math.min(320, vw - 16); const left = Math.max(8, Math.min(r.left, vw - width - 8)); const estH = 360; // search box + list, worst case const up = (vh - r.bottom) < estH && r.top > (vh - r.bottom); setCoords(up ? { left, width, bottom: vh - r.top + 6 } : { left, width, top: r.bottom + 6 }); }, []); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onEsc = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('mousedown', onDoc); document.addEventListener('keydown', onEsc); if (fixed) { window.addEventListener('scroll', place, true); // capture: catch scrolls in any container (e.g. modal body) window.addEventListener('resize', place); } return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onEsc); if (fixed) { window.removeEventListener('scroll', place, true); window.removeEventListener('resize', place); } }; }, [open, fixed, place]); const selected = COUNTRY_CODES.find(c => c.c === value) || COUNTRY_CODES[0]; const filtered = COUNTRY_CODES.filter(c => { if (!q) return true; const needle = q.toLowerCase(); return c.n.toLowerCase().includes(needle) || c.code.includes(q) || c.c.toLowerCase().includes(needle); }); const trig = triggerStyle || qInp; const panelBase = { background: '#fff', borderRadius: 14, boxShadow: '0 20px 48px rgba(11,38,48,0.2)', border: `1px solid ${TNF.lineSoft}`, zIndex: 50, overflow: 'hidden', maxWidth: '90vw', display: 'flex', flexDirection: 'column', }; const panelStyle = (fixed && coords) ? { ...panelBase, position: 'fixed', left: coords.left, width: coords.width, ...(coords.top != null ? { top: coords.top } : { bottom: coords.bottom }) } : { ...panelBase, position: 'absolute', top: 'calc(100% + 6px)', left: 0, width: 320 }; return (
{open && (
setQ(InputGuard.search(e.target.value).slice(0, 32))} maxLength={32} placeholder="Search country or code…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13, fontFamily: 'inherit', color: TNF.ink, }} />
{filtered.length === 0 && (
No match.
)} {filtered.map(c => { const isSel = c.c === value; return ( ); })}
)}
); } // Expose for other page scripts (e.g. the Contact page) — consts don't cross Babel-eval'd files. window.COUNTRY_CODES = COUNTRY_CODES; window.CountryCodePicker = CountryCodePicker; window.Flag = Flag; const qBtnGhost = { background: 'transparent', border: 'none', color: TNF.inkSoft, padding: '10px 16px', cursor: 'pointer', fontSize: 14, fontFamily: 'inherit', }; function qChoice(active, accent) { return { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10, padding: '18px 16px', borderRadius: 14, border: `1.5px solid ${active ? accent : TNF.line}`, background: active ? `${accent}10` : '#fff', color: active ? accent : TNF.ink, cursor: 'pointer', fontFamily: 'inherit', fontWeight: 500, fontSize: 14, textAlign: 'left', transition: 'all .15s', }; } function qChip(active, accent) { return { padding: '9px 16px', borderRadius: 999, minHeight: 40, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: `1.5px solid ${active ? accent : TNF.line}`, background: active ? accent : '#fff', color: active ? '#fff' : TNF.ink, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13, fontWeight: 500, }; } function Field({ label, children, required, error }) { return ( ); } function Stepper({ value, onChange, min = 0 }) { return (
{value}
); } const stepBtn = { width: 28, height: 28, borderRadius: 6, border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 18, color: TNF.blueDk, }; // === Testimonials carousel === function TestimonialCarousel({ accent = TNF.blueDk, dark = false }) { const [i, setI] = React.useState(0); const t = TESTIMONIALS[i]; React.useEffect(() => { const id = setInterval(() => setI(x => (x + 1) % TESTIMONIALS.length), 7000); return () => clearInterval(id); }, []); const fg = dark ? '#fff' : TNF.ink; const sub = dark ? 'rgba(255,255,255,0.7)' : TNF.inkSoft; return (
{Array.from({ length: t.rating }).map((_, k) => )}

“{t.quote}”

{t.name}
{t.role}
{TESTIMONIALS.map((_, k) => (
); } window.TestimonialCarousel = TestimonialCarousel; // === SiteShell — wraps every page, manages chat + quote state === function scrollToQuickEnquiry() { const el = document.getElementById('quick-enquiry'); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 70; window.scrollTo({ top, behavior: 'smooth' }); } else if (window.__openQuote) { // Interior pages have no inline enquiry form — open the quote modal instead. window.__openQuote(); } else { window.location.href = 'contact.html'; } } window.scrollToQuickEnquiry = scrollToQuickEnquiry; function SiteShell({ active, overHero = true, children }) { const [quoteOpen, setQuoteOpen] = React.useState(false); const [quoteDest, setQuoteDest] = React.useState(''); const [quoteInitial, setQuoteInitial] = React.useState({}); // expose globally so child sections can trigger them. // Accepts a destination string, or an object { destination, name, email, phone } to prefill. React.useEffect(() => { window.__openQuote = (arg) => { if (arg && typeof arg === 'object') { setQuoteDest(arg.destination || ''); setQuoteInitial(arg); } else { setQuoteDest(typeof arg === 'string' ? arg : ''); setQuoteInitial({}); } setQuoteOpen(true); }; }, []); return (
{children}
setQuoteOpen(false)}/>
); } window.SiteShell = SiteShell; // === Section heading helpers === function SectionEyebrow({ children, color = TNF.turqDk }) { return (
{children}
); } window.SectionEyebrow = SectionEyebrow; function H2({ children, style = {} }) { const bp = useBP(); const base = style.fontSize || 56; const size = bp === 'mobile' ? Math.max(28, Math.round(base * 0.56)) : bp === 'tablet' ? Math.round(base * 0.82) : base; return (

{children}

); } window.H2 = H2;