import type { Metadata } from "next";
import { getAppUrl } from "@/lib/shopee/client";

export const metadata: Metadata = {
  title: "Product Brief - Sellfin Commerce OS",
  description: "Public product brief for Shopee Open Platform review.",
};

export const dynamic = "force-dynamic";

export default function ProductBriefPage() {
  const appUrl = getAppUrl();
  const rows = [
    ["Product Name", "Sellfin Commerce OS"],
    ["Service Type", "Accounting and Finance, Order Management, SKU/Product Management, Inventory Tracking"],
    [
      "Description",
      "Sellfin Commerce OS is an internal seller operations system for managing multiple Shopee stores. It connects authorized shops, synchronizes orders, finance, catalog, inventory, and operational reports in one workspace.",
    ],
    ["Business Product URL", `${appUrl}/`],
    ["Login URL", `${appUrl}/login`],
    ["Contact Email", process.env.APP_CONTACT_EMAIL || "-"],
  ];

  return (
    <div className="min-h-dvh bg-slate-100 p-6">
      <main className="mx-auto max-w-4xl space-y-5">
        <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
          <div className="text-xs font-bold uppercase tracking-wide text-teal-700">Shopee Review</div>
          <h1 className="mt-2 text-3xl font-black tracking-tight text-slate-950">Sellfin Commerce OS</h1>
          <p className="mt-2 text-sm text-slate-600">Public product brief for Shopee Open Platform production review.</p>
        </section>

        <section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
          <table className="w-full text-left text-sm">
            <tbody className="divide-y divide-slate-100">
              {rows.map(([label, value]) => (
                <tr key={label}>
                  <th className="w-56 bg-slate-50 px-4 py-4 font-bold text-slate-700">{label}</th>
                  <td className="px-4 py-4 text-slate-600">{value}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </main>
    </div>
  );
}