import Container from "@/components/ui/Container";
import Reveal from "@/components/ui/Reveal";
import { Check, X, Minus } from "lucide-react";

type Cell = "yes" | "no" | "partial" | string;

const ROWS: { label: string; diy: Cell; cp: Cell; lawyer: Cell }[] = [
  { label: "Plain-language guidance", diy: "no", cp: "yes", lawyer: "yes" },
  { label: "Spanish-first support", diy: "no", cp: "yes", lawyer: "Varies" },
  { label: "Document organizer", diy: "no", cp: "yes", lawyer: "yes" },
  { label: "Readiness snapshot", diy: "no", cp: "yes", lawyer: "yes" },
  { label: "Civics & interview practice", diy: "no", cp: "yes", lawyer: "Sometimes" },
  { label: "Legal advice & form review", diy: "no", cp: "We connect you", lawyer: "yes" },
  { label: "Transparent online pricing", diy: "yes", cp: "yes", lawyer: "Varies" },
  { label: "Online progress tracking", diy: "no", cp: "yes", lawyer: "Varies" },
];

function Mark({ value }: { value: Cell }) {
  if (value === "yes")
    return (
      <span className="mx-auto grid h-7 w-7 place-items-center rounded-full bg-emerald-50 text-emerald-700">
        <Check className="h-4 w-4" strokeWidth={3} />
      </span>
    );
  if (value === "no")
    return (
      <span className="mx-auto grid h-7 w-7 place-items-center rounded-full bg-navy/5 text-navy/35">
        <X className="h-4 w-4" strokeWidth={2.5} />
      </span>
    );
  if (value === "partial")
    return (
      <span className="mx-auto grid h-7 w-7 place-items-center rounded-full bg-gold-50 text-gold-700">
        <Minus className="h-4 w-4" strokeWidth={3} />
      </span>
    );
  return (
    <span className="block text-center text-xs font-semibold text-navy/55">
      {value}
    </span>
  );
}

export default function Comparison() {
  return (
    <section className="bg-cream py-20 md:py-28">
      <Container>
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">Where we fit</span>
          <h2 className="mt-5 text-balance text-3xl font-600 text-navy sm:text-4xl">
            More guidance than going it alone. More affordable than starting
            with a lawyer.
          </h2>
        </Reveal>

        <Reveal delay={120}>
          <div className="mt-12 overflow-hidden rounded-3xl border border-navy/[0.07] bg-white shadow-card">
            <div className="overflow-x-auto">
              <table className="w-full min-w-[640px] border-collapse">
                <thead>
                  <tr className="border-b border-navy/8">
                    <th className="px-6 py-5 text-left text-sm font-600 text-navy/50">
                      Feature
                    </th>
                    <th className="px-4 py-5 text-center text-sm font-600 text-navy/55">
                      On your own
                    </th>
                    <th className="relative px-4 py-5 text-center">
                      <span className="font-display text-base font-700 text-navy">
                        CitizenPilot
                      </span>
                      <span className="absolute inset-x-2 -top-px h-1 rounded-b bg-gold" />
                    </th>
                    <th className="px-4 py-5 text-center text-sm font-600 text-navy/55">
                      Immigration attorney
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {ROWS.map((row, i) => (
                    <tr
                      key={row.label}
                      className={i % 2 === 1 ? "bg-mist/40" : "bg-white"}
                    >
                      <td className="px-6 py-4 text-sm font-medium text-navy/80">
                        {row.label}
                      </td>
                      <td className="px-4 py-4">
                        <Mark value={row.diy} />
                      </td>
                      <td className="bg-gold/[0.05] px-4 py-4">
                        <Mark value={row.cp} />
                      </td>
                      <td className="px-4 py-4">
                        <Mark value={row.lawyer} />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Reveal>

        <Reveal>
          <p className="mx-auto mt-8 max-w-2xl text-center text-sm leading-relaxed text-navy/55">
            For legal advice, form preparation, or complex cases, a licensed
            immigration attorney is the right choice — and we&apos;ll help you
            find one.
          </p>
        </Reveal>
      </Container>
    </section>
  );
}