/* Process · Why Us */

const STEPS = [
  ['I', 'Erstgespräch', 'Wir hören zu. Was brauchen Sie? Vor-Ort-Termin oder Telefonat — unverbindlich, kostenfrei.'],
  ['II', 'Analyse', 'Objekt, Umfang und Anforderungen prüfen. Wir dokumentieren den Bestand und identifizieren Risiken früh.'],
  ['III', 'Angebot', 'Transparente Kalkulation, keine versteckten Kosten. Gewerk für Gewerk aufgeschlüsselt, prüfbar.'],
  ['IV', 'Umsetzung', 'Professionelle Ausführung durch unser Fachteam. Wöchentliches Update, saubere Baustelle, fester Zeitplan.'],
  ['V', 'Betreuung', 'Übergabe, Nachbetreuung und fester Ansprechpartner. Auch nach Abnahme erreichbar — Hand drauf.'],
];

function Process() {
  return (
    <section id="process" className="process-section" data-screen-label="Process">
      <div className="container">
        <SectionHead label="IV · Ablauf" deck="Keine Überraschungen. Keine versteckten Kosten. Ein Prozess, der bei jedem Projekt funktioniert — vom Bad-Umbau bis zur Komplettsanierung.">
          Fünf Schritte, <em>ein klarer Weg.</em>
        </SectionHead>
        <div className="process-timeline">
          {STEPS.map(([m, h, p], i) => (
            <div className="process-step" data-reveal key={m} style={{ '--reveal-delay': i * 120 + 'ms' }}>
              <div className="marker">{m}</div>
              <h4>{h}</h4>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const USPS = [
  ['I', 'Ein Ansprechpartner', 'Vom ersten Kontakt bis zur Schlüsselübergabe — dieselbe Person. Keine Hotline, keine Tickets.'],
  ['II', 'Klare Prozesse', 'Fünf Schritte, dokumentiert. Wöchentliche Updates, geplante Meilensteine, transparente Kosten.'],
  ['III', 'Eigene Infrastruktur', '250 m² Lager, eigener Büro-Standort, eigener Fuhrpark. Keine Wartezeiten auf Subs oder Maschinen.'],
  ['IV', 'Sauber & Hochwertig', 'Baustellen-Sauberkeit ist Pflicht, nicht Bonus. Wir übergeben besenrein — oder feinreinigen direkt mit.'],
];

function WhyUs() {
  return (
    <section id="why" className="why-section" data-screen-label="Why">
      <div className="container">
        <SectionHead label="V · Warum wir" deck="Bau-Projekte scheitern selten am Können. Sie scheitern an Kommunikation, Schnittstellen und unklaren Verantwortlichkeiten. Wir nicht.">
          Struktur statt <em>Chaos.</em>
        </SectionHead>
        <div className="why-grid">
          <div className="why-image" data-reveal>
            <ImagePlaceholder label="Atlas carrying the world · reliability & strength" src="assets/atlas-world.png" />
            <div className="quote">„Was wir versprechen, das halten wir. Punkt."</div>
          </div>
          <div className="usp-list">
            {USPS.map(([r, h, p], i) => (
              <div className="usp" data-reveal key={r} style={{ '--reveal-delay': i * 80 + 'ms' }}>
                <span className="roman-big">{r}</span>
                <div className="usp-text"><h4>{h}</h4><p>{p}</p></div>
                <span className="icon-arrow"><Arrow /></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, WhyUs });