import type { Metadata } from "next";
import { prisma } from "@/lib/db";
import PageHero from "@/components/PageHero";
import ToolIcon from "@/components/ToolIcon";
import Link from "next/link";

export const revalidate = 300;

export const metadata: Metadata = {
  title: "Tools Limitation",
  description:
    "Understand the usage limits, device policy, and fair-use rules for every group buy tool.",
};

export default async function ToolLimitationsPage() {
  const tools = await prisma.tool.findMany({
    where: { isPrivate: false },
    include: { category: true },
    orderBy: { sortOrder: "asc" },
  });

  return (
    <>
      <PageHero
        title="Tools Limitation"
        subtitle="Every group buy tool comes with fair-use limits so access stays stable and affordable for everyone. Review the limitations of each tool below before purchasing."
      />
      <section className="bg-white py-14">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="rounded-2xl border border-amber-100 bg-amber-50/70 px-6 py-4 text-sm text-amber-800">
            <strong>General rules:</strong> Up to 2 devices / IP per subscription unless stated
            otherwise · No account credential sharing outside your subscription · Fair-use limits
            apply to AI generation tools · Abuse leads to suspension without refund.
          </div>
          <div className="mt-8 divide-y divide-slate-100 rounded-2xl border border-slate-100 bg-white shadow-sm">
            {tools.map((tool) => (
              <div key={tool.id} className="flex flex-col gap-3 px-6 py-5 sm:flex-row sm:items-center">
                <Link href={`/tools/${tool.slug}/`} className="flex flex-1 items-center gap-3">
                  <ToolIcon name={tool.name} iconUrl={tool.iconUrl} size="sm" />
                  <div>
                    <p className="text-sm font-semibold text-slate-900 hover:text-brand-600">
                      {tool.name}
                    </p>
                    <p className="text-xs text-slate-400">{tool.category?.name}</p>
                  </div>
                </Link>
                <p className="max-w-md text-xs leading-relaxed text-slate-500 sm:text-right">
                  {(tool.features ?? "")
                    .split("\n")
                    .filter(Boolean)
                    .slice(0, 3)
                    .join(" · ")}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}