import type { Metadata } from "next";
import Link from "next/link";
import { Button, Section, Eyebrow } from "@/components/ui";
import { Icon } from "@/components/icons";
import { Reveal } from "@/components/reveal";
import { ServiceIcon } from "@/components/service-icon";
import { CtaBand } from "@/components/cta-band";
import { services } from "@/content/services";

export const metadata: Metadata = {
  title: "Services",
  description:
    "Recruitment, background checks, immigration and career coaching from Phina Consultants Limited — professional services customized to your organization.",
};

const benefits = [
  "Reduced time-to-hire",
  "Improved candidate quality",
  "Cost savings",
  "Increased productivity",
];

export default function ServicesPage() {
  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>Our services</Eyebrow>
          <h1 className="mt-5 max-w-3xl font-display text-4xl font-bold leading-[1.12] tracking-tight text-ink-900 sm:text-5xl">
            We provide professional services
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            Building a successful team starts with finding the right people. Explore how we
            support organizations and individuals across the talent lifecycle.
          </p>
          <nav aria-label="Services" className="mt-8 flex flex-wrap gap-2.5">
            {services.map((s) => (
              <Link
                key={s.slug}
                href={`#${s.slug}`}
                className="inline-flex items-center gap-2 rounded-full border border-ink-200 bg-white px-4 py-2 text-sm font-medium text-ink-700 transition-colors hover:border-brand-400 hover:text-brand-700"
              >
                {s.title}
              </Link>
            ))}
          </nav>
        </div>
      </section>

      {services.map((s, index) => (
        <Section key={s.slug} id={s.slug} tone={index % 2 === 0 ? "white" : "cream"}>
          <div className="grid gap-12 lg:grid-cols-[1fr_1.1fr] lg:items-start">
            <Reveal>
              <div className="lg:sticky lg:top-28">
                <ServiceIcon icon={s.icon} className="h-14 w-14" />
                <h2 className="mt-5 font-display text-3xl font-bold tracking-tight text-ink-900">
                  {s.title}
                </h2>
                <p className="mt-3 text-lg italic text-brand-700">{s.tagline}</p>
                <p className="mt-4 leading-relaxed text-ink-600">{s.summary}</p>
                <Button href="/contact" withArrow className="mt-6">
                  Enquire about {s.title.toLowerCase()}
                </Button>
              </div>
            </Reveal>

            <div>
              <div className="space-y-4 text-[15px] leading-relaxed text-ink-600">
                {s.intro.map((p) => (
                  <p key={p.slice(0, 24)}>{p}</p>
                ))}
              </div>

              <div className="mt-8 grid gap-6 sm:grid-cols-2">
                <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
                  <h3 className="font-display text-sm font-bold uppercase tracking-[0.12em] text-ink-900">
                    Highlights
                  </h3>
                  <ul className="mt-4 space-y-2.5">
                    {s.highlights.map((h) => (
                      <li key={h} className="flex items-start gap-2.5 text-sm text-ink-700">
                        <Icon name="check" className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
                        {h}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
                  <h3 className="font-display text-sm font-bold uppercase tracking-[0.12em] text-ink-900">
                    What you get
                  </h3>
                  <ul className="mt-4 space-y-2.5">
                    {s.deliverables.map((d) => (
                      <li key={d} className="flex items-start gap-2.5 text-sm text-ink-700">
                        <Icon name="arrow-right" className="mt-0.5 h-4 w-4 shrink-0 text-accent-500" />
                        {d}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {s.slug === "recruitment" && (
                <div className="mt-6 rounded-2xl bg-brand-700 p-6 text-white">
                  <p className="text-sm font-semibold uppercase tracking-[0.12em] text-brand-200">
                    The impact
                  </p>
                  <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
                    {benefits.map((b) => (
                      <div key={b} className="text-sm">
                        <Icon name="check" className="h-5 w-5 text-brand-200" />
                        <p className="mt-1.5 text-brand-50">{b}</p>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </Section>
      ))}

      <CtaBand
        title="Not sure which service fits?"
        subtitle="Tell us the problem and we will point you to the right starting point — no obligation."
      />
    </>
  );
}