// Reporting Lines — 8 categories spanning workspace + everything else
function ReportingLines() {
  const lines = [
    { i: <Icon.chart/>,    name: 'Executive Dashboard',   desc: 'All lines unified. Portfolio KPIs and cost insights in one Power BI view.', tag: 'C-suite reporting' },
    { i: <Icon.grid/>,     name: 'Occupancy & Workplace', desc: 'Live and historical utilisation by floor, zone, team and desk.', tag: 'Core data layer' },
    { i: <Icon.building/>, name: 'Leasing & Real Estate', desc: 'Lease cost per m² matched against actual occupancy to identify savings.', tag: 'Financial intelligence' },
    { i: <Icon.zap/>,      name: 'Energy & ESG',          desc: 'Consumption correlated with occupancy for sustainability reporting.', tag: 'ESG compliance' },
    { i: <Icon.people/>,   name: 'HR & Teams',            desc: 'Org chart, headcount and team-level reporting — including ticket resolution and movement.', tag: 'People & culture' },
    { i: <Icon.pin/>,      name: 'Travel & Mobility',     desc: 'Travel spend measured against office attendance and regional patterns.', tag: 'Cost optimisation' },
    { i: <Icon.msg/>,      name: '360-Pulse Checks & Feedback', desc: 'Survey and experience data mapped to zones — revealing what drives attrition.', tag: 'People experience' },
    { i: <Icon.doc/>,      name: 'Compliance & Archiving', desc: 'Complete workspace and data history — structured and audit-ready at any time.', tag: 'Governance' },
  ];

  return (
    <section id="reporting" className="reporting">
      <div className="wrap" style={{padding: 0}}>
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="line"/><span>Reporting Lines</span></div>
            <h2 className="h-section" style={{marginTop:18}}>
              Every dimension<br/>
              of your <em>organisation</em>
            </h2>
          </div>
          <p className="lead">
            Eight reporting lines, each grounded in your data and crafted for your
            organisation. Some start at the floorplan. Many don't. All delivered to
            Power BI, on schedule.
          </p>
        </div>

        <div className="rl-grid">
          {lines.map(l => (
            <div className="rl" key={l.name}>
              <div className="rl-icon">{l.i}</div>
              <div className="rl-name">{l.name}</div>
              <div className="rl-desc">{l.desc}</div>
              <div className="rl-tag">{l.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ReportingLines = ReportingLines;