/* global React, ReactDOM */
const ServicePage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Was wir reinigen', list:['Lagertanks für Lebensmittel, Chemie, Mineralöl', 'Reaktoren und Druckbehälter (auch GMP-Bereiche)', 'Silos für Schüttgut, Granulate, Pulver', 'Wärmetauscher und Verdampferanlagen', 'Tankcontainer und mobile IBCs']},
    {t:'Sicherheits- und Befahrkonzept', p:'Vor jedem Einsatz erstellen wir eine Befahranzeige nach DGUV Regel 113-004. Inertisierung mit Stickstoff oder CO₂ ist optional verfügbar; Atemluftversorgung über Druckluftflaschen oder Frischluftgeräte. Die Crew arbeitet immer mit Sicherungs-Posten.'},
    {t:'Dokumentation für Audit & Versicherung', p:'Sie erhalten Foto- und Videodokumentation, Probenahme-Berichte und das Befahrprotokoll als PDF — in der Form, die Ihre Qualitätssicherung für ihre Audits braucht.', list:['Vor- und Nachher-Bilder jeder Tank-Innenfläche', 'Probenahme inkl. Laboranalyse (optional)', 'CIP-Validierungsbericht (optional)', 'Materialnachweis aller eingesetzten Reinigungsmittel']},
    {t:'Typische Einsatzdauer', p:'Das hängt von Größe, Medium und Anfahrtweg ab. Nach der Begehung nennen wir Ihnen ein verbindliches Zeitfenster — viele Behältergruppen lassen sich an einem verlängerten Wochenende abarbeiten.'}
  ];
  const tags = ['DN 800–6000', 'PSA Klasse III', 'Inertisierung', 'Befahranzeige', 'Atemluft', 'Probenahme'];
  const related = [{slug:'industriereinigung', n:'01', t:'Industriereinigung', short:'Hallen, Maschinen, Produktionslinien — auch im laufenden Betrieb.'}, {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:'Tank- & Behälterreinigung'},
      ]}
      kicker="02 — Leistung"
      title="Tank- & Behälterreinigung"
      sub="Wir reinigen Lagertanks, Reaktoren, Silos und Druckbehälter von DN 800 bis 6000 — mit Inertisierung, durchgehender Atemluftversorgung der Crew und Audit-konformer Dokumentation."
    >
      <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/>);