import ContactForm from "@/components/ContactForm";

export default function Page() {
  return (
    <main className="flex min-h-screen items-center justify-center px-5 py-12">
      <div className="w-full max-w-xl">
        {/* Wordmark */}
        <div className="mb-8 flex items-baseline gap-2">
          <span className="font-mono text-[13px] uppercase tracking-[0.25em] text-terracotta">
            Neireva
          </span>
        </div>

        {/* Card — 4px terracotta left accent echoes the Tactile Archive AI-card */}
        <div className="overflow-hidden rounded-card border border-line bg-card shadow-[0_1px_2px_rgba(27,28,26,0.04),0_8px_24px_rgba(27,28,26,0.06)]">
          <div className="border-l-4 border-terracotta px-7 py-8 sm:px-9 sm:py-10">
            <h1 className="text-[26px] font-semibold leading-tight text-ink sm:text-[30px]">
              Let&apos;s keep in touch
            </h1>
            <p className="mt-2 text-[15px] leading-relaxed text-ink-soft">
              Leave your details and we&apos;ll reach out about how Neireva can
              work for your agency.
            </p>

            <div className="mt-7">
              <ContactForm />
            </div>
          </div>
        </div>

        {/* Controller / legal footer */}
        <p className="mt-5 px-1 text-[12px] leading-relaxed text-ink-faint">
          Neireva is the data controller for the information you provide.{" "}
          <a
            href="/privacy"
            className="underline decoration-line-strong underline-offset-2 hover:text-ink-soft"
          >
            Privacy policy
          </a>
          .
        </p>
      </div>
    </main>
  );
}