"use client";

import { useTranslations } from "next-intl";
import { ContactSectionProps } from "./types";
import ImageWithFallback from "@/shared/ImageWithFallback";

const ICON_COLORS = ["#1B4F9C", "#7C4A1E", "#70192C", "#1C6A32", "#0077B6"];

function formatPhoneDisplay(phone: string, phoneCode: string) {
  const digits = phone.replace(/\D/g, "");
  // Prefer spaced local display when it looks like an 800 / short number
  if (digits.length === 10) {
    return `${digits.slice(0, 3)} ${digits.slice(3, 6)} ${digits.slice(6)}`;
  }
  if (digits.length === 9) {
    return `${digits.slice(0, 3)} ${digits.slice(3, 6)} ${digits.slice(6)}`;
  }
  return phoneCode ? `${phoneCode} ${phone}` : phone;
}

export default function ContactSection({
  phones,
  bankAccounts,
  description,
}: ContactSectionProps) {
  const t = useTranslations("Investments");
  const contactDescription = description || t("contactDescription");

  return (
    <section className="py-16 lg:py-24 bg-white">
      <div data-aos="fade-up" className="container lg:px-16 px-4">
        <h2 className="text-2xl lg:text-4xl font-bold text-start text-primary mb-4">
          {t("contactHeading")}
        </h2>

        {contactDescription && (
          <p className="text-dark text-base lg:text-lg leading-relaxed text-start mb-10 max-w-3xl">
            {contactDescription}
          </p>
        )}

        {/* Contact: label (start) + pill phone */}
        {phones.length > 0 && (
          <div className="flex flex-wrap items-center justify-start gap-4 mb-12">
            <span className="text-dark font-bold text-base lg:text-lg">
              {t("contactLabel")}
            </span>
            {phones.map((item, idx) => {
              const fullNumber = `+${item.phone_code}${item.phone}`;
              const displayNumber = formatPhoneDisplay(
                item.phone,
                item.phone_code,
              );

              return (
                <a
                  key={idx}
                  href={`tel:${fullNumber}`}
                  className="bg-primary text-white font-bold text-base lg:text-lg px-7 py-2.5 rounded-full hover:bg-primary/90 transition-colors"
                  dir="ltr"
                >
                  {displayNumber}
                </a>
              );
            })}
          </div>
        )}

        {/* Banks: shared label (start) + IBAN list */}
        {bankAccounts.length > 0 && (
          <div className="flex flex-wrap items-center justify-start gap-6 lg:gap-10">
            <div className="text-start shrink-0">
              <p className="text-dark font-bold text-xl lg:text-2xl leading-snug">
                {t("bankLabel0")}
              </p>
              <p className="text-dark font-bold text-xl lg:text-2xl leading-snug">
                {t("bankLabel1")}
              </p>
            </div>

            <div className="flex flex-col gap-4">
              {bankAccounts.map((account, idx) => {
                const ibanClean = account.iban.replace(/\s/g, "");
                const iconSrc =
                  typeof account.bankIcon === "string"
                    ? account.bankIcon
                    : account.bankIcon?.src;

                return (
                  <div
                    key={account.iban}
                    className="flex items-center justify-start gap-3"
                  >
                    <div className="relative w-10 h-10 rounded-lg overflow-hidden shrink-0 bg-[#1B4F9C]">
                      <ImageWithFallback
                        src={iconSrc ?? ""}
                        alt=""
                        fill
                        className="object-cover"
                      />
                    </div>
                    <span
                      className="text-sm lg:text-base text-dark tracking-wide"
                      dir="ltr"
                    >
                      {ibanClean}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}