function MainComponent() { const [caseStudies, setCaseStudies] = useState([]); const [selectedStudy, setSelectedStudy] = useState(null); const [error, setError] = useState(null); const [currentIndex, setCurrentIndex] = useState(0); const [loading, setLoading] = useState(true); useEffect(()=>{ const fetchCaseStudies = async ()=>{ try { const response = await fetch("/api/get-case-studies", { method: "POST" }); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setCaseStudies(data.caseStudies || []); } catch (err) { console.error(err); setError("Failed to load case studies"); } finally{ setLoading(false); } }; fetchCaseStudies(); }, []); useEffect(()=>{ if (caseStudies && caseStudies.length > 0) { const timer = setInterval(()=>{ setCurrentIndex((prevIndex)=>prevIndex === caseStudies.length - 1 ? 0 : prevIndex + 1); }, 3000); return ()=>clearInterval(timer); } }, [ caseStudies ]); const visibleStudies = useMemo(()=>{ if (!caseStudies || caseStudies.length === 0) return []; const items = []; for(let i = 0; i < Math.min(3, caseStudies.length); i++){ const index = (currentIndex + i) % caseStudies.length; items.push(caseStudies[index]); } return items; }, [ currentIndex, caseStudies ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-600 to-yellow-400 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-white mb-12 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Our Client Success Stories"), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, error), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[200px]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Loading...")) : visibleStudies.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-8 h-[200px]", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, visibleStudies.map((study, index)=>/*#__PURE__*/ React.createElement("div", { key: study.id, onClick: ()=>setSelectedStudy(study), className: "transform transition-all duration-500 cursor-pointer hover:scale-110", style: { opacity: index === 1 ? 1 : 0.7, scale: index === 1 ? "1.2" : "1" }, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: study.logo_url, alt: `${study.client_name} logo`, className: "w-[150px] h-[150px] object-contain bg-white rounded-lg shadow-xl p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[200px]", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-xl", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "No case studies available")), selectedStudy && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedStudy.logo_url, alt: `${selectedStudy.client_name} logo`, className: "w-[100px] h-[100px] object-contain", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedStudy(null), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-2xl", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, selectedStudy.client_name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, selectedStudy.description), /*#__PURE__*/ React.createElement("a", { href: selectedStudy.website_url, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt mr-2", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }), "Visit Website")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }