import type { Metadata } from "next";
import { Button, Section, SectionHeading, Eyebrow } from "@/components/ui";
import { Icon } from "@/components/icons";
import { Reveal } from "@/components/reveal";
import { CtaBand } from "@/components/cta-band";
import { whyChooseUs } from "@/content/services";
import { stats } from "@/content/site";

export const metadata: Metadata = {
  title: "About",
  description:
    "Phina Consultants Limited is your one-stop company for talent management in Nairobi, Kenya — HR consultants, immigration specialists, career coaches and background-check professionals.",
};

const offer = [
  "Background Check",
  "Immigration",
  "Human Resource",
  "Recruitment",
  "Career Coaching",
  "CV writing",
];

export default function AboutPage() {
  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>About us</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">
            To provide human resource outsourcing and consultancy services
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            At Phina Consultants, we&apos;re your one-stop company for all things talent
            management in Nairobi, Kenya. We are a team of passionate HR consultants,
            immigration specialists, career coaches and background-check professionals
            dedicated to empowering businesses and individuals to thrive.
          </p>
        </div>
      </section>

      <Section tone="white">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-start">
          <div>
            <Eyebrow>Who are we</Eyebrow>
            <h2 className="mt-4 font-display text-3xl font-bold tracking-tight text-ink-900">
              One team for talent, mobility and screening
            </h2>
            <p className="mt-4 leading-relaxed text-ink-600">
              We bring recruitment, background checks, immigration and career coaching under
              one roof so organizations do not have to stitch together three or four vendors.
              Every engagement is customized to the individual, company and organizational
              needs of our clients.
            </p>
            <p className="mt-4 leading-relaxed text-ink-600">
              We maintain strict information-security controls which mitigate and eliminate
              threats in order to protect our clients&apos; data.
            </p>
            <ul className="mt-6 flex flex-wrap gap-2.5">
              {offer.map((o) => (
                <li
                  key={o}
                  className="inline-flex items-center gap-2 rounded-full border border-ink-200 bg-cream px-3.5 py-1.5 text-sm text-ink-700"
                >
                  <Icon name="check" className="h-3.5 w-3.5 text-brand-600" />
                  {o}
                </li>
              ))}
            </ul>
          </div>

          <div className="rounded-3xl border border-ink-100 bg-brand-700 p-8 text-white shadow-card">
            <p className="font-display text-sm font-semibold uppercase tracking-[0.16em] text-brand-200">
              Our mission
            </p>
            <p className="mt-4 font-display text-xl font-semibold leading-relaxed">
              To empower businesses and individuals to thrive through exceptional HR
              solutions, streamlined immigration services, expert career coaching, and
              reliable background checks.
            </p>
            <div className="mt-8 grid grid-cols-2 gap-6 border-t border-white/15 pt-6">
              {stats.map((s) => (
                <div key={s.label}>
                  <div className="font-display text-2xl font-bold">{s.value}</div>
                  <div className="mt-1 text-xs text-brand-100">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <Section tone="cream">
        <SectionHeading eyebrow="Why choose us" title="What partnering with us looks like" align="center" />
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {whyChooseUs.map((r, i) => (
            <Reveal key={r.title} delay={i * 70}>
              <div className="flex h-full flex-col rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
                <span className="grid h-10 w-10 place-items-center rounded-lg bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-100">
                  <Icon name="check" className="h-5 w-5" />
                </span>
                <h3 className="mt-4 font-display text-base font-bold text-ink-900">{r.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-600">{r.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section tone="white">
        <div className="rounded-3xl border border-ink-100 bg-cream p-8 sm:p-12">
          <div className="grid gap-8 lg:grid-cols-[1.2fr_1fr] lg:items-center">
            <div>
              <h2 className="font-display text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl">
                Based on Koinange Street, working across Kenya
              </h2>
              <p className="mt-3 text-ink-600">
                Our consultants are in Nairobi and available Monday to Friday. Whether you
                are hiring one specialist or relocating a team, we would like to hear what
                you are working on.
              </p>
            </div>
            <div className="flex flex-wrap gap-3 lg:justify-end">
              <Button href="/contact" withArrow>
                Talk to a consultant
              </Button>
              <Button href="/services" variant="secondary">
                Our services
              </Button>
            </div>
          </div>
        </div>
      </Section>

      <CtaBand />
    </>
  );
}