Features Versus

import { Check, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesVersusRow {
  topic: string;
  before: string;
  after: string;
}

export interface FeaturesVersusProps {
  kicker?: string;
  title?: string;
  beforeLabel?: string;
  afterLabel?: string;
  rows?: FeaturesVersusRow[];
  className?: string;
}

export function FeaturesVersus({
  kicker = "[ 04 ] Before / after",
  title = "The old way was a Google Doc.",
  beforeLabel = "Without Shipyard",
  afterLabel = "With Shipyard",
  rows = [
    { topic: "Writing notes", before: "PM chases engineers on Friday", after: "Drafted from merged PRs" },
    { topic: "Publishing", before: "Copy-paste to 4 tools", after: "One click, every channel" },
    { topic: "Translations", before: "Agency, 2 weeks", after: "24 languages, instantly" },
    { topic: "Adoption", before: "“Wait, we have that?”", after: "In-app badge, +2× usage" },
    { topic: "Cost", before: "~6 hours per release", after: "~10 minutes to review" },
  ],
  className,
}: FeaturesVersusProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="features-versus-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id="features-versus-title" className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>

        <div className="mt-12 grid gap-6 lg:grid-cols-2">
          {([
            { label: beforeLabel, key: "before", tone: "bg-da-surface text-da-surface-fg", icon: X, iconTone: "bg-da-danger text-da-danger-fg", rotate: "lg:-rotate-1" },
            { label: afterLabel, key: "after", tone: "bg-da-primary text-da-primary-fg", icon: Check, iconTone: "bg-da-fg text-da-bg", rotate: "lg:rotate-1" },
          ] as const).map((col) => {
            const Icon = col.icon;
            return (
              <div key={col.key} className={cn("da-stroke shadow-da-lg", col.tone, col.rotate)}>
                <h3 className="da-stroke-b px-6 py-4 font-da-display text-2xl tracking-da-display uppercase">{col.label}</h3>
                <dl>
                  {rows.map((r, i) => (
                    <div key={r.topic} className={cn("grid grid-cols-[auto_1fr] items-start gap-4 px-6 py-4", i > 0 && "da-stroke-t")}>
                      <span aria-hidden className={cn("da-stroke mt-0.5 grid size-6 place-items-center", col.iconTone)}>
                        <Icon className="size-3.5" strokeWidth={4} />
                      </span>
                      <div>
                        <dt className="font-da-mono text-[11px] font-bold tracking-da-label uppercase opacity-70">{r.topic}</dt>
                        <dd className="mt-0.5 text-lg font-bold">{col.key === "before" ? r.before : r.after}</dd>
                      </div>
                    </div>
                  ))}
                </dl>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export default FeaturesVersus;