function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function JobMap({ jobs = [] }) { const [selectedJob, setSelectedJob] = useState(null); const mapRef = useRef(null); const [map, setMap] = useState(null); const [viewState, setViewState] = useState({ latitude: 40.7128, longitude: -74.006, zoom: 11 }); useEffect(()=>{ const script = document.createElement("script"); script.src = "https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"; document.head.appendChild(script); const link = document.createElement("link"); link.href = "https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"; link.rel = "stylesheet"; document.head.appendChild(link); script.onload = ()=>{ const mapInstance = new mapboxgl.Map({ container: mapRef.current, style: "mapbox://styles/mapbox/streets-v11", center: [ viewState.longitude, viewState.latitude ], zoom: viewState.zoom }); mapInstance.addControl(new mapboxgl.NavigationControl(), "top-right"); setMap(mapInstance); }; return ()=>{ document.head.removeChild(script); document.head.removeChild(link); if (map) map.remove(); }; }, []); useEffect(()=>{ if (!map) return; const markers = []; const points = jobs.map((job)=>({ type: "Feature", properties: { id: job.id, title: job.title, company: job.company, description: job.description, salary: job.salary }, geometry: { type: "Point", coordinates: [ job.longitude, job.latitude ] } })); map.on("load", ()=>{ map.addSource("jobs", { type: "geojson", data: { type: "FeatureCollection", features: points }, cluster: true, clusterMaxZoom: 14, clusterRadius: 50 }); map.addLayer({ id: "clusters", type: "circle", source: "jobs", filter: [ "has", "point_count" ], paint: { "circle-color": [ "step", [ "get", "point_count" ], "#51bbd6", 100, "#f1f075", 750, "#f28cb1" ], "circle-radius": [ "step", [ "get", "point_count" ], 20, 100, 30, 750, 40 ] } }); map.addLayer({ id: "cluster-count", type: "symbol", source: "jobs", filter: [ "has", "point_count" ], layout: { "text-field": "{point_count_abbreviated}", "text-font": [ "DIN Offc Pro Medium", "Arial Unicode MS Bold" ], "text-size": 12 } }); map.addLayer({ id: "unclustered-point", type: "circle", source: "jobs", filter: [ "!", [ "has", "point_count" ] ], paint: { "circle-color": "#11b4da", "circle-radius": 8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); }); map.on("click", "clusters", (e)=>{ const features = map.queryRenderedFeatures(e.point, { layers: [ "clusters" ] }); const clusterId = features[0].properties.cluster_id; map.getSource("jobs").getClusterExpansionZoom(clusterId, (err, zoom)=>{ if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); }); }); map.on("click", "unclustered-point", (e)=>{ const coordinates = e.features[0].geometry.coordinates.slice(); const properties = e.features[0].properties; while(Math.abs(e.lngLat.lng - coordinates[0]) > 180){ coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } setSelectedJob({ title: properties.title, company: properties.company, description: properties.description, salary: properties.salary }); }); map.on("mouseenter", "clusters", ()=>{ map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "clusters", ()=>{ map.getCanvas().style.cursor = ""; }); return ()=>{ markers.forEach((marker)=>marker.remove()); }; }, [ map, jobs ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "map", ref: mapRef, className: "w-full h-full", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }), selectedJob && /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white p-4 rounded-lg shadow-lg bottom-4 left-4 max-w-[300px]", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedJob(null), className: "absolute top-2 right-2 text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, selectedJob.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, selectedJob.company), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, selectedJob.description), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-2", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, "$", selectedJob.salary, "/year"))); } function JobMapStory() { const sampleJobs = [ { id: 1, title: "Software Engineer", company: "Tech Corp", description: "Full-stack development position", salary: "120,000", latitude: 40.7128, longitude: -74.006 }, { id: 2, title: "Product Manager", company: "Startup Inc", description: "Lead product initiatives", salary: "140,000", latitude: 40.758, longitude: -73.9855 }, { id: 3, title: "UX Designer", company: "Design Co", description: "Create beautiful interfaces", salary: "110,000", latitude: 40.748, longitude: -73.985 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 223, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JobMap, { jobs: sampleJobs, __source: { fileName: "", lineNumber: 224, columnNumber: 7 }, __self: this })); } function JobCard({ title, salary, location, jobType }) { const jobTypeColors = { temporary: "bg-yellow-100 text-yellow-800", permanent: "bg-green-100 text-green-800", gig: "bg-purple-100 text-purple-800" }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 max-w-sm font-roboto", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-money-bill-wave text-gray-600", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "$", salary.toLocaleString(), "/year")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-3", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-location-dot text-gray-600", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, location)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${jobTypeColors[jobType]}`, __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, jobType.charAt(0).toUpperCase() + jobType.slice(1))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-3", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors inline-block", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), "Apply Now"), /*#__PURE__*/ React.createElement("button", { className: "inline-block px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bookmark", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "inline-block text-gray-500 hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-xl", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "inline-block text-gray-500 hover:text-blue-400 transition-colors", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xl", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "inline-block text-gray-500 hover:text-blue-600 transition-colors", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }))))); } function JobCardStory() { const jobs = [ { title: "Software Engineer", salary: 120000, location: "San Francisco, CA", jobType: "permanent" }, { title: "Project Manager", salary: 95000, location: "New York, NY", jobType: "temporary" }, { title: "UI Designer", salary: 85000, location: "Austin, TX", jobType: "gig" } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 p-6 md:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, jobs.map((job, index)=>/*#__PURE__*/ React.createElement(JobCard, { key: index, ...job, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }))); } function JobPostForm({ onSubmit = ()=>{}, loading = false, error = null }) { const [formData, setFormData] = useState({ title: "", description: "", salaryMin: "", salaryMax: "", address: "", jobType: "full-time", brokerPayment: "employer" }); const [validationErrors, setValidationErrors] = useState({}); const [addressSuggestions, setAddressSuggestions] = useState([]); const [showSuggestions, setShowSuggestions] = useState(false); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); setValidationErrors((prev)=>({ ...prev, [name]: "" })); }; const handleAddressChange = async (e)=>{ const value = e.target.value; setFormData((prev)=>({ ...prev, address: value })); if (value.length > 2) { const { suggestions } = await GooglePlaceAutocomplete.search(value); setAddressSuggestions(suggestions); setShowSuggestions(true); } else { setAddressSuggestions([]); setShowSuggestions(false); } }; const selectAddress = (address)=>{ setFormData((prev)=>({ ...prev, address })); setShowSuggestions(false); }; const validateForm = ()=>{ const errors = {}; if (!formData.title.trim()) errors.title = "Title is required"; if (!formData.description.trim()) errors.description = "Description is required"; if (!formData.address.trim()) errors.address = "Address is required"; if (!formData.salaryMin) errors.salaryMin = "Minimum salary is required"; if (!formData.salaryMax) errors.salaryMax = "Maximum salary is required"; if (Number(formData.salaryMin) > Number(formData.salaryMax)) { errors.salaryMin = "Minimum salary cannot be greater than maximum"; } return errors; }; const handleSubmit = (e)=>{ e.preventDefault(); const errors = validateForm(); if (Object.keys(errors).length > 0) { setValidationErrors(errors); return; } onSubmit(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-6", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Job Title ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 76, columnNumber: 23 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", value: formData.title, onChange: handleChange, className: `mt-1 block w-full rounded-md border ${validationErrors.title ? "border-red-500" : "border-gray-300"} p-2`, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), validationErrors.title && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, validationErrors.title)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Description ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 94, columnNumber: 25 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("textarea", { name: "description", value: formData.description, onChange: handleChange, rows: "4", className: `mt-1 block w-full rounded-md border ${validationErrors.description ? "border-red-500" : "border-gray-300"} p-2`, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), validationErrors.description && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, validationErrors.description)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Minimum Salary ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 113, columnNumber: 30 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "salaryMin", value: formData.salaryMin, onChange: handleChange, className: `mt-1 block w-full rounded-md border ${validationErrors.salaryMin ? "border-red-500" : "border-gray-300"} p-2`, __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), validationErrors.salaryMin && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, validationErrors.salaryMin)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Maximum Salary ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 130, columnNumber: 30 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "salaryMax", value: formData.salaryMax, onChange: handleChange, className: `mt-1 block w-full rounded-md border ${validationErrors.salaryMax ? "border-red-500" : "border-gray-300"} p-2`, __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }), validationErrors.salaryMax && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, validationErrors.salaryMax))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, "Address ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", value: formData.address, onChange: handleAddressChange, className: `mt-1 block w-full rounded-md border ${validationErrors.address ? "border-red-500" : "border-gray-300"} p-2`, __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }), validationErrors.address && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, validationErrors.address), showSuggestions && addressSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 w-full bg-white mt-1 rounded-md shadow-lg border border-gray-200", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, addressSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 hover:bg-gray-100 cursor-pointer", onClick: ()=>selectAddress(suggestion), __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, suggestion)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Job Type ", /*#__PURE__*/ React.createElement("span", { className: "text-red-500", __source: { fileName: "", lineNumber: 180, columnNumber: 22 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("select", { name: "jobType", value: formData.jobType, onChange: handleChange, className: "mt-1 block w-full rounded-md border border-gray-300 p-2", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "full-time", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, "Full Time"), /*#__PURE__*/ React.createElement("option", { value: "part-time", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, "Part Time"), /*#__PURE__*/ React.createElement("option", { value: "contract", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Contract"), /*#__PURE__*/ React.createElement("option", { value: "temporary", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "Temporary"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, "Broker Payment"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "brokerPayment", value: "employer", checked: formData.brokerPayment === "employer", onChange: handleChange, className: "mr-2", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, "Employer Pays")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "brokerPayment", value: "employee", checked: formData.brokerPayment === "employee", onChange: handleChange, className: "mr-2", __source: { fileName: "", lineNumber: 212, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 220, columnNumber: 15 }, __self: this }, "Employee Pays")), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "brokerPayment", value: "split", checked: formData.brokerPayment === "split", onChange: handleChange, className: "mr-2", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, "50%/50% Split")))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 disabled:opacity-50", __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this }, loading ? "Posting..." : "Post Job"))); } function JobPostFormStory() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (data)=>{ setLoading(true); setError(null); try { await new Promise((resolve)=>setTimeout(resolve, 1000)); console.log("Submitted:", data); } catch (err) { setError("Something went wrong"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 268, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JobPostForm, { onSubmit: handleSubmit, loading: loading, error: error, __source: { fileName: "", lineNumber: 269, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchTerm, setSearchTerm] = useState(""); const [location, setLocation] = useState(""); const [showChatbot, setShowChatbot] = useState(false); const [chatMessages, setChatMessages] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [loading, setLoading] = useState(false); const [userLocation, setUserLocation] = useState(null); const [nearbyJobs, setNearbyJobs] = useState([]); const [theme, setTheme] = useState("light"); const [language, setLanguage] = useState("en"); const [showNotifications, setShowNotifications] = useState(false); const [showFeedback, setShowFeedback] = useState(false); const [notifications, setNotifications] = useState([]); const jobs = [ { id: 1, title: "Software Engineer", company: "Tech Corp", description: "Full-stack development position", salary: "120,000", latitude: 40.7128, longitude: -74.006 }, { id: 2, title: "Product Manager", company: "Startup Inc", description: "Lead product initiatives", salary: "140,000", latitude: 40.758, longitude: -73.9855 } ]; const calculateDistance = (lat1, lon1, lat2, lon2)=>{ const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; }; const handleChatSubmit = async (message)=>{ setLoading(true); const systemMessage = { role: "system", content: "You are a helpful job search assistant. You can help with: how to use this app, contacting admins, fixing login issues, and general job search advice. Keep responses concise and friendly." }; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...chatMessages, { role: "user", content: message } ], stream: true }) }); handleStreamResponse(response); }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setChatMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setLoading(false); } }); useEffect(()=>{ navigator.geolocation.getCurrentPosition((position)=>{ setUserLocation({ latitude: position.coords.latitude, longitude: position.coords.longitude }); }, (error)=>console.error(error)); }, []); useEffect(()=>{ if (userLocation) { const jobsWithin100km = jobs.filter((job)=>{ const distance = calculateDistance(userLocation.latitude, userLocation.longitude, job.latitude, job.longitude); return distance <= 100; }); setNearbyJobs(jobsWithin100km); } }, [ userLocation ]); useEffect(()=>{ if (theme === "dark") { document.documentElement.classList.add("dark"); } else { document.documentElement.classList.remove("dark"); } }, [ theme ]); useEffect(()=>{ translateAllText(); }, [ language ]); const translateAllText = async ()=>{ try { const textsToTranslate = [ "Find Your Next Opportunity", "Available Positions Near You", "Job title or keywords", "Location", "Search", "I'm Hiring", "I'm Looking for Work", "No new notifications", "Send Feedback", "Your feedback...", "Submit" ]; const response = await fetch("/integrations/google-translate/language/translate/v2", { method: "POST", body: new URLSearchParams({ q: textsToTranslate, target: language }) }); const data = await response.json(); const translations = data.data.translations; document.querySelectorAll("[data-translate]").forEach((element, index)=>{ element.textContent = translations[index].translatedText; }); } catch (error) { console.error("Translation failed:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${theme === "dark" ? "bg-[#0B0D0F] text-[#FDFEFE]" : "bg-white"}`, __source: { fileName: "", lineNumber: 161, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gradient-to-r from-[#1a237e] to-[#0d47a1] py-20 relative", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-6 right-6 flex items-center gap-4", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>setLanguage(e.target.value), className: "bg-transparent text-[#FDFEFE] border border-[#FDFEFE] rounded-lg px-3 py-1", value: language, name: "language", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "French")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme(theme === "light" ? "dark" : "light"), className: "text-[#FDFEFE] hover:text-[#BABDC3]", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${theme === "light" ? "moon" : "sun"} text-2xl`, __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-6 left-6 flex items-center gap-4", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#FDFEFE] hover:text-[#BABDC3]", onClick: ()=>setShowNotifications(!showNotifications), __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-2xl", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#FDFEFE] hover:text-[#BABDC3]", onClick: ()=>setShowFeedback(!showFeedback), __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-2xl", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }))), showNotifications && /*#__PURE__*/ React.createElement("div", { className: "absolute top-16 left-6 bg-[#FDFEFE] dark:bg-[#3D4449] p-4 rounded-lg w-80 z-50", __source: { fileName: "", lineNumber: 200, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "text-[#BABDC3]", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", "data-translate": true, __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "No new notifications"))), showFeedback && /*#__PURE__*/ React.createElement("div", { className: "absolute top-16 left-20 bg-[#FDFEFE] dark:bg-[#3D4449] p-4 rounded-lg w-80 z-50", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-4", "data-translate": true, __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Send Feedback"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: (e)=>{ e.preventDefault(); const feedback = e.target.elements.feedback.value; if (feedback.trim()) { alert("Thank you for your feedback!"); setShowFeedback(false); } }, __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded-lg dark:bg-[#3D4449] dark:border-[#3D4449]", placeholder: "Your feedback...", rows: "4", name: "feedback", "data-translate": true, __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#19976B] text-[#FDFEFE] px-4 py-2 rounded-lg w-full hover:bg-[#3D4449] hover:text-[#19976B]", "data-translate": true, __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, "Submit"))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-outfit text-[#FDFEFE] text-center mb-8", "data-translate": true, __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, "Find Your Next Opportunity"), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-[#FDFEFE] rounded-lg p-4 mb-8", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-[#BABDC3]", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Job title or keywords", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-[#19976B] focus:border-transparent", "data-translate": true, __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 264, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 265, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-location-dot absolute left-3 top-3 text-[#BABDC3]", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", placeholder: "Location", value: location, onChange: (e)=>setLocation(e.target.value), className: "w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-[#19976B] focus:border-transparent", "data-translate": true, __source: { fileName: "", lineNumber: 267, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#19976B] text-[#FDFEFE] font-semibold py-2 px-8 rounded-lg hover:bg-[#3D4449] hover:text-[#19976B] transition-colors duration-200", "data-translate": true, __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6 justify-center max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 286, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/auth", className: "bg-[#FDFEFE] text-[#1a237e] font-semibold py-4 px-8 rounded-lg text-xl hover:bg-[#3D4449] hover:text-[#19976B] transition-colors duration-200 text-center", "data-translate": true, __source: { fileName: "", lineNumber: 287, columnNumber: 13 }, __self: this }, "I'm Hiring"), /*#__PURE__*/ React.createElement("a", { href: "/auth", className: "bg-[#19976B] text-[#FDFEFE] font-semibold py-4 px-8 rounded-lg text-xl hover:bg-[#3D4449] hover:text-[#19976B] transition-colors duration-200 text-center", "data-translate": true, __source: { fileName: "", lineNumber: 294, columnNumber: 13 }, __self: this }, "I'm Looking for Work")))), /*#__PURE__*/ React.createElement("section", { className: "py-12 px-4", __source: { fileName: "", lineNumber: 305, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-outfit text-center mb-8 text-[#FDFEFE]", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, "Available Positions Near You"), /*#__PURE__*/ React.createElement("div", { className: "h-[600px] w-full rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(JobMap, { jobs: nearbyJobs, __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }))), showChatbot && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 w-80 bg-[#FDFEFE] rounded-lg", __source: { fileName: "", lineNumber: 315, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 border-b", __source: { fileName: "", lineNumber: 316, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, "Job Search Assistant"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowChatbot(false), className: "text-[#BABDC3]", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-96 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, chatMessages.map((msg, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `mb-4 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-2 rounded-lg ${msg.role === "user" ? "bg-[#19976B]" : "bg-[#3D4449]"}`, __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-2 rounded-lg bg-[#3D4449]", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 346, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); const input = e.target.elements.message; if (input.value.trim()) { setChatMessages((prev)=>[ ...prev, { role: "user", content: input.value } ]); handleChatSubmit(input.value); input.value = ""; } }, __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 361, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Ask me anything...", className: "flex-1 p-2 border rounded-lg", disabled: loading, __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-[#19976B] text-[#FDFEFE] px-4 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${loading ? "fa-spinner fa-spin" : "fa-paper-plane"}`, __source: { fileName: "", lineNumber: 374, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowChatbot(true), className: "fixed bottom-4 right-4 bg-[#19976B] text-[#FDFEFE] p-4 rounded-full hover:bg-[#3D4449] hover:text-[#19976B] transition-colors", __source: { fileName: "", lineNumber: 384, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-dots text-xl", __source: { fileName: "", lineNumber: 388, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 391, columnNumber: 7 }, __self: this }, ` .mapboxgl-canvas { position: relative; top: 0; left: 0; } `)); }