const FIT_CARDS = [
  {
    tag: 'operational signals',
    title: 'Mining sites run on many systems that describe the same shift differently.',
    body: (
      <>
        Fleet feeds, onboard sensors, planning exports, maintenance records, lab results, safety alerts and manual shift logs
        arrive through different formats and update cycles. <strong>Field Data Ingestion Runtime</strong> gives those signals
        a consistent event envelope before they become operational facts.
      </>
    ),
  },
  {
    tag: 'temporal truth',
    title: 'Weak connectivity makes the latest state hard to trust.',
    body: 'Equipment events arrive late, duplicate, out of order or with missing measurements. ChronoState preserves event time, ingestion time, intervals, confidence signals and recomputation windows so teams can explain why a state is trusted.',
  },
  {
    tag: 'shift execution',
    title: 'Efficiency improves when insights become part of the working routine.',
    body: 'PatternWorks keeps reconciliation, exception triage, maintenance review and safety follow-up running across retries and handoffs. LiveUI turns the result into dispatcher, supervisor, maintenance and operator surfaces instead of another report queue.',
  },
];

function FitSection() {
  return (
    <section className="pa-page section" id="fit" aria-labelledby="fit-title">
      <SectionHeader
        eyebrow="Operational patterns"
        titleId="fit-title"
        title="Typical mining workflows need trusted state between planning, equipment and field execution."
        kicker="The recurring challenge is not a lack of screens. It is the gap between operational intent and what the field actually did, under real network, identity, timing and handover constraints."
      />

      <div className="fit-grid">
        {FIT_CARDS.map((card) => (
          <article className="pa-card fit-card" key={card.title}>
            <Chip>{card.tag}</Chip>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { FitSection });