import { getServerT, getServerLocale } from "@/lib/i18n/server";
import Link from "next/link";

interface SubscribeHeroProps {
  locale: string;
}

export async function SubscribeHero({ locale }: SubscribeHeroProps) {
  const t = await getServerT(locale, "subscribe");

  return (
    <header className="sub-hero">
      <div className="wrap">
        <div className="crumb">
          <Link href="/">{t("breadcrumb_home")}</Link>
          <span className="sep">›</span>
          <span>{t("breadcrumb_current")}</span>
        </div>
        <h1>
          {t("hero_heading_1")}
          <em>{t("hero_heading_em1")}</em>
          {t("hero_heading_2")}
          <em>{t("hero_heading_em2")}</em>
          {t("hero_heading_3")}
          <em>{t("hero_heading_em3")}</em>
          {t("hero_heading_4")}
        </h1>
        <p className="lede">{t("hero_lede")}</p>
        <div className="trust">
          <span className="item">
            <svg viewBox="0 0 24 24">
              <path d="M5 12l5 5L20 7" />
            </svg>
            <b>{t("trust_no_card_bold")}</b> {t("trust_no_card_rest")}
          </span>
          <span className="item">
            <svg viewBox="0 0 24 24">
              <path d="M5 12l5 5L20 7" />
            </svg>
            <b>{t("trust_cancel_bold")}</b> {t("trust_cancel_rest")}
          </span>
          <span className="item">
            <svg viewBox="0 0 24 24">
              <path d="M5 12l5 5L20 7" />
            </svg>
            <b>{t("trust_refund_bold")}</b> {t("trust_refund_rest")}
          </span>
          <span className="item">
            <svg viewBox="0 0 24 24">
              <path d="M5 12l5 5L20 7" />
            </svg>
            <b>{t("trust_payment")}</b>
          </span>
        </div>
      </div>
    </header>
  );
}