import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Partners",
  description: "Clinics, pediatricians, and organisations partnering with Tia to support Indian families.",
  alternates: { canonical: "/partners" },
  openGraph: {
    type: "website",
    url: "/partners",
    title: "Partners | Tia",
    description: "Clinics, pediatricians, and organisations partnering with Tia to support Indian families.",
  },
};

export default function PartnersPage() {
  return (
    <div className="min-h-screen bg-white">
      <div className="max-w-2xl mx-auto px-5 py-20">
        <div className="font-jetbrains mb-3 text-sm font-medium text-rose-500 uppercase tracking-widest">Work with us</div>
        <h1 className="font-fraunces text-4xl font-bold text-gray-900 mb-6 leading-tight">Partners</h1>

        <div className="text-gray-600 leading-relaxed space-y-5 mb-10">
          <p>
            We&apos;re exploring partnerships with pediatric clinics, child-care organisations, and
            technology providers who share our belief that parents deserve great tools — without
            surveillance.
          </p>
          <p>
            If you run a clinic, a parenting community, or a product that serves Indian families, we&apos;d
            love to talk.
          </p>
        </div>

        <div className="bg-rose-50 rounded-2xl p-8 border border-rose-100">
          <h2 className="text-lg font-semibold text-gray-800 mb-3">Get in touch</h2>
          <p className="text-gray-500 text-sm mb-5">
            Send us a note — we respond to every message personally.
          </p>
          <a
            href="mailto:hello@tia.baby"
            className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white text-sm font-semibold px-6 py-3 rounded-full transition-colors duration-200"
          >
            hello@tia.baby
          </a>
        </div>

        <div className="mt-12 pt-8 border-t border-gray-100">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm font-medium text-rose-600 hover:text-rose-700 transition-colors"
          >
            ← Back to home
          </Link>
        </div>
      </div>
    </div>
  );
}
