import type { Metadata } from "next";
import { Section, Eyebrow } from "@/components/ui";
import { Icon, type IconName } from "@/components/icons";
import { ContactForm } from "@/components/contact-form";
import { site } from "@/content/site";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Get in touch with Phina Consultants Limited. Main office on Koinange Street, Rattansi Building, Nairobi. Call +254 112 125440 or email info@phinaconsultant.co.ke.",
};

const cards: { icon: IconName; label: string; lines: { text: string; href?: string }[] }[] = [
  {
    icon: "map-pin",
    label: "Main office",
    lines: [{ text: site.contact.address }, { text: "Nairobi, Kenya" }],
  },
  {
    icon: "phone",
    label: "Make a call",
    lines: [
      { text: site.contact.phone, href: site.contact.phoneHref },
      { text: site.contact.hours },
    ],
  },
  {
    icon: "mail",
    label: "Send a mail",
    lines: [
      { text: site.contact.email, href: `mailto:${site.contact.email}` },
      { text: site.contact.jobsEmail, href: `mailto:${site.contact.jobsEmail}` },
    ],
  },
];

export default function ContactPage() {
  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>Contact</Eyebrow>
          <h1 className="mt-5 font-display text-4xl font-bold tracking-tight text-ink-900 sm:text-5xl">
            Get in touch
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            Tell us what you are trying to solve in HR, screening or immigration and a
            consultant will get back to you within one business day.
          </p>
        </div>
      </section>

      <Section tone="white">
        <div className="grid gap-6 sm:grid-cols-3">
          {cards.map((card) => (
            <div
              key={card.label}
              className="rounded-2xl border border-ink-100 bg-cream p-6 shadow-card"
            >
              <span className="grid h-11 w-11 place-items-center rounded-xl bg-brand-700 text-white">
                <Icon name={card.icon} className="h-5 w-5" />
              </span>
              <h2 className="mt-4 font-display text-sm font-bold uppercase tracking-[0.12em] text-ink-900">
                {card.label}
              </h2>
              <div className="mt-2 space-y-1 text-sm text-ink-600">
                {card.lines.map((line) => (
                  <p key={line.text}>
                    {line.href ? (
                      <a href={line.href} className="hover:text-brand-700">
                        {line.text}
                      </a>
                    ) : (
                      line.text
                    )}
                  </p>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-14 grid gap-12 lg:grid-cols-[1fr_1.1fr] lg:items-start">
          <div>
            <h2 className="font-display text-2xl font-bold tracking-tight text-ink-900">
              Send us a message
            </h2>
            <p className="mt-2 text-sm text-ink-600">
              Fields marked <span className="text-brand-600">*</span> are required.
            </p>
            <div className="mt-6 overflow-hidden rounded-2xl border border-ink-100">
              <iframe
                title="Phina Consultants Limited office location"
                src={`https://www.google.com/maps?q=${site.contact.mapsQuery}&output=embed`}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                className="h-64 w-full border-0"
              />
            </div>
          </div>

          <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card sm:p-8">
            <ContactForm />
          </div>
        </div>
      </Section>
    </>
  );
}