import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { StepArrow } from "../components/StepArrow";

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>
  );
}

// Same brand-orange line-icon language as /lebensuhr's IconSunrise etc. —
// switched from per-category red/amber/green (matching the original blog
// post's 🔴🟡🟢) to a single brand color, for consistency with every
// other icon-row on the site, none of which color-code their icons.
function IconTarget() {
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="16" stroke="#f6a701" strokeWidth="2" />
      <circle cx="20" cy="20" r="9" stroke="#f6a701" strokeWidth="2" />
      <circle cx="20" cy="20" r="2" fill="#f6a701" />
    </svg>
  );
}

function IconTrendingUp() {
  return (
    <svg width="44" height="40" viewBox="0 0 44 40" fill="none">
      <path d="M4 30l10-10 6 6 14-14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M24 10h10v10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconShield() {
  return (
    <svg width="36" height="40" viewBox="0 0 36 40" fill="none">
      <path d="M18 3l14 5v9c0 9-6 16-14 20-8-4-14-11-14-20v-9l14-5z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
    </svg>
  );
}

const categories = [
  { icon: <IconTarget />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
  { icon: <IconTrendingUp />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
  { icon: <IconShield />, 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, sondern weil trotz vollem Tag dieses Gefühl
            bleibt: beschäftigt, aber nicht wirklich vorangekommen. Meine erste Vermutung: Es fehlt Zeit.
            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 wichtig? Jede kostet nur wenig Energie, die Summe wird trotzdem schwer.
            Besonders wenn man versucht, allem gerecht zu werden:
          </P>
          <div className="flex flex-wrap gap-2">
            {["Arbeit", "Familie", "eigene Projekte", "Gesundheit", "Haushalt", "Freundschaften", "Erholung"].map((tag) => (
              <span key={tag} className="text-body-sm text-text-muted bg-bg-muted rounded-full px-3 py-1">{tag}</span>
            ))}
          </div>
          <P>
            Lange dachte ich, mein Problem sei die Länge meiner To-do-Liste. Heute glaube ich: Es ist 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 überlegt, wie ich mehr schaffen könnte. Die interessantere Frage: warum ich
            überhaupt glaubte, alles gleichzeitig schaffen zu müssen.
          </P>
          <Quote>Du schaffst nicht zu wenig. Du willst zu viel.</Quote>
          <P>
            Unbequem, weil wir lieber die Umstände verantwortlich machen. Aber ehrlich betrachtet:
            beruflich vorankommen, für die Familie da sein, Gesundheit, Haushalt, eigene Projekte – und
            das alles entspannt. Jeder Wunsch für sich nachvollziehbar, zusammen aber selten realistisch.
            Die Folge: nicht mehr Produktivität, sondern mehr Frust.
          </P>

          <H2>Was ist das 3×3-System?</H2>
          <P>
            Kein großes System – eher der Versuch, dem Tag eine klare Richtung zu geben. Statt zehn
            Prioritäten gleichzeitig treffe ich drei bewusste Entscheidungen, verteilt auf drei Bereiche:
          </P>
        </Reveal>

        {/* Full-width band, same structural role AND same icon-above-text/
            StepArrow row treatment as /7-tage-klarheits-check's "So
            funktioniert" section and /lebensuhr's phase row — a plain
            3-card grid here read out of place next to those. */}
        <section className="bg-bg-muted w-full py-10 lg:py-14">
          <div className="px-8 lg:px-[5rem] max-w-[1280px] mx-auto flex flex-col items-center gap-10">
            <RevealGroup className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
              {categories.flatMap((c, i) => [
                <RevealItem key={c.label} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
                  <div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
                    {c.icon}
                  </div>
                  <div className="flex flex-col gap-1 text-center">
                    <p className="font-semibold text-text-primary text-[1rem]">{c.label}</p>
                    <p className="text-[0.875rem] text-text-muted leading-[1.5]">{c.desc}</p>
                  </div>
                </RevealItem>,
                i < categories.length - 1 ? (
                  <div key={`arrow-${i}`} className="flex items-center justify-center shrink-0 lg:mt-5">
                    <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
                  </div>
                ) : null,
              ])}
            </RevealGroup>
          </div>
        </section>

        <Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pt-10 pb-14 flex flex-col gap-5">
          <P>Mehr kommt nicht auf diese Liste.</P>

          {/* Same rounded-xl framed-image treatment /7-tage-klarheits-check's
              "Das erwartet dich" section uses. Shows one concrete
              application of the three categories (across Arbeit/Familie/
              Persönlich) — an example, not a required 4th dimension of
              the system, hence the caption spelling that out rather than
              leaving the image to imply a grid the text above never
              mentioned. */}
          <div className="relative w-full rounded-xl overflow-hidden bg-bg-muted" style={{ aspectRatio: "1500/1000" }}>
            <Image
              alt="Beispielraster: Verantwortung, Fortschritt und Stabilität je einmal über Arbeit, Familie und Persönliches verteilt"
              src="/3x3-system-matrix.png"
              fill
              sizes="(min-width: 768px) 48rem, 100vw"
              className="object-contain"
            />
          </div>
          <p className="text-body-sm text-text-muted text-center -mt-2">
            Ein Beispiel: An diesem Tag steckt die Verantwortung im Job, der Fortschritt in der Familie
            und die Stabilität im Privaten. An einem anderen Tag sieht die Verteilung anders aus.
          </p>

          <P>
            Keine vollständige Tagesplanung – nur eine Richtung, bevor andere Termine und Anfragen sie
            bestimmen. Der Unterschied: 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 es ein persönlicher Versuch, mit weniger Ballast durch den Tag zu gehen.
            Inzwischen zeigt sich: Viele haben dasselbe Problem – nicht zu wenig schaffen, sondern zu
            viele Dinge gleichzeitig wichtig sein lassen. Das 3×3-System löst nicht jedes Problem, aber es
            schafft etwas, das selten ist: <span className="font-semibold text-text-primary">Klarheit.</span>
          </P>

          <H2>Wenn alles wichtig ist, entscheidet am Ende der Zufall</H2>
          <P>Viele Systeme versprechen mehr Output. Das 3×3-System will nur eins: dass du morgens weißt, was zählt.</P>
          <Quote>Wenn alles wichtig ist, entscheidet der Zufall. Wenn drei Dinge wichtig sind, entscheidest wieder du.</Quote>

          <H2>Du möchtest das 3×3-System selbst ausprobieren?</H2>
          <P>Falls dir das Gefühl bekannt vorkommt: Eine Idee zeigt sich nicht auf dem Papier, sondern mitten im echten Leben.</P>

          {/* Same bordered CTA-card treatment /lebensuhr/page.tsx uses. */}
          <Link
            href="/7-tage-klarheits-check"
            className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 mt-2 hover:border-brand transition-colors"
          >
            <div className="flex flex-col gap-1">
              <p className="font-bold text-[0.8125rem] text-brand">Nächster Schritt:</p>
              <p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
                7-Tage-Klarheits-Check
              </p>
              <p className="text-body-sm text-text-muted">Sieben Tage, kurze Impulse, direkt im Alltag.</p>
            </div>
            <svg
              viewBox="0 0 20 20"
              className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1"
              fill="none"
              aria-hidden="true"
            >
              <path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Link>
        </Reveal>
      </main>
      <Footer />
    </>
  );
}