function MainComponent() { const [currentFactIndex, setCurrentFactIndex] = React.useState(0); const [showGame, setShowGame] = React.useState(false); const [gameScore, setGameScore] = React.useState(0); const [gameActive, setGameActive] = React.useState(false); const [playerPosition, setPlayerPosition] = React.useState(50); const [fallingItems, setFallingItems] = React.useState([]); const [gameTime, setGameTime] = React.useState(30); const funFacts = [ "Our courses have a 98% satisfaction rate! ⭐", "We offer training in 15+ different industries! 🏭", "Our trainers have over 200 years of combined experience! 👨‍🏫", "Safety first - we've helped prevent countless workplace accidents! 🦺", "We provide both on-site and online training options! 💻", "Our clients range from small startups to Fortune 500 companies! 🏢", "We've delivered training in every county across Ireland! 🇮🇪", "Our courses are accredited by leading industry bodies! 🏆", "We offer flexible scheduling including evenings and weekends! ⏰", "Our training materials are updated quarterly to stay current! 📚", "We've helped over 500 companies improve their compliance! ✅", "Our average course completion rate is 96%! 🎯", "We provide multilingual training support when needed! 🌍", "Our mobile training units can reach any location in Ireland! 🚐" ]; const safeItems = [ "🦺", "⛑️", "🥽", "🧤", "👷‍♂️", "🚨", "🛡️", "🔒" ]; const dangerousItems = [ "⚡", "🔥", "☠️", "⚠️", "💀", "🧨", "☢️", "⚗️" ]; React.useEffect(()=>{ // Set the page title document.title = "Collier Training Solutions - Under Construction"; // Set favicon const favicon = document.querySelector('link[rel="icon"]') || document.createElement("link"); favicon.rel = "icon"; favicon.href = "https://ucarecdn.com/953a5792-7774-47e9-8432-f8d4fec9698b/-/format/auto/"; favicon.type = "image/png"; if (!document.querySelector('link[rel="icon"]')) { document.head.appendChild(favicon); } const interval = setInterval(()=>{ setCurrentFactIndex((prev)=>(prev + 1) % funFacts.length); }, 4000); return ()=>clearInterval(interval); }, []); // Game logic React.useEffect(()=>{ if (!gameActive) return; const gameInterval = setInterval(()=>{ setGameTime((prev)=>{ if (prev <= 1) { setGameActive(false); return 0; } return prev - 1; }); }, 1000); const spawnInterval = setInterval(()=>{ const isSafe = Math.random() > 0.3; const items = isSafe ? safeItems : dangerousItems; const newItem = { id: Date.now() + Math.random(), emoji: items[Math.floor(Math.random() * items.length)], x: Math.random() * 90, y: 0, isSafe, speed: 1 + Math.random() * 2 }; setFallingItems((prev)=>[ ...prev, newItem ]); }, 800); const moveInterval = setInterval(()=>{ setFallingItems((prev)=>prev.map((item)=>({ ...item, y: item.y + item.speed })).filter((item)=>item.y < 100)); }, 50); return ()=>{ clearInterval(gameInterval); clearInterval(spawnInterval); clearInterval(moveInterval); }; }, [ gameActive ]); // Check collisions React.useEffect(()=>{ fallingItems.forEach((item)=>{ if (item.y > 85 && item.y < 95 && Math.abs(item.x - playerPosition) < 8) { if (item.isSafe) { setGameScore((prev)=>prev + 10); } else { setGameScore((prev)=>Math.max(0, prev - 5)); } setFallingItems((prev)=>prev.filter((i)=>i.id !== item.id)); } }); }, [ fallingItems, playerPosition ]); const startGame = ()=>{ setGameActive(true); setGameScore(0); setGameTime(30); setFallingItems([]); setPlayerPosition(50); }; const movePlayer = (direction)=>{ setPlayerPosition((prev)=>{ if (direction === "left") return Math.max(5, prev - 10); if (direction === "right") return Math.min(95, prev + 10); return prev; }); }; // Keyboard controls React.useEffect(()=>{ const handleKeyPress = (e)=>{ if (!gameActive) return; if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") { movePlayer("left"); } if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") { movePlayer("right"); } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ gameActive ]); if (showGame) { return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col bg-gradient-to-br from-blue-800 via-blue-700 to-cyan-600 p-2 md:p-4 font-inter relative overflow-hidden", __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/90 rounded-xl p-3 mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGame(false), className: "bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-lg text-sm transition-colors", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "← Back"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg md:text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "Safety Catch Game"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, "Catch safe items 🦺, avoid dangers ⚡")), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold text-green-600", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, "Score: ", gameScore), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-red-600", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "Time: ", gameTime, "s"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-gradient-to-b from-sky-200 to-green-200 rounded-xl relative overflow-hidden", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, fallingItems.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "absolute text-2xl transition-all duration-75 ease-linear", style: { left: `${item.x}%`, top: `${item.y}%`, transform: "translate(-50%, -50%)" }, __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, item.emoji)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 text-3xl transition-all duration-200 ease-out", style: { left: `${playerPosition}%`, transform: "translateX(-50%)" }, __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "👷‍♂️"), !gameActive && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black/50 flex items-center justify-center", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-4 text-center", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, gameTime === 0 ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 206, columnNumber: 23 }, __self: this }, "Game Over!"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-green-600 mb-3", __source: { fileName: "", lineNumber: 209, columnNumber: 23 }, __self: this }, "Final Score: ", gameScore)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 215, columnNumber: 23 }, __self: this }, "Safety Training Game"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-3", __source: { fileName: "", lineNumber: 218, columnNumber: 23 }, __self: this }, "Use arrow keys or A/D to move")), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors", __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, gameTime === 0 ? "Play Again" : "Start Game")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-2 md:hidden", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onTouchStart: ()=>movePlayer("left"), className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold text-lg", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "← Left"), /*#__PURE__*/ React.createElement("button", { onTouchStart: ()=>movePlayer("right"), className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold text-lg", __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, "Right →")))); } return /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col bg-gradient-to-br from-green-800 via-green-700 to-emerald-600 p-2 md:p-4 font-inter relative overflow-hidden", __source: { fileName: "", lineNumber: 255, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 overflow-hidden", __source: { fileName: "", lineNumber: 257, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "floating-circle absolute top-20 left-20 w-32 h-32 bg-white/10 rounded-full", __source: { fileName: "", lineNumber: 258, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-circle absolute top-40 right-32 w-24 h-24 bg-white/5 rounded-full", style: { animationDelay: "1s" }, __source: { fileName: "", lineNumber: 259, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-circle absolute bottom-32 left-1/4 w-40 h-40 bg-white/5 rounded-full", style: { animationDelay: "2s" }, __source: { fileName: "", lineNumber: 263, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "floating-circle absolute bottom-20 right-20 w-28 h-28 bg-white/10 rounded-full", style: { animationDelay: "0.5s" }, __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center py-4", __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl md:rounded-3xl shadow-2xl p-4 md:p-8 max-w-4xl w-full text-center transform transition-all duration-500 hover:scale-105 relative z-10", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-6", __source: { fileName: "", lineNumber: 276, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-60 md:w-80 h-16 md:h-24 mx-auto flex items-center justify-center", __source: { fileName: "", lineNumber: 277, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/953a5792-7774-47e9-8432-f8d4fec9698b/-/format/auto/", alt: "Collier Training Solutions Ltd Logo", className: "max-w-full max-h-full object-contain", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-4xl md:text-6xl mb-3 md:mb-4 inline-block animate-bounce-slow", __source: { fileName: "", lineNumber: 286, columnNumber: 11 }, __self: this }, "🚧"), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-4xl font-extrabold text-gray-800 mb-3 md:mb-4 leading-tight", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, "Something Great is Coming!"), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-lg text-gray-600 mb-4 md:mb-6", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }, "We're busy building something awesome. This page is currently under construction and will be available soon."), /*#__PURE__*/ React.createElement("div", { className: "mb-4 md:mb-6", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowGame(true), className: "bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white px-6 py-3 rounded-xl font-semibold text-sm md:text-base transition-all duration-300 transform hover:scale-105 shadow-lg", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, "🎮 Play Safety Training Game")), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl md:rounded-2xl p-3 md:p-4 mb-4 md:mb-6 border-l-4 border-green-500", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm md:text-lg font-semibold text-green-800 mb-2", __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, "Did You Know?"), /*#__PURE__*/ React.createElement("div", { className: "h-12 md:h-14 flex items-center justify-center", __source: { fileName: "", lineNumber: 314, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs md:text-md text-gray-700 fact-transition px-2", key: currentFactIndex, __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }, funFacts[currentFactIndex]))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-1 mb-3 md:mb-4", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, funFacts.map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-1.5 h-1.5 md:w-2 md:h-2 rounded-full transition-all duration-300 ${index === currentFactIndex ? "bg-green-500 w-4 md:w-6" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-lg text-gray-700 mb-3 md:mb-4", __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, "Thank you for your patience!"), /*#__PURE__*/ React.createElement("div", { className: "text-xs md:text-sm text-gray-500", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this }, "Questions? Contact us at info@colliertraining.ie")))), /*#__PURE__*/ React.createElement("div", { className: "text-center py-2 md:py-4 text-white/80 text-xs md:text-sm relative z-10", __source: { fileName: "", lineNumber: 350, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 351, columnNumber: 9 }, __self: this }, "Made with ❤️ and loads of ☕ by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://chaotic-web-forge.lovable.app/", target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-yellow-300 underline transition-colors duration-300", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, "Chaos Web Design"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 364, columnNumber: 7 }, __self: this }, ` @keyframes bounce-slow { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-20px) rotate(120deg); } 66% { transform: translateY(10px) rotate(240deg); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); } 50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.6); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-bounce-slow { animation: bounce-slow 2s infinite; } .floating-circle { animation: float 6s ease-in-out infinite; } .pulse-logo { animation: pulse-glow 2s ease-in-out infinite; } .fact-transition { animation: fadeInUp 0.5s ease-out; } `)); }