function AnimatedFooter() { return /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-[#7CB342] text-white py-4 px-6 shadow-lg z-10", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "© 2025 AutisticAudio. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-sm hover:text-[#F5F9E9] transition-colors duration-200", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-sm hover:text-[#F5F9E9] transition-colors duration-200", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Contact")))); } function AnimatedFooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F5F9E9] relative pb-24", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#7CB342] mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Page Content"), /*#__PURE__*/ React.createElement("p", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Some content above the footer...")), /*#__PURE__*/ React.createElement(AnimatedFooter, { __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function BackToHomeButton() { return /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center px-4 py-2 bg-[#7CB342] text-white rounded-lg hover:bg-[#558B2F] transition-colors duration-200 shadow-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "←"), "Back to Home"); } function BackToHomeButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4 bg-[#F5F9E9]", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BackToHomeButton, { __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function AnimatedHeader({ title, subtitle, className = "" }) { return /*#__PURE__*/ React.createElement("header", { className: `text-center py-8 ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-[#7CB342] opacity-0 animate-fade-in", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-[#64B5F6] mt-4 opacity-0 animate-fade-in-delayed", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, subtitle), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; } .animate-fade-in-delayed { animation: fadeIn 0.8s ease-out 0.3s forwards; } `)); } function AnimatedHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F9E9] p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Welcome to AutisticAudio", subtitle: "Learn and communicate through sound", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Getting Started", subtitle: "Your journey begins here", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedHeader, { title: "Explore Activities", subtitle: "Fun and interactive learning", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }))); } function MainComponent() { const fileInputRef = React.useRef(null); const [synth, setSynth] = React.useState(null); const [speaking, setSpeaking] = React.useState(false); const [popupCard, setPopupCard] = React.useState(null); const [placedLetters, setPlacedLetters] = React.useState([]); const [selectedLetter, setSelectedLetter] = React.useState(null); const [currentLetterIndex, setCurrentLetterIndex] = React.useState(0); const [wordLetters, setWordLetters] = React.useState([]); const [showCelebration, setShowCelebration] = React.useState(false); const [uploadError, setUploadError] = React.useState(null); const [isUploading, setIsUploading] = React.useState(false); const [newFoodLabel, setNewFoodLabel] = React.useState(""); const [foodItems, setFoodItems] = React.useState([]); const [isLoading, setIsLoading] = React.useState(true); const MAX_FILE_SIZE = 1024 * 1024; React.useEffect(()=>{ if (typeof window !== "undefined") { setSynth(window.speechSynthesis); } }, []); React.useEffect(()=>{ loadFoodItems(); }, []); const speak = (text)=>{ if (!synth) return; const utterance = new SpeechSynthesisUtterance(text); const voices = synth.getVoices(); const samantha = voices.find((v)=>v.name === "Samantha"); if (samantha) utterance.voice = samantha; utterance.rate = 0.85; utterance.pitch = 1.1; utterance.onstart = ()=>setSpeaking(true); utterance.onend = ()=>setSpeaking(false); utterance.onerror = ()=>setSpeaking(false); synth.cancel(); synth.speak(utterance); }; const defaultCards = [ { id: "default_1", image: "https://ucarecdn.com/3c2a56f5-9ff5-42a8-9934-2c54c62a3958/", label: "bananas" }, { id: "default_2", image: "https://ucarecdn.com/48e9fe2f-135a-4fbb-9e7b-4e33014a9928/", label: "pancakes" }, { id: "default_3", image: "https://ucarecdn.com/87fbaad4-83af-4530-95e6-64ca90a93cea/", label: "drink" }, { id: "default_4", image: "https://ucarecdn.com/9b3aa3a9-bcfc-4860-ba5e-39546ada1a9c/", label: "apple" }, { id: "default_5", image: "https://ucarecdn.com/60b100e4-b13d-4aa7-98f8-91c1b7b13bf6/", label: "chocolate" }, { id: "default_6", image: "https://ucarecdn.com/e5cc9a2e-1a40-409a-b436-9af9af6a9e9a/", label: "cheeseburger" }, { id: "default_7", image: "https://ucarecdn.com/8002dd29-9862-48ff-99c8-bc24aa0cd80c/", label: "pizza" }, { id: "default_8", image: "https://ucarecdn.com/5bb5083e-682e-44a1-af3f-883bd58f21f7/", label: "ice-cream" }, { id: "default_9", image: "https://ucarecdn.com/736d64b9-2c4a-41cb-888f-16d8914dcab1/-/format/auto/", label: "beans" }, { id: "default_10", image: "https://ucarecdn.com/c41fc61e-7248-4538-a18b-f3635d5c6b3b/", label: "broccoli" }, { id: "default_11", image: "https://ucarecdn.com/8b4a0dcf-99e0-4729-b847-9ad829df6dc8/", label: "spaghetti" }, { id: "default_12", image: "https://ucarecdn.com/b4b83f46-6c00-4b30-950b-1d431de2ffe7/", label: "chips" } ]; const handleCardClick = (card)=>{ setPopupCard(card); const word = card.label.replace(/[^a-zA-Z]/g, "").toLowerCase(); setWordLetters(word.split("")); setPlacedLetters(Array(word.length).fill(null)); setCurrentLetterIndex(0); setSelectedLetter(null); setShowCelebration(false); }; const closePopup = ()=>setPopupCard(null); const handleKeyboardLetterClick = (letter, e)=>{ e.stopPropagation(); const expected = wordLetters[currentLetterIndex]; if (letter === expected) { const updated = [ ...placedLetters ]; updated[currentLetterIndex] = letter; setPlacedLetters(updated); const next = currentLetterIndex + 1; setCurrentLetterIndex(next); scrollToLetter(next); if (next === wordLetters.length) setShowCelebration(true); } setSelectedLetter(letter === selectedLetter ? null : letter); }; const scrollToLetter = (idx)=>{ setTimeout(()=>{ const container = document.querySelector(".letter-container"); const boxes = document.querySelectorAll(".letter-box"); if (boxes[idx] && container) { const pos = boxes[idx].offsetLeft - container.offsetWidth / 2 + boxes[idx].offsetWidth / 2; container.scrollTo({ left: pos, behavior: "smooth" }); } }, 50); }; const keyboardRows = [ [ "a", "b", "c", "d", "e" ], [ "f", "g", "h", "i", "j" ], [ "k", "l", "m", "n", "o" ], [ "p", "q", "r", "s", "t" ], [ "u", "v", "w", "x", "y" ], [ "z" ] ]; const handleFileChange = async (e)=>{ const file = e.currentTarget.files[0]; setUploadError(null); if (!file) return; if (!newFoodLabel.trim()) { setUploadError("Please enter a label before choosing a file."); e.currentTarget.value = ""; return; } if (file.size > MAX_FILE_SIZE) { setUploadError(`File too large (${(file.size / 1e6).toFixed(1)}MB > 1MB).`); e.currentTarget.value = ""; return; } setIsUploading(true); try { const formData = new FormData(); formData.append("file", file); const uploadRes = await fetch("/api/upload", { method: "POST", body: formData, mode: "cors" }); if (!uploadRes.ok) throw new Error("Failed to upload image"); const uploadData = await uploadRes.json(); if (uploadData.error) throw new Error(uploadData.error); const saveRes = await fetch("/api/save-food", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "same-origin", body: JSON.stringify({ label: newFoodLabel.toLowerCase().trim(), image_url: uploadData.url }) }); if (!saveRes.ok) throw new Error("Failed to save food item"); const saveData = await saveRes.json(); if (saveData.error) throw new Error(saveData.error); setFoodItems((prev)=>[ saveData.foodItem, ...prev ]); setNewFoodLabel(""); fileInputRef.current.value = ""; } catch (err) { console.error(err); setUploadError(err.message || "Upload failed. Please try again."); } finally{ setIsUploading(false); } }; const loadFoodItems = async ()=>{ try { const res = await fetch("/api/get-food-items", { method: "POST" }); if (!res.ok) throw new Error("Failed to fetch food items"); const data = await res.json(); if (data.error) throw new Error(data.error); setFoodItems(data.foodItems); } catch (err) { console.error(err); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#E8F3E8] to-[#F5F9E9] flex flex-col", __source: { fileName: "", lineNumber: 225, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 md:px-8 pt-12 pb-24 flex-grow", __source: { fileName: "", lineNumber: 226, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 227, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center text-center md:hidden gap-4", __source: { fileName: "", lineNumber: 228, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative text-4xl", __source: { fileName: "", lineNumber: 229, columnNumber: 13 }, __self: this }, "🧩", /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 animate-float text-xl", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, "⭐")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-[#7CB342] via-[#FFB74D] to-[#FF69B4] text-transparent bg-clip-text animate-shimmer", __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, "Food"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center px-4 py-2 bg-[#7CB342] text-white rounded-lg hover:bg-[#558B2F]", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, "← Back to Home")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center justify-between", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-flex items-center px-4 py-2 bg-[#7CB342] text-white rounded-lg hover:bg-[#558B2F]", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, "← Back to Home"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative text-4xl", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "🧩", /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 animate-float text-xl", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, "⭐")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold bg-gradient-to-r from-[#7CB342] via-[#64B5F6] to-[#FFB74D] text-transparent bg-clip-text animate-shimmer", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, "Food")))), /*#__PURE__*/ React.createElement("div", { className: "mb-8 bg-white rounded-lg p-4 shadow-sm", __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold text-[#558B2F] mb-3", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, "Add New Food Card"), /*#__PURE__*/ React.createElement("input", { type: "text", value: newFoodLabel, onChange: (e)=>setNewFoodLabel(e.target.value), placeholder: "Enter food name", className: "w-full mb-3 px-4 py-2 rounded-lg border border-[#E0E7D1] focus:outline-none focus:border-[#7CB342]", __source: { fileName: "", lineNumber: 258, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, disabled: isUploading, className: "block w-full mb-2 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#7CB342] file:text-white hover:file:bg-[#558B2F]", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }), isUploading && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#7CB342]", __source: { fileName: "", lineNumber: 273, columnNumber: 27 }, __self: this }, "Uploading…"), uploadError && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-red-500", __source: { fileName: "", lineNumber: 274, columnNumber: 27 }, __self: this }, uploadError), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#558B2F]", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, "Maximum file size: 1 MB")), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-[#558B2F]", __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }, "Loading food items…") : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, [ ...defaultCards, ...foodItems ].map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, onClick: ()=>handleCardClick(item), className: "relative bg-white rounded-xl aspect-square cursor-pointer hover:scale-105 shadow-sm border-4 border-[#7CB342] overflow-hidden group", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image_url || item.image, alt: item.label, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110", __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black opacity-0 group-hover:opacity-40 transition-all duration-300", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300", __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-[#7CB342] text-white px-4 py-2 rounded-full text-lg font-semibold shadow-lg scale-95 group-hover:scale-100 transition-all duration-300", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, item.label)), /*#__PURE__*/ React.createElement("div", { onClick: (e)=>{ e.stopPropagation(); speak(item.label); }, className: "absolute bottom-2 right-2 w-8 h-8 bg-[#7CB342] rounded-full flex items-center justify-center text-white shadow-md hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "▶")))), popupCard && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-[90%] max-w-[600px] rounded-xl p-5 text-center relative max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, showCelebration && /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none fixed inset-0 overflow-hidden", __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, Array.from({ length: 30 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute text-4xl rise-up", style: { bottom: "-20px", left: `${Math.random() * 90}%`, animationDelay: `${Math.random() * 2}s`, animationDuration: `${2 + Math.random() * 2}s` }, __source: { fileName: "", lineNumber: 319, columnNumber: 21 }, __self: this }, [ "🌿", "🍃", "🌸", "⭐", "🌟" ][i % 5]))), /*#__PURE__*/ React.createElement("button", { onClick: closePopup, className: "absolute top-2 right-2 text-2xl text-[#7CB342] hover:text-[#558B2F]", __source: { fileName: "", lineNumber: 334, columnNumber: 15 }, __self: this }, "×"), /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-square mb-8 rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: popupCard.image, alt: popupCard.label, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 341, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "letter-container overflow-x-auto whitespace-nowrap pb-4 mb-2 scroll-smooth", __source: { fileName: "", lineNumber: 348, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-flex gap-2", __source: { fileName: "", lineNumber: 349, columnNumber: 19 }, __self: this }, wordLetters.map((letter, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `letter-box w-[50px] h-[60px] rounded border-2 flex items-center justify-center text-2xl font-semibold transition-all duration-300 ${placedLetters[idx] ? "bg-white border-[#7CB342] text-[#558B2F]" : "bg-[#F5F9E9] border-[#E0E7D1] text-[#558B2F]"} ${idx === currentLetterIndex && !placedLetters[idx] ? "flicker-pastoral-green" : ""}`, __source: { fileName: "", lineNumber: 351, columnNumber: 23 }, __self: this }, placedLetters[idx] || "")))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speak(popupCard.label), className: "w-[50px] h-[50px] bg-[#7CB342] text-white text-xl rounded-full flex items-center justify-center shadow hover:scale-105 transition-all mx-auto", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, "▶")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPlacedLetters(Array(wordLetters.length).fill(null)); setCurrentLetterIndex(0); setShowCelebration(false); }, className: "mb-4 px-4 py-2 bg-[#FFB74D] text-white rounded hover:bg-[#FFA726] transition-all text-sm", __source: { fileName: "", lineNumber: 375, columnNumber: 15 }, __self: this }, "Reset Word"), /*#__PURE__*/ React.createElement("div", { className: "mb-5 min-h-[60px] border-2 border-dashed border-[#E0E7D1] flex items-center justify-center p-3", __source: { fileName: "", lineNumber: 385, columnNumber: 15 }, __self: this }, placedLetters.every((l)=>!l) && /*#__PURE__*/ React.createElement("div", { className: "text-[#558B2F]", __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, "Click letters below to spell the word")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center mb-4", __source: { fileName: "", lineNumber: 392, columnNumber: 15 }, __self: this }, keyboardRows.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex gap-2 justify-center w-full", __source: { fileName: "", lineNumber: 394, columnNumber: 19 }, __self: this }, row.map((letter)=>/*#__PURE__*/ React.createElement("div", { key: letter, onClick: (e)=>handleKeyboardLetterClick(letter, e), className: `relative ${letter === "_" ? "w-[200px]" : "w-[60px]"} h-[60px] flex items-center justify-center rounded cursor-pointer text-2xl transition-all duration-300 ${selectedLetter === letter ? "border-2 border-[#7CB342] bg-white" : "border border-[#E0E7D1] bg-[#F5F9E9]"} ${letter === wordLetters[currentLetterIndex] ? "flicker-pastoral-green" : ""}`, __source: { fileName: "", lineNumber: 399, columnNumber: 23 }, __self: this }, letter === "_" ? "SPACE" : letter, /*#__PURE__*/ React.createElement("div", { onClick: (e)=>{ e.stopPropagation(); speak(letter === "_" ? "space" : letter); }, className: "absolute bottom-0.5 right-0.5 w-5 h-5 bg-[#7CB342] bg-opacity-90 rounded-full flex items-center justify-center cursor-pointer text-xs text-white", __source: { fileName: "", lineNumber: 415, columnNumber: 25 }, __self: this }, "▶"))))))))), /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-[#7CB342] text-white py-4 px-6", __source: { fileName: "", lineNumber: 434, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 435, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 436, columnNumber: 11 }, __self: this }, "© 2025 AutisticAudio. All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 437, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-sm hover:text-[#F5F9E9]", __source: { fileName: "", lineNumber: 438, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-sm hover:text-[#F5F9E9]", __source: { fileName: "", lineNumber: 439, columnNumber: 13 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 444, columnNumber: 7 }, __self: this }, ` @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .animate-shimmer { animation: shimmer 3s linear infinite; background-size: 200% auto; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 2s ease-in-out infinite; } @keyframes pastoralGreenFlicker { 0%,100% { background-color: #7CB342; border-color: #7CB342; } 50% { background-color: white; border-color: #7CB342; } } .flicker-pastoral-green { animation: pastoralGreenFlicker 1s infinite; } @keyframes rise-up { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-800px) rotate(360deg); opacity: 0; } } .rise-up { animation: rise-up linear forwards; } `)); }