/* global React, ReactDOM */
const ServicePage = () => {
  const C = window.PC.COMPANY;
  const sections = [
    {t:'Was ein Wartungsvertrag bei uns enthält', list:['Definierte Reinigungs-Slots (wöchentlich, monatlich, quartalsweise)', 'Festes Team — Sie kennen die Namen, das Team kennt Ihre Anlage', 'Festpreis pro Slot oder transparenter Stunden-/Materialsatz', 'Monats- und Jahresreport mit Foto-Doku', 'Inkl. 24/7-Notdienst-Vorrang für Vertragskunden']},
    {t:'Warum sich das rechnet', p:'Planbare Einsätze sind günstiger als Einzelaufträge, weil Anfahrt, Vorbereitung und Material vorhersehbar werden — wie viel genau, rechnen wir Ihnen vorab aus. Vor allem aber sinkt das Risiko ungeplanter Stillstände, weil unsere Crew Ihre Anlage kennt.'},
    {t:'Audit-Vorbereitung inklusive', p:'Steht ein Audit an, liefern wir die Dokumentation Ihrer Reinigungsprozesse als prüfbares PDF — inklusive Probenahme-Berichten und Materialnachweis. Auf Wunsch ist jemand von uns beim Audit vor Ort dabei.'},
    {t:'Vertragslaufzeiten', p:'Typisch 12 oder 24 Monate, mit Kündigungsfrist 3 Monate. Erste Probemonate sind möglich — sprechen Sie uns an.'}
  ];
  const tags = ['SLA', 'Feste Crew', 'Festpreis', 'Monatsreport', 'Audit-Vorbereitung'];
  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:'Wartungsverträge'},
      ]}
      kicker="06 — Leistung"
      title="Wartungsverträge"
      sub="Geplante Reinigungszyklen, fest zugewiesene Crew, transparente Abrechnung. Sie wissen jederzeit, wer wann mit welcher Maschine kommt — und was es kostet."
    >
      <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/>);