"use client";

import Link from "next/link";
import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from "react";
import { useRouter } from "next/navigation";
import {
  ArrowRight,
  CheckCircle2,
  Clock3,
  Eye,
  Loader2,
  MessageCircle,
  Sparkles,
  X,
} from "lucide-react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { ServiceFlowHero } from "@/app/services/ServiceFlowHero";
import { apiHeaders, apiPath } from "@/lib/api-url";
import { getWhatsAppUrl } from "@/lib/contact";
import { useUserLocation } from "@/lib/location-context";
import { routePath } from "@/lib/route-url";
import { getUserAuthToken, useUserAuth } from "@/lib/user-auth";
import { formatModelName } from "@/lib/vehicle-display";
import type { VehiclePackageType } from "@/lib/vehicle-model-navigation";
import { getPackageTypePathSegment } from "@/lib/package-url";

type VehicleType = "car" | "bike";

export type VehiclePackage = {
  id: number;
  slug: string;
  packageType: VehiclePackageType;
  name: string;
  estimatedDuration: string;
  features: string[];
  highlightedFeatures: string[];
  basePrice?: number;
  displayBasePrice?: number;
  discountPercentage?: number;
  finalPrice?: number;
};

export type VehiclePackageModel = {
  id: number;
  name: string;
  fuelType: string | null;
  isEv?: boolean;
  manufacturerName: string;
  manufacturerSlug: string;
  manufacturerLogo: string | null;
};

type VehiclePackagesResponse = {
  model: VehiclePackageModel | null;
  packages?: VehiclePackage[];
  error?: string;
};

const packageLabels: Record<VehiclePackageType, string> = {
  service_package: "Service Packages",
  engine_repair: "Engine Repair Packages",
  car_ac: "Car AC Packages",
  battery_service: "Battery Service Packages",
  tyre_wheel_service: "Tyre & Wheel Packages",
};

function normalizePackageType(value: string): VehiclePackageType {
  if (
    value === "engine_repair" ||
    value === "car_ac" ||
    value === "battery_service" ||
    value === "tyre_wheel_service"
  ) {
    return value;
  }

  return "service_package";
}

function getPackageTypeFromServiceSlug(serviceSlug?: string): VehiclePackageType {
  if (serviceSlug === "car-ac-service") return "car_ac";
  if (serviceSlug === "engine-repair") return "engine_repair";
  if (serviceSlug === "battery-service") return "battery_service";
  if (serviceSlug === "tyre-wheel") return "tyre_wheel_service";

  return "service_package";
}

export function VehiclePackagesClient({
  vehicleType,
  manufacturerSlug,
  modelId,
  modelSlug,
  packageType,
  serviceSlug,
  initialModel,
  initialPackages,
  initialErrorMessage = "",
}: {
  vehicleType?: VehicleType;
  manufacturerSlug: string;
  modelId?: number;
  modelSlug?: string;
  packageType: string;
  serviceSlug?: string;
  initialModel?: VehiclePackageModel | null;
  initialPackages?: VehiclePackage[];
  initialErrorMessage?: string;
}) {
  const { location } = useUserLocation();
  const { user, openAuthModal } = useUserAuth();
  const router = useRouter();
  const [model, setModel] = useState<VehiclePackageModel | null>(initialModel ?? null);
  const [packages, setPackages] = useState<VehiclePackage[]>(initialPackages ?? []);
  const [selectedPackage, setSelectedPackage] = useState<VehiclePackage | null>(null);
  const [isLoading, setIsLoading] = useState(!initialPackages && !initialErrorMessage);
  const [errorMessage, setErrorMessage] = useState(initialErrorMessage);
  const [reloadKey, setReloadKey] = useState(0);
  const usedInitialDataRef = useRef(false);

  const selectedPackageType = useMemo(
    () =>
      packageType && packageType !== "service_package"
        ? normalizePackageType(packageType)
        : getPackageTypeFromServiceSlug(serviceSlug),
    [packageType, serviceSlug],
  );

  useEffect(() => {
    const reloadOnRestore = () => setReloadKey((currentKey) => currentKey + 1);

    window.addEventListener("pageshow", reloadOnRestore);
    window.addEventListener("popstate", reloadOnRestore);

    return () => {
      window.removeEventListener("pageshow", reloadOnRestore);
      window.removeEventListener("popstate", reloadOnRestore);
    };
  }, []);

  useEffect(() => {
    if (!selectedPackage) {
      return;
    }

    const originalOverflow = document.body.style.overflow;
    const originalPaddingRight = document.body.style.paddingRight;
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

    document.body.style.overflow = "hidden";

    if (scrollbarWidth > 0) {
      document.body.style.paddingRight = `${scrollbarWidth}px`;
    }

    return () => {
      document.body.style.overflow = originalOverflow;
      document.body.style.paddingRight = originalPaddingRight;
    };
  }, [selectedPackage]);

  useEffect(() => {
    let isMounted = true;

    async function loadPackages() {
      if (
        !usedInitialDataRef.current &&
        (initialPackages || initialErrorMessage) &&
        reloadKey === 0
      ) {
        usedInitialDataRef.current = true;
        return;
      }

      usedInitialDataRef.current = true;
      setIsLoading(true);
      setErrorMessage("");

      try {
        const response = await fetch(
          apiPath(
            `/api/vehicle-packages?manufacturerSlug=${encodeURIComponent(
              manufacturerSlug,
            )}&packageType=${selectedPackageType}${
              modelSlug
                ? `&modelSlug=${encodeURIComponent(modelSlug)}`
                : modelId
                  ? `&modelId=${modelId}`
                  : ""
            }${
              serviceSlug
                ? `&serviceSlug=${serviceSlug}`
                : vehicleType
                  ? `&vehicleType=${vehicleType}`
                  : ""
            }${location?.id ? `&locationId=${location.id}` : ""}`,
          ),
          {
            headers: apiHeaders(),
          },
        );

        const data = (await response.json()) as VehiclePackagesResponse;

        if (!response.ok) {
          throw new Error(data.error ?? "Could not load packages");
        }

        if (isMounted) {
          setModel(data.model);
          setPackages(data.packages ?? []);
        }
      } catch (error) {
        if (isMounted) {
          setErrorMessage(error instanceof Error ? error.message : "Could not load packages");
        }
      } finally {
        if (isMounted) {
          setIsLoading(false);
        }
      }
    }

    loadPackages();

    return () => {
      isMounted = false;
    };
  }, [
    initialErrorMessage,
    initialPackages,
    manufacturerSlug,
    modelId,
    modelSlug,
    reloadKey,
    selectedPackageType,
    serviceSlug,
    location?.id,
    vehicleType,
  ]);

  const modelName = formatModelName(model?.name ?? modelSlug ?? "selected model");
  const resolvedVehicleType = vehicleType ?? (serviceSlug === "bike-service" ? "bike" : "car");
  const vehicleLabel = resolvedVehicleType === "car" ? "Car" : "Bike";
  const categoryLabel = packageLabels[selectedPackageType];
  const modelBackQuery = new URLSearchParams();
  const usesVehicleTypePath =
    serviceSlug === "engine-repair" ||
    serviceSlug === "battery-service" ||
    serviceSlug === "tyre-wheel";

  if (usesVehicleTypePath) {
    modelBackQuery.set("vehicleType", resolvedVehicleType);
  }

  const modelBackQueryString = modelBackQuery.toString();
  const shouldShowArrows = packages.length > 3;
  const packageCardBasis =
    packages.length === 1
      ? "basis-full md:basis-1/2 lg:basis-1/3"
      : packages.length === 2
        ? "basis-full md:basis-1/2"
        : "basis-[90%] sm:basis-[80%] md:basis-1/2 lg:basis-1/3";

  function getPackageWhatsappMessage(servicePackage: VehiclePackage) {
    const customerText = user
      ? ` My name is ${user.name || "Customer"}${user.mobile ? ` and my mobile number is ${user.mobile}` : ""}.`
      : "";

    return `Hi Ride N Revive, I want to book ${servicePackage.name} for my ${modelName}${
      model?.isEv ? " (Electric)" : model?.fuelType ? ` (${model.fuelType})` : ""
    }${location ? ` in ${location.name}` : ""}.${customerText} Please help me.`;
  }

  function getPackageCheckoutHref(servicePackage: VehiclePackage) {
    const checkoutServiceSlug = serviceSlug ?? `${resolvedVehicleType}-service`;
    const packageTypeSegment = getPackageTypePathSegment(selectedPackageType);
    const checkoutBasePath =
      serviceSlug && usesVehicleTypePath
        ? `/services/${checkoutServiceSlug}/${resolvedVehicleType}/${encodeURIComponent(
            manufacturerSlug,
          )}/${encodeURIComponent(modelSlug ?? "")}`
        : `/services/${checkoutServiceSlug}/${encodeURIComponent(
            manufacturerSlug,
          )}/${encodeURIComponent(modelSlug ?? "")}`;

    return routePath(
      `${checkoutBasePath}/${packageTypeSegment}/${encodeURIComponent(servicePackage.slug)}`,
    );
  }

  async function startBooking(servicePackage: VehiclePackage) {
    if (!user && !getUserAuthToken()) {
      openAuthModal();
      return;
    }

    if (user && (!user.email || !user.name || user.name === "User")) {
      openAuthModal();
      return;
    }

    router.push(getPackageCheckoutHref(servicePackage));
  }

  return (
    <>
      <ServiceFlowHero
        currentPage={categoryLabel}
        eyebrow={`${vehicleLabel} package`}
        title={`${categoryLabel} for ${modelName}`}
        lead="Choose a package and book on WhatsApp. Prices are confirmed by the team before work starts."
        backHref={routePath(
          serviceSlug && usesVehicleTypePath
            ? `/services/${serviceSlug}/${resolvedVehicleType}/${encodeURIComponent(
                manufacturerSlug,
              )}`
            : serviceSlug
              ? `/services/${serviceSlug}/${encodeURIComponent(manufacturerSlug)}${
                  modelBackQueryString ? `?${modelBackQueryString}` : ""
                }`
              : `/vehicle-models/${resolvedVehicleType}/${encodeURIComponent(
                  manufacturerSlug,
                )}?packageType=${selectedPackageType}`,
        )}
        backLabel="Back to models"
      />

      <section className="bg-slate-50 py-12 font-['Space_Grotesk'] md:py-16">
        <div className="mx-auto max-w-7xl px-4">
          {errorMessage ? (
            <div className="rounded-lg border border-primary/20 bg-primary/5 p-4 text-sm font-black text-primary shadow-sm">
              {errorMessage}
            </div>
          ) : null}

          {isLoading ? (
            <div className="grid min-h-64 place-items-center rounded-lg border border-border bg-white shadow-sm">
              <Loader2 className="h-7 w-7 animate-spin text-primary" />
            </div>
          ) : packages.length === 0 ? (
            <div className="rounded-lg border border-dashed border-primary/25 bg-white p-10 text-center shadow-sm">
              <h2 className="text-2xl font-black tracking-tight text-foreground">
                Packages are not listed yet
              </h2>

              <p className="mx-auto mt-3 max-w-xl text-sm font-semibold leading-7 text-muted-foreground">
                Send your vehicle details on WhatsApp and the team will guide you with this service.
              </p>

              <Link
                href={getWhatsAppUrl(
                  `Hi Ride N Revive, I want to book ${categoryLabel} for my ${modelName}${
                    location ? ` in ${location.name}` : ""
                  }. Please help me.`,
                )}
                target="_blank"
                rel="noreferrer"
                className="mt-6 inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-primary px-6 text-sm font-black text-primary-foreground shadow-lg shadow-primary/20 transition hover:-translate-y-0.5 hover:bg-primary/90"
              >
                <MessageCircle className="h-4 w-4" />
                Ask on WhatsApp
              </Link>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="grid gap-4 rounded-lg border border-border bg-white p-5 shadow-sm lg:grid-cols-[minmax(0,1fr)_280px] lg:items-center">
                <div>
                  <p className="inline-flex rounded-md bg-primary/10 px-3 py-1 text-xs font-black uppercase tracking-[0.14em] text-primary">
                    {packages.length} package{packages.length === 1 ? "" : "s"} available
                  </p>

                  <h2 className="mt-3 max-w-3xl text-2xl font-black tracking-tight text-foreground md:text-3xl">
                    Choose the right service package for your vehicle.
                  </h2>

                  <p className="mt-2 max-w-2xl text-sm font-semibold leading-7 text-muted-foreground">
                    Review the inclusions, open details when needed, and book directly on WhatsApp.
                    Final pricing is confirmed by the Ride N Revive team before work starts.
                  </p>
                </div>

                <div className="rounded-lg border border-border bg-slate-50 p-4">
                  <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                    Selected vehicle
                  </p>
                  <p className="mt-2 text-lg font-black leading-tight text-foreground">
                    {modelName}
                  </p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <span className="rounded-md bg-white px-2.5 py-1.5 text-xs font-black text-slate-700 shadow-sm">
                      {vehicleLabel}
                    </span>
                    {model?.isEv ? (
                      <span className="rounded-md bg-white px-2.5 py-1.5 text-xs font-black text-slate-700 shadow-sm">
                        Electric
                      </span>
                    ) : model?.fuelType ? (
                      <span className="rounded-md bg-white px-2.5 py-1.5 text-xs font-black text-slate-700 shadow-sm">
                        {model.fuelType}
                      </span>
                    ) : null}
                  </div>
                </div>
              </div>

              <div>
                <div className="mb-2 flex items-center justify-between gap-3">
                  <div>
                    <p className="text-xs font-black uppercase tracking-[0.18em] text-primary">
                      Available packages
                    </p>
                    <h3 className="mt-1 text-xl font-black text-foreground">Pick your service</h3>
                  </div>

                  {shouldShowArrows ? (
                    <p className="hidden text-xs font-bold uppercase tracking-[0.14em] text-muted-foreground md:block">
                      Swipe or use arrows
                    </p>
                  ) : null}
                </div>

                <div className="relative w-full overflow-visible px-2 pb-6 pt-4 sm:px-0">
                  <Carousel opts={{ align: "start" }} className="w-full overflow-visible">
                    <CarouselContent className="-ml-4 overflow-visible py-4">
                      {packages.map((servicePackage) => {
                        const whatsappMessage = getPackageWhatsappMessage(servicePackage);
                        const hasPrice = getPackagePrice(servicePackage) > 0;
                        const previewHighlights =
                          servicePackage.highlightedFeatures.length > 0
                            ? servicePackage.highlightedFeatures
                            : servicePackage.features;

                        return (
                          <CarouselItem
                            key={servicePackage.id}
                            className={`flex overflow-visible pl-4 ${packageCardBasis}`}
                          >
                            <article className="group relative flex h-full min-h-[560px] w-full flex-col overflow-hidden rounded-lg border border-border bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/40 hover:shadow-xl">
                              <div className="relative overflow-hidden border-b border-border/50 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 p-6 pb-5 text-white">
                                <div className="relative mb-4 flex items-center justify-between gap-4">
                                  <span className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3 py-1.5 text-xs font-bold text-white ring-1 ring-white/15">
                                    <Clock3 className="h-3.5 w-3.5 text-primary" />
                                    {servicePackage.estimatedDuration}
                                  </span>

                                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-white/60">
                                    {categoryLabel}
                                  </p>
                                </div>

                                <h2 className="relative text-2xl font-black tracking-tight text-white sm:text-3xl">
                                  {servicePackage.name}
                                </h2>
                              </div>

                              <div className="flex flex-1 flex-col p-6 pt-5">
                                {previewHighlights.length > 0 ? (
                                  <div className="mb-6">
                                    <div className="mb-3 flex items-center gap-2 text-xs font-black uppercase tracking-widest text-primary">
                                      <Sparkles className="h-4 w-4" />
                                      Top benefits
                                    </div>

                                    <ul className="space-y-2.5">
                                      {previewHighlights.slice(0, 3).map((feature) => (
                                        <li
                                          key={feature}
                                          className="flex items-start gap-3 text-sm font-semibold leading-relaxed text-foreground"
                                        >
                                          <div className="mt-0.5 rounded-full bg-primary/10 p-0.5 text-primary">
                                            <CheckCircle2 className="h-3.5 w-3.5" />
                                          </div>
                                          <span>{feature}</span>
                                        </li>
                                      ))}
                                    </ul>
                                  </div>
                                ) : null}

                                <div className="mb-6 flex-1">
                                  <div className="mb-3 text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground">
                                    Also includes
                                  </div>

                                  <ul className="space-y-2">
                                    {servicePackage.features.slice(0, 4).map((feature) => (
                                      <li
                                        key={feature}
                                        className="flex items-start gap-2.5 text-sm font-medium leading-relaxed text-muted-foreground"
                                      >
                                        <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-slate-300" />
                                        <span>{feature}</span>
                                      </li>
                                    ))}

                                    {servicePackage.features.length > 4 ? (
                                      <li className="pt-1 text-xs font-black text-primary">
                                        + {servicePackage.features.length - 4} more details
                                      </li>
                                    ) : null}
                                  </ul>
                                </div>

                                <div className="mt-auto space-y-3 border-t border-border/50 pt-5">
                                  <PackagePriceBlock servicePackage={servicePackage} compact />

                                  <button
                                    type="button"
                                    onClick={() => setSelectedPackage(servicePackage)}
                                    className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md border border-border bg-white px-4 text-xs font-black text-foreground transition hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
                                  >
                                    <Eye className="h-4 w-4" />
                                    View details
                                  </button>

                                  <Link
                                    href={
                                      hasPrice
                                        ? getPackageCheckoutHref(servicePackage)
                                        : getWhatsAppUrl(whatsappMessage)
                                    }
                                    target={hasPrice ? undefined : "_blank"}
                                    rel={hasPrice ? undefined : "noreferrer"}
                                    onClick={(event) => {
                                      if (hasPrice) {
                                        event.preventDefault();
                                        startBooking(servicePackage);
                                      }
                                    }}
                                    className="group/btn inline-flex w-full items-center justify-center gap-2 rounded-md bg-primary px-6 py-4 text-sm font-black text-primary-foreground shadow-lg shadow-primary/20 transition-all hover:-translate-y-0.5 hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/25"
                                  >
                                    <MessageCircle className="h-4 w-4" />
                                    {getBookButtonLabel(servicePackage)}
                                    <ArrowRight className="h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
                                  </Link>
                                </div>
                              </div>
                            </article>
                          </CarouselItem>
                        );
                      })}
                    </CarouselContent>

                    {shouldShowArrows ? (
                      <div className="hidden md:block">
                        <CarouselPrevious className="-left-4 border-white bg-white shadow-lg lg:-left-12" />
                        <CarouselNext className="-right-4 border-white bg-white shadow-lg lg:-right-12" />
                      </div>
                    ) : null}
                  </Carousel>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {selectedPackage ? (
        <PackageDetailsDialog
          servicePackage={selectedPackage}
          categoryLabel={categoryLabel}
          bookingHref={getPackageCheckoutHref(selectedPackage)}
          whatsappHref={getWhatsAppUrl(getPackageWhatsappMessage(selectedPackage))}
          onClose={() => setSelectedPackage(null)}
          onBook={() => {
            setSelectedPackage(null);
            if (getPackagePrice(selectedPackage) > 0) {
              startBooking(selectedPackage);
            }
          }}
        />
      ) : null}
    </>
  );
}

function getPackagePrice(servicePackage: VehiclePackage) {
  const price = Number(servicePackage.finalPrice ?? servicePackage.basePrice ?? 0);
  return Number.isFinite(price) && price > 0 ? price : 0;
}

function getPackageBasePrice(servicePackage: VehiclePackage) {
  const price = Number(
    servicePackage.displayBasePrice ?? servicePackage.basePrice ?? servicePackage.finalPrice ?? 0,
  );
  return Number.isFinite(price) && price > 0 ? price : 0;
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
}

function getBookButtonLabel(servicePackage: VehiclePackage) {
  const price = getPackagePrice(servicePackage);
  return price > 0 ? `Book now - ${formatCurrency(price)}` : "Book on WhatsApp";
}

function PackagePriceBlock({
  servicePackage,
  compact = false,
}: {
  servicePackage: VehiclePackage;
  compact?: boolean;
}) {
  const basePrice = getPackageBasePrice(servicePackage);
  const finalPrice = getPackagePrice(servicePackage);

  if (finalPrice <= 0) {
    return (
      <div className="rounded-lg border border-primary/15 bg-primary/5 px-4 py-3">
        <p className="text-[10px] font-black uppercase tracking-[0.16em] text-primary">Price</p>
        <p className="mt-1 text-lg font-black text-foreground">Confirm on WhatsApp</p>
      </div>
    );
  }

  return (
    <div
      className={`rounded-lg border border-primary/20 bg-primary/5 px-4 shadow-sm ${
        compact ? "py-3" : "py-4"
      }`}
    >
      <p className="text-[10px] font-black uppercase tracking-[0.16em] text-primary">
        Package price
      </p>
      <div className="mt-1 flex flex-wrap items-end gap-x-3 gap-y-1">
        {basePrice > 0 ? (
          <span className="text-sm font-black text-muted-foreground line-through decoration-2">
            {formatCurrency(basePrice)}
          </span>
        ) : null}
        <span className={`${compact ? "text-2xl" : "text-3xl"} font-black text-primary`}>
          {formatCurrency(finalPrice)}
        </span>
      </div>
      {Number(servicePackage.discountPercentage ?? 0) > 0 ? (
        <p className="mt-1 text-xs font-black text-emerald-700">
          {servicePackage.discountPercentage}% off
        </p>
      ) : null}
    </div>
  );
}

function PackageDetailsDialog({
  servicePackage,
  categoryLabel,
  bookingHref,
  whatsappHref,
  onClose,
  onBook,
}: {
  servicePackage: VehiclePackage;
  categoryLabel: string;
  bookingHref: string;
  whatsappHref: string;
  onClose: () => void;
  onBook: () => void;
}) {
  const allFeatures = servicePackage.features;
  const highlightedFeatures = servicePackage.highlightedFeatures;
  const hasPrice = getPackagePrice(servicePackage) > 0;
  const price = getPackagePrice(servicePackage);
  const heroHighlights =
    highlightedFeatures.length > 0 ? highlightedFeatures.slice(0, 3) : allFeatures.slice(0, 3);
  const remainingFeatures = allFeatures.filter((feature) => !heroHighlights.includes(feature));

  return (
    <div className="fixed inset-0 z-[80] overflow-y-auto bg-slate-950/70 px-3 py-4 font-['Space_Grotesk'] backdrop-blur-sm sm:px-4 sm:py-6">
      <button
        type="button"
        className="fixed inset-0 cursor-default"
        onClick={onClose}
        aria-label="Close package details"
      />

      <div className="relative mx-auto flex min-h-[calc(100vh-2rem)] w-full max-w-6xl items-center">
        <div className="relative grid max-h-[calc(100vh-2rem)] w-full overflow-hidden rounded-lg border border-border bg-white shadow-2xl lg:grid-cols-[minmax(0,1fr)_340px]">
          <div className="min-h-0 overflow-y-auto">
            <div className="border-b border-border bg-slate-950 p-5 text-white sm:p-6">
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <p className="text-xs font-black uppercase tracking-[0.16em] text-primary">
                    {categoryLabel}
                  </p>
                  <h2 className="mt-2 text-2xl font-black leading-tight tracking-tight sm:text-4xl">
                    {servicePackage.name}
                  </h2>
                </div>
                <button
                  type="button"
                  onClick={onClose}
                  className="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-white/15 bg-white/10 text-white transition hover:bg-white/20"
                  aria-label="Close package details"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>

              <div className="mt-5 grid gap-3 sm:grid-cols-3">
                <PackageMetric
                  icon={Clock3}
                  label="Duration"
                  value={servicePackage.estimatedDuration}
                />
                <PackageMetric
                  icon={Sparkles}
                  label="Highlights"
                  value={`${heroHighlights.length} key points`}
                />
                <PackageMetric
                  icon={CheckCircle2}
                  label="Included"
                  value={`${allFeatures.length} items`}
                />
              </div>
            </div>

            <div className="space-y-5 p-5 sm:p-6">
              <section>
                <div className="flex items-center gap-2 text-xs font-black uppercase tracking-[0.14em] text-primary">
                  <Sparkles className="h-4 w-4" />
                  Top benefits
                </div>
                <div className="mt-3 grid gap-3 md:grid-cols-3">
                  {heroHighlights.length > 0 ? (
                    heroHighlights.map((feature, index) => (
                      <div
                        key={feature}
                        className="rounded-lg border border-primary/15 bg-primary/5 p-4"
                      >
                        <span className="inline-grid h-7 w-7 place-items-center rounded-md bg-primary text-xs font-black text-primary-foreground">
                          {index + 1}
                        </span>
                        <p className="mt-3 text-sm font-black leading-6 text-foreground">
                          {feature}
                        </p>
                      </div>
                    ))
                  ) : (
                    <p className="rounded-lg border border-dashed border-border p-4 text-sm font-bold text-muted-foreground md:col-span-3">
                      No highlighted points added for this package.
                    </p>
                  )}
                </div>
              </section>

              <section className="rounded-lg border border-border bg-white shadow-sm">
                <div className="flex items-center justify-between gap-3 border-b border-border bg-slate-50 px-4 py-3">
                  <div>
                    <h3 className="font-black text-foreground">Included details</h3>
                    <p className="mt-0.5 text-xs font-bold text-muted-foreground">
                      Complete package coverage
                    </p>
                  </div>
                  <span className="rounded-md bg-white px-2.5 py-1 text-xs font-black text-primary shadow-sm">
                    {allFeatures.length}
                  </span>
                </div>

                <ul className="grid max-h-[42vh] gap-2 overflow-y-auto p-4 md:grid-cols-2">
                  {(remainingFeatures.length > 0 ? remainingFeatures : allFeatures).map(
                    (feature) => (
                      <li
                        key={feature}
                        className="flex gap-3 rounded-md border border-border bg-slate-50 px-3 py-3 text-sm font-bold leading-6 text-foreground"
                      >
                        <CheckCircle2 className="mt-1 h-4 w-4 shrink-0 text-primary" />
                        <span>{feature}</span>
                      </li>
                    ),
                  )}
                </ul>
              </section>
            </div>
          </div>

          <aside className="border-t border-border bg-slate-50 p-5 lg:border-l lg:border-t-0">
            <div className="lg:sticky lg:top-5">
              <p className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
                Package summary
              </p>
              <div className="mt-4 overflow-hidden rounded-lg border border-border bg-white shadow-sm">
                <SummaryBlock label="Package" value={servicePackage.name} />
                <SummaryBlock label="Duration" value={servicePackage.estimatedDuration} />
                <SummaryBlock
                  label="Price"
                  value={price > 0 ? formatCurrency(price) : "Confirm on WhatsApp"}
                  content={<PackagePriceBlock servicePackage={servicePackage} />}
                />
                <SummaryBlock
                  label="Booking"
                  value={hasPrice ? "Address and cash-after-service flow" : "WhatsApp assistance"}
                />
              </div>

              <p className="mt-4 rounded-lg border border-primary/15 bg-primary/5 p-3 text-sm font-bold leading-6 text-muted-foreground">
                Final service details are confirmed by the Ride N Revive team before work starts.
              </p>

              <div className="mt-4">
                <Link
                  href={hasPrice ? bookingHref : whatsappHref}
                  target={hasPrice ? undefined : "_blank"}
                  rel={hasPrice ? undefined : "noreferrer"}
                  onClick={(event) => {
                    if (hasPrice) {
                      event.preventDefault();
                      onBook();
                    }
                  }}
                  className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-primary px-5 text-sm font-black text-primary-foreground shadow-lg shadow-primary/20 transition hover:-translate-y-0.5 hover:bg-primary/90"
                >
                  <MessageCircle className="h-4 w-4" />
                  {getBookButtonLabel(servicePackage)}
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

function PackageMetric({
  icon: Icon,
  label,
  value,
}: {
  icon: ComponentType<{ className?: string }>;
  label: string;
  value: string;
}) {
  return (
    <div className="rounded-lg border border-white/10 bg-white/10 p-3">
      <div className="flex items-center gap-2 text-white/65">
        <Icon className="h-4 w-4 text-primary" />
        <span className="text-[10px] font-black uppercase tracking-[0.14em]">{label}</span>
      </div>
      <p className="mt-2 text-sm font-black text-white">{value}</p>
    </div>
  );
}

function SummaryBlock({
  label,
  value,
  content,
}: {
  label: string;
  value: string;
  content?: ReactNode;
}) {
  return (
    <div className="border-b border-border px-4 py-3 last:border-b-0">
      <p className="text-[10px] font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </p>
      {content ?? <p className="mt-1 text-sm font-black leading-6 text-foreground">{value}</p>}
    </div>
  );
}