sass-mohfarawati/components/home/contact-cta-section.tsx

import { ArrowUpRight, Mail } from "lucide-react";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { AppCard } from "@/components/ui/app-card";
import type { ContactCtaSectionCopy } from "./types";

type ContactCtaSectionProps = {
  copy: ContactCtaSectionCopy;
  contactHref: string;
};

export function ContactCtaSection({
  copy,
  contactHref,
}: ContactCtaSectionProps) {
  return (
    <section>
      <AppCard className="overflow-hidden">
        <div className="grid gap-6 rounded-nested border border-border/70 bg-background p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:p-10">
          <div className="space-y-4">
            <p className="eyebrow text-caption font-medium text-brand-primary">
              {copy.eyebrow}
            </p>
            <h2 className="max-w-3xl text-balance text-h2 text-foreground">
              {copy.title}
            </h2>
            <p className="max-w-2xl text-body-lg text-muted-foreground">
              {copy.description}
            </p>

            <div className="flex flex-wrap gap-8 pt-2">
              <div className="space-y-1">
                <p className="text-caption font-medium text-muted-foreground">{copy.emailLabel}</p>
                <a href={`mailto:${copy.emailValue}`} className="text-small text-foreground transition-colors hover:text-brand-primary">
                  {copy.emailValue}
                </a>
              </div>
              <div className="space-y-1">
                <p className="text-caption font-medium text-muted-foreground">{copy.availabilityLabel}</p>
                <p className="text-small text-foreground">{copy.availabilityValue}</p>
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-3 lg:justify-end">
            <Button asChild size="lg">
              <Link href={contactHref}>
                {copy.contactCta}
                <Mail className="h-4 w-4" />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <a href={copy.githubHref} target="_blank" rel="noreferrer">
                {copy.githubCta}
                <ArrowUpRight className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </AppCard>
    </section>
  );
}