import React from 'react';
import { CheckIcon, XIcon, MinusIcon } from 'lucide-react';
import { Reveal } from './Reveal';
type CellValue = 'yes' | 'no' | 'partial';
type FeatureRow = {
  feature: string;
  note?: string;
  intellectone: CellValue;
  bistrainer: CellValue;
  learnupon: CellValue;
  learnworlds: CellValue;
};
type FeatureGroup = {
  group: string;
  rows: FeatureRow[];
};
const groups: FeatureGroup[] = [
{
  group: 'Training delivery',
  rows: [
  {
    feature: 'SCORM & xAPI / Storyline courses',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'yes',
    learnworlds: 'partial'
  },
  {
    feature:
    'In-person scheduling with rooms, equipment & conflict-aware resources',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'no'
  },
  {
    feature: 'Blended programs with online-completion certificate gate',
    note: 'Require 100% online before the classroom credential issues',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'In-room QR + PIN exams (no LMS login at the venue)',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Practical pass/fail assessments with notes',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Live classes via Zoom / Google Meet',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'yes',
    learnworlds: 'yes'
  }]

},
{
  group: 'White-label & commerce',
  rows: [
  {
    feature: 'Multi-tenant white-label portals on your own domain',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'partial'
  },
  {
    feature: 'Brand colors & logos across storefront, portal, and emails',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'yes'
  },
  {
    feature:
    'Public “training near you” search (category → location → radius)',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Embeddable in-person calendar widget with checkout',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Stripe & PayPal with coupons, invoices, and bundles',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'yes',
    learnworlds: 'yes'
  },
  {
    feature: 'B2B seats — companies buy inventory and assign learners',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'partial'
  }]

},
{
  group: 'Credentials & compliance',
  rows: [
  {
    feature: 'Visual Certificate Builder with course template assignment',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'yes'
  },
  {
    feature: 'Certificate gates: attendance → exam → practical → online',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Prepaid certificate seats with auditable ledger',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Shareable public certificate verification URLs',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'partial',
    learnworlds: 'partial'
  },
  {
    feature: 'Certificate expiry windows & re-certification tracking',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'partial',
    learnworlds: 'no'
  }]

},
{
  group: 'Platform & operations',
  rows: [
  {
    feature: 'Provider staff roles with scoped permissions',
    intellectone: 'yes',
    bistrainer: 'partial',
    learnupon: 'yes',
    learnworlds: 'partial'
  },
  {
    feature: 'Refund policies: windows, grace periods, no-show rules',
    intellectone: 'yes',
    bistrainer: 'no',
    learnupon: 'no',
    learnworlds: 'no'
  },
  {
    feature: 'Bulk enrollment import (CSV) with optional certificate jobs',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'yes',
    learnworlds: 'partial'
  },
  {
    feature: 'REST API: catalog, auth, learning, enrollment, certificates',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'yes',
    learnworlds: 'yes'
  },
  {
    feature: 'SSO & partner credential integrations',
    intellectone: 'yes',
    bistrainer: 'yes',
    learnupon: 'yes',
    learnworlds: 'partial'
  }]

}];

function Cell({ value, highlight }: {value: CellValue;highlight?: boolean;}) {
  if (value === 'yes') {
    return (
      <span
        className={`mx-auto flex h-7 w-7 items-center justify-center rounded-full ${highlight ? 'bg-brand-bright text-brand-ink' : 'bg-brand-mist text-brand-deep'}`}>
        
        <CheckIcon size={15} strokeWidth={3} aria-hidden="true" />
        <span className="sr-only">Included</span>
      </span>);

  }
  if (value === 'partial') {
    return (
      <span className="mx-auto flex h-7 w-7 items-center justify-center rounded-full bg-brand-ink/8 text-brand-ink/50">
        <MinusIcon size={15} strokeWidth={3} aria-hidden="true" />
        <span className="sr-only">Partial or add-on</span>
      </span>);

  }
  return (
    <span className="mx-auto flex h-7 w-7 items-center justify-center rounded-full text-brand-ink/25">
      <XIcon size={15} strokeWidth={2.5} aria-hidden="true" />
      <span className="sr-only">Not included</span>
    </span>);

}
export function ComparisonTable() {
  return (
    <Reveal>
      <div className="overflow-x-auto rounded-2xl border border-brand-ink/10 bg-white shadow-lift">
        <table className="w-full min-w-[840px] border-collapse text-left">
          <thead>
            <tr className="border-b border-brand-ink/10">
              <th scope="col" className="w-[36%] px-6 py-5">
                <span className="font-display text-xs font-bold uppercase tracking-[0.18em] text-brand-ink/50">
                  Feature
                </span>
              </th>
              <th
                scope="col"
                className="w-[16%] bg-brand-ink px-4 py-5 text-center">
                
                <span className="font-display text-sm font-bold text-white">
                  intellect<span className="text-brand-bright">ONE</span>
                </span>
              </th>
              <th scope="col" className="w-[16%] px-4 py-5 text-center">
                <span className="font-display text-sm font-bold text-brand-ink/70">
                  BIStrainer
                </span>
              </th>
              <th scope="col" className="w-[16%] px-4 py-5 text-center">
                <span className="font-display text-sm font-bold text-brand-ink/70">
                  LearnUpon
                </span>
              </th>
              <th scope="col" className="w-[16%] px-4 py-5 text-center">
                <span className="font-display text-sm font-bold text-brand-ink/70">
                  LearnWorlds
                </span>
              </th>
            </tr>
          </thead>
          {groups.map((group) =>
          <tbody key={group.group}>
              <tr>
                <th
                scope="rowgroup"
                colSpan={2}
                className="bg-brand-mist px-6 py-3 text-left">
                
                  <span className="font-display text-xs font-bold uppercase tracking-[0.18em] text-brand-deep">
                    {group.group}
                  </span>
                </th>
                <td colSpan={3} className="bg-brand-mist" aria-hidden="true" />
              </tr>
              {group.rows.map((row) =>
            <tr
              key={row.feature}
              className="border-b border-brand-ink/8 last:border-b-0">
              
                  <th scope="row" className="px-6 py-4 text-left font-normal">
                    <p className="text-sm font-medium text-brand-ink">
                      {row.feature}
                    </p>
                    {row.note &&
                <p className="mt-0.5 text-xs text-brand-ink/50">
                        {row.note}
                      </p>
                }
                  </th>
                  <td className="bg-brand-ink/[0.03] px-4 py-4">
                    <Cell value={row.intellectone} highlight />
                  </td>
                  <td className="px-4 py-4">
                    <Cell value={row.bistrainer} />
                  </td>
                  <td className="px-4 py-4">
                    <Cell value={row.learnupon} />
                  </td>
                  <td className="px-4 py-4">
                    <Cell value={row.learnworlds} />
                  </td>
                </tr>
            )}
            </tbody>
          )}
        </table>
      </div>

      <div className="mt-5 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-brand-ink/55">
        <span className="flex items-center gap-2">
          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-mist text-brand-deep">
            <CheckIcon size={11} strokeWidth={3} aria-hidden="true" />
          </span>
          Included
        </span>
        <span className="flex items-center gap-2">
          <span className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-ink/8 text-brand-ink/50">
            <MinusIcon size={11} strokeWidth={3} aria-hidden="true" />
          </span>
          Partial, add-on, or higher tier
        </span>
        <span className="flex items-center gap-2">
          <span className="flex h-5 w-5 items-center justify-center rounded-full text-brand-ink/30">
            <XIcon size={11} strokeWidth={2.5} aria-hidden="true" />
          </span>
          Not available
        </span>
      </div>

      <p className="mt-4 max-w-3xl text-xs leading-relaxed text-brand-ink/45">
        Comparison based on publicly available information as of July 2026.
        Competitor capabilities, tiers, and add-ons change over time — verify
        specifics with each vendor. BIStrainer, LearnUpon, and LearnWorlds are
        trademarks of their respective owners.
      </p>
    </Reveal>);

}