/* ============================================================
   HOW IT WORKS — Intervention → Cause → Effect, nothing more.
   Cause and Effect each split into two rows: Perception (what
   customers report) and Performance (what your systems record),
   with arrows both ways between them.

   Slim on purpose (Mo, 15.09.): the row is labelled once on the left
   instead of tagging every tile, and the perception row carries the
   focus — that is the gap we close with customer feedback.

   Heftchen rules (Kap. 32): reported / recorded, never subjective /
   objective; outcomes only real KPIs; no numbers; the medicine
   analogy stays out of this picture (it has its own, medicine.jsx).
   ============================================================ */

const HW_CYAN = '#06B6D4';
const HW_EURO = HW_CYAN; /* the euro in our colour, not green (Mo, 14.09.) */

const HwIcon = {
  pill: (
    <svg viewBox="0 0 24 24" width="30" height="30" fill="none" aria-hidden="true">
      <rect x="2.6" y="8.4" width="18.8" height="7.2" rx="3.6" transform="rotate(-45 12 12)" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M8.6 8.6l6.8 6.8" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  ),
};

function HwArrow({ perception = true, down = false }) {
  const col = perception ? HW_CYAN : 'rgb(var(--c-subtle))';
  return (
    <svg viewBox="0 0 40 16" width="40" height="16" fill="none" aria-hidden="true"
      style={down ? { transform: 'rotate(90deg)' } : undefined}>
      <path d="M2 8H32" stroke={col} strokeWidth={perception ? 2 : 1.4} strokeLinecap="round"
        strokeDasharray={perception ? undefined : '4 4'}/>
      <path d="M27 3l6 5-6 5" stroke={col} strokeWidth={perception ? 2 : 1.4} strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* Perception ⇄ Performance: each side informs the other. */
function HwBoth() {
  return (
    <svg viewBox="0 0 16 30" width="16" height="30" fill="none" aria-hidden="true">
      <path d="M8 3V27" stroke="rgb(var(--c-subtle))" strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M4 7L8 3l4 4M4 23l4 4 4-4" stroke="rgb(var(--c-subtle))" strokeWidth="1.4"
        strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function HwTile({ t, ex, perception, euro, tag }) {
  return (
    <div className="rounded-xl px-4 py-3.5 h-full flex flex-col justify-center"
      style={perception
        ? { background: 'rgba(6,182,212,0.09)', boxShadow: 'inset 0 0 0 1.5px rgba(6,182,212,0.45)' }
        : { background: 'rgb(var(--c-off))', boxShadow: 'inset 0 0 0 1px rgb(var(--c-line))' }}>
      {tag && (
        <div className="mono text-[8.5px] mb-1"
          style={{ color: perception ? HW_CYAN : 'rgb(var(--c-mute))' }}>
          {perception ? 'PERCEPTION' : 'PERFORMANCE'}
        </div>
      )}
      <div className="flex items-baseline justify-between gap-2">
        <span className="text-[15px] font-semibold tracking-tight leading-snug">{t}</span>
        {euro && <span className="text-[22px] font-semibold leading-none shrink-0" style={{ color: HW_EURO }}>€</span>}
      </div>
      <div className="mt-0.5 text-[12.5px] text-mute italic leading-snug">{ex}</div>
    </div>
  );
}

function HwRowLabel({ perception }) {
  return (
    <div className="h-full flex flex-col justify-center pl-5 border-l border-line">
      <span className="mono text-[9.5px]" style={{ color: perception ? HW_CYAN : 'rgb(var(--c-mute))' }}>
        {perception ? 'PERCEPTION' : 'PERFORMANCE'}
      </span>
      <span className="mt-1 text-[12.5px] leading-snug" style={{ color: perception ? HW_CYAN : 'rgb(var(--c-mute))' }}>
        {perception ? 'unstructured feedback, read by our pipeline' : 'your internal data'}
      </span>
    </div>
  );
}

function HwHead({ children }) {
  return <div className="text-[22px] sm:text-[26px] font-semibold tracking-[-0.02em]">{children}</div>;
}

const HW_CAUSE = [
  { t: 'How customers experience it', ex: '“waited forever”', perception: true },
  { t: 'What happens in operations', ex: 'wait time, availability' },
];
const HW_EFFECT = [
  { t: 'What customers announce', ex: '“never again”', perception: true },
  { t: 'What really happens', ex: 'customers return, revenue', euro: true },
];

function HwIntervention() {
  return (
    <div className="rounded-xl px-4 py-4 h-full flex flex-col gap-2"
      style={{ boxShadow: 'inset 0 0 0 1px rgb(var(--c-line))' }}>
      <span className="text-ink">{HwIcon.pill}</span>
      <div className="text-[15px] font-semibold tracking-tight">What you change</div>
      <div className="text-[12.5px] text-mute italic leading-snug" style={{ marginTop: 'auto' }}>
        processes · training · pricing · new builds
      </div>
    </div>
  );
}

function HowItWorks() {
  const cols = 'lg:grid-cols-[minmax(0,0.8fr)_40px_minmax(0,1fr)_40px_minmax(0,1fr)_170px]';
  return (
    <div>
      {/* desktop: intervention on the left, the two strands labelled on the right */}
      <div className={`hidden lg:grid ${cols} gap-y-2 items-stretch`}>
        <HwHead>Intervention</HwHead>
        <div className="flex items-center justify-center"><HwArrow/></div>
        <HwHead>Cause</HwHead>
        <div className="flex items-center justify-center"><HwArrow/></div>
        <HwHead>Effect</HwHead>
        <div/>

        <div className="row-start-2 row-span-3 col-start-1 pr-3 pt-2"><HwIntervention/></div>
        <div className="row-start-2 col-start-2 flex items-center justify-center"><HwArrow/></div>
        <div className="row-start-2 col-start-3 px-1"><HwTile {...HW_CAUSE[0]}/></div>
        <div className="row-start-2 col-start-4 flex items-center justify-center"><HwArrow/></div>
        <div className="row-start-2 col-start-5 px-1"><HwTile {...HW_EFFECT[0]}/></div>
        <div className="row-start-2 col-start-6"><HwRowLabel perception/></div>

        <div className="row-start-3 col-start-3 flex justify-center"><HwBoth/></div>
        <div className="row-start-3 col-start-5 flex justify-center"><HwBoth/></div>

        <div className="row-start-4 col-start-2 flex items-center justify-center"><HwArrow perception={false}/></div>
        <div className="row-start-4 col-start-3 px-1"><HwTile {...HW_CAUSE[1]}/></div>
        <div className="row-start-4 col-start-4 flex items-center justify-center"><HwArrow perception={false}/></div>
        <div className="row-start-4 col-start-5 px-1"><HwTile {...HW_EFFECT[1]}/></div>
        <div className="row-start-4 col-start-6"><HwRowLabel/></div>
      </div>

      {/* mobile: one column, top to bottom */}
      <div className="lg:hidden space-y-3">
        <HwHead>Intervention</HwHead>
        <HwIntervention/>
        <div className="flex justify-center py-1"><HwArrow down/></div>
        <HwHead>Cause</HwHead>
        <div className="grid grid-cols-2 gap-2">
          {HW_CAUSE.map(c => <HwTile key={c.t} {...c} tag/>)}
        </div>
        <div className="flex justify-center py-1"><HwArrow down/></div>
        <HwHead>Effect</HwHead>
        <div className="grid grid-cols-2 gap-2">
          {HW_EFFECT.map(c => <HwTile key={c.t} {...c} tag/>)}
        </div>
      </div>
    </div>
  );
}

window.HowItWorks = HowItWorks;