function MainComponent() { const [isLoaded, setIsLoaded] = useState(false); const [channelLink, setChannelLink] = useState(""); const [stats, setStats] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); useEffect(()=>{ setIsLoaded(true); }, []); useEffect(()=>{ const handleMouseMove = (e)=>{ const cards = document.querySelectorAll(".feature-card"); cards.forEach((card)=>{ const rect = card.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; card.style.setProperty("--mouse-x", `${x * 100}%`); card.style.setProperty("--mouse-y", `${y * 100}%`); }); }; window.addEventListener("mousemove", handleMouseMove); return ()=>window.removeEventListener("mousemove", handleMouseMove); }, []); const handleSearch = async ()=>{ if (!channelLink) { setError("נא להזין קישור לערוץ"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/analyze-channel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ channelLink }) }); if (!response.ok) { throw new Error(`התגובה מהשרת נכשלה: [${response.status}] ${response.statusText}`); } const result = await response.json(); if (result.success) { setStats(result.data); } else { setError(result.error || "אירעה שגיאה בניתוח הערוץ"); } } catch (err) { console.error(err); setError("אירעה שגיאה בניתוח הערוץ"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { dir: "rtl", className: "min-h-screen relative overflow-hidden", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 overflow-hidden", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-gray-900 via-[#1a1f35] to-[#0d1117]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid-background", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "waves h-full w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "wave1", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "wave2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "wave3", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto relative px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-center mb-12 transition-all duration-1000 ${isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative inline-block animate-float mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-telegram text-[#0088cc] text-7xl animate-spin-slow", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 animate-pulse-glow rounded-full bg-[#0088cc]/20", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "ניתוח ערוצי טלגרם"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "קבל נתונים וסטטיסטיקות מפורטות על כל ערוץ טלגרם")), /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "search-container backdrop-blur-lg bg-white/5 border border-white/10 rounded-2xl p-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 relative", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: channelLink, onChange: (e)=>setChannelLink(e.target.value), placeholder: "הכנס קישור או שם משתמש של ערוץ טלגרם", className: "w-full px-6 py-4 bg-transparent text-white placeholder-white/50 focus:outline-none text-right", name: "channel-link", disabled: loading, __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-link absolute left-4 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, disabled: loading, className: "px-8 py-3 bg-gradient-to-r from-[#0088cc] to-[#00c6ff] text-white rounded-xl hover:shadow-lg hover:shadow-[#0088cc]/50 transition-all duration-300 hover:scale-105 disabled:opacity-50", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 122, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "relative z-10", __source: { fileName: "", lineNumber: 124, columnNumber: 21 }, __self: this }, "נתח ערוץ"))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-red-400 text-right", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle ml-2", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }), error)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, [ { icon: "fa-bolt", title: "ניתוח מהיר", description: "קבל סטטיסטיקות מפורטות תוך שניות" }, { icon: "fa-chart-bar", title: "נתונים מפורטים", description: "צפיות, מנויים, קצב צמיחה ועוד" }, { icon: "fa-chart-line", title: "ויזואליזציה", description: "גרפים ותרשימים אינטראקטיביים" } ].map((feature, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `feature-card bg-white/5 backdrop-blur-md p-8 rounded-2xl border border-white/10 text-right transform transition-all duration-300 ${isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`, style: { transitionDelay: `${index * 200 + 600}ms` }, __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-6", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${feature.icon} text-[#0088cc] text-4xl animate-pulse-subtle`, __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#0088cc] filter blur-xl opacity-20 animate-pulse", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-3 text-white bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, feature.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, feature.description)))), stats && /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, [ { label: "מנויים", value: stats.subscribers.toLocaleString(), icon: "users" }, { label: "פוסטים", value: stats.posts.toLocaleString(), icon: "newspaper" }, { label: "צפיות ממוצעות", value: stats.avgViews.toLocaleString(), icon: "eye" }, { label: "קצב צמיחה", value: stats.growthRate + "%", icon: "chart-line" } ].map((stat, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white/5 backdrop-blur-md p-6 rounded-xl border border-white/10", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${stat.icon} text-[#0088cc]`, __source: { fileName: "", lineNumber: 210, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, stat.value)), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, stat.label))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 222, columnNumber: 7 }, __self: this }, ` @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } } @keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } @keyframes gradient-xy { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } .grid-background { background-image: linear-gradient(to right, #ffffff0f 1px, transparent 1px), linear-gradient(to bottom, #ffffff0f 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(circle at center, black, transparent 80%); } .feature-card { position: relative; isolation: isolate; } .feature-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 136, 204, 0.15) 0%, transparent 50% ); opacity: 0; transition: opacity 0.3s; z-index: -1; } .feature-card:hover::before { opacity: 1; } .wave1, .wave2, .wave3 { position: absolute; width: 200%; height: 200%; background: linear-gradient(45deg, #0088cc, #00c6ff); opacity: 0.4; animation: wave 8s infinite linear; } .wave2 { animation-delay: -2s; opacity: 0.2; } .wave3 { animation-delay: -4s; opacity: 0.1; } @keyframes wave { 0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); } 100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } .animate-spin-slow { animation: spin-slow 10s linear infinite; } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; } .animate-gradient-xy { animation: gradient-xy 15s ease infinite; background-size: 400% 400%; } .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,136,204,0.3), 0 0 40px rgba(0,136,204,0.2); } 50% { box-shadow: 0 0 40px rgba(0,136,204,0.5), 0 0 80px rgba(0,136,204,0.3); } } `)); }