// FPDS Pricing — professional feature comparison matrix.
// Tiers as columns, features as rows grouped by capability domain.

const TIER_COLUMNS = [
  { key:'public',      slug:'public',       label:'Public',     price:'Free',       annual:null,        color:'#64748B' },
  { key:'t05',         slug:'explorer',     label:'Explorer',   price:'$75/mo',     annual:'$720/yr',   color:'#0369A1' },
  { key:'t1',          slug:'professional', label:'Professional', price:'$800/mo',  annual:'$7,680/yr', color:'#0D9488' },
  { key:'t2',          slug:'advanced',     label:'Advanced',   price:'$5,000/mo',  annual:'$48,000/yr', color:'#7C3AED', featured:true },
  { key:'t3',          slug:'enterprise',   label:'Enterprise', price:'$18,000/mo', annual:'save 30%',  color:'#BE185D' },
  { key:'custom',      slug:'custom',       label:'Custom',     price:'Negotiated', annual:null,        color:'#991B1B' },
];

const FEATURE_GROUPS = [
  {
    label:'Data Access',
    rows:[
      ['Discovery tools',          true, true, true, true, true, true],
      ['Datasets',                 '~10', '40', 'All bounded', 'All', 'All', 'All'],
      ['Department scope',         'Discovery', '3 selected', '10', 'All', 'All', 'All'],
      ['Fiscal year history',      '3 FY', '3 FY', '5 FY', 'Full', 'Full', 'Full'],
      ['Source material access',   false, false, true, true, true, true],
    ],
  },
  {
    label:'Keywords & Topics',
    rows:[
      ['Keyword search',           false, true, true, true, true, true],
      ['Keyword analytics',        false, true, true, true, true, true],
      ['Keyword comparison',       false, true, true, true, true, true],
      ['Keyword-topic bridge',     false, true, true, true, true, true],
      ['Keyword neighbors',        false, false, false, true, true, true],
      ['Keyword lifecycle',        false, false, false, true, true, true],
      ['Keyword velocity',        false, false, false, true, true, true],
      ['Topic search',             false, true, true, true, true, true],
      ['Topic profiles',           false, false, true, true, true, true],
      ['Canonical themes',         false, false, true, true, true, true],
      ['Topic fingerprints',       false, false, false, true, true, true],
    ],
  },
  {
    label:'Vendor Intelligence',
    rows:[
      ['Vendor profiles (360)',    false, false, true, true, true, true],
      ['Vendor comparison',        false, false, true, true, true, true],
      ['Vendor keyword profile',   false, true, true, true, true, true],
      ['Customer profiles',        false, true, true, true, true, true],
    ],
  },
  {
    label:'Semantic Search',
    rows:[
      ['Search access',            false, false, '500/mo capped', 'Unlimited', 'Unlimited', 'Unlimited'],
      ['Search surface',           '—', '—', 'Records only', 'Records + Chunks', 'All surfaces', 'All surfaces'],
      ['FY depth',                 '—', '—', '5 FY', 'Full', 'Full', 'Full'],
      ['top_k ceiling',            '—', '—', '10', '10', '50', '50'],
      ['Document types',           '—', '—', '—', '9 types', '9 types', '9 types'],
    ],
  },
  {
    label:'Knowledge Graph',
    rows:[
      ['Entity link edges',        false, false, false, true, true, true],
      ['Competitive edges',        false, false, false, true, true, true],
      ['Teaming edges',            false, false, false, true, true, true],
      ['Vehicle lineage',          false, false, false, true, true, true],
      ['Graph traversal',          false, false, false, false, false, true],
      ['Temporal KG embeddings',   false, false, false, false, false, true],
    ],
  },
  {
    label:'Evidence & Analytics',
    rows:[
      ['Evidence claims',          false, false, false, true, true, true],
      ['Claim signals',            false, false, false, true, true, true],
      ['Document forensics',       false, false, false, true, true, true],
      ['Convergence scoring',      false, false, false, false, false, true],
      ['Anomaly detection',        false, false, false, false, false, true],
      ['Tensor decomposition',     false, false, false, false, false, true],
      ['Markov lifecycle models',  false, false, false, false, false, true],
      ['Vendor win prediction',    false, false, false, false, false, true],
      ['Strategy-to-award lag',    false, false, false, false, false, true],
    ],
  },
  {
    label:'AI & Automation',
    rows:[
      ['AI artifact generation',   false, false, false, false, '5/day ours\n10/day BYO', 'Negotiated'],
      ['Orchestrated capture',     false, false, false, false, true, true],
      ['Report templates',         false, false, false, false, '9 types', '9 types'],
      ['SQL lookup (scaffolding)', false, false, false, true, true, true],
    ],
  },
  {
    label:'Infrastructure',
    rows:[
      ['Requests/day',             '50', '250', '1,250', '5,000', '12,500', 'Negotiated'],
      ['Rows/request',             '50', '125', '250', '500', '1,000', 'Negotiated'],
      ['MCP server access',        'Public tools', 'Public tools', 'Add-on $200/mo', 'Add-on $200/mo', 'Included', 'Included'],
      ['Concurrent connections',   '1', '3', '10', '25', '50', 'Negotiated'],
      ['Dedicated GPU capacity',   false, false, false, false, false, true],
      ['White-label deployment',   false, false, false, false, false, true],
      ['Custom SLA',               false, false, false, false, false, true],
      ['Multi-seat discounts',     false, false, false, false, '5+ seats', '5+ seats', 'Negotiated'],
    ],
  },
];

const Check = () => (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0D9488" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
);

const Dash = () => <span style={{ color:'#CBD5E1' }}>—</span>;

const renderCell = (value, featured) => {
  if (value === true) return <Check/>;
  if (value === false) return <Dash/>;
  if (typeof value === 'string' && value.includes('\n')) {
    return value.split('\n').map((line, i) => (
      <span key={i} style={{ display:'block', fontSize:12, lineHeight:1.50 }}>
        {line}
      </span>
    ));
  }
  return <span style={{
    fontSize:12,
    fontWeight:featured ? 600 : 400,
    color:featured ? '#0F172A' : '#475569',
  }}>{value}</span>;
};

const PricingPage = () => (
  <div style={{ background:'#FFFFFF', minHeight:'100vh' }}>
    {/* Minimal hero — no decorative elements, just title + key info */}
    <section style={{
      padding:'100px 0 64px',
      borderBottom:'1px solid #E2E8F0',
    }}>
      <div className="container">
        <div style={{
          display:'flex', alignItems:'flex-end', justifyContent:'space-between',
          flexWrap:'wrap', gap:24,
        }}>
          <div>
            <h1 style={{
              fontSize:'clamp(32px, 4vw, 48px)', fontWeight:800,
              color:'#0F172A', lineHeight:1.10, letterSpacing:'-0.02em',
              margin:'0 0 8px',
            }}>
              Pricing
            </h1>
            <p style={{
              fontSize:17, lineHeight:1.55, color:'#64748B', maxWidth:520, margin:0,
            }}>
              Tiered access across six plans. One API key works everywhere — REST, MCP, and SDK.
            </p>
          </div>
          <div style={{
            display:'flex', gap:8, flexWrap:'wrap',
          }}>
            <span style={{ fontSize:13, color:'#94A3B8' }}>
              Annual: save 20% &nbsp;·&nbsp; Enterprise: save 30% &nbsp;·&nbsp; Per-seat pricing
            </span>
          </div>
        </div>
      </div>
    </section>

    {/* Feature comparison table */}
    <section style={{ padding:'0 0 80px' }}>
      <div className="container" style={{ overflowX:'auto' }}>
        <table style={{
          width:'100%', borderCollapse:'collapse', minWidth:960,
          fontSize:13,
        }}>
          {/* Tier header row */}
          <thead>
            <tr style={{ borderBottom:'2px solid #E2E8F0' }}>
              <th style={{
                textAlign:'left', padding:'16px 16px 12px',
                fontWeight:700, fontSize:13, color:'#0F172A',
                position:'sticky', left:0, background:'#FFFFFF', zIndex:1,
              }}>
                <span style={{ display:'block', fontSize:11, textTransform:'uppercase', letterSpacing:'0.08em', color:'#94A3B8', marginBottom:6 }}>
                  Feature
                </span>
              </th>
              {TIER_COLUMNS.map((tier, i) => (
                <th key={i} style={{
                  textAlign:'center', padding:'16px 14px 12px',
                  background: tier.featured ? 'rgba(0,0,128,0.02)' : 'transparent',
                  borderLeft: tier.featured ? '1px solid rgba(0,0,128,0.10)' : 'none',
                  borderRight: tier.featured ? '1px solid rgba(0,0,128,0.10)' : 'none',
                }}>
                  <span style={{
                    display:'inline-block',
                    fontSize:10, fontWeight:700, textTransform:'uppercase',
                    letterSpacing:'0.08em', padding:'3px 8px', borderRadius:4,
                    color:tier.color, background:`${tier.color}10`,
                    marginBottom:8,
                  }}>
                    {tier.label}
                  </span>
                  <span style={{
                    display:'block', fontSize:20, fontWeight:800,
                    color:'#0F172A', letterSpacing:'-0.02em',
                  }}>
                    {tier.price}
                  </span>
                  {tier.annual && (
                    <span style={{
                      display:'block', fontSize:11, fontWeight:600,
                      color:'#0D9488', marginTop:4,
                    }}>
                      Annual: {tier.annual}
                    </span>
                  )}
                </th>
              ))}
            </tr>
          </thead>

          <tbody>
            {FEATURE_GROUPS.map((group, gi) => (
              <React.Fragment key={gi}>
                {/* Group header */}
                <tr>
                  <td colSpan={7} style={{
                    padding:'28px 16px 10px',
                    fontSize:12, fontWeight:700, textTransform:'uppercase',
                    letterSpacing:'0.10em', color:'#0D9488',
                    borderBottom:'1px solid #E2E8F0',
                    position:'sticky', left:0, background:'#FFFFFF',
                  }}>
                    {group.label}
                  </td>
                </tr>
                {/* Feature rows */}
                {group.rows.map((row, ri) => (
                  <tr key={ri} style={{
                    borderBottom:'1px solid #F1F5F9',
                    background: ri % 2 === 0 ? 'transparent' : '#FAFBFC',
                  }}>
                    <td style={{
                      padding:'10px 16px',
                      fontWeight:500, color:'#334155',
                      position:'sticky', left:0,
                      background: ri % 2 === 0 ? '#FFFFFF' : '#FAFBFC',
                      borderRight:'1px solid #F1F5F9',
                    }}>
                      {row[0]}
                    </td>
                    {row.slice(1).map((val, ci) => (
                      <td key={ci} style={{
                        textAlign:'center', padding:'10px 14px',
                        background: ci === 3 ? 'rgba(0,0,128,0.015)' : 'transparent',
                      }}>
                        {renderCell(val, ci === 3)}
                      </td>
                    ))}
                  </tr>
                ))}
              </React.Fragment>
            ))}

            {/* CTA row */}
            <tr style={{ borderTop:'2px solid #E2E8F0' }}>
              <td style={{
                padding:'24px 16px',
                position:'sticky', left:0, background:'#FFFFFF',
              }}>
                <span style={{ fontSize:13, fontWeight:600, color:'#0F172A' }}>
                  Get started
                </span>
              </td>
              {TIER_COLUMNS.map((tier, i) => (
                <td key={i} style={{
                  textAlign:'center', padding:'24px 14px',
                  background: tier.featured ? 'rgba(0,0,128,0.015)' : 'transparent',
                }}>
                  <a href={`#/signup?tier=${tier.slug}`}
                    style={{
                      display:'inline-flex', alignItems:'center', gap:6,
                      padding:'10px 20px', borderRadius:8, fontSize:12, fontWeight:600,
                      textDecoration:'none',
                      background: tier.featured ? '#000080' : 'transparent',
                      color: tier.featured ? '#FFFFFF' : '#000080',
                      border: tier.featured ? 'none' : '1px solid rgba(0,0,128,0.20)',
                      transition:'all 0.15s',
                    }}
                    onMouseEnter={e => {
                      if (tier.featured) e.currentTarget.style.background = '#1E3A8A';
                      else { e.currentTarget.style.background = 'rgba(0,0,128,0.04)'; e.currentTarget.style.borderColor = '#000080'; }
                    }}
                    onMouseLeave={e => {
                      if (tier.featured) e.currentTarget.style.background = '#000080';
                      else { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(0,0,128,0.20)'; }
                    }}
                  >
                    {tier.key === 'public' ? 'Try free' :
                     tier.key === 't3' || tier.key === 'custom' ? 'Schedule a call' : 'Get started'}
                  </a>
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    {/* MCP add-on card */}
    <section style={{ padding:'0 0 96px' }}>
      <div className="container">
        <div style={{
          border:'1px solid #E2E8F0', borderRadius:16,
          padding:'48px 48px 40px',
          background:'linear-gradient(135deg, rgba(0,0,128,0.04) 0%, rgba(0,0,128,0.015) 55%, #FFFFFF 100%)',
        }}>
          <div style={{
            display:'flex', alignItems:'flex-start', justifyContent:'space-between',
            gap:32, flexWrap:'wrap',
          }}>
            <div style={{ maxWidth:520 }}>
              <span style={{
                display:'inline-block', fontSize:11, fontWeight:700,
                textTransform:'uppercase', letterSpacing:'0.08em', color:'#0D9488',
                marginBottom:12,
              }}>
                MCP server access
              </span>
              <h2 style={{
                fontSize:'clamp(24px, 3vw, 32px)', fontWeight:800,
                color:'#0F172A', lineHeight:1.12, letterSpacing:'-0.02em',
                margin:'0 0 12px',
              }}>
                Same tools, same key — now inside your AI agents.
              </h2>
              <p style={{
                fontSize:15, lineHeight:1.55, color:'#64748B', margin:0,
              }}>
                The FPDS MCP server lets Claude and other AI agents run discovery,
                keyword, vendor, and capture workflows natively. The public MCP tools
                are free — no key required.
              </p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginTop:24 }}>
                <a href="#/signup?addon=mcp" style={{
                  display:'inline-flex', alignItems:'center', gap:8,
                  padding:'12px 24px', background:'#000080', color:'#FFFFFF',
                  borderRadius:8, textDecoration:'none', fontWeight:600, fontSize:14,
                  transition:'all 0.15s',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background='#1E3A8A'; }}
                  onMouseLeave={e => { e.currentTarget.style.background='#000080'; }}
                >
                  Add MCP to your key
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
                  </svg>
                </a>
                <a href="#/docs/mcp" style={{
                  display:'inline-flex', alignItems:'center', gap:8,
                  padding:'12px 24px', color:'#000080',
                  border:'1px solid rgba(0,0,128,0.20)', background:'transparent',
                  borderRadius:8, textDecoration:'none', fontWeight:600, fontSize:14,
                  transition:'all 0.15s',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background='rgba(0,0,128,0.04)'; e.currentTarget.style.borderColor='#000080'; }}
                  onMouseLeave={e => { e.currentTarget.style.background='transparent'; e.currentTarget.style.borderColor='rgba(0,0,128,0.20)'; }}
                >
                  Explore MCP docs
                </a>
              </div>
            </div>

            <div style={{
              display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))',
              gap:16, flex:'1 1 420px',
            }}>
              {[
                { value:'Included',  label:'With Enterprise and Custom plans' },
                { value:'$200/mo',   label:'Add-on for Professional and Advanced, per seat' },
                { value:'5,000',     label:'Tool-calls per month, separate from REST limits' },
              ].map((fact, i) => (
                <div key={i} style={{
                  background:'#FFFFFF', border:'1px solid #E2E8F0',
                  borderRadius:10, padding:'20px 20px 16px',
                }}>
                  <div style={{
                    fontSize:22, fontWeight:800, color:'#000080',
                    letterSpacing:'-0.02em', marginBottom:6,
                  }}>
                    {fact.value}
                  </div>
                  <div style={{ fontSize:13, lineHeight:1.50, color:'#64748B' }}>
                    {fact.label}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Enterprise callout */}
    <section style={{
      padding:'64px 0 80px',
      background:'#FAFBFC',
      borderTop:'1px solid #E2E8F0',
    }}>
      <div className="container" style={{ maxWidth:640 }}>
        <h2 style={{
          fontSize:20, fontWeight:700, color:'#0F172A',
          margin:'0 0 12px',
        }}>
          Custom plans for enterprise procurement organizations.
        </h2>
        <p style={{
          fontSize:15, lineHeight:1.55, color:'#64748B', margin:'0 0 24px',
        }}>
          Custom contracts include dedicated GPU capacity for sub-100ms semantic search,
          white-label API deployment on your domain, cloud-copy in your VPC, custom corpus
          ingestion for proprietary data, convergence scoring, statistical models, and
          99.9%+ uptime SLAs. Annual contracts, invoice-based.
        </p>
        <a href="#/signup?tier=custom" style={{
          display:'inline-flex', alignItems:'center', gap:8,
          padding:'12px 24px', background:'#000080', color:'#FFFFFF',
          borderRadius:8, textDecoration:'none', fontWeight:600, fontSize:14,
          transition:'all 0.15s',
        }}
          onMouseEnter={e => { e.currentTarget.style.background='#1E3A8A'; }}
          onMouseLeave={e => { e.currentTarget.style.background='#000080'; }}
        >
          Schedule a call
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
          </svg>
        </a>
      </div>
    </section>
  </div>
);
window.PricingPage = PricingPage;