/* ============================================================
   THE BRIDGE — one picture for how it works and why it works
   (Mo, 15.09.: "make this as one graph").

   Top, medicine: a drug cannot be judged against a death rate in one
   step. Medicine measures every step in between — drug, blood
   pressure, heart attack, death — because that is where cause and
   effect can be explained.

   Bottom, your business: the same problem, two routes from a measure
   to the result.
     · the grey route — your internal data: it sharpens the picture but
       does not carry it alone (Mo, 15.09.: never call it useless).
       Its examples must be intermediate steps, not interventions and not
       outcomes (Mo, 16.09.): turnaround time and first-visit fix are
       observed; pricing and capacity are things you steer; revenue is
       the outcome at the end of the line.
     · the cyan route — the steps we add: the voice of the customer,
       structured and quantified, measured one step at a time

   The customer example is the demonstrated one: video evidence before
   the customer approves the work (facts.jsx PROVEN 'video', first
   link, US). Aspirin is deliberately not used: it does not work
   through blood pressure.
   ============================================================ */

function CausalBridge() {
  const X = [170, 420, 670, 900];
  const MID = (X[0] + X[3]) / 2;
  const med = ['Drug', 'Blood pressure', 'Heart attacks', 'Deaths'];
  const INK = { fill: 'rgb(var(--c-ink))' };
  const MUTE = { fill: 'rgb(var(--c-mute))' };
  const SUB = { stroke: 'rgb(var(--c-subtle))' };
  const yMed = 128, yUp = 242, yBase = 312, yLow = 384;
  const route = y =>
    `M${X[0] + 26} ${yBase} C ${X[0] + 92} ${yBase} ${X[0] + 100} ${y} ${X[0] + 172} ${y} ` +
    `L ${X[3] - 142} ${y} C ${X[3] - 70} ${y} ${X[3] - 60} ${yBase} ${X[3] - 36} ${yBase}`;
  return (
    <div className="overflow-x-auto no-scrollbar">
      <svg viewBox="0 0 1000 472" className="w-full h-auto min-w-[780px]" role="img"
        aria-label="One long way from an intervention to an outcome, cut into measurable intermediate steps. Medicine measures every step between a drug and a death rate. In your business, two routes lead from a measure to the result: your internal data, which sharpens the picture but does not carry it alone, and the steps we add — the voice of the customer, structured and quantified, where explainability is high.">

        {/* what the reader is looking at: one long way, cut into steps.
            The middle two are observed, not steered — the word medicine
            uses for them is "surrogate endpoint" (Mo, 16.09.). */}
        <text x={X[0]} y="26" fontSize="17" fontWeight="600" textAnchor="middle" style={INK}>Intervention</text>
        <text x={X[0]} y="46" fontSize="13" textAnchor="middle" style={MUTE}>steered</text>

        <path d={`M${X[1] - 150} 56 v-8 H${X[2] + 150} v8`} fill="none" strokeWidth="1.2" style={SUB}/>
        <text x={(X[1] + X[2]) / 2} y="26" fontSize="17" fontWeight="600" textAnchor="middle" style={INK}>
          Intermediate steps
        </text>
        <text x={(X[1] + X[2]) / 2} y="46" fontSize="13" textAnchor="middle" style={MUTE}>
          observed, not steered — medicine calls them surrogate endpoints
        </text>

        <text x={X[3]} y="26" fontSize="17" fontWeight="600" textAnchor="middle" style={INK}>Outcome</text>
        <text x={X[3]} y="46" fontSize="13" textAnchor="middle" style={MUTE}>the result</text>

        <line x1="0" y1="76" x2="1000" y2="76" strokeWidth="1" style={SUB} opacity="0.5"/>

        {/* medicine */}
        <text x="0" y={yMed + 4} fontSize="13" style={MUTE}>Medicine</text>
        <line x1={X[0]} y1={yMed} x2={X[3]} y2={yMed} strokeWidth="1.5" style={SUB}/>
        {X.map((x, i) => (
          <g key={'m' + i}>
            <circle cx={x} cy={yMed} r="6" strokeWidth="1.5"
              style={{ fill: 'rgb(var(--c-paper))', stroke: 'rgb(var(--c-subtle))' }}/>
            <text x={x} y={yMed - 18} fontSize="14" textAnchor="middle" style={MUTE}>{med[i]}</text>
          </g>
        ))}
        {/* the mirror: the same middle steps, one world below the other */}
        {[X[1], X[2]].map(x => (
          <line key={'v' + x} x1={x} y1={yMed + 44} x2={x} y2={yUp - 56} strokeWidth="1"
            strokeDasharray="2 6" style={SUB} opacity="0.6"/>
        ))}

        {/* your business */}
        <text x="0" y={yBase + 4} fontSize="13" style={MUTE}>Your business</text>

        {/* grey route: internal data alone */}
        <path d={route(yLow)} fill="none" strokeWidth="1.8" strokeDasharray="6 5" style={SUB}/>
        <text x={MID} y={yLow + 26} fontSize="14" fontWeight="600" textAnchor="middle" style={MUTE}>
          explainability low
        </text>
        <text x={MID} y={yLow + 45} fontSize="13" textAnchor="middle" style={MUTE}>
          your internal data — it sharpens the picture, but not on its own
        </text>
        <text x={MID} y={yLow + 64} fontSize="12.5" fontStyle="italic" textAnchor="middle" style={MUTE}>
          e.g. turnaround, first-visit fix
        </text>

        {/* cyan route: the steps we add */}
        <path d={route(yUp)} fill="none" stroke={HW_CYAN} strokeWidth="4" strokeLinecap="round"/>
        <circle r="6" fill={HW_CYAN}>
          <animateMotion dur="3.6s" repeatCount="indefinite" path={route(yUp)}/>
          <animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.85;1" dur="3.6s" repeatCount="indefinite"/>
        </circle>

        {[{ x: X[1], t: 'Trust signal', b: '“I saw what needed fixing”' },
          { x: X[2], t: 'Loyalty signal', b: '“I like the honesty — I’ll be back”' }].map(s => (
          <g key={s.t}>
            <circle cx={s.x} cy={yUp} r="11" fill={HW_CYAN} strokeWidth="4" style={{ stroke: 'rgb(var(--c-paper))' }}/>
            <text x={s.x} y={yUp - 36} fontSize="16" fontWeight="600" textAnchor="middle" style={INK}>{s.t}</text>
            <text x={s.x} y={yUp - 18} fontSize="13" fontStyle="italic" textAnchor="middle" style={MUTE}>{s.b}</text>
          </g>
        ))}
        <text x={MID} y={yUp + 34} fontSize="14" fontWeight="600" textAnchor="middle" fill={HW_CYAN}>
          explainability high
        </text>
        <text x={MID} y={yUp + 54} fontSize="13" textAnchor="middle" fill={HW_CYAN}>
          the steps we add — the voice of the customer, structured and quantified
        </text>

        {/* the measure, and the result */}
        <g transform={`translate(${X[0]} ${yBase})`}>
          <circle r="22" strokeWidth="2" style={{ fill: 'rgb(var(--c-paper))', stroke: 'rgb(var(--c-ink))' }}/>
          <g transform="translate(-15 -15)" style={{ color: 'rgb(var(--c-ink))' }}>{HwIcon.pill}</g>
          <text y="48" fontSize="15" fontWeight="600" textAnchor="middle" style={INK}>Your measure</text>
          <text y="66" fontSize="12.5" fontStyle="italic" textAnchor="middle" style={MUTE}>e.g. video of the repair</text>
        </g>
        <g transform={`translate(${X[3]} ${yBase})`}>
          <circle r="30" fill={HW_CYAN}/>
          <text y="10" fontSize="30" fontWeight="700" textAnchor="middle" fill="#fff">€</text>
          <text y="62" fontSize="15" fontWeight="600" textAnchor="middle" style={INK}>Your result</text>
          <text y="80" fontSize="12.5" fontStyle="italic" textAnchor="middle" style={MUTE}>retention, revenue</text>
        </g>
      </svg>
    </div>
  );
}

window.CausalBridge = CausalBridge;