import {
  IconAnalyze,
  IconCalendar,
  IconChartDots3,
  IconDatabase,
} 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 AnalysisPackage {
  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: AnalysisPackage[] = [
  {
    icon: IconAnalyze,
    title: "Data Flow Audit",
    price: "$599",
    description:
      "Walk away with a visual map of every API call your headless stack makes -- and a prioritized fix list that typically cuts response times by 30-50% and eliminates redundant requests costing you speed and server spend.",
    deliveryTime: "5 days",
    badge: "BEST VALUE",
    ctaLabel: "Start My Data Audit",
    highlights: [
      "Full API Endpoint Map -- see every call at a glance",
      "Visual Data Flow Diagram you can share with your team",
      "Redundant Call Report (avg. 15-25% of calls are unnecessary)",
      "Cache Strategy Playbook to cut server costs up to 40%",
      "Response Time Profiling with p50/p95/p99 benchmarks",
      "Prioritized PDF Roadmap with estimated impact per fix",
      "100% satisfaction guarantee",
    ],
    featured: true,
  },
  {
    icon: IconChartDots3,
    title: "Analytics Deep Dive",
    price: "$1,200 - $2,000",
    description:
      "Stop flying blind. You get a fully validated analytics stack -- PostHog, GA4, and custom events -- aligned to the KPIs that actually move revenue. Most clients discover 20-40% of their conversion data was missing or misconfigured.",
    deliveryTime: "7-10 days",
    badge: "MOST COMPREHENSIVE",
    ctaLabel: "Get the Full Analysis",
    highlights: [
      "Everything in Data Flow Audit",
      "PostHog Event Audit -- fix silent tracking failures",
      "GA4 Configuration Fix (avg. 12 misconfigurations found)",
      "Marketing Attribution Map -- know which channels actually convert",
      "Conversion Funnel Analysis with drop-off dollar values",
      "Feature Flag Performance Scoring -- kill slow flags",
      "Custom KPI Dashboard ready to use on day one",
      "Data Layer Implementation Plan with dev-ready tickets",
      "30-Day Post-Delivery Support",
      "100% satisfaction guarantee",
    ],
    featured: true,
  },
  {
    icon: IconDatabase,
    title: "Infrastructure Analysis",
    price: "$1,500",
    description:
      "Find out exactly where your hosting dollars go -- and where they are wasted. We profile your CDN, edge functions, database queries, and serverless layer so you can cut infrastructure costs by 20-35% while improving Core Web Vitals.",
    deliveryTime: "10 days",
    ctaLabel: "Assess My Infrastructure",
    highlights: [
      "CDN & Edge Hit-Rate Audit -- target 95%+ cache efficiency",
      "Serverless Cold-Start Profiling with fix recommendations",
      "Database Query Review (slow queries costing you TTFB)",
      "ISR/SSR Strategy aligned to your traffic patterns",
      "Cost Optimization Report with projected monthly savings",
      "Scalability Stress-Test up to 10x current traffic",
      "90-Day Architecture Improvement Roadmap",
      "100% satisfaction guarantee",
    ],
  },
];

export async function HeadlessDataAnalysisDetails() {
  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">
              Data Analysis Packages
              <br />
              <span className="text-[#FD105E]">
                Choose Your Depth of Insight
              </span>
            </h2>
            <p className="mx-auto max-w-3xl text-base text-neutral-200 md:text-xl">
              Every package delivers a clear dollar-value roadmap: faster load
              times, fewer wasted API calls, and tracking you can finally trust
              -- so you stop guessing and start growing revenue.
            </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 Analysis"}
                </ContactButton>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}