import { IconCalendar } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { callToActionData } from "@/data/call-to-action";

export async function CallToAction() {
  const t = await getTranslations("cta");
  if (!callToActionData.enable) {
    return null;
  }

  return (
    <section className="py-12 sm:py-24 md:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm sm:p-6 md:p-12">
          <div className="grid grid-cols-1 items-center gap-6 md:grid-cols-12 md:gap-10">
            <div className="order-2 flex items-center justify-center md:col-span-5">
              <svg
                aria-hidden="true"
                className="w-full max-w-[320px] md:max-w-none"
                fill="none"
                viewBox="0 0 400 400"
                xmlns="http://www.w3.org/2000/svg"
              >
                {/* Background grid */}
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="60"
                  x2="60"
                  y1="60"
                  y2="340"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="145"
                  x2="145"
                  y1="60"
                  y2="340"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="230"
                  x2="230"
                  y1="60"
                  y2="340"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="315"
                  x2="315"
                  y1="60"
                  y2="340"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="60"
                  x2="340"
                  y1="130"
                  y2="130"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="60"
                  x2="340"
                  y1="200"
                  y2="200"
                />
                <line
                  stroke="rgba(255,255,255,0.05)"
                  strokeWidth="1"
                  x1="60"
                  x2="340"
                  y1="270"
                  y2="270"
                />

                {/* Bar chart - before (gray, shorter) */}
                <rect
                  fill="rgba(255,255,255,0.1)"
                  height="100"
                  rx="4"
                  width="30"
                  x="80"
                  y="240"
                />
                <rect
                  fill="rgba(255,255,255,0.1)"
                  height="140"
                  rx="4"
                  width="30"
                  x="165"
                  y="200"
                />
                <rect
                  fill="rgba(255,255,255,0.1)"
                  height="120"
                  rx="4"
                  width="30"
                  x="250"
                  y="220"
                />

                {/* Bar chart - after (gradient pink, taller) */}
                <rect
                  fill="url(#ctaGradient)"
                  height="180"
                  rx="4"
                  width="30"
                  x="115"
                  y="160"
                />
                <rect
                  fill="url(#ctaGradient)"
                  height="230"
                  rx="4"
                  width="30"
                  x="200"
                  y="110"
                />
                <rect
                  fill="url(#ctaGradient)"
                  height="250"
                  rx="4"
                  width="30"
                  x="285"
                  y="90"
                />

                {/* Growth line */}
                <path
                  d="M95 230 L130 150 L215 100 L300 80"
                  fill="none"
                  stroke="#FD105E"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="3"
                />

                {/* Data points */}
                <circle cx="95" cy="230" fill="#FD105E" r="5" />
                <circle cx="130" cy="150" fill="#FD105E" r="5" />
                <circle cx="215" cy="100" fill="#FD105E" r="5" />
                <circle
                  cx="300"
                  cy="80"
                  fill="#FD105E"
                  r="6"
                  stroke="rgba(253,16,94,0.3)"
                  strokeWidth="8"
                />

                {/* Arrow up */}
                <path
                  d="M300 70 L300 50 M292 58 L300 50 L308 58"
                  stroke="#FD105E"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                />

                {/* Labels */}
                <text
                  fill="rgba(255,255,255,0.4)"
                  fontFamily="sans-serif"
                  fontSize="11"
                  textAnchor="middle"
                  x="95"
                  y="365"
                >
                  Q1
                </text>
                <text
                  fill="rgba(255,255,255,0.4)"
                  fontFamily="sans-serif"
                  fontSize="11"
                  textAnchor="middle"
                  x="180"
                  y="365"
                >
                  Q2
                </text>
                <text
                  fill="rgba(255,255,255,0.4)"
                  fontFamily="sans-serif"
                  fontSize="11"
                  textAnchor="middle"
                  x="265"
                  y="365"
                >
                  Q3
                </text>

                {/* Percentage badge */}
                <rect
                  fill="#FD105E"
                  height="24"
                  rx="12"
                  width="60"
                  x="300"
                  y="30"
                />
                <text
                  fill="white"
                  fontFamily="sans-serif"
                  fontSize="11"
                  fontWeight="bold"
                  textAnchor="middle"
                  x="330"
                  y="46"
                >
                  +150%
                </text>

                <defs>
                  <linearGradient id="ctaGradient" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#FD105E" />
                    <stop offset="100%" stopColor="#FD105E" stopOpacity="0.3" />
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <div className="order-1 md:col-span-7">
              <h2 className="mb-4 font-bold text-2xl text-white tracking-tight sm:text-3xl md:text-4xl">
                {t("title")}
              </h2>
              <p className="mb-6 text-base text-neutral-300 md:text-lg">
                {t("description")}
              </p>
              {callToActionData.button.enable && (
                <ContactButton href={callToActionData.button.link}>
                  {t("button")}
                  <IconCalendar className="h-5 w-5" />
                </ContactButton>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}