import type { Metadata } from "next";
import Image from "next/image";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { ScrollReveal } from "@/components/ScrollReveal";
import { buildPageMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "ueberMich" });
  const tHome = await getTranslations({ locale, namespace: "home" });
  return buildPageMetadata({
    locale,
    path: "/ueber-mich",
    title: tHome("aboutTitle"),
    description: t("metaDescription"),
  });
}

type Beat = { eyebrow: string; text: string };

export default async function UeberMichPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "ueberMich" });
  const tHome = await getTranslations({ locale, namespace: "home" });

  const timeline = t.raw("timeline") as Beat[];

  return (
    // Opake --rk-bg-Fläche: blockt den weißen Radial-Schimmer des
    // body-Hintergrunds (Startseiten-Hero), der sonst durch jede Lücke
    // zwischen den Blöcken als hellgrauer Streifen durchscheint.
    // Header/Banner/Nav sind die geteilte Behandlung — siehe
    // components/PageHeaderBanner.tsx + components/SiteHeader.tsx.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <PageHeaderBanner
        image="/img/ueber-mich-banner.jpg"
        eyebrow={t("eyebrow")}
        title={tHome("aboutTitle")}
        subtitle={t("subtitle")}
        focalPoint="50% 42%"
        tall
      />

      {/* WER ICH BIN — Portrait + Text. Sektion bewusst in --rk-bg (wie die
          Seite) und ohne Abstand zum Banner, damit KEIN dunkler Streifen /
          "Balken" zwischen Banner und erstem Segment entsteht — der Balken
          gehört zur Portfolio-Filterleiste, nicht zum Header (Till,
          09.09.2026). Der Banner-Fade endet ohnehin in --rk-bg, also
          fließt das Bild nahtlos in die Sektion. */}
      <section className="-mt-8 py-20 sm:py-28">
        <div className="mx-auto grid max-w-[1120px] items-center gap-12 px-5 sm:grid-cols-[minmax(0,19rem)_1fr] sm:gap-16 sm:px-8">
          <ScrollReveal>
            <div className="relative mx-auto aspect-[4/5] w-full max-w-[15rem] overflow-hidden rounded-2xl sm:max-w-none">
              <Image
                src="/img/rakku-portrait.jpg"
                alt={tHome("aboutPortraitAlt")}
                fill
                sizes="(min-width: 640px) 19rem, 60vw"
                className="object-cover"
              />
            </div>
          </ScrollReveal>
          <ScrollReveal delayMs={100} className="text-center sm:text-left">
            <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{tHome("aboutSubtitle")}</p>
            <h2 className="rk-wordmark mt-3 text-2xl sm:text-3xl">{t("whoTitle")}</h2>
            <div className="rk-accent-rule mx-auto sm:mx-0" />
            <p className="mt-6 max-w-xl text-base leading-relaxed text-[var(--rk-ink-muted)]">{tHome("aboutText")}</p>
          </ScrollReveal>
        </div>
      </section>

      {/* MEINE VISION — vertikale Timeline (5 Stationen), Karten wechselseitig */}
      <section className="py-24 sm:py-32">
        <ScrollReveal className="mx-auto max-w-[1120px] px-5 text-center">
          <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{t("visionEyebrow")}</p>
          <h2 className="rk-wordmark mt-3 text-2xl sm:text-3xl">{t("visionTitle")}</h2>
          <div className="rk-accent-rule rk-accent-rule--center" />
        </ScrollReveal>

        <div className="relative mx-auto mt-16 max-w-[62rem] px-5">
          {/* Kupfer-Linie — startet/endet auf Höhe des ersten/letzten Punkts
              (top-6 = die top-6-Position der Punkte), damit kein Linien-Stummel
              über oder unter den Karten hängt. */}
          <div className="absolute bottom-6 left-[3px] top-6 w-px bg-[var(--rk-accent)]/35 sm:left-1/2 sm:-translate-x-1/2" />

          <ol className="space-y-10 sm:space-y-14">
            {timeline.map((beat, i) => {
              const left = i % 2 === 0;
              return (
                <li key={i} className="relative sm:grid sm:grid-cols-2 sm:gap-x-12">
                  {/* Punkt auf der Linie */}
                  <span className="absolute left-0 top-6 h-[9px] w-[9px] -translate-x-[3px] rounded-full border border-[var(--rk-accent)] bg-[var(--rk-bg)] sm:left-1/2 sm:-translate-x-1/2" />
                  <div className={left ? "pl-7 sm:col-start-1 sm:pl-0 sm:text-right" : "pl-7 sm:col-start-2 sm:pl-0"}>
                    <ScrollReveal delayMs={left ? 0 : 80}>
                      <div className="rounded-xl border border-white/10 bg-[var(--rk-surface)] p-6 sm:p-7">
                        <p className="text-[0.7rem] uppercase tracking-[0.22em] text-[var(--rk-accent)]">{beat.eyebrow}</p>
                        <p className="mt-3 text-sm leading-relaxed text-[var(--rk-ink-muted)]">{beat.text}</p>
                      </div>
                    </ScrollReveal>
                  </div>
                </li>
              );
            })}
          </ol>
        </div>
      </section>
    </main>
  );
}