function Footer({ brandName, description, socialLinks, quickLinks, supportLinks, contactDetails, paymentIcons, year }) { return /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1B4B43] text-white py-16 mt-20 w-full", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-2 mb-6", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw text-3xl", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, brandName)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, socialLinks.map(({ href, icon, label }, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: href, className: "text-white hover:text-gray-300 transition-colors", "aria-label": label, __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: icon + " text-xl", __source: { fileName: "", lineNumber: 29, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 sm:mt-0", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Quick Links"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, quickLinks.map(({ href, text, target, rel }, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: href, className: "text-gray-300 hover:text-white transition-colors", target: target, rel: rel, __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, text))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-0", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Support"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, supportLinks.map(({ href, text, target, rel }, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: href, className: "text-gray-300 hover:text-white transition-colors", target: target, rel: rel, __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, text))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 md:mt-0", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Contact"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, contactDetails.map(({ icon, text }, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-gray-300`, __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-300", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, text)))))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-sm mb-4 md:mb-0", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "© ", year, " ", brandName, ". All rights reserved."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center md:justify-end items-center gap-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, paymentIcons.map((icon, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `${icon} text-3xl text-gray-300 hover:text-white transition-colors`, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this })))))); } function FooterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Footer, { brandName: "Sniffbnb", description: "Making pet care easy and stress-free for everyone.", socialLinks: [ { href: "#", icon: "fab fa-facebook", label: "Facebook" }, { href: "#", icon: "fab fa-twitter", label: "Twitter" }, { href: "#", icon: "fab fa-instagram", label: "Instagram" } ], quickLinks: [ { href: "/sniffbnb-search", text: "Find a Sitter" }, { href: "https://services.sniffbnb.com/", text: "Become a Service Provider", target: "_blank", rel: "noopener noreferrer" } ], supportLinks: [ { href: "#", text: "Safety" }, { href: "#", text: "Terms of Service" }, { href: "#", text: "Privacy Policy" }, { href: "/cancellation-refund-policy", text: "Cancellation & Refund Policy", target: "_blank", rel: "noopener noreferrer" } ], contactDetails: [ { icon: "fas fa-envelope", text: "support@sniffbnb.com" }, { icon: "fas fa-phone", text: "+91 - 9653539979" }, { icon: "fas fa-map-marker-alt", text: "Gurugram, Haryana" } ], paymentIcons: [ "fab fa-cc-visa", "fab fa-cc-mastercard", "fab fa-cc-amex" ], year: 2025, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this })); } function BlogAdoptionCard() { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gradient-to-br from-[#7B2CBF] via-[#9D4EDD] to-[#C77DFF] rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative px-6 py-8 md:py-10", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw text-[100px] text-white transform -rotate-12", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-12 gap-8 items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:col-span-7 relative z-10", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-3 rounded-full shadow-md", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bone text-[#7B2CBF] text-2xl", __source: { fileName: "", lineNumber: 13, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-white text-3xl font-bold", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Adopt, Don't Buy a Pet")), /*#__PURE__*/ React.createElement("p", { className: "text-white text-xl font-light mb-8 leading-relaxed", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, '"Every wagging tail and gentle purr is a reminder that the best things in life come with four paws and a loving heart."'), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/20 backdrop-blur-sm rounded-lg p-3 mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dog text-white text-2xl", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "Loyal Friend")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/20 backdrop-blur-sm rounded-lg p-3 mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cat text-white text-2xl", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Purr-fect Match")), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/20 backdrop-blur-sm rounded-lg p-3 mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-white text-2xl", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Forever Home")))), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-5", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-xl p-6 shadow-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw text-[#7B2CBF] text-3xl mb-3", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-[#7B2CBF] font-bold text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Find Your Perfect Companion")), /*#__PURE__*/ React.createElement("a", { href: "https://adopt.sniffbnb.com", target: "_blank", rel: "noopener noreferrer", className: "block w-full bg-gradient-to-r from-[#7B2CBF] to-[#9D4EDD] text-white py-4 px-6 rounded-lg hover:from-[#9D4EDD] hover:to-[#C77DFF] transform hover:scale-105 transition-all duration-300 text-center group", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "Meet Your New Friend"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right group-hover:translate-x-1 transition-transform", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Trusted by animal lovers nationwide"))))))); } function BlogAdoptionCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "Adoption Card"), /*#__PURE__*/ React.createElement(BlogAdoptionCard, { __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }))); } function Header1({ user, currentAnimal = 0 }) { const [showSignupModal, setShowSignupModal] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const [showLoginModal, setShowLoginModal] = useState(false); const [showProfileDropdown, setShowProfileDropdown] = useState(false); const [personalInfo, setPersonalInfo] = useState(null); const dropdownRef = useRef(null); useEffect(()=>{ async function fetchUserData() { if (user?.id) { try { const response = await fetch("/api/db/customerprofile", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM customer_profile WHERE user_id = ?", values: [ user.id ] }) }); const data = await response.json(); if (data && data[0]) { setPersonalInfo(data[0]); } } catch (err) { console.error("Failed to fetch user data:", err); } } } fetchUserData(); }, [ user ]); useEffect(()=>{ function handleClickOutside(event) { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { setShowProfileDropdown(false); } } document.addEventListener("mousedown", handleClickOutside); return ()=>document.removeEventListener("mousedown", handleClickOutside); }, []); const getDisplayName = ()=>{ if (personalInfo?.first_name && personalInfo?.last_name) { return `${personalInfo.first_name} ${personalInfo.last_name}`; } return user?.name || "Guest"; }; const getInitials = ()=>{ if (personalInfo?.first_name && personalInfo?.last_name) { return `${personalInfo.first_name[0]}${personalInfo.last_name[0]}`; } if (user?.name) { const nameParts = user.name.split(" "); if (nameParts.length > 1) { return `${nameParts[0][0]}${nameParts[nameParts.length - 1][0]}`; } return user.name[0]; } return "G"; }; const menuItems = { main: [ { href: "/", label: "Home", icon: "home" }, { href: "/sniffbnb-search", label: "Find a Service Provider", icon: "search" } ], account: [ { href: "/petparentpage", label: "My Bookings", icon: "calendar-check" }, { href: "/editprofile", label: "Edit Profile", icon: "user-edit" } ], other: [ { href: "https://adopt.sniffbnb.com", label: "Adopt a Pet", icon: "paw", external: true }, { href: "https://services.sniffbnb.com/", label: "Become a Service Provider", icon: "briefcase", external: true }, { href: "/account/logout", label: "Logout", icon: "sign-out-alt" } ] }; const publicMenuItems = [ { href: "/sniffbnb-search", label: "Find a Service Provider", icon: "search" }, { href: "https://services.sniffbnb.com/", label: "Become a Service Provider", icon: "briefcase", external: true } ]; const handleLoginClick = ()=>{ setIsMenuOpen(false); setShowLoginModal(true); }; const handleCloseLoginModal = ()=>{ setShowLoginModal(false); }; const handleSignupClick = ()=>{ setIsMenuOpen(false); setShowSignupModal(true); }; const handleCloseSignupModal = ()=>{ setShowSignupModal(false); }; const renderLoginModal = ()=>/*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100] p-4", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-[400px] max-h-[90vh] overflow-y-auto modal-content", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100 flex justify-between items-center", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-[#1B4B43]", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "Login As"), /*#__PURE__*/ React.createElement("button", { onClick: handleCloseLoginModal, className: "text-gray-400 hover:text-gray-600 transition-colors", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/sign-in?callbackUrl=/", className: "block w-full bg-[#1B4B43] text-white py-3 rounded-lg text-center hover:bg-[#143832] transition-colors", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }), "Login as Customer"), /*#__PURE__*/ React.createElement("a", { href: "https://services.sniffbnb.com/sign-in?callbackUrl=/", target: "_blank", rel: "noopener noreferrer", className: "block w-full border-2 border-[#1B4B43] text-[#1B4B43] py-3 rounded-lg text-center hover:bg-[#1B4B43] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-2", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }), "Login as Service Provider")))); const renderSignupModal = ()=>/*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100] p-4", __source: { fileName: "", lineNumber: 160, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-[400px] max-h-[90vh] overflow-y-auto modal-content", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-gray-100 flex justify-between items-center", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-[#1B4B43]", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, "Sign Up As"), /*#__PURE__*/ React.createElement("button", { onClick: handleCloseSignupModal, className: "text-gray-400 hover:text-gray-600 transition-colors", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/sign-up?callbackUrl=/editprofile", className: "block w-full bg-[#1B4B43] text-white py-3 rounded-lg text-center hover:bg-[#143832] transition-colors", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }), "Sign up as Customer"), /*#__PURE__*/ React.createElement("a", { href: "https://services.sniffbnb.com/", target: "_blank", rel: "noopener noreferrer", className: "block w-full border-2 border-[#1B4B43] text-[#1B4B43] py-3 rounded-lg text-center hover:bg-[#1B4B43] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase mr-2", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }), "Sign up as Service Provider")))); const renderMobileMenu = ()=>/*#__PURE__*/ React.createElement("div", { className: `md:hidden fixed inset-0 z-[200] ${isMenuOpen ? "pointer-events-auto" : "pointer-events-none"}`, __source: { fileName: "", lineNumber: 194, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isMenuOpen ? "opacity-100" : "opacity-0"}`, onClick: ()=>setIsMenuOpen(false), __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute inset-y-0 right-0 w-[280px] bg-white shadow-2xl transform transition-transform duration-300 ease-out ${isMenuOpen ? "translate-x-0" : "translate-x-full"}`, __source: { fileName: "", lineNumber: 206, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 bg-white/95 backdrop-blur-sm border-b border-gray-100 px-4 py-3 flex items-center justify-between", __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-lg bg-[#1B4B43]/10 flex items-center justify-center", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw text-[#1B4B43]", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-[#1B4B43]", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, "Menu")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(false), className: "w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-50 active:bg-gray-100", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-gray-600", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-full pb-20", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, user ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-lg bg-[#1B4B43] text-white flex items-center justify-center font-medium", __source: { fileName: "", lineNumber: 231, columnNumber: 19 }, __self: this }, getInitials()), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, getDisplayName()), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }, user.email)))), Object.entries(menuItems).map(([section, items], index)=>/*#__PURE__*/ React.createElement("div", { key: section, className: index > 0 ? "border-t border-gray-100" : "", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.href, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: "flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 active:bg-gray-100 ripple", __source: { fileName: "", lineNumber: 247, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-lg bg-[#1B4B43]/10 flex items-center justify-center", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} text-[#1B4B43]`, __source: { fileName: "", lineNumber: 255, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 259, columnNumber: 25 }, __self: this }, item.label))))))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, publicMenuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.href, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: "flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 active:bg-gray-100 ripple", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-lg bg-[#1B4B43]/10 flex items-center justify-center", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} text-[#1B4B43]`, __source: { fileName: "", lineNumber: 278, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 280, columnNumber: 21 }, __self: this }, item.label)))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleLoginClick, className: "w-full flex items-center justify-center space-x-2 p-3 rounded-lg hover:bg-gray-50 active:bg-gray-100 ripple", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt text-[#1B4B43]", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, "Log in")), /*#__PURE__*/ React.createElement("button", { onClick: handleSignupClick, className: "w-full flex items-center justify-center space-x-2 bg-[#1B4B43] text-white p-3 rounded-lg hover:bg-[#143832] active:bg-[#0D2B26] ripple", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus", __source: { fileName: "", lineNumber: 297, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 298, columnNumber: 21 }, __self: this }, "Sign up")))))))); return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 310, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "relative z-50 bg-white border-b border-gray-200/50 sticky top-0", __source: { fileName: "", lineNumber: 311, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-3", __source: { fileName: "", lineNumber: 312, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4", __source: { fileName: "", lineNumber: 313, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center group", __source: { fileName: "", lineNumber: 314, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center relative w-10 h-10 mr-2", __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }, [ "dog", "cat", "dove", "rabbit" ].map((animal, index)=>/*#__PURE__*/ React.createElement("i", { key: animal, className: `fas fa-${animal} text-[#1B4B43] text-3xl absolute left-0 transform transition-all duration-700 ease-in-out ${currentAnimal === index ? "opacity-100 scale-100" : "opacity-0 scale-95"} group-hover:text-[#143832]`, __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "text-[#1B4B43] text-2xl font-bold tracking-tight group-hover:text-[#143832] transition-colors", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, "Sniffbnb")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-6", __source: { fileName: "", lineNumber: 333, columnNumber: 13 }, __self: this }, !user && /*#__PURE__*/ React.createElement(React.Fragment, null, publicMenuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.href, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: "text-gray-600 hover:text-[#1B4B43] transition-all duration-300 hover:scale-105 transform text-sm font-medium", __source: { fileName: "", lineNumber: 337, columnNumber: 21 }, __self: this }, item.label)), /*#__PURE__*/ React.createElement("button", { onClick: handleLoginClick, className: "text-[#1B4B43] hover:text-[#143832] transition-all duration-300 hover:scale-105 transform font-medium text-sm px-4 py-2 rounded-lg hover:bg-[#1B4B43]/5", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, "Log in"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignupClick, className: "bg-[#1B4B43] hover:bg-[#143832] text-white px-6 py-2 rounded-lg transition-all duration-300 hover:shadow-md hover:shadow-[#1B4B43]/10 hover:scale-105 transform font-medium text-sm", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, "Sign up")), user && /*#__PURE__*/ React.createElement("div", { className: "relative", ref: dropdownRef, __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProfileDropdown(!showProfileDropdown), className: "flex items-center space-x-3 focus:outline-none group bg-white/50 hover:bg-white rounded-xl px-3 py-2 transition-all duration-300", __source: { fileName: "", lineNumber: 363, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-9 h-9 rounded-lg bg-gradient-to-br from-[#1B4B43] to-[#143832] text-white flex items-center justify-center text-sm shadow-sm group-hover:shadow-md transition-all duration-300", __source: { fileName: "", lineNumber: 367, columnNumber: 21 }, __self: this }, getInitials().toUpperCase()), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 370, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 group-hover:text-[#1B4B43] transition-colors duration-300", __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this }, getDisplayName()), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 transition-colors duration-300", __source: { fileName: "", lineNumber: 374, columnNumber: 23 }, __self: this }, user.email)), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down transform transition-all duration-300 ${showProfileDropdown ? "rotate-180" : ""} text-gray-400 group-hover:text-[#1B4B43]`, __source: { fileName: "", lineNumber: 378, columnNumber: 21 }, __self: this })), showProfileDropdown && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-72 bg-white/95 rounded-xl shadow-lg py-2 border border-gray-100/80 transform transition-all duration-300 animate-dropdown backdrop-blur-sm", __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-3 py-2 border-b border-gray-100/80", __source: { fileName: "", lineNumber: 386, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 387, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-lg bg-gradient-to-br from-[#1B4B43]/10 to-[#143832]/10 flex items-center justify-center", __source: { fileName: "", lineNumber: 388, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-[#1B4B43] text-lg", __source: { fileName: "", lineNumber: 389, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 391, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 392, columnNumber: 29 }, __self: this }, getDisplayName()), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 395, columnNumber: 29 }, __self: this }, user.email)))), Object.entries(menuItems).map(([section, items], sectionIndex)=>/*#__PURE__*/ React.createElement("div", { key: section, __source: { fileName: "", lineNumber: 403, columnNumber: 27 }, __self: this }, sectionIndex > 0 && /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-100/80 my-1", __source: { fileName: "", lineNumber: 405, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-1.5 py-1", __source: { fileName: "", lineNumber: 407, columnNumber: 29 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.href, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: "flex items-center space-x-3 px-2.5 py-2 rounded-lg text-gray-700 hover:bg-[#1B4B43]/5 hover:text-[#1B4B43] transition-all duration-300 group", __source: { fileName: "", lineNumber: 409, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-9 h-9 rounded-lg bg-gradient-to-br from-[#1B4B43]/10 to-[#143832]/10 flex items-center justify-center group-hover:from-[#1B4B43]/20 group-hover:to-[#143832]/20 transition-colors duration-300", __source: { fileName: "", lineNumber: 420, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} text-[#1B4B43] text-sm`, __source: { fileName: "", lineNumber: 421, columnNumber: 37 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 425, columnNumber: 35 }, __self: this }, item.label))))))))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden p-2 rounded-lg hover:bg-[#1B4B43]/5 transition-colors", __source: { fileName: "", lineNumber: 439, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isMenuOpen ? "times" : "bars"} text-[#1B4B43] text-lg`, __source: { fileName: "", lineNumber: 443, columnNumber: 15 }, __self: this }))), isMenuOpen && renderMobileMenu())), showLoginModal && renderLoginModal(), showSignupModal && renderSignupModal(), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 455, columnNumber: 7 }, __self: this }, ` @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-dropdown { animation: modalFadeIn 0.3s ease-out forwards; } .modal-content { animation: modalFadeIn 0.3s ease-out forwards; } `)); } function Header1Story() { const [currentAnimal, setCurrentAnimal] = useState(0); useEffect(()=>{ const interval = setInterval(()=>{ setCurrentAnimal((prev)=>(prev + 1) % 4); }, 3000); return ()=>clearInterval(interval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 488, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 489, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 px-4", __source: { fileName: "", lineNumber: 490, columnNumber: 9 }, __self: this }, "Header - Anonymous User"), /*#__PURE__*/ React.createElement(Header1, { currentAnimal: currentAnimal, __source: { fileName: "", lineNumber: 493, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 495, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 px-4", __source: { fileName: "", lineNumber: 496, columnNumber: 9 }, __self: this }, "Header - Logged In User"), /*#__PURE__*/ React.createElement(Header1, { user: { id: "123", name: "John Doe", email: "john@example.com" }, currentAnimal: currentAnimal, __source: { fileName: "", lineNumber: 499, columnNumber: 9 }, __self: this }))); } function FAQSectionMobile() { const [openIdx, setOpenIdx] = React.useState(null); const faqs = [ { q: "How do I know the sitter is trustworthy?", a: "All sitters on Sniffbnb go through a verification process and must meet safety and environment standards." }, { q: "Will my pet be kept in a cage or left alone?", a: "Never. Sniffbnb is 100% cage-free. Pets stay in real homes with loving sitters, not kennels." }, { q: "Can I meet or chat with the sitter before booking?", a: "Yes! You can use Sniffbnb’s chat option available on the page. Our team will connect you with pet sitter in case of any doubt." }, { q: "What services can I book through Sniffbnb?", a: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "You can book:", /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-4 mt-1 text-xs", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "24/7 Pet Boarding"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "24/7 House Sitting"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "8 hours Daycare"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Drop-in Visits"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Dog Walking"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Grooming"))) }, { q: "What if my pet has special needs or is not friendly?", a: "You can mention any special needs or behavior concerns during booking. We’ll match you with the right sitter who can handle them with care." }, { q: "How do I know my pet is doing okay while I’m away?", a: "Sitters send regular updates, photos, and videos. You can also check in anytime through chat." }, { q: "What if something goes wrong or I need help?", a: "We offer 24/7 support via live chat. In case of emergency or sitter issues, we’ll help you find a safe resolution right away." }, { q: "What is Sniffbnb’s cancellation and refund policy?", a: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Your money is always safe with Sniffbnb. If your plans change, we offer a fair and transparent refund process.", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.sniffbnb.com/cancellation-refund-policy", target: "_blank", rel: "noopener noreferrer", className: "text-[#1B4B43] underline", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "View full policy"), ".") } ]; return /*#__PURE__*/ React.createElement("div", { className: "md:hidden w-full mt-6 px-2", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mx-auto rounded-xl shadow bg-gradient-to-br from-[#e6f4f1] via-[#f5f5f5] to-[#e6f4f1] p-2 border border-[#d1e7e0]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#1B4B43] font-semibold text-base mb-2 flex items-center gap-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle text-[#1B4B43] text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), "FAQs"), /*#__PURE__*/ React.createElement("div", { className: "divide-y divide-[#d1e7e0]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, faqs.map((item, idx)=>{ const isOpen = openIdx === idx; return /*#__PURE__*/ React.createElement("div", { key: idx, className: "py-1", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full flex justify-between items-center text-left text-sm font-medium text-[#1B4B43] focus:outline-none transition-colors duration-200 ${isOpen ? "bg-[#e6f4f1] rounded-lg shadow-sm" : ""}`, onClick: ()=>setOpenIdx(isOpen ? null : idx), "aria-expanded": isOpen, style: { padding: "8px 10px" }, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex-1 pr-2", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, item.q), /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down ml-2 text-xs transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this })), isOpen && /*#__PURE__*/ React.createElement("div", { className: "mt-1 text-xs text-[#1B4B43] bg-white rounded-lg shadow p-2 animate-fadeIn", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, item.a)); }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.2s cubic-bezier(0.4,0,0.2,1); } `)); } function MainComponent() { const [showLoginModal, setShowLoginModal] = useState(false); const [socialProofClosed, setSocialProofClosed] = useState(false); const [showSocialProof, setShowSocialProof] = useState(false); const [socialProofText, setSocialProofText] = useState(""); const socialProofMessages = [ "Riya just booked pet boarding in Gurgaon with Sneha 🐶", "A new sitter from Bangalore joined Sniffbnb! 🏡", "Simba was hosted in a cozy home in Delhi 🐕", "Tara booked daycare in Mumbai for her golden retriever 🐾", "2 pets just checked into home boarding in Hyderabad!", "Rahul left a 5⭐ review for his sitter in Pune", "Bella is staying cage-free with Priya in Noida 🐶", "Sniffbnb verified a new sitter in Chennai ✅", "Arjun booked house sitting for his lab in NCR", "Oreo is staying with a sitter in South Delhi this weekend 🐕‍🦺", "A happy pet parent booked pet grooming in Kolkata ✂️", "Bruno just got picked up for a drop-in visit in Bengaluru 🐾", "Daisy is spending her weekend in a home — not a cage! 🏠", "Sniffbnb now has 1000+ verified sitters across India! 🎉", "Simba’s parent just messaged a sitter in Ghaziabad 🗨️", "Max is staying with Meera, a sitter in Kolkata 🐾", "A pet parent just booked 3 days of boarding in Andheri 🐕", "Lucy is getting pampered in a loving home in Jaipur 🧡", "Another sitter has joined from Navi Mumbai 🌟", "Rusty just found a second home in Faridabad 🛏️", "Ankit booked a sitter for his cat in Delhi 🐱", "Snowy is now relaxing in a cage-free space in Bengaluru 🐕", "New booking alert! 2 pets staying with Roshni in Pune", "Piku the Shih Tzu is enjoying daycare in Gurugram 🐶", "Verified sitter Priya just hosted her 10th pet! 🎉", "Chintu found a loving sitter via Sniffbnb in Noida 🏡", "Arya left a glowing review for her boarding experience 🌟", "Drop-in visit scheduled for Ginger in Indiranagar 🏃‍♀️", "Sitters in Delhi NCR are now booking up for the weekend 📅", "Zuzu just booked with Sniffbnb for the first time 💚", "Verified sitter joined from Anna Nagar, Chennai!", "Fluffy is enjoying a home away from home in Bandra", "Rover got matched with a sitter within 3 minutes 🐾", "Sneha’s cozy pet home just got its 5th guest 🛋️", "Two siblings just booked Sniffbnb for their pets 🐾🐾", "Pet parent Reena booked 7-day boarding in Bangalore", "Booking confirmed with Arjun in Janakpuri 🛏️", "Dog walking request fulfilled in Powai 🐕", "First-time user booked pet boarding for Buddy 🐶", "Verified sitter Komal now available in Chennai", "Smiley hosted 3 dogs this week in her Delhi home", "15 new sitters joined Sniffbnb this week 🎊", "Kiki’s mom just booked house sitting in Kolkata 🐱", "Another cage-free booking just completed in Gurgaon 🏡", "Sniffbnb now serving pet parents across 20 cities 🚀", "Pet parent booked overnight stay with Aman in Delhi", "Snowball is cuddled up in a sitter's home right now ❄️", "Verified sitter list just updated for Hyderabad 🔁", "Max and Coco got home boarding", "Pet sitter Divya now verified in Saket, Delhi ✅" ]; const [showSignupModal, setShowSignupModal] = useState(false); const [location, setLocation] = useState(""); const [coordinates, setCoordinates] = useState(null); const [currentAnimal, setCurrentAnimal] = useState(0); const [error, setError] = useState(""); const [predictions, setPredictions] = useState([]); const now = new Date(); const istOffset = 5.5 * 60 * 60 * 1000; // IST is UTC+5:30 const istNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000 + istOffset); const todayIST = new Date(istNow.getFullYear(), istNow.getMonth(), istNow.getDate()); const [showPredictions, setShowPredictions] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const [showCalendar, setShowCalendar] = useState(false); const [calendarMonth, setCalendarMonth] = useState(new Date().getMonth()); const [calendarYear, setCalendarYear] = useState(new Date().getFullYear()); const [checkIn, setCheckIn] = useState(null); const [checkOut, setCheckOut] = useState(null); const [showCalendarModal, setShowCalendarModal] = useState(false); const [showLocation, setShowLocation] = useState(false); const [locationInput, setLocationInput] = useState(""); const [pageLoading, setPageLoading] = useState(true); const [isVerifyingEmail, setIsVerifyingEmail] = useState(false); const [scrollPosition, setScrollPosition] = useState(0); const [showMobileNav, setShowMobileNav] = useState(false); const [modalLoading, setModalLoading] = useState(false); const [personalInfo, setPersonalInfo] = useState(null); const [isNavigating, setIsNavigating] = useState(false); const [clickedService, setClickedService] = useState(null); const [checkInDate, setCheckInDate] = useState(""); const [checkOutDate, setCheckOutDate] = useState(""); const [selectedPetType, setSelectedPetType] = useState("Dog"); const [showPetTypeModal, setShowPetTypeModal] = useState(false); const [showSearchBox, setShowSearchBox] = useState(true); const [showServiceModal, setShowServiceModal] = useState(false); const [petCounts, setPetCounts] = useState({ puppy: 0, smallDog: 0, mediumDog: 0, largeDog: 0, giantDog: 0, cat: 0, rabbit: 0, bird: 0 }); const reviewsRef = useRef(null); function CalendarGrid({ month, year, checkIn, checkOut, setCheckIn, setCheckOut, clickedService }) { // Helper to get days in month const daysInMonth = new Date(year, month + 1, 0).getDate(); const firstDay = new Date(year, month, 1).getDay(); // 0=Sun, 1=Mon, ... const today = new Date(); // Build calendar days const days = []; for(let i = 0; i < firstDay; i++){ days.push(null); // empty slots for first week } for(let d = 1; d <= daysInMonth; d++){ days.push(new Date(year, month, d)); } // Handle date click function handleDateClick(date) { const sameDayAllowed = [ "Drop-In Visits", "Daycare Services", "Pet Grooming", "Dog Walking" ]; if (!checkIn || checkIn && checkOut) { setCheckIn(date); setCheckOut(null); } else { // If same-day is allowed for the selected service if (sameDayAllowed.includes(clickedService) && date >= checkIn) { setCheckOut(date); } else if (date > checkIn) { setCheckOut(date); } else { setCheckIn(date); setCheckOut(null); } } } // Render return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-gray-500 mb-2", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, [ "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su" ].map((d)=>/*#__PURE__*/ React.createElement("div", { key: d, __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, d))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-1", __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this }, days.map((date, idx)=>{ if (!date) return /*#__PURE__*/ React.createElement("div", { key: idx, __source: { fileName: "", lineNumber: 281, columnNumber: 31 }, __self: this }); const isCheckIn = checkIn && date.toDateString() === checkIn.toDateString(); const isCheckOut = checkOut && date.toDateString() === checkOut.toDateString(); const isInRange = checkIn && checkOut && date > checkIn && date < checkOut; // Add IST logic const now = new Date(); const istOffset = 5.5 * 60 * 60 * 1000; const istNow = new Date(now.getTime() + now.getTimezoneOffset() * 60000 + istOffset); const todayIST = new Date(istNow.getFullYear(), istNow.getMonth(), istNow.getDate()); const isPast = date < todayIST; const isToday = date.getTime() === todayIST.getTime(); return /*#__PURE__*/ React.createElement("button", { key: idx, className: `py-2 w-9 h-9 text-center ${isCheckIn ? "bg-[#1B4B43] text-white font-bold rounded-l-full" : ""} ${isCheckOut ? "bg-[#1B4B43] text-white font-bold rounded-r-full" : ""} ${isInRange ? "bg-[#1B4B43]/20 text-[#1B4B43] rounded-none -mx-1" : ""} ${!isCheckIn && !isCheckOut && !isInRange ? "bg-gray-100 text-gray-900 rounded-full" : ""} ${isToday ? "border-b-4 border-[#1B4B43]" : ""} ${isPast ? "opacity-40 cursor-not-allowed" : ""} `, onClick: ()=>!isPast && handleDateClick(date), disabled: isPast, __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }, date.getDate()); }))); } const { data: user, loading: userLoading } = useUser(); const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams(); const services = [ { icon: "house-user", title: "Pet Boarding", tooltip: "Your pet stays at sitter's home 11 AM - 11 AM next day Going on a trip but can't bring your furry friend? No worries! A pet sitter can provide a loving home-away-from-home experience. Your pet will receive personalized care, including regular feeding, playtime, and plenty of cuddles, ensuring they feel happy and comfortable while you're away. They'll enjoy companionship and attention, so you can relax knowing they're in good hands.", subtitle: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 343, columnNumber: 9 }, __self: this }, "Your pet stays at sitter's home", " ", /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center bg-[#1B4B43]/10 text-[#1B4B43] px-2 py-0.5 rounded-full text-[10px] md:text-xs", __source: { fileName: "", lineNumber: 345, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }), "11 AM - 11 AM next day")), priceType: "night", overnight: true, image: "https://ucarecdn.com/f31ebbda-ea76-4b0e-8a3e-51bb6fa60f25/-/format/auto/" }, { icon: "home", title: "House Sitting", tooltip: "Sitter stays at your home 11 AM - 11 AM next day Does your pet feel most secure at home? You can trust our police-verified sitters to provide overnight care in your house, giving personalized attention and following their familiar routine, from meal times and playtime to cuddles and comfort. This service is perfect for pets who are happiest in their own surroundings or need a little extra care.", subtitle: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 361, columnNumber: 9 }, __self: this }, "Sitter stays at your home", " ", /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center bg-[#1B4B43]/10 text-[#1B4B43] px-2 py-0.5 rounded-full text-[10px] md:text-xs", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }), "11 AM - 11 AM next day")), priceType: "night", overnight: true, image: "https://ucarecdn.com/9bae494e-a2d3-403c-97bf-642043b125bd/-/format/auto/" }, { icon: "sun", title: "Daycare Services", tooltip: "Your pet stays at sitter's home in day time 8 hours Worried about your pet being home alone all day? Our sitters provide daytime care in their homes, offering personalized playtime, cuddles, and companionship. Your pet will enjoy a stimulating and loving environment while you're away.", subtitle: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 379, columnNumber: 9 }, __self: this }, "Your pet stays at sitter's home in day time", " ", /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center bg-[#1B4B43]/10 text-[#1B4B43] px-2 py-0.5 rounded-full text-[10px] md:text-xs", __source: { fileName: "", lineNumber: 381, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 382, columnNumber: 13 }, __self: this }), "8 hours")), priceType: "day", image: "https://ucarecdn.com/ea357be0-9f5d-41eb-bd1d-d4958ecb3179/-/format/auto/" }, { icon: "clock", title: "Drop-In Visits", tooltip: "Regular check-in visits 2-3 visits per day If you don't need full-time pet care, but just want someone to check in on your pet a few times in a day, a sitter can visit your home 2-3 times. They will feed your pet, give them fresh water, take them for a short walk, and spend some time with them so they don't feel lonely. This is great for pets who are mostly independent but still need some care and attention.", subtitle: /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 396, columnNumber: 9 }, __self: this }, "Regular check-in visits", " ", /*#__PURE__*/ React.createElement("span", { className: "inline-flex items-center bg-[#1B4B43]/10 text-[#1B4B43] px-2 py-0.5 rounded-full text-[10px] md:text-xs", __source: { fileName: "", lineNumber: 398, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }), "2-3 visits per day")), priceType: "visit", image: "https://ucarecdn.com/3e394756-b732-42ed-bd50-8de87c877677/-/format/auto/" }, { icon: "walking", title: "Dog Walking", tooltip: "Professional dog walking If you don't have time to walk your dog, a sitter can do it for you. They will take your dog on a 35-40 minute walk, giving them fresh air and exercise they need. This helps keep your dog happy, active, and healthy.", subtitle: "Professional dog walking", priceType: "walk", image: "https://ucarecdn.com/67465be2-8e57-40fd-9209-6afb49c700ed/-/format/auto/" }, { icon: "scissors", title: "Pet Grooming", tooltip: "Professional grooming service Pamper your pet with our professional grooming services! From luxurious baths and stylish haircuts to nail trims and more, we'll have your furry friend looking and feeling fresh, clean, and happy. Healthy skin and a beautiful coat are just the beginning!", subtitle: "Professional grooming service ", priceType: "session", image: "https://ucarecdn.com/24e27bba-34d7-4c8b-93e2-803c0225f100/-/format/auto/" } ]; const getCurrentLocation = async ()=>{ if ("geolocation" in navigator) { try { const permissionStatus = await navigator.permissions.query({ name: "geolocation" }); if (permissionStatus.state === "denied") { setError("Location access was denied. Please enable location access in your browser settings to use this feature."); return; } setIsLoading(true); const position = await new Promise((resolve, reject)=>{ navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 10000, enableHighAccuracy: true }); }); console.log("Got position:", position.coords); const response = await fetch("/api/current-location", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ latitude: position.coords.latitude, longitude: position.coords.longitude }) }); const data = await response.json(); if (data.error) { console.error("Location error:", data.error); setError(data.error); return; } if (!data) { console.error("Location error: No data returned from API"); setError("Unable to get location. Please try again."); return; } setLocation(data.formattedAddress); setLocationInput(data.formattedAddress); setCoordinates({ lat: position.coords.latitude, lng: position.coords.longitude }); console.log("Location updated:", data.formattedAddress); } catch (error) { console.error("Failed to get location:", error); if (error.code === 1) { setError("Location access was denied. Please enable location access in your browser settings."); } else { setError("Unable to get location. Please try again or enter manually."); } } finally{ setIsLoading(false); } } else { setError("Geolocation is not supported by your browser"); } }; useEffect(()=>{ const locationParam = params.get("location"); const latParam = params.get("lat"); const lngParam = params.get("lng"); if (locationParam && latParam && lngParam) { setLocation(locationParam); setLocationInput(locationInput); setCoordinates({ lat: parseFloat(latParam), lng: parseFloat(lngParam) }); } else if (user?.id && !localStorage.getItem(`location_set_${user.id}`)) { setShowLocation(true); localStorage.setItem(`location_set_${user.id}`, "true"); } else { getCurrentLocation(); } fetch("/api/google-analytics", { method: "POST" }).then((res)=>res.json()).then((data)=>{ if (data.script) { const scriptContainer = document.createElement("div"); scriptContainer.innerHTML = data.script; document.head.appendChild(scriptContainer); } else { console.error("Analytics script missing in response:", data); } }).catch((err)=>console.error("Failed to load analytics:", err)); }, []); useEffect(()=>{ // Remove any previous Tawk.to script const prevScript = document.querySelector("script[src*='tawk.to']"); if (prevScript && prevScript.parentNode) prevScript.parentNode.removeChild(prevScript); // Add new Tawk.to script const script = document.createElement("script"); script.type = "text/javascript"; script.async = true; script.src = "https://embed.tawk.to/682e0a7c98a1b819123fbe33/1irs0tdcf"; script.charset = "UTF-8"; script.setAttribute("crossorigin", "*"); script.onload = ()=>{ console.log("Tawk.to chat widget loaded successfully"); // Move the chat widget up from the bottom by 90px (above sticky buttons) const interval = setInterval(()=>{ const tawkWidget = document.querySelector("iframe[title='chat widget']") || document.querySelector("iframe[src*='tawk.to']"); if (tawkWidget) { tawkWidget.style.position = "fixed"; tawkWidget.style.bottom = "90px"; tawkWidget.style.right = "20px"; tawkWidget.style.zIndex = "9999"; clearInterval(interval); } }, 500); setTimeout(()=>clearInterval(interval), 5000); }; script.onerror = (e)=>{ console.error("Tawk.to chat widget failed to load", e); }; document.body.appendChild(script); return ()=>{ if (script.parentNode) script.parentNode.removeChild(script); }; }, []); useEffect(()=>{ // Only show on mobile if (window.innerWidth > 768) return; let timeoutId; let intervalId; function showRandomNotification() { if (socialProofClosed) return; const randomIndex = Math.floor(Math.random() * socialProofMessages.length); setSocialProofText(socialProofMessages[randomIndex]); setShowSocialProof(true); setTimeout(()=>setShowSocialProof(false), 7000); // 7 seconds } // Show first notification after 30-50 seconds, then repeat function scheduleNext() { const delay = 30000; // always 30 seconds timeoutId = setTimeout(()=>{ showRandomNotification(); scheduleNext(); }, delay); } scheduleNext(); return ()=>{ clearTimeout(timeoutId); clearInterval(intervalId); }; }, []); useEffect(()=>{ const initializeChat = async ()=>{ try { await fetch("/api/db/chatstorage", { method: "POST", body: JSON.stringify({ query: `CREATE TABLE IF NOT EXISTS chat_messages ( id INTEGER PRIMARY KEY AUTO_INCREMENT, user_id VARCHAR(255) NOT NULL, sitter_id VARCHAR(255) NOT NULL, message_text TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP, is_read BOOLEAN DEFAULT FALSE, sender_type ENUM('user', 'sitter') NOT NULL, attachment_url TEXT, booking_id VARCHAR(255), message_type ENUM('text', 'image', 'system') DEFAULT 'text' )` }) }); } catch (error) { console.error("Failed to initialize chat:", error); } finally{ setPageLoading(false); } }; initializeChat(); const generateSitemap = async ()=>{ try { const response = await fetch("/api/generate-sitemap", { method: "POST" }); if (!response.ok) { console.error("Failed to generate sitemap"); } } catch (error) { console.error("Sitemap generation error:", error); } }; generateSitemap(); // Place Tawk.to script before const script = document.createElement("script"); script.type = "text/javascript"; script.async = true; script.src = "https://embed.tawk.to/682e0a7c98a1b819123fbe33/1irs0tdcf"; script.charset = "UTF-8"; script.setAttribute("crossorigin", "*"); script.onload = ()=>{ console.log("Tawk.to chat widget loaded successfully"); }; script.onerror = (e)=>{ console.error("Tawk.to chat widget failed to load", e); }; document.body.appendChild(script); return ()=>{ if (script.parentNode) script.parentNode.removeChild(script); }; }, []); useEffect(()=>{ const fetchUserData = async ()=>{ if (user?.id) { try { const response = await fetch("/api/db/customerprofile", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `customer_profile` WHERE `user_id` = ?", values: [ user.id ] }) }); const data = await response.json(); if (data && data[0]) { setPersonalInfo(data[0]); } } catch (err) { console.error("Failed to fetch user data:", err); } } }; fetchUserData(); }, [ user ]); const handleLocationSearch = async (value)=>{ setLocationInput(value); setError(""); if (!value.trim()) { setPredictions([]); setShowPredictions(false); return; } if (value.length < 2) { setPredictions([]); setShowPredictions(false); return; } setIsLoading(true); try { const response = await fetch(`/api/google-place-autocomplete-handler`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ input: value, radius: 500 }) }); if (!response.ok) { throw new Error("Failed to fetch locations"); } const data = await response.json(); if (data.predictions && data.predictions.length > 0) { setPredictions(data.predictions.slice(0, 5)); setShowPredictions(true); } else { setPredictions([]); setShowPredictions(false); } } catch (err) { console.error("Failed to fetch locations:", err); setPredictions([]); setShowPredictions(false); } finally{ setIsLoading(false); } }; const handlePlaceSelect = async (prediction)=>{ if (!prediction || !prediction.description) { return; } setIsLoading(true); try { setLocation(prediction.description); setLocationInput(prediction.description); if (prediction.latitude && prediction.longitude) { setCoordinates({ lat: prediction.latitude, lng: prediction.longitude }); } setShowLocation(false); setPredictions([]); setShowPredictions(false); } catch (err) { console.error("Location selection error:", err); setLocationInput(""); setLocation(""); setCoordinates(null); } finally{ setIsLoading(false); } }; const handleNavigation = (url)=>{ if (isNavigating) return; setIsNavigating(true); setTimeout(()=>{ window.location.href = url; }, 1000); }; const handleSearch = async ()=>{ if (isNavigating) return; if (!location || !coordinates) { setError("Please select a location from the suggestions"); return; } const formatDate = (date)=>{ if (!date) return ""; const d = new Date(date); return d.toLocaleDateString("en-CA", { timeZone: "Asia/Kolkata" }); }; const searchParams = new URLSearchParams(); searchParams.append("location", location); searchParams.append("lat", coordinates.lat); searchParams.append("lng", coordinates.lng); searchParams.append("service", clickedService); const petTypeString = Object.entries(petCounts).filter(([key, value])=>value > 0).map(([key, value])=>`${key}:${value}`).join(","); if (petTypeString) { searchParams.append("petType", petTypeString); } searchParams.append("checkInDate", formatDate(checkIn)); searchParams.append("checkOutDate", formatDate(checkOut)); handleNavigation(`/sniffbnb-search?${searchParams.toString()}`); }; const handleEmailVerification = async (email)=>{ try { const response = await fetch(`/integrations/email-check-2/v1/email/verify?email=${encodeURIComponent(email)}`); const data = await response.json(); return data.status === "deliverable"; } catch (error) { console.error("Email verification error:", error); return false; } }; const handleSignup = ()=>{ setShowSignupModal(true); }; const renderServiceTile = (service, size)=>{ const sizeClasses = { large: "col-span-2 row-span-2 aspect-[1.5/1]", medium: "col-span-1 row-span-1 aspect-square", small: "col-span-1 row-span-1 aspect-square" }; const isLoading = clickedService === service.title && isNavigating; return /*#__PURE__*/ React.createElement("a", { href: `/sniffbnb-search?service=${encodeURIComponent(service.title)}`, className: `${sizeClasses[size]} bg-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group relative ${isLoading ? "pointer-events-none service-tile loading" : "service-tile"}`, onClick: (e)=>{ e.preventDefault(); if (!isLoading) { handleServiceSearch(service.title); } }, __source: { fileName: "", lineNumber: 821, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-full", __source: { fileName: "", lineNumber: 837, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: service.image, alt: service.title, className: `w-full h-full object-cover transition-opacity duration-300 ${isLoading ? "opacity-40" : ""}`, __source: { fileName: "", lineNumber: 838, columnNumber: 11 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center service-loading-overlay", __source: { fileName: "", lineNumber: 846, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw paw-loader", __source: { fileName: "", lineNumber: 847, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-white", __source: { fileName: "", lineNumber: 851, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-[#1B4B43] tracking-wide text-lg flex items-center justify-between", __source: { fileName: "", lineNumber: 852, columnNumber: 11 }, __self: this }, service.title, isLoading && /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#1B4B43]/70", __source: { fileName: "", lineNumber: 855, columnNumber: 15 }, __self: this }, "Loading...")))); }; const handleServiceSearch = (serviceTitle)=>{ if (isNavigating) return; if (!location || !coordinates) { setError("Please select a location first"); setShowLocation(true); return; } console.log(`Service clicked: ${serviceTitle}`); setClickedService(serviceTitle); const searchParams = new URLSearchParams(); searchParams.append("location", location); searchParams.append("lat", coordinates.lat); searchParams.append("lng", coordinates.lng); searchParams.append("service", serviceTitle); handleNavigation(`/sniffbnb-search?${searchParams.toString()}`); }; const menuItems = { main: [ { icon: "search", label: "Find Services", href: "/sniffbnb-search" }, { icon: "briefcase", label: "Become a Service Provider", href: "https://services.sniffbnb.com/", external: true }, { icon: "question-circle", label: "How it Works", href: "/how-it-works" } ], account: [ { icon: "user", label: "Profile", href: "/profile" }, { icon: "history", label: "Bookings", href: "/bookings" }, { icon: "heart", label: "Favorites", href: "/favorites" }, { icon: "heart", label: "Adopt a Pet", href: "http://adopt.sniffbnb.com/", external: true } ], other: [ { icon: "info-circle", label: "About Us", href: "/about" }, { icon: "phone", label: "Contact", href: "/contact" }, { icon: "shield-alt", label: "Safety", href: "/safety" } ] }; const publicMenuItems = [ { icon: "search", label: "Find Services", href: "/sniffbnb-search" }, { icon: "briefcase", label: "Become a Service Provider", href: "https://services.sniffbnb.com/", external: true }, { icon: "question-circle", label: "How it Works", href: "/how-it-works" }, { icon: "info-circle", label: "About Us", href: "/about" }, { icon: "phone", label: "Contact", href: "/contact" }, { icon: "shield-alt", label: "Safety", href: "/safety" }, { icon: "heart", label: "Adopt a Pet", href: "http://adopt.sniffbnb.com/", external: true } ]; const getInitials = ()=>{ if (!personalInfo?.name) return "?"; return personalInfo.name.split(" ").map((n)=>n[0]).join("").toUpperCase().slice(0, 2); }; const getDisplayName = ()=>{ return personalInfo?.name || user?.email?.split("@")[0] || "User"; }; const renderMobileMenu = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-black/50 backdrop-blur-sm z-[200] transition-opacity duration-300 ${showMobileNav ? "opacity-100" : "opacity-0 pointer-events-none"}`, onClick: ()=>setShowMobileNav(false), __source: { fileName: "", lineNumber: 941, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 right-0 w-[280px] h-full bg-white shadow-xl transform transition-transform duration-300 ease-out ${showMobileNav ? "translate-x-0" : "translate-x-full"}`, onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 947, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 953, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b flex items-center justify-between", __source: { fileName: "", lineNumber: 954, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium text-lg text-[#1B4B43]", __source: { fileName: "", lineNumber: 955, columnNumber: 15 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMobileNav(false), className: "w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-50 active:bg-gray-100", __source: { fileName: "", lineNumber: 956, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-gray-600", __source: { fileName: "", lineNumber: 960, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto", __source: { fileName: "", lineNumber: 964, columnNumber: 13 }, __self: this }, user && /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 966, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 967, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#1B4B43] text-white flex items-center justify-center font-medium", __source: { fileName: "", lineNumber: 968, columnNumber: 21 }, __self: this }, getInitials()), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 971, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium", __source: { fileName: "", lineNumber: 972, columnNumber: 23 }, __self: this }, getDisplayName()), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 973, columnNumber: 23 }, __self: this }, user.email)))), /*#__PURE__*/ React.createElement("div", { className: "py-2", __source: { fileName: "", lineNumber: 979, columnNumber: 15 }, __self: this }, (user ? menuItems.main : publicMenuItems).map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: `flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 active:bg-gray-100 ripple ${isNavigating ? "pointer-events-none" : ""}`, onClick: (e)=>{ if (!item.external) { e.preventDefault(); handleNavigation(item.href); } }, __source: { fileName: "", lineNumber: 982, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} w-5 text-[#1B4B43]`, __source: { fileName: "", lineNumber: 997, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1000, columnNumber: 23 }, __self: this }, item.label), isNavigating && !item.external && /*#__PURE__*/ React.createElement("div", { className: "loading-spinner ml-2", __source: { fileName: "", lineNumber: 1002, columnNumber: 25 }, __self: this })))), user && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "border-t", __source: { fileName: "", lineNumber: 1011, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-2", __source: { fileName: "", lineNumber: 1012, columnNumber: 21 }, __self: this }, menuItems.account.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, target: item.external ? "_blank" : undefined, rel: item.external ? "noopener noreferrer" : undefined, className: `flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 active:bg-gray-100 ripple ${isNavigating ? "pointer-events-none" : ""}`, onClick: (e)=>{ if (!item.external) { e.preventDefault(); handleNavigation(item.href); } }, __source: { fileName: "", lineNumber: 1014, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} w-5 text-[#1B4B43]`, __source: { fileName: "", lineNumber: 1031, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1034, columnNumber: 27 }, __self: this }, item.label), isNavigating && !item.external && /*#__PURE__*/ React.createElement("div", { className: "loading-spinner ml-2", __source: { fileName: "", lineNumber: 1036, columnNumber: 29 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "border-t", __source: { fileName: "", lineNumber: 1043, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-2", __source: { fileName: "", lineNumber: 1044, columnNumber: 21 }, __self: this }, menuItems.other.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: item.href, className: `flex items-center space-x-3 px-4 py-3 hover:bg-gray-50 active:bg-gray-100 ripple ${isNavigating ? "pointer-events-none" : ""}`, onClick: (e)=>{ e.preventDefault(); handleNavigation(item.href); }, __source: { fileName: "", lineNumber: 1046, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${item.icon} w-5 text-[#1B4B43]`, __source: { fileName: "", lineNumber: 1057, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1060, columnNumber: 27 }, __self: this }, item.label), isNavigating && /*#__PURE__*/ React.createElement("div", { className: "loading-spinner ml-2", __source: { fileName: "", lineNumber: 1062, columnNumber: 29 }, __self: this }))))))), user && /*#__PURE__*/ React.createElement("div", { className: "border-t p-4", __source: { fileName: "", lineNumber: 1073, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowMobileNav(false); // Add logout logic here }, className: "w-full flex items-center justify-center space-x-2 bg-gray-100 text-gray-700 rounded-xl p-3 hover:bg-gray-200 active:bg-gray-300 ripple", __source: { fileName: "", lineNumber: 1074, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt", __source: { fileName: "", lineNumber: 1081, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1082, columnNumber: 19 }, __self: this }, "Sign Out")))))); }; useEffect(()=>{ const script = document.createElement("script"); script.innerHTML = ` !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '668604042253171'); fbq('track', 'PageView'); `; document.head.appendChild(script); const noscript = document.createElement("noscript"); const img = document.createElement("img"); img.height = 1; img.width = 1; img.style.display = "none"; img.src = "https://www.facebook.com/tr?id=668604042253171&ev=PageView&noscript=1"; noscript.appendChild(img); document.head.appendChild(noscript); return ()=>{ document.head.removeChild(script); document.head.removeChild(noscript); }; }, []); useEffect(()=>{ // Add the Google Analytics script to the head const script = document.createElement("script"); script.async = true; script.src = "https://www.googletagmanager.com/gtag/js?id=G-7JWX7QF5PP"; document.head.appendChild(script); // Add the gtag config script const inlineScript = document.createElement("script"); inlineScript.innerHTML = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-7JWX7QF5PP'); `; document.head.appendChild(inlineScript); // Cleanup on unmount return ()=>{ document.head.removeChild(script); document.head.removeChild(inlineScript); }; }, []); // Format date for display const formatDisplayDate = (dateString)=>{ if (!dateString) return ""; const date = new Date(dateString); const day = date.getDate(); const month = date.toLocaleString("default", { month: "short" }); const year = date.getFullYear(); return `${day} ${month} ${year}`; }; // Handle date change const handleDateChange = (event)=>{ const selectedDate = event.target.value; setCheckInDate(selectedDate); setCheckOutDate(""); // Reset check-out date when check-in date changes }; function formatDateDisplay(date) { if (!date) return ""; const d = new Date(date); const day = d.getDate(); const month = d.toLocaleString("default", { month: "short" }); const year = d.getFullYear(); return `${day} ${month} ${year}`; } function SitterTestimonialCarousel() { // Hardcoded testimonials and images const testimonials = [ { text: "Pets feel like part of our family here. I treat every guest like my own.", img: "https://ucarecdn.com/2ac5652b-8644-475a-86d1-193bde671590/-/format/auto/" }, { text: "Your dog will be safe, loved, and cared for just like you'd want at home.", img: "https://ucarecdn.com/d18be5a8-8bec-4511-9c5a-7cc8c9ed6607/-/format/auto/" }, { text: "I love keeping pet parents updated regular photos, playtime videos, and full transparency.", img: "https://ucarecdn.com/87460cc5-2805-4c8d-8d9b-21ae0e404316/-/format/auto/" }, { text: "Most of my furry guests return and wag their tails the moment they arrive.", img: "https://ucarecdn.com/e6821219-4b5d-49f8-af7c-ee3edc468dc1/-/format/auto/" }, { text: "My home is safe, quiet, and cozy your pet’s second home when you’re away.", img: "https://ucarecdn.com/1ad44495-7222-4f6d-88cb-57fa8f7e44a8/-/format/auto/" }, { text: "Whether for a few hours or a weekend, I make sure your pet feels safe and loved.", img: "https://ucarecdn.com/d7a943a4-0587-43ea-8228-57fe279b4e3a/-/format/auto/" }, { text: "Every stay is filled with cuddles, playtime, and genuine care. I treat them like family.", img: "https://ucarecdn.com/8f435f6a-4ada-4e14-8da3-6e162a014d71/-/format/auto/" }, { text: "I involve my whole family pets here are never alone and always get attention.", img: "https://ucarecdn.com/d36b2b30-6fd4-42a3-a594-1e21daebdd4d/-/format/auto/" }, { text: "I understand how hard it is to leave your pet I ensure you're never worried.", img: "https://ucarecdn.com/3173e216-6773-4fb1-a447-1796e209d88f/-/format/auto/" }, { text: "I'm quick to respond, happy to video call, and share updates anytime. Your trust matters.", img: "https://ucarecdn.com/fa6a58a6-d1f3-4dc1-86ba-b0aa30902de9/-/format/auto/" }, { text: "From dogs and cats to the occasional parrot I ensure every guest feels welcome.", img: "https://ucarecdn.com/0ba33750-c97d-4f76-ba19-1bf9e536fcc6/-/format/auto/" }, { text: "Parents often tell me their pet didn’t want to leave. That’s when I know I’ve done it right.", img: "https://ucarecdn.com/88a0fd2e-5e6c-466e-8625-baacfd0def53/-/format/auto/" }, { text: "I've built real connections with the pets I host many are now like family to me.", img: "https://ucarecdn.com/88a0fd2e-5e6c-466e-8625-baacfd0def53/-/format/auto/" } ]; const randomIndex = Math.floor(Math.random() * testimonials.length); const [current, setCurrent] = React.useState(randomIndex); const testimonial = testimonials[current]; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-[#F5F5F5] rounded-xl p-4 shadow-sm relative flex items-center justify-between", __source: { fileName: "", lineNumber: 1236, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 pr-4", __source: { fileName: "", lineNumber: 1238, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#1B4B43] font-crimson-text text-sm leading-tight mb-0", __source: { fileName: "", lineNumber: 1239, columnNumber: 11 }, __self: this }, "“", testimonial.text, "”")), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 1244, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: testimonial.img, alt: "Sitter testimonial", className: "w-20 h-20 rounded-full object-cover border-2 border-[#1B4B43]", __source: { fileName: "", lineNumber: 1245, columnNumber: 11 }, __self: this }))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col m-0 p-0", __source: { fileName: "", lineNumber: 1256, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1257, columnNumber: 7 }, __self: this }, ` .min-h-screen { margin: 0; padding: 0; } @media (max-width: 768px) { * { margin-top: 0; padding-top: 0; } .mobile-header { position: sticky; top: 0; margin-top: 0; padding-top: 0; z-index: 100; } main { margin-top: 0; padding-top: 0; } } `), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1282, columnNumber: 7 }, __self: this }, ` .material-button { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); transition: background-color 0.3s; } .material-button:active { background-color: rgba(27, 75, 67, 0.1); } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .material-button::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #000 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; } .material-button:active::after { transform: scale(0, 0); opacity: .2; transition: 0s; } .service-card { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .service-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(27, 75, 67, 0.12); } .interactive-element { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .primary-button { box-shadow: 0 2px 6px rgba(27,75,67,0.15); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .primary-button:hover { box-shadow: 0 4px 12px rgba(27, 75, 67, 0.2); transform: translateY(-1px); } .loading-indicator { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .user-menu { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); transform-origin: top right; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Mobile materialistic refinements */ @media (max-width: 768px) { /* Material design elevation and shadows */ .material-elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .material-elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .material-elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Mobile header */ .mobile-header { position: sticky; top: 0; z-index: 100; } /* Mobile bottom navigation */ .mobile-bottom-nav { height: 64px; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); box-shadow: 0 -1px 3px rgba(0,0,0,0.12); border-top-left-radius: 16px; border-top-right-radius: 16px; } .mobile-nav-item { padding: 8px 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mobile-nav-item.active::after { content: ''; position: absolute; bottom: 0; width: 6px; height: 6px; background-color: #1B4B43; border-radius: 50%; } .mobile-nav-item.active i { color: #1B4B43; } .mobile-nav-item.active span { color: #1B4B43; font-weight: 500; } /* Service cards */ .mobile-service-card { border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .mobile-service-card:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } /* Location modal */ .mobile-location-modal { border-radius: 24px; overflow: hidden; } .mobile-location-input { border-radius: 12px; padding: 10px 12px; background-color: #f5f5f5; border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); } .mobile-location-input:focus { background-color: #fff; box-shadow: 0 1px 3px rgba(27,75,67,0.2); } .mobile-prediction-item { padding: 12px; border-bottom: 1px solid #f0f0f0; } .mobile-prediction-item:active { background-color: #f5f5f5; } /* Typography */ .mobile-title { font-size: 18px; font-weight: 500; color: #1B4B43; letter-spacing: -0.01em; } .mobile-subtitle { font-size: 12px; color: #666; } /* Spacing */ .mobile-section { margin-bottom: 24px; padding: 0 16px; } /* Touch targets */ .mobile-touch-target { min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; } } `), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1482, columnNumber: 7 }, __self: this }, ` @keyframes pulsePaw { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } } .paw-loader { animation: pulsePaw 1s ease-in-out infinite; color: #1B4B43; font-size: 2.5rem; } .service-loading-overlay { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); transition: all 0.3s ease-in-out; } .service-tile { transition: all 0.3s ease-in-out; } .service-tile.loading { pointer-events: none; opacity: 0.7; } `), showCalendarModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 z-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 1521, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl w-full max-w-lg max-h-[80vh] flex flex-col modal-animate overflow-y-auto", __source: { fileName: "", lineNumber: 1522, columnNumber: 11 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border-b", __source: { fileName: "", lineNumber: 1525, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCalendarMonth((prev)=>prev === 0 ? 11 : prev - 1); setCalendarYear((prev)=>prev === 0 ? prev - 1 : prev); }, className: "p-2", __source: { fileName: "", lineNumber: 1526, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 1533, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 1535, columnNumber: 15 }, __self: this }, new Date(calendarYear, calendarMonth).toLocaleString("default", { month: "long", year: "numeric" })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setCalendarMonth((prev)=>prev === 11 ? 0 : prev + 1); setCalendarYear((prev)=>prev === 11 ? prev + 1 : prev); }, className: "p-2", __source: { fileName: "", lineNumber: 1544, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 1551, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCalendarModal(false), className: "p-2 ml-2", __source: { fileName: "", lineNumber: 1553, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1557, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 1561, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 1563, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1564, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1565, columnNumber: 19 }, __self: this }, "Check-in"), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 1566, columnNumber: 19 }, __self: this }, checkIn ? checkIn.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) : "--")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1576, columnNumber: 17 }, __self: this }, checkIn && checkOut && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1B4B43] text-white px-3 py-1 rounded-full text-xs font-semibold", __source: { fileName: "", lineNumber: 1578, columnNumber: 21 }, __self: this }, clickedService === "Pet Boarding" || clickedService === "House Sitting" ? Math.round((checkOut - checkIn) / (1000 * 60 * 60 * 24)) : Math.round((checkOut - checkIn) / (1000 * 60 * 60 * 24)) + 1, " ", clickedService === "Pet Boarding" || clickedService === "House Sitting" ? "Nights" : "Days")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1594, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1595, columnNumber: 19 }, __self: this }, "Check-out"), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 1596, columnNumber: 19 }, __self: this }, checkOut ? checkOut.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" }) : "--"))), /*#__PURE__*/ React.createElement(CalendarGrid, { month: calendarMonth, year: calendarYear, checkIn: checkIn, checkOut: checkOut, setCheckIn: setCheckIn, setCheckOut: setCheckOut, clickedService: clickedService, __source: { fileName: "", lineNumber: 1608, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t pb-24", __source: { fileName: "", lineNumber: 1619, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#1B4B43] text-white py-3 rounded-full font-semibold", onClick: ()=>{ const sameDayAllowed = [ "Drop-In Visits", "Daycare Services", "Pet Grooming", "Dog Walking" ]; if (sameDayAllowed.includes(clickedService) && checkIn && !checkOut) { // Allow only check-in date for these services setShowCalendarModal(false); } else if (checkIn && checkOut) { // For all services, if both dates are picked, allow setShowCalendarModal(false); } else { // For other services, require both dates alert("Please select both check-in and check-out dates."); } }, __source: { fileName: "", lineNumber: 1620, columnNumber: 15 }, __self: this }, "Done")))), showPetTypeModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] flex items-end md:items-center justify-center", __source: { fileName: "", lineNumber: 1653, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-t-2xl w-full max-w-lg transform transition-transform duration-300 max-h-[70vh] overflow-y-auto", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 1654, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b flex justify-between items-center", __source: { fileName: "", lineNumber: 1658, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-[#1B4B43]", __source: { fileName: "", lineNumber: 1659, columnNumber: 15 }, __self: this }, "Select Pet Type(s)"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPetTypeModal(false), className: "p-2 text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 1662, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1666, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-0 max-h-[70vh] overflow-y-auto pb-16", __source: { fileName: "", lineNumber: 1669, columnNumber: 13 }, __self: this }, [ { key: "puppy", label: "Puppy", desc: "Under 6 months", icon: "dog" }, { key: "smallDog", label: "Small Dog", desc: "0-10 kg", icon: "dog" }, { key: "mediumDog", label: "Medium Dog", desc: "11-20 kg", icon: "dog" }, { key: "largeDog", label: "Large Dog", desc: "21-40 kg", icon: "dog" }, { key: "giantDog", label: "Giant Dog", desc: "41+ kg", icon: "dog" }, { key: "cat", label: "Cat", desc: "All sizes", icon: "cat" }, { key: "rabbit", label: "Rabbit", desc: "All sizes", icon: "rabbit" }, { key: "bird", label: "Bird", desc: "All sizes", icon: "dove" } ].map((pet)=>/*#__PURE__*/ React.createElement("div", { key: pet.key, className: "flex items-center justify-between py-3 border-b last:border-b-0", __source: { fileName: "", lineNumber: 1710, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 1714, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 1715, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${pet.icon} text-[#1B4B43] text-lg`, __source: { fileName: "", lineNumber: 1716, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1720, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 1721, columnNumber: 23 }, __self: this }, pet.label), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 1724, columnNumber: 23 }, __self: this }, pet.desc))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 1727, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: `w-8 h-8 rounded-full border ${petCounts[pet.key] > 0 ? "border-[#1B4B43] text-[#1B4B43]" : "border-gray-300 text-gray-300"} flex items-center justify-center text-lg`, onClick: ()=>{ setPetCounts((prev)=>({ ...prev, [pet.key]: Math.max(0, (prev[pet.key] || 0) - 1) })); console.log(`Pet type "${pet.key}" changed to`, (petCounts[pet.key] || 0) - 1); }, disabled: petCounts[pet.key] === 0, "aria-label": "Decrease", __source: { fileName: "", lineNumber: 1728, columnNumber: 21 }, __self: this }, "–"), /*#__PURE__*/ React.createElement("span", { className: "w-4 text-center", __source: { fileName: "", lineNumber: 1750, columnNumber: 21 }, __self: this }, petCounts[pet.key] || 0), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-8 h-8 rounded-full border border-[#1B4B43] text-[#1B4B43] flex items-center justify-center text-lg", onClick: ()=>{ setPetCounts((prev)=>({ ...prev, [pet.key]: (prev[pet.key] || 0) + 1 })); console.log(`Pet type "${pet.key}" changed to`, (petCounts[pet.key] || 0) + 1); }, "aria-label": "Increase", __source: { fileName: "", lineNumber: 1753, columnNumber: 21 }, __self: this }, "+"))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t flex justify-end sticky bottom-0 bg-white z-10", __source: { fileName: "", lineNumber: 1774, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#1B4B43] text-white px-6 py-2 rounded-full font-medium", onClick: ()=>setShowPetTypeModal(false), __source: { fileName: "", lineNumber: 1775, columnNumber: 15 }, __self: this }, "Done")))), /*#__PURE__*/ React.createElement(Header1, { currentAnimal: currentAnimal, user: user, __source: { fileName: "", lineNumber: 1786, columnNumber: 7 }, __self: this }), showLocation && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-8", __source: { fileName: "", lineNumber: 1788, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-2xl shadow-2xl w-full max-w-md relative modal-animate", __source: { fileName: "", lineNumber: 1789, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLocation(false), className: "absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-xl", "aria-label": "Close", __source: { fileName: "", lineNumber: 1790, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1795, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 1797, columnNumber: 13 }, __self: this }, "Set Your Location"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1798, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full border p-2 rounded mb-2 pr-10", placeholder: "Enter your location", value: locationInput, onChange: (e)=>{ setLocationInput(e.target.value); handleLocationSearch(e.target.value); }, autoFocus: true, __source: { fileName: "", lineNumber: 1799, columnNumber: 15 }, __self: this }), showPredictions && predictions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 bg-white border border-gray-200 rounded shadow-lg z-10 mt-1 max-h-60 overflow-y-auto", __source: { fileName: "", lineNumber: 1811, columnNumber: 17 }, __self: this }, predictions.map((prediction, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "px-4 py-2 cursor-pointer hover:bg-gray-100", onClick: ()=>handlePlaceSelect(prediction), __source: { fileName: "", lineNumber: 1813, columnNumber: 21 }, __self: this }, prediction.description))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 1825, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 border-2 border-gray-300 border-t-[#1B4B43] rounded-full animate-spin", __source: { fileName: "", lineNumber: 1826, columnNumber: 19 }, __self: this })) : locationInput ? /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg", onClick: ()=>{ setLocationInput(""); handleLocationSearch(""); }, "aria-label": "Clear", __source: { fileName: "", lineNumber: 1829, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1838, columnNumber: 19 }, __self: this })) : null))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden px-4 pt-4 pb-2 flex flex-col items-center", __source: { fileName: "", lineNumber: 1845, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-center text-base font-medium text-[#1B4B43] mb-1 whitespace-nowrap", __source: { fileName: "", lineNumber: 1846, columnNumber: 9 }, __self: this }, "Find Verified Home Boarders Nearby"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto text-[#1B4B43] text-center", __source: { fileName: "", lineNumber: 1849, columnNumber: 9 }, __self: this }, "No cages. Just cuddles.", " ", /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "paw", __source: { fileName: "", lineNumber: 1851, columnNumber: 11 }, __self: this }, "🐾"))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white border-b border-gray-100", __source: { fileName: "", lineNumber: 1857, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: ()=>{ console.log("Opening location modal from mobile bar"); setShowLocation(true); }, className: "flex items-center gap-3 p-4 active:bg-gray-50", __source: { fileName: "", lineNumber: 1858, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 1865, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-[#1B4B43]", __source: { fileName: "", lineNumber: 1866, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1868, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse space-y-1.5", __source: { fileName: "", lineNumber: 1870, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 w-20 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 1871, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-3 w-32 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 1872, columnNumber: 17 }, __self: this })) : location ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1876, columnNumber: 17 }, __self: this }, "Your location"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 1877, columnNumber: 17 }, __self: this }, location)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1883, columnNumber: 17 }, __self: this }, "Location needed"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#1B4B43]", __source: { fileName: "", lineNumber: 1884, columnNumber: 17 }, __self: this }, "Tap to set your location"))), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); console.log("Getting current location from mobile bar"); getCurrentLocation(); }, className: "w-10 h-10 flex items-center justify-center text-[#1B4B43] active:bg-gray-100 rounded-full", __source: { fileName: "", lineNumber: 1890, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt", __source: { fileName: "", lineNumber: 1898, columnNumber: 13 }, __self: this }))), showLocation && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-8", __source: { fileName: "", lineNumber: 1903, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-2xl shadow-2xl w-full max-w-md relative modal-animate", __source: { fileName: "", lineNumber: 1904, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLocation(false), className: "absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-xl", "aria-label": "Close", __source: { fileName: "", lineNumber: 1905, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1910, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 1912, columnNumber: 15 }, __self: this }, "Set Your Location"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 1913, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full border p-2 rounded mb-2 pr-10", placeholder: "Enter your location", value: locationInput, onChange: (e)=>{ setLocationInput(e.target.value); handleLocationSearch(e.target.value); }, autoFocus: true, __source: { fileName: "", lineNumber: 1914, columnNumber: 17 }, __self: this }), showPredictions && predictions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 bg-white border border-gray-200 rounded shadow-lg z-10 mt-1 max-h-60 overflow-y-auto", __source: { fileName: "", lineNumber: 1926, columnNumber: 19 }, __self: this }, predictions.map((prediction, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "px-4 py-2 cursor-pointer hover:bg-gray-100", onClick: ()=>handlePlaceSelect(prediction), __source: { fileName: "", lineNumber: 1928, columnNumber: 23 }, __self: this }, prediction.description))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 1939, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 border-2 border-gray-300 border-t-[#1B4B43] rounded-full animate-spin", __source: { fileName: "", lineNumber: 1940, columnNumber: 21 }, __self: this })) : locationInput ? /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg", onClick: ()=>{ setLocationInput(""); handleLocationSearch(""); }, "aria-label": "Clear", __source: { fileName: "", lineNumber: 1943, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 1952, columnNumber: 21 }, __self: this })) : null)))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center gap-3 p-4 border-t border-gray-100 active:bg-gray-50", onClick: ()=>setShowServiceModal(true), __source: { fileName: "", lineNumber: 1961, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 1965, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paw text-[#1B4B43]", __source: { fileName: "", lineNumber: 1966, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1968, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1969, columnNumber: 11 }, __self: this }, "Service"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 1970, columnNumber: 11 }, __self: this }, clickedService || "Choose Service")), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-gray-400 text-xs", __source: { fileName: "", lineNumber: 1974, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center gap-3 p-4 border-t border-gray-100 active:bg-gray-50", onClick: ()=>{ if (!clickedService) { setError("Please select a service first"); return; } setShowCalendarModal(true); }, __source: { fileName: "", lineNumber: 1977, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 1987, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt text-[#1B4B43]", __source: { fileName: "", lineNumber: 1988, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 1990, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 1991, columnNumber: 11 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 1992, columnNumber: 11 }, __self: this }, checkIn && checkOut ? `${formatDateDisplay(checkIn)} - ${formatDateDisplay(checkOut)}` : checkIn && [ "Drop-In Visits", "Daycare Services", "Pet Grooming", "Dog Walking" ].includes(clickedService) ? `${formatDateDisplay(checkIn)}` : "Choose Date")), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-gray-400 text-xs", __source: { fileName: "", lineNumber: 2006, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex items-center gap-3 p-4 border-t border-gray-100 active:bg-gray-50", onClick: ()=>setShowPetTypeModal(true), __source: { fileName: "", lineNumber: 2009, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-gray-50 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 2013, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dog text-[#1B4B43]", __source: { fileName: "", lineNumber: 2014, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-w-0", __source: { fileName: "", lineNumber: 2016, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 2017, columnNumber: 11 }, __self: this }, "Pet Type"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 truncate", __source: { fileName: "", lineNumber: 2018, columnNumber: 11 }, __self: this }, Object.entries(petCounts).filter(([k, v])=>v > 0).map(([k, v])=>{ const labelMap = { puppy: "Puppy", smallDog: "Small Dog", mediumDog: "Medium Dog", largeDog: "Large Dog", giantDog: "Giant Dog", cat: "Cat", rabbit: "Rabbit", bird: "Bird" }; return `${labelMap[k]}: ${v}`; }).join(", ") || "Select Pet Type")), /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-gray-400 text-xs", __source: { fileName: "", lineNumber: 2037, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 2040, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "md:hidden w-full bg-[#1B4B43] text-white py-2 rounded-full font-medium text-base hover:bg-[#143832] transition-colors", disabled: isNavigating, __source: { fileName: "", lineNumber: 2041, columnNumber: 9 }, __self: this }, isNavigating ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 2047, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block w-4 h-4 border-2 border-white border-t-[#1B4B43] rounded-full animate-spin mr-2", __source: { fileName: "", lineNumber: 2048, columnNumber: 15 }, __self: this }), "Loading...") : "Search"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-400 font-roboto text-[11px] mt-1 mb-1", __source: { fileName: "", lineNumber: 2055, columnNumber: 9 }, __self: this }, "Search homes, not kennels. Because pets deserve better."), /*#__PURE__*/ React.createElement("div", { className: "my-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 2058, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "md:hidden flex flex-col items-center mt-4 px-4", __source: { fileName: "", lineNumber: 2061, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-center font-medium text-[#1B4B43] mb-1", style: { fontSize: "clamp(12px, 4vw, 18px)", width: "100%" }, __source: { fileName: "", lineNumber: 2062, columnNumber: 11 }, __self: this }, "The People Who Make Sniffbnb Home"), /*#__PURE__*/ React.createElement(SitterTestimonialCarousel, { __source: { fileName: "", lineNumber: 2071, columnNumber: 11 }, __self: this }))), showSocialProof && !socialProofClosed && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-24 left-1/2 transform -translate-x-1/2 z-[9999] bg-white px-4 py-2 rounded-2xl shadow-lg flex items-center gap-3 animate-fadeInUp", style: { minWidth: 260, maxWidth: 420, width: "90vw", textAlign: "left", border: "1px solid #e6f4f1", transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)", boxShadow: "0 6px 24px rgba(27,75,67,0.10)" }, __source: { fileName: "", lineNumber: 2077, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 rounded-full bg-[#e6f4f1] flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 2090, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dog text-[#1B4B43] text-xl", __source: { fileName: "", lineNumber: 2091, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center gap-2", __source: { fileName: "", lineNumber: 2094, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#1B4B43] font-semibold text-xs font-roboto", style: { lineHeight: 1.2 }, __source: { fileName: "", lineNumber: 2095, columnNumber: 13 }, __self: this }, socialProofText), /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-dots text-[#1B4B43] text-base ml-1", __source: { fileName: "", lineNumber: 2101, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowSocialProof(false); setSocialProofClosed(true); }, className: "ml-2 p-1 rounded-full hover:bg-[#e6f4f1] transition", "aria-label": "Close notification", style: { lineHeight: 0 }, __source: { fileName: "", lineNumber: 2104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-[#1B4B43] text-base", __source: { fileName: "", lineNumber: 2113, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 2115, columnNumber: 11 }, __self: this }, ` @keyframes slideInRight { from { opacity: 0; transform: translateX(100%);} to { opacity: 1; transform: translateX(0);} } .animate-slideInRight { animation: slideInRight 0.4s cubic-bezier(0.4,0,0.2,1); } `)), pageLoading || userLoading ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-white flex items-center justify-center", __source: { fileName: "", lineNumber: 2129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 2130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-[#1B4B43] loading-text mb-4 hidden md:block", __source: { fileName: "", lineNumber: 2131, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "letter", __source: { fileName: "", lineNumber: 2132, columnNumber: 15 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("span", { className: "letter", __source: { fileName: "", lineNumber: 2133, columnNumber: 15 }, __self: this }, "n"), /*#__PURE__*/ React.createElement("span", { className: "letter", __source: { fileName: "", lineNumber: 2134, columnNumber: 15 }, __self: this }, "i"), /*#__PURE__*/ React.createElement("span", { className: "letter", __source: { fileName: "