function ImageModal({ imageUrl, altText, isOpen, onClose }) { if (!isOpen) return null; const handleBackdropClick = (e)=>{ if (e.target === e.currentTarget) { onClose(); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/75 z-50 flex items-center justify-center animate-[fadeIn_0.2s_ease-in]", onClick: handleBackdropClick, __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative max-w-[90vw] max-h-[90vh]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "absolute -top-4 -right-4 w-8 h-8 bg-black text-white rounded-full flex items-center justify-center hover:bg-gray-800", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: altText, className: "max-w-full max-h-[90vh] object-contain", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }))); } function ImageModalStory() { const [isModalOpen, setIsModalOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsModalOpen(true), className: "px-4 py-2 bg-black text-white rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Open Image Modal"), /*#__PURE__*/ React.createElement(ImageModal, { imageUrl: "https://ucarecdn.com/4805491f-2e96-47c5-937b-fbfe2396b6df/-/format/auto/", altText: "Professional golf simulator setup with Trackman technology", isOpen: isModalOpen, onClose: ()=>setIsModalOpen(false), __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [showModal, setShowModal] = useState(false); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [status, setStatus] = useState(""); const [loading, setLoading] = useState(false); const [selectedImage, setSelectedImage] = useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { const response = await fetch("/api/join-waitlist", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, name }) }); const data = await response.json(); if (data.success) { setStatus("success"); setEmail(""); setName(""); setShowModal(false); } else { setStatus(data.error); } } catch (error) { setStatus("Something went wrong. Please try again."); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative min-h-[90vh] md:min-h-screen", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/a5a894ed-846e-4749-9977-25d86d3879e9/-/format/auto/", alt: "Modern golf simulator suite with large screen, green turf, and sleek orange LED accent lighting", className: "w-full h-full object-cover object-[center_85%]", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-8 py-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/8fbff35b-cfac-41c2-9ddb-420ba9b79d61/-/format/auto/", alt: "Q Golf Club logo", className: "w-[100px]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "text-white text-2xl drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex flex-col justify-end min-h-[90vh] md:min-h-screen pb-12 px-8", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg mb-8 text-center drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:inline", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Highlands Ranch"), /*#__PURE__*/ React.createElement("div", { className: "md:inline md:before:content-['•'] md:before:mx-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Spring 2025")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(true), className: "bg-black/30 backdrop-blur-sm border-2 border-white text-white w-full py-3 text-lg font-medium hover:bg-black/40 transition-colors duration-300 rounded drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Join Waitlist"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black py-16", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10 hover:bg-black/40 transition-all duration-300 transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-golf-ball text-base text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)] mb-1", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white text-sm drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Private Trackman Suites")), /*#__PURE__*/ React.createElement("div", { className: "text-center bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10 hover:bg-black/40 transition-all duration-300 transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-base text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)] mb-1", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white text-sm drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "24/7 Access")), /*#__PURE__*/ React.createElement("div", { className: "text-center bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10 hover:bg-black/40 transition-all duration-300 transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-base text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)] mb-1", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-white text-sm drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Limited Membership"))))), /*#__PURE__*/ React.createElement("div", { className: "px-8 py-16 bg-black", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, [ { url: "https://ucarecdn.com/a5a894ed-846e-4749-9977-25d86d3879e9/-/format/auto/", alt: "Modern golf simulator bay with orange accent lighting" }, { url: "https://ucarecdn.com/625e7a6b-6274-417e-a42c-9af343030a4f/-/format/auto/", alt: "Golf simulator view with scenic course display" }, { url: "https://ucarecdn.com/70def63c-9736-47fe-875d-be04c2e070ae/-/format/auto/", alt: "Golf simulator suite with leather chairs and yellow LED accent lighting" }, { url: "https://ucarecdn.com/ea437ff8-94ed-4ecc-acc0-a6a371cdd55d/-/format/auto/", alt: "Golf simulator with large screen and virtual course display" }, { url: "https://ucarecdn.com/8e7aca71-9516-4e0d-932a-fd3c18a4d48c/-/format/auto/", alt: "Golf simulator suite entrance doors with suite numbers" }, { url: "https://ucarecdn.com/2b73a5ce-029b-43bf-9779-d8d49f948ec5/-/format/auto/", alt: "Q Golf Club reception area with branded wall sign" } ].map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative aspect-[4/3] overflow-hidden cursor-pointer group", onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: image.alt, className: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-110", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity duration-300", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "bg-black px-8 pb-16", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(true), className: "bg-black/30 backdrop-blur-sm border-2 border-white text-white w-full py-3 text-lg font-medium hover:bg-black/40 transition-colors duration-300 rounded drop-shadow-[0_2px_2px_rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "Join Waitlist"))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-semibold mb-4 text-black", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Join Waitlist"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: name, onChange: (e)=>setName(e.target.value), placeholder: "Your Name", className: "w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-black", required: true, __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Your Email", className: "w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-black", required: true, __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this })), status && /*#__PURE__*/ React.createElement("div", { className: `text-sm ${status === "success" ? "text-green-600" : "text-red-600"}`, __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, status), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-4", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowModal(false), className: "px-4 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-black text-white px-6 py-2 rounded hover:bg-gray-800 disabled:opacity-50", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, loading ? "Submitting..." : "Submit"))))), selectedImage && /*#__PURE__*/ React.createElement(ImageModal, { imageUrl: selectedImage.url, altText: selectedImage.alt, isOpen: !!selectedImage, onClose: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this })); }