"use client";

import { Card, CardBody, CardHeader } from "@nextui-org/react";

import TypeformEmbed from "@/components/pages/client/typeform/home";
import type { ContactUsContent } from "@/lib/contact-us-ghost-content";

type ContactList = ContactUsContent["contactDetails"]["contacts"][number];

const ContactCard = ({ title, email }: ContactList) => {
  const [user, domain] = email.split("@");
  const [domainName, ...tld] = domain.split(".");

  const handleClick = () => {
    window.location.href = `mailto:${email}`;
  };

  return (
    <Card
      disableAnimation
      className="bg-gray-400/10 dark:bg-white/5 text-black dark:text-white rounded-xl p-4 flex flex-col justify-between shadow-none"
      isHoverable={false}
      isPressable={false}
    >
      <CardHeader className="font-inter font-bold flex justify-center items-center text-center p-1">
        {title}
      </CardHeader>
      <CardBody className="font-noto text-gray-800 flex justify-center items-center text-center p-1">
        <button
          aria-label={`Send email to ${email}`}
          className="underline underline-offset-2 decoration-dotted cursor-pointer text-midnightBlue font-semibold"
          onClick={handleClick}
        >
          <span aria-hidden="true">
            {user}@<span style={{ display: "none" }}>decoy.</span>
            {domainName}.<span style={{ display: "none" }}>decoy.</span>
            {tld.join(".")}
          </span>
        </button>
      </CardBody>
    </Card>
  );
};

function ContactUs({ content }: { content: ContactUsContent }) {
  return (
    <div className="flex flex-col justify-center items-center py-12 space-y-8">
      <div className="space-y-4 text-center max-w-4xl px-12 lg:px-0">
        <h2 className="font-inter font-black text-4xl lg:text-6xl">
          {content.hero}
        </h2>
      </div>
      <TypeformEmbed />
      <h3 className="text-center font-noto text-lg px-8 lg:px-0">
        {content.contactDetails.prompt}
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {content.contactDetails.contacts.map((section, index) => (
          <ContactCard key={index} {...section} />
        ))}
      </div>
    </div>
  );
}

export default ContactUs;