{label}

{icon} setForm({ ...form, [id]: e.target.value })} onFocus={() => setIsFocused(id)} onBlur={() => setIsFocused(null)} style={{ width: '100%', height: 50, background: 'transparent', border: 'none', outline: 'none', padding: '0 14px', fontSize: 15, color: colors.text, fontWeight: 500, }} />

); }; const renderSelect = (id, label, options, icon) => { const focused = isFocused === id; return (

{label}

{icon} ▼

); }; const renderButton = (id, label, onClick, primary = true, disabled = false) => { const isPressed = pressedBtn === id; return ( ); }; const getJobStats = (job, jobsArray) => { const normalize = (str) => (str || '').toLowerCase().trim(); let matches = (jobsArray || []).filter(j => normalize(j.title).includes(normalize(job.title)) || normalize(job.title).includes(normalize(j.title))); if ((matches || []).length < 3) matches = jobsArray; const allPays = (matches || []).map(m => m.pay).sort((a, b) => a - b); const avg = (allPays || []).reduce((sum, val) => sum + val, 0) / (allPays || []).length; const below = (allPays || []).filter(p => p < job.pay).length; const pct = (allPays || []).length > 1 ? Math.round((below / ((allPays || []).length - 1)) * 100) : 50; return { avg, pct }; }; const getPinColor = (pct) => { if (pct < 35) return '#EF4444'; if (pct > 75) return '#10B981'; return '#94A3B8'; }; const mapIframeRef = useRef(null); const mapDataSentRef = useRef(false); const sendMapData = useCallback((jobs) => { const iframe = mapIframeRef.current; if (!iframe || !iframe.contentWindow) return; const jobsWithStats = (jobs || []).map(job => { const stats = getJobStats(job, jobs); return { id: job.id, lat: job.lat, lng: job.lng, pay: job.pay, title: job.title, location: job.location, company: job.company, industry: job.industry, experience: job.experience, ageRange: job.ageRange, pinColor: getPinColor(stats.pct), pct: stats.pct }; }).filter(j => j.lat && j.lng && j.lat >= -34.2 && j.lat <= -33.5 && j.lng >= 150.2 && j.lng <= 151.5); iframe.contentWindow.postMessage({ type: 'updatePins', pins: jobsWithStats }, '*'); }, []); useEffect(() => { const handler = (e) => { if (e.data?.type === 'mapReady') { sendMapData(allJobs); mapDataSentRef.current = true; } else if (e.data?.type === 'pinClick') { const job = (allJobs || []).find(j => j.id === e.data.id); if (job) setSelectedPin(job); } else if (e.data?.type === 'mapClick') { setSelectedPin(null); } }; window.addEventListener('message', handler); return () => window.removeEventListener('message', handler); }, [allJobs, sendMapData]); useEffect(() => { if (mapDataSentRef.current) sendMapData(allJobs); }, [allJobs, sendMapData]); const renderExploreMap = () => { const jobsWithStats = (allJobs || []).map(job => { const stats = getJobStats(job, allJobs); return { ...job, pinColor: getPinColor(stats.pct), pct: stats.pct }; }); const mapSrcDoc = `