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

interface CTASectionProps {
  title?: string;
  subtitle?: string;
  accent?: "blue" | "green";
}

export default function CTASection({
  title = "Готовы обсудить проект?",
  subtitle = "Расскажите, что нужно — предложим решение и сроки в течение рабочего дня.",
  accent = "blue",
}: CTASectionProps) {
  const isGreen = accent === "green";
  return (
    <section className="px-6 py-20">
      <div
        className={`mx-auto flex max-w-4xl flex-col items-start justify-between gap-6 rounded-3xl border p-10 sm:flex-row sm:items-center ${
          isGreen
            ? "border-green-500/20 bg-green-500/[0.04]"
            : "border-blue-500/20 bg-blue-500/[0.04]"
        }`}
      >
        <div>
          <h2 className="font-display text-2xl font-medium text-ink-100">
            {title}
          </h2>
          <p className="mt-2 max-w-md text-ink-500">{subtitle}</p>
        </div>
        <Link
          href="/contacts"
          className={`inline-flex shrink-0 items-center gap-1.5 rounded-full px-6 py-3 font-medium text-base-950 transition-transform hover:scale-[1.03] ${
            isGreen ? "bg-green-400" : "bg-blue-400"
          }`}
        >
          Связаться с нами
          <ArrowUpRight size={18} />
        </Link>
      </div>
    </section>
  );
}