import { CheckCircle2 } from "lucide-react";

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

export default function ProductBenefits({ copy, product }: { copy: ProductPageCopy; product: Product }) {
  const theme = productThemes[product.tone];
  const isSociety = product.slug === "societypro";
  return (
    <section id="benefits" className="mx-auto grid max-w-[1360px] scroll-mt-24 items-center gap-9 px-6 py-16 lg:grid-cols-[1.05fr_0.95fr] xl:px-8">
      <div className={`overflow-hidden rounded-[26px] border bg-gradient-to-br p-3 shadow-[0_18px_46px_rgba(45,61,108,0.11)] ${theme.border} ${theme.soft} ${isSociety ? "lg:order-2" : ""}`}>
        <ProductWorkflowPreview product={product} />
      </div>
      <div className={isSociety ? "lg:order-1" : undefined}>
        <ProductSectionHeading eyebrow={copy.benefitsEyebrow} title={copy.benefitsTitle} tone={product.tone} />
        <div className="mt-6 grid gap-3">
          {product.benefits.map((benefit) => (
            <div key={benefit} className="flex items-center gap-3 rounded-2xl border border-[#e8ecf4] bg-white p-4 shadow-[0_4px_14px_rgba(45,61,108,0.035)]">
              <CheckCircle2 size={18} className={`shrink-0 ${theme.accentText}`} />
              <p className="text-[13px] font-bold leading-6 text-[#59657e]">{benefit}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}