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

export function ShopHeader() {
  return (
    <Reveal className="flex flex-col gap-3 items-start pb-6 pt-10 px-[var(--layout-padding-x)] w-full">
      <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">Shop</span>
      </p>
      <p
        className="font-semibold text-display text-text-primary"
        style={{ fontFamily: "var(--font-lora)" }}
      >
        Shop
      </p>
      <p className="text-body text-text-muted">
        Alles, was du für mehr Klarheit im Alltag brauchst.
      </p>
    </Reveal>
  );
}
