/* global React, ReactDOM */
const INDUSTRIES = [
  {slug:'automotive', t:'Automotive & Zulieferer', short:'Lackieranlagen, Pressen, Roboterzellen — mit den Toleranzen, die OEM-Audits voraussetzen.'},
  {slug:'chemie', t:'Chemie & Pharma', short:'Reaktoren, Rohrleitungen, GMP-Bereiche. Mit Inertisierung und qualifizierter PSA.'},
  {slug:'lebensmittel', t:'Lebensmittel & Getränke', short:'Reinigung von Anlagen, Lagertanks und Förderlinien — inkl. Mikrobiologie auf Wunsch.'},
  {slug:'metall', t:'Metallverarbeitung', short:'Pressen, Härteanlagen, Walzwerke und Galvanik — schwere Anlagen, harte Verschmutzung.'},
  {slug:'energie', t:'Energie & Versorger', short:'Wärmetauscher, Turbinen, Kühltürme, Trinkwasserbehälter nach TVO.'},
  {slug:'logistik', t:'Logistik & Lager', short:'Hallenböden, Hochregallager, Verladezonen — sicher, sauber und audit-tauglich.'},
];

const Page = () => (
  <SubPage
    active="branchen"
    breadcrumb={[{label:'Start', href:'../index.html'}, {label:'Branchen'}]}
    kicker="Branchen"
    title="Wir kennen Ihre Anlage."
    sub="Sechs Industrien, sechs spezialisierte Crews. Jede Branche hat eigene Sicherheits-, Audit- und Hygiene-Anforderungen — wir liefern in dem Format, das Ihre QM erwartet."
  >
    <section className="pc-section">
      <div className="pc-container">
        <div className="pc-industries">
          {INDUSTRIES.map(i => (
            <a className="pc-industry" href={`${i.slug}.html`} key={i.slug}>
              <div className="pc-industry-body">
                <span className="pc-industry-icon" aria-hidden="true"><PcIcon name={i.slug} size={30}/></span>
                <h3 className="pc-industry-title">{i.t}</h3>
                <p className="pc-industry-desc">{i.short}</p>
                <span className="pc-industry-link">Branche ansehen <Arrow/></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  </SubPage>
);
ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);