import type { Metadata } from "next";
import { PageHero } from "@/components/site/page-hero";
import { Reveal, Stagger, StaggerItem } from "@/components/site/motion";
import { SectionHeading } from "@/components/site/section-heading";
import { BeforeAfterSlider } from "@/components/site/before-after-slider";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { getBeforeAfters } from "@/lib/queries";
import { MapPin, ArrowRight } from "lucide-react";

export const metadata: Metadata = {
  title: "Before & After",
  description: "See real HVAC transformations by AHE Services — drag the sliders to compare before and after results of our cleaning, repair and installation work.",
  alternates: { canonical: "/before-after" },
};

export const revalidate = 60;

export default async function BeforeAfterPage() {
  const items = await getBeforeAfters();
  const categories = [...new Set(items.map((i) => i.category).filter(Boolean))] as string[];

  return (
    <>
      <PageHero
        eyebrow="Real Results"
        title={<>See the <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Transformation</span></>}
        subtitle="Drag the sliders to witness the difference our professional cleaning, repair and installation services deliver on real client sites."
        breadcrumbs={[{ label: "Before & After" }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx">
          {categories.length > 0 && (
            <Reveal>
              <div className="flex flex-wrap gap-2 mb-10">
                <span className="px-4 py-2 rounded-full bg-[var(--brand-royal)] text-white text-sm font-semibold">All</span>
                {categories.map((c) => (
                  <span key={c} className="px-4 py-2 rounded-full bg-muted text-muted-foreground text-sm font-medium">{c}</span>
                ))}
              </div>
            </Reveal>
          )}

          <Stagger className="space-y-12" stagger={0.1}>
            {items.map((item) => (
              <StaggerItem key={item.id}>
                <Card className="overflow-hidden rounded-3xl border-border/70">
                  <div className="grid lg:grid-cols-5 gap-0">
                    <div className="lg:col-span-3 p-5 sm:p-8">
                      <BeforeAfterSlider
                        before={item.beforeImage}
                        after={item.afterImage}
                        alt={item.title}
                      />
                      <p className="mt-3 text-center text-sm text-muted-foreground">← Drag to compare →</p>
                    </div>
                    <div className="lg:col-span-2 p-6 sm:p-8 lg:border-l border-border bg-muted/30 flex flex-col justify-center">
                      {item.category && <span className="inline-block self-start px-3 py-1 rounded-full bg-[var(--brand-royal)]/10 text-[var(--brand-royal)] text-xs font-semibold mb-3">{item.category}</span>}
                      <h3 className="text-2xl font-extrabold text-foreground">{item.title}</h3>
                      {item.description && <p className="mt-3 text-muted-foreground leading-relaxed">{item.description}</p>}
                      {item.location && (
                        <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
                          <MapPin className="size-4 text-[var(--brand-royal)]" /> {item.location}
                        </div>
                      )}
                    </div>
                  </div>
                </Card>
              </StaggerItem>
            ))}
          </Stagger>

          {items.length === 0 && (
            <div className="text-center py-20">
              <p className="text-muted-foreground">No transformations published yet.</p>
            </div>
          )}

          <Reveal>
            <div className="mt-16 text-center">
              <SectionHeading eyebrow="Ready?" title={<>Want Results Like These at Your <span className="royal-text">Facility?</span></>} />
              <Button asChild size="lg" className="mt-6 brand-gradient text-white">
                <Link href="/contact">Book a Service <ArrowRight className="size-4" /></Link>
              </Button>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}