import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";

const title = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?";
const description =
  "Du schaffst nicht zu wenig – du willst zu viel. Das 3×3-System hilft dir, jeden Tag drei bewusste Prioritäten zu setzen, statt zehn gleichzeitig im Kopf zu behalten.";

export const metadata: Metadata = {
  title,
  description,
  alternates: { canonical: "/3x3-system" },
  openGraph: {
    title,
    description,
    url: "/3x3-system",
    type: "article",
  },
  twitter: {
    title,
    description,
  },
};

// Same hand-copied "H2 with brand underline" treatment as
// /lebensuhr/page.tsx uses — see that file's own comment on why this
// isn't shared with RichText.tsx's converter (no CMS post backs this
// page either).
function H2({ children }: { children: React.ReactNode }) {
  return (
    <h2
      className="font-semibold text-h-small text-text-primary mt-4 first:mt-0"
      style={{ fontFamily: "var(--font-lora)" }}
    >
      {children}
      <span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
    </h2>
  );
}

function P({ children }: { children: React.ReactNode }) {
  return <p className="text-body text-text-body">{children}</p>;
}

// Same visual language as RichText.tsx's Quote component (Caveat script +
// brand divider) — for the article's two key one-line callouts.
function Quote({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative flex items-start gap-6 w-full my-2">
      <div className="w-px self-stretch bg-brand shrink-0" />
      <p className="text-text-primary text-[1.75rem] leading-[1.1] flex-1" style={{ fontFamily: "var(--font-caveat)" }}>
        {children}
      </p>
    </div>
  );
}

const categories: { dot: string; label: string; desc: string }[] = [
  { dot: "bg-red-500", label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
  { dot: "bg-amber-400", label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
  { dot: "bg-green-500", label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
];

export default function DreiXDreiSystemPage() {
  return (
    <>
      <main className="flex flex-col flex-1 bg-bg-base">
        <Reveal className="flex flex-col gap-4 items-start pt-10 pb-8 px-[var(--layout-padding-x)] w-full max-w-[48rem] mx-auto">
          <p className="flex items-center gap-2 text-body-sm text-text-muted">
            <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
            <span>›</span>
            <span className="text-text-primary">3x3-System</span>
          </p>
          <p
            className="font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
            style={{ fontFamily: "var(--font-playfair)" }}
          >
            Das 3×3-System: Warum du nicht zu wenig schaffst, sondern zu viel willst
          </p>
        </Reveal>

        <Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pb-14 flex flex-col gap-5">
          <H2>Das Gefühl, den ganzen Tag beschäftigt gewesen zu sein</H2>
          <P>
            Es gibt Tage, an denen man abends auf die Uhr schaut und sich fragt, wo die Zeit geblieben
            ist. Nicht, weil man nichts gemacht hätte – der Tag war voll, zwischen Arbeit, Familie,
            Nachrichten und allem, was spontan dazwischenkam. Und trotzdem bleibt dieses Gefühl zurück:
            beschäftigt gewesen, aber nicht wirklich vorangekommen.
          </P>
          <P>
            Meine erste Vermutung war die naheliegende: Es fehlt Zeit. Wäre die Woche ruhiger, hätten
            die Tage ein paar Stunden mehr, würde sich vieles von selbst lösen. Je länger ich darüber
            nachgedacht habe, desto klarer wurde mir: Zeit ist gar nicht das eigentliche Problem.
          </P>

          <H2>Warum die meisten von uns kein Zeitproblem haben</H2>
          <Quote>Die meisten von uns haben kein Zeitproblem. Sie haben ein Entscheidungsproblem.</Quote>
          <P>
            Vom Aufstehen bis zum Schlafengehen treffen wir Entscheidungen. Worauf reagiere ich zuerst?
            Was ist dringend, was ist wichtig? Jede einzelne kostet nur wenig Energie – die Summe kann
            trotzdem erstaunlich schwer werden. Besonders dann, wenn man versucht, allem gerecht zu
            werden: der Arbeit, der Familie, den eigenen Projekten, all den Dingen, die irgendwann mal
            wichtig waren und jetzt auf einer Liste stehen.
          </P>
          <P>
            Lange dachte ich, mein Problem sei die Länge meiner To-do-Liste. Heute glaube ich etwas
            anderes: Das Problem ist nicht die Anzahl der Aufgaben, sondern die Anzahl der Dinge, die
            gleichzeitig wichtig sein sollen. Genau hier setzt das 3×3-System an – nicht indem es
            Aufgaben reduziert, sondern indem es Entscheidungen erzwingt.
          </P>

          <H2>Die Erkenntnis hinter dem 3×3-System</H2>
          <P>
            Ich habe lange darüber nachgedacht, wie ich mehr schaffen könnte. Die interessantere Frage
            war aber, warum ich überhaupt glaubte, all diese Dinge gleichzeitig schaffen zu müssen.
          </P>
          <Quote>Du schaffst nicht zu wenig. Du willst zu viel.</Quote>
          <P>
            Unbequem, weil wir uns lieber einreden, dass die Umstände schuld sind. Aber ehrlich
            betrachtet: Ich möchte beruflich vorankommen, für meine Familie da sein, Zeit für eigene
            Projekte finden, meine Gesundheit nicht vernachlässigen, den Haushalt im Griff behalten –
            und das Ganze möglichst entspannt. Jeder Wunsch für sich ist nachvollziehbar. Zusammen
            ergeben sie eine Liste, die an den meisten Tagen nicht realistisch ist. Die Folge ist nicht
            mehr Produktivität, sondern mehr Frust.
          </P>

          <H2>Was ist das 3×3-System?</H2>
          <P>
            Kein großes System, keine komplizierte Methode – eher der Versuch, meinem Tag wieder eine
            klare Richtung zu geben. Statt morgens zehn Prioritäten gleichzeitig im Kopf zu haben, treffe
            ich drei bewusste Entscheidungen. Nicht die einzigen Dinge, die an diesem Tag passieren –
            aber die drei, die zählen sollen, wenn der Tag wieder voller wird als geplant. Damit daraus
            nicht einfach drei weitere beliebige Aufgaben werden, verteile ich sie auf drei Bereiche:
          </P>
          <ul className="flex flex-col gap-4">
            {categories.map((c) => (
              <li key={c.label} className="flex items-start gap-3">
                <span className={`size-2.5 rounded-full mt-2 shrink-0 ${c.dot}`} aria-hidden />
                <p className="text-body text-text-body">
                  <span className="font-semibold text-text-primary">{c.label}</span> – {c.desc}
                </p>
              </li>
            ))}
          </ul>
          <P>Mehr kommt nicht auf diese Liste.</P>
          <P>
            Diese drei Punkte sind keine vollständige Tagesplanung. Sie sollen nicht verhindern, dass das
            Leben dazwischenkommt – sie sorgen nur dafür, dass der Tag eine Richtung hat, bevor andere
            Menschen, Termine und spontane Anfragen sie bestimmen. Termine und Überraschungen
            verschwinden dadurch nicht. Der Unterschied ist nur: Ich weiß morgens schon, welche drei
            Dinge zählen, wenn alles andere durcheinandergerät.
          </P>

          <H2>Warum ich das 3×3-System heute anders sehe</H2>
          <P>
            Am Anfang war die Idee vor allem ein persönlicher Versuch, mit weniger mentalem Ballast durch
            den Tag zu gehen. Inzwischen ist daraus mehr geworden – nicht weil das System komplizierter
            wurde, sondern weil sich zeigt, dass viele Menschen dasselbe Problem haben: Sie versuchen
            nicht zu wenig zu schaffen. Sie versuchen zu viele Dinge gleichzeitig wichtig sein zu lassen.
          </P>
          <P>
            Das 3×3-System löst nicht jedes Problem des Alltags, und es sorgt nicht dafür, dass plötzlich
            alles nach Plan läuft. Aber es schafft etwas, das in vielen Produktivitätssystemen
            erstaunlich selten vorkommt: <span className="font-semibold text-text-primary">Klarheit.</span>{" "}
            Oft ist genau das der Unterschied zwischen einem Tag, der sich chaotisch anfühlt, und einem
            Tag, der trotz aller Unvorhersehbarkeit eine Richtung behält.
          </P>

          <H2>Wenn alles wichtig ist, entscheidet am Ende der Zufall</H2>
          <P>
            Viele Produktivitätssysteme versprechen mehr Output, bessere Planung oder mehr Effizienz. Das
            3×3-System verfolgt ein anderes Ziel: Es soll dir helfen, morgens zu wissen, was zählt – nicht
            weil der Rest unwichtig wäre, sondern weil ein Tag nur begrenzt Aufmerksamkeit verträgt.
          </P>
          <P>
            Wenn alles wichtig ist, entscheidet am Ende der Zufall darüber, worauf deine Energie geht.
            Wenn drei Dinge wichtig sind, entscheidest wieder du. Genau deshalb geht es beim 3×3-System
            nicht darum, mehr zu schaffen. Es geht darum, bewusster zu entscheiden.
          </P>

          <H2>Du möchtest das 3×3-System selbst ausprobieren?</H2>
          <P>
            Falls dir das Gefühl gerade bekannt vorkommt: Im{" "}
            <Link href="/7-tage-klarheits-check" className="text-brand hover:underline">
              7-Tage-Klarheits-Check
            </Link>{" "}
            begleite ich dich sieben Tage lang beim Einstieg ins 3×3-System – keine langen Lektionen,
            sondern kurze Impulse, die du direkt im Alltag ausprobieren kannst. Denn genau dort entscheidet
            sich, ob eine Idee funktioniert: nicht auf dem Papier, sondern mitten im echten Leben.
          </P>
        </Reveal>
      </main>
      <Footer />
    </>
  );
}