import React from "react";
import { H2, H3 } from "../../../ArticleHeading";
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
import { IconList, IconListItem } from "../../../IconList";
import { Mermaid } from "../../../Mermaid";
import { Marker } from "../../../Marker";
import { ComparisonRow } from "../../../Landing/ComparisonRow";

export const CleanCode: React.FC = () => (
  <>
    <LeadParagraph>
      Code ist nicht nur eine Anweisung für Maschinen. Es ist das Fundament
      Ihres digitalen Unternehmenswertes.
    </LeadParagraph>
    <LeadParagraph>
      In meiner Arbeit als Digital Architect sehe ich oft "historisch
      gewachsenen" Code, der eher einem verfilzten Knäuel gleicht als einer
      Architektur.
    </LeadParagraph>
    <LeadParagraph>
      Ich zeige Ihnen, warum <Marker>Clean Code kein Luxus</Marker> ist, sondern
      die harte Währung für Ihre Zukunftsfähigkeit.
    </LeadParagraph>

    <H2>Die versteckten Kosten von 'Quick-and-Dirty'</H2>
    <Paragraph>
      Softwareentwicklung unter Zeitdruck führt oft zu unsauberen Abkürzungen.
    </Paragraph>
    <Paragraph>
      Kurzfristig spart das Stunden, langfristig erstickt es jede Innovation.
    </Paragraph>
    <Paragraph>
      Unsauberer Code wird mit jedem Monat schwerer zu warten und zu erweitern.
    </Paragraph>
    <Paragraph>
      Ich nenne das <Marker>technologische Verstopfung</Marker>.
    </Paragraph>
    <Paragraph>
      Ihre Entwickler verbringen dann 80 % ihrer Zeit mit Bugfixing, statt neue
      Features zu bauen.
    </Paragraph>
    <Paragraph>
      Clean Code hingegen ist eine Investition in die Geschwindigkeit von
      morgen.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          Clean["Clean Code Architektur"] --> Easy["Einfache Wartbarkeit"]
          Clean --> Scalable["Schnelle Erweiterbarkeit"]
          Easy --> LowCost["Geringe langfristige Kosten"]
          Scalable --> Market["Schnellerer Markteintritt (Time-to-Market)"]
          LowCost --> Profit["Höherer ROI für Ihr Business"]
          Market --> Profit
          style Profit fill:#4ade80,stroke:#333
          style Clean fill:#4ade80,stroke:#333`}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die Logik der Qualität: Sauberer Code zahlt sich durch sinkende
        Betriebskosten und steigendes Innovationstempo aus.
      </p>
    </div>

    <H3>Code als Kommunikationsmittel</H3>
    <Paragraph>Code wird viel öfter gelesen als geschrieben.</Paragraph>
    <Paragraph>
      Deshalb ist Klarheit mein oberstes Gebot. Ein gut strukturiertes System
      "erklärt" sich selbst.
    </Paragraph>
    <Paragraph>
      Das macht Sie unabhängig von einzelnen Personen. Jedes neue Teammitglied
      findet sich sofort zurecht.
    </Paragraph>
    <Paragraph>
      Das ist <Marker>Souveränität durch Transparenz</Marker>.
    </Paragraph>
    <Paragraph>
      Ich schreibe Code für Menschen, nicht nur für den Compiler.
    </Paragraph>

    <H2>Meine Prinzipien für eine glasklare Architektur</H2>
    <Paragraph>
      Wie unterscheidet sich meine Arbeit von Standard-Agentur-Code?
    </Paragraph>
    <Paragraph>
      Durch die kompromisslose Anwendung von Engineering-Prinzipien:
    </Paragraph>

    <IconList>
      <IconListItem check>
        <strong>Single Responsibility:</strong> Jede Komponente tut genau eine
        Sache – und die perfekt. Das macht Fehlerbehebungen zum Kinderspiel.
      </IconListItem>
      <IconListItem check>
        <strong>Automatisierte Selbstkontrolle:</strong> Bevor eine Änderung
        live geht, wird sie von hunderten automatischen Tests geprüft.{" "}
        <Marker>Qualität ist bei mir systemimmanent.</Marker>
      </IconListItem>
      <IconListItem check>
        <strong>Dokumentation im Design:</strong> Ich baue Systeme, deren
        Struktur so logisch ist, dass Handbücher überflüssig werden.
      </IconListItem>
    </IconList>

    <div className="my-12">
      <ComparisonRow
        description="Der wirtschaftliche Vergleich der Codequalität"
        negativeLabel="Agentur-Standard (Spaghetti)"
        negativeText="Chaos-Abhängigkeit, expontentiell steigende Wartungskosten, Angst vor jedem Update"
        positiveLabel="Mintel Boutique Standard"
        positiveText="Lineares Wachstum, sinkende technische Schulden, volle Kontrolle ab Tag 1"
      />
    </div>

    <H2>Wahrer Profit durch technische Brillanz</H2>
    <Paragraph>Clean Code senkt Ihre Betriebskosten massiv.</Paragraph>
    <Paragraph>
      Es ist die Basis für Skalierbarkeit. Nur ein sauberes Fundament trägt ein
      Hochhaus.
    </Paragraph>
    <Paragraph>
      Wenn Sie planen, Ihr digitales Business über Jahre zu führen, ist{" "}
      <Marker>Codequalität Ihre wichtigste Versicherung</Marker>.
    </Paragraph>
    <Paragraph>
      Software sollte ein Vermögenswert sein, keine Verbindlichkeit.
    </Paragraph>
    <Paragraph>Gießen wir ein Fundament, das Stand hält.</Paragraph>

    <H2>Für wen ich 'Pures Gold' schreibe</H2>
    <Paragraph>
      Ich bin der Architekt für Entscheider, die den Wert ihrer digitalen Assets
      langfristig maximieren wollen.
    </Paragraph>
    <Paragraph>
      Haben Sie genug von Systemen, die bei jeder Änderung zusammenbrechen? Dann
      passen wir zusammen.
    </Paragraph>
    <Paragraph>
      Ich schaffe <Marker>Ruhe im Maschinenraum</Marker>.
    </Paragraph>

    <H2>Fazit: Qualität gewinnt immer</H2>
    <Paragraph>Es gibt keine Abkürzung zu exzellenter Software.</Paragraph>
    <Paragraph>
      Lassen wir gemeinsam den Ballast von unsauberem Code hinter uns.
    </Paragraph>
    <Paragraph>
      Ich baue Ihnen eine Architektur, die nicht nur heute funktioniert, sondern
      auch in vielen Jahren noch durch ihre{" "}
      <Marker>Eleganz und Klarheit</Marker> besticht.
    </Paragraph>
    <Paragraph>
      <Marker>Purer Code. Purere Ergebnisse.</Marker> Ihr Erfolg verdient dieses
      Niveau.
    </Paragraph>
  </>
);
