import Link from "next/link";
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 { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
import { Icon } from "@/components/shared/Icon";
import { industries } from "@/data/site-pages";
import { industryIcons } from "@/data/about";

/** AboutIndustries — premium industry cards (replaces the plain text list). */
export function AboutIndustries() {
  return (
    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
      <PageContainer>
        <SectionHeading
          tag="industries"
          title="Depth across the industries you operate in"
          description="We bring domain understanding and engineering rigor to the sectors where Tenext delivers transformation."
          titleClassName="text-tenext-dark max-w-[720px]"
          descriptionClassName="max-w-[620px]"
          className="mb-[50px]"
        />

        <div className="grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3">
          {industries.map((industry, index) => (
            <RevealOnView key={industry.id} delay={index * 80}>
              <Link
                href={`/industries#${industry.id}`}
                className="group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-dark p-[35px] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.22)]"
              >
                <div className="pointer-events-none absolute -right-[20%] -top-[30%] h-[240px] w-[240px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.16),transparent_65%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

                <span className="relative flex h-[60px] w-[60px] items-center justify-center rounded-[16px] bg-white/[0.06] text-tenext-teal">
                  <Icon name={industryIcons[industry.id] ?? "building"} className="h-[28px] w-[28px]" />
                </span>

                <div className="relative mt-[70px]">
                  <h3 className="font-[var(--font-dm-sans)] text-[22px] font-bold text-white">
                    {industry.title}
                  </h3>
                  <p className="mt-[12px] text-[15px] leading-[1.7] text-tenext-text-muted">
                    {industry.description}
                  </p>
                </div>

                <span className="relative mt-[24px] flex h-[42px] w-[42px] items-center justify-center rounded-full border border-white/15 text-white transition-colors duration-300 group-hover:bg-tenext-teal group-hover:text-tenext-dark">
                  <ArrowIcon className="h-[14px] w-[14px]" />
                </span>
              </Link>
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}