/* Mesh — Product Overview page: centered hero + platform map.
   Echoes the reference product-overview layout (eyebrow → headline → CTAs →
   big platform diagram) but built around Mesh's four accrual pillars. */

function OverviewHero({ onCta }) {
  return (
    <header className="ov-hero">
      <div className="ov-hero-bg" aria-hidden="true"></div>
      <div className="wrap ov-hero-inner">
        <div className="eyebrow ov-eyebrow">Product Overview</div>
        <h1 className="ov-h1">The autonomous engine for an<br /><span className="hl">audit-ready</span> close</h1>
        <p className="ov-sub">Close 2x faster. Automate accruals by 90%.</p>
        <div className="ov-cta-row">
          <a className="ov-watch" href="#" onClick={(e) => { e.preventDefault(); onCta && onCta(); }}>
            <span className="ov-watch-ic"><Icon name="play" className="ic" /></span>
            Try it out <Icon name="arrow-right" className="ic" />
          </a>
        </div>
      </div>
    </header>
  );
}

const OV_SOURCES = ['proc_coupa', 'proc_zip', 'email_gmail', 'email_outlook', 'msg_slack', 'msg_teams', 'db_snowflake', 'db_bigquery'];

function Logo({ id, size = 36 }) {
  return <span className="ov-logo" style={{ width: size, height: size }}><img src={window.__assets('brands/' + id + '.png')} alt="" /></span>;
}

const PILLARS = [
  {
    icon: 'database-zap', label: 'From every source', title: 'Automated data collection',
    body: <div className="ov-logos">{OV_SOURCES.map(s => <Logo key={s} id={s} />)}</div>,
  },
  {
    icon: 'file-code-2', label: 'For every vendor', title: 'Policy-driven accruals',
    body: <div className="ov-chips">{['SaaS', 'Cloud', 'Payroll', 'Marketing', 'Contractors', 'Usage-based'].map(c => <span className="ov-chip" key={c}>{c}</span>)}</div>,
  },
  {
    icon: 'activity', label: 'Before every close', title: 'Built-in health checks',
    body: <div className="ov-chips">{['Variance', 'Threshold', 'Anomaly', 'Reconciliation'].map(c => <span className="ov-chip" key={c}>{c}</span>)}</div>,
  },
];

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

function OutputsPanel() {
  const [ref, inView] = useReveal();
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (!inView) return;
    setShown(0);
    let i = 0;
    const id = setInterval(() => {
      i += 1;
      setShown(i);
      if (i >= OV_ROWS.length) clearInterval(id);
    }, 420);
    return () => clearInterval(id);
  }, [inView]);
  return (
    <div className="panel ov-core" ref={ref}>
      <div className="ov-tabs" role="tablist">
        <span className="ov-tab">Inputs</span>
        <span className="ov-tab">Rules</span>
        <span className="ov-tab is-active">Outputs</span>
      </div>
      <div className="ov-out">
        <div className="ov-out-head">
          <div className="ov-seg">
            <span className="ov-seg-btn is-active"><Icon name="check-circle-2" className="ic" /> Completed</span>
            <span className="ov-seg-btn"><Icon name="alert-circle" className="ic" /> Escalated</span>
          </div>
          <button className="btn btn-primary ov-export"><Icon name="upload" className="ic" /> Export</button>
        </div>
        <table className="ov-tbl">
          <thead>
            <tr>
              <th className="l">Vendor</th>
              <th>PO Amount</th>
              <th>Contract Start Date</th>
              <th>Contract End Date</th>
              <th>Accrual Estimate</th>
            </tr>
          </thead>
          <tbody>
            {OV_ROWS.map((r, i) => (
              <tr key={r.v} className={'ov-trow' + (i < shown ? ' in' : '')}>
                <td className="l">{r.v}</td>
                <td>{r.po}</td>
                <td>{r.s}</td>
                <td>{r.e}</td>
                <td>{r.acc}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="ov-analyzing"><span className="ov-spin" aria-hidden="true"></span> Analyzing 775 net new POs and 2,000 invoices…</div>
    </div>
  );
}

function PlatformMap() {
  return (
    <section className="ov-map-wrap">
      <div className="wrap">
        <Reveal className="ov-pop">
        <div className="ov-map">
          <div className="ov-cards">
            {PILLARS.map(p => (
              <div className="ov-card" key={p.title}>
                <div className="ov-card-top">
                  <span className="ov-card-ic"><Icon name={p.icon} className="ic" /></span>
                  <span className="ov-card-label">{p.label}</span>
                </div>
                <div className="ov-card-title">{p.title}</div>
                <div className="ov-card-body">{p.body}</div>
              </div>
            ))}
          </div>

          <div className="ov-link"><span></span></div>

          <OutputsPanel />

          <div className="ov-stack">
            <span className="ov-stack-label">Connected to your stack</span>
            <div className="ov-stack-row">{OV_SOURCES.map(s => <Logo key={s} id={s} size={42} />)}</div>
          </div>
        </div>
        </Reveal>
      </div>
    </section>
  );
}

function PlaceholderShot({ label }) {
  return (
    <div className="ov-shot" role="img" aria-label={label}>
      <span className="ov-shot-tag">{label}</span>
    </div>
  );
}

const FEATURES = [
  {
    shotKey: 'unified',
    title: 'Never chase an invoice again.',
    body: 'Mesh pings the right DRI in Slack and emails vendors directly. “Did you receive the services? Did the invoices arrive?” Then, every reply automatically updates the accrual spreadsheet. The most dreaded week of the month, streamlined.',
    cta: 'See the stakeholder outreach in action',
  },
  {
    shotKey: 'policy',
    title: 'Set your policy once. Run it every close.',
    body: 'Encode your scattered accrual logic once and Mesh runs it automatically every period, version-controlled and fully human-editable. The month-end spreadsheet wrangling disappears, but you remain in control.',
    cta: 'See the policy engine in action',
  },
  {
    shotKey: 'audit', featured: true,
    title: 'Every number traces back to its source.',
    body: 'Each accrual ties to a policy version and the exact data behind it. When an auditor asks “where did this come from,” you click; you don’t dig. It’s why teams like DoorDash run their close on Mesh.',
    cta: 'See the audit trail in action',
  },
  {
    shotKey: 'erp',
    title: 'Approved entries post straight to your ERP.',
    body: 'Once you approve, journal entries flow directly into NetSuite or SAP, no re-keying, no rip-and-replace. Mesh fits the stack you already run instead of asking you to switch.',
    cta: 'See the ERP sync in action',
  },
  {
    shotKey: 'variance',
    title: 'Variance analysis that explains itself.',
    body: 'Mesh’s BVA + Flux surfaces the variance and the reason each explanation traces back to the accrual policy and data source that produced it. ',
    cta: 'See variance analysis in action',
  },
];

function RampFeatures({ onCta }) {
  return (
    <section className="ov-feat-wrap">
      <div className="wrap">
        <div className="ov-feat-head">
          <h2 className="ov-feat-title">From first signal to posted entry.</h2>
          <p className="ov-feat-sub">Mesh runs the entire accrual close end to end, so your team closes with confidence.</p>
        </div>
        <div className="ov-feat-rows">
          {FEATURES.map((f, i) => (
            <div className={'ov-feat-row' + (i % 2 ? '' : ' rev') + (f.featured ? ' ov-feat-row--star' : '')} id={'feat-' + f.shotKey} key={f.title}>
              <div className="ov-feat-tx">
                <h3>{f.title}</h3>
                <p>{f.body}</p>
                <a className="ov-feat-cta" href="#" onClick={(e) => { e.preventDefault(); onCta && onCta(); }}>{f.cta} <Icon name="arrow-right" className="ic" /></a>
              </div>
              {(() => { const Shot = (window.FS_SHOTS && window.FS_SHOTS[f.shotKey]) || PlaceholderShot; return <Shot label={f.shotKey} />; })()}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OverviewCTA({ onCta }) {
  return (
    <section className="section" style={{ paddingTop: 8 }}>
      <div className="wrap">
        <div className="cta">
          <div className="cta-glow"></div>
          <h2>Retire the <span className="hl">accrual spreadsheet.</span></h2>
          <p className="sub">See Mesh encode your accrual logic and reconcile a real close, collected, checked, and traced end to end.</p>
          <div className="row">
            <button className="btn btn-white btn-lg" onClick={onCta}>Get a demo <Icon name="arrow-right" className="ic" /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OverviewHero, PlatformMap, RampFeatures, OverviewCTA });