import Link from "next/link";
import type { Metadata } from "next";
import { Button, Card, Section, SectionHeading, 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 { TestimonialsSection } from "@/components/testimonials-section";
import { services, whyChooseUs, additionalServices } from "@/content/services";
import { stats, site } from "@/content/site";

export const metadata: Metadata = {
  description: site.description,
  alternates: { canonical: site.url },
};

export default function HomePage() {
  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden bg-cream">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -right-40 -top-40 h-[34rem] w-[34rem] rounded-full bg-brand-100/60 blur-3xl"
        />
        <div className="container-page relative grid gap-14 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:py-24">
          <div className="rise">
            <Eyebrow>Phina Consultants Limited</Eyebrow>
            <h1 className="mt-5 font-display text-4xl font-bold leading-[1.1] tracking-tight text-ink-900 sm:text-5xl lg:text-[3.4rem]">
              We partner with organizations in{" "}
              <span className="text-brand-700">HR, Background Check &amp; Immigration</span>
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-ink-500">
              Your one-stop company for talent management in Nairobi, Kenya — a team of
              HR consultants, immigration specialists, career coaches and background-check
              professionals empowering businesses and individuals to thrive.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button href="/contact" withArrow>
                Contact us for a consultation
              </Button>
              <Button href="/services" variant="secondary">
                Explore our services
              </Button>
            </div>
            <dl className="mt-12 grid max-w-lg grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-4">
              {stats.map((s) => (
                <div key={s.label}>
                  <dt className="font-display text-2xl font-bold text-ink-900">{s.value}</dt>
                  <dd className="mt-1 text-xs leading-snug text-ink-500">{s.label}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="relative rise">
            <div className="rounded-3xl bg-brand-700 p-8 text-white shadow-lift">
              <p className="text-sm font-semibold uppercase tracking-[0.16em] text-brand-200">
                What we do
              </p>
              <p className="mt-3 font-display text-2xl font-bold leading-snug">
                Professional HR, Background Check &amp; Immigration consultants
              </p>
              <ul className="mt-6 space-y-3">
                {services.slice(0, 3).map((s) => (
                  <li key={s.slug} className="flex items-start gap-3 rounded-xl bg-white/10 p-3">
                    <Icon name="check" className="mt-0.5 h-5 w-5 shrink-0 text-brand-200" />
                    <span className="text-sm text-brand-50">
                      <span className="font-semibold text-white">{s.title}.</span>{" "}
                      {s.summary}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="absolute -bottom-6 -left-6 hidden rounded-2xl border border-ink-100 bg-white p-4 shadow-card sm:block">
              <div className="flex items-center gap-3">
                <span className="grid h-10 w-10 place-items-center rounded-full bg-accent-100 text-accent-600">
                  <Icon name="clock" className="h-5 w-5" />
                </span>
                <div>
                  <div className="text-sm font-semibold text-ink-900">{site.contact.hours}</div>
                  <div className="text-xs text-ink-500">Nairobi office · {site.contact.phoneLocal}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services overview */}
      <Section tone="white" id="services-overview">
        <SectionHeading
          eyebrow="What we do!!"
          title="We provide professional services"
          intro="Custom solutions built around the individual, company and organizational needs of every client."
        />
        <div className="mt-12 grid gap-6 md:grid-cols-2">
          {services.map((s, i) => (
            <Reveal key={s.slug} delay={i * 80}>
              <Card className="flex h-full flex-col">
                <ServiceIcon icon={s.icon} />
                <h3 className="mt-5 font-display text-xl font-bold text-ink-900">{s.title}</h3>
                <p className="mt-2 text-sm italic text-brand-700">{s.tagline}</p>
                <p className="mt-3 flex-1 text-sm leading-relaxed text-ink-600">{s.summary}</p>
                <Link
                  href={`/services#${s.slug}`}
                  className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700 hover:gap-2.5"
                >
                  Learn more <Icon name="arrow-right" className="h-4 w-4" />
                </Link>
              </Card>
            </Reveal>
          ))}
        </div>

        <div className="mt-10 rounded-2xl border border-ink-100 bg-cream p-6 sm:p-7">
          <p className="text-sm font-semibold text-ink-800">We also help individuals with:</p>
          <ul className="mt-4 flex flex-wrap gap-2.5">
            {additionalServices.map((item) => (
              <li
                key={item}
                className="inline-flex items-center gap-2 rounded-full border border-ink-200 bg-white px-3.5 py-1.5 text-sm text-ink-700"
              >
                <Icon name="sparkle" className="h-3.5 w-3.5 text-accent-500" />
                {item}
              </li>
            ))}
          </ul>
        </div>
      </Section>

      {/* About teaser */}
      <Section tone="cream">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <Reveal>
            <div className="relative">
              <div className="rounded-3xl border border-ink-100 bg-white p-8 shadow-card">
                <p className="font-display text-sm font-semibold uppercase tracking-[0.16em] text-brand-600">
                  Our mission
                </p>
                <p className="mt-4 font-display text-xl font-semibold leading-relaxed text-ink-900">
                  “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-6 grid grid-cols-3 gap-4 border-t border-ink-100 pt-6 text-center">
                  <div>
                    <div className="font-display text-lg font-bold text-ink-900">1k+</div>
                    <div className="text-xs text-ink-500">Satisfied clients</div>
                  </div>
                  <div>
                    <div className="font-display text-lg font-bold text-ink-900">100k+</div>
                    <div className="text-xs text-ink-500">Projects completed</div>
                  </div>
                  <div>
                    <div className="font-display text-lg font-bold text-ink-900">11+</div>
                    <div className="text-xs text-ink-500">Years in business</div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
          <div>
            <Eyebrow>Who we are</Eyebrow>
            <h2 className="mt-4 font-display text-3xl font-bold tracking-tight text-ink-900 sm:text-4xl">
              Human resource outsourcing and consultancy services
            </h2>
            <p className="mt-4 text-base leading-relaxed text-ink-600">
              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>
            <p className="mt-4 text-base leading-relaxed text-ink-600">
              When you outsource, quality is everything. We only hire the best to ensure we
              represent your business with the utmost professionalism — and we maintain
              strict information-security controls to protect our clients&apos; data.
            </p>
            <Button href="/about" variant="secondary" withArrow className="mt-8">
              More about Phina Consultants
            </Button>
          </div>
        </div>
      </Section>

      {/* Why choose us */}
      <Section tone="white">
        <SectionHeading
          eyebrow="Six reasons"
          title="Why organizations choose Phina Consultants"
          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-cream p-6">
                <span className="grid h-10 w-10 place-items-center rounded-lg bg-brand-700 text-white">
                  <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>

      {/* Team building teaser */}
      <Section tone="ink">
        <div className="grid gap-10 lg:grid-cols-[1.3fr_1fr] lg:items-center">
          <div>
            <Eyebrow tone="invert">Team building</Eyebrow>
            <h2 className="mt-4 font-display text-3xl font-bold tracking-tight text-white sm:text-4xl">
              Unleash your team&apos;s potential with engaging team building experiences
            </h2>
            <p className="mt-4 max-w-xl text-ink-300">
              We design and facilitate dynamic team building programs that strengthen
              relationships, foster innovation and drive results — from sports and hikes to
              escape rooms and collaborative art projects.
            </p>
            <Button href="/team-building" variant="light" withArrow className="mt-8">
              See team building programs
            </Button>
          </div>
          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
            {["Team-based sports & games", "Hiking & trekking", "Escape rooms", "Team art projects"].map(
              (a) => (
                <li
                  key={a}
                  className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-ink-100"
                >
                  <Icon name="users" className="h-5 w-5 text-brand-300" />
                  {a}
                </li>
              ),
            )}
          </ul>
        </div>
      </Section>

      <TestimonialsSection />
      <CtaBand />
    </>
  );
}