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

interface ContactMapBandProps {
  locale: string;
}

export async function ContactMapBand({ locale }: ContactMapBandProps) {
  const t = await getServerT(locale, "contact.map");

  return (
    <section className="map-band">
      <div className="wrap map-row">
        <div className="map-text">
          <h2>{t("heading")}</h2>
          <p>{t("body")}</p>
          <div className="map-addr-block">
            <div className="lbl">{t("label")}</div>
            <div className="line">
              {t("line1")}
              <br />
              {t("line2")}
              <br />
              {t("line3")}
            </div>
            <div className="line mono">{t("hours")}</div>
          </div>
        </div>

        <div className="map-viz">
          <Image
            src="https://images.unsplash.com/photo-1524813686514-a57563d77965?w=1200&q=80"
            alt="Map of Mumbai"
            fill
            style={{ objectFit: "cover", filter: "grayscale(0.2)" }}
            unoptimized
          />
          <div className="map-pin">
            <div className="pin-dot" />
            <div className="pin-label">
              <b>{t("pin_label_dt")}</b> {t("pin_label_rest")}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}