// Automation section — "Your data, united. Crafted for you. On schedule."
function Automation() {
  return (
    <section id="bi" className="automation">
      <div>
        <div className="eyebrow on-dark"><span className="line" /><span>Business Intelligence</span></div>
        <h2 className="h-section" style={{ marginTop: 18, maxWidth: "673px" }}>
          Workplace intelligence<br />
          <span style={{ color: '#ee4c16' }}>for smarter decisions</span>
        </h2>
        <p className="lead" style={{ marginTop: 22 }}>
          Our biggest differentiator is the way we connect and unite your data sources
          into a single, coherent picture — then build business intelligence tailored
          specifically to your organisation. We design your reporting structure
          around your business, then run it on schedule so leadership receives exactly
          what they need, when they need it.
        </p>
        <div className="auto-points">
          {[[<Icon.upload />, 'You share your data sources', 'From leasing systems, energy platforms, HRIS, travel tools and engagement surveys — or any flat-file your team can email us. We take them as they are and do the heavy lifting.'],
          [<Icon.chart />, 'We connect and unite your data', 'Our process validates, cleans, matches and structures every source against your spatial layer — combining them into a single, unified picture.'],
          [<Icon.grid />, 'Business intelligence built for you, on schedule', 'Reporting designed around your organisation — not a template. It lands directly in Power BI on a cadence that suits your team, every time.']].
          map(([icon, t, b], i) =>
          <div key={i} className="apt">
              <div className="apt-icon">{icon}</div>
              <div>
                <div className="apt-title">{t}</div>
                <div className="apt-body">{b}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="pbi-card">
        <div className="pbi-bar">
          <div className="pbi-bar-title">Reporting pipeline — live</div>
          <div className="pbi-status">Pipeline active</div>
        </div>
        <div className="pbi-steps">
          <div className="pbi-step">
            <div className="pbi-step-icon"><Icon.upload /></div>
            <div className="pbi-step-text">
              <strong>Raw data received</strong>
              <span>Leasing · Base Building · HR · Travel · Engagement</span>
            </div>
          </div>
          <div className="pbi-divider">↓</div>
          <div className="pbi-step">
            <div className="pbi-step-icon"><Icon.chart /></div>
            <div className="pbi-step-text">
              <strong>Data connected &amp; united</strong>
              <span>Cleaning · Verification - Spatial matching</span>
            </div>
          </div>
          <div className="pbi-divider">↓</div>
          <div className="pbi-step">
            <div className="pbi-step-icon"><Icon.grid /></div>
            <div className="pbi-step-text">
              <strong>Reports structured</strong>
              <span>8 reporting lines · Cross-referenced data</span>
            </div>
          </div>
          <div className="pbi-divider">↓</div>
          <div className="pbi-step">
            <div className="pbi-step-icon"><Icon.layers /></div>
            <div className="pbi-step-text">
              <strong>Published</strong>
              <span>Executive &amp; operational dashboards · On schedule</span>
            </div>
          </div>
        </div>
        <div className="pbi-foot">
          <div className="t">Next run: Monday 06:00 AEST</div>
          <div className="bi-badge">
            <div className="box" />
            <div className="t" style={{ color: 'rgba(255,255,255,0.5)' }}>Power BI</div>
          </div>
        </div>
      </div>
    </section>);

}
window.Automation = Automation;