/* global React, ReactDOM */
const IndustryPage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Anlagen, die wir reinigen', list:['Reaktoren und Rührkessel', 'Rohrleitungen und Verteiler', 'Wärmetauscher und Verdampfer', 'Lagertanks und IBCs', 'GMP-Reinräume Klasse C/D']},
    {t:'Sicherheit zuerst', p:'Vor jedem Einsatz erstellen wir eine schriftliche Befahranzeige nach DGUV 113-004, prüfen ATEX-Zonierung und führen Gas-Messung durch. Inertisierung mit Stickstoff oder CO₂ ist Standard, nicht Option.'},
    {t:'GMP-Konforme Doku', p:'Sie erhalten Reinigungsprotokolle inkl. Materialnachweis, Probenahme und Vorher/Nachher-Bildern — direkt verwertbar für interne Validierung und Behörden-Inspektion.'}
  ];
  const tags = ['ATEX', 'GMP-konform', 'Inertisierung', 'Befahranzeige', 'Atemluft Klasse III'];
  const others = [{slug:'automotive', t:'Automotive & Zulieferer', short:'Wir reinigen Lackieranlagen, Pressen, Roboterzellen und Hallenböden für Automoti…'}, {slug:'lebensmittel', t:'Lebensmittel & Getränke', short:'Reinigung von Produktionsanlagen, Lagertanks und Förderlinien — mit lebensmittel…'}, {slug:'metall', t:'Metallverarbeitung', short:'Pressen, Härteanlagen, Walzwerke und Galvanik — wir reinigen schwere Industriean…'}];
  return (
    <SubPage
      active="branchen"
      breadcrumb={[
        {label:'Start', href:'../index.html'},
        {label:'Branchen', href:'index.html'},
        {label:'Chemie & Pharma'},
      ]}
      kicker="Branche — Chemie & Pharma"
      title="Chemie & Pharma"
      sub="Reaktoren, Rohrleitungen, GMP-Bereiche — wir reinigen Anlagen für Chemie und Pharma mit Inertisierung, qualifizierter PSA und der Dokumentation, die Ihre QM und Behörden brauchen."
    >
      <section className="pc-section">
        <div className="pc-container pc-detail-grid">
          <div className="pc-detail-prose">
            {sections.map((s,i) => (
              <div key={i}>
                <h3>{s.t}</h3>
                {s.p && <p>{s.p}</p>}
                {s.list && <ul>{s.list.map((l,j)=><li key={j}>{l}</li>)}</ul>}
              </div>
            ))}
            <h3>Passende Leistungen</h3>
            <p>Diese Leistungen kombinieren wir typischerweise für Chemie & Pharma-Kunden:</p>
            <div className="pc-aside-tags" style={{margin:'16px 0 0'}}>
              <a href="../leistungen/industriereinigung.html" className="pc-btn pc-btn-ghost">Industriereinigung <Arrow/></a>
              <a href="../leistungen/tankreinigung.html" className="pc-btn pc-btn-ghost" style={{marginLeft:8}}>Tankreinigung <Arrow/></a>
              <a href="../leistungen/havarie.html" className="pc-btn pc-btn-ghost" style={{marginLeft:8}}>Havarie 24/7 <Arrow/></a>
            </div>
          </div>
          <aside className="pc-detail-aside">
            <div className="pc-aside-card">
              <h4>Was uns unterscheidet</h4>
              <div className="pc-aside-tags">
                {tags.map(t=><span key={t}>{t}</span>)}
              </div>
            </div>
            <div className="pc-aside-card" style={{background:'var(--steel-900)', color:'#fff', borderColor:'var(--steel-900)'}}>
              <h4 style={{color:'rgba(255,255,255,0.55)'}}>Direkter Draht</h4>
              <a href={C.phoneLink} style={{fontFamily:'var(--serif)', fontSize:22, fontWeight:600, color:'#fff', display:'block', marginBottom:8}}>{C.phone}</a>
              <p style={{margin:0, fontSize:13, color:'rgba(255,255,255,0.6)'}}>Mo–Fr 7–18 Uhr · Notdienst 24/7</p>
            </div>
            <a className="pc-btn pc-btn-primary pc-btn-lg pc-btn-full" href="../kontakt.html">Angebot anfordern <Arrow/></a>
          </aside>
        </div>
      </section>

      <section className="pc-section pc-section-soft">
        <div className="pc-container">
          <SectionHead kicker="Weitere Branchen" title="Wofür wir noch reinigen."/>
          <div className="pc-industries">
            {others.map(o => (
              <a className="pc-industry" href={`${o.slug}.html`} key={o.slug}>
                <div className="pc-industry-body">
                  <span className="pc-industry-icon" aria-hidden="true"><PcIcon name={o.slug} size={30}/></span>
                  <h3 className="pc-industry-title">{o.t}</h3>
                  <p className="pc-industry-desc">{o.short}</p>
                  <span className="pc-industry-link">Branche ansehen <Arrow/></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </SubPage>
  );
};
ReactDOM.createRoot(document.getElementById('root')).render(<IndustryPage/>);