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

// No product photo exists for this page (unlike /todo-cards, /lebensuhr) —
// this is a free monthly ritual, not something with packaging to shoot.
// Text + a Caveat-font quote carries the hero instead, same treatment
// RichText.tsx's Quote component already uses for a callout line.
export function DieSiebenHero() {
  return (
    <section className="bg-bg-base w-full">
      <Reveal className="flex flex-col gap-6 items-start px-[var(--layout-padding-x)] pt-10 pb-12 sm:pt-12 sm:pb-16 max-w-[46rem] mx-auto text-center sm:items-center">
        {/* Breadcrumb — left-aligned regardless of the centered content
            below, same "not part of the centered block" split as
            /todo-cards's and /lebensuhr's own hero. */}
        <p className="self-start flex items-center gap-2 text-body-sm text-text-muted">
          <Link href="/" className="hover:text-brand transition-colors">
            Startseite
          </Link>
          <span>›</span>
          <Link href="/#werkzeuge" className="hover:text-brand transition-colors">
            Werkzeuge
          </Link>
          <span>›</span>
          <span className="text-text-primary">Die Sieben</span>
        </p>

        <div className="flex flex-col gap-3 items-center">
          <p
            className="font-semibold text-display text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            Die Sieben<span className="text-brand">.</span>
          </p>
          <p className="font-semibold text-h4 text-text-muted" style={{ fontFamily: "var(--font-lora)" }}>
            Das Monatsritual von einfach produktiv.
          </p>
        </div>

        <p className="text-body text-text-body max-w-[32rem]">
          Sieben kleine Dinge, die den Monat ein bisschen reicher machen.
        </p>

        <p
          className="text-text-primary text-[1.75rem] leading-[1.2] mt-2"
          style={{ fontFamily: "var(--font-caveat)" }}
        >
          &bdquo;Nicht alles, was zählt, steht auf einer ToDo-Liste.&ldquo;
        </p>
      </Reveal>
    </section>
  );
}
