function OtpModal({ isOpen, onClose, otp, loading }) { const [copied, setCopied] = useState(false); const copyToClipboard = ()=>{ navigator.clipboard.writeText(otp); setCopied(true); setTimeout(()=>setCopied(false), 2000); }; if (!isOpen) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 w-[300px] relative", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Your OTP"), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-blue-500", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-mono text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, otp), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "text-blue-500 hover:text-blue-700", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, copied ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this })))))); } function OtpModalStory() { const [modalOpen, setModalOpen] = useState(false); const [loading, setLoading] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setModalOpen(true), className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Show OTP Modal"), /*#__PURE__*/ React.createElement(OtpModal, { isOpen: modalOpen, onClose: ()=>setModalOpen(false), otp: "123456", loading: loading, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLoading(!loading), className: "bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Toggle Loading State"))); } function EmailDisplay({ email }) { const [copied, setCopied] = useState(false); const handleCopy = ()=>{ navigator.clipboard.writeText(email); setCopied(true); setTimeout(()=>setCopied(false), 2000); }; const shareUrls = { twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(email)}`, linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}`, facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}` }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto p-6 rounded-lg bg-white shadow-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border rounded-lg p-4 mb-4 bg-gray-50", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-800 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, email)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3 items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCopy, className: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${copied ? "fa-check" : "fa-copy"} mr-2`, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), copied ? "Copied!" : "Copy"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: shareUrls.twitter, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-10 h-10 bg-[#1DA1F2] text-white rounded-full hover:opacity-90", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: shareUrls.linkedin, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-10 h-10 bg-[#0077B5] text-white rounded-full hover:opacity-90", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin-in", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: shareUrls.facebook, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center justify-center w-10 h-10 bg-[#1877F2] text-white rounded-full hover:opacity-90", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))))); } function EmailDisplayStory() { const sampleEmail = `Dear [Name], Thank you for your interest in our services. We look forward to working with you. Best regards, [Your Name]`; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EmailDisplay, { email: sampleEmail, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })); } function Logo() { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "w-24 h-24 relative cursor-pointer", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-shield-alt text-5xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${isHovered ? "text-[#4CAF50] scale-110" : "text-[#2196F3]"}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas fa-lock text-2xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-500 ${isHovered ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function LogoStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Logo, { __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 28, columnNumber: 1 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } `); function Button({ onClick, loading, children, variant = "primary" }) { const baseClasses = "px-4 py-2 rounded-md font-inter transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"; const variants = { primary: "bg-[#2563eb] hover:bg-[#1d4ed8] text-white", secondary: "bg-[#e5e7eb] hover:bg-[#d1d5db] text-[#111827]" }; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, disabled: loading, className: `${baseClasses} ${variants[variant]}`, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, loading && /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 16, columnNumber: 19 }, __self: this }), children); } function ButtonStory() { const [loading, setLoading] = useState(false); const handleClick = ()=>{ setLoading(true); setTimeout(()=>setLoading(false), 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { onClick: handleClick, loading: loading, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Generate"), /*#__PURE__*/ React.createElement(Button, { variant: "secondary", onClick: ()=>{}, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Copy")), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { loading: true, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement(Button, { variant: "secondary", loading: true, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Loading..."))); } function InputField() { return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Enter your name", className: "w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function InputFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InputField, { __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [email, setEmail] = useState(""); const [showModal, setShowModal] = useState(false); const [name, setName] = useState(""); const handleGenerate = async ()=>{ if (!name) { setError("Please enter your name"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/generate-email", { method: "POST", body: JSON.stringify({ name }) }); const data = await response.json(); setEmail(data.email); setShowModal(true); } catch (err) { setError("Failed to generate email"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col bg-[#121212] text-white relative", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-0", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/mailbox-background.jpg", alt: "Blurred mailbox in the background", className: "w-full h-full object-cover blur-sm opacity-20", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 container mx-auto px-4 py-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-12", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] p-8 rounded-xl shadow-2xl mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(InputField, { onChange: (e)=>{ setName(e.target.value); setError(null); }, value: name, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 25 }, __self: this }, error)), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("footer", { className: "mt-auto pt-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), showModal && /*#__PURE__*/ React.createElement(React.Fragment, null)); }