import React from 'react';
import { 
  ShieldCheck, 
  FileCheck2, 
  Check, 
  ArrowRight,
  ExternalLink,
  Sparkles
} from 'lucide-react';
import { COMPARISON_FEATURES } from '../../data/showcaseData';

export const DualExperienceComparison: React.FC = () => {
  return (
    <section className="py-24 bg-slate-950 relative border-t border-slate-900 overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-slate-900 border border-slate-800 text-indigo-400 text-xs font-semibold mb-4">
            <Sparkles className="w-3.5 h-3.5" />
            <span>Dual Experience Matrix</span>
          </div>
          <h2 className="text-3xl sm:text-4xl font-extrabold text-white tracking-tight leading-tight">
            PFM Console vs.{' '}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-emerald-400">
              PFM Partner
            </span>
          </h2>
          <p className="mt-3 text-base text-slate-300 leading-relaxed">
            Engineered with clear separation of duties. Backoffice fiduciary gatekeepers govern portfolios, while field implementation teams deliver verified outcomes.
          </p>
        </div>

        {/* Comparison Table */}
        <div className="overflow-x-auto rounded-3xl border border-slate-800 bg-slate-900/40 backdrop-blur-xl shadow-2xl">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="border-b border-slate-800 bg-slate-950/80">
                <th className="py-5 px-6 text-xs font-mono uppercase tracking-wider text-slate-400 w-1/4">
                  Functional Dimension
                </th>
                <th className="py-5 px-6 text-xs font-bold uppercase tracking-wider text-blue-400 w-3/8 bg-blue-950/20 border-x border-slate-800">
                  <div className="flex items-center gap-2">
                    <ShieldCheck className="w-4 h-4" />
                    <span>PFM Console (Funders & DFIs)</span>
                  </div>
                </th>
                <th className="py-5 px-6 text-xs font-bold uppercase tracking-wider text-emerald-400 w-3/8 bg-emerald-950/20">
                  <div className="flex items-center gap-2">
                    <FileCheck2 className="w-4 h-4" />
                    <span>PFM Partner (Grantees & Contractors)</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800/60 text-xs sm:text-sm">
              {COMPARISON_FEATURES.map((row, idx) => (
                <tr key={idx} className="hover:bg-slate-800/30 transition-colors">
                  <td className="py-4 px-6 font-semibold text-slate-300">
                    {row.feature}
                  </td>
                  <td className="py-4 px-6 text-slate-300 bg-blue-950/10 border-x border-slate-800/80">
                    <div className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
                      <span>{row.console}</span>
                    </div>
                  </td>
                  <td className="py-4 px-6 text-slate-300 bg-emerald-950/10">
                    <div className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mt-2 flex-shrink-0"></span>
                      <span>{row.partner}</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};