frontend/src/components/HeroIntro.tsx

interface HeroStep {
  index: string;
  title: string;
  body: string;
  accent: string;
}

const STEPS: HeroStep[] = [
  {
    index: "01",
    title: "Observe",
    body: "We sample a noisy time series from a known physical system (free fall, pendulum, damped spring, …). The agent never sees the true equation.",
    accent: "text-accentBlue",
  },
  {
    index: "02",
    title: "Hypothesise",
    body: "Each turn the agent proposes an ODE in a small SymPy grammar (e.g. d2y/dt2 = -9.81 + 0.05 * vy**2).",
    accent: "text-primary",
  },
  {
    index: "03",
    title: "Verify",
    body: "We integrate the proposal forward and score it against the observation by per-step R². No LLM-as-judge in the reward loop.",
    accent: "text-accentGreen",
  },
];

export function HeroIntro(): JSX.Element {
  return (
    <section
      aria-label="How PhysiX-Live works"
      className="grid grid-cols-1 gap-3 md:grid-cols-3"
    >
      {STEPS.map((step) => (
        <article
          key={step.index}
          className="panel flex flex-col gap-2"
        >
          <div className="flex items-baseline gap-3">
            <span className={`font-mono text-sm font-semibold ${step.accent}`}>
              {step.index}
            </span>
            <h3 className="text-base font-semibold text-textPrimary">
              {step.title}
            </h3>
          </div>
          <p className="text-sm leading-relaxed text-textMuted">{step.body}</p>
        </article>
      ))}
    </section>
  );
}