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

interface BureausSectionProps {
  locale: string;
}

const mapPins = [
  { key: "mumbai",    left: "42%", top: "62%", label: "Mumbai · HQ", hq: true },
  { key: "delhi",     left: "54%", top: "40%", label: "New Delhi",   hq: false },
  { key: "kolkata",   left: "74%", top: "58%", label: "Kolkata",     hq: false },
  { key: "bengaluru", left: "50%", top: "84%", label: "Bengaluru",   hq: false },
  { key: "chennai",   left: "58%", top: "88%", label: "Chennai",     hq: false },
  { key: "hyderabad", left: "54%", top: "70%", label: "Hyderabad",   hq: false },
  { key: "ahmedabad", left: "36%", top: "52%", label: "Ahmedabad",   hq: false },
];

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

  const bureaus = [
    { city: t("bureaus.b1_city"), chief: t("bureaus.b1_chief"), count: t("bureaus.b1_count"), since: t("bureaus.b1_since"), hq: true },
    { city: t("bureaus.b2_city"), chief: t("bureaus.b2_chief"), count: t("bureaus.b2_count"), since: t("bureaus.b2_since"), hq: false },
    { city: t("bureaus.b3_city"), chief: t("bureaus.b3_chief"), count: t("bureaus.b3_count"), since: t("bureaus.b3_since"), hq: false },
    { city: t("bureaus.b4_city"), chief: t("bureaus.b4_chief"), count: t("bureaus.b4_count"), since: t("bureaus.b4_since"), hq: false },
    { city: t("bureaus.b5_city"), chief: t("bureaus.b5_chief"), count: t("bureaus.b5_count"), since: t("bureaus.b5_since"), hq: false },
    { city: t("bureaus.b6_city"), chief: t("bureaus.b6_chief"), count: t("bureaus.b6_count"), since: t("bureaus.b6_since"), hq: false },
    { city: t("bureaus.b7_city"), chief: t("bureaus.b7_chief"), count: t("bureaus.b7_count"), since: t("bureaus.b7_since"), hq: false },
    { city: t("bureaus.b8_city"), chief: t("bureaus.b8_chief"), count: t("bureaus.b8_count"), since: t("bureaus.b8_since"), hq: false },
  ];

  return (
    <section className="bureaus-band">
      <div className="wrap">
        <div className="about-head">
          <div>
            <div className="kicker kicker-accent">{t("bureaus.kicker")}</div>
            <h2>{t("bureaus.heading")}</h2>
          </div>
          <div className="right">
            <p>{t("bureaus.right")}</p>
          </div>
        </div>
        <div className="bureaus-grid">
          <div className="bureaus-map">
            <Image
              src="https://images.unsplash.com/photo-1524813686514-a57563d77965?w=900&q=80"
              alt={t("bureaus.map_alt")}
              fill
              unoptimized
            />
            <div className="pins">
              {mapPins.map((pin) => (
                <div
                  key={pin.key}
                  className={`pin${pin.hq ? " hq" : ""}`}
                  style={{ left: pin.left, top: pin.top }}
                >
                  <div className="dot" />
                  <div className="lbl">{pin.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="bureaus-list">
            {bureaus.map((bureau, i) => (
              <div key={i} className="bureau-row">
                <div>
                  <div className="city">
                    {bureau.city}
                    {bureau.hq && <span className="hq">{t("bureaus.hq_badge")}</span>}
                  </div>
                  <div className="chief">{bureau.chief}</div>
                </div>
                <div className="stats">
                  <b>{bureau.count}</b> {t("bureaus.reporters")}
                  <br />
                  {bureau.since}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}