import { IconCalendar, IconCheck } 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 ComparisonFeature {
  label: string;
  light: boolean | string;
  pro: boolean | string;
}

function renderCell(value: boolean | string) {
  if (typeof value !== "boolean") {
    return (
      <span className="font-semibold text-neutral-300 text-sm">{value}</span>
    );
  }
  if (value) {
    return <IconCheck className="h-5 w-5 text-[#FD105E]" strokeWidth={2.5} />;
  }
  return <span className="text-neutral-600">—</span>;
}

const features: ComparisonFeature[] = [
  { label: "Lighthouse Performance Audit", light: true, pro: true },
  { label: "Core Web Vitals Analysis", light: true, pro: true },
  { label: "SEO Structure Baseline", light: true, pro: true },
  { label: "PDF Report + Recommendations", light: true, pro: true },
  { label: "Delivery Time", light: "3 days", pro: "7-10 days" },
  { label: "API Latency Heatmap", light: false, pro: true },
  { label: "Posthog Event Flow Analysis", light: false, pro: true },
  { label: "Feature Flags SEO Impact", light: false, pro: true },
  {
    label: "Marketing Tracking Audit (GA4/Meta/Posthog)",
    light: false,
    pro: true,
  },
  { label: "ROI Analysis & Migration Plan", light: false, pro: true },
  { label: "Technical Action Plan with Timeline", light: false, pro: true },
  { label: "Post-Audit Support (30 days)", light: false, pro: true },
];

export async function AuditsComparison() {
  const t = await getTranslations("auditsComparison");

  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">
        {/* Header */}
        <div className="mx-auto mb-8 max-w-4xl text-center md:mb-16">
          <FadeIn>
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl md:text-5xl">
              {t("titleLine1")}
              <br />
              <span className="text-[#FD105E]">{t("titleLine2")}</span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-lg">
              {t("subtitle")}
            </p>
          </FadeIn>
        </div>

        {/* Comparison Table */}
        <FadeIn className="mx-auto max-w-5xl" delay={0.2}>
          <div className="relative overflow-hidden rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 backdrop-blur-sm">
            {/* Header Row */}
            <div className="grid grid-cols-3 gap-2 border-[#333333] border-b bg-[#1a1a1a] p-3 md:gap-4 md:p-6">
              <div className="col-span-1" />
              <div className="text-center">
                <h3 className="mb-1 font-bold text-sm text-white md:mb-2 md:text-xl">
                  {t("lightAudit")}
                </h3>
                <p className="font-bold text-[#FD105E] text-lg md:text-2xl">
                  $199
                </p>
                <p className="mt-1 text-[10px] text-neutral-400 md:text-xs">
                  {t("fastDiagnostic")}
                </p>
              </div>
              <div className="text-center">
                <h3 className="mb-1 font-bold text-sm text-white md:mb-2 md:text-xl">
                  {t("proAudit")}
                </h3>
                <p className="font-bold text-[#FD105E] text-lg md:text-2xl">
                  $1,200-2,000
                </p>
                <p className="mt-1 text-[10px] text-neutral-400 md:text-xs">
                  {t("comprehensiveAnalysis")}
                </p>
              </div>
            </div>

            {/* Feature Rows */}
            <div className="divide-y divide-[#333333]">
              {features.map((feature) => (
                <div
                  className="grid grid-cols-3 gap-2 p-2 transition-colors duration-200 hover:bg-[#1a1a1a]/50 md:gap-4 md:p-4"
                  key={feature.label}
                >
                  <div className="col-span-1 flex items-center text-neutral-200 text-xs md:text-sm">
                    {feature.label}
                  </div>
                  <div className="flex items-center justify-center">
                    {renderCell(feature.light)}
                  </div>
                  <div className="flex items-center justify-center">
                    {renderCell(feature.pro)}
                  </div>
                </div>
              ))}
            </div>

            {/* CTA Row */}
            <div className="grid grid-cols-3 gap-2 border-[#333333] border-t bg-[#1a1a1a] p-3 md:gap-4 md:p-6">
              <div className="col-span-1" />
              <div className="flex justify-center">
                <ContactButton className="hover:scale-105">
                  <IconCalendar className="h-4 w-4" />
                  {t("bookLight")}
                </ContactButton>
              </div>
              <div className="flex justify-center">
                <ContactButton className="hover:scale-105">
                  <IconCalendar className="h-4 w-4" />
                  {t("bookPro")}
                </ContactButton>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}