"use client";

import { Check, X, Minus } from "lucide-react";

type Val = boolean | string;
interface Row { feature: string; growth: Val; pro: Val; agency: Val; enterprise: Val }

const GROUPS: Array<{ name: string; rows: Row[] }> = [
  { name: "Intelligence", rows: [
    { feature: "Dashboard", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "AI Strategist", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Keyword Research", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Rank Tracker", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Competitor Intel", growth: false, pro: "3 competitors", agency: "Unlimited", enterprise: "Unlimited" },
    { feature: "Industry Intelligence", growth: false, pro: false, agency: true, enterprise: true },
    { feature: "Conversion Intelligence", growth: false, pro: true, agency: true, enterprise: true },
  ]},
  { name: "Technical", rows: [
    { feature: "Technical Audit", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "Site Tag (basic)", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "Site Tag (full: heatmaps, calls, attribution)", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Backlink Monitoring", growth: false, pro: false, agency: true, enterprise: true },
    { feature: "Page Lifecycle Tracking", growth: true, pro: true, agency: true, enterprise: true },
  ]},
  { name: "Content & Pages", rows: [
    { feature: "SEO Content Briefs", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "LLMO Content Briefs", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "Page Studio", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "AI Humanization Scorer", growth: false, pro: true, agency: true, enterprise: true },
  ]},
  { name: "Reporting", rows: [
    { feature: "Report Studio (PDF/DOCX)", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "PPTX Export", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Automated Email Reports", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "White-label Reports", growth: false, pro: false, agency: true, enterprise: true },
  ]},
  { name: "Client & Team", rows: [
    { feature: "White-label Client Portal", growth: false, pro: false, agency: true, enterprise: true },
    { feature: "Team Management", growth: false, pro: false, agency: true, enterprise: true },
    { feature: "Custom Layouts", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "SSO / SAML", growth: false, pro: false, agency: false, enterprise: true },
    { feature: "API Access", growth: false, pro: false, agency: false, enterprise: true },
  ]},
  { name: "Support", rows: [
    { feature: "Email Support", growth: true, pro: true, agency: true, enterprise: true },
    { feature: "Priority Support", growth: false, pro: true, agency: true, enterprise: true },
    { feature: "Dedicated Account Manager", growth: false, pro: false, agency: false, enterprise: true },
    { feature: "Onboarding Call", growth: false, pro: false, agency: true, enterprise: true },
  ]},
];

function Cell({ val }: { val: Val }) {
  if (val === true) return <Check className="w-4 h-4 text-green-600 mx-auto" />;
  if (val === false) return <X className="w-4 h-4 text-slate-300 mx-auto" />;
  return <span className="text-xs font-semibold text-slate-700">{val}</span>;
}

export default function FeatureTable() {
  const th = "px-4 py-3 text-xs font-bold text-center sticky top-0 bg-white z-10";
  return (
    <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200">
              <th className={`${th} text-left min-w-[200px]`}>Feature</th>
              <th className={`${th} w-28`}>Growth</th>
              <th className={`${th} w-28 bg-brand-50/50`}>Professional</th>
              <th className={`${th} w-28`}>Agency</th>
              <th className={`${th} w-28`}>Enterprise</th>
            </tr>
          </thead>
          <tbody>
            {GROUPS.map((group) => (
              <>
                <tr key={group.name}><td colSpan={5} className="px-4 py-2 bg-slate-50 text-[10px] font-bold uppercase tracking-widest text-slate-500">{group.name}</td></tr>
                {group.rows.map((row) => (
                  <tr key={row.feature} className="border-b border-slate-50 hover:bg-slate-50">
                    <td className="px-4 py-2.5 text-sm text-slate-700">{row.feature}</td>
                    <td className="px-4 py-2.5 text-center"><Cell val={row.growth} /></td>
                    <td className="px-4 py-2.5 text-center bg-brand-50/20"><Cell val={row.pro} /></td>
                    <td className="px-4 py-2.5 text-center"><Cell val={row.agency} /></td>
                    <td className="px-4 py-2.5 text-center"><Cell val={row.enterprise} /></td>
                  </tr>
                ))}
              </>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
