// Client-facing narrative under sell-side M&A on the Services page.
// Tells the seller why a competitive tender is the single biggest lever on price,
// with a SVG chart drawn from doubleYou's last three contested processes.
const DyTenderStory = ({ lang, tt, pk }) => {
  const T = window.dyContent.tenderStory;
  const ax = T.chartAxis;

  // Chart geometry — plot area inside the 880×460 viewBox.
  // mapY(v) for v in [60..140] → y in [370..50]
  const mapY = (v) => 370 - (v - 60) * 4;
  const X = { nbo: 130, loi: 470, bid: 800 };
  const Yp = { nbo: mapY(100), loi: mapY(121), bid: mapY(130) };
  const Yr = { nbo: mapY(100), loi: mapY(85), bid: mapY(85) };

  // Picks a localized value from a string-or-{en,sk} field
  const pickGateValue = (g) => (lang === "sk" && g.vSk ? g.vSk : g.v);

  return (
    <section className="tender-story" id="why-tender" data-screen-label="02b Why a contested process">
      <div className="shell-wide">
        <div className="ts-head">
          <div className="ts-eyebrow eyebrow">{pk(T.eyebrow)}</div>
          <h2 className="ts-h">
            {T.h[lang].map((chunk, i) =>
              typeof chunk === "string"
                ? <React.Fragment key={i}>{chunk}</React.Fragment>
                : <em key={i}>{chunk.em}</em>
            )}
          </h2>
          <p className="ts-lead">{pk(T.lead)}</p>
        </div>

        <div className="ts-grid">
          {/* LEFT: chart column */}
          <div className="ts-chart-col">
            <div className="ts-chart-cap eyebrow">{pk(T.chartCaption)}</div>

            <div className="ts-chart-wrap">
              <svg viewBox="0 0 880 460" className="ts-chart" role="img"
                   aria-label={pk(T.chartCaption)}>
                <defs>
                  <linearGradient id="ts-green-fill" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#4A9971" stopOpacity="0.20" />
                    <stop offset="100%" stopColor="#4A9971" stopOpacity="0.02" />
                  </linearGradient>
                </defs>

                {/* Plot frame: bottom + left axis (hairlines) */}
                <line x1="70" y1="370" x2="850" y2="370" stroke="#D9D2C2" strokeWidth="1" />
                <line x1="70" y1="50" x2="70" y2="370" stroke="#D9D2C2" strokeWidth="1" />

                {/* Y gridlines */}
                {[60, 80, 100, 120, 140].map((v) => (
                  <g key={v}>
                    <line x1="70" y1={mapY(v)} x2="850" y2={mapY(v)}
                          stroke="#EDE7D7" strokeWidth="1"
                          strokeDasharray={v === 100 ? "0" : "2 4"} />
                    <text x="58" y={mapY(v) + 4} textAnchor="end"
                          fontSize="12" fill="#6F6A5E"
                          fontFamily="var(--font-sans)"
                          style={{ fontVariantNumeric: "tabular-nums" }}>{v}</text>
                  </g>
                ))}
                <text x="22" y="220" transform="rotate(-90 22 220)" textAnchor="middle"
                      fontSize="11" fill="#6F6A5E"
                      fontFamily="var(--font-sans)" letterSpacing="0.04em">
                  {pk(ax.yLabel)}
                </text>

                {/* Baseline 100 stronger */}
                <line x1="70" y1={mapY(100)} x2="850" y2={mapY(100)}
                      stroke="#B9B1A0" strokeWidth="1" />

                {/* GREEN area under tender path */}
                <path d={`M ${X.nbo} ${Yp.nbo} L ${X.loi} ${Yp.loi} L ${X.bid} ${Yp.bid} L ${X.bid} ${mapY(100)} L ${X.nbo} ${mapY(100)} Z`}
                      fill="url(#ts-green-fill)" />

                {/* GREEN tender path */}
                <path d={`M ${X.nbo} ${Yp.nbo} L ${X.loi} ${Yp.loi} L ${X.bid} ${Yp.bid}`}
                      fill="none" stroke="#2F6E4F" strokeWidth="2.5"
                      strokeLinecap="round" strokeLinejoin="round" />

                {/* RED exclusivity path (dashed) */}
                <path d={`M ${X.nbo} ${Yr.nbo} L ${X.loi} ${Yr.loi} L ${X.bid} ${Yr.bid}`}
                      fill="none" stroke="#8C2B2B" strokeWidth="2"
                      strokeDasharray="6 5" strokeLinecap="round" />

                {/* Endpoint dots — GREEN */}
                <circle cx={X.nbo} cy={Yp.nbo} r="5" fill="#14161C" />
                <circle cx={X.loi} cy={Yp.loi} r="5" fill="#fff" stroke="#2F6E4F" strokeWidth="2.5" />
                <circle cx={X.bid} cy={Yp.bid} r="6" fill="#fff" stroke="#2F6E4F" strokeWidth="2.5" />

                {/* Endpoint dots — RED */}
                <circle cx={X.loi} cy={Yr.loi} r="4.5" fill="#F7F4EE" stroke="#8C2B2B" strokeWidth="2" />
                <circle cx={X.bid} cy={Yr.bid} r="4.5" fill="#F7F4EE" stroke="#8C2B2B" strokeWidth="2" />

                {/* Path labels — tender label sits near LOI above the path;
                    exclusivity label sits below the NBO point above the −10/−15 chip */}
                <text x={X.loi - 80} y={Yp.loi - 30} fontSize="11"
                      fill="#2F6E4F" letterSpacing="0.14em" fontWeight="700"
                      fontFamily="var(--font-sans)">
                  {pk(ax.tender)}
                </text>
                <text x={X.nbo + 16} y={mapY(85) + 24} fontSize="11"
                      fill="#8C2B2B" letterSpacing="0.14em" fontWeight="700"
                      fontFamily="var(--font-sans)">
                  {pk(ax.exclusive)}
                </text>

                {/* +21% chip */}
                <g transform={`translate(${(X.nbo + X.loi) / 2 - 36}, ${(Yp.nbo + Yp.loi) / 2 - 16})`}>
                  <rect width="72" height="28" rx="3" fill="#2F6E4F" />
                  <text x="36" y="19" fontSize="13" fontWeight="700" fill="#fff"
                        textAnchor="middle" fontFamily="var(--font-sans)"
                        style={{ fontVariantNumeric: "tabular-nums" }}>+21%</text>
                </g>

                {/* +5 to 10% chip */}
                <g transform={`translate(${(X.loi + X.bid) / 2 - 52}, ${(Yp.loi + Yp.bid) / 2 - 38})`}>
                  <rect width="104" height="28" rx="3" fill="#14161C" />
                  <text x="52" y="19" fontSize="13" fontWeight="700" fill="#fff"
                        textAnchor="middle" fontFamily="var(--font-sans)"
                        style={{ fontVariantNumeric: "tabular-nums" }}>
                    {lang === "sk" ? "+5 až 10 %" : "+5 to 10 %"}
                  </text>
                </g>

                {/* -10 to 15% chip */}
                <g transform={`translate(${(X.nbo + X.loi) / 2 - 56}, ${(Yr.nbo + Yr.loi) / 2 + 8})`}>
                  <rect width="112" height="28" rx="3" fill="#8C2B2B" />
                  <text x="56" y="19" fontSize="13" fontWeight="700" fill="#fff"
                        textAnchor="middle" fontFamily="var(--font-sans)"
                        style={{ fontVariantNumeric: "tabular-nums" }}>
                    {lang === "sk" ? "−10 až 15 %" : "−10 to 15 %"}
                  </text>
                </g>

                {/* Endpoint value labels */}
                <text x={X.nbo} y={Yp.nbo - 16} fontSize="14" fontWeight="700"
                      fill="#14161C" textAnchor="middle" fontFamily="var(--font-sans)"
                      style={{ fontVariantNumeric: "tabular-nums" }}>100</text>
                <text x={X.loi} y={Yp.loi - 14} fontSize="14" fontWeight="700"
                      fill="#14161C" textAnchor="middle" fontFamily="var(--font-sans)"
                      style={{ fontVariantNumeric: "tabular-nums" }}>121</text>
                <text x={X.bid} y={Yp.bid - 14} fontSize="14" fontWeight="700"
                      fill="#14161C" textAnchor="middle" fontFamily="var(--font-sans)"
                      style={{ fontVariantNumeric: "tabular-nums" }}>127 – 133</text>

                <text x={X.loi} y={Yr.loi + 22} fontSize="12" fontWeight="600"
                      fill="#8C2B2B" textAnchor="middle" fontFamily="var(--font-sans)"
                      style={{ fontVariantNumeric: "tabular-nums" }}>85</text>
                <text x={X.loi} y={Yr.loi + 38} fontSize="10" fill="#8C2B2B"
                      textAnchor="middle" fontFamily="var(--font-sans)" fontStyle="italic">
                  {pk(ax.afterDD)}
                </text>
                <text x={X.bid} y={Yr.bid + 22} fontSize="12" fontWeight="600"
                      fill="#8C2B2B" textAnchor="middle" fontFamily="var(--font-sans)"
                      style={{ fontVariantNumeric: "tabular-nums" }}>85</text>
                <text x={(X.loi + X.bid) / 2} y={Yr.loi - 6} fontSize="10"
                      fill="#8C2B2B" textAnchor="middle" fontFamily="var(--font-sans)"
                      fontStyle="italic">
                  {pk(ax.noFurther)}
                </text>

                {/* X-axis tick labels */}
                <g fontFamily="var(--font-sans)">
                  <text x={X.nbo} y="398" textAnchor="middle" fontSize="11"
                        fontWeight="700" letterSpacing="0.14em" fill="#14161C">
                    {pk(ax.x1Top)}
                  </text>
                  <text x={X.nbo} y="416" textAnchor="middle" fontSize="11"
                        fill="#6F6A5E" fontStyle="italic">
                    {pk(ax.x1Sub)}
                  </text>
                  <text x={X.loi} y="398" textAnchor="middle" fontSize="11"
                        fontWeight="700" letterSpacing="0.14em" fill="#14161C">
                    {pk(ax.x2Top)}
                  </text>
                  <text x={X.loi} y="416" textAnchor="middle" fontSize="11"
                        fill="#6F6A5E" fontStyle="italic">
                    {pk(ax.x2Sub)}
                  </text>
                  <text x={X.bid} y="398" textAnchor="middle" fontSize="11"
                        fontWeight="700" letterSpacing="0.14em" fill="#14161C">
                    {pk(ax.x3Top)}
                  </text>
                  <text x={X.bid} y="416" textAnchor="middle" fontSize="11"
                        fill="#6F6A5E" fontStyle="italic">
                    {pk(ax.x3Sub)}
                  </text>
                </g>
              </svg>
            </div>

            <p className="ts-source">{pk(T.source)}</p>
          </div>

          {/* RIGHT: callout + gates */}
          <div className="ts-side-col">
            <div className="ts-callout">
              <div className="ts-callout-eyebrow">{pk(T.callout.eyebrow)}</div>
              <p>{pk(T.callout.body)}</p>
            </div>

            <div className="ts-gates-h eyebrow">{pk(T.twoGatesHeading)}</div>
            <ul className="ts-gates">
              {T.gates.map((g, i) => (
                <li key={i} className={`ts-gate ts-gate--${g.kind}`}>
                  <div className="ts-gate-v">{pickGateValue(g)}</div>
                  <div className="ts-gate-body">
                    <h4>{pk(g.t)}</h4>
                    <p>{pk(g.d)}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

window.DyTenderStory = DyTenderStory;