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

interface TrustSectionProps {
  locale: string;
}

const avatarClasses = ["av-navy", "av-emerald", "av-rust"];
const avatarInitials = ["RS", "PD", "AR"];

export async function TrustSection({ locale }: TrustSectionProps) {
  const t = await getServerT(locale, "about.trust");

  const cards = [
    { quote: t("t1_quote"), who: t("t1_who"), role: t("t1_role") },
    { quote: t("t2_quote"), who: t("t2_who"), role: t("t2_role") },
    { quote: t("t3_quote"), who: t("t3_who"), role: t("t3_role") },
  ];

  return (
    <section className="trust-band">
      <div className="wrap">
        <div className="about-head">
          <div>
            <div className="kicker">{t("kicker")}</div>
            <h2>{t("heading")}</h2>
          </div>
          <div className="right">
            <p>{t("right")}</p>
          </div>
        </div>
        <div className="trust-grid">
          {cards.map((card, i) => (
            <div key={i} className="trust-card">
              <div className="quote-mark">&ldquo;</div>
              <blockquote>{card.quote}</blockquote>
              <div className="src">
                <div className={`av ${avatarClasses[i]}`}>{avatarInitials[i]}</div>
                <div>
                  <div className="who">{card.who}</div>
                  <div className="role">{card.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}