import Link from "next/link";
import { getServices, getFeaturedProjects, getTestimonials, getBeforeAfters, getSettings } from "@/lib/queries";
import { Reveal, Stagger, StaggerItem, Counter } from "@/components/site/motion";
import { SectionHeading, Eyebrow } from "@/components/site/section-heading";
import { Icon } from "@/components/site/icon";
import { TestimonialsCarousel } from "@/components/site/testimonials-carousel";
import { BeforeAfterSlider } from "@/components/site/before-after-slider";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  ArrowRight, Phone, ShieldCheck, Award, Clock, Users, Wrench, ThermometerSnowflake, Truck,
  CheckCircle2, Star, MapPin, Building2, ArrowUpRight,
} from "lucide-react";

export const revalidate = 60;

export default async function HomePage() {
  const [services, projects, testimonials, beforeAfters, settings] = await Promise.all([
    getServices(),
    getFeaturedProjects(4),
    getTestimonials(),
    getBeforeAfters(),
    getSettings(),
  ]);

  const heroImg = settings?.logo ? null : "/uploads/hero-hvac.jpg";

  const whyUs = [
    { icon: Award, title: "20+ Years Experience", text: "Two decades of engineering excellence across industrial, commercial and residential HVAC projects." },
    { icon: Clock, title: "24/7 Emergency Support", text: "Round-the-clock response for AMC clients. We keep your critical cooling running." },
    { icon: ShieldCheck, title: "Certified Technicians", text: "Factory-trained, brand-certified engineers who follow strict safety and quality protocols." },
    { icon: Wrench, title: "Genuine Parts & Warranty", text: "We use only authentic spares and back our workmanship with written warranties." },
  ];

  const stats = [
    { to: 1500, suffix: "+", label: "Projects Completed" },
    { to: 20, suffix: "+", label: "Years Experience" },
    { to: 350, suffix: "+", label: "AMC Clients" },
    { to: 98, suffix: "%", label: "Client Satisfaction" },
  ];

  const brands = ["Panasonic", "Hitachi", "Mitsubishi", "LG", "Haier", "Daikin", "Carrier", "Samsung"];

  return (
    <>
      {/* ===== HERO ===== */}
      <section className="relative overflow-hidden navy-bg text-white">
        {/* Background image + overlays */}
        <div className="absolute inset-0">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/uploads/hero-hvac.jpg" alt="Industrial HVAC installation" className="size-full object-cover opacity-40" />
          <div className="absolute inset-0 bg-gradient-to-r from-[oklch(0.16_0.05_260)] via-[oklch(0.16_0.05_260/0.85)] to-[oklch(0.16_0.05_260/0.4)]" />
          <div className="absolute inset-0 grid-pattern opacity-50" />
        </div>

        <div className="container-mx relative">
          <div className="grid lg:grid-cols-12 gap-10 items-center min-h-[88vh] py-16 lg:py-24">
            <div className="lg:col-span-7">
              <Reveal>
                <Eyebrow className="bg-white/10 text-white">
                  <span className="size-1.5 rounded-full bg-[var(--brand-cyan)]" />
                  Trusted HVAC Engineering Since 2004
                </Eyebrow>
              </Reveal>
              <Reveal delay={0.1}>
                <h1 className="mt-5 text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.05] tracking-tight text-balance">
                  Complete HVAC Solutions for{" "}
                  <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">
                    Industrial & Commercial
                  </span>{" "}
                  Needs
                </h1>
              </Reveal>
              <Reveal delay={0.2}>
                <p className="mt-6 text-lg text-white/75 max-w-xl leading-relaxed">
                  From chiller plants and cold storage to AC installation, duct cleaning and AMC contracts — AL-HASAN ENGINEERING SERVICE delivers reliable, energy-efficient cooling engineered to perform.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <div className="mt-8 flex flex-wrap items-center gap-3">
                  <Button asChild size="lg" className="brand-gradient text-white shadow-brand hover:opacity-95">
                    <Link href="/contact">Get a Free Quote <ArrowRight className="size-4" /></Link>
                  </Button>
                  <Button asChild size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 bg-transparent">
                    <a href={`tel:${settings?.phone ?? "0301-2435144"}`}><Phone className="size-4 mr-2" /> {settings?.phone ?? "0301-2435144"}</a>
                  </Button>
                </div>
              </Reveal>
              <Reveal delay={0.4}>
                <div className="mt-10 flex flex-wrap items-center gap-x-7 gap-y-3 text-sm text-white/70">
                  {["NTN Registered", "Brand Certified", "24/7 Emergency", "Free Site Survey"].map((t) => (
                    <span key={t} className="flex items-center gap-2">
                      <CheckCircle2 className="size-4 text-[var(--brand-cyan)]" /> {t}
                    </span>
                  ))}
                </div>
              </Reveal>
            </div>

            {/* Floating stat card */}
            <div className="lg:col-span-5">
              <Reveal delay={0.3} y={40}>
                <div className="relative">
                  <div className="absolute -inset-4 bg-[var(--brand-royal)]/20 blur-3xl rounded-full" />
                  <Card className="relative glass-dark border-white/10 text-white p-6 sm:p-8 rounded-3xl">
                    <div className="flex items-center justify-between mb-6">
                      <div>
                        <div className="text-sm text-white/60">Trusted by</div>
                        <div className="text-2xl font-bold">350+ Businesses</div>
                      </div>
                      <div className="grid place-items-center size-12 rounded-xl brand-gradient">
                        <Building2 className="size-6" />
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      {stats.map((s) => (
                        <div key={s.label} className="rounded-xl bg-white/5 border border-white/10 p-4">
                          <div className="text-2xl sm:text-3xl font-extrabold bg-gradient-to-r from-white to-[var(--brand-cyan)] bg-clip-text text-transparent">
                            <Counter to={s.to} suffix={s.suffix} />
                          </div>
                          <div className="text-xs text-white/60 mt-1">{s.label}</div>
                        </div>
                      ))}
                    </div>
                    <div className="mt-5 flex items-center gap-2 text-sm text-white/70">
                      <div className="flex">
                        {[...Array(5)].map((_, i) => <Star key={i} className="size-4 fill-amber-400 text-amber-400" />)}
                      </div>
                      <span>Rated 4.9/5 by 200+ clients</span>
                    </div>
                  </Card>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* ===== BRANDS MARQUEE ===== */}
      <section className="border-y border-border bg-white py-6">
        <div className="container-mx">
          <div className="flex items-center gap-8 overflow-hidden">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground shrink-0 hidden sm:block">Brands we service</span>
            <div className="relative flex-1 overflow-hidden">
              <div className="flex gap-12 animate-marquee whitespace-nowrap">
                {[...brands, ...brands].map((b, i) => (
                  <span key={i} className="text-xl sm:text-2xl font-bold text-muted-foreground/40 hover:text-[var(--brand-royal)] transition-colors">
                    {b}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== SERVICES ===== */}
      <section className="py-20 lg:py-28 bg-gradient-to-b from-white to-muted/30">
        <div className="container-mx">
          <Reveal>
            <SectionHeading
              eyebrow="What We Do"
              title={<>Engineered Cooling for Every <span className="royal-text">Scale & Sector</span></>}
              subtitle="Ten specialized service lines covering the full lifecycle of your HVAC and refrigeration systems — design, installation, maintenance and manufacturing."
            />
          </Reveal>
          <Stagger className="mt-14 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {services.map((s) => (
              <StaggerItem key={s.id}>
                <Link href={`/services/${s.slug}`} className="group block h-full">
                  <Card className="h-full p-6 rounded-2xl border-border/70 hover:border-[var(--brand-royal)]/40 hover:shadow-brand transition-all duration-300 hover:-translate-y-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)] group-hover:bg-[var(--brand-royal)] group-hover:text-white transition-colors">
                        <Icon name={s.icon} className="size-6" />
                      </div>
                      <ArrowUpRight className="size-5 text-muted-foreground/40 group-hover:text-[var(--brand-royal)] transition-colors" />
                    </div>
                    <h3 className="mt-5 font-bold text-lg text-foreground group-hover:text-[var(--brand-royal)] transition-colors">
                      {s.title}
                    </h3>
                    <p className="mt-2 text-sm text-muted-foreground leading-relaxed line-clamp-2">
                      {s.shortDescription}
                    </p>
                    <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--brand-royal)]">
                      Learn more <ArrowRight className="size-3.5" />
                    </span>
                  </Card>
                </Link>
              </StaggerItem>
            ))}
          </Stagger>
        </div>
      </section>

      {/* ===== WHY CHOOSE US ===== */}
      <section className="py-20 lg:py-28 navy-bg text-white relative overflow-hidden">
        <div className="absolute inset-0 grid-pattern opacity-30" />
        <div className="container-mx relative">
          <div className="grid lg:grid-cols-2 gap-14 items-center">
            <div>
              <Reveal>
                <Eyebrow className="bg-white/10 text-white">
                  <span className="size-1.5 rounded-full bg-[var(--brand-cyan)]" /> Why AHE Services
                </Eyebrow>
              </Reveal>
              <Reveal delay={0.1}>
                <h2 className="mt-4 text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight leading-tight text-balance">
                  Engineering Trust, One Project at a Time
                </h2>
              </Reveal>
              <Reveal delay={0.2}>
                <p className="mt-5 text-white/70 text-lg leading-relaxed">
                  We combine deep technical expertise with honest, reliable service. Every project — big or small — gets the same engineering rigor and commitment to long-term performance.
                </p>
              </Reveal>
              <Stagger className="mt-10 grid sm:grid-cols-2 gap-5" stagger={0.1}>
                {whyUs.map((w) => (
                  <StaggerItem key={w.title}>
                    <div className="rounded-2xl bg-white/5 border border-white/10 p-5 hover:bg-white/8 transition-colors h-full">
                      <div className="grid place-items-center size-11 rounded-xl bg-[var(--brand-royal)] text-white mb-4">
                        <w.icon className="size-5" />
                      </div>
                      <h3 className="font-bold text-white">{w.title}</h3>
                      <p className="mt-1.5 text-sm text-white/60 leading-relaxed">{w.text}</p>
                    </div>
                  </StaggerItem>
                ))}
              </Stagger>
            </div>
            <Reveal delay={0.2} y={40}>
              <div className="relative">
                <div className="absolute -inset-6 bg-[var(--brand-royal)]/20 blur-3xl rounded-full" />
                <Card className="relative glass-dark border-white/10 text-white p-8 rounded-3xl">
                  <div className="flex items-center gap-3 mb-6">
                    <div className="grid place-items-center size-12 rounded-xl brand-gradient">
                      <ThermometerSnowflake className="size-6" />
                    </div>
                    <div>
                      <div className="font-bold text-lg">Our Service Promise</div>
                      <div className="text-xs text-white/50">Hardworking · Honest · Professional</div>
                    </div>
                  </div>
                  <ul className="space-y-3.5">
                    {[
                      "Free site survey & honest load calculation",
                      "Transparent, itemized quotations",
                      "Genuine parts from authorized suppliers",
                      "Written warranty on workmanship",
                      "On-time delivery & clean work sites",
                      "Dedicated account manager for AMC clients",
                    ].map((p) => (
                      <li key={p} className="flex items-start gap-3 text-sm text-white/80">
                        <CheckCircle2 className="size-5 text-[var(--brand-cyan)] shrink-0 mt-0.5" />
                        {p}
                      </li>
                    ))}
                  </ul>
                  <Button asChild className="mt-7 w-full brand-gradient text-white">
                    <Link href="/about">More About Us <ArrowRight className="size-4" /></Link>
                  </Button>
                </Card>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ===== FEATURED PROJECTS ===== */}
      <section className="py-20 lg:py-28 bg-background">
        <div className="container-mx">
          <Reveal>
            <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-5">
              <SectionHeading
                align="left"
                eyebrow="Featured Work"
                title={<>Projects That Keep Pakistan <span className="royal-text">Cooling</span></>}
                subtitle="A selection of recent industrial and commercial HVAC installations across the country."
              />
              <Button asChild variant="outline" className="self-start sm:self-auto shrink-0 border-[var(--brand-royal)]/30 text-[var(--brand-royal)] hover:bg-[var(--brand-royal)]/5">
                <Link href="/projects">View All Projects <ArrowRight className="size-4" /></Link>
              </Button>
            </div>
          </Reveal>
          <Stagger className="mt-14 grid md:grid-cols-2 gap-6">
            {projects.map((p, i) => {
              const imgs = JSON.parse(p.images || "[]") as string[];
              const cover = imgs[0] || ["/uploads/project-chiller.jpg", "/uploads/project-coldstorage.jpg", "/uploads/project-hospital.jpg", "/uploads/hero-hvac.jpg"][i % 4];
              return (
                <StaggerItem key={p.id}>
                  <Link href={`/projects/${p.slug}`} className="group block">
                    <Card className="overflow-hidden rounded-2xl border-border/70 hover:shadow-brand transition-all duration-300 h-full">
                      <div className="relative aspect-[16/10] overflow-hidden">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img src={cover} alt={p.title} className="size-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
                        <span className="absolute top-4 left-4 px-3 py-1 rounded-full bg-[var(--brand-royal)] text-white text-xs font-semibold">
                          {p.category}
                        </span>
                        <div className="absolute bottom-4 left-4 right-4 text-white">
                          <div className="flex items-center gap-2 text-xs text-white/70 mb-1.5">
                            <MapPin className="size-3.5" /> {p.location}
                          </div>
                          <h3 className="text-xl font-bold leading-tight">{p.title}</h3>
                        </div>
                      </div>
                      <div className="p-5">
                        <p className="text-sm text-muted-foreground line-clamp-2">{p.description}</p>
                        <span className="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--brand-royal)]">
                          View Project <ArrowRight className="size-3.5" />
                        </span>
                      </div>
                    </Card>
                  </Link>
                </StaggerItem>
              );
            })}
          </Stagger>
        </div>
      </section>

      {/* ===== BEFORE & AFTER PREVIEW ===== */}
      {beforeAfters.length > 0 && (
        <section className="py-20 lg:py-28 bg-muted/30">
          <div className="container-mx">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <Reveal>
                <Eyebrow>Real Results</Eyebrow>
                <h2 className="mt-4 text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight leading-tight text-balance">
                  See the Difference <span className="royal-text">Before & After</span>
                </h2>
                <p className="mt-5 text-lg text-muted-foreground leading-relaxed">
                  Drag the slider to witness the transformation our professional cleaning, repair and installation services deliver on real client sites.
                </p>
                <ul className="mt-7 space-y-3">
                  {["Professional duct & coil cleaning", "Compressor & system overhaul", "Like-new cooling performance", "Improved air quality & efficiency"].map((t) => (
                    <li key={t} className="flex items-center gap-3 text-foreground/80">
                      <CheckCircle2 className="size-5 text-[var(--brand-royal)] shrink-0" /> {t}
                    </li>
                  ))}
                </ul>
                <Button asChild className="mt-8 brand-gradient text-white">
                  <Link href="/before-after">View All Transformations <ArrowRight className="size-4" /></Link>
                </Button>
              </Reveal>
              <Reveal delay={0.15} y={40}>
                <BeforeAfterSlider
                  before={beforeAfters[0].beforeImage}
                  after={beforeAfters[0].afterImage}
                  alt={beforeAfters[0].title}
                />
                <p className="mt-3 text-center text-sm text-muted-foreground">
                  {beforeAfters[0].title} — drag to compare
                </p>
              </Reveal>
            </div>
          </div>
        </section>
      )}

      {/* ===== TESTIMONIALS ===== */}
      {testimonials.length > 0 && (
        <section className="py-20 lg:py-28 bg-background">
          <div className="container-mx">
            <Reveal>
              <SectionHeading
                eyebrow="Client Voices"
                title={<>Trusted by Leaders Across <span className="royal-text">Industries</span></>}
                subtitle="Don't just take our word for it — hear from the plant managers, administrators and business owners who rely on AHE Services."
              />
            </Reveal>
            <Reveal delay={0.15}>
              <div className="mt-14 max-w-4xl mx-auto">
                <TestimonialsCarousel items={testimonials.map((t) => ({ ...t }))} />
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* ===== CTA ===== */}
      <section className="relative overflow-hidden py-20 lg:py-24 brand-gradient text-white">
        <div className="absolute inset-0 grid-pattern opacity-20" />
        <div className="container-mx relative">
          <div className="max-w-3xl mx-auto text-center">
            <Reveal>
              <div className="flex justify-center mb-5">
                <div className="grid place-items-center size-16 rounded-2xl bg-white/15">
                  <Truck className="size-8" />
                </div>
              </div>
              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight leading-tight text-balance">
                Ready to Upgrade Your Cooling?
              </h2>
              <p className="mt-5 text-lg text-white/85 leading-relaxed">
                Get a free site survey, honest assessment and detailed quotation from our engineering team. No pressure, no obligation — just expert advice.
              </p>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                <Button asChild size="lg" className="bg-white text-[var(--brand-royal)] hover:bg-white/90 shadow-lg">
                  <Link href="/contact">Request Free Quote <ArrowRight className="size-4" /></Link>
                </Button>
                <Button asChild size="lg" variant="outline" className="border-white/40 text-white hover:bg-white/10 bg-transparent">
                  <a href={`tel:${settings?.phone ?? "0301-2435144"}`}><Phone className="size-4 mr-2" /> Call Now</a>
                </Button>
              </div>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-x-7 gap-y-2 text-sm text-white/75">
                <span className="flex items-center gap-2"><Clock className="size-4" /> 24/7 Emergency Service</span>
                <span className="flex items-center gap-2"><Users className="size-4" /> 20+ Expert Engineers</span>
                <span className="flex items-center gap-2"><ShieldCheck className="size-4" /> Warranty Backed</span>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
}