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 ResponsiveDesign: React.FC = () => (
  <>
    <LeadParagraph>
      "Responsive" bedeutet heute viel mehr als nur das Nebeneinander-Rücken von
      Boxen.
    </LeadParagraph>
    <LeadParagraph>
      In meiner Welt als Digital Architect ist jedes Endgerät eine eigene Bühne
      mit eigenen Regeln.
    </LeadParagraph>
    <LeadParagraph>
      Ich zeige Ihnen, warum <Marker>Responsive-Exzellenz</Marker> der Hebel für
      Ihre globale Conversion-Rate ist.
    </LeadParagraph>

    <H2>Jenseits der Standard-Breakpoints</H2>
    <Paragraph>
      Die meisten Agenturen nutzen simple Raster, die auf dem Desktop gut
      aussehen und auf dem Smartphone "irgendwie funktionieren".
    </Paragraph>
    <Paragraph>
      Das Ergebnis ist oft frustrierend: Zu kleine Texte, unbedienbare Buttons
      und Bilder, die das Layout sprengen.
    </Paragraph>
    <Paragraph>
      Ich betrachte Responsive Design als{" "}
      <Marker>architektonische Präzisionsleistung</Marker>.
    </Paragraph>
    <Paragraph>
      Wir gestalten die Experience für den Nutzer im Zug ebenso perfekt wie für
      den Entscheider am 4K-Monitor.
    </Paragraph>
    <Paragraph>
      Fokus und Hierarchie müssen auf jedem Screen neu definiert werden.
    </Paragraph>

    <div className="my-12">
      <Mermaid
        graph={`graph TD
          Logic["Zentrales Design-System"] --> Mobile["Mobile (Daumen-Optimiert)"]
          Logic --> Tablet["Tablet (Touch & Swipe)"]
          Logic --> Desktop["Desktop (Maus & Tastatur)"]
          Mobile --> UX["Perfekte UX auf jedem Gerät"]
          Tablet --> UX
          Desktop --> UX
          style UX fill:#4ade80,stroke:#333
          style Logic fill:#4ade80,stroke:#333`}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Plattformübergreifende Brillanz: Ein System, das sich nicht nur anpasst,
        sondern für jedes Endgerät optimiert wird.
      </p>
    </div>

    <H3>Kontextsensitive Ergonomie</H3>
    <Paragraph>
      Ein mobiler Nutzer hat andere Bedürfnisse als ein Desktop-Nutzer.
    </Paragraph>
    <Paragraph>
      In meiner Architektur passen wir nicht nur das Layout an, sondern oft auch
      die Interaktionslogik.
    </Paragraph>
    <Paragraph>
      Das ist <Marker>digitale Ergonomie auf Boutique-Niveau</Marker>.
    </Paragraph>
    <Paragraph>
      Informationen müssen dort fließen, wo sie gebraucht werden – ohne
      Reibungsverluste durch das Endgerät.
    </Paragraph>

    <H2>Meine Hebel für ein grenzenloses Web</H2>
    <Paragraph>Wie erreichen wir diese technische Perfektion?</Paragraph>
    <Paragraph>Durch den Einsatz modernster Engineering-Methoden:</Paragraph>

    <IconList>
      <IconListItem check>
        <strong>Fluid Typography & Spacing:</strong> Wir nutzen keine starren
        Pixel-Werte. Alles atmet und skaliert harmonisch mit der Viewport-Größe.
      </IconListItem>
      <IconListItem check>
        <strong>Adaptive Media:</strong> Bilder und Videos werden exakt in der
        Größe ausgeladen, die das Display erfordert.{" "}
        <Marker>Kein Byte wird verschwendet.</Marker>
      </IconListItem>
      <IconListItem check>
        <strong>Intelligente Touch-Targets:</strong> Wir optimieren alle
        interaktiven Elemente für die menschliche Anatomie – auf jedem Gerät.
      </IconListItem>
    </IconList>

    <div className="my-12">
      <ComparisonRow
        description="Der Impact auf Ihre globale Marktdurchdringung"
        negativeLabel="Standard Grid-Responsive"
        negativeText="Verlust an Übersichtlichkeit auf kleinen Screens, langsame Ladezeiten, 'Bastel'-Look"
        positiveLabel="Bespoke Multi-Screen Engine"
        positiveText="Perfekte Ergonomie überall, blitzschneller Content, konsistentes Markenbild"
      />
    </div>

    <H2>Wirtschaftlicher Hebel: Mobiler Erfolg</H2>
    <Paragraph>
      Über 60 % des Web-Traffics findet heute auf mobilen Endgeräten statt.
    </Paragraph>
    <Paragraph>
      Wer hier patzt, verliert die Mehrheit seiner potenziellen Kunden.
    </Paragraph>
    <Paragraph>
      Ich schaffe Ihnen ein System, das <Marker>Zukunftssicherheit</Marker>{" "}
      garantiert – egal welche Geräte morgen auf den Markt kommen.
    </Paragraph>
    <Paragraph>
      Ihre Website wird zu einem universellen Werkzeug Ihres Erfolgs.
    </Paragraph>

    <H2>Für wen ich 'grenzenlose' Welten baue</H2>
    <Paragraph>
      Mein Fokus liegt auf Marken mit einem internationalen, mobilen Publikum.
    </Paragraph>
    <Paragraph>
      Verlangen Ihre Kunden Perfektion in jedem Moment? Dann bin ich Ihr
      Architekt.
    </Paragraph>
    <Paragraph>
      Ich schaffe <Marker>Barrierefreiheit durch Qualität</Marker>.
    </Paragraph>

    <H2>Fazit: Konsistenz ist die halbe Miete</H2>
    <Paragraph>Ihre Marke muss sich überall gleich wertig anfühlen.</Paragraph>
    <Paragraph>
      Lassen wir gemeinsam ein digitales Ökosystem erschaffen, das auf jedem
      Screen glänzt.
    </Paragraph>
    <Paragraph>
      <Marker>Präzision im Detail, Harmonie im Ganzen.</Marker> Ihr Erfolg
      verdient diese nahtlose Integration.
    </Paragraph>
  </>
);
