const FLOW_LINES = [
  ['target', 'Shift targets, dig blocks, routes, crusher limits, maintenance constraints, safety context'],
  ['field', 'Fleet telemetry, operator input, payloads, delays, queues, fuel, faults, alerts, lab and survey updates'],
  ['truth', 'Prophecta aligns identities, time, quality and late events into a trusted operational state'],
  ['decision', 'Plan-vs-actual, anomaly signals, root cause hints and ranked actions move into shift workflows'],
  ['action', 'Supervisors, dispatchers, maintenance teams and operators see the right cockpit surface'],
];

function HeroSection() {
  return (
    <section className="pa-page hero" aria-labelledby="hero-title">
      <div>
        <span className="pa-eyebrow">Mining operations modernization</span>
        <h1 id="hero-title">Prophecta assets for the <span className="pa-gradient-text">plan-to-execution loop</span></h1>
        <p className="hero-copy">
          A mining operation is a closed loop between targets, field execution, equipment state, material movement,
          maintenance, safety and management reporting. Prophecta assets strengthen the middle of that loop: they turn
          fragmented operational signals into reliable state, explainable decisions and role-specific work surfaces.
        </p>
        <div className="hero-actions" aria-label="Key actions">
          <a className="pa-button pa-button-primary" href="#map">Explore the operations map</a>
          <a className="pa-button" href="#assets">Review Prophecta assets</a>
        </div>
      </div>

      <aside className="pa-card hero-rail" aria-label="Operational loop summary">
        <div className="signal-row">
          <span className="pa-panel-title">Closed operating loop</span>
          <Chip>mine to management</Chip>
        </div>
        <div className="mini-flow">
          {FLOW_LINES.map(([code, copy]) => (
            <div className="flow-line" key={code}>
              <span className="flow-code">{code}</span>
              <span className="flow-copy">{copy}</span>
              <span className="flow-status" aria-hidden="true" />
            </div>
          ))}
        </div>
        <div className="rail-note">
          <span className="pa-panel-title">Prophecta role</span>
          <span>Unify operational data, repair temporal truth, automate durable routines and deliver cockpit-grade interfaces for shift work.</span>
        </div>
      </aside>
    </section>
  );
}

Object.assign(window, { HeroSection });