function Bulk1() { const { data: user } = useUser(); const [files, setFiles] = useState([]); const [processedImages, setProcessedImages] = useState([]); const [error, setError] = useState(null); const [dragActive, setDragActive] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [progress, setProgress] = useState(0); const [credits, setCredits] = useState(null); const [upload, { loading }] = useUpload(); useEffect(()=>{ if (user) { fetch("/api/credits-manager", { method: "POST", body: JSON.stringify({ action: "get_balance" }) }).then((r)=>r.json()).then((data)=>{ setCredits(data.credits); }); } }, [ user ]); const processImage = useCallback(async (file)=>{ try { if (credits <= 0) { throw new Error("Insufficient credits"); } setIsProcessing(true); const { url } = await upload({ file }); const response = await fetch("/api/background-remover", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to process image"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setCredits(data.credits); return data.url; } catch (err) { console.error("Image processing error:", err); setError(err.message); return null; } finally{ setIsProcessing(false); } }, [ upload, credits ]); const handleDownload = async (url, index)=>{ try { const response = await fetch(url); const blob = await response.blob(); const downloadUrl = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = downloadUrl; link.download = `removed-background-${index + 1}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(downloadUrl); } catch (err) { setError("Failed to download image"); } }; const handleUpload = useCallback(async (e)=>{ if (!user) { window.location.href = "/auth?tab=signin&callbackUrl=/bulk"; return; } const selectedFiles = Array.from(e.target.files || e.dataTransfer?.files || []); setFiles(selectedFiles); setError(null); const processed = []; for(let i = 0; i < selectedFiles.length; i++){ const file = selectedFiles[i]; if (!file.type.startsWith("image/")) { setError(`File ${file.name} is not an image`); continue; } try { const processedUrl = await processImage(file); if (processedUrl) { processed.push({ url: processedUrl, name: file.name }); setProgress((i + 1) / selectedFiles.length * 100); } } catch (err) { setError(`Failed to process ${file.name}: ${err.message}`); } } setProcessedImages(processed); }, [ processImage, user ]); const downloadAllProcessed = useCallback(async ()=>{ for(let i = 0; i < processedImages.length; i++){ await handleDownload(processedImages[i].url, i); } }, [ processedImages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a192f]", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto font-bold text-white mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Bulk Background Removal"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Process multiple images at once. Perfect for e-commerce products or large photo collections.")), user && /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] rounded-xl p-4 text-center mb-8", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#64ffda] text-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "Current Credit Balance: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 145, columnNumber: 41 }, __self: this }, credits)), /*#__PURE__*/ React.createElement("a", { href: "/pricing", className: "bg-[#64ffda] text-[#0a192f] px-4 py-2 rounded-lg hover:bg-[#4fd1b5] transition-colors duration-200 mt-4 inline-block", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, "Purchase More Credits")), !user ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] rounded-xl p-8 text-center", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, "Sign in to Remove Backgrounds"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Create an account to start removing backgrounds from your images."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/auth?tab=signin&callbackUrl=/bulk", className: "bg-blue-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition-colors duration-200", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/auth?tab=signup&callbackUrl=/bulk", className: "bg-[#2a3241] text-white px-6 py-3 rounded-lg font-medium hover:bg-[#1f2937] transition-colors duration-200", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, "Sign Up"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: `relative border-2 border-dashed rounded-xl p-8 text-center transition-colors duration-200 ${dragActive ? "border-blue-500 bg-[#172a45]" : "border-gray-600 hover:border-blue-400"} bg-[#112240]`, onDragEnter: (e)=>{ e.preventDefault(); setDragActive(true); }, onDragLeave: (e)=>{ e.preventDefault(); setDragActive(false); }, onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>{ e.preventDefault(); setDragActive(false); handleUpload(e); }, __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, accept: "image/*", onChange: handleUpload, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-white", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-[#64ffda]", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "Drag & drop multiple images here"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, "or click to browse"))), files.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-white", __source: { fileName: "", lineNumber: 220, columnNumber: 21 }, __self: this }, files.length, " Images Selected"), processedImages.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: downloadAllProcessed, className: "bg-[#64ffda] text-[#0a192f] px-6 py-2 rounded-lg hover:bg-[#4fd1b5] transition-colors duration-200", __source: { fileName: "", lineNumber: 224, columnNumber: 23 }, __self: this }, "Download All")), isProcessing && /*#__PURE__*/ React.createElement("div", { className: "bg-[#172a45] rounded-lg p-4", __source: { fileName: "", lineNumber: 234, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-white mb-2", __source: { fileName: "", lineNumber: 235, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 236, columnNumber: 25 }, __self: this }, "Processing Images..."), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 237, columnNumber: 25 }, __self: this }, Math.round(progress), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#233554] rounded-full h-2", __source: { fileName: "", lineNumber: 239, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#64ffda] h-2 rounded-full transition-all duration-300", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 240, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative bg-[#172a45] rounded-lg p-4 group", __source: { fileName: "", lineNumber: 250, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(file), alt: `Preview ${index + 1}`, className: "w-full h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 254, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-white text-sm truncate", __source: { fileName: "", lineNumber: 259, columnNumber: 25 }, __self: this }, file.name), processedImages[index] && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200", __source: { fileName: "", lineNumber: 263, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(processedImages[index].url, index), className: "bg-[#64ffda] text-[#0a192f] px-4 py-2 rounded-lg hover:bg-[#4fd1b5]", __source: { fileName: "", lineNumber: 264, columnNumber: 29 }, __self: this }, "Download")))))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff6b6b] bg-opacity-20 text-[#ff6b6b] p-4 rounded-lg", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mt-16", __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 290, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 292, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, "Fast Processing"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 297, columnNumber: 19 }, __self: this }, "Process multiple images simultaneously with our advanced AI technology")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, "High Quality"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this }, "Get professional-grade results with precise edge detection")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-download-alt text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 315, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, "Batch Download"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }, "Download all processed images at once in high-resolution PNG format")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#112240] border-t border-[#233554] mt-20", __source: { fileName: "", lineNumber: 331, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 332, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 333, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 335, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 337, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 338, columnNumber: 19 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/careers", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, "Careers")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 364, columnNumber: 15 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/remove", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 367, columnNumber: 19 }, __self: this }, "Background Removal")))))))); } function MainComponent() { const { data: user } = useUser(); const [files, setFiles] = useState([]); const [processedImages, setProcessedImages] = useState([]); const [error, setError] = useState(null); const [dragActive, setDragActive] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [progress, setProgress] = useState(0); const [credits, setCredits] = useState(null); const [upload, { loading }] = useUpload(); useEffect(()=>{ if (user) { fetch("/api/credits-manager", { method: "POST", body: JSON.stringify({ action: "get_balance" }) }).then((r)=>r.json()).then((data)=>{ setCredits(data.credits); }); } }, [ user ]); const processImage = useCallback(async (file)=>{ try { if (credits <= 0) { throw new Error("Insufficient credits"); } setIsProcessing(true); const { url } = await upload({ file }); const response = await fetch("/api/background-remover", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to process image"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setCredits(data.credits); return data.url; } catch (err) { console.error("Image processing error:", err); setError(err.message); return null; } finally{ setIsProcessing(false); } }, [ upload, credits ]); const handleDownload = async (url, index)=>{ try { const response = await fetch(url); const blob = await response.blob(); const downloadUrl = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = downloadUrl; link.download = `removed-background-${index + 1}.png`; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(downloadUrl); } catch (err) { setError("Failed to download image"); } }; const handleUpload = useCallback(async (e)=>{ if (!user) { window.location.href = "/auth?tab=signin&callbackUrl=/bulk"; return; } const selectedFiles = Array.from(e.target.files || e.dataTransfer?.files || []); setFiles(selectedFiles); setError(null); const processed = []; for(let i = 0; i < selectedFiles.length; i++){ const file = selectedFiles[i]; if (!file.type.startsWith("image/")) { setError(`File ${file.name} is not an image`); continue; } try { const processedUrl = await processImage(file); if (processedUrl) { processed.push({ url: processedUrl, name: file.name }); setProgress((i + 1) / selectedFiles.length * 100); } } catch (err) { setError(`Failed to process ${file.name}: ${err.message}`); } } setProcessedImages(processed); }, [ processImage, user ]); const downloadAllProcessed = useCallback(async ()=>{ for(let i = 0; i < processedImages.length; i++){ await handleDownload(processedImages[i].url, i); } }, [ processedImages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a192f]", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto font-bold text-white mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Bulk Background Removal"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Process multiple images at once. Perfect for e-commerce products or large photo collections.")), user && /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] rounded-xl p-4 text-center mb-8", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#64ffda] text-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "Current Credit Balance:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, credits)), /*#__PURE__*/ React.createElement("a", { href: "/pricing", className: "bg-[#64ffda] text-[#0a192f] px-4 py-2 rounded-lg hover:bg-[#4fd1b5] transition-colors duration-200 mt-4 inline-block", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, "Purchase More Credits")), !user ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] rounded-xl p-8 text-center", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Sign in to Remove Backgrounds"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, "Create an account to start removing backgrounds from your images."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/auth?tab=signin&callbackUrl=/bulk", className: "bg-blue-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-600 transition-colors duration-200", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "/auth?tab=signup&callbackUrl=/bulk", className: "bg-[#2a3241] text-white px-6 py-3 rounded-lg font-medium hover:bg-[#1f2937] transition-colors duration-200", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, "Sign Up"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: `relative border-2 border-dashed rounded-xl p-8 text-center transition-colors duration-200 ${dragActive ? "border-blue-500 bg-[#172a45]" : "border-gray-600 hover:border-blue-400"} bg-[#112240]`, onDragEnter: (e)=>{ e.preventDefault(); setDragActive(true); }, onDragLeave: (e)=>{ e.preventDefault(); setDragActive(false); }, onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>{ e.preventDefault(); setDragActive(false); handleUpload(e); }, __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, accept: "image/*", onChange: handleUpload, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-white", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-[#64ffda]", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, "Drag & drop multiple images here"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 214, columnNumber: 19 }, __self: this }, "or click to browse"))), files.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 220, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-white", __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, files.length, " Images Selected"), processedImages.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: downloadAllProcessed, className: "bg-[#64ffda] text-[#0a192f] px-6 py-2 rounded-lg hover:bg-[#4fd1b5] transition-colors duration-200", __source: { fileName: "", lineNumber: 225, columnNumber: 23 }, __self: this }, "Download All")), isProcessing && /*#__PURE__*/ React.createElement("div", { className: "bg-[#172a45] rounded-lg p-4", __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-white mb-2", __source: { fileName: "", lineNumber: 236, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 237, columnNumber: 25 }, __self: this }, "Processing Images..."), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 238, columnNumber: 25 }, __self: this }, Math.round(progress), "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#233554] rounded-full h-2", __source: { fileName: "", lineNumber: 240, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#64ffda] h-2 rounded-full transition-all duration-300", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 241, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative bg-[#172a45] rounded-lg p-4 group", __source: { fileName: "", lineNumber: 251, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(file), alt: `Preview ${index + 1}`, className: "w-full h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 255, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-white text-sm truncate", __source: { fileName: "", lineNumber: 260, columnNumber: 25 }, __self: this }, file.name), processedImages[index] && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200", __source: { fileName: "", lineNumber: 264, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDownload(processedImages[index].url, index), className: "bg-[#64ffda] text-[#0a192f] px-4 py-2 rounded-lg hover:bg-[#4fd1b5]", __source: { fileName: "", lineNumber: 265, columnNumber: 29 }, __self: this }, "Download")))))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-[#ff6b6b] bg-opacity-20 text-[#ff6b6b] p-4 rounded-lg", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 mt-16", __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 293, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, "Fast Processing"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }, "Process multiple images simultaneously with our advanced AI technology")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 307, columnNumber: 19 }, __self: this }, "High Quality"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }, "Get professional-grade results with precise edge detection")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#112240] p-6 rounded-xl", __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-[#64ffda] rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-download-alt text-[#0a192f] text-xl", __source: { fileName: "", lineNumber: 316, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-2", __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this }, "Batch Download"), /*#__PURE__*/ React.createElement("p", { className: "text-[#8892b0]", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "Download all processed images at once in high-resolution PNG format")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#112240] border-t border-[#233554] mt-20", __source: { fileName: "", lineNumber: 332, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 333, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 334, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 338, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/about", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 346, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, "Contact")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 354, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/careers", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 355, columnNumber: 19 }, __self: this }, "Careers")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-bold text-lg mb-4", __source: { fileName: "", lineNumber: 365, columnNumber: 15 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/remove", className: "text-[#8892b0] hover:text-[#64ffda]", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, "Background Removal")))))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 386, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 387, columnNumber: 7 }, __self: this })); }