/**
 * BlogCTA - Call-to-action section for blog pages
 *
 * Displays a dark-themed CTA with primary and secondary action buttons.
 */

import Link from "next/link";
import { BLOG_COLORS, BLOG_STYLES, SECTION_NUMBERS } from "@/lib/blog.config";

export interface BlogCTAProps {
  /** Language for localization */
  lang: "ar" | "en";
  /** Translations for display text */
  translations: {
    ctaTitle: string;
    ctaDescription: string;
    ctaPrimary: string;
    ctaSecondary: string;
  };
}

export default function BlogCTA({ lang, translations }: BlogCTAProps) {
  const isAr = lang === "ar";

  return (
    <section
      className="py-24 md:py-32"
      style={{ backgroundColor: BLOG_COLORS.bgSecondary }}
      role="complementary"
      aria-labelledby="cta-heading"
    >
      <div className="mx-auto max-w-7xl px-6">
        <div
          className="p-12 md:p-20"
          style={{ backgroundColor: BLOG_COLORS.bgDark }}
        >
          <div className="max-w-3xl mx-auto text-center">
            {/* Section marker */}
            <div className="flex items-center justify-center gap-3 mb-8">
              <span className={BLOG_STYLES.sectionMarker} dir="ltr">
                {SECTION_NUMBERS.cta}
              </span>
              <div className={BLOG_STYLES.dividerLine} />
            </div>

            <h2
              id="cta-heading"
              className="text-4xl md:text-5xl font-bold text-white leading-tight mb-6"
            >
              {translations.ctaTitle}
            </h2>
            <p className="text-lg md:text-xl text-white/70 mb-10">
              {translations.ctaDescription}
            </p>

            <div className="flex flex-wrap items-center justify-center gap-4">
              {/* Primary CTA */}
              <Link
                href={`/${lang}/demo`}
                className={BLOG_STYLES.buttonPrimary}
              >
                <span className="relative z-10">{translations.ctaPrimary}</span>
                <ArrowIcon direction={isAr ? "left" : "right"} />
                <div
                  className="absolute inset-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"
                  style={{ backgroundColor: BLOG_COLORS.primaryHover }}
                />
              </Link>

              {/* Secondary CTA */}
              <Link
                href={`/${lang}/pricing`}
                className={BLOG_STYLES.buttonSecondary}
              >
                {translations.ctaSecondary}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/** Arrow icon for CTA buttons */
function ArrowIcon({ direction }: { direction: "left" | "right" }) {
  const path =
    direction === "left" ? "M19 12H5M12 5l-7 7 7 7" : "M5 12h14M12 5l7 7-7 7";

  return (
    <svg
      className="relative z-10 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      aria-hidden="true"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d={path}
      />
    </svg>
  );
}