/* About · Services */

function About() {
  return (
    <section id="about" data-screen-label="About">
      <div className="container">
        <SectionHead label="I · Über uns" deck="Seit über zehn Jahren realisiert Ottoman Projekts Bau- und Dienstleistungsprojekte im Großraum Düsseldorf und Mönchengladbach.">
          Gebaut auf <em>Erfahrung.</em>
        </SectionHead>

        <div className="about-grid">
          <div className="about-image" data-reveal>
            <ImagePlaceholder label="Roman colosseum under construction · transparent" src="assets/colosseum-v4.png" />
          </div>
          <div className="about-copy">
            <p className="lede" data-reveal>Mit eigenem Team, eigener Infrastruktur und klaren Prozessen. Keine Subunternehmer-Ketten. Ein Ansprechpartner — von der ersten Skizze bis zur Schlüsselübergabe.</p>
            <p data-reveal style={{ '--reveal-delay': '120ms' }}>Ottoman Projekts GmbH ist ein inhabergeführtes Bauunternehmen aus Mönchengladbach. Wir arbeiten für Hausverwaltungen, Bauträger, Immobilienunternehmen und Privatkunden mit Sanierungsbedarf. Unser Anspruch: saubere Baustellen, transparente Kommunikation, termintreue Übergabe.</p>
            <div className="counters">
              <Counter to={10} label="Jahre Erfahrung" delay={0} />
              <Counter to={50} label="Projekte umgesetzt" delay={120} />
              <Counter to={16} label="Feste Teammitglieder" delay={240} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  ['I', 'Abriss & Entkernung', 'Kontrollierter Rückbau und Entkernung — schnell, sicher und sauber. Statik, Schadstoff, Entsorgung aus einer Hand.', 'Rückbau mit System', 'Fallen Roman column · controlled demolition', 'assets/abriss-entkernung-cut.webp'],
  ['II', 'Sanierung & Renovierung', 'Substanz erhalten, Wert schaffen. Komplettsanierung von Alt- und Bestandsbauten — vom Dachstuhl bis zum Bodenbelag.', 'Werte bewahren', 'Restored Pantheon · renewal', 'assets/sanierung-pantheon-cut.webp'],
  ['III', 'Trockenbau', 'Wie ein Bildhauer formen wir Räume mit Präzision und handwerklicher Kompetenz. Wände, Decken, Akustik, Brandschutz.', 'Räume formen', "Sculptor's chisel · precision & form", 'assets/trockenbau-chisel-cut.webp'],
  ['IV', 'Malerarbeiten', 'Der letzte Schliff, der alles zusammenbringt. Innenanstrich, Fassade, Lasur, Tapezierarbeiten — sauber kantengezogen.', 'Oberfläche & Finish', 'Polished classical bust · the last layer', 'assets/malerarbeiten-bust-cut.webp'],
  ['V', 'Bodenarbeiten', 'Von der Untergrundvorbereitung bis zur fertigen Oberfläche. Estrich, Parkett, Vinyl, Fliesen — passend zum Objekt.', 'Grund & Boden', 'Marble column base · the foundation', 'assets/bodenarbeiten-base-cut.webp'],
  ['VI', 'Gebäude- & Baureinigung', 'Gebäudereinigung, Baustellenreinigung und Sonderreinigung. Übergabe-fertig, dokumentiert, zuverlässig im Turnus.', 'Glanz & Sauberkeit', 'Polished marble head · perfection of finish', 'assets/reinigung-head-cut.webp'],
];

function Services() {
  return (
    <section id="services" className="services-section" data-screen-label="Services">
      <div className="container">
        <SectionHead label="II · Leistungen" deck="Sechs Disziplinen, ein Team. Wir koordinieren, ausführen und übergeben — ohne Schnittstellen-Verlust.">
          Von der Idee bis zum <em>letzten Detail.</em>
        </SectionHead>

        <div className="services-grid">
          {SERVICES.map(([num, title, desc, tag, img, src], i) => (
            <article className="service" data-reveal key={num} style={{ '--reveal-delay': (i % 3) * 120 + 'ms' }}>
              <span className="num">{num}</span>
              <div className="service-image"><ImagePlaceholder label={img} src={src} /></div>
              <h3>{title}</h3>
              <p>{desc}</p>
              <span className="tag">{tag}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Services });