import Link from "next/link";
import { getSettings } from "@/lib/session";

export default async function PricingPage() {
  const s = await getSettings();
  return (
    <div className="mx-auto max-w-3xl">
      <h1 className="text-3xl font-semibold">Precios y comisiones</h1>
      <p className="mt-2 text-white/60">
        Tarifas configurables desde el panel admin.
      </p>
      <div className="mt-8 grid gap-4 md:grid-cols-2">
        <div className="card">
          <h2 className="text-lg font-semibold">Clientes</h2>
          <p className="mt-3 text-3xl font-semibold text-[var(--lime)]">
            {s.clientFeePercent}%
          </p>
          <p className="text-sm text-white/60">Cargo plataforma por servicio</p>
          <p className="mt-3 text-sm">
            Founders: <strong>{s.founderClientFeePercent}%</strong>
          </p>
        </div>
        <div className="card">
          <h2 className="text-lg font-semibold">Contratistas</h2>
          <p className="mt-3 text-3xl font-semibold text-[var(--lime)]">
            ${s.contractorMonthlyFee}
          </p>
          <p className="text-sm text-white/60">
            Suscripcion mensual (configurada en Admin)
          </p>
          <p className="mt-3 text-sm">
            Retencion: {s.contractorRetentionPercent}% / Founders{" "}
            {s.founderContractorRetentionPercent}%
          </p>
        </div>
      </div>
      <Link href="/founders" className="mt-6 inline-block text-[var(--lime)]">
        Ver Founder&apos;s Club →
      </Link>
    </div>
  );
}