import type { Metadata } from "next";
import { Section, Eyebrow } from "@/components/ui";
import { Icon } from "@/components/icons";
import { ContactForm } from "@/components/contact-form";

export const metadata: Metadata = {
  title: "Request a Quote",
  description:
    "Request a quote from Phina Consultants Limited for recruitment, background checks, immigration, career coaching or team building.",
};

const points = [
  "A response within one business day",
  "A named consultant for your account",
  "Clear scope, timeline and pricing",
  "No obligation",
];

export default function RequestQuotePage() {
  return (
    <Section tone="cream">
      <div className="grid gap-12 lg:grid-cols-[1fr_1.1fr] lg:items-start">
        <div>
          <Eyebrow>Request a quote</Eyebrow>
          <h1 className="mt-5 font-display text-4xl font-bold leading-[1.12] tracking-tight text-ink-900 sm:text-5xl">
            Tell us what you need
          </h1>
          <p className="mt-5 text-lg leading-relaxed text-ink-500">
            Share a few details about the role, project or programme and we will come back
            with a plan and a quote.
          </p>
          <ul className="mt-8 space-y-3">
            {points.map((p) => (
              <li key={p} 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" />
                {p}
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card sm:p-8">
          <ContactForm />
        </div>
      </div>
    </Section>
  );
}