import { IconCalendar, IconCheck, IconRocket } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { FadeIn } from "@/components/ui/fade-in";
import { formatPrice, getFeaturedServices } from "@/data/services-catalog";

export async function ServicesCTA() {
  const t = await getTranslations("servicesCta");
  const featuredServices = getFeaturedServices();

  return (
    <section className="relative overflow-hidden py-12 sm:py-24 md:py-32">
      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main CTA */}
        <FadeIn className="mx-auto mb-8 max-w-5xl md:mb-16" y={20}>
          <div className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm sm:p-6 md:p-12">
            <div className="mb-4 flex flex-col items-start gap-4 sm:flex-row md:mb-6 md:gap-6">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 md:h-16 md:w-16">
                <IconRocket
                  className="h-6 w-6 text-[#FD105E] md:h-8 md:w-8"
                  strokeWidth={1.5}
                />
              </div>
              <div>
                <h2 className="mb-3 font-bold text-white text-xl sm:text-2xl md:mb-4 md:text-5xl">
                  {t("heading")}
                </h2>
                <p className="max-w-3xl text-base text-neutral-200 leading-relaxed md:text-xl">
                  {t("description")}
                </p>
              </div>
            </div>

            <div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-3">
              <div className="flex items-start gap-3">
                <IconCheck
                  className="mt-1 h-5 w-5 flex-shrink-0 text-[#FD105E]"
                  strokeWidth={2}
                />
                <p className="text-neutral-300 text-sm">
                  <span className="font-semibold text-white">
                    {t("check1Title")}
                  </span>{" "}
                  {t("check1Desc")}
                </p>
              </div>
              <div className="flex items-start gap-3">
                <IconCheck
                  className="mt-1 h-5 w-5 flex-shrink-0 text-[#FD105E]"
                  strokeWidth={2}
                />
                <p className="text-neutral-300 text-sm">
                  <span className="font-semibold text-white">
                    {t("check2Title")}
                  </span>{" "}
                  {t("check2Desc")}
                </p>
              </div>
              <div className="flex items-start gap-3">
                <IconCheck
                  className="mt-1 h-5 w-5 flex-shrink-0 text-[#FD105E]"
                  strokeWidth={2}
                />
                <p className="text-neutral-300 text-sm">
                  <span className="font-semibold text-white">
                    {t("check3Title")}
                  </span>{" "}
                  {t("check3Desc")}
                </p>
              </div>
            </div>

            <div className="flex flex-col items-center gap-4 sm:flex-row">
              <ContactButton className="shadow-[#FD105E]/20 shadow-lg hover:scale-105">
                <IconCalendar className="h-5 w-5" />
                {t("bookAudit")}
              </ContactButton>
              <a
                className="inline-flex items-center gap-2 rounded-xl border border-white/20 bg-transparent px-8 py-4 font-semibold text-white transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-white/5"
                href="#featured-services"
              >
                {t("viewServices")}
              </a>
            </div>
          </div>
        </FadeIn>

        {/* Featured Services */}
        <div className="mx-auto max-w-7xl" id="featured-services">
          <FadeIn className="mb-12 text-center">
            <h3 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:text-4xl">
              {t("featuredTitle")}{" "}
              <span className="text-[#FD105E]">{t("featuredTitleAccent")}</span>
            </h3>
            <p className="mx-auto max-w-2xl text-base text-neutral-200 md:text-lg">
              {t("featuredSubtitle")}
            </p>
          </FadeIn>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6">
            {featuredServices.map((service, index) => (
              <FadeIn
                className="group relative"
                delay={index * 0.1}
                duration={0.6}
                ease={[0.21, 0.47, 0.32, 0.98]}
                key={service.slug}
                viewportAmount={0.2}
              >
                <div className="relative h-full rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-6 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/50 hover:bg-[#1a1a1a]">
                  {/* Badge */}
                  <div className="mb-4 inline-block rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 px-3 py-1">
                    <span className="font-semibold text-[#FD105E] text-xs uppercase tracking-wide">
                      {service.category}
                    </span>
                  </div>

                  {/* Title */}
                  <h4 className="mb-3 font-bold text-white text-xl">
                    {service.title}
                  </h4>

                  {/* Description */}
                  <p className="mb-4 text-neutral-300 text-sm leading-relaxed">
                    {service.description}
                  </p>

                  {/* Deliverable */}
                  <div className="mb-4">
                    <p className="mb-2 font-semibold text-neutral-400 text-xs uppercase tracking-wide">
                      {t("deliverable")}
                    </p>
                    <p className="text-neutral-300 text-sm">
                      {service.deliverable}
                    </p>
                  </div>

                  {/* Price & Duration */}
                  <div className="mb-6 flex items-center justify-between border-[#333333] border-t pt-4">
                    <div>
                      <p className="mb-1 text-neutral-400 text-xs">
                        {t("duration")}
                      </p>
                      <p className="font-semibold text-sm text-white">
                        {service.duration}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="mb-1 text-neutral-400 text-xs">
                        {t("price")}
                      </p>
                      <p className="font-bold text-[#FD105E] text-lg">
                        {formatPrice(service.price, service.currency)}
                      </p>
                    </div>
                  </div>

                  {/* CTA Button */}
                  <ContactButton className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 px-6 py-3 font-semibold text-[#FD105E] transition-all duration-300 hover:border-[#FD105E] hover:bg-[#E00D54] hover:text-white group-hover:shadow-[#FD105E]/20 group-hover:shadow-lg">
                    <IconCalendar className="h-4 w-4" />
                    {t("bookService")}
                  </ContactButton>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}