import { IconArrowRight, IconCalendar } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";
import { PerformanceMetricsTicker } from "@/components/ui/performance-metrics-ticker";
import { PillarCard } from "@/components/ui/pillar-card";
import { SecondaryButton } from "@/components/ui/secondary-button";
import { pillarsData } from "@/data/why-choose-us";

export async function WhyChooseUs() {
  const t = await getTranslations("whyChooseUs");

  return (
    <section
      className="relative overflow-hidden py-12 sm:py-24 md:py-32"
      id="why-choose-us"
    >
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="section-header mb-8 text-center md:mb-16">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            {t("heading")}
          </h2>
          <p className="mx-auto max-w-3xl text-base text-neutral-300 md:text-lg">
            {t("subtitle")}
          </p>
        </div>

        {/* Performance Metrics Ticker */}
        <div className="performance-ticker">
          <PerformanceMetricsTicker />
        </div>

        {/* Pillars Grid */}
        <div className="pillars-grid mb-8 grid gap-4 md:mb-16 md:gap-6 lg:grid-cols-3 lg:items-stretch">
          {pillarsData.map((pillar, index) => (
            <div className="pillar-wrapper" data-index={index} key={pillar.id}>
              <PillarCard pillar={pillar} />
            </div>
          ))}
        </div>

        {/* CTA Section - Modern Grid Style */}
        <div className="cta-section">
          <div className="relative z-20 my-10 grid grid-cols-1 justify-start overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm md:my-20 md:grid-cols-3">
            {/* Grid Lines */}
            <div className="absolute top-0 left-[-200px] z-30 h-[1px] w-[calc(100%+400px)] bg-[linear-gradient(to_right,rgba(255,255,255,0.2),rgba(255,255,255,0.2)_50%,transparent_0,transparent)] [background-size:5px_1px]" />
            <div className="absolute bottom-0 left-[-200px] z-30 h-[1px] w-[calc(100%+400px)] bg-[linear-gradient(to_right,rgba(255,255,255,0.2),rgba(255,255,255,0.2)_50%,transparent_0,transparent)] [background-size:5px_1px]" />
            <div className="absolute top-[-80px] left-0 z-30 h-[calc(100%+160px)] w-[1px] bg-[linear-gradient(to_bottom,rgba(255,255,255,0.2),rgba(255,255,255,0.2)_50%,transparent_0,transparent)] [background-size:1px_5px]" />
            <div className="absolute top-[-80px] right-0 z-30 h-[calc(100%+160px)] w-[1px] bg-[linear-gradient(to_bottom,rgba(255,255,255,0.2),rgba(255,255,255,0.2)_50%,transparent_0,transparent)] [background-size:1px_5px]" />

            {/* Content */}
            <div className="p-4 sm:p-6 md:col-span-2 md:p-14">
              <h2 className="text-left font-medium text-neutral-200 text-xl tracking-tight md:text-3xl">
                {t("ctaHeading")}{" "}
                <span className="font-bold text-white">
                  {t("ctaHeadingBold")}
                </span>
                ?
              </h2>
              <p className="mt-4 max-w-lg text-left font-medium text-lg text-neutral-200 tracking-tight md:text-xl">
                {t("ctaSubtitle")}
              </p>

              <div className="mt-8 flex flex-col items-stretch sm:flex-row sm:items-center sm:gap-4">
                <ContactButton className="hover:scale-[1.02] hover:shadow-[#FD105E]/25 hover:shadow-lg">
                  <span>{t("ctaPrimary")}</span>
                  <IconCalendar className="h-5 w-5" />
                </ContactButton>
                <SecondaryButton
                  className="mt-4 sm:mt-0"
                  href="/services"
                  icon={IconArrowRight}
                >
                  {t("ctaSecondary")}
                </SecondaryButton>
              </div>
            </div>

            {/* Testimonial */}
            <div className="border-white/20 border-t border-dashed p-4 sm:p-6 md:border-t-0 md:border-l md:p-14">
              <p className="text-base text-neutral-200">
                &ldquo;{t("testimonialQuote")}&rdquo;
              </p>
              <div className="mt-4 flex flex-col items-start gap-1 text-sm">
                <p className="font-bold text-neutral-200">
                  {t("testimonialName")}
                </p>
                <p className="text-neutral-400">{t("testimonialRole")}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}