import { BarChart3, CheckCircle2, LayoutDashboard, 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 overviewIcons = [LayoutDashboard, UsersRound, BarChart3];

export default function ProductOverview({ copy, product }: { copy: ProductPageCopy; product: Product }) {
  const theme = productThemes[product.tone];
  return (
    <section id="workspace-overview" className="mx-auto grid max-w-[1360px] scroll-mt-24 items-center gap-8 px-6 py-16 lg:grid-cols-[0.92fr_1.08fr] xl:px-8">
      <ProductSectionHeading eyebrow={copy.overviewEyebrow} title={copy.overviewTitle} description={copy.overviewDescription} tone={product.tone} />
      <div className={`rounded-[24px] border bg-gradient-to-br p-4 shadow-[0_16px_42px_rgba(45,61,108,0.08)] ${theme.border} ${theme.soft}`}>
        <div className="grid gap-3 rounded-[18px] border border-white/80 bg-white/85 p-4 backdrop-blur sm:grid-cols-3">
          {product.features.slice(0, 3).map((feature, index) => {
            const Icon = overviewIcons[index] ?? CheckCircle2;
            return (
              <article key={feature} className="rounded-2xl border border-[#edf0f6] bg-white p-4">
                <span className={`grid h-10 w-10 place-items-center rounded-xl ${theme.icon}`}><Icon size={18} /></span>
                <h3 className="mt-4 text-[13px] font-extrabold leading-5 text-[#273354]">{feature}</h3>
                <div className="mt-4 h-1.5 rounded-full bg-[#edf0f6]">
                  <div className={`h-full rounded-full bg-gradient-to-r ${theme.accent}`} style={{ width: `${68 + index * 10}%` }} />
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}