Feature Comparison

import { Check, X, Minus, LucideIcon, Crown, Info } from "lucide-react";
import { ReactNode } from "react";
 
interface ComparisonColumn {
  name: string;
  description?: string;
  icon?: LucideIcon;
  highlighted?: boolean;
  badge?: string;
}
 
interface ComparisonFeature {
  category?: string;
  name: string;
  description?: string;
  tooltip?: string;
  yours: boolean | string | ReactNode;
  competitorA: boolean | string | ReactNode;
  competitorB: boolean | string | ReactNode;
  winner?: "yours" | "competitorA" | "competitorB" | "tie";
}
 
interface FeatureComparisonProps {
  headline?: string;
  description?: string;
  columns: {
    yours: ComparisonColumn;
    competitorA: ComparisonColumn;
    competitorB: ComparisonColumn;
  };
  features: ComparisonFeature[];
  showWinnerBadges?: boolean;
  showScoreSummary?: boolean;
}
 
export function FeatureComparison({
  headline = "See how we compare",
  description,
  columns,
  features,
  showWinnerBadges = true,
  showScoreSummary = true,
}: FeatureComparisonProps) {
  const scores = {
    yours: features.filter((f) => f.winner === "yours").length,
    competitorA: features.filter((f) => f.winner === "competitorA").length,
    competitorB: features.filter((f) => f.winner === "competitorB").length,
  };
 
  const renderValue = (
    value: boolean | string | ReactNode,
    isWinner: boolean = false,
  ) => {
    if (typeof value === "boolean") {
      return (
        <div
          className={`inline-flex items-center justify-center rounded-full p-1 ${
            isWinner && value ? "bg-emerald-500/10" : ""
          }`}
        >
          {value ? (
            <Check
              className={`h-5 w-5 ${
                isWinner ? "text-emerald-400" : "text-emerald-500/70"
              }`}
            />
          ) : (
            <X className="h-5 w-5 text-zinc-600" />
          )}
        </div>
      );
    }
    if (value === "-" || value === "—") {
      return <Minus className="h-5 w-5 text-zinc-600" />;
    }
    return (
      <span
        className={`text-sm font-medium ${
          isWinner ? "text-white" : "text-zinc-400"
        }`}
      >
        {value}
      </span>
    );
  };
 
  const ColumnHeader = ({
    column,
    type,
    score,
  }: {
    column: ComparisonColumn;
    type: "yours" | "competitorA" | "competitorB";
    score?: number;
  }) => {
    const Icon = column.icon;
    const isYours = type === "yours";
    const isLeader =
      showScoreSummary && score === Math.max(...Object.values(scores));
 
    return (
      <div
        className={`relative rounded-2xl border p-6 transition-all ${
          column.highlighted || isYours
            ? "border-blue-500/50 bg-gradient-to-b from-blue-500/10 to-transparent"
            : "border-zinc-800/50 bg-zinc-950"
        }`}
      >
        {(column.badge || isYours) && (
          <div className="absolute -top-3 left-1/2 -translate-x-1/2">
            <span className="rounded-full bg-blue-500 px-3 py-1 text-xs font-semibold text-white">
              {column.badge || "That's us!"}
            </span>
          </div>
        )}
        <div className="text-center">
          {Icon && (
            <div className="mb-4 flex justify-center">
              <div
                className={`rounded-lg p-3 ${
                  isYours ? "bg-blue-500/10" : "bg-zinc-800/50"
                }`}
              >
                <Icon
                  className={`h-6 w-6 ${
                    isYours ? "text-blue-400" : "text-zinc-500"
                  }`}
                />
              </div>
            </div>
          )}
          <h3 className="text-xl font-bold text-white">{column.name}</h3>
          {column.description && (
            <p className="mt-2 text-sm text-zinc-500">{column.description}</p>
          )}
          {showScoreSummary && score !== undefined && (
            <div className="mt-4 flex items-center justify-center gap-2">
              {isLeader && <Crown className="h-4 w-4 text-yellow-500" />}
              <div className="rounded-full bg-zinc-900 px-3 py-1">
                <span className="text-sm font-bold text-white">{score}</span>
                <span className="ml-1 text-xs text-zinc-500">wins</span>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  };
 
  const groupedFeatures = features.reduce(
    (acc, feature) => {
      const category = feature.category || "Features";
      if (!acc[category]) {
        acc[category] = [];
      }
      acc[category].push(feature);
      return acc;
    },
    {} as Record<string, ComparisonFeature[]>,
  );
 
  return (
    <section className="w-full bg-black py-12 sm:py-16 lg:py-20 z-30">
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-3xl space-y-4 text-center">
          <h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl">
            {headline}
          </h2>
          {description && (
            <p className="text-lg text-zinc-400 md:text-xl">{description}</p>
          )}
        </div>
 
        <div className="mx-auto mt-12 max-w-7xl">
          <div className="hidden lg:grid lg:grid-cols-4 lg:gap-6">
            <div className="p-6" />
            <ColumnHeader
              column={columns.yours}
              type="yours"
              score={scores.yours}
            />
            <ColumnHeader
              column={columns.competitorA}
              type="competitorA"
              score={scores.competitorA}
            />
            <ColumnHeader
              column={columns.competitorB}
              type="competitorB"
              score={scores.competitorB}
            />
          </div>
 
          <div className="mt-8 overflow-hidden rounded-2xl border border-zinc-800/50 bg-zinc-950">
            <div className="border-b border-zinc-800/50 p-4 lg:hidden">
              <select className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2 text-white">
                <option>{columns.yours.name}</option>
                <option>{columns.competitorA.name}</option>
                <option>{columns.competitorB.name}</option>
              </select>
            </div>
 
            {Object.entries(groupedFeatures).map(
              ([category, categoryFeatures]) => (
                <div key={category}>
                  <div className="border-b border-zinc-800/50 bg-zinc-900/50 px-6 py-3">
                    <h4 className="text-sm font-semibold uppercase tracking-wider text-zinc-400">
                      {category}
                    </h4>
                  </div>
                  <div className="divide-y divide-zinc-800/50">
                    {categoryFeatures.map((feature, index) => {
                      const hasWinner = feature.winner && showWinnerBadges;
                      return (
                        <div
                          key={index}
                          className={`group relative grid grid-cols-1 gap-4 p-6 transition-all lg:grid-cols-4 lg:items-center ${
                            hasWinner && feature.winner === "yours"
                              ? "bg-blue-500/5 hover:bg-blue-500/10"
                              : "hover:bg-zinc-900/30"
                          }`}
                        >
                          {hasWinner && feature.winner === "yours" && (
                            <div className="absolute -left-1 top-1/2 hidden h-full w-1 -translate-y-1/2 rounded-r bg-blue-500 lg:block" />
                          )}
                          <div className="flex items-start gap-2">
                            <div className="flex-1">
                              <h5 className="font-semibold text-white">
                                {feature.name}
                              </h5>
                              {feature.description && (
                                <p className="mt-1 text-sm text-zinc-500">
                                  {feature.description}
                                </p>
                              )}
                            </div>
                            {feature.tooltip && (
                              <div className="group/tooltip relative">
                                <Info className="h-4 w-4 text-zinc-600 transition-colors hover:text-zinc-400" />
                                <div className="pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden w-48 -translate-x-1/2 rounded-lg border border-zinc-800 bg-zinc-900 p-2 text-xs text-zinc-400 shadow-xl group-hover/tooltip:block">
                                  {feature.tooltip}
                                </div>
                              </div>
                            )}
                          </div>
                          <div
                            className={`flex items-center justify-center lg:justify-center ${
                              hasWinner && feature.winner === "yours"
                                ? "rounded-lg bg-blue-500/10 p-2"
                                : ""
                            }`}
                          >
                            <div className="mr-auto text-sm text-zinc-500 lg:hidden">
                              {columns.yours.name}:
                            </div>
                            {renderValue(
                              feature.yours,
                              feature.winner === "yours",
                            )}
                          </div>
                          <div
                            className={`flex items-center justify-center lg:justify-center ${
                              hasWinner && feature.winner === "competitorA"
                                ? "rounded-lg bg-zinc-800/30 p-2"
                                : ""
                            }`}
                          >
                            <div className="mr-auto text-sm text-zinc-500 lg:hidden">
                              {columns.competitorA.name}:
                            </div>
                            {renderValue(
                              feature.competitorA,
                              feature.winner === "competitorA",
                            )}
                          </div>
                          <div
                            className={`flex items-center justify-center lg:justify-center ${
                              hasWinner && feature.winner === "competitorB"
                                ? "rounded-lg bg-zinc-800/30 p-2"
                                : ""
                            }`}
                          >
                            <div className="mr-auto text-sm text-zinc-500 lg:hidden">
                              {columns.competitorB.name}:
                            </div>
                            {renderValue(
                              feature.competitorB,
                              feature.winner === "competitorB",
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ),
            )}
          </div>
        </div>
      </div>
    </section>
  );
}