/* global React, ReactDOM */
const Page = () => {
  const rollen = [
    {r:'Inhaber & Kalkulation', d:'Angebot, Preis und alles, was vertraglich schiefgehen könnte.'},
    {r:'Einsatzleitung Tank & Behälter', d:'Befahrkonzept, Inertisierung, Sicherungsposten.'},
    {r:'Einsatzleitung Industrie', d:'Hallen, Maschinen, Produktionslinien im laufenden Betrieb.'},
    {r:'Disposition & Notdienst', d:'Nimmt den Anruf an, wenn es brennt — rund um die Uhr.'},
    {r:'Operations & Maschinenpark', d:'Wartung der eigenen Fahrzeuge und Aggregate.'},
    {r:'Qualität & Dokumentation', d:'Protokolle, Nachweise, Unterlagen für Ihre Audits.'},
  ];
  return (
    <RootSubPage
      active="ueber-uns"
      breadcrumb={[{label:'Start', href:'index.html'}, {label:'Über uns'}]}
      kicker="Über PolClean"
      title="Inhabergeführt. Eigene Crew. Kurze Wege."
      sub="Industrieservice aus Düren — mit eigener Crew, eigenem Maschinenpark und der Überzeugung, dass Verlässlichkeit mehr zählt als ein Hochglanzprospekt."
    >
      <section className="pc-section">
        <div className="pc-container pc-about">
          <div>
            <span className="pc-sec-kicker">Wer wir sind</span>
            <h2 className="pc-h2" style={{margin:'12px 0 24px'}}>Industrie versteht Industrie.</h2>
            <p style={{fontSize:18, lineHeight:1.6, color:'var(--ink-2)'}}>
              Wir sind in einer Region groß geworden, in der Schornsteine zur Skyline gehören.
              Düren, Aachen, das Rheinische Revier — hier sitzen unsere Kunden, hier wohnt unsere
              Crew. Das ist kein Marketing-Argument, sondern logistische Realität: Wer in der
              Nachbarschaft zu Hause ist, steht schneller am Werkstor als ein Dienstleister,
              der erst anreisen muss.
            </p>
            <ul className="pc-about-points">
              <li><Check/><span><strong>Eigene Stammbelegschaft</strong> — wir arbeiten ohne Subunternehmer. Wer zu Ihnen kommt, steht auf unserer Lohnliste.</span></li>
              <li><Check/><span><strong>Eigene Auszubildende</strong> im Beruf „Fachkraft für Rohr-, Kanal- und Industrieservice".</span></li>
              <li><Check/><span><strong>Eigener Maschinenpark</strong> — Saug-Spül-Kombis, Hochdruckaggregate und Trockeneisanlagen, gewartet im eigenen Stützpunkt.</span></li>
              <li><Check/><span><strong>Ein Ansprechpartner</strong> vom ersten Anruf bis zum Abnahmeprotokoll — kein Ticketsystem.</span></li>
              <li><Check/><span><strong>Fester Stammsitz in Düren</strong> — im Einsatz in NRW und bundesweit.</span></li>
            </ul>
          </div>
          <div className="pc-about-visual">
            <div className="pc-panel">
              <div className="pc-panel-head">Einsatzgebiet</div>
              <dl className="pc-panel-list">
                <div><dt>Stammsitz</dt><dd>Scharnhorststr. 178, 52351 Düren</dd></div>
                <div><dt>Kerngebiet</dt><dd>Düren, Aachen, Köln, Rheinisches Revier</dd></div>
                <div><dt>Darüber hinaus</dt><dd>NRW und angrenzende Bundesländer</dd></div>
                <div><dt>Weitere Strecken</dt><dd>Nach Absprache — fragen Sie nach Ihrem Standort</dd></div>
              </dl>
            </div>
            <div className="pc-panel pc-panel-dark">
              <div className="pc-panel-head">Was Sie bei uns nicht finden</div>
              <ul className="pc-panel-neg">
                <li>Keine Subunternehmer auf Ihrer Baustelle</li>
                <li>Keine Warteschleife, kein Ticketsystem</li>
                <li>Keine Nachträge, die niemand angekündigt hat</li>
                <li>Keine Mietgeräte, wenn es eng wird</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="pc-section pc-section-soft">
        <div className="pc-container">
          <SectionHead kicker="Haltung" title="Woran wir festhalten."
            sub="Vier Dinge, an denen wir nicht rütteln — unabhängig von Auftragsgröße und Termindruck."/>
          <div className="pc-stats-grid" style={{color:'var(--ink)'}}>
            {[
              ['Düren', 'Stammsitz im Rheinland'],
              ['1', 'fester Ansprechpartner je Auftrag'],
              ['24/7', 'Notdienst mit echter Rufnummer'],
              ['0', 'Subunternehmer auf der Baustelle'],
            ].map((s,i)=>(
              <div className="pc-stat" key={i} style={{borderLeftColor:'var(--line)'}}>
                <div className="pc-stat-num" style={{color:'var(--primary)'}}>{s[0]}</div>
                <div className="pc-stat-label" style={{color:'var(--ink-3)'}}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="pc-section">
        <div className="pc-container">
          <SectionHead kicker="Rollen im Betrieb" title="Sie wissen, mit wem Sie sprechen."
            sub="Keine anonyme Hotline: Für jeden Bereich gibt es eine feste Person, die Ihren Auftrag kennt. Namen und Durchwahl bekommen Sie mit dem Angebot."/>
          <div className="pc-rollen">
            {rollen.map((p,i) => (
              <div className="pc-rolle" key={p.r}>
                <span className="pc-rolle-num">{String(i+1).padStart(2,'0')}</span>
                <div>
                  <h3 className="pc-rolle-name">{p.r}</h3>
                  <p className="pc-rolle-desc">{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </RootSubPage>
  );
};
ReactDOM.createRoot(document.getElementById('root')).render(<Page/>);