// Careers page — open positions, why work here, benefits

const OPENINGS = [
  { id: 'r1', role: 'Architect / BIM Modeler / Draftsman', loc: 'New Delhi', type: 'Full-time', exp: 'All levels', team: 'Architecture', posted: 'Now open' },
];

const BENEFITS = [
  { k: 'Senior mentorship',    d: 'Pairing with leads who\'ve shipped 100+ projects. We hire to mentor, not to staff a backlog.' },
  { k: 'Autodesk certification', d: 'Every full-time hire becomes Autodesk Certified. We pay for the prep and the exam.' },
  { k: 'Global exposure',      d: 'Work on projects in the US, UK, Australia and the Gulf — without leaving Delhi.' },
  { k: 'Hybrid first',         d: '3 days in studio, 2 days remote. Production teams flex around your project rhythm.' },
  { k: 'Health & family',      d: 'Comprehensive family medical, dental and parental leave well above local norms.' },
  { k: 'Real career ladder',   d: 'Drafter → Modeler → Coordinator → Lead → Principal. Reviews twice yearly, with named promotion paths.' },
];

const TEAM_VOICES = [
  { name: 'Priya Singh',  role: 'Senior Coordinator · 8 yrs', q: 'I came in as a junior modeler and now own MEP federation on three US healthcare projects. The mentorship is real.' },
  { name: 'Rakesh Handa', role: 'Visualization Lead · 6 yrs', q: 'I get to push V-Ray and Lumion as hard as anywhere — and ship for marketing campaigns on three continents.' },
];

function CareersHero() {
  const { w, isNarrow } = useViewport();
  return (
    <section style={{ position: 'relative', padding: pick(w, '90px 0 80px', '44px 0 48px'), overflow: 'hidden' }}>
      <CursorSpotlight color="rgba(243, 119, 53, 0.10)" size={520} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1.3fr 1fr', '1fr'), gap: pick(w, 60, 36), alignItems: 'center' }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 22 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Careers
            </div>
            <h1 style={{ ...bsStyles.display, fontSize: fs(44, 124), margin: 0, marginBottom: 28 }}>
              Build with us.<br />
              <span style={{ color: BS.accent }}>Globally.</span>
            </h1>
            <p style={{ fontSize: fs(16, 19), color: BS.text2, lineHeight: 1.55, margin: 0, marginBottom: 32, maxWidth: 580 }}>
              We're 48 architects, modelers, coordinators and renderers in New Delhi, working on projects from New York to Sydney.
              We hire for craft, mentor seriously, and pay above market for senior talent.
            </p>
            <a href="#openings" style={bsStyles.btnAccent}>See open roles <ArrowIcon /></a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: isNarrow ? 360 : 'none', width: '100%', margin: isNarrow ? '0 auto' : 0 }}>
            <div style={{ aspectRatio: '4/5', borderRadius: 18, overflow: 'hidden', transform: 'rotate(-2deg)' }}>
              <Placeholder kind="person" />
            </div>
            <div style={{ aspectRatio: '4/5', borderRadius: 18, overflow: 'hidden', transform: 'rotate(2deg)', marginTop: 30 }}>
              <Placeholder kind="render" tone="dark" />
            </div>
            <div style={{ aspectRatio: '4/5', borderRadius: 18, overflow: 'hidden', transform: 'rotate(1deg)', marginTop: -10 }}>
              <Placeholder kind="wireframe" tone="dark" />
            </div>
            <div style={{ aspectRatio: '4/5', borderRadius: 18, overflow: 'hidden', transform: 'rotate(-1deg)' }}>
              <Placeholder kind="person" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CareersStats() {
  const { w, isNarrow } = useViewport();
  const cCols = pick(w, 4, 2, 2);
  return (
    <section style={{ padding: pick(w, '60px 0', '48px 0'), background: BS.bgDark, color: '#fff' }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(4, 1fr)', 'repeat(2, 1fr)'), gap: pick(w, 0, 24) }}>
          {[
            { v: 48, suf: '',  label: 'On the team' },
            { v: 4,  suf: '',  label: 'Senior leads' },
            { v: 6,  suf: ' yrs', label: 'Avg. tenure' },
            { v: 100, suf: '%', label: 'Autodesk certified' },
          ].map((s, i) => (
            <div key={s.label} style={{
              padding: pick(w, '0 32px', 0),
              borderLeft: (isNarrow || i % cCols === 0) ? 'none' : `1px solid rgba(255,255,255,0.15)`,
            }}>
              <div style={{ ...bsStyles.display, fontSize: fs(38, 56), color: BS.accent, lineHeight: 1, marginBottom: 10 }}>
                <StatCounter value={s.v} suffix={s.suf} />
              </div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '120px 0', '72px 0') }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="Why work here"
          title={<>A studio,<br />not a sweatshop.</>}
          align="split"
          lede="Many BIM outsourcers are production lines. We're not. We hire architects who want to design, mentor and grow — and we run the studio so that's possible."
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(3, 1fr)', 'repeat(2, 1fr)', '1fr'), gap: 20 }}>
          {BENEFITS.map((b, i) => (
            <div key={b.k} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 20, padding: pick(w, 32, 24),
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, background: BS.accentSoft,
                color: BS.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800, fontSize: 18, marginBottom: 22,
              }}>{String(i+1).padStart(2, '0')}</div>
              <h3 style={{ ...bsStyles.display, fontSize: 24, margin: 0, marginBottom: 10 }}>{b.k}</h3>
              <p style={{ fontSize: 14, color: BS.text2, lineHeight: 1.6, margin: 0 }}>{b.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Voices() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '100px 0', '64px 0'), background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <SectionHeader
          eyebrow="From the studio"
          title={<>The team,<br />in their words.</>}
          align="split"
        />
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(2, 1fr)', '1fr'), gap: 20 }}>
          {TEAM_VOICES.map((v, i) => (
            <div key={i} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 24, padding: pick(w, 40, 24),
              display: 'grid', gridTemplateColumns: '90px 1fr', gap: pick(w, 28, 18), alignItems: 'flex-start',
            }}>
              <div style={{ width: 90, height: 90, borderRadius: '50%', overflow: 'hidden' }}>
                <Placeholder kind="person" />
              </div>
              <div>
                <p style={{ ...bsStyles.display, fontSize: 20, lineHeight: 1.4, fontWeight: 500, margin: 0, marginBottom: 20, letterSpacing: '-0.01em' }}>
                  "{v.q}"
                </p>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{v.name}</div>
                <div style={{ fontSize: 12, color: BS.muted }}>{v.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Openings() {
  const [filter, setFilter] = React.useState('All');
  const { w, isNarrow } = useViewport();
  const teams = ['All', ...new Set(OPENINGS.map(o => o.team))];
  const filtered = filter === 'All' ? OPENINGS : OPENINGS.filter(o => o.team === filter);
  return (
    <section id="openings" style={{ padding: pick(w, '120px 0', '72px 0') }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 18 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Open positions
            </div>
            <h2 style={{ ...bsStyles.display, fontSize: fs(36, 64), margin: 0 }}>
              Now hiring.<br />Apply below.
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {teams.map(t => (
              <button key={t} onClick={() => setFilter(t)} style={{
                padding: '9px 16px', borderRadius: 999, fontSize: 12, fontWeight: 600,
                border: `1px solid ${filter === t ? BS.text : BS.border2}`,
                background: filter === t ? BS.text : 'transparent',
                color: filter === t ? BS.bg : BS.text, cursor: 'pointer',
                fontFamily: 'inherit', transition: 'all 0.2s',
              }}>{t}</button>
            ))}
          </div>
        </div>

        <div style={{ background: BS.bg2, border: `1px solid ${BS.border}`, borderRadius: 24, overflow: 'hidden' }}>
          {filtered.map((o, i) => (
            <a key={o.id} href="https://docs.google.com/forms/d/e/1FAIpQLSc2qgNLjkBC-coc58eM6Eu3_JSZzkNVvvJUETZIw7rCU93QRQ/viewform" target="_blank" rel="noopener noreferrer" style={{
              display: 'grid', gridTemplateColumns: pick(w, '2fr 1.2fr 0.8fr 0.8fr 0.8fr 60px', '1fr 1fr', '1fr'),
              gap: pick(w, 20, 10), padding: pick(w, '24px 32px', '20px 22px'), alignItems: 'center',
              borderBottom: i < filtered.length - 1 ? `1px solid ${BS.border}` : 'none',
              color: BS.text, textDecoration: 'none', transition: 'background 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.background = BS.bg3}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <div style={{ gridColumn: isNarrow ? '1 / -1' : 'auto' }}>
                <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 4 }}>{o.role}</div>
                <div style={{ fontSize: 11, color: BS.accent, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{o.team}</div>
              </div>
              <div style={{ fontSize: 13, color: BS.text2 }}>{o.loc}</div>
              <div style={{ fontSize: 13, color: BS.text2 }}>{o.type}</div>
              <div style={{ fontSize: 13, color: BS.text2 }}>{o.exp}</div>
              <div style={{ fontSize: 12, color: BS.muted }}>{o.posted}</div>
              <div style={{
                width: 38, height: 38, borderRadius: '50%', background: BS.bg3,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: BS.text,
              }}>
                <ArrowIcon size={13} />
              </div>
            </a>
          ))}
        </div>

        <div style={{
          marginTop: 28, padding: '28px 32px',
          background: BS.bg3, borderRadius: 18,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 4 }}>Don't see your role?</div>
            <div style={{ fontSize: 13, color: BS.muted }}>
              We always have room for senior talent. Send us a portfolio — we'll find a fit.
            </div>
          </div>
          <a href="mailto:careers@thebimace.com" style={{ ...bsStyles.btnAccent, padding: '12px 20px', fontSize: 13 }}>
            careers@thebimace.com <ArrowIcon size={12} />
          </a>
        </div>
      </div>
    </section>
  );
}

function CareersPage() {
  return (
    <Page currentPage="careers">
      <CareersHero />
      <CareersStats />
      <Benefits />
      <Voices />
      <Openings />
      <B3CTA kicker="Ready to" highlight="apply?" after="We're listening." lede="Send a CV, a portfolio link, and one paragraph on a project you're proud of. We reply to every applicant within five days." />
    </Page>
  );
}

window.CareersPage = CareersPage;