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

export const PageSpeedFails: React.FC = () => (
  <>
    <LeadParagraph>
      Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das
      technische Fundament einer digitalen Ruine gleicht.
    </LeadParagraph>
    <LeadParagraph>
      Wenn Ihre Website bei Google PageSpeed scheitert, verlieren Sie Kunden –{" "}
      <Marker>bevor diese Ihre Botschaft überhaupt wahrnehmen können</Marker>.
    </LeadParagraph>
    <LeadParagraph>
      In meiner Arbeit als Digital Architect ist die Geschwindigkeit der
      architektonische Gradmesser für Professionalität.
    </LeadParagraph>

    <H2>Der unsichtbare Umsatz-Verschleiß</H2>
    <Paragraph>
      Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage,
      aber die Eingangstür klemmt massiv.
    </Paragraph>
    <Paragraph>
      Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert
      täglich auf tausenden Websites.
    </Paragraph>
    <Paragraph>
      Millisekunden sind im digitalen Zeitalter die härteste Währung.
    </Paragraph>
    <Paragraph>
      Eine Verzögerung von nur einer Sekunde kann die{" "}
      <Marker>Conversion-Rate um bis zu 20 % senken</Marker>. Das ist kein
      technisches Detail, sondern ein unternehmerisches Risiko.
    </Paragraph>
    <Paragraph>
      Ich betrachte Performance nicht als IT-Kennzahl, sondern als ökonomischen
      Hebel.
    </Paragraph>
    <Paragraph>
      Google bewertet Websites heute primär nach den "Core Web Vitals". Das sind
      präzise Messgrößen für die Frustrationstoleranz Ihrer Nutzer.
    </Paragraph>
    <Paragraph>
      Wer hier rote Zahlen schreibt, wird vom Algorithmus unsichtbar gemacht –
      eine digitale Strafe für technische Nachlässigkeit.
    </Paragraph>

    <div className="my-12">
      <ComparisonRow
        description="Der Impact von Geschwindigkeit auf Ihre Bilanz"
        negativeLabel="Langsames Legacy-System"
        negativeText="Hohe Absprungraten, sinkendes Markenvertrauen, teure Akquise ohne Ertrag"
        positiveLabel="Mintel High-Performance"
        positiveText="Maximale Conversion, SEO-Vorsprung ab Tag 1, begeisterte Nutzer"
      />
    </div>

    <H2>Warum klassische Lösungen scheitern</H2>
    <Paragraph>
      Die Ursache liegt oft in der Verwendung von "All-in-One"-Lösungen wie
      WordPress oder überladenen Baukästen.
    </Paragraph>
    <Paragraph>
      Diese Systeme versuchen, alles für jeden zu sein. Das Ergebnis ist ein
      gigantischer "Ballast an Code".
    </Paragraph>
    <Paragraph>
      Jedes Byte muss durch das Nadelöhr der Internetverbindung gepresst werden,
      bevor das erste Bild erscheint.
    </Paragraph>
    <Paragraph>
      In einer mobilen Welt mit oft instabilen Verbindungen ist das ein{" "}
      <Marker>architektonisches Todesurteil</Marker>. Wer hier spart, zahlt
      später doppelt durch verlorene Kunden.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          A["Anfrage des Browsers"] --> B["Server muss 'nachdenken' (PHP/DB)"]
          B --> C["Hunderte Datenbank-Abfragen"]
          C --> D["HTML wird mühsam live konstruiert"]
          D --> E["Veraltetes Asset-Management lädt alles"]
          E --> F["Render-Blocking Code (Browser stoppt)"]
          F --> G["Seite endlich sichtbar (nach 3-5 Sek)"]
          style B fill:#fca5a5,stroke:#333
          style F fill:#fca5a5,stroke:#333
          style G fill:#fca5a5,stroke:#333`}
        id="legacy-loading-bottleneck"
        title="Legacy System Ladezeit-Flaschenhals"
        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
        wertvolle Kundenzeit.
      </p>
    </div>

    <H2>Meine Architektur der Geschwindigkeit</H2>
    <Paragraph>
      Ich verfolge einen radikal anderen Ansatz. Statt die Seite erst mühsam
      zusammenzubauen, wenn der Kunde sie anfragt, liefere ich fertig optimierte
      "digitale Objekte" aus.
    </Paragraph>
    <Paragraph>
      Mein "Static-First" Framework sorgt dafür, dass die Antwortzeit Ihres
      Servers nahezu bei Null liegt.
    </Paragraph>
    <Paragraph>
      Völlig egal, ob gerade 10 oder 10.000 Menschen gleichzeitig auf Ihre Seite
      zugreifen.
    </Paragraph>
    <Paragraph>
      Das ist <Marker>Skalierbarkeit durch Design</Marker>, nicht durch bloße
      Server-Power.
    </Paragraph>

    <H3>Die drei Säulen meiner Umsetzung</H3>
    <IconList>
      <IconListItem check>
        <strong>Zero-Computation am Edge:</strong> Durch Static Site Generation
        (SSG) liegen alle Inhalte fertig auf globalen CDNs. Keine Wartezeit.
      </IconListItem>
      <IconListItem check>
        <strong>Präzises Asset-Engineering:</strong> Ich nutze Tree-Shaking. Ihr
        Kunde lädt exakt nur den Code, den er wirklich benötigt.
      </IconListItem>
      <IconListItem check>
        <strong>Next-Gen Media-Handling:</strong> Bilder werden automatisch in
        Formaten wie AVIF ausgeliefert. Qualität bleibt, Dateigröße schmilzt.
      </IconListItem>
    </IconList>

    <DiagramPie
      data={[
        { label: "JavaScript Execution", value: 35 },
        { label: "Render Blocking CSS", value: 25 },
        { label: "Server Response Time", value: 20 },
        { label: "Image Loading", value: 15 },
        { label: "Third-Party Scripts", value: 5 },
      ]}
      title="Typische Performance-Bottlenecks Verteilung"
      caption="Wo die Zeit wirklich verloren geht: Eine Analyse der häufigsten Ladezeit-Killer."
      id="performance-bottlenecks-pie"
      showShare={true}
    />

    <H2>Der wirtschaftliche Case</H2>
    <Paragraph>
      Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine
      riskante Milchmädchenrechnung.
    </Paragraph>
    <Paragraph>
      Wenn Sie monatlich 5.000 € in Marketing investieren, aber 30 % Ihrer Leads
      durch Ladezeiten verlieren, verbrennen Sie jedes Jahr 18.000 €.
    </Paragraph>
    <Paragraph>
      Mein System ist kein Kostenfaktor, sondern ein{" "}
      <Marker>ROI-Beschleuniger</Marker>.
    </Paragraph>
    <Paragraph>
      Wir senken die Kosten pro Lead, indem wir die Reibungsverluste minimieren.
      Ein technisch überlegenes System ist immer die rentablere Wahl.
    </Paragraph>

    <H2>Wann meine Architektur für Sie Sinn macht</H2>
    <Paragraph>
      Ich bin Partner für Unternehmen, die über die "digitale Visitenkarte"
      hinausgewachsen sind.
    </Paragraph>
    <Paragraph>
      Ist Ihre Website ein geschäftskritisches Werkzeug für die Lead-Gen? Dann
      ist mein Ansatz alternativlos.
    </Paragraph>
    <Paragraph>
      Ich steige dort ein, wo technologische{" "}
      <Marker>Exzellenz zum entscheidenden Wettbewerbsvorteil</Marker> wird.
    </Paragraph>

    <H2>Fazit: Respekt vor der Zeit Ihrer Nutzer</H2>
    <Paragraph>
      Geschwindigkeit ist letztlich Ausdruck von Wertschätzung. Sie
      signalisieren Ihrem Kunden: "Ich respektiere deine Zeit."
    </Paragraph>
    <Paragraph>
      Lassen Sie uns Ihre Website in eine hochpräzise Wachstums-Maschine
      verwandeln.
    </Paragraph>
    <Paragraph>
      <Marker>Qualität zahlt sich aus</Marker> – in Millisekunden und in Euro.
    </Paragraph>
  </>
);