);
}
// ---- Picker modal ------------------------------------------------------
function Picker({ kind, value, onClose, onSelect, style, askSide, askMount, bothMountLayout, stateCode }) {
const isBus = kind === 'bus';
const isCategory = kind === 'category';
const items = isBus ? window.BUSES : isCategory ? window.CATEGORIES : window.STATES;
const useGrid = isBus && style === 'grid';
// Bus picker is a small wizard: grid → (body shape) → (front/rear/both) → (mount).
const [wizBus, setWizBus] = useState(null);
const [wizLook, setWizLook] = useState(null);
const [wizSide, setWizSide] = useState(null);
// For the 'both' flow, front and rear mounts are chosen independently.
const [wizFrontMount, setWizFrontMount] = useState(null);
const [wizRearMount, setWizRearMount] = useState(null);
const wizLooks = wizBus && wizBus.installPhotos && wizBus.installPhotos.looks;
const wizNeedsLook = !!(wizLooks && wizLooks.length > 1);
// Why is a mount tile blocked? If the OTHER mount on that side is available,
// it's a fitment rule ("rear must be external"). If neither is available, the
// state's compliance regime blocks it (e.g. NSW TS-150 with no specific photo).
const blockReason = (endSide, mountId) => {
const otherMount = mountId === 'internal' ? 'external' : 'internal';
if (window.mountAvailable(wizBus, wizLook, endSide, otherMount, stateCode)) {
return `Not compliant \u2014 ${endSide} must be ${otherMount}`;
}
return (window.STRICT_PHOTO_STATES || []).includes(stateCode)
? `Not road legal in ${stateCode}`
: 'Not road legal on this bus';
};
const SIDE_OPTS = [
{ id: 'front', label: 'Front' },
{ id: 'rear', label: 'Rear' },
{ id: 'both', label: 'Both' },
];
// Click a bus tile in the grid.
const pickBus = (it) => {
const looks = it.installPhotos && it.installPhotos.looks;
const hasLooks = looks && looks.length > 1;
if (hasLooks) { setWizBus(it); setWizLook(null); setWizSide(null); } // → body-shape step
else if (askSide || askMount) { setWizBus(it); setWizLook(null); setWizSide(null); } // → side / mount step
else { onSelect(it.id, null, undefined, undefined); onClose(); } // done
};
// Click a body-shape tile.
const pickLook = (lookId) => {
if (askSide || askMount) { setWizLook(lookId); } // → side step (lights) or mount step (kits)
else { onSelect(wizBus.id, lookId, undefined, undefined); onClose(); }
};
// Click a front/rear/both tile → advance to mount step.
const pickSide = (sideId) => {
setWizSide(sideId);
setWizFrontMount(null);
setWizRearMount(null);
};
// Click an internal/external tile → finish (single-side flow, incl. kits).
// Kits skip the side step, so wizSide is null — treat that as 'both'.
// Normalise a mount tile id to the mount STYLE used for product matching.
// Extra positions like 'internalRight' still match as 'internal'.
const mountStyleOf = (mountId) => (mountId && mountId.indexOf('external') === 0) ? 'external' : 'internal';
const pickMount = (mountId) => {
onSelect(wizBus.id, wizNeedsLook ? wizLook : null, wizSide || 'both', mountStyleOf(mountId));
onClose();
};
// Finish the 'both' flow with separate front + rear mounts.
const finishBoth = (fm, rm) => {
onSelect(wizBus.id, wizNeedsLook ? wizLook : null, 'both', { front: mountStyleOf(fm), rear: mountStyleOf(rm) });
onClose();
};
// Which wizard stage are we on? 'grid' | 'look' | 'side' | 'mount'
// Kits (askMount, !askSide) skip the side step and land straight on mount.
const stage = !wizBus ? 'grid'
: (wizNeedsLook && wizLook == null) ? 'look'
: (askSide && wizSide == null) ? 'side'
: 'mount';
const titles = {
bus: { t: 'Which bus?', s: 'Pick the make or chassis. We support every common Australian bus.' },
state: { t: 'Which state or territory?', s: "Different states have different compliance requirements (NSW = TS-150)." },
category: { t: 'What are you looking for?', s: 'Pick a product category. New categories are being added — let us know what you need.' },
};
const title = titles[kind];
// --- Body-shape (sub-model) step ---
if (stage === 'look') {
return (
e.stopPropagation()}>
Which model {wizBus.sentenceName || wizBus.short}?
Two body shapes fit different lights — pick the one that matches yours.
{wizLooks.map(lk => (
))}
);
}
// --- Front / rear / both step ---
if (stage === 'side') {
const goBack = () => {
if (wizNeedsLook) { setWizLook(null); } // back to body-shape
else { setWizBus(null); } // back to grid
};
return (
e.stopPropagation()}>
Lights for the front, rear or both?
Pick where you need warning lights fitted on your {wizBus.sentenceName || wizBus.short}.
{SIDE_OPTS.map(o => (
))}
);
}
// --- Internal / external mount step ---
if (stage === 'mount') {
const MOUNT_OPTS = [
{ id: 'internal', label: 'Internal', sub: 'Inside the window' },
{ id: 'external', label: 'External', sub: 'On the body' },
];
// A look's photo set may override which mount tiles appear per side (e.g.
// coaches: front internal-only, rear external-only, plus an extra internal
// mounting position). When present, only road-legal options for the current
// state are shown — non-compliant ones are hidden rather than greyed out.
const ipSet = (() => {
const ip = wizBus && wizBus.installPhotos;
if (!ip || !ip.byLook) return null;
const lk = (wizLook && ip.byLook[wizLook]) ? wizLook
: (ip.looks && ip.looks[0] && ip.looks[0].id) || Object.keys(ip.byLook)[0];
return ip.byLook[lk] || null;
})();
const customMounts = ipSet && ipSet.mountOptions;
const optsForSide = (sd) => {
if (customMounts && customMounts[sd]) {
return customMounts[sd]
.map(o => ({ ...o, mountId: o.mountId || o.id }))
.filter(o => o.showBlocked || window.mountAvailable(wizBus, wizLook, sd, o.mountId, stateCode));
}
return MOUNT_OPTS.map(o => ({ ...o, mountId: o.id }));
};
// Kits bundle front + rear, so they use the same two-mount UI as the lights
// "both" flow — the user picks a mount for the front AND the rear.
const isKitFlow = askMount && !askSide;
// --- BOTH: front + rear, each get a mount choice (lights "both" OR any kit) ---
if (wizSide === 'both' || isKitFlow) {
const layout = bothMountLayout === 'sequential' ? 'sequential' : 'combined';
// Back navigation differs: lights "both" returns to the side step; kits
// return to the body-shape step (if any) or the bus grid.
const bothBackTo = askSide
? () => setWizSide(null)
: (wizNeedsLook ? () => setWizLook(null) : () => setWizBus(null));
const bothBackLabel = askSide
? 'Front / rear / both'
: (wizNeedsLook ? 'Body shape' : 'All buses');
// A mount position is "not road legal" on a bus when its install photo is
// absent (see window.mountAvailable). Shown but disabled with a compliance
// note so the user understands why the option is unavailable.
const isBlocked = (endSide, mountId) =>
!window.mountAvailable(wizBus, wizLook, endSide, mountId, stateCode);
const MountTile = (endSide, o, selected, onClick) => {
const blocked = isBlocked(endSide, o.mountId);
return (
);
};
// TWEAK 2: front first, then rear on a separate dialog.
if (layout === 'sequential') {
const phase = wizFrontMount == null ? 'front' : 'rear';
const goBack = () => {
if (phase === 'rear') setWizFrontMount(null); // back to front choice
else bothBackTo(); // back to side / body-shape / grid
};
return (
e.stopPropagation()}>
{phase === 'front' ? 'Front — internal or external?' : 'Rear — internal or external?'}
{phase === 'front'
? 'Choose the mount for the front lights. You\u2019ll pick the rear next.'
: 'Now choose the mount for the rear lights.'}
{optsForSide(phase).map(o => MountTile(
phase,
o,
false,
() => {
if (phase === 'front') setWizFrontMount(o.id);
else finishBoth(wizFrontMount, o.id);
}
))}
);
}
// TWEAK 1: all four images on one dialog — Front and Rear side by side
// (compact tiles) so nothing needs scrolling.
const ready = wizFrontMount && wizRearMount;
return (
e.stopPropagation()}>
Internal or external mount?
Pick a mount for the front and the rear — they can differ.
Front
{optsForSide('front').map(o => MountTile('front', o, wizFrontMount === o.id, () => setWizFrontMount(o.id)))}
Rear
{optsForSide('rear').map(o => MountTile('rear', o, wizRearMount === o.id, () => setWizRearMount(o.id)))}
);
}
// --- Single side (front or rear) — lights only; kits use the both-UI above ---
const mountBackTo = () => setWizSide(null); // back to front/rear/both
const photoSide = wizSide || 'front';
return (
e.stopPropagation()}>
Internal or external mount?
Window-mounted lights sit inside the cabin; external lights fix to the body.
{/* Lights workflow. Side (front/rear/both) and mount are normally chosen in
the bus picker dialog. The inline steps below are only a fallback for
when the bus was picked before a photo-state was set (so the dialog
didn't ask). */}
{showFollowup && (!side || !mountStyle) && (
);
}
// ---- Compliance strip --------------------------------------------------
function ComplianceStrip() {
const stats = [
{ num: '1900', unit: 'cd', label: 'Peak brightness from our flood-light LED core module' },
{ num: '12–24', unit: 'V', label: 'Works on every 12V or 24V Australian bus electrical system' },
{ num: '8', unit: 'states', label: 'Compliance covered across every Australian state and territory' },
{ num: 'TS-150', unit: '', label: 'NSW-compliant variants with the regulation 70mm black surround' },
];
return (
100 series
Built for every Australian school bus.
A comprehensive selection of school-bus warning lights designed to meet the requirements of all Australian states and territories. Universal and custom-made fitting options for every common chassis in the Australian market.
{stats.map((s, i) => (
{s.num} {s.unit}
{s.label}
))}
);
}
// ---- Footer ------------------------------------------------------------
function Footer() {
return (
);
}
// ---- Cart toast --------------------------------------------------------
function Toast({ msg, onDone }) {
useEffect(() => {
if (!msg) return;
const t = setTimeout(onDone, 1800);
return () => clearTimeout(t);
}, [msg, onDone]);
if (!msg) return null;
return
✓ {msg}
;
}
// ---- Cycling word in the hero headline --------------------------------
const CYCLE_WORDS = ['light', 'light kit', 'sticker', 'CCTV', 'child check'];
function CycleWord() {
const [i, setI] = useState(0);
useEffect(() => {
const id = setInterval(() => setI(v => (v + 1) % CYCLE_WORDS.length), 2000);
return () => clearInterval(id);
}, []);
return (
{CYCLE_WORDS.map((w, idx) => (
{w}
))}
{CYCLE_WORDS.reduce((a, b) => b.length > a.length ? b : a)}
);
}
// ---- Main App ----------------------------------------------------------
const PALETTE_OPTIONS = [
{ id: 'classic', colors: ['#FFC72C', '#0A0A0A', '#F5F2EA'] },
{ id: 'hivis', colors: ['#F5D300', '#FF4D00', '#0A0A0A'] },
{ id: 'mono', colors: ['#0A0A0A', '#F2F1ED', '#FFC72C'] },
{ id: 'night', colors: ['#0B0C0E', '#FFC72C', '#FF8A00'] },
];
function App() {
const [t, setT] = useTweaks(TWEAK_DEFAULTS);
// Push kit-display strategy into the global so matchProducts() picks it up
// everywhere (selectors, results, count pills).
useEffect(() => {
window.__kitStrategy = t.kitStrategy || 'all';
}, [t.kitStrategy]);
// Apply palette
useEffect(() => {
document.documentElement.setAttribute('data-palette', t.palette);
}, [t.palette]);
// Apply theme (signature / modern / editorial)
useEffect(() => {
document.documentElement.setAttribute('data-theme', t.theme || 'signature');
}, [t.theme]);
// Selector state — geo-guess default
const initialGuess = useMemo(() => window.guessState(), []);
const [stateCode, setStateCode] = useState(initialGuess.code);
const [busId, setBusId] = useState(null);
const [categoryId, setCategoryId] = useState('lights'); // sensible default — every existing SKU is in 'lights'
const [picker, setPicker] = useState(null); // 'bus' | 'state' | 'category' | null
const [cart, setCart] = useState([]);
const [toast, setToast] = useState(null);
const [geoConfident, setGeoConfident] = useState(initialGuess.confident);
const [side, setSide] = useState(null); // 'front' | 'rear' (lights only)
const [mountStyle, setMountStyle] = useState(null); // 'internal' | 'external' (lights only)
const [rearMountStyle, setRearMountStyle] = useState(null); // rear mount when side==='both' & differs
const [showAlso, setShowAlso] = useState(true); // "Also compatible" section expanded
// Curate mode (hidden admin). Opens via #curate hash or the Tweaks button.
const [curateOpen, setCurateOpen] = useState(() => (typeof location !== 'undefined' && location.hash.indexOf('curate') >= 0));
const [curationVersion, setCurationVersion] = useState(0);
useEffect(() => {
const onHash = () => setCurateOpen(location.hash.indexOf('curate') >= 0);
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
const [look, setLook] = useState(null); // 'new' | 'old' (Rosa/Coaster look)
// Reset the full lights sub-flow when the category changes (a different product
// type). Body shape, side and mount are chosen inside the bus picker and set
// alongside busId, so we must NOT clear them on busId/side change or we'd
// clobber the dialog's choices.
useEffect(() => { setLook(null); setSide(null); setMountStyle(null); setRearMountStyle(null); }, [categoryId]);
// Inline fallback: picking a side clears any stale mount choice.
const chooseSide = useCallback((v) => { setSide(v); setMountStyle(null); setRearMountStyle(null); }, []);
const addToCart = useCallback((sku) => {
setCart(c => c.includes(sku) ? c : [...c, sku]);
setToast(`Added ${sku} to cart`);
}, []);
const matches = useMemo(() => {
if (!busId || !stateCode || !categoryId) return [];
let opts = {};
if (categoryId === 'lights') {
const mountForFilter = (side === 'both' && rearMountStyle && rearMountStyle !== mountStyle)
? null : mountStyle;
opts = { side, mountStyle: mountForFilter };
} else if (categoryId === 'kit') {
// Kits: front mount = mountStyle, rear mount = rearMountStyle → kit variant.
opts = { side: 'both', kitMount: window.kitMountKey(mountStyle, rearMountStyle) };
}
return window.matchProducts(busId, stateCode, categoryId, opts);
// t.kitStrategy is read inside matchProducts via window.__kitStrategy
}, [busId, stateCode, categoryId, side, mountStyle, rearMountStyle, t.kitStrategy, curationVersion]);
// Smooth scroll: for the lights flow, the user still has front/rear + mount
// Robust scroll helper. Uses setTimeout-based retries (NOT requestAnimationFrame,
// which is paused when the tab is backgrounded). Polls a few times so the scroll
// survives the modal unmount + any late re-render, and re-fires if the target
// moved. Plain timers fire regardless of tab visibility.
// Scroll the given element into view. Uses an instant scroll inside a short
// setTimeout (both fire reliably regardless of tab visibility, unlike
// requestAnimationFrame / behavior:'smooth' which are paused in background
// tabs). Retries a few times in case the target hasn't rendered yet.
const scrollToEl = useCallback((getEl, offset) => {
let tries = 0;
const attempt = () => {
const el = getEl();
if (el) {
const top = Math.max(0, el.getBoundingClientRect().top + window.scrollY - offset);
window.scrollTo(0, top);
} else if (tries < 6) {
tries++;
setTimeout(attempt, 80);
}
};
setTimeout(attempt, 60);
}, []);
// Scroll behaviour for the lights flow. The visual follow-up only exists in
// supported states (PHOTO_LIGHTS_STATES); elsewhere we go straight to results.
const photoFlow = categoryId === 'lights' && stateCode && window.PHOTO_LIGHTS_STATES.includes(stateCode);
// bus + state chosen → scroll to the follow-up (front/rear) for the
// photo flow, otherwise jump straight to results.
useEffect(() => {
if (!busId || !stateCode) return;
if (photoFlow) {
scrollToEl(() => document.querySelector('.followup'), 90);
} else {
scrollToEl(() => document.getElementById('results'), 70);
}
}, [busId, stateCode, categoryId, photoFlow, scrollToEl]);
// After picking front/rear, glide down to the mount step (only renders once side is set).
useEffect(() => {
if (photoFlow && busId && stateCode && side && !mountStyle) {
scrollToEl(() => {
const steps = document.querySelectorAll('.followup__step');
return steps[steps.length - 1];
}, 90);
}
}, [side, mountStyle, photoFlow, busId, stateCode, scrollToEl]);
// Once the lights flow is fully specified (side + mount), glide to results.
useEffect(() => {
if (photoFlow && busId && stateCode && side && mountStyle) {
scrollToEl(() => document.getElementById('results'), 70);
}
}, [side, mountStyle, photoFlow, busId, stateCode, scrollToEl]);
const heroLayout = t.heroLayout || 'inline';
return (
{/* HERO */}
100 Series · LED School-Bus Lights12V – 24VAll states
The right for your school bus. In 60 seconds.
SafeBus 100 series school-bus warning lights — engineered for every common Australian chassis and every state's compliance regime. Tell us what you drive and where you're registered.
Heads up on photo mapping: the "installed on real buses" thumbnails under each product are my best guess based on filenames + visible details (chassis, NSW surround, mount position). Some installs above could swap to a different SKU — let me know which photos belong to which product and I'll re-map.
When the user picks Both: “All 4” shows front + rear mount photos on one dialog; “Front then rear” asks the front mount first, then the rear on a second dialog.
setT('kitStrategy', v)}
options={[
{ value: 'all', label: '(a) All — every state-and-bus variant' },
{ value: 'collapse', label: '(b) Collapse — one card per bus / mount, state picked auto' },
{ value: 'top3', label: '(c) Top 3 — cap at the three most relevant' },
]}
/>
