import Link from "next/link";
import Image from "next/image";
import { constructMetadata } from "@/lib/seo";
import { getAllIndustries } from "@/data/industries";
import { ArrowRight } from "@/components/ui/icons";

export const metadata = constructMetadata({
  title: "Industries",
  description:
    "Industry-specific software development — healthcare, fintech, real estate, e-commerce and gaming. Dedicated teams, proven playbooks and measurable outcomes.",
  path: "/industries",
});

export default function IndustriesPage() {
  const industries = getAllIndustries();

  return (
    <section className="relative overflow-hidden bg-background pb-16 pt-24 text-foreground md:pb-24 md:pt-32">
      <div className="pointer-events-none absolute left-1/2 top-0 h-72 w-[44rem] -translate-x-1/2 rounded-full bg-primary/[0.06] blur-[150px]" />
      <div className="container relative">
        {/* Header */}
        <div className="mx-auto max-w-2xl text-center">
          <span className="font-heading text-sm font-semibold uppercase tracking-wider text-primary">Industries</span>
          <h1 className="mt-3 font-heading text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
            Software built for your{" "}
            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">industry.</span>
          </h1>
          <p className="mt-5 text-base leading-relaxed text-muted-foreground sm:text-lg">
            Every industry has its own users, regulations and economics. We bring dedicated teams and
            proven playbooks to each one — so you ship faster and with less risk.
          </p>
        </div>

        {/* Grid */}
        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {industries.map((ind) => (
            <Link
              key={ind.slug}
              href={`/industries/${ind.slug}`}
              className="group flex flex-col overflow-hidden rounded-3xl border border-border bg-surface/40 transition-all duration-300 hover:-translate-y-1 hover:border-primary/40"
            >
              <div className="relative aspect-[16/10] overflow-hidden">
                <Image src={ind.heroImage} alt={ind.name} fill sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw" className="object-cover transition-transform duration-700 group-hover:scale-105" />
                <span className="absolute inset-0 bg-gradient-to-t from-background/85 via-background/30 to-transparent" />
                <span className="absolute left-5 top-5 rounded-full border border-primary/40 bg-background/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary backdrop-blur">
                  {ind.name}
                </span>
              </div>
              <div className="flex flex-1 flex-col p-7">
                <h2 className="font-heading text-xl font-semibold transition-colors duration-300 group-hover:text-primary">{ind.eyebrow}</h2>
                <p className="mt-2 line-clamp-3 flex-1 text-sm leading-relaxed text-muted-foreground">{ind.subheadline}</p>
                <span className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary">
                  Explore
                  <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" />
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}