/* eslint-disable @next/next/no-img-element */
type OfficeProps = {
  title: string;
  phone: string;
  email: string;
  address: string;
};

const offices: OfficeProps[] = [
  {
    title: "Corporate Office",
    phone: "58815305",
    email: "Sales@Navana-Realestate.com",
    address: "3/A, R #30, Gulshan-02, Dhaka, BD",
  },
  {
    title: "Corporate Annex Office",
    phone: "48810255-9",
    email: "Sales@Navana-Realestate.com",
    address: "House # 9/C, Road # 71, Gulshan-02, Dhaka-1212",
  },
  {
    title: "Gulshan Annex Office",
    phone: "58812601",
    email: "Sales@Navana-Realestate.com",
    address: "House # 10/A, Road # 90, Gulshan-02, Dhaka-1212",
  },
  {
    title: "Chittagong Office",
    phone: "031-2562313",
    email: "Sales@Navana-Realestate.com",
    address: "149, Sugandha R/A, Panchlaish, Chittagong-4203",
  },
];

const OfficeCard = ({ title, phone, email, address }: OfficeProps) => (
  <div className="flex flex-col border-b last:border-b-0 border-[#E9E9E9] pt-6 pb-8 mb-6">
    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
      <div className="">
        <h3 className="font-creato text-[20px] text-[#333333]/85 font-medium mb-5">
          {title}
        </h3>
        <div className="flex items-center text-[#888888] text-sm mb-4 gap-2">
          <img src="/images/contact/icons/phone.png" alt="" />
          {phone}
        </div>
        <div className="flex items-center text-[#888888] text-sm mb-4 gap-2">
          <img src="/images/contact/icons/envelope.png" alt="" />
          {email}
        </div>
        <div className="flex items-center text-[#888888] text-sm gap-2">
          <img src="/images/contact/icons/pin.png" alt="" />
          {address}
        </div>
      </div>

      {/* Desktop: right-aligned | Mobile: below */}
      <div className="sm:self-center sm:mt-0 mt-3 inline-flex items-center gap-2">
        <img
          src="/images/contact/icons/link.png"
          alt=""
          className="w-3.5 h-3.5 opacity-50"
        />
        <a
          href="#"
          className="text-sm text-[#888888]  hover:text-black/70 inline-flex items-center"
        >
          View Location
        </a>
      </div>
    </div>
  </div>
);

const OfficeLocationDetails = () => {
  return (
    <div className="bg-[#FAFAFA] md:px-10 xl:px-20 pt-20 pb-36">
      <div className="max-w-3xl mx-auto px-4 md:px-8">
        <div className="flex justify-center">
          <h2 className="font-times-sans text-[24px] md:text-[32px] text-[#28241E] font-normal tracking-widest mb-10 border-b border-[#28241E]/60 pb-2">
            OFFICE DETAILS
          </h2>
        </div>

        {offices.map((office, index) => (
          <OfficeCard key={index} {...office} />
        ))}
      </div>
    </div>
  );
};

export default OfficeLocationDetails;