import { BarChart3, CalendarCheck2, ClipboardCheck, Database, LayoutGrid, UsersRound } from "lucide-react";

import ProductSectionHeading from "@/components/products/ProductSectionHeading";
import { productThemes } from "@/components/products/product-theme";
import type { Product, ProductPageCopy } from "@/data/products.data";

const featureIcons = [UsersRound, Database, CalendarCheck2, LayoutGrid, ClipboardCheck, BarChart3];

export default function ProductFeatures({ copy, product }: { copy: ProductPageCopy; product: Product }) {
  const theme = productThemes[product.tone];
  const isSociety = product.slug === "societypro";
  return (
    <section id="features" className={`scroll-mt-24 border-y border-[#edf0f6] py-16 ${isSociety ? "bg-[#f7fcf9]" : "bg-white"}`}>
      <div className="mx-auto max-w-[1360px] px-6 xl:px-8">
        <ProductSectionHeading centered eyebrow={copy.featuresEyebrow} title={copy.featuresTitle} description={copy.featuresDescription} tone={product.tone} />
        <div className={`mt-8 grid gap-4 sm:grid-cols-2 ${isSociety ? "lg:grid-cols-4" : "lg:grid-cols-3"}`}>
          {product.features.map((feature, index) => {
            const Icon = featureIcons[index] ?? ClipboardCheck;
            return (
              <article key={feature} className={`group rounded-[20px] border bg-white p-5 shadow-[0_6px_18px_rgba(45,61,108,0.04)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_16px_32px_rgba(45,61,108,0.09)] ${theme.border} ${isSociety && index < 2 ? "lg:col-span-2" : ""}`}>
                <span className={`grid h-11 w-11 place-items-center rounded-xl transition group-hover:scale-105 ${theme.icon}`}><Icon size={20} /></span>
                <h3 className="mt-4 text-[15px] font-extrabold text-[#263253]">{feature}</h3>
                <p className="mt-2 text-[13px] leading-6 text-[#748098]">{product.featureDescriptions[index] ?? product.overview}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}