function MainComponent() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [selectedCategory, setSelectedCategory] = useState("all"); const categories = [ { id: "all", name: "Tất cả" }, { id: "ai", name: "Trí tuệ nhân tạo" }, { id: "multimedia", name: "Đa phương tiện" }, { id: "training", name: "Đào tạo" } ]; const services = [ { id: 1, name: "Sản Xuất Nội Dung Đa Phương Tiện", description: "Hình ảnh, Video... quảng cáo chuyên nghiệp, sáng tạo. Tối ưu hiệu quả sản xuất về thời gian, chi phí và chất lượng", image: "https://image.tensorartassets.com/cdn-cgi/image/anim=true,plain=false,w=2048,f=jpeg,q=85/posts/images/637285499601470901/e7ac34bd-82c0-47aa-870e-fc18aebd4334.png", category: "multimedia", price: 5000000 }, { id: 2, name: "Phát Triển Ứng Dụng AI", description: "Xây dựng các ứng dụng được tùy chỉnh chính xác theo nhu cầu của doanh nghiệp. Hoạt động ổn định và dễ dàng nâng cấp, bổ sung các tính năng mới.", image: "https://image.tensorartassets.com/cdn-cgi/image/anim=true,plain=false,w=2048,f=jpeg,q=85/posts/images/637285499601470901/1fe6fd13-f8f8-4624-b678-757331d07c66.png", category: "ai", price: null }, { id: 3, name: "Huấn Luyện Mô Hình AI", description: "Huấn luyện mô hình AI độc quyền dành riêng cho doanh nghiệp của bạn. Tùy chỉnh mô hình dựa trên dữ liệu cụ thể, đảm bảo tính chính xác và triển khai nhanh chóng", image: "https://image.tensorartassets.com/cdn-cgi/image/anim=true,plain=false,w=2048,f=jpeg,q=85/posts/images/637285499601470901/252aaac4-25e0-456e-8f95-19e113ea209e.png", category: "ai", price: null }, { id: 4, name: "Tư Vấn & Đào Tạo AI", description: "Giải pháp toàn diện giúp doanh nghiệp làm chủ công nghệ AI. Đội ngũ chuyên gia có 17+ năm kinh nghiệm", image: "https://image.tensorartassets.com/cdn-cgi/image/anim=true,plain=false,w=2048,f=jpeg,q=85/posts/images/637285499601470901/4c114d18-5ae3-4de0-99e4-cd12cc1475fc.png", category: "training", price: 10000000 } ]; useEffect(()=>{ setTimeout(()=>{ setLoading(false); }, 1000); }, []); const filteredServices = selectedCategory === "all" ? services : services.filter((service)=>service.category === selectedCategory); if (error) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white font-roboto p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-4xl text-red-500 mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, error))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-20", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold text-[#00ffff] mb-8 text-center", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Dịch Vụ Của Chúng Tôi"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mb-12", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setSelectedCategory(category.id), className: `px-6 py-2 rounded-full transition-all ${selectedCategory === category.id ? "bg-[#00ffff] text-[#121212]" : "bg-[#00ffff]/10 hover:bg-[#00ffff]/20"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, category.name))), loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4, 5, 6 ].map((i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "animate-pulse", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff]/10 h-48 rounded-lg mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-[#ffffff]/10 rounded mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-20 bg-[#ffffff]/10 rounded mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-[#ffffff]/10 rounded w-1/3", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, filteredServices.map((service)=>/*#__PURE__*/ React.createElement("div", { key: service.id, className: "border border-[#00ffff]/20 rounded-lg overflow-hidden hover:border-[#00ffff]/40 transition-all", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative aspect-video", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: service.image, alt: service.name, className: "w-full h-full object-cover", loading: "lazy", __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3 text-[#00ffff]", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, service.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-4 min-h-[80px]", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, service.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#00ffff] font-bold", __source: { fileName: "", lineNumber: 135, columnNumber: 21 }, __self: this }, service.price ? `${service.price.toLocaleString()}đ` : "Liên hệ báo giá"), /*#__PURE__*/ React.createElement("a", { href: "tel:+84984519098", className: "inline-flex items-center gap-2 bg-[#00ffff] text-[#121212] px-4 py-2 rounded-full hover:bg-[#00ffff]/80 transition-all", __source: { fileName: "", lineNumber: 140, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 144, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 145, columnNumber: 23 }, __self: this }, "Tư vấn ngay")))))))), /*#__PURE__*/ React.createElement("a", { href: "tel:+84984519098", className: "fixed bottom-8 right-8 bg-[#00ffff] text-black p-4 rounded-full hover:bg-[#00ffff]/80 active:scale-95 transition-all shadow-lg", "aria-label": "Gọi điện", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-fade-in { animation: fadeIn 0.3s ease-out; } .animate-slide-in { animation: slideIn 0.5s ease-out; } `)); }