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

export const metadata: Metadata = {
  title: "Pricing",
  description: "Founder pricing — early families keep their terms for life. Free during early access.",
  alternates: { canonical: "/pricing" },
  openGraph: {
    type: "website",
    url: "/pricing",
    title: "Pricing | Tia",
    description: "Founder pricing — early families keep their terms for life. Free during early access.",
  },
};

export default function PricingPage() {
  return (
    <div className="max-w-2xl mx-auto px-4 py-20">
      <p className="font-jetbrains text-xs font-semibold text-rose-500 uppercase tracking-widest mb-4 text-center">Pricing</p>

      <h1 className="font-fraunces text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-4">
        Founder pricing.
      </h1>
      <p className="text-gray-500 text-center mb-12 max-w-md mx-auto">
        Early families keep their terms for life.
      </p>

      <div className="space-y-4">
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h2 className="text-lg font-bold text-gray-900">Free — always</h2>
              <p className="text-sm text-gray-500 mt-1">The core heirloom experience</p>
            </div>
            <span className="bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full">Included</span>
          </div>
          <ul className="space-y-2 text-sm text-gray-700">
            {[
              "Activity logging — feed, sleep, diaper, and more",
              "The heirloom archive — every log, searchable forever",
              "Milestone tracking",
              "IAP vaccination schedule",
              "Telegram alerts for upcoming vaccinations",
              "Ask Tia (parenting logistics AI)",
              "Family circle with role-based access",
              "Growth tracking",
              "Full data export — the archive is yours",
            ].map(item => (
              <li key={item} className="flex items-start gap-2">
                <span className="text-rose-400 flex-shrink-0 mt-0.5">✓</span>
                {item}
              </li>
            ))}
          </ul>
        </div>

        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
          <div className="flex items-start justify-between mb-4">
            <div>
              <h2 className="text-lg font-bold text-gray-900">Media storage</h2>
              <p className="text-sm text-gray-500 mt-1">Photos and video in the archive</p>
            </div>
            <span className="bg-amber-100 text-amber-700 text-xs font-semibold px-3 py-1 rounded-full">Paid / metered</span>
          </div>
          <p className="text-sm text-gray-600 leading-relaxed">
            Storing photos and video at scale has a real infrastructure cost. Media storage is
            the one thing we charge for — metered, so you only pay for what you use.
            Pricing details will be shared before the early-access period ends.
          </p>
          <p className="text-xs text-gray-400 mt-3">
            Founder families joining during early access will be the first to know — and will
            keep whatever terms we agree on, for life.
          </p>
        </div>
      </div>

      <div className="mt-12 text-center">
        <Link
          href="/login"
          className="inline-flex items-center gap-2 bg-rose-500 hover:bg-rose-600 text-white font-semibold px-7 py-3.5 rounded-full text-base transition-colors"
        >
          Continue with Google — it&apos;s free
        </Link>
        <p className="text-xs text-gray-400 mt-3">No credit card required.</p>
      </div>
    </div>
  );
}
