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

const title = "Die Lebensuhr: Wie spät ist es in deinem Leben?";
const description =
  "Wie spät ist es eigentlich in deinem Leben? Die Lebensuhr zeigt dir, wo du gerade stehst – und was in dieser Phase wirklich zählt.";

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

// Same "H2 with brand underline" treatment RichText.tsx's heading
// converter uses for CMS-driven content — this page is hand-written (no
// Payload post backs it, it lives at the plain /lebensuhr slug, not
// /blog/…), so the styling is copied by hand instead of shared.
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 H3({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="font-semibold text-body text-text-primary mt-2" style={{ fontFamily: "var(--font-lora)" }}>
      {children}
    </h3>
  );
}

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) — copied rather than imported since that component is
// tied to the CMS quoteLabel prop this static page has no use for.
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 lebensuhrRows: [string, string][] = [
  ["10", "02:40 Uhr"],
  ["20", "05:20 Uhr"],
  ["30", "08:00 Uhr"],
  ["40", "10:40 Uhr"],
  ["50", "13:20 Uhr"],
  ["60", "16:00 Uhr"],
  ["70", "18:40 Uhr"],
  ["80", "21:20 Uhr"],
];

export default function LebensuhrPage() {
  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">Lebensuhr</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)" }}
          >
            Die Lebensuhr: Wie spät ist es eigentlich in deinem Leben?
          </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">
          <P>Wie spät ist es eigentlich in deinem Leben?</P>
          <P>Keine philosophische Frage. Eine überraschend praktische.</P>
          <P>
            Wir planen unsere Tage bis auf die Stunde. Wir blocken Meetings, setzen Erinnerungen und
            schreiben To-do-Listen. Aber kaum jemand weiß, wie er seine aktuelle Lebensphase eigentlich
            nutzen möchte.
          </P>

          <H2>Die Lebensuhr: Dein Leben in 24 Stunden</H2>
          <P>
            Stell dir vor, dein ganzes Leben wäre auf einen einzigen Tag mit 24 Stunden komprimiert.
            Wirst du 90 Jahre alt, sieht das ungefähr so aus:
          </P>
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-border">
                  <th className="py-2 pr-4 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Alter</th>
                  <th className="py-2 font-semibold text-body-sm text-text-muted uppercase tracking-wide">Uhrzeit</th>
                </tr>
              </thead>
              <tbody>
                {lebensuhrRows.map(([alter, uhrzeit]) => (
                  <tr key={alter} className="border-b border-border/60">
                    <td className="py-2 pr-4 text-body text-text-body">{alter}</td>
                    <td className="py-2 text-body text-text-body">{uhrzeit}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <P>Und? Wie spät ist es gerade bei dir?</P>

          <H2>Warum die Lebensuhr mehr zeigt als dein Alter</H2>
          <P>
            Viele Menschen haben nicht das Gefühl, zu wenig Zeit zu haben. Sie haben das Gefühl, nicht
            dort zu sein, wo sie sein wollten. Das sind zwei völlig unterschiedliche Dinge. Man kann
            morgens schon erschöpft sein oder abends voller Energie – die Uhr erklärt nicht, wie du dich
            fühlst, sie zeigt nur, wie viel Tag noch vor dir liegt.
          </P>
          <P>Die spannendere Frage lautet deshalb: Lebst du gerade so, wie es zu deiner Tageszeit passt?</P>
          <P>
            Und gleich vorweg: Die Lebensuhr ist kein Fahrplan. Sie sagt dir nicht, was du zu tun hast,
            nur weil du an einem bestimmten Punkt stehst. Manche fangen mit 45 nochmal komplett neu an,
            manche bauen mit 60 ihr erstes eigenes Ding auf. Die Uhr zeigt eine Tendenz, keine Vorschrift.
          </P>
          <P>
            Sie bewertet auch nicht. Sie sagt nicht, ob du "weiter" bist als andere. Sie sagt nur, welche
            Art von Aufgabe in deiner aktuellen Lebensphase besonders gut zu dir passen könnte. Genau wie
            ein Vormittag nicht besser ist als ein Abend – sondern einfach anders.
          </P>

          <H2>Was zu welcher Lebensphase passt</H2>
          <P>
            Ein Morgen sieht anders aus als ein Nachmittag. Nicht besser, nicht schlechter, einfach
            anders. Und diese Aufgaben halten sich nicht immer strikt an die Uhr: Manchmal probiert man
            am Nachmittag noch einmal etwas komplett Neues aus, manchmal beginnt man morgens schon,
            etwas weiterzugeben. Die folgenden Zuordnungen sind ein Muster, kein Gesetz – nimm dir davon,
            was zu deiner Situation passt, und lass den Rest liegen.
          </P>

          <H3>Der Morgen: Ausprobieren</H3>
          <P>
            Am Morgen probiert man aus, man lernt, man macht Fehler, man entdeckt Interessen. Man muss
            noch nicht alles perfekt können.
          </P>

          <H3>Der Vormittag: Aufbauen</H3>
          <P>
            Jetzt wird gebaut – Gewohnheiten, Beziehungen, Fähigkeiten. Vielleicht eine Familie,
            vielleicht ein Unternehmen, vielleicht einfach ein Leben, das sich nach dem eigenen anfühlt.
          </P>

          <H3>Der Nachmittag: Stärken</H3>
          <P>
            Jetzt beginnt das Spannende. Nicht alles neu, sondern das Bestehende wird stärker: Erfahrung
            zahlt sich aus, Netzwerke tragen, Entscheidungen fallen leichter.
          </P>
          <Quote>
            Wer hier immer wieder bei null anfängt, verschenkt oft das Wertvollste, was er besitzt – den
            Zinseszins des eigenen Lebens.
          </Quote>

          <H3>Der Abend: Weitergeben</H3>
          <P>
            Es geht weniger um Wachstum, mehr um Bedeutung, mehr um Menschen, mehr darum, weiterzugeben,
            was man aufgebaut hat. Nicht, weil nichts Neues mehr möglich wäre, sondern weil manche Dinge
            erst mit der Zeit ihren eigentlichen Wert bekommen.
          </P>

          <H2>Produktivität beginnt mit der richtigen Lebensphase</H2>
          <P>
            Eines der größten Missverständnisse liegt vielleicht genau hier: Wir behandeln jede
            Lebensphase gleich – immer schneller, immer mehr, immer weiter. Dabei erwarten wir von einem
            Abend dieselbe Dynamik wie von einem frühen Morgen. Das funktioniert weder an einem einzigen
            Tag noch in einem ganzen Leben.
          </P>
          <P>
            Produktivität bedeutet für mich deshalb etwas anderes: das Richtige zur richtigen Zeit zu
            tun. Nicht ständig neu anzufangen, wenn es Zeit wäre, etwas wachsen zu lassen. Nicht
            krampfhaft festzuhalten, wenn es Zeit wäre, loszulassen. Und nicht darauf zu warten, dass
            irgendwann "der richtige Moment" kommt – denn die Wahrheit ist: Du lebst bereits in ihm.
          </P>

          <H2>Drei Fragen für deine persönliche Lebensuhr</H2>
          <P>
            Schau heute Abend noch einmal auf deine Uhr. Nicht auf die am Handgelenk, sondern auf deine
            Lebensuhr. Frag dich nur drei Dinge:
          </P>
          <ul className="flex flex-col gap-2 text-body text-text-body list-disc pl-5">
            <li>Wie spät ist es gerade in meinem Leben?</li>
            <li>Was passt eigentlich zu dieser Tageszeit?</li>
            <li>Und welche Aufgabe schleppe ich noch mit mir herum, obwohl sie zu einer früheren Stunde gehört?</li>
          </ul>
          <P>
            Vielleicht zeigt dir die Lebensuhr heute nicht, dass du dich beeilen musst. Vielleicht zeigt
            sie dir etwas viel Wertvolleres: dass genau jetzt die richtige Zeit für das ist, was gerade
            vor dir liegt. Und manchmal reicht diese Erkenntnis schon, um den nächsten Schritt mit
            deutlich mehr Klarheit zu gehen.
          </P>
          <P>
            Wenn du danach Lust hast, dieser Klarheit sieben Tage lang nachzugehen, findest du im{" "}
            <Link href="/7-tage-klarheits-check" className="text-brand hover:underline">
              7-Tage-Klarheits-Check
            </Link>{" "}
            einen ruhigen Einstieg dafür.
          </P>
        </Reveal>
      </main>
      <Footer />
    </>
  );
}