import { FiGlobe, FiMail, FiSmartphone } from "react-icons/fi";
import ButtonLink from "../ButtonLink";

const contactItems = [
  {
    icon: FiMail,
    label: "contato@psiuclass.com.br",
    href: "mailto:contato@psiuclass.com.br",
  },
  {
    icon: FiSmartphone,
    label: "@psiuclass",
    href: "#",
  },
  {
    icon: FiGlobe,
    label: "psiuclass.com.br",
    href: "https://psiuclass.com.br",
  },
];

export default function ContactSection() {
  return (
    <section
      id="contato"
      aria-labelledby="contact-title"
      className="py-15 sm:py-28 lg:py-24"
    >
      <div className="mx-auto w-[calc(100%-4rem)] max-w-(--foundation-container)">
        <div
          className="grid grid-cols-1 items-center gap-10 rounded-(--foundation-radius-xl) bg-linear-to-br from-(--foundation-primary) to-(--foundation-primary-light) p-7 
            text-(--foundation-white) md:grid-cols-[1.3fr_1fr] md:p-14"
        >
    
          <div>
            <h2
              id="contact-title"
              className="max-w-none text-[clamp(28px,3.4vw,42px)] font-bold leading-tight tracking-[-0.02em] text-(--foundation-white)"
            >
              Vamos conversar sobre como apoiar?
            </h2>

            <p className="mt-3.5 max-w-110 text-[15.5px] leading-relaxed text-white/80">
              Buscamos parceiros, apoiadores e instituições que acreditam que
              a educação pode e deve ser mais acessível. Agende uma
              conversa de 20 minutos com a equipe.
            </p>
          </div>

          {/* Informações de contato */}
          <div  className="rounded-(--foundation-radius-lg) border border-white/20 bg-white/10 p-4 sm:p-7">
            <div className="flex flex-col">
              {contactItems.map((item) => {
                const Icon = item.icon;

                return (
                  <a
                    key={item.label}
                    href={item.href}
                    className="mb-4.5 flex min-h-7 items-center gap-3 text-[14.5px] text-white transition-opacity last:mb-0 hover:opacity-80 focus-visible:rounded-md 
                     focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white"
                  >
                    <Icon
                      size={18}
                      strokeWidth={1.6}
                      aria-hidden="true"
                      className="min-h-5 min-w-5"
                    />

                    <span className="break-all">{item.label}</span>
                  </a>
                );
              })}
            </div>

            <ButtonLink
              href="mailto:contato@psiuclass.com.br"
              className="mt-2 w-full bg-(--foundation-white)! text-(--foundation-primary)!"
            >
              Agende uma conversa
            </ButtonLink>
          </div>
        </div>
      </div>
    </section>
  );
}