import type { Metadata } from "next";
import Link from "next/link";
import { PageHero } from "@/components/site/page-hero";
import { Reveal, Stagger, StaggerItem } from "@/components/site/motion";
import { SectionHeading } from "@/components/site/section-heading";
import { Icon } from "@/components/site/icon";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { getIndustries } from "@/lib/queries";
import { ArrowRight, CheckCircle2 } from "lucide-react";

export const metadata: Metadata = {
  title: "Industries We Serve",
  description: "AHE Services serves textile, pharmaceutical, food & beverage, hospitals, commercial buildings and data centers with specialized HVAC solutions.",
  alternates: { canonical: "/industries" },
};

export const revalidate = 60;

export default async function IndustriesPage() {
  const industries = await getIndustries();
  return (
    <>
      <PageHero
        eyebrow="Industries We Serve"
        title={<>Specialized Cooling for <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Every Sector</span></>}
        subtitle="Different industries demand different HVAC approaches. We bring sector-specific expertise to every project we take on."
        breadcrumbs={[{ label: "Industries" }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx">
          <Stagger className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {industries.map((ind) => (
              <StaggerItem key={ind.id}>
                <Card className="group h-full rounded-2xl overflow-hidden border-border/70 hover:shadow-brand hover:-translate-y-1 transition-all duration-300">
                  <div className="relative aspect-[16/10] brand-gradient overflow-hidden">
                    {ind.image ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={ind.image} alt={ind.title} className="size-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500" />
                    ) : (
                      <div className="size-full grid place-items-center">
                        <Icon name={ind.icon} className="size-16 text-white/40" />
                      </div>
                    )}
                    <div className="absolute inset-0 bg-gradient-to-t from-[oklch(0.16_0.05_260)] to-transparent" />
                    <div className="absolute bottom-0 left-0 right-0 p-5">
                      <div className="grid place-items-center size-10 rounded-xl bg-white/15 mb-2">
                        <Icon name={ind.icon} className="size-5 text-white" />
                      </div>
                      <h3 className="text-white font-bold text-lg">{ind.title}</h3>
                    </div>
                  </div>
                  <div className="p-5">
                    <p className="text-sm text-muted-foreground leading-relaxed">{ind.description}</p>
                  </div>
                </Card>
              </StaggerItem>
            ))}
          </Stagger>
        </div>
      </section>

      <section className="py-20 lg:py-24 navy-bg text-white relative overflow-hidden">
        <div className="absolute inset-0 grid-pattern opacity-20" />
        <div className="container-mx relative">
          <Reveal>
            <SectionHeading light eyebrow="Why It Matters" title={<>Industry-Specific <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Expertise</span></>} subtitle="A hospital OT and a textile mill have nothing in common — except that both need a partner who understands their environment." />
          </Reveal>
          <Stagger className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {[
              "Compliance with sector regulations (GMP, healthcare, food safety)",
              "Correct load calculation for your equipment and occupancy",
              "Right refrigerant and equipment selection for the application",
              "Backup and redundancy for critical environments",
              "Energy optimization tailored to your operating schedule",
              "Documentation that supports your audits and certifications",
            ].map((t) => (
              <StaggerItem key={t}>
                <div className="flex items-start gap-3 rounded-xl bg-white/5 border border-white/10 p-4">
                  <CheckCircle2 className="size-5 text-[var(--brand-cyan)] shrink-0 mt-0.5" />
                  <span className="text-sm text-white/80">{t}</span>
                </div>
              </StaggerItem>
            ))}
          </Stagger>
          <Reveal>
            <div className="mt-12 text-center">
              <Button asChild size="lg" className="brand-gradient text-white">
                <Link href="/contact">Discuss Your Industry Needs <ArrowRight className="size-4" /></Link>
              </Button>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}