const HolyIslandCrossingWidget = () => {
            const [crossingSchedule, setCrossingSchedule] = useState([]);
            const [loading, setLoading] = useState(true);
            const [error, setError] = useState(false);

            // Dynamically calculate the UK's current offset from UTC (1 for BST, 0 for GMT)
            const getUKOffsetHours = () => {
                const now = new Date();
                const londonTime = new Date(now.toLocaleString("en-US", { timeZone: "Europe/London" }));
                const utcTime = new Date(now.toLocaleString("en-US", { timeZone: "UTC" }));
                return Math.round((londonTime - utcTime) / 3600000);
            };

            // Helper to adjust the time strings (fixes the shift from GitHub Actions UTC/BST parsing)
            const adjustTime = (timeStr, offsetHours) => {
                if (!timeStr || !timeStr.includes(':')) return timeStr;
                let [h, m] = timeStr.split(':').map(Number);
                h += offsetHours;
                if (h >= 24) h -= 24;
                if (h < 0) h += 24;
                return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
            };

            useEffect(() => {
                let isMounted = true;
                
                const fetchCrossing = async () => {
                    try {
                        // Fetching the pre-scraped data updated by the GitHub Actions workflow
                        const response = await fetch('data/holy_island.json');
                        
                        if (!response.ok) {
                            throw new Error(`Failed to load data: ${response.status}`);
                        }
                        
                        const data = await response.json();
                        
                        if (isMounted) {
                            if (data && data.length > 0) {
                                // Calculate offset dynamically based on whether it is currently BST or GMT
                                const currentOffset = -getUKOffsetHours();

                                // Adjust the times dynamically to correct the scraper's timezone shift
                                const correctedData = data.map(day => ({
                                    ...day,
                                    periods: day.periods.map(p => ({
                                        ...p,
                                        start: adjustTime(p.start, currentOffset),
                                        end: adjustTime(p.end, currentOffset)
                                    }))
                                }));
                                setCrossingSchedule(correctedData);
                            } else {
                                throw new Error("Empty crossing schedule data");
                            }
                        }
                    } catch (err) {
                        console.warn("Holy Island Fetch Error:", err.message);
                        if (isMounted) setError(true);
                    } finally {
                        if (isMounted) setLoading(false);
                    }
                };

                fetchCrossing();
                return () => { isMounted = false; };
            }, []);

            return (
                <div className="bg-slate-50 border border-slate-200 shadow-sm p-4 md:p-5 rounded-2xl flex flex-col relative overflow-hidden mt-4">
                    <div className="flex items-center text-slate-800 mb-4 z-10 justify-between">
                        <div className="flex items-center">
                            <Icon name="alertTriangle" size={18} className="mr-2 text-amber-500" />
                            <span className="text-[10px] md:text-xs font-black uppercase tracking-widest">Causeway Crossing Times</span>
                        </div>
                    </div>
                    {loading ? (
                        <div className="animate-pulse flex flex-col gap-3">
                            <div className="h-16 bg-slate-200 rounded-xl w-full flex items-center justify-center">
                                <span className="text-[10px] md:text-xs font-black uppercase tracking-widest text-slate-400">Updating Times...</span>
                            </div>
                            <div className="h-16 bg-slate-200 rounded-xl w-full"></div>
                        </div>
                    ) : error || crossingSchedule.length === 0 ? (
                        <div className="text-sm text-red-800 bg-red-50 p-4 border border-red-100 rounded-xl">
                            <p className="mb-4 font-medium">Unable to load safe crossing times automatically. Do not guess crossing times!</p>
                            <a href="https://holyislandcrossingtimes.northumberland.gov.uk/" target="_blank" rel="noopener noreferrer" className="block bg-red-600 text-white text-xs font-bold uppercase tracking-widest py-3 px-4 rounded-xl text-center hover:bg-red-700 transition-colors shadow-md">
                                Check Official Times
                            </a>
                        </div>
                    ) : (
                        <div className="flex flex-col gap-4">
                            {crossingSchedule.map((day, idx) => (
                                <div key={idx} className="bg-white rounded-xl border border-slate-100 overflow-hidden shadow-sm">
                                    <div className="bg-slate-100/50 py-2 px-4 border-b border-slate-100">
                                        <span className="font-bold text-slate-800 text-xs uppercase tracking-wider">{day.date}</span>
                                    </div>
                                    <div className="flex flex-col">
                                        {day.periods.map((p, i) => (
                                            <div key={i} className={`flex justify-between items-center px-4 py-2 border-b last:border-0 ${p.type === 'safe' ? 'bg-emerald-50 text-emerald-800 border-emerald-100' : 'bg-red-50 text-red-800 border-red-100'}`}>
                                                <div className="flex items-center w-1/3 min-w-[120px]">
                                                    {p.type === 'safe' ? <Icon name="checkCircle" size={14} className="mr-2 text-emerald-600 shrink-0"/> : <Icon name="xCircle" size={14} className="mr-2 text-red-600 shrink-0"/>}
                                                    <span className="font-black uppercase tracking-widest text-[9px]">{p.label}</span>
                                                </div>
                                                <span className="font-bold text-xs text-right w-2/3">{p.start} - {p.end}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            ))}
                            <div className="mt-2">
                                <a href="https://holyislandcrossingtimes.northumberland.gov.uk/" target="_blank" rel="noopener noreferrer" className="block w-full bg-slate-800 text-white text-[10px] font-bold uppercase tracking-widest py-3 px-4 rounded-xl text-center hover:bg-slate-900 transition-colors shadow-sm">
                                    Verify on Official Website
                                </a>
                            </div>
                        </div>
                    )}
                </div>
            );
        };