/* global React, ReactDOM */
const IndustryPage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Schwere Anlagen, harte Verschmutzungen', list:['Hydraulikpressen mit jahrzehntealter KSS-Belegung', 'Härteöfen, Glühanlagen und Abschreckbecken', 'Walzwerke, Bandanlagen, Beizanlagen', 'Galvanik-Becken und Spülstraßen', 'Späne- und Emulsions-Entsorgung']},
    {t:'KSS und Emulsionen', p:'Kühlschmierstoffe entsorgen wir gemäß AVV und ADR. Auf Wunsch übernehmen wir die komplette KSS-Pflege als Wartungsvertrag — inkl. Wechsel-Intervalle, Probenahme und Entsorgung.'},
    {t:'Trockeneisstrahlen für Werkzeuge', p:'Spritzgussformen und Schmiedegesenke reinigen wir oft direkt in der Maschine mit Trockeneis — ohne Demontage, ohne Hitze, ohne Maßveränderung.'}
  ];
  const tags = ['Hochdruck 2500 bar', 'Trockeneis', 'KSS-Entsorgung', 'ADR'];
  const others = [{slug:'automotive', t:'Automotive & Zulieferer', short:'Wir reinigen Lackieranlagen, Pressen, Roboterzellen und Hallenböden für Automoti…'}, {slug:'chemie', t:'Chemie & Pharma', short:'Reaktoren, Rohrleitungen, GMP-Bereiche — wir reinigen Anlagen für Chemie und Pha…'}, {slug:'lebensmittel', t:'Lebensmittel & Getränke', short:'Reinigung von Produktionsanlagen, Lagertanks und Förderlinien — mit lebensmittel…'}];
  return (
    <SubPage
      active="branchen"
      breadcrumb={[
        {label:'Start', href:'../index.html'},
        {label:'Branchen', href:'index.html'},
        {label:'Metallverarbeitung'},
      ]}
      kicker="Branche — Metallverarbeitung"
      title="Metallverarbeitung"
      sub="Pressen, Härteanlagen, Walzwerke und Galvanik — wir reinigen schwere Industrieanlagen unter Bedingungen, an denen sich andere die Zähne ausbeißen."
    >
      <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 Metallverarbeitung-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/>);