import Link from "next/link";
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import { companyData } from "@/data/companyData";
import styles from "./ContactCtaSection.module.css";
import { contactCtaData, type ContactInfo } from "./ContactCtaData";

function resolveCompanyContact(
  item: Extract<ContactInfo, { type: "company" }>,
) {
  if (item.contactKey === "phone") {
    return {
      label: companyData.contact.phone.display,
      href: `tel:${companyData.contact.phone.value}`,
    };
  }

  if (item.contactKey === "email") {
    const email = `${companyData.contact.email.user}@${companyData.contact.email.domain}`;

    return {
      label: email,
      href: `mailto:${email}`,
    };
  }

  if (item.contactKey === "openingHours") {
    return {
      label: companyData.contact.openingHours.display,
    };
  }

  return null;
}

export default function ContactCtaSection() {
  const { heading, lead, buttonLabel, buttonHref, contacts } = contactCtaData;

  return (
    <section className={styles.section} aria-labelledby="contact-cta-heading">
      <div className={styles.inner}>
        <div className={styles.card}>
          <div className={styles.top}>
            <div className={styles.text}>
              <h2 id="contact-cta-heading" className={styles.heading}>
                {heading}
              </h2>
              <p className={styles.lead}>{lead}</p>
            </div>

            <Link href={buttonHref} className="btn btn--filled-inverse">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={16} weight="bold" />
              </span>
              {buttonLabel}
            </Link>
          </div>

          <hr className={styles.divider} aria-hidden="true" />

          <div className={styles.contactRow}>
            {contacts.map((item) => {
              const icon = (
                <item.icon size={20} weight="regular" aria-hidden="true" />
              );

              if (item.type === "company") {
                const resolved = resolveCompanyContact(item);

                if (!resolved) return null;

                return (
                  <a
                    key={item.contactKey}
                    href={resolved.href}
                    className={styles.contactItem}
                    aria-label={resolved.label}
                  >
                    {icon}
                    {resolved.label}
                  </a>
                );
              }

              if (item.href) {
                return (
                  <a
                    key={item.label}
                    href={item.href}
                    className={styles.contactItem}
                    aria-label={item.label}
                  >
                    {icon}
                    {item.label}
                  </a>
                );
              }

              return (
                <span key={item.label} className={styles.contactItem}>
                  {icon}
                  {item.label}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}