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 VendorLockIn: React.FC = () => (
  <>
    <LeadParagraph>
      "Wir können nicht wechseln, das wäre zu teuer."
    </LeadParagraph>
    <LeadParagraph>
      In meiner Arbeit als Digital Architect ist das der Anfang vom Ende jeder
      technologischen Innovation.
    </LeadParagraph>
    <LeadParagraph>
      Vendor Lock-In ist die <Marker>digitale Version einer Geiselnahme</Marker>
      .
    </LeadParagraph>
    <LeadParagraph>
      Ich zeige Ihnen, wie wir Systeme bauen, die Ihnen jederzeit die volle
      Freiheit lassen – technologisch und wirtschaftlich.
    </LeadParagraph>

    <H2>Die unsichtbaren Ketten proprietärer Systeme</H2>
    <Paragraph>
      Viele Unternehmen lassen sich von der Bequemlichkeit großer
      SaaS-Plattformen oder Baukästen blenden.
    </Paragraph>
    <Paragraph>
      Man bekommt ein schnelles Feature, gibt aber dafür die Kontrolle über
      seine Daten und seine Codebasis ab.
    </Paragraph>
    <Paragraph>
      Nach zwei Jahren sind Sie so tief im Ökosystem eines Anbieters verstrickt,
      dass ein Auszug unmöglich scheint.
    </Paragraph>
    <Paragraph>
      Der Anbieter weiß das – und diktiert fortan die Preise und das Tempo Ihrer
      Entwicklung.
    </Paragraph>
    <Paragraph>
      Ich nenne das <Marker>technologische Erpressbarkeit</Marker>.
    </Paragraph>
    <Paragraph>
      Wahre Unabhängigkeit beginnt bei der strategischen Wahl der Architektur.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          Prop["Proprietäre Blackbox"] --> Lock["Steigende Kosten & Starre Features"]
          Open["Open-Source-Kern & Offene Standards"] --> Flex["Volle Kontrolle & Anbieter-Freiheit"]
          Lock --> Crisis["Digitale Sackgasse"]
          Flex --> Evolution["Permanente Innovation"]
          style Open fill:#4ade80,stroke:#333
          style Crisis fill:#fca5a5,stroke:#333`}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die Gabelung der digitalen Strategie: Wählen Sie Freiheit durch
        Architektur, statt Komfort durch Abhängigkeit.
      </p>
    </div>

    <H3>Technologische Souveränität als Asset</H3>
    <Paragraph>Software sollte für Sie arbeiten, nicht umgekehrt.</Paragraph>
    <Paragraph>
      Indem wir auf offene Standards und portable Architekturen setzen,
      verwandeln wir Code in ein echtes Firmen-Asset.
    </Paragraph>
    <Paragraph>
      Sie können den Cloud-Anbieter wechseln, die Agentur tauschen oder das Team
      skalieren – <Marker>ohne jemals bei Null anfangen zu müssen</Marker>.
    </Paragraph>
    <Paragraph>Das ist das Privileg der technologischen Elite.</Paragraph>
    <Paragraph>
      Portabilität ist kein technisches Gimmick, sondern eine unternehmerische
      Notwendigkeit.
    </Paragraph>

    <H2>Meine Architektur der Ungebundenheit</H2>
    <Paragraph>Ich baue keine "Käfige" aus fertigen Plugins.</Paragraph>
    <Paragraph>Mein Framework basiert auf Modularität und Klarheit.</Paragraph>

    <IconList>
      <IconListItem check>
        <strong>Standard-basiertes Engineering:</strong> Wir nutzen
        Technologien, die weltweit verstanden werden. Keine geheimen
        "Spezial-Module" eines einzelnen Anbieters.
      </IconListItem>
      <IconListItem check>
        <strong>Daten-Portabilität:</strong> Ihre Daten gehören Ihnen. Zu jeder
        Zeit. Wir bauen Schnittstellen, die den Export so einfach machen wie den
        Import.
      </IconListItem>
      <IconListItem check>
        <strong>Cloud-agnostisches Hosting:</strong> Wir nutzen
        Container-Technologie. Ob AWS, Azure oder lokale Anbieter –{" "}
        <Marker>Ihr Code läuft überall gleich perfekt.</Marker>
      </IconListItem>
    </IconList>

    <div className="my-12">
      <ComparisonRow
        description="Der ökonomische Vergleich Ihrer Unabhängigkeit"
        negativeLabel="Closed Ecosystem (Walled Garden)"
        negativeText="Diktierte Preise, starre Roadmap des Anbieters, Datenverlust bei Wechsel"
        positiveLabel="Bespoke Open-Core System"
        positiveText="Totale Preis-Kontrolle, unbegrenzte Features, volle Exit-Option ab Tag 1"
      />
    </div>

    <H2>Der strategische Hebel für langfristige Rendite</H2>
    <Paragraph>Systeme ohne Lock-In altern besser.</Paragraph>
    <Paragraph>
      Sie lassen sich schrittweise modernisieren, statt alle fünf Jahre komplett
      neu gebaut werden zu müssen.
    </Paragraph>
    <Paragraph>
      Das spart Millionen an Opportunitätskosten und Fehl-Investitionen.
    </Paragraph>
    <Paragraph>Seien Sie der Herr über Ihr digitales Schicksal.</Paragraph>
    <Paragraph>
      Investieren Sie in <Marker>intelligente Unabhängigkeit</Marker>.
    </Paragraph>

    <H2>Für wen ich 'Freiheits-Systeme' erstelle</H2>
    <Paragraph>
      Ich arbeite für Gründer, die ihr Unternehmen langfristig wertvoll
      aufstellen wollen.
    </Paragraph>
    <Paragraph>
      Ist digitale Exzellenz Teil Ihrer Exit-Strategie oder Ihres Erbes? Dann
      brauchen Sie meine Architektur.
    </Paragraph>
    <Paragraph>
      Ich baue keine Provisorien, sondern <Marker>nachhaltige Werte</Marker>.
    </Paragraph>

    <H2>Fazit: Freiheit ist eine Wahl</H2>
    <Paragraph>
      Technologie sollte Ihnen Flügel verleihen, keine Fesseln anlegen.
    </Paragraph>
    <Paragraph>
      Lassen Sie uns gemeinsam ein System schaffen, das so flexibel ist wie Ihr
      Business.
    </Paragraph>
    <Paragraph>
      <Marker>
        Werden Sie unersetzbar durch Qualität, nicht durch Abhängigkeit.
      </Marker>{" "}
      Ihr Erfolg verdient absolute Freiheit.
    </Paragraph>
  </>
);
