"use client";

import { Check, X } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n/context";

export function Comparison() {
  const { t } = useLanguage();

  return (
    <section className="py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.comparison.eyebrow}
          title={t.comparison.title}
          description={t.comparison.description}
        />

        <div className="mx-auto grid w-full max-w-4xl gap-6 sm:grid-cols-2">
          {t.comparison.columns.map((column, i) => {
            const highlight = i === 1;
            return (
              <FadeIn
                key={column.title}
                delay={i * 0.08}
                className={cn(
                  "flex flex-col gap-5 rounded-2xl border p-6 sm:p-7",
                  highlight
                    ? "border-brand-cyan/40 bg-primary/5 shadow-lg shadow-brand-blue/10"
                    : "border-border bg-card/40",
                )}
              >
                <h3 className="text-base font-semibold text-foreground">
                  {column.title}
                </h3>
                <ul className="flex flex-col gap-3">
                  {column.items.map((item) => (
                    <li key={item} className="flex items-start gap-2.5 text-sm">
                      {highlight ? (
                        <Check className="mt-0.5 size-4 shrink-0 text-success" />
                      ) : (
                        <X className="mt-0.5 size-4 shrink-0 text-muted-foreground/60" />
                      )}
                      <span className={highlight ? "text-foreground" : "text-muted-foreground"}>
                        {item}
                      </span>
                    </li>
                  ))}
                </ul>
              </FadeIn>
            );
          })}
        </div>
      </Container>
    </section>
  );
}