function UrlShortener() { const [url, setUrl] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [result, setResult] = useState(null); const [copied, setCopied] = useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(""); try { const response = await fetch("/api/api", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } setResult(data); } catch (err) { setError(err.message || "Failed to shorten URL"); } finally{ setLoading(false); } }; const copyToClipboard = async ()=>{ try { await navigator.clipboard.writeText(result.shortUrl); setCopied(true); setTimeout(()=>setCopied(false), 2000); } catch (err) { setError("Failed to copy URL"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "URL Shortener"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "url", value: url, onChange: (e)=>{ setUrl(e.target.value); setError(""); }, placeholder: "Enter your long URL", className: "flex-1 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-800 focus:outline-none focus:border-gray-900 dark:focus:border-gray-500 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !url, className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-lg hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }) : "Shorten URL")), error && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, error)), result && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 transform transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Original URL"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 dark:text-white break-all", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, result.originalUrl)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Shortened URL"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-900 dark:text-white break-all flex-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, result.shortUrl), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "p-2 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, copied ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this }))))))); } function UrlShortenerStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UrlShortener, { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this })); } function MainComponent() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSearch = async (e)=>{ e.preventDefault(); if (!query.trim()) return; setLoading(true); setError(""); try { // Use web scraping to search for brand information const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query.trim() + " brand company official website")}`; const response = await fetch("/integrations/web-scraping/post", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: searchUrl, getText: true }) }); if (!response.ok) { throw new Error("Failed to fetch brand results"); } const data = await response.text(); // Simple brand result simulation based on search const mockResults = [ { name: query.trim(), domain: `${query.trim().toLowerCase().replace(/\s+/g, "")}.com`, description: `Information about ${query.trim()} brand`, verified: Math.random() > 0.5, founded: Math.floor(Math.random() * 50) + 1970, industry: "Technology" } ]; setResults(mockResults); } catch (err) { console.error(err); setError("Failed to fetch brand results. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FEFEFE] font-serif", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-20", style: { backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E5E7EB' fill-opacity='0.3'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='53' cy='53' r='1'/%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")` }, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto px-6 py-16 relative", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-light text-gray-800 mb-4 tracking-tight", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Brand Search"), /*#__PURE__*/ React.createElement("div", { className: "w-16 h-0.5 bg-gray-300 mx-auto mb-6", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 leading-relaxed", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Find and analyze brand information across the web")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-8", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Enter brand name to search"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Apple, Nike, Coca-Cola...", className: "flex-1 px-4 py-3 border border-gray-200 text-gray-900 bg-white focus:outline-none focus:border-gray-400 transition-colors", disabled: loading, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !query.trim(), className: "px-6 py-3 bg-gray-800 text-white font-medium hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 99, columnNumber: 28 }, __self: this }) : "Search")))), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 text-red-700 text-sm", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, results.map((brand, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white border border-gray-200 p-6 shadow-sm", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start justify-between mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium text-gray-800 mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 19 }, __self: this }, brand.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, brand.description), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 text-xs text-gray-500", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 128, columnNumber: 21 }, __self: this }, "Domain: ", brand.domain), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 129, columnNumber: 21 }, __self: this }, "Founded: ", brand.founded), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this }, "Industry: ", brand.industry))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end gap-2", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 text-xs rounded-full ${brand.verified ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 134, columnNumber: 19 }, __self: this }, brand.verified ? "Verified" : "Unverified"), /*#__PURE__*/ React.createElement("a", { href: `https://${brand.domain}`, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-gray-600 hover:text-gray-800 transition-colors", __source: { fileName: "", lineNumber: 143, columnNumber: 19 }, __self: this }, "Visit Website", " ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-external-link-alt ml-1", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }))))))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "Searching for brand information...")), !loading && results.length === 0 && query && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-building text-2xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, 'No brand information found for "', query, '"')), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-12", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/landing-page", className: "text-sm text-gray-500 hover:text-gray-700 transition-colors", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "← Back to Tools")))); }