import {
  Sparkles,
  ArrowRight,
  MessageCircle,
} from "lucide-react";

import RollingCourseDate from "@/components/courses/RollingCourseDate";
import { finalCtaData } from "@/data/courses/certificates/advanced-fluency/finalCtaData";

export default function FinalCtaSection({ data = finalCtaData }) {
  const hasThreeButtons = data.buttons.length === 3;

  return (
    <section className="py-16 bg-gradient-to-br from-[#4A141E] via-[#3B0F18] to-[#2B0A11]">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <Sparkles className="w-12 h-12 text-[#D4AF37] mx-auto mb-5" />

        <h2 className="text-3xl md:text-4xl font-black text-[#F6EFE9] mb-4">
          {data.title}
        </h2>

        <p className="text-base md:text-lg text-[#E6D3B1] mb-8 leading-relaxed">
          <RollingCourseDate>{data.description}</RollingCourseDate>
        </p>

        {data.note ? (
          <p className="text-[#E6D3B1]/60 mb-10 text-sm">{data.note}</p>
        ) : null}

        <div
          className={
            hasThreeButtons
              ? "grid w-full grid-cols-3 gap-2 sm:gap-3"
              : "flex flex-wrap justify-center gap-4"
          }
        >
          {data.buttons.map((button) => {
            const isPrimary = button.variant === "primary";

            return (
              <a
                key={button.label}
                href={button.href}
                target={isPrimary ? undefined : "_blank"}
                rel={isPrimary ? undefined : "noopener noreferrer"}
                className={
                  isPrimary
                    ? `group min-w-0 rounded-xl font-black bg-[#8B1C1C] text-white shadow-xl hover:shadow-[#D4AF37]/50 hover:scale-105 transition-all duration-300 flex items-center justify-center gap-1.5 border-2 border-[#8B1C1C] hover:border-[#D4AF37] ${
                        hasThreeButtons
                          ? "w-full px-1.5 py-3 text-[10px] sm:px-3 sm:text-xs md:text-sm"
                          : "px-6 py-3 text-base"
                      }`
                    : `min-w-0 rounded-xl font-black bg-white/10 text-[#F6EFE9] hover:bg-white/20 border-2 border-[#E6D3B1]/30 backdrop-blur-sm flex items-center justify-center gap-1.5 transition-all duration-300 ${
                        hasThreeButtons
                          ? "w-full px-1.5 py-3 text-[10px] sm:px-3 sm:text-xs md:text-sm"
                          : "px-6 py-3 text-base"
                      }`
                }
              >
                {!isPrimary && <MessageCircle className="h-4 w-4 shrink-0" />}
                <span className="min-w-0 text-center">{button.label}</span>
                {isPrimary && (
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                )}
              </a>
            );
          })}
        </div>

        {data.contact.compact ? (
          <p className="mt-6 text-[#E6D3B1]/70 text-sm">
            <a
              href={data.contact.phoneHref}
              className="text-[#D4AF37] font-semibold hover:underline"
            >
              {data.contact.phoneText}
            </a>{" "}
            <span>{data.labels?.separator ?? "·"}</span>{" "}
            <a
              href={data.contact.emailHref}
              className="text-[#D4AF37] font-semibold hover:underline"
            >
              {data.contact.emailText}
            </a>
          </p>
        ) : (
          <p className="mt-6 text-[#E6D3B1]/70 text-sm">
            Call us:{" "}
            <a
              href={data.contact.phoneHref}
              className="text-[#D4AF37] font-semibold hover:underline"
            >
              {data.contact.phoneText}
            </a>{" "}
            or email{" "}
            <a
              href={data.contact.emailHref}
              className="text-[#D4AF37] font-semibold hover:underline"
            >
              {data.contact.emailText}
            </a>
          </p>
        )}

        {data.footerLink?.label ? (
          <a
            href={data.footerLink.href}
            className="mt-5 inline-flex text-sm font-semibold text-[#D4AF37] hover:underline"
          >
            {data.footerLink.label}
          </a>
        ) : null}
      </div>
    </section>
  );
}