/* ============================================================
   WHAT WE DO — input, processing, output (Mo, 15.09.).

     in          customer feedback + your structured context data
     processing  our causal AI pipeline
     out         cause and effect, and what a measure is worth

   No numbers. How it works and why it works follow below.
   ============================================================ */

function SolBlock({ t, b, accent, euro }) {
  return (
    <div className="rounded-2xl p-7 text-center h-full flex flex-col justify-center gap-2"
      style={accent
        ? { 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))' }}>
      <div className="text-[18px] font-semibold tracking-tight leading-snug flex items-center justify-center gap-2">
        {t}
        {euro && <span className="text-[21px] leading-none" style={{ color: HW_EURO }}>€</span>}
      </div>
      <div className="text-[13.5px] text-mute leading-relaxed">{b}</div>
    </div>
  );
}

/* The three words that guide the reader stand large above their column —
   this is the one diagram on the page whose shape everybody already
   knows (Mo, 16.09.). */
function SolStep({ children }) {
  return (
    <div className="text-[22px] sm:text-[26px] font-semibold tracking-[-0.02em]">{children}</div>
  );
}

function SolutionFlow() {
  const cols = 'lg:grid-cols-[minmax(0,1fr)_56px_minmax(0,1fr)_56px_minmax(0,1fr)]';
  return (
    <div>
      {/* desktop */}
      <div className={`hidden lg:grid ${cols} gap-y-4 items-stretch`}>
        <SolStep>Input</SolStep>
        <div/>
        <SolStep>Processing</SolStep>
        <div/>
        <SolStep>Output</SolStep>

        <div className="row-start-2 col-start-1 grid gap-4">
          <SolBlock t="Customer feedback" b="millions of voices, unstructured"/>
          <SolBlock t="Your context data" b="operations, sales, service"/>
        </div>
        <div className="row-start-2 col-start-2 flex items-center justify-center"><HwArrow/></div>
        <div className="row-start-2 col-start-3">
          <SolBlock accent t="Our causal AI pipeline" b="extraction · embedding · causal analysis"/>
        </div>
        <div className="row-start-2 col-start-4 flex items-center justify-center"><HwArrow/></div>
        <div className="row-start-2 col-start-5 grid gap-4">
          <SolBlock t="Cause and effect" b="what really moves your customers"/>
          <SolBlock t="What a measure is worth" b="its effectiveness, by impact" euro/>
        </div>
      </div>

      {/* mobile */}
      <div className="lg:hidden space-y-4">
        <SolStep>Input</SolStep>
        <SolBlock t="Customer feedback" b="millions of voices, unstructured"/>
        <SolBlock t="Your context data" b="operations, sales, service"/>
        <div className="flex justify-center py-1"><HwArrow down/></div>
        <SolStep>Processing</SolStep>
        <SolBlock accent t="Our causal AI pipeline" b="extraction · embedding · causal analysis"/>
        <div className="flex justify-center py-1"><HwArrow down/></div>
        <SolStep>Output</SolStep>
        <SolBlock t="Cause and effect" b="what really moves your customers"/>
        <SolBlock t="What a measure is worth" b="its effectiveness, by impact" euro/>
      </div>
    </div>
  );
}

window.SolutionFlow = SolutionFlow;