"use client";

import { Check, X } from "lucide-react";
import { Reveal, Stagger, staggerItem } from "@/components/reveal";
import { motion } from "framer-motion";
import { whyChooseUs } from "@/data/content";

const comparisonRows = [
  { label: "Official Meta API access", us: true, others: false },
  { label: "Unified team inbox", us: true, others: false },
  { label: "No-code automation flows", us: true, others: false },
  { label: "Guaranteed message delivery", us: true, others: true },
  { label: "Green tick verification support", us: true, others: false },
  { label: "Transparent, per-conversation pricing", us: true, others: false },
];

export function WhyChooseUs() {
  return (
    <section className="section-pad relative">
      <div className="container grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
        <div>
          <Reveal>
            <span className="eyebrow">Why teams switch to us</span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-ink-900 sm:text-4xl dark:text-white">
              Built to outperform traditional messaging
            </h2>
          </Reveal>

          <Stagger className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
            {whyChooseUs.map((item) => (
              <motion.div key={item.title} variants={staggerItem}>
                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-whatsapp/10 text-whatsapp-dark dark:text-whatsapp-light">
                  <Check className="h-5 w-5" strokeWidth={2.5} />
                </div>
                <h3 className="mt-3 font-semibold text-ink-900 dark:text-white">{item.title}</h3>
                <p className="mt-1.5 text-sm text-ink-500 dark:text-white/50">{item.description}</p>
              </motion.div>
            ))}
          </Stagger>
        </div>

        <Reveal direction="left">
          <div className="glass-card overflow-hidden p-2">
            <div className="grid grid-cols-3 gap-2 rounded-2xl bg-ink-900/[0.03] p-4 text-sm font-semibold text-ink-900 dark:bg-white/[0.04] dark:text-white">
              <span>Capability</span>
              <span className="text-center text-whatsapp-dark dark:text-whatsapp-light">ChatNest</span>
              <span className="text-center text-ink-400 dark:text-white/40">Traditional SMS</span>
            </div>
            <div className="divide-y divide-ink-900/5 dark:divide-white/5">
              {comparisonRows.map((row) => (
                <div key={row.label} className="grid grid-cols-3 items-center gap-2 px-4 py-3.5 text-sm">
                  <span className="text-ink-600 dark:text-white/60">{row.label}</span>
                  <span className="flex justify-center">
                    {row.us ? (
                      <Check className="h-4 w-4 text-whatsapp" />
                    ) : (
                      <X className="h-4 w-4 text-ink-300" />
                    )}
                  </span>
                  <span className="flex justify-center">
                    {row.others ? (
                      <Check className="h-4 w-4 text-ink-400" />
                    ) : (
                      <X className="h-4 w-4 text-ink-300 dark:text-white/20" />
                    )}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}