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

interface ContactDeptSidebarProps {
  locale: string;
}

const deptIcons: Record<string, string> = {
  newsroom:
    "M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z",
  secure:
    "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10",
  reader:
    "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10z",
  ads: "M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM3 10h18",
  careers:
    "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.9M16 3a4 4 0 0 1 0 7.8",
  press:
    "M22 16.9v3.1a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2H7a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.7a2 2 0 0 1-.5 2.1L7.9 9.7a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.7.6a2 2 0 0 1 1.7 2.1z",
};

export async function ContactDeptSidebar({ locale }: ContactDeptSidebarProps) {
  const t = await getServerT(locale, "contact");

  const depts = [
    {
      key: "newsroom",
      title: t("dept.newsroom_title"),
      desc: t("dept.newsroom_desc"),
      contact: t("dept.newsroom_contact"),
    },
    {
      key: "secure",
      title: t("dept.secure_title"),
      desc: t("dept.secure_desc"),
      contact: t("dept.secure_contact"),
    },
    {
      key: "reader",
      title: t("dept.reader_title"),
      desc: t("dept.reader_desc"),
      contact: t("dept.reader_contact"),
    },
    {
      key: "ads",
      title: t("dept.ads_title"),
      desc: t("dept.ads_desc"),
      contact: t("dept.ads_contact"),
    },
    {
      key: "careers",
      title: t("dept.careers_title"),
      desc: t("dept.careers_desc"),
      contact: t("dept.careers_contact"),
    },
    {
      key: "press",
      title: t("dept.press_title"),
      desc: t("dept.press_desc"),
      contact: t("dept.press_contact"),
    },
  ];

  const bureaus = [
    {
      name: t("bureau.mumbai_name"),
      chief: t("bureau.mumbai_chief"),
      phone: t("bureau.mumbai_phone"),
    },
    {
      name: t("bureau.delhi_name"),
      chief: t("bureau.delhi_chief"),
      phone: t("bureau.delhi_phone"),
    },
    {
      name: t("bureau.blr_name"),
      chief: t("bureau.blr_chief"),
      phone: t("bureau.blr_phone"),
    },
    {
      name: t("bureau.kol_name"),
      chief: t("bureau.kol_chief"),
      phone: t("bureau.kol_phone"),
    },
    {
      name: t("bureau.che_name"),
      chief: t("bureau.che_chief"),
      phone: t("bureau.che_phone"),
    },
    {
      name: t("bureau.hyd_name"),
      chief: t("bureau.hyd_chief"),
      phone: t("bureau.hyd_phone"),
    },
  ];

  return (
    <aside>
      <div className="dept-grid">
        {depts.map((dept) => (
          <a key={dept.key} className="dept-card" href="#">
            <div className="dept-icon">
              <svg viewBox="0 0 24 24">
                <path d={deptIcons[dept.key]} />
              </svg>
            </div>
            <div className="dept-info">
              <div className="ttl">{dept.title}</div>
              <div className="desc">{dept.desc}</div>
              <div className="v">{dept.contact}</div>
            </div>
            <span className="dept-arr">›</span>
          </a>
        ))}
      </div>

      <div className="bureau-card">
        <div className="ttl">{t("bureau.label")}</div>
        <h3>{t("bureau.heading")}</h3>
        <div className="bureau-list">
          {bureaus.map((b) => (
            <div key={b.name} className="bureau-item">
              <b>{b.name}</b>
              <span>{b.chief}</span>
              <span className="addr">{b.phone}</span>
            </div>
          ))}
        </div>
      </div>
    </aside>
  );
}