import {
  IconBolt,
  IconCalendar,
  IconGauge,
  IconShoppingCart,
} 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 AuditPackage {
  badge?: string;
  ctaLabel?: string;
  deliveryTime: string;
  description: string;
  featured?: boolean;
  highlights: string[];
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  price: string;
  title: string;
}

const packages: AuditPackage[] = [
  {
    icon: IconGauge,
    title: "Shopify Speed Check",
    price: "$249",
    description:
      "In 3 days, you get a ranked list of every bottleneck costing you conversions -- with exact fix instructions your developer can implement the same week. Most stores see a 20-40% speed improvement from this report alone.",
    deliveryTime: "3 days",
    ctaLabel: "Start My Speed Check -- $249",
    highlights: [
      "Lighthouse Audit: Desktop + Mobile Scores with Fix Priorities",
      "Core Web Vitals Breakdown (LCP, INP, CLS) with Target Thresholds",
      "Theme Performance Review: Liquid, CSS & JS Bottlenecks Identified",
      "App Impact Ranking: Top 10 Apps Scored by Speed Cost",
      "PDF Action Plan: Fixes Ordered by Revenue Impact",
      "Satisfaction Guarantee -- We Revise Until You're Happy",
    ],
    featured: true,
    badge: "BEST VALUE",
  },
  {
    icon: IconBolt,
    title: "Shopify Deep Dive",
    price: "$850 - $1,500",
    description:
      "The complete performance overhaul for stores doing $50K+/mo. We tear down every layer -- API response times, checkout flow, third-party scripts, asset delivery -- and hand you an implementation roadmap with 30 days of direct Slack support to make sure every fix ships.",
    deliveryTime: "7-10 days",
    ctaLabel: "Get the Full Analysis",
    highlights: [
      "Everything in Speed Check, Plus:",
      "Storefront API: Response Times Benchmarked Against Top 1% Stores",
      "Checkout Flow Audit: Drop-off Points Mapped with Speed Fixes",
      "Third-Party Script Audit: Each Script Scored by ms Cost vs. Revenue Value",
      "Image & Asset Review: Savings Estimated in KB and Load Time",
      "Liquid Template Profiling: Slowest Templates Ranked with Rewrites",
      "Conversion Funnel Speed Map: Page-by-Page Load Time vs. Exit Rate",
      "Implementation Roadmap with Week-by-Week Timeline",
      "30-Day Post-Audit Slack Support (Unlimited Questions)",
      "Satisfaction Guarantee -- We Revise Until You're Happy",
    ],
    featured: true,
    badge: "MOST COMPREHENSIVE",
  },
  {
    icon: IconShoppingCart,
    title: "Headless Shopify Assessment",
    price: "$1,200",
    description:
      "Find out exactly how much faster (and how much more revenue) your store could generate with a headless architecture -- before you commit a single dollar to migration. Includes a data-backed ROI forecast and a build-or-wait recommendation.",
    deliveryTime: "5-7 days",
    ctaLabel: "Assess My Store's Potential",
    highlights: [
      "Current Performance Baseline: Scores, Load Times & Bottleneck Map",
      "Headless Feasibility Analysis: Go/No-Go with Clear Reasoning",
      "Projected Speed Gains: Before vs. After Load Time Estimates",
      "ROI Forecast: Revenue Uplift Modeled on Your Traffic & Conversion Data",
      "Architecture Recommendation: Hydrogen, Next.js, or Custom Stack",
      "Migration Complexity & Cost Estimate: Timeline, Budget Range & Risks",
      "Satisfaction Guarantee -- We Revise Until You're Happy",
    ],
  },
];

export async function ShopifySpeedAuditDetails() {
  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 Level
              <br />
              <span className="text-[#FD105E]">Built for Conversions</span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-xl">
              Every package includes a fixed price, a clear delivery date, and a
              step-by-step action plan -- so you know exactly what to fix, in
              what order, and how much revenue you stand to recover.
            </p>
          </FadeIn>
        </div>

        {/* Packages Grid */}
        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 md:gap-6 lg:grid-cols-3">
          {packages.map((pkg, index) => (
            <FadeIn
              className="group relative"
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={pkg.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 ${
                  pkg.featured
                    ? "border-[#FD105E]/30 hover:border-[#FD105E]/60"
                    : "border-[#333333] hover:border-[#FD105E]/50"
                }`}
              >
                {pkg.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">
                      {pkg.badge || "POPULAR"}
                    </span>
                  </div>
                )}

                <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">
                    <pkg.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">
                      {pkg.title}
                    </h3>
                    <div className="flex items-center gap-3 text-xs">
                      <span className="font-bold text-[#FD105E] text-xl md:text-2xl">
                        {pkg.price}
                      </span>
                      <span className="text-neutral-400">•</span>
                      <span className="text-neutral-400">
                        {pkg.deliveryTime}
                      </span>
                    </div>
                  </div>
                </div>

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

                <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">
                    {pkg.highlights.map((highlight) => (
                      <li
                        className="flex items-start text-neutral-300 text-sm"
                        key={highlight}
                      >
                        <span className="mt-1 mr-2 text-[#FD105E]">✓</span>
                        {highlight}
                      </li>
                    ))}
                  </ul>
                </div>

                <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 ${
                    pkg.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" />
                  {pkg.ctaLabel || "Book This Audit"}
                </ContactButton>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}