"use client";

import type { AuditMethodology, IndustryClassification } from "@/lib/audit/types";

interface Props {
  methodology?: AuditMethodology;
  industryFramework?: IndustryClassification;
}

export function MethodologySection({ methodology, industryFramework }: Props) {
  if (!methodology && !industryFramework) return null;

  return (
    <div id="audit-methodology" className="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8">
      <h2 className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-5">
        Evaluation Methodology
      </h2>

      {industryFramework && (
        <div className="mb-5 p-4 bg-indigo-50 border border-indigo-200 rounded-xl">
          <div className="flex items-start justify-between gap-4 flex-wrap">
            <div>
              <p className="text-[10px] font-semibold uppercase tracking-widest text-indigo-500 mb-1">
                Industry Classification
              </p>
              <p className="text-sm font-semibold text-indigo-900">{industryFramework.subVertical}</p>
              <p className="text-xs text-indigo-700 mt-0.5">{industryFramework.audienceFraming}</p>
            </div>
            <div className="flex flex-wrap gap-1.5">
              {industryFramework.relevantFrameworks.map((f) => (
                <span key={f} className="text-[11px] font-medium text-indigo-700 bg-indigo-100 px-2.5 py-1 rounded-full">
                  {f}
                </span>
              ))}
            </div>
          </div>
        </div>
      )}

      {methodology && methodology.factors.length > 0 && (
        <div>
          <div className="grid grid-cols-[1fr_2fr] gap-x-6 gap-y-0 text-[10px] font-semibold uppercase tracking-widest text-slate-400 pb-2 border-b border-slate-200">
            <span>Factor</span>
            <span>What we examined</span>
          </div>
          <div className="divide-y divide-slate-100">
            {methodology.factors.map((f, i) => (
              <div key={i} className="grid grid-cols-[1fr_2fr] gap-x-6 gap-y-0 py-3">
                <span className="text-xs font-medium text-slate-800 leading-relaxed">{f.factor}</span>
                <span className="text-xs text-slate-500 leading-relaxed">{f.lookedAt}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
