// Generic "coming next" screen for FRD steps not built in this pass, plus thin
// wrappers that reuse the existing workspace for Adjust (warp) and Final (heal).

const PlaceholderStep = ({ title, body }) => (
  <div className="placeholder-step">
    <div className="ph-inner">
      <div className="ph-kicker mono-tiny">FRD STEP · COMING NEXT</div>
      <h2>{title}</h2>
      <p>{body}</p>
    </div>
  </div>
);

const AdjustStep = ({ ctx }) => (
  <div className="workspace">
    <LeftPanel ctx={ctx} />
    <Canvas ctx={ctx} />
    <RightPanel ctx={ctx} />
  </div>
);

const FinalStep = ({ ctx }) => {
  const { state } = ctx;
  const heals = state.results.filter((r) => r.kind === "heal");
  return (
    <div className="final-step">
      <Canvas ctx={ctx} />
      <div className="final-gallery">
        <div className="section-label"><span>Generated results</span></div>
        {heals.length === 0 && <div className="mono-tiny">Run a Photoreal Heal in the Adjust step to see final simulations here.</div>}
        <div className="final-grid">
          {state.results.map((r) => (
            <div key={r.id} className={`final-card ${state.activeResult === r.id ? "active" : ""}`}
              onClick={() => ctx.set({ activeResult: r.id })}>
              <img src={r.url} alt={r.label} />
              <div className="final-meta"><span>{r.label}</span><span className="mono-tiny">{r.metric}</span></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PlaceholderStep, AdjustStep, FinalStep });