import Image from "next/image";

type SocialLink = {
  icon: string;
  alt: string;
  href: string;
  width: number;
  height: number;
};

type ContactCard = {
  icon: string;
  iconAlt: string;
  title: string;
  description?: string;
  cardClassName?: string;
  titleClassName?: string;
  socialLinks?: SocialLink[];
};

const contactCards: ContactCard[] = [
  {
    icon: "/assets/images/icon/contact1-1.svg",
    iconAlt: "Office location address icon",
    title: "Main Address",
    description: "20 Cooper Square, New York, NY 10003, USA",
  },
  {
    icon: "/assets/images/icon/contact1-2.svg",
    iconAlt: "Email contact address icon",
    title: "Email Address",
    description: "supportsasico@gmail.com",
    cardClassName: "v2",
  },
  {
    icon: "/assets/images/icon/contact1-3.svg",
    iconAlt: "Customer support phone icon",
    title: "Need helps urgent",
    description: "+1 (234) 5678 9900",
  },
  {
    icon: "/assets/images/icon/contact1-4.svg",
    iconAlt: "Social media network icons",
    title: "Social Media",
    cardClassName: "v2",
    titleClassName: "v2",
    socialLinks: [
      {
        icon: "/assets/images/icon/facebook2.svg",
        alt: "Facebook social media icon",
        href: "#",
        width: 8,
        height: 8,
      },
      {
        icon: "/assets/images/icon/twitter2.svg",
        alt: "Twitter social media icon",
        href: "#",
        width: 15,
        height: 15,
      },
      {
        icon: "/assets/images/icon/linkedin2.svg",
        alt: "LinkedIn social media icon",
        href: "#",
        width: 15,
        height: 15,
      },
      {
        icon: "/assets/images/icon/instagrame2.svg",
        alt: "Instagram social media icon",
        href: "#",
        width: 15,
        height: 15,
      },
    ],
  },
];

export default function ContactBannerSection() {
  return (
    <section className="main-sec2 v2">
      <div className="page-banner">
        <div className="carousel-container">
          <div className="page-content">
            <span
              className="sub-title"
              data-aos="fade"
              data-aos-duration="900"
              data-aos-delay="300"
            >
              Contact Us
            </span>
            <h1
              className="title"
              data-aos="fade"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              Get in touch — we&rsquo;d love to hear from you
            </h1>
          </div>
          <div
            className="contact-info"
            data-aos="zoom-in"
            data-aos-duration="900"
            data-aos-delay="300"
          >
            <div className="row g-0">
              {contactCards.map((card) => (
                <div className="col-lg-3 col-md-6 col-sm-6" key={card.title}>
                  <div
                    className={`contact-block${card.cardClassName ? ` ${card.cardClassName}` : ""}`}
                  >
                    <Image
                      src={card.icon}
                      alt={card.iconAlt}
                      width={52}
                      height={52}
                    />
                    <h2
                      className={`title${card.titleClassName ? ` ${card.titleClassName}` : ""}`}
                    >
                      {card.title}
                    </h2>

                    {card.socialLinks ? (
                      <ul className="social-list2">
                        {card.socialLinks.map((social) => (
                          <li key={social.alt}>
                            <a href={social.href} title="">
                              <Image
                                src={social.icon}
                                alt={social.alt}
                                width={social.width}
                                height={social.height}
                              />
                            </a>
                          </li>
                        ))}
                      </ul>
                    ) : (
                      <p>{card.description}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}