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

interface TestimonialBandProps {
  locale: string;
}

const TESTIMONIALS = [
  {
    quote:
      "I subscribed for the Daily Briefing and stayed for the investigations. ₹49 a month is what a single coffee costs and this lasts the whole month.",
    name: "Rohit S.",
    role: "DTNews+ since 2021 · Mumbai",
    initials: "RS",
    gradient: "linear-gradient(135deg,var(--brand),#7d1418)",
  },
  {
    quote:
      "The only Indian paper where the Markets desk reads filings instead of press releases. I cancelled three other subscriptions to consolidate here.",
    name: "Priya D.",
    role: "Premium since 2023 · Bengaluru",
    initials: "PD",
    gradient: "linear-gradient(135deg,#1E3A8A,#152b69)",
  },
  {
    quote:
      "Family share covers my partner, my parents and me. Four serious Indian newspaper subs for what one used to cost. The annual call with the editor sealed it.",
    name: "Anand R.",
    role: "Premium since 2022 · Singapore",
    initials: "AR",
    gradient: "linear-gradient(135deg,#0F766E,#0a4f47)",
  },
];

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

  return (
    <section className="wrap testimonial-band">
      <h2>{t("testimonials_heading")}</h2>
      <p className="sub">{t("testimonials_sub")}</p>
      <div className="testimonial-grid">
        {TESTIMONIALS.map((item) => (
          <div key={item.name} className="testimonial">
            <div className="quote-mark">&ldquo;</div>
            <blockquote>{item.quote}</blockquote>
            <div className="src">
              <div className="av" style={{ background: item.gradient }}>
                {item.initials}
              </div>
              <div>
                <div className="who">{item.name}</div>
                <div className="role">{item.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}