import type { Metadata } from "next";
import Link from "next/link";
import { PageHero } from "@/components/site/page-hero";
import { Reveal, Stagger, StaggerItem, Counter } from "@/components/site/motion";
import { SectionHeading, Eyebrow } from "@/components/site/section-heading";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { db } from "@/lib/db";
import { Target, Eye, HeartHandshake, Award, ShieldCheck, Users, Clock, Wrench, CheckCircle2, ArrowRight, Snowflake } from "lucide-react";

export const metadata: Metadata = {
  title: "About Us",
  description: "Learn about AL-HASAN ENGINEERING SERVICE — 20+ years of trusted industrial and commercial HVAC engineering across Pakistan.",
  alternates: { canonical: "/about" },
};

export const revalidate = 60;

export default async function AboutPage() {
  const team = await db.teamMember.findMany({
    where: { isEnabled: true },
    orderBy: { order: "asc" },
  });

  const values = [
    { icon: Award, title: "Engineering Excellence", text: "We bring technical rigor and proven methods to every project, regardless of size." },
    { icon: HeartHandshake, title: "Honest Service", text: "Transparent pricing, honest assessments and recommendations you can trust." },
    { icon: ShieldCheck, title: "Reliability First", text: "We stand behind our workmanship with written warranties and genuine parts." },
    { icon: Clock, title: "On-Time Delivery", text: "We respect your timeline and budget — projects delivered as promised." },
  ];

  const milestones = [
    { year: "2004", title: "Founded in Karachi", text: "Started as a small AC repair workshop in SITE Area." },
    { year: "2010", title: "Industrial Expansion", text: "Began serving textile mills with chiller plant services." },
    { year: "2016", title: "Manufacturing Division", text: "Added custom water chiller and air dryer manufacturing." },
    { year: "2020", title: "Nationwide Reach", text: "Expanded project operations to major cities across Pakistan." },
    { year: "2024", title: "350+ AMC Clients", text: "Now a trusted partner for hundreds of businesses." },
  ];

  return (
    <>
      <PageHero
        eyebrow="About AHE Services"
        title={<>Two Decades of <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Cooling Engineering</span> Excellence</>}
        subtitle="AL-HASAN ENGINEERING SERVICE has grown from a single-workshop AC repair business into one of Karachi's most trusted names in industrial and commercial HVAC solutions."
        breadcrumbs={[{ label: "About" }]}
      />

      <section className="py-20 lg:py-28">
        <div className="container-mx grid lg:grid-cols-2 gap-14 items-center">
          <Reveal>
            <Eyebrow>Our Story</Eyebrow>
            <h2 className="mt-4 text-3xl sm:text-4xl font-extrabold tracking-tight leading-tight text-balance">
              Built on Skill, Grown on Trust
            </h2>
            <div className="mt-5 space-y-4 text-muted-foreground leading-relaxed">
              <p>
                Founded in 2004 by Engr. Hasan Ali, AL-HASAN ENGINEERING SERVICE began as a dedicated AC repair workshop serving the industries of SITE Area, Karachi. From day one, the philosophy was simple: do honest, high-quality work and clients will come back — and bring others.
              </p>
              <p>
                Two decades later, that philosophy still drives us. We've grown into a full-spectrum HVAC engineering company serving textile mills, hospitals, pharmaceutical plants, cold storage operators, commercial buildings and data centers across Pakistan. Our team handles everything from a single split AC to multi-ton chiller plants and custom-manufactured cooling equipment.
              </p>
              <p>
                What hasn't changed is our commitment to hardworking, honest and professional service — delivered by well-trained, well-mannered technicians who treat your facility like their own.
              </p>
            </div>
            <div className="mt-7 flex flex-wrap gap-3">
              <Button asChild className="brand-gradient text-white">
                <Link href="/contact">Work With Us <ArrowRight className="size-4" /></Link>
              </Button>
              <Button asChild variant="outline">
                <Link href="/projects">See Our Projects</Link>
              </Button>
            </div>
          </Reveal>
          <Reveal delay={0.15} y={40}>
            <div className="relative">
              <div className="absolute -inset-6 brand-gradient opacity-20 blur-3xl rounded-full" />
              <Card className="relative rounded-3xl overflow-hidden border-0 shadow-brand">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src="/uploads/hero-hvac.jpg" alt="AHE Services engineering facility" className="w-full aspect-[4/3] object-cover" />
                <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
                  <div className="grid grid-cols-3 gap-4 text-white">
                    {[
                      { v: 1500, s: "+", l: "Projects" },
                      { v: 350, s: "+", l: "AMC Clients" },
                      { v: 20, s: "+", l: "Years" },
                    ].map((x) => (
                      <div key={x.l}>
                        <div className="text-2xl font-extrabold"><Counter to={x.v} suffix={x.s} /></div>
                        <div className="text-xs text-white/70">{x.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
            </div>
          </Reveal>
        </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">
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { icon: Target, title: "Our Mission", text: "To deliver reliable, energy-efficient HVAC solutions that keep Pakistani industries and businesses running — engineered with integrity and backed by genuine service." },
              { icon: Eye, title: "Our Vision", text: "To be Pakistan's most trusted HVAC engineering partner, recognized for technical excellence, honesty and lasting client relationships." },
              { icon: HeartHandshake, title: "Our Promise", text: "Hardworking, honest and professional service. Well-trained, well-mannered technicians. Genuine parts. Written warranties. Every time." },
            ].map((b, i) => (
              <Reveal key={b.title} delay={i * 0.1}>
                <Card className="h-full glass-dark border-white/10 text-white p-8 rounded-2xl">
                  <div className="grid place-items-center size-14 rounded-2xl brand-gradient mb-5">
                    <b.icon className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold">{b.title}</h3>
                  <p className="mt-3 text-white/70 leading-relaxed">{b.text}</p>
                </Card>
              </Reveal>
            ))}
          </div>

          <div className="mt-16">
            <Reveal>
              <SectionHeading light eyebrow="Core Values" title={<>What We Stand <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">For</span></>} />
            </Reveal>
            <Stagger className="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {values.map((v) => (
                <StaggerItem key={v.title}>
                  <div className="rounded-2xl bg-white/5 border border-white/10 p-6 h-full hover:bg-white/8 transition-colors">
                    <div className="grid place-items-center size-11 rounded-xl bg-[var(--brand-royal)] mb-4">
                      <v.icon className="size-5" />
                    </div>
                    <h3 className="font-bold text-white">{v.title}</h3>
                    <p className="mt-1.5 text-sm text-white/60 leading-relaxed">{v.text}</p>
                  </div>
                </StaggerItem>
              ))}
            </Stagger>
          </div>
        </div>
      </section>

      <section className="py-20 lg:py-28">
        <div className="container-mx">
          <Reveal>
            <SectionHeading eyebrow="Our Journey" title={<>Milestones Over the <span className="royal-text">Years</span></>} subtitle="Key moments that shaped AHE Services into the engineering company it is today." />
          </Reveal>
          <div className="mt-14 relative">
            <div className="absolute left-4 sm:left-1/2 top-0 bottom-0 w-px bg-border sm:-translate-x-1/2" />
            <div className="space-y-8">
              {milestones.map((m, i) => (
                <Reveal key={m.year} delay={i * 0.05}>
                  <div className={`relative flex items-center gap-6 ${i % 2 === 0 ? "sm:flex-row-reverse" : ""}`}>
                    <div className="hidden sm:block sm:w-1/2" />
                    <div className="absolute left-4 sm:left-1/2 grid place-items-center size-8 rounded-full brand-gradient text-white text-xs font-bold ring-4 ring-background sm:-translate-x-1/2 z-10">
                      <Snowflake className="size-4" />
                    </div>
                    <div className="ml-12 sm:ml-0 sm:w-1/2 sm:px-8">
                      <Card className="p-5 rounded-2xl hover:shadow-soft transition-shadow">
                        <div className="text-[var(--brand-royal)] font-extrabold text-lg">{m.year}</div>
                        <div className="font-bold text-foreground mt-0.5">{m.title}</div>
                        <p className="mt-1.5 text-sm text-muted-foreground">{m.text}</p>
                      </Card>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {team.length > 0 && (
        <section className="py-20 lg:py-24 bg-muted/30">
          <div className="container-mx">
            <Reveal>
              <SectionHeading eyebrow="Leadership" title={<>Meet the <span className="royal-text">Engineering Team</span></>} subtitle="Experienced professionals leading every project with technical depth and accountability." />
            </Reveal>
            <Stagger className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {team.map((m) => (
                <StaggerItem key={m.id}>
                  <Card className="overflow-hidden rounded-2xl h-full hover:shadow-brand transition-shadow">
                    <div className="aspect-square brand-gradient relative">
                      {m.image ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img src={m.image} alt={m.name} className="size-full object-cover" />
                      ) : (
                        <div className="size-full grid place-items-center text-white/90 font-extrabold text-5xl">
                          {m.name.split(" ").map((p) => p[0]).slice(0, 2).join("")}
                        </div>
                      )}
                    </div>
                    <div className="p-5">
                      <h3 className="font-bold text-foreground">{m.name}</h3>
                      <div className="text-sm text-[var(--brand-royal)] font-medium">{m.position}</div>
                      {m.bio && <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{m.bio}</p>}
                    </div>
                  </Card>
                </StaggerItem>
              ))}
            </Stagger>
          </div>
        </section>
      )}

      <section className="py-16 brand-gradient text-white">
        <div className="container-mx text-center">
          <Reveal>
            <h2 className="text-3xl sm:text-4xl font-extrabold tracking-tight text-balance">Let's Build Something Reliable Together</h2>
            <p className="mt-4 text-white/85 max-w-xl mx-auto">From a single AC to a full industrial cooling plant — our team is ready to help.</p>
            <Button asChild size="lg" className="mt-7 bg-white text-[var(--brand-royal)] hover:bg-white/90">
              <Link href="/contact">Contact Our Team <ArrowRight className="size-4" /></Link>
            </Button>
          </Reveal>
        </div>
      </section>
    </>
  );
}