// Careers page — job listings, per-job application form, open application
const { useState: useCareersState, useEffect: useCareersEffect, useRef: useCareersRef } = React;

// ── Paste your Google Apps Script Web App URL here after deploying
// Follow the setup guide in careers_apps_script.md to deploy your script
const CAREERS_WEBHOOK_URL = 'https://script.google.com/macros/s/AKfycbxnqVfYpcNNFlXw-40W8Z7skRuOMkn81rQlqwD3fNwFUp1H8VJu6FTdycBGGww8hpYl2g/exec';

// ── Fetch jobs from backend
// Note: Actual fetching happens in CareersPage component

// ── Hero
const CareersHero = () => (
  <section className="pt-28 sm:pt-40 pb-16">
    <div className="mx-auto max-w-[1600px] px-5 sm:px-8">
      <div className="mb-8 reveal"><Eyebrow>Join the Team · AMG Careers</Eyebrow></div>
      <div className="grid lg:grid-cols-12 gap-10 items-end">
        <div className="lg:col-span-7 reveal">
          <h1 className="font-display text-[40px] sm:text-[64px] lg:text-[90px] leading-[0.95] tracking-tightest">
            Build something<br/><span className="italic text-accent-soft">that lasts.</span>
          </h1>
        </div>
        <div className="lg:col-span-4 lg:col-start-9 reveal" style={{transitionDelay:'80ms'}}>
          <p className="text-bone-50/60 text-[15px] leading-relaxed">
            We don't just build landmarks — we build careers. Join a 40-year legacy of trust, craft, and community across Punjab's real estate landscape.
          </p>
        </div>
      </div>
      {/* Stats strip */}
      <div className="mt-14 grid grid-cols-3 gap-px rounded-2xl overflow-hidden reveal" style={{background:'var(--ink-faint)'}}>
        {[
          { v: '40+', k: 'Years of Legacy' },
          { v: '10K+', k: 'Investor Families' },
          { v: '8+', k: 'Active Projects' },
        ].map(s => (
          <div key={s.k} className="px-6 py-5" style={{background:'var(--bg-elev)'}}>
            <div className="font-display text-[32px] sm:text-[40px] text-accent-soft leading-none">{s.v}</div>
            <span className="mt-2 block text-[11px] uppercase tracking-[0.22em]" style={{color:'var(--ink-fg)',opacity:0.45}}>{s.k}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── Stable field wrapper — defined OUTSIDE modal so React never remounts it on re-render
const CareersField = ({ label, error, children }) => (
  <label className="block">
    <span className="block text-[11px] uppercase tracking-[0.22em] mb-2" style={{color:'var(--ink-fg)',opacity:0.45}}>{label}</span>
    {children}
    {error && <span className="block mt-1.5 text-[12px] text-red-400">{error}</span>}
  </label>
);

// ── Application form modal — rendered via portal to escape Framer Motion transform context
function ApplicationModal({ job, onClose }) {
  const [form, setForm] = useCareersState({ name: '', email: '', phone: '', message: '', openPosition: '', openDepartment: '', openLocation: '' });
  const [resume, setResume] = useCareersState(null);
  const [errors, setErrors] = useCareersState({});
  const [status, setStatus] = useCareersState('idle'); // idle | submitting | success | error
  const fileRef = useCareersRef();
  const isOpen = job?.title === '__open__';

  // Lock body scroll while open
  useCareersEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    if (window.lenis) window.lenis.stop();
    return () => { 
      document.body.style.overflow = prev; 
      if (window.lenis) window.lenis.start();
    };
  }, []);

  // ── Validators
  const validateEmail = (v) => {
    const s = v.trim().toLowerCase();
    if (!s) return 'Email address is required';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(s)) return 'Enter a valid email address';
    const domain = s.split('@')[1] || '';
    if (!domain.includes('.')) return 'Enter a valid email address';
    return null;
  };

  const validatePhone = (v) => {
    const digits = v.replace(/\D/g, '');
    if (!digits) return 'Phone number is required';
    if (digits.length !== 10) return 'Enter a valid 10-digit Indian mobile number';
    if (!/^[6-9]/.test(digits)) return 'Indian numbers start with 6, 7, 8 or 9';
    if (/^(.)\1+$/.test(digits)) return 'Enter a real mobile number';
    return null;
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = 'Please enter your full name';
    const emailErr = validateEmail(form.email);
    if (emailErr) e.email = emailErr;
    const phoneErr = validatePhone(form.phone);
    if (phoneErr) e.phone = phoneErr;

    if (isOpen) {
      if (!form.openDepartment.trim()) e.openDepartment = 'Please specify a department';
      if (!form.openPosition.trim()) e.openPosition = 'Please specify a position';
      if (!form.openLocation.trim()) e.openLocation = 'Please specify a location';
    }

    if (!resume) e.resume = 'Please attach your resume (PDF or DOCX)';
    return e;
  };

  // ── File handler — validate by extension (MIME type is unreliable on Windows)
  const handleFile = (e) => {
    const f = e.target.files[0];
    if (!f) return;
    const name = f.name.toLowerCase();
    const allowed = ['.pdf', '.doc', '.docx'];
    if (!allowed.some(ext => name.endsWith(ext))) {
      setErrors(prev => ({ ...prev, resume: 'Only PDF or DOCX files are accepted' }));
      e.target.value = ''; // reset so same file can be picked again
      return;
    }
    if (f.size > 5 * 1024 * 1024) {
      setErrors(prev => ({ ...prev, resume: 'File must be under 5 MB' }));
      e.target.value = '';
      return;
    }
    setResume(f);
    setErrors(prev => { const n = {...prev}; delete n.resume; return n; });
  };

  // ── Strip non-digits from phone field
  const handlePhone = (e) => {
    const digits = e.target.value.replace(/\D/g, '').slice(0, 10);
    setForm(p => ({...p, phone: digits}));
    if (errors.phone) setErrors(prev => { const n={...prev}; delete n.phone; return n; });
  };

  // ── Convert file to base64 helper
  const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result.split(',')[1]); // strip data:...;base64, prefix
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });

  const handleSubmit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    setStatus('submitting');

    try {
      // Convert resume to base64 so Apps Script can save it to Google Drive
      let resumeBase64 = null;
      if (resume) {
        resumeBase64 = await toBase64(resume);
      }

      const payload = {
        name:         form.name.trim(),
        email:        form.email.trim().toLowerCase(),
        phone:        form.phone.trim(),
        coverNote:    form.message.trim(),
        position:     isOpen ? form.openPosition.trim() : (job?.title || ''),
        department:   isOpen ? form.openDepartment.trim() : (job?.department || '—'),
        location:     isOpen ? form.openLocation.trim() : (job?.location || '—'),
        resumeName:   resume ? resume.name : '',
        resumeBase64: resumeBase64 || '',
        submittedAt:  new Date().toISOString(),
      };

      if (CAREERS_WEBHOOK_URL && CAREERS_WEBHOOK_URL !== 'PASTE_YOUR_APPS_SCRIPT_URL_HERE') {
        await fetch(CAREERS_WEBHOOK_URL, {
          method: 'POST',
          mode: 'no-cors',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        });
      }
      setStatus('success');
    } catch (err) {
      setStatus('error');
    }
  };

  const modalContent = (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-8"
      style={{background:'rgba(0,0,0,0.78)', backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)'}}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div
        className="relative w-full max-w-xl max-h-[85vh] overflow-hidden rounded-3xl border border-bone-50/10 flex flex-col"
        style={{background:'var(--bg-elev)'}}
        onClick={e => e.stopPropagation()}
      >
        {/* Header */}
        <div className="sticky top-0 z-20 flex items-start justify-between gap-4 px-6 sm:px-8 pt-6 pb-5 border-b border-bone-50/10 shrink-0" style={{background:'var(--bg-elev)'}}>
          <div>
            <span className="text-[10px] uppercase tracking-[0.28em] text-accent">{isOpen ? 'Open Application' : (job?.department || 'Position')}</span>
            <h2 className="font-display text-[22px] sm:text-[28px] leading-tight mt-1">
              {isOpen ? 'Apply for Future Roles' : job?.title}
            </h2>
          </div>
          <button onClick={onClose} className="mt-1 flex-shrink-0 h-9 w-9 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/55 hover:text-bone-50 hover:border-bone-50/30 transition">
            <Icon.X size={14}/>
          </button>
        </div>

        <div className="overflow-y-auto px-6 sm:px-8 pb-10 pt-6" data-lenis-prevent="true">
          {status === 'success' ? (
            <div className="text-center py-8">
              <div className="h-16 w-16 rounded-full bg-accent/10 border border-accent/30 grid place-items-center text-accent mx-auto mb-5">
                <Icon.Check size={28}/>
              </div>
              <h3 className="font-display text-[24px]">Application received!</h3>
              <p className="mt-3 text-bone-50/60 text-[14px] leading-relaxed max-w-sm mx-auto">
                Thank you, <strong className="text-bone-50/80">{form.name.split(' ')[0] || 'there'}</strong>. Your application and resume have been sent to our HR team. We'll be in touch if there's a fit.
              </p>
              <button onClick={onClose} className="mt-6 btn rounded-full border border-bone-50/15 text-bone-50/60 px-6 py-3 text-[13px] font-medium hover:text-bone-50 hover:border-bone-50/30 transition">
                Close
              </button>
            </div>
          ) : status === 'error' ? (
            <div className="text-center py-10">
              <div className="h-14 w-14 rounded-full bg-red-500/10 border border-red-400/30 grid place-items-center text-red-400 mx-auto mb-4">
                <Icon.X size={22}/>
              </div>
              <h3 className="font-display text-[22px]">Submission failed</h3>
              <p className="mt-2 text-bone-50/55 text-[14px] leading-relaxed max-w-xs mx-auto">
                Could not reach the server. Please email us directly at <a href="mailto:hr@amgrealty.in" className="text-accent">hr@amgrealty.in</a>
              </p>
              <button onClick={() => setStatus('idle')} className="mt-6 btn rounded-full border border-bone-50/15 text-bone-50/60 px-6 py-3 text-[13px] hover:text-bone-50 hover:border-bone-50/30 transition">Try again</button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} noValidate className="space-y-5">
              {!isOpen ? (
                <div className="rounded-xl border border-bone-50/10 bg-bone-50/[0.03] px-4 py-3 flex items-center gap-3">
                  <Icon.Briefcase size={14} className="text-accent flex-shrink-0"/>
                  <span className="text-[13px] text-bone-50/70">Applying for: <strong className="text-bone-50">{job?.title}</strong></span>
                </div>
              ) : (
                <div className="space-y-5 rounded-2xl border border-accent/20 bg-accent/5 p-5">
                  <p className="text-[12px] uppercase tracking-[0.16em] text-accent mb-2">Role Preferences</p>
                  
                  <div className="grid sm:grid-cols-2 gap-5">
                    <CareersField label="Department *" error={errors.openDepartment}>
                      <select
                        className="field w-full rounded-xl px-4 py-3.5 text-[15px] appearance-none"
                        style={errors.openDepartment ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                        value={form.openDepartment}
                        onChange={e => setForm(p => ({...p, openDepartment: e.target.value}))}
                      >
                        <option value="" disabled>Select department...</option>
                        <option value="Sales">Sales & Marketing</option>
                        <option value="CRM">CRM & Operations</option>
                        <option value="Engineering">Engineering & Construction</option>
                        <option value="Finance">Finance & Accounts</option>
                        <option value="HR">Human Resources</option>
                        <option value="Other">Other</option>
                      </select>
                    </CareersField>
                    
                    <CareersField label="Target Role / Position *" error={errors.openPosition}>
                      <input
                        className="field w-full rounded-xl px-4 py-3.5 text-[15px]"
                        style={errors.openPosition ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                        placeholder="e.g. Sales Manager"
                        value={form.openPosition}
                        onChange={e => setForm(p => ({...p, openPosition: e.target.value}))}
                      />
                    </CareersField>
                  </div>
                  
                  <CareersField label="Preferred Location *" error={errors.openLocation}>
                    <input
                      className="field w-full rounded-xl px-4 py-3.5 text-[15px]"
                      style={errors.openLocation ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                      placeholder="e.g. Zirakpur, Mohali"
                      value={form.openLocation}
                      onChange={e => setForm(p => ({...p, openLocation: e.target.value}))}
                    />
                  </CareersField>
                </div>
              )}

              <CareersField label="Full Name *" error={errors.name}>
                <input
                  className="field w-full rounded-xl px-4 py-3.5 text-[15px]"
                  style={errors.name ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                  placeholder="Rajesh Kumar"
                  value={form.name}
                  onChange={e => setForm(p => ({...p, name: e.target.value}))}
                />
              </CareersField>

              <div className="grid sm:grid-cols-2 gap-5">
                <CareersField label="Email Address *" error={errors.email}>
                  <input
                    type="email"
                    className="field w-full rounded-xl px-4 py-3.5 text-[15px]"
                    style={errors.email ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                    placeholder="you@example.com"
                    value={form.email}
                    onChange={e => setForm(p => ({...p, email: e.target.value}))}
                  />
                </CareersField>
                <CareersField label="Phone Number *" error={errors.phone}>
                  <div className="relative">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[15px] text-bone-50/50 select-none pointer-events-none">+91</span>
                    <input
                      type="tel"
                      inputMode="numeric"
                      pattern="[6-9][0-9]{9}"
                      maxLength={10}
                      className="field w-full rounded-xl pl-12 pr-4 py-3.5 text-[15px]"
                      style={errors.phone ? {borderColor:'rgba(248,113,113,0.7)'} : {}}
                      placeholder="98765 43210"
                      value={form.phone}
                      onChange={handlePhone}
                    />
                  </div>
                </CareersField>
              </div>

              <CareersField label="Cover Note (optional)">
                <textarea
                  rows={3}
                  className="field w-full rounded-xl px-4 py-3.5 text-[15px] resize-none"
                  placeholder="Tell us a bit about yourself and why you're interested..."
                  value={form.message}
                  onChange={e => setForm(p => ({...p, message: e.target.value}))}
                />
              </CareersField>

              {/* Resume upload — file input sits underneath the styled div (not hidden, but invisible) so browsers allow the click */}
              <CareersField label="Resume / CV *" error={errors.resume}>
                <div className="relative">
                  <input
                    ref={fileRef}
                    type="file"
                    accept=".pdf,.doc,.docx"
                    onChange={handleFile}
                    style={{position:'absolute',inset:0,opacity:0,cursor:'pointer',zIndex:2,width:'100%',height:'100%'}}
                    tabIndex={-1}
                  />
                  <div
                    className="relative rounded-xl border-2 border-dashed px-5 py-6 text-center transition hover:border-accent/50"
                    style={{borderColor: errors.resume ? 'rgba(248,113,113,0.5)' : resume ? 'rgba(200,168,107,0.5)' : 'rgba(250,248,244,0.15)', pointerEvents:'none'}}
                  >
                    {resume ? (
                      <div className="flex items-center justify-center gap-3">
                        <Icon.FileText size={18} className="text-accent"/>
                        <span className="text-[14px] text-bone-50/80">{resume.name}</span>
                      </div>
                    ) : (
                      <>
                        <Icon.Upload size={20} className="mx-auto text-bone-50/35 mb-2"/>
                        <p className="text-[13px] text-bone-50/50">Click to upload <strong className="text-bone-50/70">PDF or DOCX</strong></p>
                        <p className="text-[11px] text-bone-50/35 mt-1">Max 5 MB</p>
                      </>
                    )}
                  </div>
                  {resume && (
                    <button
                      type="button"
                      style={{position:'absolute',top:'50%',right:'12px',transform:'translateY(-50%)',zIndex:3}}
                      onClick={() => { setResume(null); if(fileRef.current) fileRef.current.value=''; }}
                      className="h-7 w-7 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/40 hover:text-red-400 hover:border-red-400/30 transition bg-transparent"
                    >
                      <Icon.X size={12}/>
                    </button>
                  )}
                </div>
              </CareersField>

              <button
                type="submit"
                disabled={status === 'submitting'}
                className="btn w-full rounded-full bg-bone-50 text-ink-950 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center justify-center gap-2 transition disabled:opacity-60"
              >
                {status === 'submitting' ? (
                  <><span className="inline-block h-4 w-4 border-2 border-ink-950/30 border-t-ink-950 rounded-full animate-spin"/>Submitting…</>
                ) : (
                  <>Submit Application <Icon.ArrowUpRight size={15}/></>
                )}
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  );

  // Portal to body — escapes Framer Motion transform stacking context
  return ReactDOM.createPortal(modalContent, document.body);
}

// ── Job card
function JobCard({ job, onApply }) {
  const [open, setOpen] = useCareersState(false);
  return (
    <div className="rounded-3xl border border-bone-50/10 overflow-hidden hover:border-accent/30 transition-colors reveal">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full text-left px-6 sm:px-8 py-6 flex items-start sm:items-center justify-between gap-4"
      >
        <div className="flex items-start sm:items-center gap-4 flex-wrap">
          <div className="h-10 w-10 rounded-xl bg-accent/10 grid place-items-center text-accent flex-shrink-0">
            <Icon.Briefcase size={16}/>
          </div>
          <div>
            <div className="font-display text-[20px] leading-tight text-bone-50">{job.title}</div>
            <div className="flex flex-wrap gap-3 mt-1.5">
              {job.department && <span className="text-[11px] uppercase tracking-[0.18em] text-accent">{job.department}</span>}
              {job.location && <span className="text-[11px] text-bone-50/45 flex items-center gap-1"><Icon.MapPin size={10}/> {job.location}</span>}
              {job.type && <span className="text-[11px] text-bone-50/45">{job.type}</span>}
            </div>
          </div>
        </div>
        <span className={`flex-shrink-0 h-8 w-8 rounded-full border border-bone-50/15 grid place-items-center text-bone-50/50 transition-transform duration-300 ${open ? 'rotate-45 border-accent/30 text-accent' : ''}`}>
          <Icon.Plus size={14}/>
        </span>
      </button>

      {open && (
        <div className="px-6 sm:px-8 pb-7 border-t border-bone-50/8">
          <div className="pt-5 space-y-4">
            {job.description && (
              <p className="text-bone-50/65 text-[14px] leading-relaxed">{job.description}</p>
            )}
            {job.responsibilities && job.responsibilities.length > 0 && (
              <div>
                <p className="text-[11px] uppercase tracking-[0.22em] text-bone-50/40 mb-3">Responsibilities</p>
                <ul className="space-y-2">
                  {job.responsibilities.map((r, i) => (
                    <li key={i} className="flex items-start gap-2.5 text-[13.5px] text-bone-50/65">
                      <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-accent flex-shrink-0"/>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
            )}
            {job.requirements && job.requirements.length > 0 && (
              <div>
                <p className="text-[11px] uppercase tracking-[0.22em] text-bone-50/40 mb-3">Requirements</p>
                <ul className="space-y-2">
                  {job.requirements.map((r, i) => (
                    <li key={i} className="flex items-start gap-2.5 text-[13.5px] text-bone-50/65">
                      <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-accent/60 flex-shrink-0"/>
                      {r}
                    </li>
                  ))}
                </ul>
              </div>
            )}
            <div className="pt-3">
              <button
                onClick={() => onApply(job)}
                className="btn rounded-full bg-bone-50 text-ink-950 px-5 py-3 text-[12px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center gap-2 transition"
              >
                Apply for this role <Icon.ArrowUpRight size={13}/>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Open application banner
function OpenApplicationBanner({ onApply }) {
  return (
    <section className="py-20 border-t border-bone-50/10">
      <div className="mx-auto max-w-[1600px] px-5 sm:px-8">
        <div className="rounded-3xl border border-bone-50/10 bg-accent/5 p-8 sm:p-12 grid lg:grid-cols-12 gap-8 items-center reveal">
          <div className="lg:col-span-7">
            <Eyebrow>Always Open · Talent Pipeline</Eyebrow>
            <h2 className="font-display text-[28px] sm:text-[40px] leading-[1.02] tracking-tightest mt-5">
              Don't see your role?<br/>
              <span className="italic text-accent-soft">We'd still love to meet you.</span>
            </h2>
            <p className="mt-5 text-bone-50/60 text-[14px] leading-relaxed max-w-lg">
              We're always looking for exceptional talent — architects, sales professionals, engineers, marketers, and more. Submit your profile and we'll reach out when the right opportunity arises.
            </p>
          </div>
          <div className="lg:col-span-4 lg:col-start-9 flex flex-col gap-3">
            <button
              onClick={() => onApply({ title: '__open__' })}
              className="btn rounded-full bg-bone-50 text-ink-950 px-6 py-4 text-[13px] font-medium tracking-wide hover:bg-accent-soft inline-flex items-center justify-between transition"
            >
              <span>Submit Open Application</span> <Icon.ArrowUpRight size={16}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}



// ── Main Careers page
function CareersPage({ setPage }) {
  useReveal();
  const [jobs, setJobs] = useCareersState([]);
  const [loading, setLoading] = useCareersState(true);
  const [applyJob, setApplyJob] = useCareersState(null);

  // Fetch jobs from Google Sheets on load
  useCareersEffect(() => {
    fetch(CAREERS_WEBHOOK_URL)
      .then(res => res.json())
      .then(data => { setJobs(data); setLoading(false); })
      .catch(err => { console.error('Failed to load jobs', err); setLoading(false); });
  }, []);

  return (
    <main className="page-enter">
      {applyJob && <ApplicationModal job={applyJob} onClose={() => setApplyJob(null)}/>}
      <CareersHero/>

      {/* Open Positions */}
      <section className="py-16 border-t border-bone-50/10">
        <div className="mx-auto max-w-[1600px] px-5 sm:px-8">
          <div className="flex items-end justify-between gap-6 mb-10 flex-wrap reveal">
            <SectionTitle kicker="Open Positions" title={<>Current<br/><span className="italic text-accent-soft">opportunities.</span></>}/>
            <span className="text-[12px] text-bone-50/40 uppercase tracking-[0.18em]">
              {jobs.filter(j => j.active).length} role{jobs.filter(j => j.active).length !== 1 ? 's' : ''} open
            </span>
          </div>

          {loading ? (
            <div className="rounded-3xl border border-bone-50/10 py-16 text-center reveal">
              <span className="inline-block h-6 w-6 border-2 border-bone-50/30 border-t-accent rounded-full animate-spin mb-3"/>
              <p className="text-bone-50/40 text-[14px]">Loading current openings...</p>
            </div>
          ) : jobs.filter(j => j.active).length === 0 ? (
            <div className="rounded-3xl border border-bone-50/10 border-dashed px-8 py-16 text-center reveal">
              <Icon.Search size={32} className="mx-auto text-bone-50/20 mb-4"/>
              <p className="text-bone-50/40 text-[14px]">No specific openings right now — but we're always growing.</p>
              <p className="text-bone-50/30 text-[13px] mt-1">Check back soon, or send an open application below.</p>
            </div>
          ) : (
            <div className="space-y-3">
              {jobs.filter(j => j.active).map(job => (
                <JobCard key={job.id} job={job} onApply={setApplyJob}/>
              ))}
            </div>
          )}
        </div>
      </section>

      <OpenApplicationBanner onApply={setApplyJob}/>
    </main>
  );
}

window.CareersPage = CareersPage;