/* global React, ReactDOM */
const ServicePage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Leistungen im Überblick', list:['Rohrleitungen DN 50 bis DN 1500 — Hochdruckspülung mit Düsenwagen', 'Abwasser- und Regenwasserkanäle inkl. Schachtreinigung', 'Wärmetauscher und Kondensatoren — chemisch oder mechanisch', 'Verstopfungen lösen mit Drücken bis 2500 bar', 'Schiebe- und Fahrwagen-Kamerainspektion mit TV-Bericht']},
    {t:'Kamerainspektion & TV-Bericht', p:'Jede Reinigung kann mit einer Kamerafahrt dokumentiert werden. Sie erhalten einen TV-Bericht mit Stationierung, Schadensklassifikation nach DIN EN 13508-2 und Screenshots aller Auffälligkeiten — direkt verwertbar für Sanierungsplanung und Versicherung.'},
    {t:'Saug-Spül-Kombi', p:'Unsere Saug-Spül-Kombi-Fahrzeuge mit Wasserrückgewinnung machen lange Tagesleistungen ohne Wasser-Nachschub möglich — auch dort, wo kein Anschluss in der Nähe ist.'},
    {t:'Typische Einsatzdauer', p:'Eine 200 m lange Produktionsrohrleitung mit Kamerafahrt erledigen wir in einer Schicht. Ein verstopfter Wärmetauscher ist meist binnen 4–6 Stunden wieder durchgängig.'}
  ];
  const tags = ['2500 bar', 'Kamerainspektion', 'TV-Bericht', 'DN 50–1500', 'Saug-Spül-Kombi', 'ADR'];
  const related = [{slug:'industriereinigung', n:'01', t:'Industriereinigung', short:'Hallen, Maschinen, Produktionslinien — auch im laufenden Betrieb.'}, {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.'}];
  return (
    <SubPage
      active="leistungen"
      breadcrumb={[
        {label:'Start', href:'../index.html'},
        {label:'Leistungen', href:'index.html'},
        {label:'Rohr- & Kanalreinigung'},
      ]}
      kicker="04 — Leistung"
      title="Rohr- & Kanalreinigung"
      sub="Wir reinigen Produktionsrohre, Abwasserkanäle und Wärmetauscher mit Hochdruck bis 2500 bar — inkl. Kamerainspektion, TV-Bericht und Schadensbewertung."
    >
      <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/>);