import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { Icon } from "@/components/shared/Icon";
import { IconCard } from "@/data/about";

interface IconCardGridProps {
  id?: string;
  eyebrow?: string;
  title: string;
  description?: string;
  items: IconCard[];
  columns?: 2 | 3 | 4;
  theme?: "light" | "surface" | "dark";
}

const colClass: Record<number, string> = {
  2: "sm:grid-cols-2",
  3: "sm:grid-cols-2 lg:grid-cols-3",
  4: "sm:grid-cols-2 lg:grid-cols-4",
};

/**
 * IconCardGrid — reusable premium icon-card section for the About page.
 * Powers Mission/Vision/Values, Why Tenext, Capabilities, Technology
 * Ecosystem, and Enterprise Trust with a single, consistent card.
 */
export function IconCardGrid({
  id,
  eyebrow,
  title,
  description,
  items,
  columns = 3,
  theme = "light",
}: IconCardGridProps) {
  const isDark = theme === "dark";
  const sectionBg =
    theme === "dark"
      ? "bg-tenext-dark"
      : theme === "surface"
        ? "bg-tenext-surface-muted"
        : "bg-white";

  const cardBase = isDark
    ? "border-white/10 bg-white/[0.03] hover:border-tenext-teal/40"
    : "border-tenext-card-border bg-white hover:border-tenext-teal/50";
  const titleColor = isDark ? "text-white" : "text-tenext-dark";

  return (
    <SectionContainer id={id} paddingY="lg" className={`${sectionBg} px-[20px] scroll-mt-[110px]`}>
      <PageContainer>
        <SectionHeading
          tag={eyebrow}
          title={title}
          description={description}
          titleClassName={`${titleColor} max-w-[760px]`}
          descriptionClassName={`max-w-[640px] ${isDark ? "text-tenext-text-muted" : ""}`}
          className="mb-[50px]"
        />

        <div className={`grid grid-cols-1 gap-[20px] ${colClass[columns]}`}>
          {items.map((item, index) => (
            <RevealOnView key={item.title} delay={index * 80}>
              <div
                className={`group flex h-full flex-col gap-[16px] rounded-[25px] border p-[35px] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.12)] ${cardBase}`}
              >
                <span className="flex h-[54px] w-[54px] items-center justify-center rounded-[15px] bg-tenext-teal/10 text-tenext-teal transition-colors duration-300 group-hover:bg-tenext-teal group-hover:text-tenext-dark">
                  <Icon name={item.icon} className="h-[26px] w-[26px]" />
                </span>
                <h3 className={`font-[var(--font-sora)] text-[20px] font-bold leading-[1.3] ${titleColor}`}>
                  {item.title}
                </h3>
                <p className="text-[15px] leading-[1.7] text-tenext-text-muted">
                  {item.description}
                </p>
              </div>
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}