"use client";

import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import RichTextClient from "../components/RichTextClient";
import { BackArrow, SubpageIntro, card, frame, ghost, monoLabel } from "./subpage";
import { useCmsPage } from "./useCmsPage";

export default function LegalNoticeClient() {
  const locale = useLocale();
  const t = useTranslations("common");
  const tFooter = useTranslations("footer");
  const cmsHtml = useCmsPage("legal-notice", locale);
  const de = locale === "de";

  return (
    <>
      <SubpageIntro
        back={
          <Link href={`/${locale}`} className={ghost}>
            <BackArrow /> {t("backToHome")}
          </Link>
        }
        kicker="§ 5 TMG"
        title={tFooter("legalNotice")}
      />

      <div className="mt-10 grid gap-10 lg:grid-cols-12 lg:gap-12">
        <div className="min-w-0 lg:col-span-8">
          {cmsHtml ? (
            <RichTextClient html={cmsHtml} className="plakat-prose max-w-[68ch]" />
          ) : (
            <div className="plakat-prose max-w-[68ch]">
              <h2>Angaben gemäß § 5 TMG</h2>
              <p>
                <strong>Dennis Konkol</strong>
                <br />
                Auf dem Ziegenbrink 2B
                <br />
                49082 Osnabrück, Deutschland
              </p>
              <h2>Haftungsausschluss</h2>
              <p>
                Die Inhalte dieser Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
                Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen.
              </p>
            </div>
          )}
        </div>

        <aside className="grid content-start gap-6 lg:col-span-4">
          <section className={`${frame} bg-signal p-5 text-ink md:p-6`} aria-labelledby="legal-contact">
            <h2 id="legal-contact" className={monoLabel}>
              {de ? "Direkter Kontakt" : "Direct contact"}
            </h2>
            <a
              href="mailto:info@dk0.dev"
              className="mt-3 block w-fit font-display text-[clamp(1.8rem,4vw,2.4rem)] font-extrabold leading-none tracking-[-0.04em] [overflow-wrap:anywhere] hover:underline hover:decoration-[3px] hover:underline-offset-[5px]"
            >
              info<span className="text-paper">@</span>dk0.dev
            </a>
            <p className="mt-4 text-[15px]">Osnabrück, {de ? "Deutschland" : "Germany"}</p>
          </section>

          <section className={`${card} p-5 md:p-6`} aria-labelledby="legal-review">
            <h2 id="legal-review" className={monoLabel}>
              {de ? "Zuletzt geprüft" : "Last review"}
            </h2>
            <p className="mt-2 font-display text-2xl font-extrabold tracking-[-0.03em]">{de ? "14. Mai 2025" : "May 14, 2025"}</p>
            <p className="mt-3 text-[15px] leading-relaxed">
              {de
                ? "Dieses Impressum gilt für alle Inhalte auf dk0.dev und die zugehörigen Social-Media-Profile."
                : "This legal notice applies to all contents on dk0.dev and related social media profiles."}
            </p>
          </section>
        </aside>
      </div>
    </>
  );
}