);
}
// ========== Date nav bar ==========
const toInputValue = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`;
const fromInputValue = (s) => { const [y,m,d] = s.split("-").map(Number); return new Date(y, m-1, d); };
function DateNav({ startDate, endDate, windowDays, onShift, onJumpToday, rangeLabel, isCustomRange, onApplyRange, onClearRange }) {
const [open, setOpen] = useState(false);
const [draftStart, setDraftStart] = useState(toInputValue(startDate));
const [draftEnd, setDraftEnd] = useState(toInputValue(endDate));
const popRef = useRef(null);
const labelRef = useRef(null);
// Reset drafts when popover opens or external dates change while closed
useEffect(() => {
if (open) {
setDraftStart(toInputValue(startDate));
setDraftEnd(toInputValue(endDate));
}
}, [open]); // eslint-disable-line
// Close on outside click / Esc
useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (popRef.current && !popRef.current.contains(e.target) && !labelRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
setTimeout(() => document.addEventListener("click", onDoc), 0);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); };
}, [open]);
const apply = () => {
const s = fromInputValue(draftStart);
const e = fromInputValue(draftEnd);
if (isNaN(s) || isNaN(e)) return;
if (e < s) return;
const span = Math.round((e - s) / 86400000) + 1;
if (span > 366) return;
onApplyRange(s, e);
setOpen(false);
};
const setPreset = (days) => {
const s = new Date(); s.setHours(0,0,0,0);
const e = new Date(s); e.setDate(e.getDate() + days - 1);
setDraftStart(toInputValue(s));
setDraftEnd(toInputValue(e));
};
return (
{isCustomRange && (
)}
{open && (
Set date range
Quick
{(() => {
try {
const s = fromInputValue(draftStart), e = fromInputValue(draftEnd);
if (isNaN(s) || isNaN(e) || e < s) return "—";
const n = Math.round((e - s) / 86400000) + 1;
return n > 366 ? "max 366 days" : `${n} day${n !== 1 ? "s" : ""}`;
} catch { return "—"; }
})()}
)}
);
}
// ========== Ad slot (Ezoic placeholder) ==========
// Visible only when ?ads=preview is in the URL. In production we'll swap the
// inner placeholder div for the Ezoic placeholder ID Ezoic provides after approval.
const AD_SLOTS = {
top: { w: 728, h: 90, label: "Above-fold leaderboard", note: "highest visibility" },
"rail-mid": { w: 300, h: 100, label: "Rail mid-banner", note: "native-feel small unit" },
"rail-bot": { w: 300, h: 100, label: "Rail bottom-banner", note: "low-distraction unit" },
footer: { w: 728, h: 90, label: "Footer leaderboard", note: "low impact" },
};
function AdSlot({ slot, enabled }) {
if (!enabled) return null;
const s = AD_SLOTS[slot];
return (
Advertisement
Ezoic ad · {s.label}
{s.w} × {s.h} · {s.note}
);
}
function useAdsEnabled() {
return useMemo(() => {
if (typeof window === "undefined") return false;
return new URLSearchParams(window.location.search).get("ads") === "preview";
}, []);
}
// ========== Data range banner ==========
function DataRangeBanner({ startDate, endDate, dataStart, dataEnd, onJumpToday }) {
const beforeStart = startDate < dataStart;
const afterEnd = endDate > dataEnd;
const fmt = (d) => `${MONTHS_LONG[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
let title, message;
if (afterEnd && !beforeStart) {
title = "Coming soon";
message = `Holiday data currently runs through ${fmt(dataEnd)}. We're working on the ${dataEnd.getFullYear() + 1} update — please check back soon.`;
} else if (beforeStart && !afterEnd) {
title = "Outside our data range";
message = `We don't have holiday data before ${fmt(dataStart)} yet.`;
} else {
title = "Partially outside our data range";
message = `Holiday data is available between ${fmt(dataStart)} and ${fmt(dataEnd)}. Other dates will be filled in soon.`;
}
return (
{title}
{message}
);
}
// ========== Main app ==========
function HolidayApp({ tweaks }) {
const adsEnabled = useAdsEnabled();
const [selected, setSelected] = useState(["US", "GB", "DE", "IN", "JP", "AU"]);
const [viewStart, setViewStart] = useState(null); // explicit; null means "today-aligned"
const [customRange, setCustomRange] = useState(null); // {start: Date, end: Date}; overrides preset window when set
const [scrollToDate, setScrollToDate] = useState(null);
const [popover, setPopover] = useState(null);
const windowMap = { week: 7, "2weeks": 14, month: 31, quarter: 91 };
const presetDays = windowMap[tweaks.timeWindow] || 31;
const today = useMemo(() => { const t = new Date(); t.setHours(0,0,0,0); return t; }, []);
// Default start (when viewStart is null and no customRange): always start from today
const startDate = useMemo(() => {
if (customRange) return customRange.start;
if (viewStart) return viewStart;
return today;
}, [customRange, viewStart, today]);
const windowDays = useMemo(() => {
if (customRange) return Math.max(1, Math.round((customRange.end - customRange.start) / 86400000) + 1);
return presetDays;
}, [customRange, presetDays]);
// When user changes timeWindow, reset viewStart so it re-snaps
useEffect(() => { setViewStart(null); }, [tweaks.timeWindow]);
const endDate = useMemo(() => addDays(startDate, windowDays - 1), [startDate, windowDays]);
const rangeLabel = useMemo(() => {
const sameYear = startDate.getFullYear() === endDate.getFullYear();
const sameMonth = sameYear && startDate.getMonth() === endDate.getMonth();
if (sameMonth) return `${MONTHS[startDate.getMonth()]} ${startDate.getDate()}–${endDate.getDate()}, ${startDate.getFullYear()}`;
if (sameYear) return `${MONTHS[startDate.getMonth()]} ${startDate.getDate()} – ${MONTHS[endDate.getMonth()]} ${endDate.getDate()}, ${startDate.getFullYear()}`;
return `${MONTHS[startDate.getMonth()]} ${startDate.getDate()}, ${startDate.getFullYear()} – ${MONTHS[endDate.getMonth()]} ${endDate.getDate()}, ${endDate.getFullYear()}`;
}, [startDate, endDate]);
const shiftWindow = (dir) => {
const step = Math.max(1, Math.floor(windowDays * 0.9));
if (customRange) {
setCustomRange({ start: addDays(customRange.start, dir * step), end: addDays(customRange.end, dir * step) });
} else {
setViewStart(addDays(startDate, dir * step));
}
};
const jumpToday = () => { setCustomRange(null); setViewStart(null); setScrollToDate(today); setTimeout(() => setScrollToDate(null), 400); };
const jumpTo = (d) => {
// If the date is already inside the current window, don't change the duration —
// just scroll to it and highlight. Only shift the window when the target is out of view.
const inView = d >= startDate && d <= endDate;
if (!inView) {
if (customRange) {
const span = windowDays;
const newStart = addDays(d, -Math.floor(span / 3));
setCustomRange({ start: newStart, end: addDays(newStart, span - 1) });
} else {
const newStart = addDays(d, -Math.floor(windowDays / 3));
setViewStart(newStart);
}
}
setScrollToDate(d);
setTimeout(() => setScrollToDate(null), 500);
};
const applyRange = (s, e) => { setViewStart(null); setCustomRange({ start: s, end: e }); };
const clearRange = () => setCustomRange(null);
const toggle = (code) => setSelected(s => s.includes(code) ? s.filter(x => x !== code) : [...s, code]);
const selectAll = () => setSelected(window.COUNTRIES.map(c => c.code));
const clearAll = () => setSelected([]);
const solo = (code) => setSelected([code]);
const toggleGroup = (region) => {
const codes = window.COUNTRIES.filter(c => c.region === region).map(c => c.code);
setSelected(s => {
const allOn = codes.every(code => s.includes(code));
return allOn ? s.filter(code => !codes.includes(code)) : Array.from(new Set([...s, ...codes]));
});
};
const handleHolidayClick = ({ country, date, holiday, anchor }) => {
const rect = anchor.getBoundingClientRect();
setPopover({ country, date, holiday, anchorRect: rect });
};
return (