import { ArrowRight, CheckCircle2 } from "lucide-react";
import Link from "next/link";

import ProductArtwork from "@/components/home/ProductArtwork";
import SectionHeader from "@/components/home/SectionHeader";
import type { Product } from "@/data/products.data";
import type { Locale } from "@/lib/locales";
import { localizedPath } from "@/lib/routes";

const tones = {
  violet: {
    border: "border-[#e2dcfb]",
    icon: "border-[#cfc4ff] bg-[#faf8ff] text-[#7961ec]",
    title: "text-[#7356eb]",
    check: "text-[#8467ef]",
    art: "from-[#fbfaff] to-[#f4f0ff]",
  },
  blue: {
    border: "border-[#dce6fb]",
    icon: "border-[#c7d9ff] bg-[#f7faff] text-[#4e7ee6]",
    title: "text-[#4173df]",
    check: "text-[#5d8bea]",
    art: "from-[#fbfdff] to-[#eef5ff]",
  },
  green: {
    border: "border-[#d8eee5]",
    icon: "border-[#bce4d1] bg-[#f5fdf9] text-[#2fa56e]",
    title: "text-[#229563]",
    check: "text-[#39af79]",
    art: "from-[#fbfffd] to-[#effbf5]",
  },
};

export default function ProductsSection({
  exploreLabel,
  locale,
  products,
  subtitle,
  title,
}: {
  exploreLabel: string;
  locale: Locale;
  products: Product[];
  subtitle: string;
  title: string;
}) {
  return (
    <section id="products" className="mx-auto max-w-[1360px] scroll-mt-20 px-6 pb-5 xl:px-8">
      {title || subtitle ? <SectionHeader title={title} subtitle={subtitle} /> : null}

      <div className="mt-5 grid gap-5 lg:grid-cols-3">
        {products.map((product) => {
          const Icon = product.icon;
          const tone = tones[product.tone];

          return (
            <article
              key={product.name}
              className={`group relative min-h-[382px] overflow-hidden rounded-[14px] border bg-white p-5 shadow-[0_6px_18px_rgba(51,66,116,0.045)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_16px_26px_rgba(61,77,135,0.1)] ${tone.border}`}
            >
              <div className={`absolute bottom-0 right-0 h-[63%] w-[53%] bg-gradient-to-tl ${tone.art}`} />
              <div className="absolute -bottom-1 -right-3 h-[60%] w-[55%]">
                <ProductArtwork type={product.artwork} />
              </div>

              <div className="relative z-10">
                <div className={`grid h-10 w-10 place-items-center rounded-lg border ${tone.icon}`}>
                  <Icon size={20} strokeWidth={1.9} />
                </div>

                <h3 className={`mt-3 text-[20px] font-extrabold tracking-[-0.04em] ${tone.title}`}>{product.name}</h3>
                <p className="mt-2 max-w-[270px] text-[13px] leading-[1.7] text-[#687692]">{product.short}</p>

                <div className="mt-4 space-y-2.5">
                  {product.features.map((feature) => (
                    <div key={feature} className="flex max-w-[270px] items-center gap-2 text-[12px] font-medium text-[#5f6e8c]">
                      <CheckCircle2 size={13} className={`shrink-0 ${tone.check}`} />
                      {feature}
                    </div>
                  ))}
                </div>

                <Link href={localizedPath(locale, `/products/${product.slug}`)} className={`mt-8 inline-flex items-center gap-2 text-[12px] font-bold ${tone.title}`}>
                  {exploreLabel} {product.name}
                  <ArrowRight size={13} />
                </Link>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}