import ArrowUpRightIcon from "@/assets/report/arrow-up-right.svg?react";
import DownloadIcon from "@/assets/report/download.svg?react";
import TrendingUpIcon from "@/assets/icons/trending-up.svg?react";
import { Link } from "react-router-dom";

export function KpiTransformationCtaCard() {
  return (
    <div
      className="rounded-2xl bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice p-8 md:p-12 text-center relative overflow-hidden animate-fade-in-up animation-delay-300"
      data-cta-card
    >
      <div className="relative">
        <div className="w-14 h-14 rounded-2xl bg-navy-950/10 flex items-center justify-center mx-auto mb-6 [&_svg]:block">
          <TrendingUpIcon width={28} height={28} className="text-navy-950" aria-hidden />
        </div>
        <h3 className="font-serif text-2xl md:text-3xl font-bold text-navy-950 mb-3 break-keep">
          Start Your Transformation
        </h3>
        <p className="body-16 text-navy-950/60 mb-8 max-w-xl mx-auto break-keep">
          INFINITH와 함께 데이터 기반 마케팅 전환을 시작하세요. 90일 안에 측정 가능한 성과를 만들어 드립니다.
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            to="/"
            className="inline-flex items-center gap-2 btn-primary font-semibold px-8 py-4 rounded-full hover:shadow-xl transition-all"
          >
            마케팅 기획
            <ArrowUpRightIcon width={18} height={18} aria-hidden />
          </Link>
          <button
            type="button"
            className="inline-flex items-center gap-2 bg-white border border-neutral-20 text-navy-950 font-semibold px-8 py-4 rounded-full hover:bg-neutral-10 shadow-sm hover:shadow-md transition-all cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed break-keep"
          >
            <DownloadIcon width={18} height={18} aria-hidden />
            리포트 다운로드
          </button>
        </div>
      </div>
    </div>
  );
}