// Journey Mapping . Synthesis + end CTA
function JourneySynthesis({ data, onBook }) {
  return (
    <>
      <section className="lm-page">
        <div className="lm-section-num">Section 04</div>
        <h2 className="lm-h2">Three questions to leave with.</h2>
        <p className="lm-body" style={{maxWidth:680, marginBottom:24}}>If you cannot answer these three after filling the map, you have research to do , not opinions to debate.</p>

        <div className="lm-questions">
          <div className="lm-question">
            <div className="lm-question-num">01</div>
            <div className="lm-question-body">
              <h3 className="lm-h3">Where is the friction symmetric?</h3>
              <p>Find the stage where both buyer and supplier hit pain. That is your single highest-priority roadmap item , fixing it improves both sides at once and makes liquidity follow.</p>
            </div>
          </div>
          <div className="lm-question">
            <div className="lm-question-num">02</div>
            <div className="lm-question-body">
              <h3 className="lm-h3">Where do the journeys depend on each other?</h3>
              <p>The buyer's "transact" stage and the supplier's "transact" stage are the same moment, viewed from two angles. If they are not in lockstep . If your supplier is anxious while your buyer is impatient . You have a UX problem disguised as a marketplace problem.</p>
            </div>
          </div>
          <div className="lm-question">
            <div className="lm-question-num">03</div>
            <div className="lm-question-body">
              <h3 className="lm-h3">What did you have to guess?</h3>
              <p>Look at every cell. The ones where you wrote with confidence are where you have evidence. The ones where you hedged are research questions. Five user interviews per side, well-structured, will turn most of the hedges into facts.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="lm-end-cta">
        <div className="lm-eyebrow" style={{color:'rgba(255,255,255,.75)'}}><span className="lm-dot" style={{background:'#fff'}}/> Want help running the synthesis?</div>
        <h2 className="lm-h2">A journey map is the first hour. The next hour is what to do about it.</h2>
        <p>Book thirty minutes. Walk us through what you mapped. We will tell you which row matters most, which one is a distraction, and what the first three roadmap items should be , for free, no strings.</p>
        <button className="lm-btn lm-no-print" onClick={onBook}>Book a Discovery Call →</button>
        <div style={{marginTop:'24px', fontFamily:'var(--ms-font-mono)', fontSize:'11px', color:'rgba(255,255,255,.6)', letterSpacing:'.06em', textTransform:'uppercase'}}>marketplacestudio.io · hello@marketplacestudio.io</div>
      </section>
    </>
  );
}
Object.assign(window, { JourneySynthesis });