// Journey Mapping , The two-sided swim-lane grid
const ROWS = [
  { key: 'action', label: 'Action', hint: 'What they actually do' },
  { key: 'thinking', label: 'Thinking', hint: 'What they say to themselves' },
  { key: 'feeling', label: 'Feeling', hint: 'One word' },
  { key: 'pain', label: 'Friction', hint: 'Where they stall, drop, or doubt' },
  { key: 'opportunity', label: 'Opportunity', hint: 'How we fix or capitalize' },
];

function JourneyMap({ data, onChange }) {
  return (
    <>
      <JourneyLane sectionNum="01" side="buyer" label={data.meta.buyerName} title="Buyer journey." color="primary" data={data} onChange={onChange}
        leadCopy="The buyer is the loud side. They are who you imagine when you describe the marketplace at a dinner party. Map them first, then notice how few of their needs actually depend on you , most depend on supply behaving correctly."/>
      <JourneyLane sectionNum="02" side="supplier" label={data.meta.supplierName} title="Supplier journey." color="ink" data={data} onChange={onChange}
        leadCopy="The supplier is the quiet side. They sign up less, complain less, and churn silently. They are also the side that determines whether your marketplace has a moat. Map them with more rigor than feels necessary."/>
      <CrossroadsCallout data={data}/>
    </>
  );
}

function JourneyLane({ sectionNum, side, label, title, color, data, onChange, leadCopy }) {
  return (
    <section className="lm-page lm-page-tight">
      <div className="lm-section-num">Section {sectionNum}</div>
      <h2 className="lm-h2">{title}</h2>
      <div className="lm-body" style={{display:'flex', alignItems:'baseline', gap:'12px', marginBottom:'8px'}}>
        <span className={`lm-side-tag lm-side-tag-${color}`}>{label}</span>
      </div>
      <p className="lm-body" style={{maxWidth:780, marginBottom:0}}>{leadCopy}</p>

      <div className="lm-jmap">
        <div className="lm-jmap-grid" style={{gridTemplateColumns: `140px repeat(${data.stages.length}, 1fr)`}}>
          <div className="lm-jmap-corner"></div>
          {data.stages.map((s, i) => (
            <div key={s.id} className="lm-jmap-stage-h">
              <div className="lm-jmap-stage-num">{String(i+1).padStart(2,'0')}</div>
              <div className="lm-jmap-stage-l">{s.label}</div>
              <div className="lm-jmap-stage-s">{s.sub}</div>
            </div>
          ))}
          {ROWS.map(row => (
            <React.Fragment key={row.key}>
              <div className="lm-jmap-row-h">
                <div className="lm-jmap-row-l">{row.label}</div>
                <div className="lm-jmap-row-hint">{row.hint}</div>
              </div>
              {data.stages.map(stage => (
                <div key={stage.id} className={`lm-jmap-cell lm-jmap-cell-${row.key}`}>
                  <textarea
                    value={data[side]?.[stage.id]?.[row.key] || ''}
                    onChange={(e) => onChange([side, stage.id, row.key], e.target.value)}
                    placeholder={`${row.hint}…`}
                    rows={row.key === 'feeling' ? 1 : 4}
                  />
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function CrossroadsCallout({ data }) {
  return (
    <section className="lm-page">
      <div className="lm-section-num">Section 03</div>
      <h2 className="lm-h2">The crossroads.</h2>
      <p className="lm-body" style={{maxWidth:680}}>The most valuable rows above are the <strong>opportunity</strong> rows , and the most valuable opportunities are the ones that show up in <em>both</em> lanes at the same A-CAR stage. That is where your roadmap lives.</p>

      <div className="lm-crossroads">
        {data.stages.map((s, i) => (
          <div key={s.id} className="lm-crossroads-col">
            <div className="lm-crossroads-stage">
              <span className="lm-crossroads-num">{String(i+1).padStart(2,'0')}</span>
              <span className="lm-crossroads-label">{s.label}</span>
            </div>
            <div className="lm-crossroads-side">
              <div className="lm-crossroads-side-l">{data.meta.buyerName}</div>
              <p>{data.buyer?.[s.id]?.opportunity || <em style={{color:'var(--ms-ink-3)'}}>Fill the buyer journey to see opportunities here.</em>}</p>
            </div>
            <div className="lm-crossroads-side">
              <div className="lm-crossroads-side-l">{data.meta.supplierName}</div>
              <p>{data.supplier?.[s.id]?.opportunity || <em style={{color:'var(--ms-ink-3)'}}>Fill the supplier journey to see opportunities here.</em>}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="lm-callout">
        <div className="lm-callout-head">Marketplace POV</div>
        <p>If the same stage shows opportunity on both sides , for example, friction at activation for buyers AND suppliers , that is your highest-leverage roadmap item. <strong>Two-sided fixes compound</strong>; one-sided fixes do not. We use this exact synthesis on every Build &amp; Launch engagement to set the first 90-day priority.</p>
      </div>
    </section>
  );
}

Object.assign(window, { JourneyMap, JourneyLane, CrossroadsCallout, ROWS });