import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Check, HardHat, Ruler, ShieldCheck } from "lucide-react";
import { SITE_URL, services } from "@/lib/site";
import { btn, CtaBand, Eyebrow, PageHero } from "@/components/ui-bits";

export const Route = createFileRoute("/services/")({
  head: () => ({
    meta: [
      { title: "Our Services | Fantasol Engineering" },
      { name: "description", content: "Electrical engineering, solar energy solutions and ICT & ELV systems — design, installation, testing, commissioning and maintenance in Kenya." },
      { property: "og:title", content: "Our Services | Fantasol Engineering" },
      { property: "og:description", content: "Power, solar and smart building infrastructure delivered by one engineering partner." },
      { property: "og:url", content: `${SITE_URL}/services` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/services` }],
  }),
  component: Services,
});

function Services() {
  return (
    <div>
      <PageHero eyebrow="Our services" title="Engineering support for power, energy and connected buildings" desc="Fantasol Engineering brings electrical, solar and ICT work under one practical delivery team — from design to after-sales support." />

      <section className="mx-auto max-w-6xl px-4 py-24">
        <div className="space-y-20">
          {services.map((s, i) => (
            <div key={s.slug} className="grid items-center gap-10 lg:grid-cols-2">
              <img src={s.img} alt={s.title} className={`shadow-soft aspect-[4/3] w-full rounded-2xl object-cover ${i % 2 ? "lg:order-2" : ""}`} />
              <div>
                <Eyebrow>{s.tag}</Eyebrow>
                <h2 className="mt-3 text-3xl font-extrabold text-primary">{s.title}</h2>
                <p className="mt-4 leading-relaxed text-muted-foreground">{s.desc}</p>
                <ul className="mt-6 space-y-3">
                  {s.items.map((it) => (
                    <li key={it} className="flex gap-3">
                      <Check className="mt-0.5 h-5 w-5 shrink-0 text-accent" />
                      {it}
                    </li>
                  ))}
                </ul>
                <Link to="/services/$slug" params={{ slug: s.slug }} className={`${btn} mt-8 bg-primary text-primary-foreground hover:opacity-90`}>
                  Learn More <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 grid gap-6 md:grid-cols-3">
          {[
            [Ruler, "Technical precision", "Documented engineering decisions and practical implementation."],
            [ShieldCheck, "Safety-focused delivery", "Solutions aligned with performance, reliability and compliance."],
            [HardHat, "Field-ready expertise", "Residential, commercial, institutional and industrial execution."],
          ].map(([I, t, d]) => {
            const Icon = I as typeof Ruler;
            return (
              <div key={t as string} className="rounded-xl border border-border bg-background p-6">
                <Icon className="h-8 w-8 text-accent" />
                <h3 className="mt-3 font-bold text-primary">{t as string}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{d as string}</p>
              </div>
            );
          })}
        </div>
      </section>

      <CtaBand />
    </div>
  );
}