/* global React, ReactDOM */
const ServicePage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Was passiert nach Ihrem Anruf', list:['Es geht ein Techniker ans Telefon, kein Callcenter', 'Wir sagen Ihnen sofort, womit Sie rechnen können — und alarmieren das Einsatzteam', 'Erstsicherung vor Ort, Foto-Doku läuft ab der ersten Minute', 'Schriftlicher Erstbericht für Ihre Versicherung']},
    {t:'Brandschaden', p:'Rußentfernung, Geruchssanierung, Sicherung intakter Anlagen. Wir arbeiten mit anerkannten Trocknungsfirmen und Gutachtern zusammen — Sie haben einen Ansprechpartner für die gesamte Sanierungsphase.'},
    {t:'Wasser- & Chemiehavarie', p:'Aufnahme von Schadstoffen mit geeigneten Saugfahrzeugen, Bindung mit Universalbinder oder spezifischen Bindern, anschließende Reinigung. Bei Chemiehavarie inkl. Abstimmung mit Feuerwehr, Umweltbehörde und Berufsgenossenschaft.'},
    {t:'Beweissicherung', p:'Von Minute eins fotografieren wir den Schadenszustand. Sie erhalten ein vollständiges PDF-Dossier — Voraussetzung für viele Schadenregulierungen und für interne Ursachenanalyse.'}
  ];
  const tags = ['24/7 Notdienst', 'Erstsicherung', 'Versicherungs-Doku', 'Beweissicherung'];
  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:'Sonderreinigung & Havarie'},
      ]}
      kicker="05 — Leistung"
      title="Sonderreinigung & Havarie"
      sub="Brand-, Wasser- und Chemiehavarie — wir sichern, reinigen und dokumentieren. Rund um die Uhr erreichbar, mit Versicherungs-tauglicher Beweissicherung von Minute eins."
    >
      <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/>);