import type { DepartmentsData } from "@/lib/strapi/types"

const cardBgStyle = {
  backgroundImage: `url("data:image/svg+xml;utf8,<svg viewBox='0 0 416 299' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(19.089 -22.582 31.418 21.011 173.24 250.94)'><stop stop-color='rgba(244,247,251,0)' offset='0'/><stop stop-color='rgba(244,247,251,1)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)`,
}

export default function ContactDepartments({ data }: { data: DepartmentsData }) {
  if (data.cards.length === 0) return null

  return (
    <section className="max-w-[1440px] mx-auto px-[20px] lg:px-[72px] pb-[60px] lg:pb-[80px]">
      <div className="flex flex-col lg:flex-row gap-[24px]">
        {data.cards.map((card, i) => (
          <div
            key={i}
            className="flex-1 rounded-[16px] overflow-hidden h-[208px] lg:h-[299px] flex flex-col justify-end"
            style={{ border: "0.833px solid rgba(229,231,235,0.5)", ...cardBgStyle }}
          >
            <div className="flex flex-col gap-[24px] px-[24px] py-[24px]">
              <div className="flex flex-col gap-[8px]">
                <h3 className="font-heading text-[#2a3036] text-[28px] lg:text-[32px] leading-[normal]">
                  {card.title}
                </h3>
                <p className="font-sans text-[14px] leading-[18px] text-[rgba(42,48,54,0.6)]">
                  <span className="lg:hidden">{card.description}</span>
                  <span
                    className="hidden lg:inline"
                    style={{
                      fontFamily: "'Manrope', sans-serif",
                      color: "rgba(42,48,54,0.6)",
                      lineHeight: "18px",
                      fontSize: "16px",
                    }}
                  >
                    {card.description}
                  </span>
                </p>
              </div>
              <a
                href={`mailto:${card.email}`}
                className="font-sans text-[#2a3036] text-[16px] leading-[24px] font-semibold hover:text-[#d20010] transition-colors"
              >
                {card.email}
              </a>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
