import { Navbar } from "@/components/sections/Navbar";
import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
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 { PreFooterCTA } from "@/components/shared/PreFooterCTA";
import { resources } from "@/data/site-pages";

export const metadata = {
  title: "Resources",
  description:
    "Ideas for the digital enterprise — perspectives on cloud, data, AI, and modern engineering.",
};

export default function ResourcesPage() {
  return (
    <>
      <Navbar />
      <main className="bg-white">
        <PageTitleBanner
          title="Resources"
          breadcrumbs={[{ label: "Home", href: "/" }, { label: "Resources" }]}
        />
        <SectionContainer paddingY="lg" className="px-[20px]">
          <PageContainer>
            <SectionHeading
              tag="[ insights ]"
              title="The areas we help enterprises navigate"
              description="Articles and guides will be published here. These are the domains Tenext advises on across cloud, data, AI, and product engineering."
              titleClassName="text-tenext-dark max-w-[720px]"
              descriptionClassName="max-w-[620px]"
              className="mb-[50px]"
            />

            <div className="grid grid-cols-1 gap-[20px] md:grid-cols-2 lg:grid-cols-3">
              {resources.map((item, index) => (
                <RevealOnView key={item.id} delay={index * 90}>
                  <article className="flex h-full flex-col gap-[15px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
                    <div className="text-[13px] font-semibold uppercase tracking-[0.1em] text-tenext-teal">
                      {item.category}
                    </div>
                    <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>
                  </article>
                </RevealOnView>
              ))}
            </div>
          </PageContainer>
        </SectionContainer>
        <PreFooterCTA />
      </main>
    </>
  );
}