function MainComponent() { const [posts, setPosts] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [searchQuery, setSearchQuery] = React.useState(""); const [filteredPosts, setFilteredPosts] = React.useState([]); React.useEffect(()=>{ fetchPosts(); }, []); React.useEffect(()=>{ if (searchQuery.trim() === "") { setFilteredPosts(posts); } else { const filtered = posts.filter((post)=>post.title.toLowerCase().includes(searchQuery.toLowerCase()) || post.content_text && post.content_text.toLowerCase().includes(searchQuery.toLowerCase())); setFilteredPosts(filtered); } }, [ searchQuery, posts ]); const fetchPosts = async ()=>{ try { setLoading(true); const response = await fetch("/api/get-posts", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch posts"); } const data = await response.json(); setPosts(data.posts || []); setFilteredPosts(data.posts || []); } catch (err) { console.error("Error fetching posts:", err); setError("Failed to load blog posts"); } finally{ setLoading(false); } }; const formatDate = (dateString)=>{ const date = new Date(dateString); return date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); }; const truncateText = (text, maxLength = 150)=>{ if (!text) return ""; if (text.length <= maxLength) return text; return text.substring(0, maxLength).trim() + "..."; }; const getYouTubeEmbedUrl = (url)=>{ const videoId = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/); return videoId ? `https://www.youtube.com/embed/${videoId[1]}` : url; }; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", backgroundColor: "#FDF6E3" }, __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { style: { backgroundColor: "#FFFFFF", borderBottom: "1px solid #E8D5B7", position: "sticky", top: 0, zIndex: 50, boxShadow: "0 2px 8px rgba(139, 69, 19, 0.1)" }, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "1rem 2rem", display: "flex", alignItems: "center", gap: "2rem" }, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: "60px", height: "60px", borderRadius: "50%", background: "linear-gradient(135deg, #FFE4B5, #F5DEB3)", border: "3px solid #D2691E", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", boxShadow: "0 4px 12px rgba(210, 105, 30, 0.3)", overflow: "hidden" }, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { position: "relative", width: "100%", height: "100%" }, __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "5px", left: "8px", right: "8px", height: "25px", background: "linear-gradient(135deg, #FFD700, #FFA500)", borderRadius: "20px 20px 15px 15px" }, __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "18px", left: "12px", right: "12px", height: "20px", backgroundColor: "#FDBCB4", borderRadius: "15px" }, __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "22px", left: "18px", width: "4px", height: "4px", backgroundColor: "#4169E1", borderRadius: "50%" }, __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "22px", right: "18px", width: "4px", height: "4px", backgroundColor: "#4169E1", borderRadius: "50%" }, __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { position: "absolute", top: "28px", left: "50%", transform: "translateX(-50%)", width: "8px", height: "4px", border: "1px solid #FF69B4", borderTop: "none", borderRadius: "0 0 8px 8px" }, __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { style: { flex: 1 }, __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", color: "#8B4513", margin: 0, fontFamily: "Playfair Display, serif" }, __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, "Kirsten Van Horne's Travel Obsessional"), /*#__PURE__*/ React.createElement("p", { style: { color: "#A0522D", margin: 0, fontSize: "1rem", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "Curated travel stories from around the globe")), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "1.5rem" }, __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/featured", style: { color: "#8B4513", textDecoration: "none", fontSize: "1rem", fontWeight: "600", fontFamily: "Lato, sans-serif", padding: "0.5rem 1rem", borderRadius: "6px", transition: "all 0.3s ease", border: "2px solid #D2691E", backgroundColor: "transparent" }, onMouseEnter: (e)=>{ e.target.style.backgroundColor = "#D2691E"; e.target.style.color = "#FFFFFF"; }, onMouseLeave: (e)=>{ e.target.style.backgroundColor = "transparent"; e.target.style.color = "#8B4513"; }, __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "Featured Articles"), /*#__PURE__*/ React.createElement("div", { style: { position: "relative" }, __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search videos...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), style: { padding: "0.5rem 2.5rem 0.5rem 1rem", borderRadius: "20px", border: "2px solid #E8D5B7", backgroundColor: "#FFFFFF", fontSize: "0.9rem", fontFamily: "Lato, sans-serif", width: "200px", outline: "none", transition: "border-color 0.3s ease" }, onFocus: (e)=>{ e.target.style.borderColor = "#D2691E"; }, onBlur: (e)=>{ e.target.style.borderColor = "#E8D5B7"; }, __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", style: { position: "absolute", right: "1rem", top: "50%", transform: "translateY(-50%)", color: "#A0522D", fontSize: "0.9rem" }, __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("main", { style: { maxWidth: "1200px", margin: "0 auto", padding: "2rem" }, __source: { fileName: "", lineNumber: 269, columnNumber: 7 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", padding: "4rem", color: "#8B4513", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, "Loading amazing travel stories..."), error && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", padding: "4rem", color: "#B22222", fontFamily: "Lato, sans-serif", backgroundColor: "#FFF5F5", borderRadius: "8px", border: "1px solid #FFCDD2" }, __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, error), !loading && !error && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", { style: { textAlign: "center", marginBottom: "3rem", padding: "3rem 2rem", background: "linear-gradient(135deg, #FFFACD, #F5DEB3)", borderRadius: "16px", boxShadow: "0 8px 24px rgba(139, 69, 19, 0.15)", border: "2px solid #E8D5B7" }, __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { fontSize: "2.5rem", fontWeight: "bold", color: "#8B4513", marginBottom: "1rem", fontFamily: "Playfair Display, serif" }, __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }, "Welcome to My Travel Obsessional"), /*#__PURE__*/ React.createElement("p", { style: { fontSize: "1.2rem", color: "#A0522D", maxWidth: "600px", margin: "0 auto", lineHeight: "1.6", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, "Discover the world's most captivating destinations through carefully curated travel vlogs. From hidden gems to iconic landmarks, every story is an invitation to explore.")), searchQuery.trim() !== "" && /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "2rem", padding: "1rem", backgroundColor: "#FFFFFF", borderRadius: "8px", border: "1px solid #E8D5B7", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 348, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { style: { color: "#8B4513", margin: 0 }, __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, filteredPosts.length > 0 ? `Found ${filteredPosts.length} result${filteredPosts.length !== 1 ? "s" : ""} for "${searchQuery}"` : `No results found for "${searchQuery}"`), filteredPosts.length === 0 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSearchQuery(""), style: { marginTop: "0.5rem", background: "none", border: "none", color: "#D2691E", cursor: "pointer", textDecoration: "underline", fontSize: "0.9rem" }, __source: { fileName: "", lineNumber: 364, columnNumber: 19 }, __self: this }, "Clear search")), /*#__PURE__*/ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))", gap: "2rem", marginBottom: "3rem" }, __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, filteredPosts.map((post)=>/*#__PURE__*/ React.createElement("article", { key: post.id, style: { backgroundColor: "#FFFFFF", borderRadius: "16px", overflow: "hidden", boxShadow: "0 8px 24px rgba(139, 69, 19, 0.12)", transition: "transform 0.3s ease, box-shadow 0.3s ease", cursor: "pointer", border: "1px solid #E8D5B7" }, onMouseEnter: (e)=>{ e.currentTarget.style.transform = "translateY(-8px)"; e.currentTarget.style.boxShadow = "0 16px 40px rgba(139, 69, 19, 0.2)"; }, onMouseLeave: (e)=>{ e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 24px rgba(139, 69, 19, 0.12)"; }, onClick: ()=>window.location.href = `/post/${post.id}`, __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0, overflow: "hidden" }, __source: { fileName: "", lineNumber: 416, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: getYouTubeEmbedUrl(post.youtube_url), style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: "none" }, allowFullScreen: true, title: post.title, __source: { fileName: "", lineNumber: 424, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { padding: "1.5rem" }, __source: { fileName: "", lineNumber: 440, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { fontSize: "1.5rem", fontWeight: "bold", color: "#8B4513", marginBottom: "0.5rem", lineHeight: "1.3", fontFamily: "Playfair Display, serif" }, __source: { fileName: "", lineNumber: 441, columnNumber: 21 }, __self: this }, post.title), /*#__PURE__*/ React.createElement("p", { style: { color: "#D2691E", fontSize: "0.9rem", marginBottom: "1rem", fontFamily: "Lato, sans-serif", fontWeight: "600" }, __source: { fileName: "", lineNumber: 454, columnNumber: 21 }, __self: this }, formatDate(post.date_published)), /*#__PURE__*/ React.createElement("p", { style: { color: "#A0522D", lineHeight: "1.6", marginBottom: "1rem", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 466, columnNumber: 21 }, __self: this }, truncateText(post.content_text)), /*#__PURE__*/ React.createElement("button", { style: { background: "linear-gradient(135deg, #D2691E, #CD853F)", color: "#FFFFFF", border: "none", padding: "0.75rem 1.5rem", borderRadius: "8px", fontSize: "0.9rem", fontWeight: "600", cursor: "pointer", transition: "all 0.3s ease", fontFamily: "Lato, sans-serif", boxShadow: "0 4px 12px rgba(210, 105, 30, 0.3)" }, onMouseEnter: (e)=>{ e.target.style.background = "linear-gradient(135deg, #B8860B, #DAA520)"; e.target.style.transform = "translateY(-2px)"; e.target.style.boxShadow = "0 6px 16px rgba(210, 105, 30, 0.4)"; }, onMouseLeave: (e)=>{ e.target.style.background = "linear-gradient(135deg, #D2691E, #CD853F)"; e.target.style.transform = "translateY(0)"; e.target.style.boxShadow = "0 4px 12px rgba(210, 105, 30, 0.3)"; }, __source: { fileName: "", lineNumber: 477, columnNumber: 21 }, __self: this }, "Watch & Read More"))))), filteredPosts.length === 0 && searchQuery.trim() === "" && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", padding: "4rem", color: "#8B4513", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 514, columnNumber: 15 }, __self: this }, "No travel stories yet. Check back soon for amazing adventures!"))), /*#__PURE__*/ React.createElement("footer", { style: { background: "linear-gradient(135deg, #8B4513, #A0522D)", color: "#FFFFFF", padding: "3rem 2rem 2rem", marginTop: "4rem" }, __source: { fileName: "", lineNumber: 530, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto", textAlign: "center" }, __source: { fileName: "", lineNumber: 538, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "2rem", marginBottom: "2rem", flexWrap: "wrap", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 545, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", style: { color: "#FFFFFF", textDecoration: "none", fontSize: "1rem", transition: "color 0.2s ease" }, onMouseEnter: (e)=>e.target.style.color = "#F5DEB3", onMouseLeave: (e)=>e.target.style.color = "#FFFFFF", __source: { fileName: "", lineNumber: 555, columnNumber: 13 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("a", { href: "/contact", style: { color: "#FFFFFF", textDecoration: "none", fontSize: "1rem", transition: "color 0.2s ease" }, onMouseEnter: (e)=>e.target.style.color = "#F5DEB3", onMouseLeave: (e)=>e.target.style.color = "#FFFFFF", __source: { fileName: "", lineNumber: 568, columnNumber: 13 }, __self: this }, "Contact Us"), /*#__PURE__*/ React.createElement("a", { href: "/privacy", style: { color: "#FFFFFF", textDecoration: "none", fontSize: "1rem", transition: "color 0.2s ease" }, onMouseEnter: (e)=>e.target.style.color = "#F5DEB3", onMouseLeave: (e)=>e.target.style.color = "#FFFFFF", __source: { fileName: "", lineNumber: 581, columnNumber: 13 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("a", { href: "/terms", style: { color: "#FFFFFF", textDecoration: "none", fontSize: "1rem", transition: "color 0.2s ease" }, onMouseEnter: (e)=>e.target.style.color = "#F5DEB3", onMouseLeave: (e)=>e.target.style.color = "#FFFFFF", __source: { fileName: "", lineNumber: 594, columnNumber: 13 }, __self: this }, "Terms & Conditions")), /*#__PURE__*/ React.createElement("p", { style: { color: "#F5DEB3", fontSize: "0.9rem", fontFamily: "Lato, sans-serif" }, __source: { fileName: "", lineNumber: 608, columnNumber: 11 }, __self: this }, "© 2025 Kirsten Van Horne's Travel Obsessional. All rights reserved.")))); }