// Platform section — visual mapping IS the SaaS identity. Workspace meets BI.
function Platform() {
  const steps = [
  ['01', 'Upload your floorplans', 'Import CAD, PDFs or images. We render every floor, room, zone and workpoint across your entire portfolio.'],
  ['02', 'Map your teams and people', 'Assign individuals and departments to spaces. See who sits where, how teams cluster, and how headcount shifts over time.'],
  ['03', 'Integrate with other data sources', 'Send us exports from leasing, energy, HR, travel, engagement — or anything else. We handle the matching and reconciliation.'],
  ['04', 'Receive business intelligence crafted for you', 'Your data united, your reporting structured around your organisation — delivered to Power BI on schedule.']];


  const caps = [
  { i: <Icon.grid />, g: <Icon.grid width="160" height="160" strokeWidth="0.8" />, t: 'Visual floorplan mapping', b: 'Render any building or floor visually. Navigate your entire portfolio from a single interface — across every city and campus.' },
  { i: <Icon.people />, g: <Icon.people width="160" height="160" strokeWidth="0.8" />, t: 'Team & staff allocation', b: 'Assign people and departments to desks, zones and floors. Always know where everyone sits and how space is being shared.' },
  { i: <Icon.chart />, g: <Icon.chart width="160" height="160" strokeWidth="0.8" />, t: 'Workplace analytics', b: 'Utilisation trends, occupancy patterns and space efficiency — linked directly to the strengths and weaknesses of your floor space and work culture.' },
  { i: <Icon.sensor />, g: <Icon.sensor width="160" height="160" strokeWidth="0.8" />, t: 'Sensors & integrations', b: 'Connect building access, calendar systems, sensors and staff data. The more sources you bring, the sharper your analytics become.' },
  { i: <Icon.shuffle />, g: <Icon.shuffle width="160" height="160" strokeWidth="0.8" />, t: 'Scenario planning', b: 'Model proposed moves and reconfigurations before committing. Share plans with stakeholders and measure impact before a single desk moves.' },
  { i: <Icon.layers />, g: <Icon.layers width="160" height="160" strokeWidth="0.8" />, t: 'Multi-site portfolio', b: 'One platform for every building, every floor, every city. Australian-headquartered clients with global offices managed from a single view.' }];


  return (
    <section id="platform" className="section">
      <div className="wrap" style={{ padding: 0 }}>
        <div className="platform-grid">
          <div className="cap-stack">
            {caps.map((c) =>
            <div className="cap" key={c.t}>
                <div className="cap-bg" aria-hidden="true">{c.g}</div>
                <div className="cap-icon">{c.i}</div>
                <div>
                  <div className="cap-title">{c.t}</div>
                  <div className="cap-body">{c.b}</div>
                </div>
              </div>
            )}
          </div>

          <div className="platform-left">
            <p className="lead">Combining our Platform with your data. Unite every data source your organisation holds — leasing, energy, HR, travel and beyond — to deliver business intelligence crafted for you, straight to Power BI on schedule.</p>
            <div className="steps">
              {steps.map(([n, t, b]) =>
              <div className="step" key={n}>
                  <div className="step-num">{n}</div>
                  <div>
                    <strong>{t}</strong>
                    <span>{b}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.Platform = Platform;