import { Button } from "@/components/ui";
import { Icon } from "@/components/icons";
import { site } from "@/content/site";

export function CtaBand({
  title = "Contact us today for a consultation!",
  subtitle = "Tell us what you are trying to solve in HR, screening or immigration and we will map out the next step.",
}: {
  title?: string;
  subtitle?: string;
}) {
  return (
    <section className="bg-brand-700">
      <div className="container-page py-14 lg:py-16">
        <div className="flex flex-col items-start gap-6 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-2xl">
            <h2 className="font-display text-2xl font-bold tracking-tight text-white sm:text-3xl">
              {title}
            </h2>
            <p className="mt-3 text-brand-50/90">{subtitle}</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button href="/contact" variant="light" withArrow>
              Book a consultation
            </Button>
            <a
              href={site.contact.phoneHref}
              className="inline-flex items-center justify-center gap-2 rounded-full border border-white/30 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10"
            >
              <Icon name="phone" className="h-4 w-4" />
              {site.contact.phone}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}