import {
  IconCalendar,
  IconCrown,
  IconRocket,
  IconShieldCheck,
} 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 PricingTier {
  badge?: string;
  ctaLabel: string;
  description: string;
  featured?: boolean;
  highlights: string[];
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  price: string;
  title: string;
}

const tiers: PricingTier[] = [
  {
    icon: IconShieldCheck,
    title: "Essential",
    price: "$349",
    description:
      "A focused diagnostic for sites that need quick, actionable fixes. Perfect for small e-commerce stores or SaaS landing pages looking to identify their biggest conversion killers fast.",
    ctaLabel: "Book My CRO Audit",
    highlights: [
      "Core Web Vitals assessment (LCP, INP, CLS)",
      "Heatmap & scroll depth analysis (top 5 pages)",
      "Conversion funnel mapping with drop-off rates",
      "Mobile vs desktop performance comparison",
      "Prioritized fix list with estimated revenue impact",
      "PDF report delivered in 5 business days",
    ],
  },
  {
    icon: IconRocket,
    title: "Comprehensive",
    price: "$699",
    description:
      "The full diagnostic for growing businesses. Includes everything in Essential plus deep behavioral analysis, checkout flow audit, and a 30/60/90-day optimization roadmap with ROI projections.",
    badge: "BEST VALUE",
    ctaLabel: "Get the Full Audit",
    highlights: [
      "Everything in Essential",
      "Session recording analysis (50+ sessions reviewed)",
      "Checkout/signup flow teardown with friction scoring",
      "A/B test recommendations with hypothesis framework",
      "Competitor UX benchmarking (3 competitors)",
      "30/60/90-day action plan with ROI projections",
      "30-minute strategy call to review findings",
    ],
    featured: true,
  },
  {
    icon: IconCrown,
    title: "Enterprise",
    price: "$1,499",
    description:
      "For high-traffic e-commerce stores and SaaS platforms where every 0.1% conversion improvement means thousands in revenue. White-glove analysis with ongoing support.",
    ctaLabel: "Talk to an Expert",
    highlights: [
      "Everything in Comprehensive",
      "Full-site heatmap analysis (all pages)",
      "Custom analytics dashboard setup",
      "User segmentation & persona-based analysis",
      "Revenue attribution modeling",
      "Accessibility audit (WCAG 2.1 compliance)",
      "60-day Slack support for implementation questions",
      "Monthly follow-up call (2 months)",
    ],
  },
];

export async function CroAuditPricing() {
  const tCommon = await getTranslations("common");
  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-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
              Choose Your Audit Depth
              <br />
              <span className="text-[#FD105E]">
                Every Dollar Tracked to ROI
              </span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-xl">
              Every audit pays for itself. Our clients typically recover the
              audit cost within the first 30 days of implementing our
              recommendations.
            </p>
          </FadeIn>
        </div>

        {/* Pricing Grid */}
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:gap-6 lg:grid-cols-3">
          {tiers.map((tier, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={tier.title}
              viewportAmount={0.2}
            >
              <div
                className={`relative flex h-full flex-col rounded-2xl border bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:bg-[#1a1a1a] sm:p-6 md:p-8 ${
                  tier.featured
                    ? "border-[#FD105E]/30 hover:border-[#FD105E]/60"
                    : "border-[#333333] hover:border-[#FD105E]/50"
                }`}
              >
                {/* Featured Badge */}
                {tier.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="rounded-xl bg-[#E00D54] px-4 py-1 font-semibold text-white text-xs">
                      {tier.badge}
                    </span>
                  </div>
                )}

                {/* Icon and Title */}
                <div className="mb-6 flex items-start">
                  <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 transition-transform duration-300 group-hover:scale-110">
                    <tier.icon
                      className="h-7 w-7 text-[#FD105E]"
                      strokeWidth={1.5}
                    />
                  </div>
                  <div className="mt-2 ml-4 flex-1">
                    <h3 className="mb-1 font-bold text-white text-xl md:text-2xl">
                      {tier.title}
                    </h3>
                    <div className="flex items-baseline gap-1">
                      <span className="font-bold text-[#FD105E] text-xl md:text-2xl">
                        {tier.price}
                      </span>
                      <span className="text-neutral-400 text-sm">one-time</span>
                    </div>
                  </div>
                </div>

                {/* Description */}
                <p className="mb-6 text-neutral-200 text-sm leading-relaxed">
                  {tier.description}
                </p>

                {/* Highlights */}
                <div className="mb-6 flex-1">
                  <h4 className="mb-3 font-semibold text-neutral-400 text-xs uppercase tracking-wide">
                    {tCommon("whatsIncluded")}
                  </h4>
                  <ul className="space-y-2">
                    {tier.highlights.map((highlight) => (
                      <li
                        className="flex items-start text-neutral-300 text-sm"
                        key={highlight}
                      >
                        <span className="mt-1 mr-2 text-[#FD105E]">
                          &#10003;
                        </span>
                        {highlight}
                      </li>
                    ))}
                  </ul>
                </div>

                {/* CTA Button */}
                <ContactButton
                  className={`inline-flex w-full items-center justify-center gap-2 rounded-xl px-6 py-3 font-semibold transition-all duration-300 hover:scale-105 ${
                    tier.featured
                      ? "bg-[#E00D54] text-white hover:bg-[#E00D54]/90"
                      : "border-2 border-[#FD105E]/50 bg-transparent text-white hover:bg-[#FD105E]/10"
                  }`}
                >
                  <IconCalendar className="h-4 w-4" />
                  {tier.ctaLabel}
                </ContactButton>
              </div>
            </FadeIn>
          ))}
        </div>

        {/* Guarantee */}
        <FadeIn
          className="mt-8 text-center text-neutral-400 text-sm"
          delay={0.3}
          y={0}
        >
          <p>
            100% satisfaction guarantee. If our audit doesn't identify at least
            10 actionable improvements, we refund you in full.
          </p>
        </FadeIn>
      </div>
    </section>
  );
}