import { Building2, ShieldCheck } from "lucide-react";
import { getSiteConfig } from "@/lib/api/site";

/**
 * Who operates Biznie and whom to complain to (4.2): registered name, LLPIN,
 * GSTIN and the grievance officer, from Admin → Website Setup → General.
 * Rows without a saved value are left out rather than shown as blanks.
 */
export default async function CompanyIdentity() {
  const { legal, address, email } = await getSiteConfig({ next: { revalidate: 300 } });
  const officer = legal.grievanceOfficer;

  const identity = [
    { label: "Registered name", value: legal.legalName },
    { label: "LLPIN", value: legal.llpin },
    { label: "GSTIN", value: legal.gstin },
    { label: "Registered office", value: address },
  ].filter((row) => row.value);

  return (
    <section className="border-t border-gray-100 bg-gray-50 py-12">
      <div className="mx-auto grid max-w-7xl gap-6 px-4 sm:px-6 md:grid-cols-2 lg:px-8">
        <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
          <h2 className="mb-4 flex items-center gap-2 text-base font-bold text-gray-900">
            <Building2 size={18} className="text-[#CC1414]" aria-hidden /> Company details
          </h2>
          <dl className="space-y-2 text-sm">
            {identity.map((row) => (
              <div key={row.label} className="grid grid-cols-[9rem_1fr] gap-2">
                <dt className="text-gray-500">{row.label}</dt>
                <dd className="font-medium text-gray-900">{row.value}</dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-100">
          <h2 className="mb-4 flex items-center gap-2 text-base font-bold text-gray-900">
            <ShieldCheck size={18} className="text-[#CC1414]" aria-hidden /> Grievance Officer
          </h2>
          {officer.name ? (
            <dl className="space-y-2 text-sm">
              <div className="grid grid-cols-[9rem_1fr] gap-2">
                <dt className="text-gray-500">Name</dt>
                <dd className="font-medium text-gray-900">{officer.name}</dd>
              </div>
              {officer.email && (
                <div className="grid grid-cols-[9rem_1fr] gap-2">
                  <dt className="text-gray-500">Email</dt>
                  <dd>
                    <a href={`mailto:${officer.email}`} className="font-medium text-[#CC1414] hover:underline">
                      {officer.email}
                    </a>
                  </dd>
                </div>
              )}
              {officer.phone && (
                <div className="grid grid-cols-[9rem_1fr] gap-2">
                  <dt className="text-gray-500">Phone</dt>
                  <dd className="font-medium text-gray-900">{officer.phone}</dd>
                </div>
              )}
              {officer.responseTime && (
                <div className="grid grid-cols-[9rem_1fr] gap-2">
                  <dt className="text-gray-500">Response time</dt>
                  <dd className="font-medium text-gray-900">{officer.responseTime}</dd>
                </div>
              )}
            </dl>
          ) : (
            <p className="text-sm text-gray-600">
              For complaints, write to{" "}
              <a href={`mailto:${email}`} className="font-medium text-[#CC1414] hover:underline">
                {email}
              </a>
              {officer.responseTime ? ` — we respond ${officer.responseTime}.` : "."}
            </p>
          )}
        </div>
      </div>
    </section>
  );
}