"use client";

import "./global.scss";
import "atropos/css";

import { FC } from "react";
import { cn } from "@/lib/utils";
import Atropos from "atropos/react";
import { BorderBeam } from "@/components/magicui/border-beam";
import GridPattern from "@/components/magicui/bg/grid-pattern";
import { motion, Variants } from "framer-motion";
import { DATA_COMPARISON_LIST } from "@/data/comparisonList";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({
  subsets: ["latin"],
  weight: ["400", "700"],
});

const variants: Variants = {
  offscreen: {
    y: 20,
    opacity: 0,
  },
  onscreen: (custom: number) => ({
    y: 0,
    opacity: 1,
    transition: {
      delay: custom * 0.1,
      duration: 0.4,
    },
  }),
};

export const ComparisonTable: FC = () => {
  return (
    <section className="py-24 bg-black relative">
      <GridPattern
        width={50}
        height={50}
        strokeDasharray={0}
        x={-1}
        y={-1}
        className={cn(
          "[mask-image:radial-gradient(450px_circle_at_center,white,transparent)] sm:[mask-image:radial-gradient(650px_circle_at_center,white,transparent)] stroke-borderDark/40"
        )}
      />
      <div className="container mx-auto px-4">
        <motion.article
          initial="offscreen"
          whileInView="onscreen"
          viewport={{ once: true }}
          className="grid gap-3 justify-center items-center text-center"
        >
          <motion.h2
            custom={1}
            variants={variants}
            style={montserrat.style}
            className="text-3xl lg:text-[32px] tracking-tight font-bold text-transparent bg-clip-text bg-gradient-to-b from-black to-white mb-8"
          >
            How we compare to other password managers
          </motion.h2>
        </motion.article>
        <Atropos
          rotateTouch={false}
          highlight={false}
          shadow={false}
          className="bg-transparent"
          rotateXMax={5}
          rotateYMax={5}
          activeOffset={15}
        >
          <div className="relative border-1 border-borderDark rounded-2xl overflow-hidden bg-black">
            <div className="relative z-10 p-4">
              <table className="min-w-full bg-black text-white">
                <thead>
                  <tr>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300">
                      Password Manager
                    </th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300">
                      Vaultify
                    </th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300">
                      LastPass
                    </th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300">
                      1Password
                    </th>
                    <th className="py-3 px-4 text-left text-sm font-semibold text-zinc-300">
                      Dashlane
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-300">
                  {DATA_COMPARISON_LIST?.map((item, index) => (
                    <tr key={index}>
                      <td className="py-3 px-4 text-sm text-zinc-400">{item.feature}</td>
                      <td className="py-3 px-4 text-sm text-zinc-400">{item.vaultify ? "✅" : "❌"}</td>
                      <td className="py-3 px-4 text-sm text-zinc-400">{item.lastpass ? "✅" : "❌"}</td>
                      <td className="py-3 px-4 text-sm text-zinc-400">{item.onepass ? "✅" : "❌"}</td>
                      <td className="py-3 px-4 text-sm text-zinc-400">{item.dashlane ? "✅" : "❌"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <BorderBeam colorFrom="#0072F5" colorTo="#FFF" size={200} />
            </div>
          </div>
        </Atropos>
      </div>
    </section>
  );
};