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

interface AboutHeroProps {
  locale: string;
}

export async function AboutHero({ locale }: AboutHeroProps) {
  const t = await getServerT(locale, "about");

  return (
    <header className="about-hero">
      <div className="wrap">
        <div className="crumb">
          <Link href={`/`}>{t("breadcrumb_home")}</Link>
          <span className="sep">›</span>
          <span>{t("breadcrumb")}</span>
        </div>
        <div className="about-hero-grid">
          <div>
            <h1>
              {t("hero.title1")}{" "}
              <span className="red">{t("hero.title_red")}</span>
              <br />
              {t("hero.title2")}
            </h1>
            <p className="lede">{t("hero.lede")}</p>
            <div className="meta-row">
              <div className="stat">
                <div className="n">{t("hero.s1_n")}</div>
                <div className="l">{t("hero.s1_l")}</div>
              </div>
              <div className="stat">
                <div className="n">{t("hero.s2_n")}</div>
                <div className="l">{t("hero.s2_l")}</div>
              </div>
              <div className="stat">
                <div className="n">{t("hero.s3_n")}</div>
                <div className="l">{t("hero.s3_l")}</div>
              </div>
              <div className="stat">
                <div className="n">{t("hero.s4_n")}</div>
                <div className="l">{t("hero.s4_l")}</div>
              </div>
              <div className="stat">
                <div className="n">{t("hero.s5_n")}</div>
                <div className="l">{t("hero.s5_l")}</div>
              </div>
            </div>
          </div>
          <div className="about-hero-img">
            <Image
              src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=900&q=80"
              alt={t("hero.img_alt")}
              fill
              unoptimized
            />
            <span className="credit">{t("hero.credit")}</span>
          </div>
        </div>
      </div>
    </header>
  );
}