/* Mesh website hero visual: the "Mesh Close Engine".
   Source systems (left) feed curved connectors into a central accrual
   spreadsheet (Outputs view); results post out to the ERP (right). */

const CE_SOURCES = [
  { label: 'Procurement', logos: ['proc_coupa', 'proc_zip'] },
  { label: 'Emails',      logos: ['email_gmail', 'email_outlook'] },
  { label: 'Database',    logos: ['db_snowflake', 'db_bigquery', 'db_dots'] },
  { label: 'Messages',    logos: ['msg_slack', 'msg_teams'] },
];

const CE_ROWS = [
  { vendor: 'ABC Audit Firm',    po: '$125,000', start: '1/1/2025', end: '12/31/2025', accrual: '$30,000' },
  { vendor: 'Zain Law Firm',     po: '$250,000', start: '6/30/2025', end: '12/31/2025', accrual: '$52,600' },
  { vendor: 'Bay Area Cleaners', po: '$56,000',  start: '6/30/2025', end: '12/31/2025', accrual: '$9,333' },
  { vendor: '123 Events, LLC',   po: '$25,000',  start: '2/1/2025', end: '12/31/2025', accrual: '$0' },
];

// ERP destinations — text marks (no brand art available); rendered as circular chips.
const CE_ERP = [
  { mark: 'N',   color: '#1B3A57' },
  { mark: 'S',   color: '#23A23A' },
  { mark: 'D',   color: '#2A6FDB' },
  { mark: 'SAP', color: '#1B6FB3' },
];

// left connectors (viewBox 0 0 52 480, preserveAspectRatio none): converge to center.
const CE_PATHS = [
  'M0 60 C34 60 18 240 52 240',
  'M0 188 C34 188 18 240 52 240',
  'M0 300 C34 300 18 240 52 240',
  'M0 420 C34 420 18 240 52 240',
];

function CloseEngine() {
  const reduce = React.useRef(typeof window !== 'undefined' && window.matchMedia
    && window.matchMedia('(prefers-reduced-motion: reduce)').matches).current;

  return (
    <div className="ce">
      {/* left source rail */}
      <div className="ce-rail">
        {CE_SOURCES.map(s => (
          <div className="ce-src" key={s.label}>
            <span className="ce-src-label">{s.label}</span>
            <div className="ce-src-logos">
              {s.logos.map((l, i) => (
                <span className="ce-chip" style={{ marginLeft: i ? -8 : 0, zIndex: s.logos.length - i }} key={l}>
                  <img src={window.__assets('brands/' + l + '.png')} alt="" />
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* left connectors */}
      <div className="ce-mid">
        <svg viewBox="0 0 52 480" preserveAspectRatio="none" className="ce-wires">
          {CE_PATHS.map((d, i) => (
            <g key={i}>
              <path d={d} className="ce-wire-bg" />
              <path d={d} className={'ce-wire-fg' + (reduce ? ' lit' : '')} style={{ animationDelay: (i * 0.2) + 's' }} />
            </g>
          ))}
        </svg>
      </div>

      {/* central engine */}
      <div className="ce-engine">
        <div className="ce-card">
          <div className="ce-tabs">
            <span>Inputs</span><span>Rules</span><span className="on">Outputs</span>
          </div>
          <div className="ce-toolbar">
            <div className="ce-seg">
              <span className="on"><Icon name="check-circle-2" className="ic" /> Completed</span>
              <span><Icon name="alert-circle" className="ic" /> Escalated</span>
            </div>
            <button className="ce-export"><Icon name="upload" className="ic" /> Export</button>
          </div>
          <div className="ce-table">
            <div className="ce-row ce-row-head">
              <span>Vendor</span>
              <span className="r">PO Amount</span>
              <span className="r">Contract Start Date</span>
              <span className="r">Contract End Date</span>
              <span className="r">Accrual Estimate</span>
            </div>
            {CE_ROWS.map(r => (
              <div className="ce-row" key={r.vendor}>
                <span className="ce-vn">{r.vendor}</span>
                <span className="r">{r.po}</span>
                <span className="r ce-mut">{r.start}</span>
                <span className="r ce-mut">{r.end}</span>
                <span className="r">{r.accrual}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="ce-analyze">
          <span className={'ce-spin' + (reduce ? '' : ' go')}></span>
          Analyzing 775 net new POs and 2,000 invoices…
        </div>
      </div>

      {/* right connector + ERP output */}
      <div className="ce-mid ce-mid-out">
        <svg viewBox="0 0 40 480" preserveAspectRatio="none" className="ce-wires">
          <path d="M0 240 H40" className="ce-wire-bg" />
        </svg>
      </div>
      <div className="ce-out">
        <span className="ce-src-label">ERP</span>
        <div className="ce-src-logos">
          {CE_ERP.map((e, i) => (
            <span className="ce-chip ce-chip-erp" style={{ marginLeft: i ? -8 : 0, zIndex: CE_ERP.length - i, color: e.color }} key={i}>{e.mark}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CloseEngine });