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 { teamBuilding } from "@/content/team-building";

export const metadata: Metadata = {
  title: "Team Building",
  description:
    "Phina Consultants designs and facilitates dynamic team building programs that strengthen relationships, foster innovation and drive results.",
};

export default function TeamBuildingPage() {
  return (
    <>
      <section className="relative overflow-hidden bg-ink-900 text-white">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -left-32 top-0 h-96 w-96 rounded-full bg-brand-600/30 blur-3xl"
        />
        <div className="container-page relative py-16 lg:py-24">
          <Eyebrow tone="invert">{teamBuilding.tagline}</Eyebrow>
          <h1 className="mt-5 max-w-3xl font-display text-4xl font-bold leading-[1.12] tracking-tight sm:text-5xl">
            {teamBuilding.heading}
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-300">
            {teamBuilding.mission}
          </p>
          <Button href="/contact" variant="light" withArrow className="mt-8">
            Plan your team day
          </Button>
        </div>
      </section>

      <Section tone="white">
        <SectionHeading
          eyebrow="Activities"
          title="Experiences we design and facilitate"
          intro="Every programme is customized and aligned with your organizational goals."
        />
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {teamBuilding.activities.map((a, i) => (
            <Reveal key={a.title} delay={i * 70}>
              <div className="flex h-full flex-col rounded-2xl border border-ink-100 bg-cream p-6 shadow-card">
                <span className="grid h-11 w-11 place-items-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-100">
                  <Icon name="users" className="h-5 w-5" />
                </span>
                <h3 className="mt-4 font-display text-lg font-bold text-ink-900">{a.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-600">{a.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section tone="cream">
        <SectionHeading eyebrow="How it works" title="From brief to debrief" align="center" />
        <ol className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {teamBuilding.process.map((p) => (
            <li
              key={p.step}
              className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card"
            >
              <span className="font-display text-2xl font-bold text-brand-300">{p.step}</span>
              <h3 className="mt-2 font-display text-base font-bold text-ink-900">{p.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-ink-600">{p.body}</p>
            </li>
          ))}
        </ol>
      </Section>

      <CtaBand
        title="Motivate your team"
        subtitle="Share your team size, goals and budget and we will design a programme around them."
      />
    </>
  );
}