import { motion } from 'framer-motion';

interface ComparisonFeature {
  category: string;
  features: {
    name: string;
    pulse: string | boolean;
    mem0: string | boolean;
    zep: string | boolean;
    letta: string | boolean;
    cognee: string | boolean;
  }[];
}

const COMPARISON_DATA: ComparisonFeature[] = [
  {
    category: 'Core Memory',
    features: [
      { name: 'Persistent memory across sessions', pulse: true, mem0: true, zep: true, letta: true, cognee: true },
      { name: 'Automatic knowledge extraction', pulse: '62+ patterns', mem0: false, zep: true, letta: false, cognee: 'Pipeline' },
      { name: 'Multi-agent shared brain', pulse: true, mem0: true, zep: false, letta: true, cognee: true },
      { name: 'Temporal decay on knowledge', pulse: 'Power-law + configurable half-lives', mem0: false, zep: 'Temporal KG', letta: false, cognee: false },
      { name: 'Spaced retrieval scheduling (FSRS-6)', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Contradiction detection', pulse: 'Dimension A', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Confidence scoring per item', pulse: 'Wilson intervals', mem0: false, zep: false, letta: false, cognee: false },
    ],
  },
  {
    category: 'Search & Retrieval',
    features: [
      { name: 'Semantic search', pulse: true, mem0: true, zep: true, letta: true, cognee: true },
      { name: 'Parallel search sources', pulse: '17 sources', mem0: '1', zep: '1', octopoda: '1' },
      { name: 'Knowledge graph', pulse: '183+ nodes', mem0: 'Basic', zep: 'Temporal KG', letta: true, cognee: true },
      { name: 'Inverted index + hot cache', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Graph-based causal retrieval', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Search latency', pulse: '<2.5s', mem0: '~1.4s', zep: 'Variable', letta: 'Variable', cognee: 'Variable' },
    ],
  },
  {
    category: 'Governance & Safety',
    features: [
      { name: 'Constitutional governance', pulse: '14 laws enforced in code', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Cryptographic signing (HMAC)', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'PII detection & blocking', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Anti-pattern enforcement', pulse: 'Active detection + blocking', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Agent trust scoring', pulse: 'Dimension B', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Provenance tracking', pulse: 'Dimension C', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'SoC enforcement (pre-commit)', pulse: '300 lines, 5 functions max', mem0: false, zep: false, letta: false, cognee: false },
    ],
  },
  {
    category: 'Learning & Consolidation',
    features: [
      { name: 'Background consolidation daemon', pulse: '7-stage pipeline', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Deduplication', pulse: 'Automated', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Pattern promotion', pulse: 'Evidence-weighted', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Prediction daemon', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Brain health monitoring', pulse: 'Automated', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Drift detection', pulse: true, mem0: false, zep: false, letta: false, cognee: false },
    ],
  },
  {
    category: 'Operations',
    features: [
      { name: 'Dashboard', pulse: 'Built-in', mem0: 'Basic', zep: false, letta: false, cognee: false },
      { name: 'Swarm orchestration', pulse: 'Multi-model workers', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'Task board', pulse: 'Built-in', mem0: false, zep: false, letta: false, cognee: false },
      { name: 'CLI commands', pulse: '47', mem0: 'SDK only', zep: 'SDK only', letta: 'SDK + API', cognee: 'SDK' },
      { name: 'Crash recovery', pulse: false, mem0: false, zep: false, letta: false, cognee: false },
      { name: 'MCP server', pulse: '13 tools', mem0: false, zep: false, letta: false, cognee: false },
    ],
  },
  {
    category: 'Privacy & Data',
    features: [
      { name: 'Runs fully offline', pulse: true, mem0: false, zep: 'Community Edition', letta: true, cognee: true },
      { name: 'Data stays on your machine', pulse: true, mem0: 'Cloud', zep: 'Cloud / Self-host', letta: true, cognee: true },
      { name: 'No external API calls required', pulse: true, mem0: false, zep: false, letta: true, cognee: true },
      { name: 'Database', pulse: 'SQLite (local)', mem0: 'Cloud', zep: 'PostgreSQL', letta: 'PostgreSQL', cognee: 'Neo4j / Vector' },
    ],
  },
  {
    category: 'Pricing',
    features: [
      { name: 'Free tier', pulse: '7-day trial', mem0: '1K memories', zep: 'Community', letta: 'Free tier', cognee: 'Open source' },
      { name: 'Starting price', pulse: '$14.97/mo', mem0: 'Pay per call', zep: 'Contact', letta: 'Free / Cloud', cognee: 'Free' },
      { name: 'Pro price', pulse: '$29.97/mo', mem0: 'Pay per call', zep: 'Contact', letta: 'Cloud pricing', cognee: 'Free' },
      { name: 'Unlimited agents', pulse: 'All plans', mem0: 'Paid', zep: 'Enterprise', letta: 'Enterprise', cognee: 'Free' },
    ],
  },
];

function FeatureValue({ value }: { value: string | boolean }) {
  if (typeof value === 'boolean') {
    return value ? (
      <span className="text-emerald-400 font-bold">&#10003;</span>
    ) : (
      <span className="text-slate-600">&#8212;</span>
    );
  }
  return <span className="text-sky-300 text-xs">{value}</span>;
}

export default function Comparison() {
  return (
    <div className="relative min-h-screen bg-slate-950 px-4 sm:px-6 lg:px-8 py-24">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-slate-900/50 to-slate-950 pointer-events-none" />

      <div className="relative z-10 max-w-6xl mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl sm:text-5xl font-black text-sky-400 mb-4 tracking-tight">
            How PULSE Compares
          </h1>
          <p className="text-lg text-slate-300 max-w-2xl mx-auto">
            See how PULSE stacks up against other AI agent memory frameworks.
          </p>
          <p className="text-sm text-slate-500 mt-2">
            Last updated: March 2026
          </p>
        </motion.div>

        {/* Key Differentiators */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16"
        >
          {[
            {
              title: 'Only system with temporal decay',
              description: 'Knowledge confidence decreases over time unless reinforced. Stale information fades automatically. No other framework does this.',
            },
            {
              title: 'Only system with constitutional governance',
              description: '14 laws enforced by code, not prompts. HMAC-signed knowledge, PII detection, anti-pattern blocking. Your agents operate under enforceable rules.',
            },
            {
              title: 'Only system with 6-dimension scoring',
              description: 'Every knowledge item scored across temporal decay, Wilson confidence, contradiction, agent trust, provenance, and working memory. Not just relevance.',
            },
          ].map((item, idx) => (
            <div key={idx} className="bg-sky-500/5 border border-sky-400/20 rounded-2xl p-6">
              <h3 className="text-sky-400 font-bold mb-2">{item.title}</h3>
              <p className="text-slate-400 text-sm leading-relaxed">{item.description}</p>
            </div>
          ))}
        </motion.div>

        {/* Comparison Tables */}
        {COMPARISON_DATA.map((section, sIdx) => (
          <motion.div
            key={section.category}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-60px' }}
            transition={{ duration: 0.5, delay: sIdx * 0.05 }}
            className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6 mb-6 overflow-x-auto"
          >
            <h2 className="text-xl font-bold text-sky-400 mb-4">{section.category}</h2>
            <table className="w-full text-left text-sm">
              <thead>
                <tr className="border-b border-slate-700/50">
                  <th className="pb-3 text-slate-300 font-semibold min-w-[200px]">Feature</th>
                  <th className="pb-3 text-center text-sky-400 font-semibold min-w-[100px]">PULSE</th>
                  <th className="pb-3 text-center text-slate-400 font-semibold min-w-[100px]">Mem0</th>
                  <th className="pb-3 text-center text-slate-400 font-semibold min-w-[100px]">Zep</th>
                  <th className="pb-3 text-center text-slate-400 font-semibold min-w-[100px]">Letta</th>
                  <th className="pb-3 text-center text-slate-400 font-semibold min-w-[100px]">Cognee</th>
                </tr>
              </thead>
              <tbody>
                {section.features.map((feature, fIdx) => (
                  <tr key={fIdx} className={fIdx < section.features.length - 1 ? 'border-b border-slate-700/30' : ''}>
                    <td className="py-3 text-slate-300">{feature.name}</td>
                    <td className="py-3 text-center"><FeatureValue value={feature.pulse} /></td>
                    <td className="py-3 text-center"><FeatureValue value={feature.mem0} /></td>
                    <td className="py-3 text-center"><FeatureValue value={feature.zep} /></td>
                    <td className="py-3 text-center"><FeatureValue value={feature.letta} /></td>
                    <td className="py-3 text-center"><FeatureValue value={feature.cognee} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </motion.div>
        ))}

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center py-12"
        >
          <h2 className="text-2xl font-bold text-white mb-4">Ready to give your agents a real brain?</h2>
          <p className="text-slate-400 mb-8 max-w-lg mx-auto">
            7-day free trial. Local-first. No vendor lock-in.
          </p>
          <a
            href="/pricing"
            className="inline-block px-8 py-4 rounded-xl bg-gradient-to-r from-sky-500 to-cyan-500 text-slate-950 font-semibold text-lg shadow-lg shadow-sky-500/50 hover:shadow-sky-400/75 hover:-translate-y-1 transition-all duration-200"
          >
            Start Free Trial
          </a>
        </motion.div>
      </div>
    </div>
  );
}
