/* global React, ReactDOM */
const jobs = [
  {t:'Industriereiniger (m/w/d)', meta:'Vollzeit · Düren · ab sofort', d:'Sie reinigen mit unserer Crew Industrieanlagen in NRW. Führerschein C1 von Vorteil, aber kein Muss.'},
  {t:'Fachkraft Tankreinigung (m/w/d)', meta:'Vollzeit · Düren · ab sofort', d:'Mit Schein für Atemschutz Klasse III oder Bereitschaft, ihn bei uns zu machen. Keine Höhenangst, körperlich fit.'},
  {t:'Disponent/in Notdienst', meta:'Vollzeit · Düren · ab 01.07.', d:'Sie nehmen Notrufe entgegen, koordinieren Crew und Fahrzeug, halten den Kunden auf dem Laufenden. Schichtdienst inkl. Rufbereitschaft.'},
  {t:'Berufskraftfahrer C/CE Saug-Spül-Kombi', meta:'Vollzeit · Düren', d:'Sie fahren unsere Saug-Spül-Fahrzeuge zu Einsätzen in NRW und Umgebung. ADR-Schein wünschenswert, kann bei uns nachgemacht werden.'},
  {t:'Auszubildende/r Fachkraft für Rohr-, Kanal- & Industrieservice', meta:'Ausbildung · Düren · ab Aug.', d:'Drei Jahre, dual, mit Berufsschule in Aachen. Wir bilden seit 2007 selbst aus und übernehmen jeden, der die Prüfung schafft.'},
];

const Page = () => (
  <RootSubPage
    active="karriere"
    breadcrumb={[{label:'Start', href:'index.html'}, {label:'Karriere'}]}
    kicker="Jobs in Düren & Umgebung"
    title="Stammbelegschaft, ehrlich bezahlt."
    sub="Tarif Bauhauptgewerbe NRW, planbarer Schichtbetrieb, eigene Werkstatt, eigene Werkstatt-Hose. Kein Springer-Pool, keine Subunternehmer-Mentalität."
  >
    <section className="pc-section">
      <div className="pc-container">
        <SectionHead kicker="Was Sie bei uns finden" title="Solider Betrieb, ohne Glamour."/>
        <div className="pc-services-grid" style={{marginBottom:48}}>
          <article className="pc-service">
            <div className="pc-service-head"><span className="pc-service-num">01</span><h3 className="pc-service-title">Tarifvertrag</h3></div>
            <p className="pc-service-desc">Bauhauptgewerbe NRW. Urlaub, Weihnachtsgeld, Lohnerhöhung — alles geregelt, nicht verhandelt.</p>
          </article>
          <article className="pc-service">
            <div className="pc-service-head"><span className="pc-service-num">02</span><h3 className="pc-service-title">Eigene Crew</h3></div>
            <p className="pc-service-desc">Sie arbeiten mit denselben Kollegen. Kein Springer-Pool, keine Auswärts-Wochen am Stück.</p>
          </article>
          <article className="pc-service">
            <div className="pc-service-head"><span className="pc-service-num">03</span><h3 className="pc-service-title">Weiterbildung</h3></div>
            <p className="pc-service-desc">Atemschutz, Befahren von Behältern, ADR — Schulungen werden bezahlt und finden während der Arbeitszeit statt.</p>
          </article>
        </div>

        <SectionHead kicker="Offene Stellen" title="Wir suchen aktuell:"/>
        <div className="pc-jobs">
          {jobs.map((j,i) => (
            <div className="pc-job" key={i}>
              <div>
                <h4 className="pc-job-title">{j.t}</h4>
                <div className="pc-job-meta">{j.meta}</div>
              </div>
              <p className="pc-job-desc">{j.d}</p>
              <a className="pc-btn pc-btn-primary" href="kontakt.html">Bewerben <Arrow/></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  </RootSubPage>
);
ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);