export function CTABand({
  title,
  description,
  href,
  buttonLabel = "Learn more",
  variant = "default",
}: {
  title: string;
  description: string;
  href: string;
  buttonLabel?: string;
  variant?: "default" | "accent" | "dark";
}) {
  const variants = {
    default: "bg-[var(--color-surface)] text-[var(--color-heading)]",
    accent: "bg-[var(--color-accent)] text-white",
    dark: "bg-[var(--color-heading)] text-[var(--color-surface)]",
  };

  return (
    <section
      className={`border-t border-[var(--color-border)] py-20 md:py-28 ${variants[variant]}`}
    >
      <div className="container-xl text-center">
        <h2 className="mb-4 text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
          {title}
        </h2>
        <p
          className={`mx-auto mb-10 max-w-xl text-lg ${variant === "default" ? "text-[var(--color-text-muted)]" : "opacity-80"}`}
        >
          {description}
        </p>
        <a href={href} className="btn-primary">
          {buttonLabel}
        </a>
      </div>
    </section>
  );
}
