// NextAction.jsx — next-step plan panel with step list + export CTA
const { useState: useStateN } = React;

const NextAction = ({ plan }) => {
  const [copied, setCopied] = useStateN(false);
  const onExport = () => {
    navigator.clipboard?.writeText(JSON.stringify(plan, null, 2)).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <section className="mr-next">
      <div className="mr-next__kicker">NEXT ACTION</div>
      <h3 className="mr-next__h3">{plan.headline}</h3>
      <p className="mr-next__p" dangerouslySetInnerHTML={{ __html: plan.blurb }} />
      <ol className="mr-next__steps">
        {plan.steps.map((s, i) => (
          <li key={i} className="mr-next__step">
            <span className="mr-next__num">{i + 1}</span>
            <span dangerouslySetInnerHTML={{ __html: s }} />
          </li>
        ))}
      </ol>
      <div className="mr-next__actions">
        <button className="mr-btn mr-btn--primary" onClick={onExport}>
          {copied ? "Copied ✓" : "Export this plan (JSON)"}
        </button>
        <button className="mr-btn mr-btn--ghost">Ask refine question</button>
      </div>
    </section>
  );
};

window.NextAction = NextAction;