// Sell-side process flow — horizontal five-stage timeline.
// Sits on the Services page after the tender story.
const DyProcessFlow = ({ lang, tt, pk }) => {
  const P = window.dyContent.processFlow;

  return (
    <section className="process-flow" id="process" data-screen-label="02c Process flow">
      <div className="shell-wide">
        <div className="pf-head">
          <div className="pf-eyebrow eyebrow">{pk(P.eyebrow)}</div>
          <h2 className="pf-h">
            {P.h[lang].map((chunk, i) =>
              typeof chunk === "string"
                ? <React.Fragment key={i}>{chunk}</React.Fragment>
                : <em key={i}>{chunk.em}</em>
            )}
          </h2>
          <p className="pf-lead">{pk(P.lead)}</p>
        </div>

        <ol className="pf-track" aria-label={tt("Sell-side process stages", "Fázy predajného procesu")}>
          {P.stages.map((s, i) => (
            <li key={s.n} className="pf-stage" data-last={i === P.stages.length - 1 ? "true" : "false"}>
              <div className="pf-rail">
                <span className="pf-line"></span>
                <span className="pf-dot">
                  <span className="pf-num">{s.n}</span>
                </span>
                {i < P.stages.length - 1 && <span className="pf-arrow" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M13 5l7 7-7 7"/>
                  </svg>
                </span>}
              </div>
              <div className="pf-body">
                <div className="pf-stage-label eyebrow">{pk(s.stage)}</div>
                <h4 className="pf-title">{pk(s.t)}</h4>
                <ul className="pf-bullets">
                  {s.bullets.map((b, j) => (
                    <li key={j}>{pk(b)}</li>
                  ))}
                </ul>
              </div>
            </li>
          ))}
        </ol>

        <p className="pf-footnote">{pk(P.footnote)}</p>
      </div>
    </section>
  );
};

window.DyProcessFlow = DyProcessFlow;