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

const title = "Über mich";
const description =
  "Familienmensch, Vater, Teamleiter – und der Kopf hinter einfach produktiv. Warum die Seite entstanden ist und wofür sie steht.";

export const metadata: Metadata = {
  title,
  description,
  alternates: { canonical: "/ueber-mich" },
  openGraph: {
    title,
    description,
    url: "/ueber-mich",
    type: "profile",
    images: ["/about-author.jpg"],
  },
  twitter: {
    title,
    description,
    images: ["/about-author.jpg"],
  },
};

// Same hand-copied "H2 with brand underline" treatment as
// /lebensuhr/page.tsx and /3x3-system/page.tsx use — 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 page's two standout lines.
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 highlights = [
  "Impulse, die im echten Leben funktionieren",
  "Orientierung statt Überforderung",
  "Alltagstaugliche Systeme statt komplizierter Methoden",
  "Ehrliche Einblicke statt Perfektionsfassade",
];

export default function UeberMichPage() {
  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">Über mich</span>
          </p>
          <div className="flex items-center gap-5">
            <div className="relative size-20 shrink-0 rounded-full overflow-hidden">
              <Image alt="Björn" src="/about-author.jpg" fill sizes="80px" className="object-cover" />
            </div>
            <p
              className="font-semibold text-[clamp(2rem,1.393rem+1.5vw,2.75rem)] text-text-primary leading-[1.15]"
              style={{ fontFamily: "var(--font-playfair)" }}
            >
              Hallo, ich bin Björn.
            </p>
          </div>
        </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>
            Familienmensch. Vater. Teamleiter. Und lange Zeit jemand, der dachte, Produktivität heißt vor
            allem: möglichst viel schaffen.
          </P>
          <P>
            Beruflich leite ich ein internationales IT-Team in der Logistikbranche. Privat bin ich
            zwischen Homeoffice, Familienleben und einem Alltag unterwegs, der selten nach Plan läuft.
            Genau dort ist einfach produktiv entstanden.
          </P>

          <H2>Warum einfach produktiv</H2>
          <P>
            Irgendwann habe ich gemerkt, dass ich ständig versuchte, meinen Alltag besser zu organisieren
            – neue Apps, neue Methoden, neue Routinen. Vieles wurde effizienter. Trotzdem blieb das
            Gefühl, an den wirklich wichtigen Dingen vorbeizuleben. Nicht weil ich zu wenig geschafft
            habe, sondern weil ich mich zu selten gefragt habe, ob ich das Richtige geschafft habe.
          </P>
          <P>
            Heute glaube ich: Es geht nicht darum, mehr zu schaffen. Es geht darum, zu erkennen, was in
            deiner aktuellen Lebensphase zählt – und dir einen Anker zu setzen, der dich im Alltag daran
            erinnert.
          </P>

          <H2>Wofür einfach produktiv steht</H2>
          <P>
            Die Welt erzählt dir ständig, wie du mehr schaffen kannst. Mich interessiert etwas anderes:
            Wie schaffst du das Richtige? Deshalb geht es hier nicht um Selbstoptimierung um jeden Preis,
            sondern um Orientierung statt Optimierung, um Klarheit statt einem weiteren System.
          </P>
          <Quote>Verlier dich nicht im Mehr. Verankere, was zählt.</Quote>

          <H2>Was dich hier erwartet</H2>
          <P>
            Keine Patentrezepte. Sondern Gedanken, Erfahrungen und Werkzeuge, die sich in meinem eigenen
            Alltag bewährt haben:
          </P>
          <ul className="flex flex-col gap-2 text-body text-text-body list-disc pl-5">
            {highlights.map((h) => (
              <li key={h}>{h}</li>
            ))}
          </ul>

          <H2>Warum ich schreibe</H2>
          <P>
            Ich bin weder Coach noch Guru, sondern jemand, der selbst immer wieder versucht, Familie,
            Beruf und eigene Projekte unter einen Hut zu bekommen. Nicht weil ich alles im Griff habe,
            sondern weil ich glaube, dass wir voneinander lernen können. Wenn ein Gedanke davon deinen
            Alltag ein Stück leichter macht, hat sich das schon gelohnt.
          </P>
          <Quote>Nicht alles, was zählt, steht auf einer To-do-Liste.</Quote>
          <P>Herzliche Grüße, Björn</P>

          {/* Same bordered CTA-card treatment /lebensuhr's and
              /3x3-system's own closing links use. */}
          <Link
            href="/blog"
            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">Weiterlesen:</p>
              <p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
                Meine Gedanken im Blog
              </p>
              <p className="text-body-sm text-text-muted">Impulse und Werkzeuge aus dem echten 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 />
    </>
  );
}