// Careers page — invite candidates to apply via email or LinkedIn.
// Lightweight content built from existing values (regions, disciplines).

const CAREER_DISCIPLINES = [
{
  eyebrow: 'Engineering',
  title: 'Platform, MLOps & GPU systems',
  desc: 'Build the control plane that runs production AI. Including orchestration, multi-tenant GPU partitioning, LLM operations, and security.',
  tags: ['Kubernetes', 'NVIDIA / AMD', 'Python / Go', 'vLLM · Ray']
},
{
  eyebrow: 'Field & Delivery',
  title: 'Data center, cabling & cluster commissioning',
  desc: 'On-the-ground deployment of GPU clusters and AIDC builds. Including racking, structured cabling, switch configuration, burn-in and handover.',
  tags: ['RoCE / InfiniBand', 'Structured cabling', 'NCCL / HPL', 'BCM · NMIX']
},
{
  eyebrow: 'Solutions & Architecture',
  title: 'Pre-sales architects & program leads',
  desc: 'Translate customer ambition into a deliverable scope. Including architecture, BOM, cost, and a defensible operating model for the program.',
  tags: ['AI platform', 'Network design', 'Capacity planning', 'Customer-facing']
},
{
  eyebrow: 'Commercial & Operations',
  title: 'Sales, account, supply & finance',
  desc: 'Run the business that backs the engineering. Including enterprise sales, account management, supply chain, finance, and people operations.',
  tags: ['Enterprise', 'APAC + EMEA', 'Strategic accounts']
}];


const HIRING_PROCESS = [
{ n: '01', title: 'Apply', desc: 'Send CV / portfolio to hr@cloudengined.com or apply via LinkedIn.' },
{ n: '02', title: 'Intro call', desc: 'A 30-minute conversation with the hiring lead — scope, context, mutual fit.' },
{ n: '03', title: 'Technical / craft', desc: 'A focused deep-dive on the actual work — system design, field experience, or program walkthrough.' },
{ n: '04', title: 'Team & values', desc: 'Meet the people you would work with day-to-day, and the principals you would report into.' },
{ n: '05', title: 'Offer & onboarding', desc: 'Decision within a week. Onboarding plan written before you start.' }];


const HR_MAIL = 'mailto:hr@cloudengined.com?subject=' +
encodeURIComponent('Application — [Role you are applying for]');

const CareersIntro = () =>
<section className="section">
    <div className="wrap">
      <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 7fr)', gap: 80, alignItems: 'start' }}>
        <div>
          <div className="eyebrow">Why CloudEngine / 01</div>
          <h2 style={{ marginTop: 18, maxWidth: '16ch' }}>Engineering the AI infrastructure layer for the region.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <p className="lead">We build, run and secure the AI infrastructure behind hyperscalers, neo-clouds, and enterprise programs globally. From the data hall and GPU cluster up to LLM operations and AI security.

        </p>
          <p>We hire engineers, field deployment teams, solution architects, and commercial people who want to ship real, accountable work on production AI infrastructure.

        </p>
        </div>
      </div>
    </div>
  </section>;


const CareersDisciplines = () =>
<section className="section" style={{ paddingTop: 0 }}>
    <div className="wrap">
      <div className="section-head reveal" style={{ marginBottom: 40 }}>
        <div className="eyebrow">Where you'll work / 02</div>
        <h2 style={{ marginTop: 18, maxWidth: '22ch' }}>Four disciplines, one accountable delivery model.</h2>
      </div>
      <div className="careers-grid">
        {CAREER_DISCIPLINES.map((d, i) =>
      <article key={d.eyebrow} className={`career-card reveal ${i % 2 ? 'd2' : 'd1'}`}>
            <div className="career-card-eyebrow">{d.eyebrow}</div>
            <h3 className="career-card-title">{d.title}</h3>
            <p className="career-card-desc">{d.desc}</p>
            <div className="career-tags">
              {d.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </article>
      )}
      </div>
    </div>
  </section>;


const CareersRegions = () =>
<section className="section band-paper-2">
    <div className="wrap">
      <div className="section-head reveal" style={{ marginBottom: 40 }}>
        <div className="eyebrow">Where we hire / 03</div>
        <h2 style={{ marginTop: 18, maxWidth: '22ch' }}>Twelve markets and counting — most roles are field-near.</h2>
      </div>
      <div className="careers-regions reveal d1">
        {REGIONS.map((r) =>
      <div key={r.code} className="region-pill">
            <span className="region-pill__code mono">{r.code}</span>
            <span className="region-pill__name">{r.country}</span>
            {r.role && <span className="region-pill__role">{r.role}</span>}
          </div>
      )}
      </div>
    </div>
  </section>;


const CareersProcess = () =>
<section className="section">
    <div className="wrap">
      <div className="section-head reveal" style={{ marginBottom: 40 }}>
        <div className="eyebrow">How we hire / 04</div>
        <h2 style={{ marginTop: 18, maxWidth: '22ch' }}>A short, focused process — decision within a week.</h2>
      </div>
      <div className="hire-steps reveal d1">
        {HIRING_PROCESS.map((s) =>
      <div key={s.n} className="hire-step">
            <span className="hire-step__n mono">{s.n}</span>
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


const LinkedInSquare = () =>
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.26 2.37 4.26 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.11 2.06 2.06 0 0 1 0 4.11zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" />
  </svg>;


const CareersApply = () =>
<section className="section">
    <div className="wrap">
      <div className="apply-card reveal">
        <div className="apply-card__left">
          <div className="eyebrow">Apply / 05</div>
          <h2 style={{ marginTop: 18 }}>Two ways in.</h2>
          <p className="muted" style={{ maxWidth: 44 + 'ch', marginTop: 14 }}>Don't see a specific role you want? Open applications are welcome. Tell us the work you'd like to do and why CloudEngine.

        </p>
        </div>
        <div className="apply-card__right">
          <a href={HR_MAIL} className="apply-channel">
            <div className="apply-channel__mark"><I.mail /></div>
            <div className="apply-channel__body">
              <span className="apply-channel__eyebrow">Email · open applications</span>
              <span className="apply-channel__addr">hr@cloudengined.com</span>
            </div>
            <span className="apply-channel__arrow"><I.arrow /></span>
          </a>
          <a
          href="https://www.linkedin.com/company/cloudengined/"
          target="_blank"
          rel="noopener noreferrer"
          className="apply-channel">
            <div className="apply-channel__mark apply-channel__mark--li"><LinkedInSquare /></div>
            <div className="apply-channel__body">
              <span className="apply-channel__eyebrow">LinkedIn · live openings</span>
              <span className="apply-channel__addr">linkedin.com/company/cloudengined</span>
            </div>
            <span className="apply-channel__arrow"><I.arrow /></span>
          </a>
        </div>
      </div>
    </div>
  </section>;


function CareersApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="Careers"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'Careers' }]}
          title={<>Build the AI infrastructure <span className="accent">layer with us.</span></>}
          sub="Engineers, field deployment teams, solution architects, and commercial people who want to ship real, accountable work on production AI infrastructure." />
        <CareersIntro />
        <CareersRegions />
        <CareersProcess />
        <CareersApply />
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<CareersApp />);