import {
  IconChartBar,
  IconClipboardList,
  IconFileText,
  IconMessages,
} from "@tabler/icons-react";
import { FadeIn } from "@/components/ui/fade-in";

interface Deliverable {
  body: string;
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
  title: string;
}

const deliverables: Deliverable[] = [
  {
    icon: IconFileText,
    title: "PDF performance report",
    body: "A 25 to 60 page written report (length depends on package) covering every audit area: Core Web Vitals scores per template, theme findings, app waterfall, Storefront API observations, image and asset opportunities, checkout flow measurements, and tracking footprint. Each finding states the current measurement, the target, the user impact, and the fix. The report is written for a developer, not a marketer — it is meant to be implemented, not admired.",
  },
  {
    icon: IconClipboardList,
    title: "Prioritized action plan",
    body: "A separate sheet that orders every recommendation by estimated revenue impact divided by implementation effort. Quick wins (image format swaps, deferred apps, removed pixel duplicates) sit at the top with a one-week timeline. Structural work (theme refactor, Storefront API caching strategy, Hydrogen migration) is grouped into 30, 60, and 90-day phases so your team can plan sprints around it.",
  },
  {
    icon: IconChartBar,
    title: "Lighthouse and CrUX baselines",
    body: "Raw Lighthouse JSON exports for desktop and mobile on every template tested, plus a CrUX field-data snapshot for the previous 28 days where Google has data on your store. These files are saved alongside the report so you can re-run the same tests after implementation and prove the delta with your own numbers, not ours.",
  },
  {
    icon: IconMessages,
    title: "Implementation support",
    body: "On the Deep Dive package, you get 30 days of asynchronous Slack support after delivery. Your developer can ask for clarification on any recommendation, share a pull request for review, or escalate a regression. On the Speed Check package, support is limited to one round of written follow-up questions — enough to make sure the fix list is unambiguous.",
  },
];

export function ShopifySpeedAuditDeliverables() {
  return (
    <section className="bg-gradient-to-br from-[#000] to-[#1A2428] py-12 sm:py-24 md:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <FadeIn className="mb-8 text-center md:mb-16" y={20}>
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            What you <span className="text-[#FD105E]">actually receive</span>
          </h2>
          <p className="mx-auto max-w-3xl text-base text-white/70 leading-relaxed md:text-lg">
            No dashboards to log into, no rolling subscription. Every audit
            ships as a set of files that belong to you, plus the support you
            need to act on them.
          </p>
        </FadeIn>

        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
          {deliverables.map((item, index) => (
            <FadeIn
              className="relative rounded-2xl border border-[#333333] bg-[#1a1a1a]/80 p-4 backdrop-blur-sm transition-all duration-300 hover:border-[#FD105E]/30 sm:p-6 md:p-8"
              delay={index * 0.1}
              duration={0.6}
              key={item.title}
              y={20}
            >
              <div className="flex items-start gap-4">
                <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10">
                  <item.icon
                    className="h-6 w-6 text-[#FD105E]"
                    strokeWidth={1.5}
                  />
                </div>
                <div>
                  <h3 className="mb-2 font-bold text-white text-xl">
                    {item.title}
                  </h3>
                  <p className="text-neutral-300 leading-relaxed">
                    {item.body}
                  </p>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}