import { useTranslations } from "next-intl";
import NewsletterForm from "@/components/footer/NewsletterForm";
import Rule from "@/components/ui/Rule";
import { useNewsletterLabels } from "@/components/footer/newsletter-labels";

export default function JournalNewsletterBand() {
  const t = useTranslations("BlogPage.newsletterBand");
  const newsletterLabels = useNewsletterLabels();

  return (
    <section className="bg-background px-6 py-[76px] lg:px-16 lg:py-[104px]">
      <div className="mx-auto max-w-[1440px]">
        <div className="flex flex-col justify-between gap-10 bg-foreground p-[48px_28px] lg:flex-row lg:items-center lg:gap-16 lg:p-[72px_80px]">
          <div className="max-w-[560px]">
            <span className="text-[11px] font-semibold uppercase tracking-[0.26em] text-gold-bright">
              {t("overline")}
            </span>
            <h2 className="mb-4 mt-4 font-display text-[28px] leading-[1.2] text-white lg:text-[32px]">
              {t("title")}
            </h2>
            <p className="mb-7 text-base leading-[1.7] text-on-inverse-surface/[.72]">
              {t("body")}
            </p>
            <NewsletterForm labels={newsletterLabels} />
          </div>

          {/* Decorative chemical-symbol mark. #c5a059 = burnished-gold; the
              text-stroke utility needs the literal colour value. */}
          <div aria-hidden="true" className="hidden shrink-0 flex-col items-center lg:flex">
            <span className="font-display text-[96px] leading-none text-transparent [-webkit-text-stroke:1px_#c5a059]">
              Au
            </span>
            <Rule size="lg" className="mt-4 bg-burnished-gold" />
            <span className="mt-4 text-[9.5px] font-semibold uppercase tracking-[0.2em] text-on-inverse-surface/60">
              {t("badge")}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}