import type { GetInTouchData } from "@/lib/strapi/types"

export default function ContactGetInTouch({ data }: { data: GetInTouchData }) {
  return (
    <div className="contact-sidebar flex flex-col justify-between lg:w-[584px] gap-[32px] lg:gap-[40px]">
      <div className="flex flex-col gap-[16px] lg:gap-[24px] lg:max-w-[458px]">
        <p
          className="contact-watermark font-heading text-[64px] lg:text-[160px] leading-[0.75] tracking-[-1.83px] lg:tracking-[-4px] text-[rgba(16,36,67,0.08)] select-none font-bold"
          aria-hidden="true"
        >
          {data.watermarkText}
        </p>
        <p className="font-funnel text-[rgba(32,38,43,0.6)] lg:text-[#4a5565] text-[16px] leading-[1.5] lg:leading-[24px] font-medium">
          {data.description}
        </p>
        <div className="w-full h-px bg-[rgba(42,48,54,0.2)]" />
      </div>

      <div className="flex flex-col gap-[20px] lg:gap-[24px]">
        {data.items.map((item, i) => (
          <div key={i} className="flex gap-[24px] items-start">
            <img
              src={item.icon}
              alt=""
              loading="lazy"
              className="w-[44px] h-[44px] lg:w-[45px] lg:h-[45px] flex-shrink-0"
            />
            <div className="flex flex-col">
              <span className="font-sans text-[#2a3036] text-[16px] leading-[24px]">
                {item.label}
              </span>
              {item.href ? (
                <a
                  href={item.href}
                  className="font-sans text-[14px] lg:text-[16px] leading-[22px] lg:leading-[24px] text-[rgba(42,48,54,0.7)] hover:text-[#d20010] transition-colors"
                >
                  {item.value}
                </a>
              ) : (
                <span className="font-sans text-[14px] lg:text-[16px] leading-[22px] lg:leading-[24px] text-[rgba(42,48,54,0.7)]">
                  {item.value}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}