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 { CardItem } from "@/data/site-pages";

interface AnchoredCardGridProps {
  tag?: string;
  title: string;
  description?: string;
  items: CardItem[];
  /** Number of columns at lg breakpoint */
  columns?: 2 | 3;
}

/**
 * AnchoredCardGrid — data-driven grid of bordered cards.
 *
 * Each card carries an `id` so navbar hash links (e.g. /solutions#devops)
 * scroll to it. Shared by the Solutions and Industries pages; composes the
 * existing SectionContainer / PageContainer / SectionHeading primitives.
 */
export function AnchoredCardGrid({
  tag,
  title,
  description,
  items,
  columns = 3,
}: AnchoredCardGridProps) {
  const colClass = columns === 2 ? "md:grid-cols-2" : "md:grid-cols-2 lg:grid-cols-3";

  return (
    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
      <PageContainer>
        <SectionHeading
          tag={tag}
          title={title}
          description={description}
          titleClassName="text-tenext-dark max-w-[720px]"
          descriptionClassName="max-w-[620px]"
          className="mb-[50px]"
        />

        <div className={`grid grid-cols-1 gap-[20px] ${colClass}`}>
          {items.map((item, index) => (
            <RevealOnView key={item.id} delay={index * 90}>
              <div
                id={item.id}
                className="flex h-full scroll-mt-[120px] flex-col gap-[15px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2"
              >
                <h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
                  {item.title}
                </h3>
                <p className="text-[16px] leading-[1.7] text-tenext-text-muted">
                  {item.description}
                </p>
              </div>
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}