import Link from "next/link";
import brand from "@/brand.config";

export function FinalCTA() {
  return (
    <section className="px-4 py-20">
      <div
        className="mx-auto max-w-6xl overflow-hidden rounded-[2rem] px-8 py-14 text-center md:px-16"
        style={{
          background: `linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 88%, #1A1812), var(--brand-accent-dark))`,
        }}
      >
        <h2 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
          Travel light. Land connected.
        </h2>
        <p className="mx-auto mt-3 max-w-lg text-sm text-white/85">
          {brand.tagline} Real humans on WhatsApp, 24/7.
        </p>
        <Link
          href="/shop"
          className="mt-8 inline-flex rounded-full bg-white px-7 py-3 text-sm font-semibold text-sand-900 hover:bg-sand-50"
        >
          Browse plans
        </Link>
      </div>
    </section>
  );
}