import Link from "next/link";

const links = [
  { label: "Impressum", href: "/impressum" },
  { label: "Datenschutz", href: "/datenschutz" },
  { label: "Versand", href: "/versand" },
  { label: "AGB", href: "/agb" },
  { label: "Widerruf", href: "/widerruf" },
];

export function Footer() {
  return (
    <footer className="bg-bg-dark flex flex-col items-center justify-end w-full mt-auto">

      {/* 3px top divider — not a border */}
      <div className="bg-[#30302c] h-[3px] w-full shrink-0" />

      {/* Footer inner — max-width 1280px, centered */}
      <div className="flex flex-col items-center w-full max-w-[1280px] py-8 md:py-4">

        {/* Three groups: logo | @handle | links — stacked + centered below
            lg:. Reverted here from an earlier sm: rename (2026-07-29's
            breakpoint migration): this row isn't the "grid arrives before
            the fluid floor" bug the sm: consolidation targets — logo +
            handle + 5 nowrap legal links (all shrink-0) simply don't fit
            in one row below ~1024px regardless of fluid scaling (measured:
            ~746px combined natural width at a 666px viewport, causing a
            real horizontal page overflow, not just visual cramping).
            Same fixed-content-doesn't-fit category as Cart/Checkout/
            SectionTOC, kept at lg: for the same reason. */}
        <div className="flex flex-col lg:flex-row items-center lg:justify-between gap-6 lg:gap-0 px-8 md:px-16 w-full">

          {/* Logo: "einfach produktiv" white + "." gold */}
          <div className="flex items-center p-2 shrink-0">
            <span
              className="font-semibold text-bg-white text-h-small leading-normal whitespace-nowrap"
              style={{ fontFamily: "var(--font-lora)" }}
            >
              einfach produktiv
              <span className="text-brand">.</span>
            </span>
          </div>

          {/* Social handle — Lora Regular (weight 400) */}
          <a
            href="https://www.instagram.com/einfach.produktiv/"
            target="_blank"
            rel="noopener noreferrer"
            className="font-normal text-bg-white text-h-small text-center leading-[1.2] whitespace-nowrap shrink-0 hover:text-brand transition-colors"
            style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
          >
            @einfach.produktiv
          </a>

          {/* Legal links — wrap + center below md instead of a rigid row */}
          <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 shrink-0">
            {links.map((link) => (
              <Link
                key={link.label}
                href={link.href}
                className="font-normal text-bg-white text-body-sm leading-[1.5] whitespace-nowrap hover:text-brand transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>

        </div>
      </div>
    </footer>
  );
}