function Navigation({ menuItems = [ { name: "Home", icon: "fa-house", href: "/" }, { name: "Health", icon: "fa-heart", href: "/category/health" }, { name: "Nutrition", icon: "fa-bowl-food", href: "/category/nutrition" }, { name: "Training", icon: "fa-medal", href: "/category/training" }, { name: "Lifestyle", icon: "fa-bone", href: "/category/lifestyle" }, { name: "DIY", icon: "fa-scissors", href: "/category/diy" } ], activePage = "Home" }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isUserMenuOpen, setIsUserMenuOpen] = useState(false); const { data: user } = useUser(); const { signOut } = useAuth(); const [currentPath, setCurrentPath] = useState("/"); const [userAvatar, setUserAvatar] = useState("/default-avatar.png"); useEffect(()=>{ if (typeof window !== "undefined") { setCurrentPath(window.location.pathname); } }, []); useEffect(()=>{ const fetchUserAvatar = async ()=>{ if (user?.image) { try { const response = await fetch("/api/images/get", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: user.image }) }); if (!response.ok) { throw new Error("Failed to fetch user avatar"); } const data = await response.json(); if (data.success && data.image?.url) { setUserAvatar(data.image.url); } } catch (error) { console.error("Error fetching user avatar:", error); setUserAvatar("/default-avatar.png"); } } }; fetchUserAvatar(); }, [ user?.image ]); useEffect(()=>{ const trackPageView = async ()=>{ try { await fetch("/api/analytics/track-view", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ page_path: currentPath }) }); } catch (error) { console.error("Failed to track page view:", error); } }; trackPageView(); }, [ currentPath ]); const NavLink = ({ href, children, icon })=>{ const isActive = children === activePage; return /*#__PURE__*/ React.createElement("a", { href: href, className: `group flex items-center px-4 py-2 transition-all duration-300 hover:text-[#2EC4B6] relative`, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 ${isActive ? "text-[#2EC4B6]" : "text-gray-600 group-hover:text-[#2EC4B6]"}`, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: isActive ? "text-[#2EC4B6]" : "text-gray-600", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, children), children === "DIY" && /*#__PURE__*/ React.createElement("span", { className: "ml-1 bg-[#2EC4B6] text-white text-xs px-2 py-0.5 rounded-full", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "New!"), isActive && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full h-0.5 bg-[#2EC4B6] transform scale-x-100 transition-transform duration-300", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full h-0.5 bg-[#2EC4B6] transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this })); }; return /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full z-50 bg-white shadow-sm", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-2 group", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#2EC4B6]", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M12 2C8.69 2 6 4.69 6 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm8 7c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1z", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#2EC4B6] text-xl font-medium leading-none", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "Barkley Barks"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-xs leading-tight", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Life through the eyes of a wise doodle"))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center justify-center flex-1", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement(NavLink, { key: item.name, href: item.href, icon: item.icon, __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, item.name)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-full hover:bg-gray-100 transition-colors duration-300", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-600 hover:text-[#2EC4B6] transition-colors duration-300", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this })), user ? /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsUserMenuOpen(!isUserMenuOpen), className: "flex items-center space-x-2 p-2 rounded-full hover:bg-gray-100 transition-colors duration-300", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: userAvatar, alt: "Profile", className: "w-8 h-8 rounded-full object-cover", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, user.name || user.email?.split("@")[0]), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down text-xs text-gray-600", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this })), isUserMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 border border-gray-100 transition-all duration-200", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2EC4B6] transition-colors duration-300", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 164, columnNumber: 23 }, __self: this }), "Edit Profile"), user.role === "admin" && /*#__PURE__*/ React.createElement("a", { href: "/admin", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2EC4B6] transition-colors duration-300", __source: { fileName: "", lineNumber: 168, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt mr-2", __source: { fileName: "", lineNumber: 172, columnNumber: 25 }, __self: this }), "Admin Panel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>signOut({ callbackUrl: "/" }), className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2EC4B6] transition-colors duration-300", __source: { fileName: "", lineNumber: 176, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 180, columnNumber: 23 }, __self: this }), "Sign out"))) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-sm text-gray-600 hover:text-[#2EC4B6] transition-colors duration-300", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Sign in"), /*#__PURE__*/ React.createElement("a", { href: "/account/signup", className: "text-sm bg-[#2EC4B6] text-white px-4 py-2 rounded-full hover:bg-[#28B0A2] transition-colors duration-300", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, "Sign up")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden p-2 hover:bg-gray-100 rounded-full transition-colors duration-300", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-gray-600`, __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this })))), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "md:hidden py-2 border-t border-gray-100", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-1", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement(NavLink, { key: item.name, href: item.href, icon: item.icon, __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, item.name)))))); } function NavigationStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 232, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { activePage: "Home", __source: { fileName: "", lineNumber: 233, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "pt-20 p-4", __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, "Content goes here below the navigation bar"))); } function Footer({ email, setEmail, onSubscribe }) { const [loading, setLoading] = useState(false); const [subscribeError, setSubscribeError] = useState(null); const [subscribeSuccess, setSubscribeSuccess] = useState(false); const validateEmail = (email)=>{ const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!re.test(email)) { return "Please enter a valid email address"; } if (email.length > 100) { return "Email address is too long"; } return null; }; const handleSubscribe = async (e)=>{ e.preventDefault(); setLoading(true); setSubscribeError(null); setSubscribeSuccess(false); const emailError = validateEmail(email); if (emailError) { setSubscribeError(emailError); setLoading(false); return; } try { const response = await fetch("/api/schedule-newsletter", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: "Welcome to Barkley's Pack! 🐾", content: ` Dear Friend, Woof! I'm so excited to welcome you to our pack! I'm Barkley, and I can't wait to share all my favorite tips, tricks, and tail-wagging adventures with you. Here's what you can expect in your inbox: 🦮 Weekly training tips and tricks 🏃‍♂️ Fun exercise ideas for you and your doodle 🥩 Nutrition advice and treat recommendations ✂️ Grooming guidance to keep your pup looking pawsome 🎾 Product reviews from my personal experiences As a special welcome gift, here are links to my most popular articles: - Essential Grooming Guide for Doodles - Top 10 Training Commands to Start With - My Favorite Healthy Treats Can't wait to embark on this journey together! Tail wags and puppy kisses, Barkley 🐕 P.S. Have a specific question? Just hit reply! My human helps me read and respond to all messages. `, scheduledDate: new Date().toISOString() }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.success) { setEmail(""); setSubscribeSuccess(true); setTimeout(()=>{ setSubscribeSuccess(false); }, 5000); } else { throw new Error(data.error || "Failed to subscribe"); } } catch (error) { console.error("Failed to subscribe:", error); setSubscribeError("Oops! Failed to join the pack. Please try again!"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("footer", { className: "bg-[#111111] text-white py-12", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center md:items-start", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/barkley-profile.jpg", alt: "Barkley the red-haired goldendoodle sitting and smiling", className: "rounded-full w-32 h-32 object-cover border-2 border-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto text-center md:text-left text-gray-300", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Hi, I'm Barkley! A red-haired golden doodle sharing my wisdom with fellow poodle friends.")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Connect With Me"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-[#1DA1F2] transition-colors duration-300", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-[#4267B2] transition-colors duration-300", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-2xl", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-[#E1306C] transition-colors duration-300", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-[#0077b5] transition-colors duration-300", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-tiktok text-2xl", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center md:items-start", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "Join My Pack!"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubscribe, className: "w-full max-w-md", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "flex-1 px-4 py-2 rounded bg-gray-800 text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-gray-500 font-roboto", required: true, disabled: loading, __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded font-roboto transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed", disabled: loading, __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, loading ? "Joining..." : "Subscribe")), subscribeError && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-red-400 text-sm font-roboto", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, subscribeError), subscribeSuccess && /*#__PURE__*/ React.createElement("div", { className: "mt-2 bg-green-900 text-green-100 p-3 rounded-lg text-sm font-roboto animate-fade-in", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "flex items-center", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw mr-2", __source: { fileName: "", lineNumber: 164, columnNumber: 19 }, __self: this }), "Welcome to the pack! 🐾"), /*#__PURE__*/ React.createElement("p", { className: "text-xs mt-1 text-green-200", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "Check your inbox for a special welcome message!"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-400", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, "© 2024 Barkley Barks. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.3s ease-out; } `)); } function FooterStory() { const [email, setEmail] = useState(""); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 199, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-gray-100 p-4", __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, "Main content would go here")), /*#__PURE__*/ React.createElement(Footer, { email: email, setEmail: setEmail, __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this })); } function BlogCard({ title, category, summary, imageUrl, slug, wordCount = 500 }) { const [storedImageUrl, setStoredImageUrl] = useState(null); const [error, setError] = useState(null); const isLongSummary = summary.length > 250; const readingTime = Math.ceil(wordCount / 200); const displaySummary = isLongSummary ? `${summary.slice(0, 250)}...` : summary; useEffect(()=>{ const fetchImage = async ()=>{ try { const response = await fetch("/api/images/get", { method: "POST", body: JSON.stringify({ url: imageUrl }) }); if (!response.ok) { throw new Error("Failed to fetch image"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setStoredImageUrl(data.image?.url || imageUrl); } catch (err) { console.error("Error fetching image:", err); setError(err.message); setStoredImageUrl(imageUrl); } }; if (imageUrl) { fetchImage(); } }, [ imageUrl ]); return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl bg-white", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: storedImageUrl || imageUrl, alt: `Featured image for ${title}`, className: "w-full h-48 object-cover transition-transform duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-[#8B4513] text-white text-xs px-3 py-1 rounded-full font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, category), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 text-xs font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-1", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), readingTime, " min read")), /*#__PURE__*/ React.createElement("h2", { className: "mt-3 font-crimson-text text-xl font-semibold transition-colors duration-300 hover:text-[#8B4513]", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto text-gray-600 text-sm", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, displaySummary), /*#__PURE__*/ React.createElement("a", { href: `/post/${slug}`, className: "inline-block mt-4 px-4 py-2 bg-[#8B4513] text-white rounded font-roboto text-sm transition-all duration-300 hover:bg-[#723A0F] hover:shadow-md", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, isLongSummary ? "Continue Reading" : "Read More"))); } function BlogCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlogCard, { title: "Training Your Goldendoodle: Essential Tips", category: "Training", summary: "Discover the most effective methods for training your Goldendoodle puppy, from basic commands to advanced tricks. Learn how to establish a strong bond while ensuring good behavior.", imageUrl: "/training-doodle.jpg", slug: "training-goldendoodle-tips", wordCount: 2500, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BlogCard, { title: "Quick Tips for Doodle Care", category: "Health", summary: "Essential daily care tips for your Goldendoodle.", imageUrl: "/quick-tips.jpg", slug: "quick-doodle-tips", wordCount: 800, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BlogCard, { title: "Healthy Diet for Doodles", category: "Nutrition", summary: "A comprehensive guide to feeding your Goldendoodle the right food at every life stage. Learn about nutrients, portions, and the best food choices for your furry friend. Discover homemade recipes and recommended brands that will keep your doodle healthy and happy.", imageUrl: "/doodle-food.jpg", slug: "healthy-doodle-diet", wordCount: 3000, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedFilter, setSelectedFilter] = useState("all"); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [posts, setPosts] = useState([]); const [email, setEmail] = useState(""); const trainingTags = [ { name: "all", icon: "fa-medal", label: "All Training" }, { name: "basic", icon: "fa-dog", label: "Basic Commands" }, { name: "advanced", icon: "fa-award", label: "Advanced Training" }, { name: "behavior", icon: "fa-exclamation-circle", label: "Behavior Issues" }, { name: "social", icon: "fa-users", label: "Socialization" }, { name: "puppy", icon: "fa-baby", label: "Puppy Training" }, { name: "agility", icon: "fa-running", label: "Agility & Sports" } ]; const trainingIndicators = [ { title: "Progress Tracking", description: "Monitor training milestones and achievements", icon: "fa-chart-line" }, { title: "Command Mastery", description: "Track commands learned and perfected", icon: "fa-graduation-cap" }, { title: "Behavior Patterns", description: "Observe and record behavioral changes", icon: "fa-brain" }, { title: "Training Duration", description: "Optimize length of training sessions", icon: "fa-clock" } ]; useEffect(()=>{ const fetchPosts = async ()=>{ try { const response = await fetch(`/api/posts?category=training&tag=${selectedFilter}`); if (!response.ok) { throw new Error("Failed to fetch training posts"); } const data = await response.json(); setPosts(data.posts); } catch (err) { console.error(err); setError(err.message); } finally{ setLoading(false); } }; fetchPosts(); }, [ selectedFilter ]); const handleSubscribe = (e)=>{ e.preventDefault(); setEmail(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { activePage: "Training", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "relative h-[600px] overflow-hidden", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", style: { animation: "parallax 20s infinite alternate ease-in-out" }, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/dog-training-hero.jpg", alt: "A dog and trainer in an engaging training session", className: "w-full h-full object-cover brightness-50", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-b from-black/80 via-black/70 to-black/80", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white p-6 transform transition-all duration-700 translate-y-0 max-w-4xl", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-5xl md:text-6xl lg:text-7xl mb-4 leading-tight", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Training & Behavior"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg md:text-xl lg:text-2xl mb-6 leading-relaxed max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Master essential training techniques and build positive habits for a well-behaved, happy companion")))), /*#__PURE__*/ React.createElement("section", { className: "py-24 px-4 bg-[#FFF8F0]", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-4xl text-center mb-12 text-[#8B4513]", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Key Training Indicators"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, trainingIndicators.map((indicator)=>/*#__PURE__*/ React.createElement("div", { key: indicator.title, className: "bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${indicator.icon} text-3xl text-[#8B4513] mb-4`, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, indicator.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, indicator.description)))))), /*#__PURE__*/ React.createElement("section", { className: "py-24 px-4 bg-white", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-12 overflow-x-auto", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 min-w-max", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, trainingTags.map((tag)=>/*#__PURE__*/ React.createElement("button", { key: tag.name, onClick: ()=>setSelectedFilter(tag.name), className: `px-6 py-3 rounded-full font-roboto transition-all duration-300 flex items-center space-x-2 hover:shadow-md ${selectedFilter === tag.name ? "bg-[#8B4513] text-white shadow-md" : "bg-[#FFF8F0] text-gray-700 hover:bg-[#2EC4B6] hover:text-white"}`, __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${tag.icon}`, __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 21 }, __self: this }, tag.label))))), error ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-600 font-roboto bg-red-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }), error) : loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-12", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-3xl text-[#2EC4B6]", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, posts.map((post)=>/*#__PURE__*/ React.createElement(BlogCard, { key: post.slug, ...post, __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement(Footer, { email: email, setEmail: setEmail, onSubscribe: handleSubscribe, __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, ` @keyframes parallax { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } `)); }