/* Recrutement — listing page + Copywriter detail page */

// ── Inline icon set (replicates the few Lucide icons used in the design) ───
const RIcon = ({ name, size = 16, stroke = 2 }) => {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow-right': return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'check': return <svg {...p} strokeWidth={3}><path d="M20 6L9 17l-5-5"/></svg>;
    case 'plus': return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'phone': return <svg {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case 'video': return <svg {...p}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>;
    case 'pencil-line': return <svg {...p}><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>;
    case 'message-square': return <svg {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'zap': return <svg {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>;
    case 'shield-check': return <svg {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'briefcase': return <svg {...p}><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>;
    default: return null;
  }
};

// ── Open positions data ───────────────────────────────────────────────────
const OPEN_POSITIONS = [
  {
    slug: 'copywriter',
    title: 'Copywriter Outbound',
    teaser: "Tu écris les séquences cold email et LinkedIn de nos clients.",
    status: 'Freelance',
    place: 'Full remote',
    start: 'Dès que possible',
  }
];

// ── Spontaneous application modal ────────────────────────────────────────
const SpontaneousModal = ({ onClose }) => {
  const [form, setForm] = React.useState({ firstName: '', lastName: '', email: '', linkedin: '', pitch: '' });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(false);
  const handleChange = (k) => (e) => setForm(prev => ({ ...prev, [k]: e.target.value }));

  // Close on Escape + lock body scroll
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; };
  }, [onClose]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError(false);
    try {
      const r = await fetch('/api/apply', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          poste: 'Candidature spontanée',
          nom: `${form.firstName.trim()} ${form.lastName.trim()}`.trim(),
          email: form.email,
          phone: '',
          linkedin: form.linkedin,
          experience: '',
          pitch: form.pitch,
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) throw new Error(data.error || 'Network');
      setSent(true);
    } catch (_) {
      setError(true);
    } finally {
      setSubmitting(false);
    }
  };

  const fieldStyle = {
    width: '100%', appearance: 'none',
    background: 'var(--paper)', border: '1px solid var(--line)',
    borderRadius: 12, padding: '11px 14px',
    fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--ink)',
    letterSpacing: '-0.005em', outline: 'none',
  };
  const labelStyle = { fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--gray-3)', display: 'block', marginBottom: 6 };

  return ReactDOM.createPortal(
    <div
      role="dialog" aria-modal="true" aria-labelledby="spontmodal-title"
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 9999,
        background: 'rgba(28,29,31,0.55)', backdropFilter: 'blur(4px)',
        WebkitBackdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 20, animation: 'spontFadeIn .2s ease',
      }}>
      <style>{`
        @keyframes spontFadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes spontSlideIn { from { opacity: 0; transform: translateY(12px) scale(0.98) } to { opacity: 1; transform: translateY(0) scale(1) } }
        @media (max-width: 520px) { .spont-row { grid-template-columns: 1fr !important; } }
      `}</style>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 520, maxHeight: 'calc(100dvh - 40px)', overflowY: 'auto',
          background: 'var(--bg)', borderRadius: 20,
          boxShadow: '0 24px 64px -16px rgba(28,29,31,0.4)',
          animation: 'spontSlideIn .25s cubic-bezier(0.22,0.9,0.32,1)',
          position: 'relative',
        }}>
        {/* Close button */}
        <button type="button" onClick={onClose} aria-label="Fermer"
          style={{
            position: 'absolute', top: 14, right: 14,
            width: 36, height: 36, borderRadius: '50%',
            background: 'transparent', border: 'none', cursor: 'pointer', outline: 'none',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--gray-4)', zIndex: 2,
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg-2)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
        </button>

        {sent ? (
          <div style={{ padding: '40px 32px', textAlign: 'center' }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: 'var(--accent)', border: '1px solid var(--accent-edge)',
              display: 'grid', placeItems: 'center', margin: '0 auto 18px', color: 'var(--accent-on)',
            }}>
              <RIcon name="check" size={26} stroke={2.5} />
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
              Merci{form.firstName ? ` ${form.firstName.trim()}` : ''} !
            </h3>
            <p style={{ marginTop: 8, fontSize: 14.5, color: 'var(--gray-4)' }}>
              Nous revenons vers toi très rapidement.
            </p>
            <button type="button" onClick={onClose} className="u-btn u-btn-ghost" style={{ marginTop: 24, padding: '10px 20px', fontSize: 14 }}>
              Fermer
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ padding: '36px 32px 28px' }}>
            <h2 id="spontmodal-title" style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15, marginBottom: 8 }}>
              Candidature spontanée
            </h2>
            <p style={{ fontSize: 14, color: 'var(--gray-4)', lineHeight: 1.5, marginBottom: 22, maxWidth: 420 }}>
              Pas de poste qui te convient ? Présente-toi en quelques lignes — on revient vers toi rapidement.
            </p>

            <div style={{ display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr', marginBottom: 12 }} className="spont-row">
              <div>
                <label htmlFor="spont-firstname" style={labelStyle}>Prénom</label>
                <input id="spont-firstname" type="text" required autoComplete="given-name" value={form.firstName} onChange={handleChange('firstName')} placeholder="Camille" style={fieldStyle} />
              </div>
              <div>
                <label htmlFor="spont-lastname" style={labelStyle}>Nom</label>
                <input id="spont-lastname" type="text" required autoComplete="family-name" value={form.lastName} onChange={handleChange('lastName')} placeholder="Durand" style={fieldStyle} />
              </div>
            </div>
            <div style={{ marginBottom: 12 }}>
              <label htmlFor="spont-email" style={labelStyle}>Email</label>
              <input id="spont-email" type="email" required autoComplete="email" value={form.email} onChange={handleChange('email')} placeholder="camille@example.com" style={fieldStyle} />
            </div>
            <div style={{ marginBottom: 12 }}>
              <label htmlFor="spont-linkedin" style={labelStyle}>LinkedIn <span style={{ fontWeight: 500, letterSpacing: 0, textTransform: 'none', color: 'var(--gray-3)', fontSize: 10.5, marginLeft: 6 }}>— optionnel</span></label>
              <input id="spont-linkedin" type="url" value={form.linkedin} onChange={handleChange('linkedin')} placeholder="linkedin.com/in/..." style={fieldStyle} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label htmlFor="spont-pitch" style={labelStyle}>Pourquoi tu postules ?</label>
              <textarea id="spont-pitch" required value={form.pitch} onChange={handleChange('pitch')}
                placeholder="Ce que tu sais faire, ce qui t'intéresse chez Upscale…"
                style={{ ...fieldStyle, minHeight: 110, resize: 'vertical', lineHeight: 1.5 }} />
            </div>

            {error && (
              <p style={{ marginBottom: 12, fontSize: 13, color: '#E53935' }}>
                Une erreur est survenue. Réessaie ou écris-nous à <a href="mailto:antoine@up-scale.fr" style={{ color: '#E53935', textDecoration: 'underline' }}>antoine@up-scale.fr</a>.
              </p>
            )}

            <button type="submit" disabled={submitting} style={{
              width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              height: 48, padding: '0 24px',
              background: 'var(--ink)', color: 'var(--bg)',
              border: 0, borderRadius: 999,
              fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em',
              cursor: submitting ? 'wait' : 'pointer', opacity: submitting ? 0.7 : 1,
            }}>
              {submitting ? 'Envoi…' : 'Envoyer'}
              {!submitting && <RIcon name="arrow-right" size={16} />}
            </button>
            <p style={{ marginTop: 12, fontSize: 11.5, color: 'var(--gray-3)', textAlign: 'center' }}>
              En envoyant ce formulaire, tu acceptes qu'on te recontacte sur l'email indiqué.
            </p>
          </form>
        )}
      </div>
    </div>,
    document.body
  );
};

// ── Listing page ──────────────────────────────────────────────────────────
const RecruitmentListPage = ({ lang }) => {
  const [spontOpen, setSpontOpen] = React.useState(false);
  return (
    <>
      {/* Hero */}
      <section style={{ paddingTop: 100, paddingBottom: 56, borderBottom: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
        <svg aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 100 100"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }}>
          <defs>
            <linearGradient id="rec-ray" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="50">
              <stop offset="0%" stopColor="rgb(28,29,31)" stopOpacity="0.05" />
              <stop offset="100%" stopColor="rgb(28,29,31)" stopOpacity="0" />
            </linearGradient>
          </defs>
          {[-3, -1, 1, 3].map(i => (
            <line key={i} x1="50" y1="130" x2={50 + i * 18} y2="-10" stroke="url(#rec-ray)" strokeWidth="1" vectorEffect="non-scaling-stroke" />
          ))}
        </svg>
        <div className="u-container" style={{ maxWidth: 880, position: 'relative', zIndex: 1 }}>
          <span className="u-chip u-chip-accent" style={{ marginBottom: 22 }}>
            <span className="u-dot" style={{ background: 'var(--ink)' }}></span>
            {lang === 'fr' ? 'Recrutement' : 'Careers'}
          </span>
          <h1 style={{ fontSize: 'clamp(36px, 6vw, 64px)', lineHeight: 1.02, letterSpacing: '-0.03em', marginBottom: 20 }}>
            {lang === 'fr' ? 'On recrute pour ' : 'We hire to '}
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>
              {lang === 'fr' ? 'faire grandir Upscale.' : 'grow Upscale.'}
            </span>
          </h1>
          <p style={{ fontSize: 18, color: 'var(--gray-4)', lineHeight: 1.6, maxWidth: 620 }}>
            {lang === 'fr'
              ? 'Une équipe restreinte, des missions concrètes, une exigence forte sur la qualité. Voici les postes que l\'on cherche à pourvoir aujourd\'hui.'
              : 'A small team, real missions, a high bar on quality. Open positions right now.'}
          </p>
        </div>
      </section>

      {/* Positions list */}
      <section style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="u-container" style={{ maxWidth: 960 }}>
          <p className="u-eyebrow" style={{ marginBottom: 24 }}>
            {OPEN_POSITIONS.length} {lang === 'fr' ? (OPEN_POSITIONS.length > 1 ? 'postes ouverts' : 'poste ouvert') : (OPEN_POSITIONS.length > 1 ? 'open positions' : 'open position')}
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {OPEN_POSITIONS.map((job) => (
              <a key={job.slug}
                href={`#/recrutement/${job.slug}`}
                onClick={(e) => { e.preventDefault(); window.location.hash = `/recrutement/${job.slug}`; window.scrollTo({ top: 0, behavior: 'auto' }); }}
                style={{
                  display: 'block', textDecoration: 'none', color: 'inherit',
                  background: 'var(--paper)', border: '1px solid var(--line)',
                  borderRadius: 18, padding: 28, boxShadow: 'var(--shadow-soft)',
                  transition: 'transform .15s ease, box-shadow .15s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 18px 40px -22px rgba(28,29,31,0.22)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-soft)'; }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20, marginBottom: 14, flexWrap: 'wrap' }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <h3 style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 10 }}>{job.title}</h3>
                    <p style={{ fontSize: 15, color: 'var(--gray-4)', lineHeight: 1.5, maxWidth: 620 }}>{job.teaser}</p>
                  </div>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 600, color: 'var(--ink)', flexShrink: 0 }}>
                    {lang === 'fr' ? 'Voir l\'offre' : 'View role'}
                    <RIcon name="arrow-right" size={14} />
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6 }}>
                  {[job.status, job.place, job.start].map((tag, i) => (
                    <span key={i} style={{
                      fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                      color: 'var(--gray-4)', background: 'var(--bg)',
                      border: '1px solid var(--line)', padding: '5px 10px', borderRadius: 999,
                    }}>{tag}</span>
                  ))}
                </div>
              </a>
            ))}
          </div>

          <p style={{ marginTop: 40, fontSize: 14, color: 'var(--gray-3)', fontStyle: 'italic', textAlign: 'center' }}>
            {lang === 'fr' ? (
              <>D'autres postes ouvriront prochainement. Une candidature spontanée ? <button type="button" onClick={() => setSpontOpen(true)} style={{ color: 'var(--ink)', textDecoration: 'underline', fontStyle: 'normal', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', font: 'inherit', outline: 'none' }}>Écris-nous</button></>
            ) : (
              <>More positions opening soon. Spontaneous application? <button type="button" onClick={() => setSpontOpen(true)} style={{ color: 'var(--ink)', textDecoration: 'underline', fontStyle: 'normal', background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', font: 'inherit', outline: 'none' }}>Write to us</button></>
            )}
          </p>

          {spontOpen && <SpontaneousModal onClose={() => setSpontOpen(false)} />}

          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <a href="#" onClick={(e) => { e.preventDefault(); window.location.hash = ''; window.scrollTo({ top: 0, behavior: 'auto' }); }}
              className="u-btn u-btn-ghost" style={{ padding: '12px 24px', fontSize: 14 }}>
              ← {lang === 'fr' ? 'Retour à l\'accueil' : 'Back to home'}
            </a>
          </div>
        </div>
      </section>
    </>
  );
};

// ── Copywriter detail page ────────────────────────────────────────────────
const CopywriterPage = ({ lang }) => {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(false);
  const [form, setForm] = React.useState({ firstName: '', lastName: '', email: '', phone: '', linkedin: '', experience: '', pitch: '' });
  const handleChange = (k) => (e) => setForm(prev => ({ ...prev, [k]: e.target.value }));
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError(false);
    try {
      const r = await fetch('/api/apply', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          poste: 'Copywriter Outbound',
          nom: `${form.firstName.trim()} ${form.lastName.trim()}`.trim(),
          email: form.email,
          phone: form.phone,
          linkedin: form.linkedin,
          experience: form.experience,
          pitch: form.pitch,
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) throw new Error(data.error || 'Network');
      setSent(true);
    } catch (err) {
      setError(true);
    } finally {
      setSubmitting(false);
    }
  };

  const fieldStyle = {
    width: '100%', appearance: 'none',
    background: 'var(--paper)', border: '1px solid var(--line)',
    borderRadius: 12, padding: '12px 14px',
    fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--ink)',
    letterSpacing: '-0.005em', outline: 'none',
  };
  const labelStyle = { fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--gray-3)', display: 'block', marginBottom: 6 };

  return (
    <>
      {/* ============== HERO ============== */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(60px,10vh,120px) 0 clamp(80px,12vh,140px)' }}>
        {/* Engineering markers */}
        <span style={{ position: 'absolute', left: 'var(--gutter, 80px)', top: 0, width: 1, height: 60, background: 'rgba(0,0,0,0.12)', pointerEvents: 'none' }}></span>
        <span style={{ position: 'absolute', left: 'var(--gutter, 80px)', top: 60, width: 80, height: 1, background: 'rgba(0,0,0,0.12)', pointerEvents: 'none' }}></span>
        <span style={{ position: 'absolute', left: 'calc(var(--gutter, 80px) - 4px)', top: 56, width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', border: '1px solid var(--accent-edge)', pointerEvents: 'none' }}></span>

        <div className="u-container">
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '6px 12px 6px 8px',
            border: '1px solid var(--line-strong)', borderRadius: 999,
            background: 'rgba(255,255,255,0.5)',
            fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)', border: '1px solid var(--accent-edge)' }}></span>
            Poste ouvert · Copywriter freelance
          </span>

          <h1 style={{
            margin: '28px 0 0',
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(44px, 8vw, 110px)', lineHeight: 0.96, letterSpacing: '-0.045em', color: 'var(--ink)',
          }}>
            On cherche{' '}
            <span style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.015em',
              backgroundImage: 'linear-gradient(transparent 64%, var(--accent) 64%, var(--accent) 92%, transparent 92%)',
              backgroundRepeat: 'no-repeat', padding: '0 0.08em',
            }}>notre prochain</span><br/>
            copywriter.
          </h1>

          <p style={{ marginTop: 28, maxWidth: 640, fontSize: 'clamp(17px,1.4vw,21px)', lineHeight: 1.45, color: 'var(--gray-4)', letterSpacing: '-0.01em' }}>
            Tu écris les séquences cold email et LinkedIn de nos clients. Pas du contenu de marque, pas du SEO, <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>de l'outbound qui décroche des rendez-vous.</strong> On t'arme avec Claude, Lemlist, Instantly, et un cerveau d'agence déjà construit.
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 36 }}>
            <a href="#postuler" onClick={(e) => { e.preventDefault(); document.getElementById('postuler')?.scrollIntoView({ behavior: 'smooth' }); }}
              className="u-btn"
              style={{
                height: 52, padding: '0 24px', fontSize: 15, fontWeight: 600,
                background: 'var(--accent)', color: 'var(--accent-on)', border: '1px solid var(--accent-edge)',
                borderRadius: 999, cursor: 'pointer',
              }}>
              Postuler maintenant <RIcon name="arrow-right" size={16} />
            </a>
            <a href="#missions" onClick={(e) => { e.preventDefault(); document.getElementById('missions')?.scrollIntoView({ behavior: 'smooth' }); }}
              className="u-btn u-btn-ghost"
              style={{ height: 52, padding: '0 24px', fontSize: 15, fontWeight: 600, borderRadius: 999 }}>
              Voir les missions
            </a>
          </div>

          {/* meta strip */}
          <div style={{
            marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 0,
            borderTop: '1px solid rgba(0,0,0,0.10)', borderBottom: '1px solid rgba(0,0,0,0.10)',
          }} className="recru-meta">
            {[
              ['Statut', 'Freelance'],
              ['Lieu', '100 % remote'],
              ['Démarrage', 'Dès que possible'],
              ['Process', '2 étapes · 7 jours'],
            ].map(([k, v], i) => (
              <div key={i} style={{ padding: '22px 22px 22px', borderLeft: i === 0 ? '0' : '1px solid rgba(0,0,0,0.08)', paddingLeft: i === 0 ? 0 : 22 }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--gray-3)' }}>{k}</div>
                <div style={{ marginTop: 8, fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== MISSIONS ============== */}
      <RecruSection id="missions" num="01" eyebrow="Les missions"
        title={<>Six terrains de jeu, <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>une seule règle :</span> faire répondre.</>}
        sub="Ta seule et unique mission est de déclencher des réponses qualifiées pour nos clients afin de leur générer des rendez-vous.">
        <div className="recru-missions" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {/* Feature card spanning 2 cols */}
          <article style={{
            gridColumn: 'span 2',
            background: 'var(--ink)', color: 'var(--bg)', borderRadius: 16, padding: 28,
            backgroundImage: 'radial-gradient(60% 60% at 90% 10%, rgba(225,255,108,0.18), transparent 60%)',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.6)' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', border: '1px solid var(--accent-edge)' }}></span>
              01 — Cœur du job
            </div>
            <h3 style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.025em' }}>Écrire les séquences cold email & LinkedIn de nos clients.</h3>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.72)', lineHeight: 1.5 }}>
              Tu rédiges des campagnes de prospection qui ont pour seul but : faire répondre les cibles de nos clients. Tu pourras te baser sur des dizaines de séquences déjà créées de notre côté ainsi que le cerveau d'Upscale (Claude) pour optimiser ton copywriting.
            </p>
          </article>

          {[
            ['02', "Construire les angles d'attaque par ICP.", "Identifier la douleur, la formuler, trouver la promesse qui déclenche la réponse."],
            ['03', "Adapter le ton à chaque client.", "Une cible, un produit, une approche. Pas le même message pour un CTO SaaS et un DG industrie."],
            ['04', "Itérer sur les résultats.", "Analyser les taux de réponse, identifier ce qui marche, réécrire ce qui ne marche pas."],
            ['05', "Scaler le copywriting.", "Liquid syntax, spintax, règles de délivrabilité. Tes séquences doivent contacter des milliers de personnes avec un haut niveau de personnalisation."],
            ['06', "Documenter ce que tu apprends.", "Les wins, les flops, les hypothèses. Le cerveau de l'agence se nourrit de tes itérations pour te faire gagner du temps sur les prochaines campagnes."],
          ].map(([n, h, p]) => (
            <article key={n} style={{
              background: 'var(--paper)', borderRadius: 16, padding: 28, boxShadow: 'var(--shadow-soft)',
              display: 'flex', flexDirection: 'column', gap: 14, minHeight: 220,
            }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: 'var(--gray-3)' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', border: '1px solid var(--accent-edge)' }}></span>
                {n}
              </div>
              <h3 style={{ fontSize: 20, fontWeight: 600, lineHeight: 1.18, letterSpacing: '-0.02em' }}>{h}</h3>
              <p style={{ fontSize: 15, color: 'var(--gray-4)', lineHeight: 1.5 }}>{p}</p>
            </article>
          ))}
        </div>
      </RecruSection>

      {/* ============== OUTILS ============== */}
      <section style={{ background: 'var(--bg-2)', padding: '120px 0' }}>
        <RecruSectionInner num="02" eyebrow="Les outils"
          title={<>Quatre outils. <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>Un cerveau.</span></>}
          sub="On a déjà construit le cerveau de l'agence dans Claude avec les règles de copywriting qu'on applique sur chaque mission. Tu hérites de cette base, et tu l'enrichis.">
          <div className="recru-tools" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { name: 'Claude', sub: 'IA · Copy & analyse', desc: "Le cerveau de l'agence. Toutes nos règles de copywriting y sont codifiées. Tu t'en sers pour pré-rédiger, analyser les performances et documenter ce qui marche.", tag: '★ Outil principal', primary: true, logo: 'claude.ai' },
              { name: 'Lemlist', sub: 'Envoi LinkedIn', desc: "Plateforme d'envoi des séquences LinkedIn de nos clients. Tu y déploies tes messages et tu suis les retours en direct.", tag: 'LinkedIn', logo: 'lemlist.com' },
              { name: 'Instantly', sub: 'Envoi email', desc: "Plateforme d'envoi des séquences email. Tu y configures la délivrabilité, le throttling, et tu lis les data brutes des campagnes.", tag: 'Email', logo: 'instantly.ai' },
              { name: 'Slack', sub: 'Communication & suivi', desc: "La plateforme sur laquelle on centralise tous nos échanges et le suivi de chaque client.", tag: 'Communication', logo: 'slack.com' },
            ].map((t, i) => (
              <article key={i} style={{
                background: 'var(--paper)', borderRadius: 16, padding: 28, boxShadow: 'var(--shadow-soft)',
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--paper)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', flexShrink: 0, overflow: 'hidden' }}>
                    <img src={`https://img.logo.dev/${t.logo}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`} alt={t.name} style={{ width: 32, height: 32, objectFit: 'contain' }} onError={(e) => { e.target.style.display = 'none'; }} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em' }}>{t.name}</h3>
                    <small style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--gray-3)', letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 2 }}>{t.sub}</small>
                  </div>
                </div>
                <p style={{ fontSize: 15, color: 'var(--gray-4)', lineHeight: 1.55 }}>{t.desc}</p>
                <span style={{
                  alignSelf: 'flex-start', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: t.primary ? 'var(--accent-on)' : 'var(--gray-3)',
                  padding: '4px 10px', borderRadius: 999,
                  background: t.primary ? 'var(--accent)' : 'var(--bg)',
                  border: t.primary ? '1px solid var(--accent-edge)' : '1px solid var(--line)',
                  marginTop: 'auto',
                }}>{t.tag}</span>
              </article>
            ))}
          </div>
        </RecruSectionInner>
      </section>

      {/* ============== PROFIL ============== */}
      <RecruSection id="profil" num="03" eyebrow="Le profil"
        title={<>Ce qu'on attend, <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>et ce qui fait la différence.</span></>}
        sub="On ne cherche pas un CV. On cherche quelqu'un qui sait écrire pour des gens qui ne répondent jamais et qui sait itérer en continu jusqu'à trouver la formule gagnante.">
        <div className="recru-profil" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
          <div style={{ background: 'var(--paper)', borderRadius: 16, padding: 36, boxShadow: 'var(--shadow-soft)' }}>
            <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              Indispensable
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999, background: 'var(--accent)', color: 'var(--accent-on)', border: '1px solid var(--accent-edge)' }}>Must-have</span>
            </h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                "Tu sais rédiger des cold emails et messages LinkedIn de prospection qui obtiennent des réponses.",
                "Tu es à l'aise avec les outils de prospection — ou tu apprends vite, très vite.",
                "Tu adaptes ta manière d'écrire et tes approches en fonction des cibles et des produits.",
                "Tu es à l'aise avec le principe d'itération — pas attachée à ton premier jet.",
              ].map((item, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'flex-start', fontSize: 16, lineHeight: 1.45 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent)', border: '1px solid var(--accent-edge)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1, color: 'var(--accent-on)' }}>
                    <RIcon name="check" size={12} stroke={3} />
                  </span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{ background: 'transparent', borderRadius: 16, padding: 36, border: '1px dashed var(--line-strong)' }}>
            <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              En bonus
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999, background: 'transparent', color: 'var(--gray-3)', border: '1px solid var(--line-strong)' }}>Nice-to-have</span>
            </h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                "Expérience en agence outbound, growth ou SDR.",
                "Notions de délivrabilité email : pourquoi un mot peut t'envoyer en spam.",
                "Tu as déjà écrit pour des ICP B2B variés — SaaS, services, industrie.",
              ].map((item, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'flex-start', fontSize: 16, lineHeight: 1.45 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'transparent', border: '1px solid var(--line-strong)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1, color: 'var(--ink)' }}>
                    <RIcon name="plus" size={12} stroke={2.5} />
                  </span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </RecruSection>

      {/* ============== CONDITIONS ============== */}
      <section style={{ background: 'var(--bg-2)', padding: '120px 0' }}>
        <RecruSectionInner num="04" eyebrow="Les conditions"
          title={<>Le cadre, <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>en clair.</span></>}
          sub="On joue cartes sur table. Rien de caché, rien de négociable au dernier moment.">
          <div style={{ background: 'var(--paper)', borderRadius: 24, boxShadow: 'var(--shadow-soft)', overflow: 'hidden' }}>
            {[
              ['Statut', 'Freelance', 'Indépendant', 'accent'],
              ['Rythme', 'À la mission ou au forfait mensuel, selon le volume.', 'Flexible', 'muted'],
              ['Lieu', 'Full remote — peu importe où tu es.', '100 % remote', 'accent'],
              ['Démarrage', 'Dès que possible.', 'ASAP', 'accent'],
              ['Rémunération', 'Au forfait par séquence ou TJM — selon profil et volume.', 'À discuter', 'muted'],
              ['Interlocuteur', 'Antoine — Delivery, Upscale.', 'Direct line', 'muted'],
            ].map(([k, v, tag, kind], i, arr) => (
              <div key={i} className="recru-cond-row" style={{
                display: 'grid', gridTemplateColumns: '200px 1fr auto', alignItems: 'center', gap: 24,
                padding: '22px 32px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none',
              }}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--gray-3)' }}>{k}</div>
                <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.4 }}>{v}</div>
                <span style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                  padding: '4px 10px', borderRadius: 999,
                  background: kind === 'accent' ? 'var(--accent)' : 'transparent',
                  color: kind === 'accent' ? 'var(--accent-on)' : 'var(--gray-3)',
                  border: kind === 'accent' ? '1px solid var(--accent-edge)' : '1px solid var(--line-strong)',
                }}>{tag}</span>
              </div>
            ))}
          </div>
        </RecruSectionInner>
      </section>

      {/* ============== PROCESS ============== */}
      <RecruSection id="process" num="05" eyebrow="Le process"
        title={<>Deux étapes. <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>Une semaine max.</span></>}
        sub="On ne fait pas traîner. Si on s'entend bien et que le test pratique colle, on démarre dans la foulée.">
        <div className="recru-process" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, position: 'relative' }}>
          {[
            {
              num: '01', full: true,
              title: 'Appel de découverte avec Antoine.',
              desc: '30 minutes. On apprend à se connaître, on cadre le matching, on répond à tes questions.',
              pills: [['phone', '30 min'], ['video', 'Visio']],
            },
            {
              num: '02', full: true,
              title: 'Test pratique sur un cas réel.',
              desc: 'Tu écris une séquence cold email sur un brief client réel. On débrief en live, ensemble — on comprend comment tu penses.',
              pills: [['pencil-line', 'Séquence à écrire'], ['message-square', 'Débrief 45 min', true]],
            },
          ].map((step, i) => (
            <article key={i} style={{
              background: 'var(--paper)', borderRadius: 24, padding: 36, boxShadow: 'var(--shadow-soft)',
              display: 'flex', flexDirection: 'column', gap: 18, position: 'relative',
            }}>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 96, fontWeight: 800, lineHeight: 0.8, letterSpacing: '-0.05em',
                color: step.full ? 'var(--ink)' : 'transparent', WebkitTextStroke: step.full ? '0' : '1px var(--ink)',
              }}>{step.num}</div>
              <h3 style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15 }}>{step.title}</h3>
              <p style={{ fontSize: 16, color: 'var(--gray-4)', lineHeight: 1.5 }}>{step.desc}</p>
              <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {step.pills.map(([icon, label, accent], j) => (
                  <span key={j} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '6px 12px', borderRadius: 999,
                    background: accent ? 'var(--accent)' : 'var(--bg)',
                    border: accent ? '1px solid var(--accent-edge)' : '1px solid var(--line)',
                    fontSize: 12, fontWeight: 600,
                  }}>
                    <RIcon name={icon} size={12} />
                    {label}
                  </span>
                ))}
              </div>
            </article>
          ))}
          <p style={{ gridColumn: '1 / -1', textAlign: 'center', marginTop: 12, fontSize: 13, color: 'var(--gray-3)' }}>
            <b style={{ color: 'var(--ink)', fontWeight: 600 }}>Total : 7 jours max</b> entre le premier appel et la décision finale.
          </p>
        </div>
      </RecruSection>

      {/* ============== APPLY ============== */}
      <section style={{ padding: '120px 0' }}>
        <div className="u-container">
          <div id="postuler" style={{
            background: 'var(--ink)', color: 'var(--bg)', borderRadius: 28,
            padding: 'clamp(56px,7vw,96px) clamp(36px,6vw,88px)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'radial-gradient(60% 80% at 90% 0%, rgba(225,255,108,0.10), transparent 60%)'
            }}></div>
            <div className="recru-apply-inner" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 60 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', background: 'var(--accent)', color: 'var(--accent-on)', padding: '2px 8px', borderRadius: 4, letterSpacing: 0 }}>06</span>
                  Postuler
                </div>
                <h2 style={{ fontSize: 'clamp(34px,4.4vw,56px)', fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.04, marginTop: 16 }}>
                  Envie d'<span style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
                  }}>écrire</span><br/>la suite ?
                </h2>
                <p style={{ marginTop: 18, color: 'rgba(255,255,255,0.7)', fontSize: 16, lineHeight: 1.55, maxWidth: 420 }}>
                  Pas de lettre de motivation. Pas de CV obligatoire. Juste un formulaire court — et un ou deux exemples de séquences déjà écrites.
                </p>
                <ul style={{ marginTop: 28, listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {[['zap', 'Réponse sous 48h ouvrées'], ['message-square', 'Échange direct avec Antoine'], ['shield-check', 'Tes infos restent confidentielles']].map(([icon, label], i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>
                      <span style={{ color: 'var(--accent)', display: 'flex' }}><RIcon name={icon} size={16} /></span>
                      {label}
                    </li>
                  ))}
                </ul>
              </div>

              {!sent ? (
                <form onSubmit={handleSubmit} style={{
                  background: 'var(--bg-2)', color: 'var(--ink)',
                  borderRadius: 24, padding: 36,
                }}>
                  <div className="recru-form-row" style={{ display: 'grid', gap: 14, gridTemplateColumns: '1fr 1fr', marginBottom: 16 }}>
                    <div>
                      <label htmlFor="f-firstname" style={labelStyle}>Prénom</label>
                      <input id="f-firstname" type="text" required autoComplete="given-name" value={form.firstName} onChange={handleChange('firstName')} placeholder="Camille" style={fieldStyle} />
                    </div>
                    <div>
                      <label htmlFor="f-lastname" style={labelStyle}>Nom</label>
                      <input id="f-lastname" type="text" required autoComplete="family-name" value={form.lastName} onChange={handleChange('lastName')} placeholder="Durand" style={fieldStyle} />
                    </div>
                  </div>
                  <div className="recru-form-row" style={{ display: 'grid', gap: 14, gridTemplateColumns: '1fr 1fr', marginBottom: 16 }}>
                    <div>
                      <label htmlFor="f-email" style={labelStyle}>Email</label>
                      <input id="f-email" type="email" required autoComplete="email" value={form.email} onChange={handleChange('email')} placeholder="camille@example.com" style={fieldStyle} />
                    </div>
                    <div>
                      <label htmlFor="f-phone" style={labelStyle}>Téléphone</label>
                      <input id="f-phone" type="tel" required autoComplete="tel" value={form.phone} onChange={handleChange('phone')} placeholder="+33 6 12 34 56 78" style={fieldStyle} />
                    </div>
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <label htmlFor="f-linkedin" style={labelStyle}>LinkedIn <span style={{ fontWeight: 500, letterSpacing: 0, textTransform: 'none', color: 'var(--gray-3)', fontSize: 11, marginLeft: 6 }}>— optionnel</span></label>
                    <input id="f-linkedin" type="url" value={form.linkedin} onChange={handleChange('linkedin')} placeholder="linkedin.com/in/..." style={fieldStyle} />
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <label htmlFor="f-xp" style={labelStyle}>Années d'expérience en copywriting outbound</label>
                    <select id="f-xp" required value={form.experience} onChange={handleChange('experience')} style={{
                      ...fieldStyle, paddingRight: 40, cursor: 'pointer',
                      backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231C1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>\")",
                      backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center',
                      color: form.experience ? 'var(--ink)' : 'var(--gray-3)',
                    }}>
                      <option value="" disabled>Choisis une option</option>
                      <option value="0-1">Moins d'1 an</option>
                      <option value="1-2">1 à 2 ans</option>
                      <option value="2-4">2 à 4 ans</option>
                      <option value="4-7">4 à 7 ans</option>
                      <option value="7+">7 ans et plus</option>
                    </select>
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    <label htmlFor="f-pitch" style={labelStyle}>Pourquoi toi, en 3 lignes ?</label>
                    <textarea id="f-pitch" required value={form.pitch} onChange={handleChange('pitch')}
                      placeholder="Cold email pour qui, sur quels ICP, ce qui a marché, ce que tu voudrais creuser chez Upscale…"
                      style={{ ...fieldStyle, minHeight: 120, resize: 'vertical', lineHeight: 1.5 }} />
                  </div>
                  {error && (
                    <p style={{ marginTop: 4, marginBottom: 12, fontSize: 13, color: '#E53935' }}>
                      Une erreur est survenue. Réessaie ou écris-nous à <a href="mailto:antoineguine.exeed@gmail.com" style={{ color: '#E53935', textDecoration: 'underline' }}>antoineguine.exeed@gmail.com</a>.
                    </p>
                  )}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginTop: 24, flexWrap: 'wrap' }}>
                    <small style={{ color: 'var(--gray-3)', fontSize: 12 }}>En envoyant ce formulaire, tu acceptes qu'on te recontacte sur l'email indiqué.</small>
                    <button type="submit" disabled={submitting} style={{
                      display: 'inline-flex', alignItems: 'center', gap: 8,
                      height: 52, padding: '0 28px',
                      background: 'var(--ink)', color: '#fff',
                      border: 0, borderRadius: 999,
                      fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em',
                      cursor: submitting ? 'wait' : 'pointer',
                      opacity: submitting ? 0.7 : 1,
                    }}>
                      {submitting ? 'Envoi…' : 'Envoyer ma candidature'}
                      {!submitting && <RIcon name="arrow-right" size={16} />}
                    </button>
                  </div>
                </form>
              ) : (
                <div style={{
                  background: 'var(--bg-2)', color: 'var(--ink)',
                  borderRadius: 24, padding: 36, textAlign: 'center',
                }}>
                  <div style={{
                    width: 56, height: 56, borderRadius: '50%',
                    background: 'var(--accent)', border: '1px solid var(--accent-edge)',
                    display: 'grid', placeItems: 'center', margin: '0 auto 18px',
                    color: 'var(--accent-on)',
                  }}>
                    <RIcon name="check" size={26} stroke={2.5} />
                  </div>
                  <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em' }}>
                    Merci pour ta candidature{form.firstName ? ` ${form.firstName.trim()}` : ''}
                  </h3>
                  <p style={{ marginTop: 8, color: 'var(--gray-4)' }}>
                    Nous revenons vers toi très rapidement.
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Back to list */}
      <section style={{ padding: '0 0 80px' }}>
        <div className="u-container" style={{ textAlign: 'center' }}>
          <a href="#/recrutement" onClick={(e) => { e.preventDefault(); window.location.hash = '/recrutement'; window.scrollTo({ top: 0, behavior: 'auto' }); }}
            className="u-btn u-btn-ghost" style={{ padding: '12px 24px', fontSize: 14 }}>
            ← Toutes les offres
          </a>
        </div>
      </section>

      {/* Page-local responsive overrides */}
      <style>{`
        @media (max-width: 880px) {
          .recru-missions { grid-template-columns: repeat(2, 1fr) !important; }
          .recru-missions > article:first-child { grid-column: span 2 !important; }
          .recru-tools { grid-template-columns: repeat(2, 1fr) !important; }
          .recru-profil { grid-template-columns: 1fr !important; }
          .recru-process { grid-template-columns: 1fr !important; }
          .recru-apply-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
          .recru-cond-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 18px 22px !important; }
          .recru-cond-row > span:last-child { justify-self: start !important; }
        }
        @media (max-width: 640px) {
          .recru-meta { grid-template-columns: repeat(2, 1fr) !important; }
          .recru-missions { grid-template-columns: 1fr !important; }
          .recru-missions > article:first-child { grid-column: span 1 !important; }
          .recru-tools { grid-template-columns: 1fr !important; }
          .recru-form-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
};

// ── Section primitives ───────────────────────────────────────────────────
const RecruSectionInner = ({ num, eyebrow, title, sub, children }) => (
  <div className="u-container">
    <div className="recru-section-head" style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 60, marginBottom: 56, alignItems: 'start' }}>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--gray-3)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'var(--font-mono)', background: 'var(--ink)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 4, letterSpacing: 0 }}>{num}</span>
        {eyebrow}
      </div>
      <div>
        <h2 style={{ fontSize: 'clamp(34px,4.4vw,56px)', fontWeight: 700, lineHeight: 1.04, letterSpacing: '-0.035em' }}>{title}</h2>
        {sub && <p style={{ marginTop: 16, maxWidth: 620, fontSize: 18, lineHeight: 1.5, color: 'var(--gray-4)' }}>{sub}</p>}
      </div>
    </div>
    {children}
    <style>{`
      @media (max-width: 780px) {
        .recru-section-head { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 36px !important; }
      }
    `}</style>
  </div>
);

const RecruSection = ({ id, num, eyebrow, title, sub, children }) => (
  <section id={id} style={{ padding: '120px 0', position: 'relative' }}>
    <RecruSectionInner num={num} eyebrow={eyebrow} title={title} sub={sub}>
      {children}
    </RecruSectionInner>
  </section>
);

window.RecruitmentListPage = RecruitmentListPage;
window.CopywriterPage = CopywriterPage;