/* Mesh website — "Product" mega-menu (Glean-style flyout).
   Featured overview banner + four product groups + a "where it connects" rail. */

const PRODUCTS = [
  {
    icon: 'database-zap',
    title: 'Automated data collection',
    key: 'unified',
    sub: 'Aggregate signals from every source',
    links: ['Procurement sync', 'AP inbox parsing', 'Slack & Teams', 'Data warehouse'],
  },
  {
    icon: 'file-code-2',
    title: 'Policy-driven accruals',
    key: 'policy',
    sub: 'Encode your accrual logic as scripts',
    links: ['Accrual scripts', 'Vendor rules', 'Estimation models', 'Scheduling'],
  },
  {
    icon: 'shield-check',
    title: 'Full audit trail',
    key: 'audit',
    sub: 'Every number traces to its source',
    links: ['Source lineage', 'Change history', 'Approvals', 'SOC 2 export'],
  },
  {
    icon: 'arrow-left-right',
    title: 'Posts straight to your ERP',
    key: 'erp',
    sub: 'Approved entries sync to NetSuite & SAP',
    links: ['NetSuite', 'SAP', 'No re-keying', 'Two-way sync'],
  },
  {
    icon: 'bar-chart-3',
    title: 'Variance analysis',
    key: 'variance',
    sub: 'Every swing traced to its origin',
    links: ['BVA + Flux', 'Variance drivers', 'Policy lineage', 'Source trace'],
  },
];

const RAIL = [
  { logo: 'msg_slack', label: 'Mesh in Slack' },
  { logo: 'msg_teams', label: 'Mesh in Microsoft Teams' },
  { logo: 'email_gmail', label: 'Mesh in Gmail' },
  { logo: 'email_outlook', label: 'Mesh in Outlook' },
  { logo: 'proc_coupa', label: 'Mesh in Coupa' },
  { logo: 'proc_zip', label: 'Mesh in Zip' },
  { logo: 'db_snowflake', label: 'Mesh in Snowflake' },
  { logo: 'db_bigquery', label: 'Mesh in BigQuery' },
];

function ProductMenu({ open, onEnter, onLeave, onClose }) {
  return (
    <React.Fragment>
      <div className={'mega-scrim' + (open ? ' show' : '')} onClick={onClose} aria-hidden="true"></div>
      <div className={'megamenu' + (open ? ' open' : '')}
           onMouseEnter={onEnter} onMouseLeave={onLeave}
           role="menu" aria-hidden={!open}>
        <div className="mega-card">
          <div className="mega-main">
            <div className="mega-eyebrow">The accrual engine</div>

            <a className="mega-feature" href="/product-overview" onClick={onClose}>
              <span className="mega-feature-tx">Product overview</span>
              <span className="mega-feature-ar"><Icon name="arrow-right" className="ic" /></span>
            </a>

            <div className="mega-grid">
              {PRODUCTS.map(p => (
                <a className="mega-prod" href={'/product-overview#feat-' + p.key} key={p.title} onClick={onClose}>
                  <span className="mega-prod-ic"><Icon name={p.icon} className="ic" /></span>
                  <span className="mega-prod-title">{p.title}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { ProductMenu });