// Careers — "We're Hiring" page built on the Core Values components.
// Job data lives in src/careers-data.js (window.MF_JOBS); values in CoreValuesPage.jsx (window.MF_CORE_VALUES).

const MF_PILLARS = [
  { n: '01', title: 'Work From Anywhere.', body: "Fully remote and outcome-driven. We care about results, not hours logged, and we protect what matters most: your time, your family, your life.", accent: '#E8123C' },
  { n: '02', title: 'Obsessed With Growth.', body: "Weekly call audits, role-plays, and a library of what's working right now. Leveling up isn't optional here. It's the job.", accent: '#FFB84D' },
  { n: '03', title: 'Built on Results.', body: "We say it, we do it. We move fast, own our numbers, and reward the people who deliver for clients.", accent: '#4DABF7' },
  { n: '04', title: 'Earn What You’re Worth.', body: "Uncapped, performance-based pay on every role. When our clients win, you win.", accent: '#51CF66' },
];

function CareersPage() {
  const [modal, setModal] = React.useState(false);
  const onCTA = () => setModal(true);
  const jobs = window.MF_JOBS || [];
  const values = window.MF_CORE_VALUES || [];

  return (
    <>
      <NavBar onCTA={onCTA}/>
      <main style={{ background: '#0A0608', color: '#fff', minHeight: '100vh' }}>
        <CareersHero jobCount={jobs.length}/>
        <WhyWorkHere/>
        <OpenRoles jobs={jobs}/>

        <ValuesIntro/>
        <div data-mf="values-sections">
          {values.map((v, i) => (
            <ValueSection key={v.n} value={v} isLast={i === values.length - 1}/>
          ))}
        </div>
        <ValuesSummary values={values}/>

        <Team/>
        <CareersCTA/>
      </main>
      <Footer/>
      {modal && <IClosedModal onClose={() => setModal(false)}/>}
    </>
  );
}
window.CareersPage = CareersPage;

// ---------- HERO ----------
function CareersHero({ jobCount }) {
  return (
    <section data-mf="careers-hero" style={{
      position: 'relative', padding: '120px 44px 88px',
      borderBottom: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,18,60,0.28) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }}/>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at center, black 40%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 40%, transparent 80%)',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ marginBottom: 32 }}><Eyebrow>We’re Hiring</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(48px, 8vw, 112px)',
          lineHeight: 0.92, letterSpacing: '-0.045em', margin: 0, textWrap: 'balance',
        }}>
          Join a team<br/>that <span style={{ color: '#E8123C' }}>delivers.</span>
        </h1>
        <p style={{ maxWidth: 680, margin: '28px auto 0', fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.68)' }}>
          We install the Inbound System for high ticket businesses. We’re growing, and we hire
          operators who say it and do it. Remote, results-first, and paid for performance.
        </p>

        <div data-mf="careers-hero-actions" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 40 }}>
          <Button as="a" href="#roles" size="lg">View Open Roles</Button>
          <Button as="a" href="#values" size="lg" variant="secondary" iconAfter={false}>How We Operate</Button>
        </div>

        <div data-mf="careers-stats" style={{
          display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 56,
        }}>
          {[
            [`${jobCount} open roles`, 'Sales · Client Success · Paid Media'],
            ['100% remote', 'US & Canada, EST core hours'],
            ['828+ businesses', 'Served with the Inbound System'],
          ].map(([big, small]) => (
            <div key={big} style={{
              padding: '14px 22px', borderRadius: 16, textAlign: 'left',
              background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
            }}>
              <div style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 18, color: '#fff', letterSpacing: '-0.01em' }}>{big}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{small}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- WHY WORK HERE ----------
function WhyWorkHere() {
  return (
    <section data-mf="careers-section" style={{ padding: '110px 44px', background: '#0F080B', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow>Why Work Here</Eyebrow>
          <h2 style={{
            fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(36px, 5vw, 64px)',
            lineHeight: 0.98, letterSpacing: '-0.035em', margin: '22px 0 18px', textWrap: 'balance',
          }}>
            High output. <span style={{ color: '#E8123C' }}>High reward.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.68)', margin: 0 }}>
            When you join the team, you step into a results-first environment built for ambitious people who want their work to matter.
          </p>
        </div>

        <div className="mf-careers-pillars">
          {MF_PILLARS.map(p => (
            <div key={p.n} style={{
              padding: '30px 26px', borderRadius: 22,
              background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
              transition: 'all 200ms ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = p.accent + '66'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <span style={{ fontFamily: 'Poppins', fontWeight: 900, fontSize: 16, color: p.accent, letterSpacing: '0.14em' }}>{p.n}</span>
                <span style={{ flex: 1, height: 1, background: p.accent, opacity: 0.5 }}/>
              </div>
              <h3 style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 22, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '0 0 12px', color: '#fff' }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.68)', margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- OPEN ROLES ----------
function OpenRoles({ jobs }) {
  return (
    <section id="roles" data-mf="careers-section" style={{ padding: '110px 44px', background: '#0A0608', borderBottom: '1px solid rgba(255,255,255,0.06)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-mf="roles-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 48 }}>
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>Open Roles</Eyebrow>
            <h2 style={{
              fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(36px, 5vw, 64px)',
              lineHeight: 0.98, letterSpacing: '-0.035em', margin: '22px 0 0', textWrap: 'balance',
            }}>
              Open positions
            </h2>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.55)', margin: 0, maxWidth: 380 }}>
            Every role is remote and performance-based. Click a role for the full posting and how to apply.
          </p>
        </div>

        <div className="mf-careers-roles">
          {jobs.map(j => <RoleCard key={j.slug} job={j}/>)}
        </div>
      </div>
    </section>
  );
}

function RoleCard({ job }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`/careers/${job.slug}`} className="mf-role-row"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: '84px minmax(0, 1fr) auto', alignItems: 'center', gap: 28,
        padding: '22px 28px', borderRadius: 20, textDecoration: 'none',
        background: hover ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.03)',
        border: `1px solid ${hover ? 'rgba(232,18,60,0.5)' : 'rgba(255,255,255,0.08)'}`,
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'all 200ms ease',
      }}>
      <div style={{
        width: 84, height: 84, borderRadius: 16, overflow: 'hidden',
        background: '#1C0810', border: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <img src="/assets/logo-mark.png" alt="" width={84} height={84} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
      </div>
      <div style={{ minWidth: 0 }}>
        <h3 style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 'clamp(22px, 2.4vw, 28px)', lineHeight: 1.1, letterSpacing: '-0.025em', margin: '0 0 6px', color: '#fff' }}>
          {job.title}
        </h3>
        <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.62)' }}>{job.location.split(' (')[0]}</div>
      </div>
      <div className="mf-role-cta" style={{
        display: 'inline-flex', alignItems: 'center', gap: 10, padding: '13px 24px', borderRadius: 999,
        background: hover ? '#FF1F4A' : '#E8123C', color: '#fff',
        fontFamily: 'Poppins', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase',
        boxShadow: hover ? '0 14px 38px rgba(232,18,60,0.55)' : '0 10px 30px rgba(232,18,60,0.35)',
        transition: 'all 200ms ease', whiteSpace: 'nowrap',
      }}>
        Apply Now
        <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: '50%', background: 'rgba(255,255,255,0.18)', fontSize: 11, transform: hover ? 'translateX(3px)' : 'none', transition: 'transform 200ms ease' }}>→</span>
      </div>
    </a>
  );
}

// ---------- VALUES INTRO (sits above the reused ValueSection blocks) ----------
function ValuesIntro() {
  return (
    <section id="values" data-mf="careers-section" style={{ padding: '110px 44px 40px', background: '#0A0608', textAlign: 'center', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <Eyebrow>How We Operate</Eyebrow>
        <h2 style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(40px, 6vw, 84px)',
          lineHeight: 0.95, letterSpacing: '-0.04em', margin: '22px 0 20px', textWrap: 'balance',
        }}>
          Core <span style={{ color: '#E8123C' }}>Values</span>
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,0.68)', margin: 0 }}>
          Five tenets that fuel how we work, how we show up, and how we scale with clients. Non-negotiables for us, and for anyone who joins the team.
        </p>
      </div>
    </section>
  );
}

// ---------- CLOSING CTA ----------
function CareersCTA() {
  const email = (window.MF_JOBS && window.MF_JOBS[0] && window.MF_JOBS[0].email) || 'support@masterfilmmaker.com';
  return (
    <section data-mf="careers-section" style={{ padding: '110px 44px', background: '#0F080B', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{
        maxWidth: 980, margin: '0 auto', textAlign: 'center', padding: 'clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px)',
        borderRadius: 32, position: 'relative', overflow: 'hidden',
        background: 'linear-gradient(135deg, rgba(232,18,60,0.16) 0%, rgba(20,8,12,0.9) 60%)',
        border: '1px solid rgba(232,18,60,0.35)',
      }}>
        <Eyebrow>Don’t see your role?</Eyebrow>
        <h2 style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(32px, 4.5vw, 56px)',
          lineHeight: 1, letterSpacing: '-0.035em', margin: '22px 0 18px', textWrap: 'balance',
        }}>
          Great operators don’t wait for a posting.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', margin: '0 auto 32px', maxWidth: 560 }}>
          If you’re exceptional at something we need and don’t see it listed, send a short Loom introducing yourself and what you’d own.
        </p>
        <Button as="a" href={`mailto:${email}?subject=${encodeURIComponent('Application – General – [Your Name]')}`} size="lg">Introduce Yourself</Button>
        <div style={{ marginTop: 16, fontSize: 13, color: 'rgba(255,255,255,0.45)' }}>{email}</div>
      </div>
    </section>
  );
}

// ---------- JOB POSTING PAGE ----------
function JobPage({ slug }) {
  const [modal, setModal] = React.useState(false);
  const onCTA = () => setModal(true);
  const jobs = window.MF_JOBS || [];
  const job = jobs.find(j => j.slug === slug);
  const others = jobs.filter(j => j.slug !== slug);
  const mailto = job ? `mailto:${job.email}?subject=${encodeURIComponent(job.apply.subject)}` : '#';

  return (
    <>
      <NavBar onCTA={onCTA}/>
      <main style={{ background: '#0A0608', color: '#fff', minHeight: '100vh' }}>
        {!job ? (
          <section style={{ padding: '140px 44px', textAlign: 'center' }}>
            <h1 style={{ fontFamily: 'Poppins', fontWeight: 900, fontSize: 40 }}>Role not found</h1>
            <p style={{ color: 'rgba(255,255,255,0.6)' }}>This posting may have closed. <a href="/careers" style={{ color: '#ff9fb2' }}>See all open roles</a>.</p>
          </section>
        ) : (
          <>
            <JobHero job={job} mailto={mailto}/>
            <section data-mf="careers-section" style={{ padding: '72px 44px 110px', background: '#0A0608' }}>
              <div className="mf-job-layout" style={{ maxWidth: 1200, margin: '0 auto' }}>
                <article>
                  {job.sections.map((s, i) => <JobSection key={i} section={s}/>)}
                  <JobApply job={job} mailto={mailto}/>
                </article>
                <aside className="mf-job-aside">
                  <JobFacts job={job} mailto={mailto} others={others}/>
                </aside>
              </div>
            </section>
          </>
        )}
      </main>
      <Footer/>
      {modal && <IClosedModal onClose={() => setModal(false)}/>}
    </>
  );
}
window.JobPage = JobPage;

function JobHero({ job, mailto }) {
  return (
    <section data-mf="job-hero" style={{
      position: 'relative', padding: '96px 44px 64px',
      borderBottom: '1px solid rgba(255,255,255,0.06)', overflow: 'hidden',
      background: 'radial-gradient(120% 90% at 100% 0%, #5A0A24 0%, #45091E 22%, #1F080D 55%, #0A0608 88%)',
    }}>
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
        <a href="/careers" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.6)', textDecoration: 'none', marginBottom: 28 }}>
          <span>←</span> All open roles
        </a>
        <div style={{ marginBottom: 22 }}><Eyebrow>Open Role · {job.team}</Eyebrow></div>
        <h1 style={{
          fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(40px, 6.5vw, 84px)',
          lineHeight: 0.96, letterSpacing: '-0.04em', margin: '0 0 22px', maxWidth: 900, textWrap: 'balance',
        }}>{job.title}</h1>
        <p style={{ fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', margin: '0 0 32px', maxWidth: 680 }}>{job.summary}</p>
        <div data-mf="job-meta" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 36 }}>
          {[['Location', job.location], ['Job type', job.type], ['Industry', job.industry]].map(([k, v]) => (
            <div key={k} style={{ padding: '10px 16px', borderRadius: 14, background: 'rgba(0,0,0,0.25)', border: '1px solid rgba(255,255,255,0.1)', fontSize: 13 }}>
              <span style={{ color: 'rgba(255,255,255,0.45)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 10, display: 'block', marginBottom: 2 }}>{k}</span>
              <span style={{ color: '#fff' }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Button as="a" href="#apply" size="lg">Apply Now</Button>
          <Button as="a" href="#apply" size="lg" variant="secondary" iconAfter={false}>How to Apply</Button>
        </div>
      </div>
    </section>
  );
}

const jobH2 = { fontFamily: 'Poppins', fontWeight: 800, fontSize: 'clamp(24px, 2.6vw, 32px)', lineHeight: 1.1, letterSpacing: '-0.025em', margin: '0 0 18px', color: '#fff' };
const jobP  = { fontSize: 16.5, lineHeight: 1.75, color: 'rgba(255,255,255,0.75)', margin: '0 0 16px' };

function JobList({ items }) {
  return (
    <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 8px', display: 'grid', gap: 10 }}>
      {items.map((t, i) => (
        <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.78)' }}>
          <span style={{ flexShrink: 0, marginTop: 9, width: 7, height: 7, borderRadius: '50%', background: '#E8123C', boxShadow: '0 0 8px rgba(232,18,60,0.7)' }}/>
          <span>{t}</span>
        </li>
      ))}
    </ul>
  );
}

function JobSection({ section }) {
  const s = section;
  return (
    <section style={{ padding: '32px 0', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
      <h2 style={jobH2}>{s.h}</h2>
      {s.p && s.p.map((t, i) => <p key={i} style={jobP}>{t}</p>)}
      {s.stats && (
        <div style={{ margin: '4px 0 22px', padding: '22px 24px', borderRadius: 18, background: 'linear-gradient(135deg, rgba(232,18,60,0.14) 0%, rgba(20,8,12,0.9) 60%)', border: '1px solid rgba(232,18,60,0.35)' }}>
          <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', color: '#ff9fb2', textTransform: 'uppercase', marginBottom: 16 }}>{s.stats.label}</div>
          <div className="mf-job-stats" style={{ display: 'grid', gridTemplateColumns: `repeat(${s.stats.items.length}, 1fr)`, gap: 14 }}>
            {s.stats.items.map(([big, small]) => (
              <div key={small}>
                <div style={{ fontFamily: 'Poppins', fontWeight: 900, fontSize: 'clamp(26px, 3vw, 36px)', letterSpacing: '-0.03em', lineHeight: 1, color: '#fff' }}>{big}</div>
                <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', marginTop: 6 }}>{small}</div>
              </div>
            ))}
          </div>
        </div>
      )}
      {s.ul && <JobList items={s.ul}/>}
      {s.sub && s.sub.map(([title, items]) => (
        <div key={title} style={{ marginTop: 18 }}>
          <h3 style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16, letterSpacing: '0.04em', color: '#ff9fb2', margin: '0 0 12px', textTransform: 'uppercase' }}>{title}</h3>
          <JobList items={items}/>
        </div>
      ))}
      {s.steps && (
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
          {s.steps.map(([label, text], i) => (
            <li key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 16, alignItems: 'start', padding: '14px 18px', borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)' }} className="mf-job-step">
              <span style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, letterSpacing: '0.1em', color: '#E8123C', textTransform: 'uppercase', paddingTop: 2 }}>{label}</span>
              <span style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)' }}>{text}</span>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}

function JobApply({ job, mailto }) {
  const a = job.apply;
  const body = [
    'Role: ' + job.title, '', 'Full name:', 'Location (city, state/province):', 'Availability to interview:', 'Ideal start date:', '',
    'Resume (attached or link):', 'Video intro link (Loom, 5 min max):', '',
    'One or two sentences on why this role:', '',
  ].join('\n');
  const mailtoFull = `mailto:${job.email}?subject=${encodeURIComponent(a.subject)}&body=${encodeURIComponent(body)}`;
  const items = [
    ['Subject line, exactly:', a.subject, true],
    ['Your resume', 'Attach a PDF or paste a link to it.', false],
    ['A short video introduction', 'Record five minutes max on Loom or a similar tool, introduce yourself, and answer the questions below. Paste the viewable link in the email.', false],
    ['Your details', 'Full name, where you’re located, availability to interview, and ideal start date.', false],
  ];
  const step = { display: 'flex', gap: 14, alignItems: 'flex-start' };
  const num = { flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: '#E8123C', color: '#fff', fontFamily: 'Poppins', fontWeight: 800, fontSize: 13, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 };
  return (
    <section id="apply" style={{
      marginTop: 40, padding: 'clamp(28px, 4vw, 44px)', borderRadius: 24, scrollMarginTop: 90,
      background: 'linear-gradient(135deg, rgba(232,18,60,0.14) 0%, rgba(20,8,12,0.9) 60%)',
      border: '1px solid rgba(232,18,60,0.35)',
    }}>
      <Eyebrow>How to Apply</Eyebrow>
      <h2 style={{ ...jobH2, margin: '18px 0 14px', fontSize: 'clamp(26px, 3vw, 36px)' }}>Apply for {job.title}</h2>
      <p style={jobP}>
        Send <strong style={{ color: '#fff' }}>one email</strong> to <a href={mailtoFull} style={{ color: '#fff', fontWeight: 600 }}>{job.email}</a> containing the four items below. We review complete applications first.
      </p>

      <ol style={{ margin: '0 0 8px', padding: 0, listStyle: 'none', display: 'grid', gap: 16 }}>
        {items.map(([title, detail, mono], i) => (
          <li key={i} style={step}>
            <span style={num}>{i + 1}</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 16, color: '#fff', marginBottom: 4 }}>{title}</div>
              {mono ? (
                <div style={{ display: 'inline-block', padding: '8px 14px', borderRadius: 10, background: 'rgba(0,0,0,0.35)', border: '1px solid rgba(255,255,255,0.12)', fontFamily: 'Poppins', fontWeight: 600, fontSize: 14, color: '#fff' }}>{detail}</div>
              ) : (
                <div style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.75)' }}>{detail}</div>
              )}
              {i === 2 && (
                <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 8 }}>
                  {a.questions.slice(0, 3).map((q, k) => (
                    <li key={k} style={{ display: 'flex', gap: 10, fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)' }}>
                      <span style={{ flexShrink: 0, marginTop: 9, width: 6, height: 6, borderRadius: '50%', background: '#ff9fb2' }}/>
                      <span>{q}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </li>
        ))}
      </ol>

      <div style={{ marginTop: 28, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button as="a" href={mailtoFull} size="lg">Start Your Application Email</Button>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)' }}>Opens a pre-filled email with the subject line and a template.</span>
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)', margin: '22px 0 0' }}>
        <strong style={{ color: 'rgba(255,255,255,0.85)' }}>What happens next:</strong> we review your video and resume, and if it’s a fit we reply within a few business days to schedule an interview.
      </p>
      <p style={{ fontSize: 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.5)', margin: '18px 0 0' }}>{job.eeo}</p>
    </section>
  );
}

function JobFacts({ job, mailto, others }) {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <div style={{ padding: 26, borderRadius: 22, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', color: '#E8123C', textTransform: 'uppercase', marginBottom: 18 }}>At a glance</div>
        <dl style={{ margin: 0, display: 'grid', gap: 14 }}>
          {[['Team', job.team], ['Location', job.location], ['Job type', job.type], ['Industry', job.industry]].map(([k, v]) => (
            <div key={k}>
              <dt style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{k}</dt>
              <dd style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: '#fff' }}>{v}</dd>
            </div>
          ))}
        </dl>
        <div style={{ marginTop: 24 }}>
          <Button as="a" href="#apply" size="md">Apply Now</Button>
        </div>
        <div style={{ marginTop: 14, fontSize: 12.5, color: 'rgba(255,255,255,0.45)', lineHeight: 1.5 }}>
          Questions? <a href={`mailto:${job.email}`} style={{ color: 'rgba(255,255,255,0.75)' }}>{job.email}</a>
        </div>
      </div>

      {others.length > 0 && (
        <div style={{ padding: 26, borderRadius: 22, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)' }}>
          <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 14 }}>Other open roles</div>
          <div style={{ display: 'grid', gap: 10 }}>
            {others.map(o => (
              <a key={o.slug} href={`/careers/${o.slug}`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, fontSize: 14, fontWeight: 600, color: '#fff', textDecoration: 'none', padding: '10px 0', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                <span>{o.title}</span><span style={{ color: '#E8123C' }}>→</span>
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}