// Assessment prompt, Ch.01 footer CTA (for/not-for filter removed from page)

function AssessmentPrompt() {
  const [showAssessment, setShowAssessment] = React.useState(false);

  React.useEffect(() => {
    const open = () => setShowAssessment(true);
    document.addEventListener("openAssessment", open);
    return () => document.removeEventListener("openAssessment", open);
  }, []);

  return (
    <>
      <section className="section tight assessment-prompt">
        <div className="page">
          <div className="assessment-prompt-inner">
            <div>
              <span className="caption">Self-check</span>
              <h3 className="kicker" style={{ margin: "10px 0 8px" }}>Where are you in this funnel?</h3>
              <p className="body-text" style={{ fontSize: 16, lineHeight: 1.5, margin: 0, maxWidth: "48ch", color: "var(--ink-2)" }}>
                Three minutes. Beginner, intermediate, or advanced, so you know which parts of the map to read first.
              </p>
            </div>
            <button type="button" onClick={() => setShowAssessment(true)} className="btn btn-primary">
              Start assessment <Arrow />
            </button>
          </div>
        </div>
      </section>
      {showAssessment && <ProducerAssessment onClose={() => setShowAssessment(false)} />}
    </>
  );
}

window.AssessmentPrompt = AssessmentPrompt;
// Legacy alias, not rendered on Ch.01 anymore
window.ForFilter = AssessmentPrompt;