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 NoTemplates: React.FC = () => (
  <>
    <LeadParagraph>
      Vorlagen sind die Fast-Food-Lösung des Web-Designs: Schnell verfügbar,
      aber auf Dauer ungesund für Ihre Marke.
    </LeadParagraph>
    <LeadParagraph>
      In meiner Arbeit als Digital Architect begegne ich ständig Unternehmen,
      die in der Beliebigkeit von Standard-Templates versinken.
    </LeadParagraph>
    <LeadParagraph>
      Ich zeige Ihnen, warum <Marker>Zero-Template-Architektur</Marker> der
      einzige Weg zu echter digitaler Distinktion ist.
    </LeadParagraph>

    <H2>Die Falle der visuellen Gleichschaltung</H2>
    <Paragraph>
      Wenn Sie ein Template nutzen, nutzen Sie die gleiche Basis wie tausende
      andere Unternehmen weltweit.
    </Paragraph>
    <Paragraph>
      Das Ergebnis ist eine "digitale Uniform", die Ihre Einzigartigkeit im Keim
      erstickt.
    </Paragraph>
    <Paragraph>
      Kunden spüren unbewusst, wenn eine Seite "von der Stange" kommt.
    </Paragraph>
    <Paragraph>
      Es signalisiert fehlende Investitionsbereitschaft und mangelnde Vision.
    </Paragraph>
    <Paragraph>
      Ich nenne das <Marker>ästhetische Kapitulation</Marker>.
    </Paragraph>
    <Paragraph>
      Wahre Markenbildung braucht Raum zum Atmen und ein Fundament, das nur für
      Sie gegossen wurde.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          Need["Individuelle Marken-Botschaft"] --> Path["Design-Entscheidung"]
          Path --> Temp["Fertig-Template (Masse)"]
          Path --> Custom["Bespoke Component Design (Mintel)"]
          Temp --> Bland["Visuelle Beliebigkeit & Hoher Ballast"]
          Custom --> Distinct["Maximale Unterscheidbarkeit & Pure Performance"]
          Bland --> NoTrust["Vertrauensverlust"]
          Distinct --> Authority["Marken-Autorität"]
          style Custom fill:#4ade80,stroke:#333
          style Authority fill:#4ade80,stroke:#333`}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Bespoke vs. Template: Investieren Sie in ein digitales Unikat, das Ihre
        Marktposition untermauert statt sie zu verwässern.
      </p>
    </div>

    <H3>Boutique-Design: Jedes Pixel hat einen Zweck</H3>
    <Paragraph>
      Templates enthalten Code für hunderte Optionen, die Sie nie nutzen werden.
    </Paragraph>
    <Paragraph>
      Dieser Ballast verlangsamt Ihre Seite und verwässert Ihre Botschaft.
    </Paragraph>
    <Paragraph>
      In meinem Boutique-Ansatz entwickeln wir jede Komponente von Grund auf.
    </Paragraph>
    <Paragraph>
      Das Ergebnis ist eine <Marker>hochpräzise Maschine</Marker>, die exakt auf
      Ihre Ziele ausgerichtet ist.
    </Paragraph>
    <Paragraph>Schlank. Schnell. Unverwechselbar.</Paragraph>

    <H2>Warum technisches Maßwerk rentabler ist</H2>
    <Paragraph>
      Templates sind starr. Wenn Ihr Business wächst, wird das Template schnell
      zur Wachstumsbremse.
    </Paragraph>
    <Paragraph>
      Anpassungen am Standard-Code sind oft teurer als ein kompletter Neubau.
    </Paragraph>
    <Paragraph>
      Ich baue Systeme, die <Marker>evolutionär</Marker> sind.
    </Paragraph>

    <IconList>
      <IconListItem check>
        <strong>Unbegrenzte Design-Freiheit:</strong> Wir biegen den Code nach
        Ihrer Vision, nicht umgekehrt. Jede Interaktion folgt Ihrer Marken-DNA.
      </IconListItem>
      <IconListItem check>
        <strong>Zukunftssicheres Asset:</strong> Da wir keine
        Drittanbieter-Themen nutzen, gibt es keine Abhängigkeiten von deren
        Update-Zyklen.
      </IconListItem>
      <IconListItem check>
        <strong>Maximale Konversions-Rate:</strong> Wir optimieren Layouts exakt
        nach dem Nutzerverhalten Ihres Zielmarktes.{" "}
        <Marker>Keine Kompromisse.</Marker>
      </IconListItem>
    </IconList>

    <div className="my-12">
      <ComparisonRow
        description="Der Impact auf Ihre digitale Reputation"
        negativeLabel="Premium Template-Kauf"
        negativeText="Gefahr der Verwechslung, technischer Overhead, eingeschränkte Flexibilität"
        positiveLabel="Bespoke Digital Object"
        positiveText="Absolut einzigartig, 100 % performant, unendlich skalierbar"
      />
    </div>

    <H2>Wann ist 'Bespoke' der einzige Weg?</H2>
    <Paragraph>
      Ist Ihr Unternehmen Marktführer oder auf dem Weg dorthin? Dann darf Ihre
      Website nicht nach "Durchschnitt" aussehen.
    </Paragraph>
    <Paragraph>
      Ich arbeite für Entscheider, die{" "}
      <Marker>Qualität als Wettbewerbsvorteil</Marker> begreifen.
    </Paragraph>
    <Paragraph>
      Wenn Differenzierung über Ihren Erfolg entscheidet, bin ich Ihr Architekt.
    </Paragraph>

    <H2>Fazit: Ein Unikat für Ihren Erfolg</H2>
    <Paragraph>
      Hören Sie auf, sich in fremde Formen pressen zu lassen.
    </Paragraph>
    <Paragraph>
      Lassen wir gemeinsam ein digitales Denkmal setzen, das so unverwechselbar
      ist wie Ihr unternehmerischer Fingerabdruck.
    </Paragraph>
    <Paragraph>
      <Marker>Pures Handwerk. Maximale Distinktion.</Marker> Ihr Erfolg verdient
      dieses Niveau.
    </Paragraph>
  </>
);
