import { IconCalendar } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";

interface Metric {
  delay: number;
  label: string;
  value: string;
}

interface BreakthroughSectionProps {
  attribution?: string;
  ctaText?: string;
  description?: string;
  gradientDirection?: string;
  heading?: string;
  highlightText?: string;
  metrics?: Metric[];
  quote?: string;
}

export async function BreakthroughSection({
  heading,
  highlightText,
  description,
  metrics: metricsProp,
  quote,
  attribution,
  ctaText,
  gradientDirection = "bg-gradient-to-br",
}: BreakthroughSectionProps) {
  const t = await getTranslations("breakthrough");

  const metrics = metricsProp ?? [
    { value: "-80%", label: t("metricLoadTime"), delay: 0.1 },
    { value: "+150%", label: t("metricConversionRate"), delay: 0.2 },
    { value: "5x", label: t("metricContentUpdates"), delay: 0.3 },
  ];

  const displayHeading = heading ?? t("heading");
  const displayHighlight = highlightText ?? t("highlightText");
  const displayDescription = description ?? t("description");
  const displayQuote = quote ?? t("quote");
  const displayAttribution = attribution ?? t("attribution");
  const displayCta = ctaText ?? t("cta");

  return (
    <section
      className={`relative py-12 sm:py-24 md:py-32 ${gradientDirection} mb-0 overflow-hidden from-[#000] to-[#1A2428]`}
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <FadeIn>
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl md:mb-8 md:text-5xl">
              {displayHeading}
              <br />
              <span className="text-[#FD105E]">{displayHighlight}</span>
            </h2>
            <p className="mx-auto mb-8 max-w-3xl text-base text-neutral-400 md:mb-12 md:text-xl">
              {displayDescription}
            </p>
          </FadeIn>

          {/* Metrics Grid */}
          <div className="mb-8 grid grid-cols-1 gap-4 md:mb-12 md:grid-cols-3 md:gap-6">
            {metrics.map((metric, _index) => (
              <FadeIn
                className="group"
                delay={metric.delay}
                duration={0.6}
                key={metric.label}
                scale={0.8}
              >
                <div className="rounded-2xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/30 hover:bg-white/10 md:p-8">
                  <div className="mb-3 font-bold text-3xl text-[#FD105E] transition-transform duration-300 group-hover:scale-110 md:text-5xl">
                    {metric.value}
                  </div>
                  <div className="font-medium text-neutral-300 text-sm md:text-base">
                    {metric.label}
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>

          {/* Case Study Details */}
          <FadeIn
            className="mb-8 rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm sm:p-6 md:p-12"
            delay={0.4}
            y={20}
          >
            <div className="grid grid-cols-1 items-center gap-4 md:grid-cols-2 md:gap-8">
              <div className="text-center md:text-left">
                <p className="mb-4 text-lg text-neutral-400 leading-relaxed">
                  "{displayQuote}"
                </p>
                <div className="mt-4 text-neutral-500 text-sm">
                  {displayAttribution}
                </div>
              </div>
              <div className="hidden w-full items-center justify-center md:flex">
                <svg
                  aria-hidden="true"
                  className="mx-auto h-[160px] w-[160px] lg:h-[200px] lg:w-[200px]"
                  fill="none"
                  height="200"
                  role="presentation"
                  viewBox="0 0 200 200"
                  width="200"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  {" "}
                  <g clipPath="url(#clip0_231_793)">
                    {" "}
                    <path
                      clipRule="evenodd"
                      d="M50 0H200V50V150L150 200L150 50H0L50 0ZM0 165.067V100L65.067 100L0 165.067ZM100 200H35.7777L100 135.778L100 200Z"
                      fill="url(#paint0_linear_231_793)"
                      fillRule="evenodd"
                    />{" "}
                  </g>{" "}
                  <defs>
                    {" "}
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear_231_793"
                      x1="177"
                      x2="39.5"
                      y1="-9.23648e-06"
                      y2="152.5"
                    >
                      {" "}
                      <stop stopColor="#000" />{" "}
                      <stop offset="1" stopColor="#FD105E" />{" "}
                    </linearGradient>{" "}
                    <clipPath id="clip0_231_793">
                      {" "}
                      <rect fill="white" height="200" width="200" />{" "}
                    </clipPath>{" "}
                  </defs>{" "}
                </svg>
              </div>
            </div>
          </FadeIn>

          {/* CTA Button */}
          <FadeIn delay={0.6} y={0}>
            <ContactButton className="shadow-[#FD105E]/20 shadow-lg hover:shadow-[#FD105E]/30 hover:shadow-xl">
              <IconCalendar className="h-4 w-4" />
              {displayCta}
            </ContactButton>
          </FadeIn>
        </div>
      </div>

      {/* Decorative bottom gradient */}
      <div
        className="absolute bottom-0 left-0 z-0 h-px w-full"
        style={{
          background:
            "radial-gradient(50% 50% at 50%, rgba(253,16,94,0.24) 0%, rgba(253,16,94,0) 100%)",
        }}
      />
    </section>
  );
}