/* global React, ReactDOM */
const faelle = [
  {tag:'Automotive', title:'Lackier- und KTL-Anlagen',
   desc:'Overspray, Lackschlamm und verkrustete Trägersysteme. Wir legen die Reinigung in das gebuchte Stillstandsfenster und stimmen jeden Schritt mit Instandhaltung und Werksleitung ab — damit die Linie zum vereinbarten Termin wieder anläuft.',
   metric:'Nachts', label:'oder im Schichtwechsel'},
  {tag:'Chemie', title:'Reaktoren & Rohrleitungssysteme',
   desc:'Befahranzeige, Inertisierung mit Stickstoff oder CO₂, Sicherungsposten und durchgehende Atemluftversorgung. Die Crew geht erst in den Behälter, wenn das Befahrkonzept steht und freigegeben ist.',
   metric:'Inertisiert', label:'mit Atemluftversorgung'},
  {tag:'Lebensmittel', title:'Lagertanks für Sirupe & Konzentrate',
   desc:'Tankinnenreinigung mit lebensmittelgeeigneten Medien, auf Wunsch inklusive Probenahme. Sie erhalten je Behälter ein Protokoll mit Fotos — die Unterlagen, die Ihr Auditor sehen will.',
   metric:'Protokoll', label:'je Behälter'},
  {tag:'Metall', title:'Pressen, Härteanlagen & Walzwerke',
   desc:'Eingebrannte Kühlschmierstoffe, Zunder und Ölkohle. Je nach Bauteil mit Hochdruck oder Trockeneis — Trockeneis dort, wo Dichtungen, Sensorik und Elektrik nicht nass werden dürfen.',
   metric:'Trockeneis', label:'wo Wasser nicht hin darf'},
  {tag:'Energie', title:'Wärmetauscher & Kondensatoren',
   desc:'Verblockte Rohrbündel und belegte Kühlflächen. Mechanisch oder chemisch-zirkulierend, je nach Belag und Werkstoff. Vor der Reinigung inspizieren wir mit der Kamera, damit das Angebot zum Zustand passt.',
   metric:'Inspektion', label:'vor dem Angebot'},
  {tag:'Logistik', title:'Hallenböden & Hochregallager',
   desc:'Großflächen, Verladezonen und Regalanlagen in der Höhe. Wir arbeiten in Nachtschichten, damit der Kommissionierbetrieb am Tag ungestört weiterläuft — inklusive Absturzsicherung und Bereichsabsperrung.',
   metric:'Nachtschicht', label:'bei laufendem Tagbetrieb'},
];

const Page = () => (
  <RootSubPage
    active="referenzen"
    breadcrumb={[{label:'Start', href:'index.html'}, {label:'Referenzen'}]}
    kicker="Einsatzbereiche"
    title="Wo wir arbeiten — und wie."
    sub="Sechs typische Aufgabenstellungen aus unserem Alltag — was dahintersteckt und wie wir sie angehen. Konkrete Referenzen nennen wir auf Anfrage und nur mit Zustimmung des jeweiligen Kunden; Werksinterna gehören nicht auf eine Website."
  >
    <section className="pc-section">
      <div className="pc-container">
        <div className="pc-cases">
          {faelle.map((c,i) => (
            <article className="pc-case" key={i}>
              <div className="pc-case-body">
                <span className="pc-case-sector">{c.tag}</span>
                <h3 className="pc-case-title">{c.title}</h3>
                <p className="pc-case-desc">{c.desc}</p>
                <div className="pc-case-metric">
                  <div className="pc-case-metric-num">{c.metric}</div>
                  <div className="pc-case-metric-label">{c.label}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  </RootSubPage>
);
ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);