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 { getServices } from "@/lib/queries";
import { ArrowRight, CheckCircle2, ArrowUpRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Our Services",
  description: "Explore AHE Services' complete HVAC offerings — industrial AC, installation, repair, water chillers, air dryers, cold storage, duct cleaning, AMC contracts and more.",
  alternates: { canonical: "/services" },
};

export const revalidate = 60;

export default async function ServicesPage() {
  const services = await getServices();
  return (
    <>
      <PageHero
        eyebrow="Our Services"
        title={<>Complete HVAC Solutions, <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">One Trusted Partner</span></>}
        subtitle="Ten specialized service lines covering the full lifecycle of your cooling and refrigeration systems — designed, installed, maintained and manufactured by certified engineers."
        breadcrumbs={[{ label: "Services" }]}
      />

      <section className="py-20 lg:py-24">
        <div className="container-mx">
          <Stagger className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((s) => {
              const features = JSON.parse(s.features || "[]") as string[];
              return (
                <StaggerItem key={s.id}>
                  <Card className="h-full rounded-2xl overflow-hidden border-border/70 hover:shadow-brand hover:-translate-y-1 transition-all duration-300 flex flex-col">
                    <div className="p-6 flex-1">
                      <div className="flex items-start justify-between">
                        <div className="grid place-items-center size-12 rounded-xl bg-[var(--brand-royal)]/10 text-[var(--brand-royal)]">
                          <Icon name={s.icon} className="size-6" />
                        </div>
                      </div>
                      <h3 className="mt-5 font-bold text-lg text-foreground">{s.title}</h3>
                      <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{s.shortDescription}</p>
                      {features.length > 0 && (
                        <ul className="mt-4 space-y-1.5">
                          {features.slice(0, 4).map((f) => (
                            <li key={f} className="flex items-center gap-2 text-sm text-foreground/70">
                              <CheckCircle2 className="size-4 text-[var(--brand-royal)] shrink-0" /> {f}
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                    <div className="p-6 pt-0">
                      <Link href={`/services/${s.slug}`} className="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--brand-royal)] hover:gap-2.5 transition-all">
                        Explore Service <ArrowRight className="size-3.5" />
                      </Link>
                    </div>
                  </Card>
                </StaggerItem>
              );
            })}
          </Stagger>
        </div>
      </section>

      {/* Process */}
      <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="How We Work" title={<>A Clear, <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Proven Process</span></>} subtitle="Four steps from first call to a fully commissioned, warrantied system." />
          </Reveal>
          <Stagger className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-6" stagger={0.1}>
            {[
              { n: "01", t: "Site Survey", d: "Free on-site assessment, load calculation and requirement analysis." },
              { n: "02", t: "Proposal", d: "Itemized quotation with equipment specs, timeline and cost." },
              { n: "03", t: "Execution", d: "Professional installation by certified technicians with daily progress." },
              { n: "04", t: "Handover & Support", d: "Testing, commissioning, documentation and ongoing AMC support." },
            ].map((p) => (
              <StaggerItem key={p.n}>
                <div className="relative rounded-2xl bg-white/5 border border-white/10 p-6 h-full">
                  <div className="text-5xl font-extrabold text-white/10">{p.n}</div>
                  <h3 className="mt-2 font-bold text-white text-lg">{p.t}</h3>
                  <p className="mt-2 text-sm text-white/60 leading-relaxed">{p.d}</p>
                </div>
              </StaggerItem>
            ))}
          </Stagger>
          <Reveal>
            <div className="mt-12 text-center">
              <Button asChild size="lg" className="brand-gradient text-white">
                <Link href="/contact">Start With a Free Survey <ArrowRight className="size-4" /></Link>
              </Button>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}