const MODERNIZATION_STEPS = [
  [
    'Step 01',
    'Define the operating loop.',
    'Map the target model for a shift: equipment, crews, routes, dig blocks, stockpiles, crushers, maintenance windows, safety zones and production KPIs.',
  ],
  [
    'Step 02',
    'Unify signals before optimizing decisions.',
    'Use Field Data Ingestion Runtime and Equipment Reference Graph to capture heterogeneous events and align them to stable operational identities.',
  ],
  [
    'Step 03',
    'Create trusted state and fast views.',
    'Use ChronoState and Operational Read Models to build latest state, intervals, plan-vs-actual, delay queues, material movement and risk context.',
  ],
  [
    'Step 04',
    'Automate durable shift routines.',
    'Use PatternWorks for reconciliation, exception triage, maintenance review, safety follow-up, action delivery and shift handover workflows.',
  ],
  [
    'Step 05',
    'Put action into the working surface.',
    'Use LiveUI to place explanation, confirmation, next action and management feedback into the cockpit used by each role.',
  ],
];

function RouteSection() {
  return (
    <section className="pa-page section" id="route" aria-labelledby="route-title">
      <div className="route">
        <div className="pa-card route-panel">
          <div>
            <span className="pa-eyebrow">Modernization path</span>
            <h2 id="route-title">Improve the operating loop where field reality meets planning intent.</h2>
          </div>
          <p className="section-kicker">
            The strongest modernization path is process-first: establish a trusted operational state, connect it to durable
            routines, then make the resulting actions visible to dispatchers, supervisors, maintenance teams and operators.
          </p>
        </div>
        <div className="route-list" aria-label="Mining operations modernization sequence">
          {MODERNIZATION_STEPS.map(([label, title, copy]) => (
            <div className="route-step" key={label}>
              <span className="pa-panel-title">{label}</span>
              <div>
                <strong>{title}</strong>
                <p>{copy}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OverviewFooter() {
  return (
    <footer className="pa-page footer">
      <span className="pa-mono">Prophecta Assets / Mining operations modernization overview</span>
    </footer>
  );
}

Object.assign(window, { RouteSection, OverviewFooter });