/* global React, ReactDOM */
const ServicePage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Was wir reinigen', p:'Vom Hallenboden bis zur Roboterzelle — wir übernehmen die wiederkehrende und die einmalige Reinigung industrieller Anlagen. Typische Einsätze umfassen:', list:['Maschinen- und Anlagenreinigung (Pressen, Roboterzellen, Förderanlagen)', 'Hallenbodenreinigung inkl. Beschichtungs-Vorbereitung', 'Lackier- und KTL-Anlagen (Vor-, Zwischen- und Endreinigung)', 'Lüftungs-, Absaug- und Filtertechnik', 'Stahl-, Beton- und Edelstahloberflächen']},
    {t:'Reinigung im laufenden Betrieb', p:'In Abstimmung mit Werksleitung und Sicherheitsfachkraft arbeiten wir nachts, am Wochenende oder schichtbegleitend. Eingesetzt werden leise, kompakte Aggregate und ein bewusst kleines Team — keine Großbaustellen-Optik in Ihrer Produktion.'},
    {t:'Was wir mitbringen', list:['Eigene Crews — keine Subunternehmer', 'Hochdruck, Trockeneis, Sauger und Spül-Equipment im eigenen Park', 'Foto-/Video-Doku jeder Schicht für Werksleitung und Audit', 'Tägliches Reporting an einen festen Ansprechpartner', 'Betriebshaftpflicht und Umweltschadenversicherung — Nachweise liegen jedem Angebot bei']},
    {t:'Typische Einsatzdauer', p:'Das hängt stark von Anlage und Verschmutzungsgrad ab. Genau deshalb kommen wir vorher vorbei: Nach der Begehung steht im Angebot ein verbindlicher Zeitkorridor und ein definiertes Abnahme-Kriterium — keine Schätzung ins Blaue.'}
  ];
  const tags = ['Hochdruck', 'Industriesauger', 'Trockeneisstrahlen', 'PSA', 'Eigene Crew'];
  const related = [{slug:'tankreinigung', n:'02', t:'Tank- & Behälterreinigung', short:'Lagertanks, Reaktoren, Silos und Druckbehälter von DN 800 bis 6000.'}, {slug:'trockeneisstrahlen', n:'03', t:'Trockeneisstrahlen', short:'Schonende Reinigung empfindlicher Oberflächen — ohne Sekundärabfälle.'}, {slug:'rohrreinigung', n:'04', t:'Rohr- & Kanalreinigung', short:'Verstopfte Produktionsrohre, Abwasserkanäle, Wärmetauscher.'}];
  return (
    <SubPage
      active="leistungen"
      breadcrumb={[
        {label:'Start', href:'../index.html'},
        {label:'Leistungen', href:'index.html'},
        {label:'Industriereinigung'},
      ]}
      kicker="01 — Leistung"
      title="Industriereinigung"
      sub="Wir reinigen Produktionshallen, Maschinen und ganze Anlagen — bei laufendem Betrieb, in Stillstandsfenstern oder als regelmäßiger Wartungs-Slot. Mit eigenem Maschinenpark, geschulter Crew und schriftlicher Abnahme."
    >
      <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>
            ))}
          </div>
          <aside className="pc-detail-aside">
            <div className="pc-aside-card">
              <h4>Eckdaten</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)'}}>24/7 Notdienst</h4>
              <a href={C.emergencyLink} style={{fontFamily:'var(--serif)', fontSize:22, fontWeight:600, color:'#fff', display:'block', marginBottom:8}}>{C.emergency}</a>
              <p style={{margin:0, fontSize:13, color:'rgba(255,255,255,0.6)'}}>Rund um die Uhr erreichbar.</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 Leistungen" title="Auch das machen wir."/>
          <div className="pc-services-grid">
            {related.map(r => (
              <article className="pc-service" key={r.slug}>
                <div className="pc-service-head">
                  <span className="pc-service-num">{r.n}</span>
                  <h3 className="pc-service-title">{r.t}</h3>
                </div>
                <p className="pc-service-desc">{r.short}</p>
                <a className="pc-service-link" href={`${r.slug}.html`}>Mehr erfahren <Arrow/></a>
              </article>
            ))}
          </div>
        </div>
      </section>
    </SubPage>
  );
};
ReactDOM.createRoot(document.getElementById('root')).render(<ServicePage/>);