// ============================================================
// "See how it works" — deep-dive product explainer page.
// Reached from ScreenMarketing's "See how it works" link
// and from the demo chip's jump-to-screen menu.
// ============================================================

const ScreenHowItWorks = ({ tweaks, onApply, onBack }) => {
  const { partnerName } = tweaks;

  // Worked-example numbers used in section 4. Kept independent of tweaks so
  // the marketing math reads cleanly even if the user has tuned defaults.
  const example = {
    advance: 35000,
    factor: 1.30,
    weeks: 50
  };
  example.payback = example.advance * example.factor;
  example.weekly = Math.round(example.payback / example.weeks / 10) * 10;

  return (
    <div className="cap fade-up">
      <div className="cap-shell" style={{ maxWidth: 1180 }}>
        <div className="cap-header">
          <CapitalCobrand partnerName={partnerName} attribution={tweaks.revenuedAttribution} />
          <button className="btn btn-text" onClick={onBack}>
            <Icon name="arrow-left" size={14} /> Back to overview
          </button>
        </div>

        {/* ============ HERO ============ */}
        <div className="card" style={{
          padding: 0, border: "none",
          background: "linear-gradient(135deg, var(--trust-tech) 0%, var(--growth-galaxy) 100%)",
          color: "#fff", borderRadius: 20, overflow: "hidden",
          position: "relative"
        }}>
          <div style={{ position: "absolute", right: -80, top: -80, opacity: 0.55, pointerEvents: "none" }}>
            <Rings size={420} palette="teal" />
          </div>
          <div style={{ position: "absolute", left: -100, bottom: -100, opacity: 0.30, pointerEvents: "none" }}>
            <Rings size={360} palette="light" />
          </div>

          <div style={{
            position: "relative", zIndex: 1,
            display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
            gap: 40, padding: "52px 48px", alignItems: "center"
          }}>
            <div>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "5px 11px",
                background: "rgba(4,196,158,0.16)",
                border: "1px solid rgba(4,196,158,0.32)",
                borderRadius: 999,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em",
                textTransform: "uppercase", color: "var(--funding-pool)",
                marginBottom: 20
              }}>
                <Icon name="play-circle" size={13} color="var(--funding-pool)" />
                90-second tour
              </div>
              <h1 style={{
                fontFamily: "var(--font-primary)", fontWeight: 700,
                fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.025em",
                margin: "0 0 16px"
              }}>
                Working capital that <em style={{ color: "var(--funding-pool)", fontStyle: "italic" }}>flexes</em> with you.
              </h1>
              <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "rgba(255,255,255,0.78)", margin: "0 0 28px", maxWidth: 520 }}>
                The Flex Line is one reusable line of revenue-based capital. Take what you need today, pay back from a slice of your {partnerName} deposits, and your capacity refills as you go.
              </p>
              <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                <Button variant="teal" size="lg" onClick={onApply} iconAfter="arrow-right">
                  Apply now
                </Button>
                <a href="#concept" style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  color: "rgba(255,255,255,0.85)", fontSize: 14, fontWeight: 600,
                  textDecoration: "none", padding: "12px 4px"
                }}>
                  Read on <Icon name="arrow-down" size={13} />
                </a>
              </div>
            </div>

            {/* Inline video placeholder */}
            <div style={{
              position: "relative",
              aspectRatio: "16 / 10",
              background: "linear-gradient(135deg, var(--gg-100) 0%, var(--trust-tech) 100%)",
              borderRadius: 14, overflow: "hidden",
              border: "1px solid rgba(255,255,255,0.10)",
              cursor: "pointer"
            }} className="how-video">
              <div style={{ position: "absolute", right: -50, top: -50, opacity: 0.55 }}>
                <Rings size={240} palette="teal" />
              </div>
              {/* Floating UI mock */}
              <div style={{
                position: "absolute", left: "10%", top: "20%",
                background: "rgba(255,255,255,0.95)",
                padding: "12px 16px", borderRadius: 10,
                boxShadow: "0 14px 36px rgba(0,18,43,0.32)",
                transform: "rotate(-3deg)"
              }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.14em", color: "var(--tt-60)", textTransform: "uppercase" }}>Available</div>
                <div className="tnum" style={{ fontFamily: "var(--font-primary)", fontSize: 22, fontWeight: 700, color: "var(--trust-tech)", letterSpacing: "-0.015em" }}>$40K</div>
              </div>
              <div style={{
                position: "absolute", right: "8%", bottom: "20%",
                background: "var(--trust-tech)", color: "#fff",
                padding: "10px 14px", borderRadius: 10,
                boxShadow: "0 14px 36px rgba(0,18,43,0.40)",
                transform: "rotate(2deg)"
              }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.14em", color: "var(--funding-pool)", textTransform: "uppercase" }}>This week</div>
                <div className="tnum" style={{ fontFamily: "var(--font-primary)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.01em" }}>~$910 / wk</div>
              </div>
              {/* Play button */}
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                <div className="how-play-btn" style={{
                  width: 76, height: 76, borderRadius: "50%",
                  background: "rgba(255,255,255,0.95)",
                  display: "grid", placeItems: "center",
                  boxShadow: "0 18px 44px rgba(0,18,43,0.40)",
                  transition: "transform 180ms"
                }}>
                  <div style={{
                    width: 0, height: 0,
                    borderLeft: "20px solid var(--trust-tech)",
                    borderTop: "13px solid transparent",
                    borderBottom: "13px solid transparent",
                    marginLeft: 6
                  }} />
                </div>
              </div>
              {/* Footer label */}
              <div style={{
                position: "absolute", left: 18, bottom: 16,
                display: "flex", alignItems: "center", gap: 10
              }}>
                <div style={{
                  padding: "4px 10px", background: "rgba(0,0,0,0.45)", borderRadius: 4,
                  fontSize: 11, fontWeight: 600, color: "#fff"
                }}>1:24</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "#fff" }}>How the Flex Line works</div>
              </div>
            </div>
          </div>
        </div>

        {/* ============ SECTION 2: THE LOOP ============ */}
        <div id="concept" style={{ marginTop: 56 }}>
          <Eyebrow>The big idea</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-primary)", fontWeight: 700,
            fontSize: 34, letterSpacing: "-0.02em", lineHeight: 1.15,
            margin: "12px 0 8px", color: "var(--trust-tech)", maxWidth: 720
          }}>
            One line that flexes — draw, pay back from deposits, repeat.
          </h2>
          <p style={{ fontSize: 15.5, color: "var(--tt-60)", lineHeight: 1.55, margin: 0, maxWidth: 720 }}>
            Unlike a term loan, a Flex Line refills as you deliver. Pay down what you've drawn, and that capacity comes back — ready when you need it.
          </p>

          <div style={{
            marginTop: 28,
            display: "grid", gridTemplateColumns: "1fr auto 1fr auto 1fr",
            gap: 0, alignItems: "stretch"
          }}>
            {[
              { n: "01", ic: "arrow-down-to-line", title: "Take a draw", body: `Pull any amount from your line — same-day funding via ACH to your ${partnerName} account.`, accent: "var(--growth-galaxy)" },
              { n: "02", ic: "activity", title: "Pay back from deposits", body: "A weekly slice from your business deposits goes toward delivery. Slow week? Smaller payment.", accent: "var(--funding-pool)" },
              { n: "03", ic: "refresh-cw", title: "Capacity refills", body: "As you deliver, the headroom on your line comes back — ready for the next draw.", accent: "var(--bright-opportunity)" }
            ].map((s, i, arr) =>
              [
                <div key={s.n} className="card card-pad" style={{
                  padding: "26px 22px", position: "relative", overflow: "hidden"
                }}>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 10.5,
                    color: "var(--tt-40)", fontWeight: 700, letterSpacing: "0.14em"
                  }}>{s.n}</div>
                  <div style={{
                    width: 44, height: 44, borderRadius: 11,
                    background: "var(--gg-5)", color: s.accent,
                    display: "grid", placeItems: "center", margin: "14px 0 16px"
                  }}>
                    <Icon name={s.ic} size={22} />
                  </div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: "var(--trust-tech)", marginBottom: 8 }}>{s.title}</div>
                  <div style={{ fontSize: 13.5, color: "var(--tt-60)", lineHeight: 1.55 }}>{s.body}</div>
                </div>,
                i < arr.length - 1 && (
                  <div key={`arrow-${i}`} style={{ display: "grid", placeItems: "center", padding: "0 12px" }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: "50%",
                      background: "#fff", border: "1.5px solid var(--border-1)",
                      display: "grid", placeItems: "center",
                      color: "var(--growth-galaxy)"
                    }}>
                      <Icon name="arrow-right" size={16} />
                    </div>
                  </div>
                )
              ]
            )}
          </div>

          {/* Refill arrow back */}
          <div style={{
            marginTop: 14, display: "flex", alignItems: "center", gap: 10,
            padding: "10px 14px",
            background: "var(--fp-5)", border: "1px dashed var(--fp-20)", borderRadius: 8,
            fontSize: 12.5, color: "#047a62", fontWeight: 600, justifyContent: "center"
          }}>
            <Icon name="refresh-ccw" size={13} color="var(--funding-pool)" />
            Step 3 loops back to step 1 — your line is reusable, not a one-shot loan.
          </div>
        </div>

        {/* ============ SECTION 3: A YEAR IN THE LIFE ============ */}
        <div style={{ marginTop: 56 }}>
          <Eyebrow>A year in the life</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-primary)", fontWeight: 700,
            fontSize: 34, letterSpacing: "-0.02em", lineHeight: 1.15,
            margin: "12px 0 8px", color: "var(--trust-tech)", maxWidth: 720
          }}>
            See how your line breathes alongside your business.
          </h2>
          <p style={{ fontSize: 15.5, color: "var(--tt-60)", lineHeight: 1.55, margin: "0 0 22px", maxWidth: 720 }}>
            Two draws, twelve months. Available capacity goes down when you draw, then climbs as your weekly payments deliver.
          </p>
          <YearInTheLifeChart />
        </div>

        {/* ============ SECTION 4: THE MATH ============ */}
        <div style={{ marginTop: 56 }}>
          <Eyebrow>The math, line by line</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-primary)", fontWeight: 700,
            fontSize: 34, letterSpacing: "-0.02em", lineHeight: 1.15,
            margin: "12px 0 8px", color: "var(--trust-tech)", maxWidth: 720
          }}>
            No interest, no APR surprises. One number you agree to up front.
          </h2>
          <p style={{ fontSize: 15.5, color: "var(--tt-60)", lineHeight: 1.55, margin: "0 0 22px", maxWidth: 720 }}>
            We use a factor rate — usually <span style={{ fontWeight: 600, color: "var(--trust-tech)" }}>1.20× to 1.40×</span>. Multiply the amount you take by the factor and you get exactly what you'll deliver. That's it.
          </p>

          <div className="card" style={{ padding: "32px 36px" }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)",
              gap: 12, alignItems: "center"
            }}>
              <MathBlock
                eyebrow="You take"
                value={fmtUSD(example.advance)}
                caption="Advance"
                accent="var(--growth-galaxy)"
                accentBg="var(--gg-5)" />
              <MathSign sign="×" />
              <MathBlock
                eyebrow="Factor rate"
                value={example.factor.toFixed(2)}
                caption="Agreed up front"
                accent="var(--trust-tech)"
                accentBg="var(--tt-5)" />
              <MathSign sign="=" />
              <MathBlock
                eyebrow="You deliver"
                value={fmtUSD(example.payback)}
                caption={`Cost of capital: ${fmtUSD(example.payback - example.advance)}`}
                accent="var(--funding-pool)"
                accentBg="var(--fp-5)"
                highlighted />
            </div>

            <div style={{
              marginTop: 28, paddingTop: 24, borderTop: "1px solid var(--border-1)",
              display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24
            }}>
              {[
                { l: "Weekly payment", v: `~${fmtUSD(example.weekly)}`, sub: `${fmtUSD(example.payback)} ÷ ${example.weeks} weeks` },
                { l: "Estimated delivery", v: `~${example.weeks} weeks`, sub: `About ${Math.round(example.weeks / 4.3)} months` },
                { l: "Pay early?", v: "Save up to 15%", sub: "PayNow discount on remaining balance" }
              ].map((k, i) =>
                <div key={i} style={{ paddingLeft: i === 0 ? 0 : 18, borderLeft: i === 0 ? "none" : "1px solid var(--border-1)" }}>
                  <div className="stat-label" style={{ fontSize: 11 }}>{k.l}</div>
                  <div className="tnum" style={{
                    fontFamily: "var(--font-primary)", fontWeight: 700,
                    fontSize: 24, color: "var(--trust-tech)", marginTop: 6, letterSpacing: "-0.015em"
                  }}>{k.v}</div>
                  <div style={{ fontSize: 12, color: "var(--tt-60)", marginTop: 4 }}>{k.sub}</div>
                </div>)}
            </div>
          </div>
        </div>

        {/* ============ SECTION 5: COMPARISON ============ */}
        <div style={{ marginTop: 56 }}>
          <Eyebrow>Flex Line vs the rest</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-primary)", fontWeight: 700,
            fontSize: 34, letterSpacing: "-0.02em", lineHeight: 1.15,
            margin: "12px 0 22px", color: "var(--trust-tech)", maxWidth: 720
          }}>
            Why merchants pick Flex over a bank line.
          </h2>
          <ComparisonTable />
        </div>

        {/* ============ SECTION 6: FAQ ============ */}
        <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          {[
            {
              q: "What if I have a slow week?",
              a: "Your weekly payment is sized to your typical revenue. We reconcile based on actual deposits, so a quieter week means a smaller payment — never a missed one."
            },
            {
              q: "Can I take more before I've paid back?",
              a: `Yes — that's the whole point of a Flex Line. As long as you have available capacity (your line minus what's still in delivery), you can pull another draw at any time at the same factor rate.`
            },
            {
              q: "What does PayNow do?",
              a: "Pay any amount toward your balance whenever you want. If you deliver the full purchased amount within 60 days, we'll discount what you owe — up to 15%."
            },
            {
              q: "Will this show up on my business credit?",
              a: "Yes. Revenued reports your payments monthly to SBFE (Small Business Financial Exchange). On-time payments build your business credit profile."
            }
          ].map((f, i) =>
            <div key={i} className="card card-pad" style={{ padding: 22 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--trust-tech)", marginBottom: 8 }}>
                {f.q}
              </div>
              <div style={{ fontSize: 13.5, color: "var(--tt-60)", lineHeight: 1.55 }}>
                {f.a}
              </div>
            </div>)}
        </div>

        {/* ============ DISCLOSURE ============ */}
        <div style={{ marginTop: 28 }}>
          <Disclosure>
            Revenued's service provides for the purchase of future receivables and is not a loan. Approval, advance amount, and pricing are determined by Revenued at its discretion. The example math above is illustrative; your factor rate, advance, and weekly payment are determined at decision time.
          </Disclosure>
        </div>

        {/* ============ FINAL CTA ============ */}
        <div style={{
          marginTop: 32, padding: "28px 32px",
          background: "linear-gradient(135deg, var(--trust-tech) 0%, var(--gg-100) 100%)",
          color: "#fff", borderRadius: 16,
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
          position: "relative", overflow: "hidden"
        }}>
          <div style={{ position: "absolute", right: -40, top: -40, opacity: 0.45 }}>
            <Rings size={260} palette="teal" />
          </div>
          <div style={{ position: "relative" }}>
            <Eyebrow muted style={{ color: "var(--funding-pool)" }}>Ready when you are</Eyebrow>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-0.015em", marginTop: 6 }}>
              Take 5 minutes. See what you're approved for.
            </div>
            <div style={{ fontSize: 13.5, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>
              Soft credit pull only. No application fees. No commitment.
            </div>
          </div>
          <div style={{ position: "relative", display: "flex", gap: 10 }}>
            <Button variant="teal" size="lg" onClick={onApply} iconAfter="arrow-right">
              Apply now
            </Button>
          </div>
        </div>
      </div>

      <style>{`
        .how-video:hover .how-play-btn { transform: scale(1.06); }
      `}</style>
    </div>);

};

// ---------- Sub-components ----------

const MathBlock = ({ eyebrow, value, caption, accent, accentBg, highlighted }) => (
  <div style={{
    padding: "20px 18px",
    background: accentBg,
    border: "1px solid " + (highlighted ? accent + "55" : "var(--border-1)"),
    borderRadius: 14,
    minWidth: 0,
    boxShadow: highlighted ? "0 8px 24px rgba(4,196,158,0.18)" : "none"
  }}>
    <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", color: accent, textTransform: "uppercase", marginBottom: 8 }}>
      {eyebrow}
    </div>
    <div className="tnum" style={{
      fontFamily: "var(--font-primary)", fontWeight: 700,
      fontSize: "clamp(28px, 3.4vw, 40px)", lineHeight: 1, letterSpacing: "-0.025em",
      color: "var(--trust-tech)", whiteSpace: "nowrap"
    }}>
      {value}
    </div>
    <div style={{ fontSize: 11.5, color: "var(--tt-60)", marginTop: 8 }}>
      {caption}
    </div>
  </div>
);

const MathSign = ({ sign }) => (
  <div style={{
    width: 36, height: 36, borderRadius: "50%",
    background: "#fff", border: "1.5px solid var(--border-1)",
    display: "grid", placeItems: "center",
    fontFamily: "var(--font-primary)", fontSize: 18, fontWeight: 700,
    color: "var(--tt-60)"
  }}>{sign}</div>
);

// Year in the life: SVG line chart showing available capacity over 12 months,
// with draw markers and a weekly-payment density strip below.
const YearInTheLifeChart = () => {
  // 53 weekly samples for available capacity. Two draws: week 4 (-$35K), week 22 (-$10K).
  // Weekly delivery of ~$900 brings capacity back up.
  const LIMIT = 75000;
  const data = [];
  let avail = LIMIT;
  const weekly = 900;
  const events = [];
  for (let w = 0; w < 53; w++) {
    if (w === 4) { avail -= 35000; events.push({ w, type: "draw", amt: 35000, label: "Draw 1" }); }
    if (w === 22) { avail -= 10000; events.push({ w, type: "draw", amt: 10000, label: "Draw 2" }); }
    if (w > 4 && avail < LIMIT) avail = Math.min(LIMIT, avail + weekly);
    data.push({ w, avail: Math.max(0, avail) });
  }

  const W = 880;
  const H = 200;
  const PAD = { l: 60, r: 16, t: 16, b: 28 };
  const innerW = W - PAD.l - PAD.r;
  const innerH = H - PAD.t - PAD.b;

  const xAt = (w) => PAD.l + (w / 52) * innerW;
  const yAt = (v) => PAD.t + (1 - v / LIMIT) * innerH;

  const linePath = data.map((d, i) =>
    `${i === 0 ? "M" : "L"} ${xAt(d.w).toFixed(2)} ${yAt(d.avail).toFixed(2)}`
  ).join(" ");
  const areaPath = `${linePath} L ${xAt(data[data.length - 1].w).toFixed(2)} ${PAD.t + innerH} L ${xAt(0).toFixed(2)} ${PAD.t + innerH} Z`;

  const months = ["Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May"];

  return (
    <div className="card" style={{ padding: "26px 28px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 8, flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, color: "var(--tt-60)" }}>
          <span style={{ width: 14, height: 4, borderRadius: 2, background: "var(--growth-galaxy)" }} />
          Available capacity
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, color: "var(--tt-60)" }}>
          <span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--funding-pool)" }} />
          Draw
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12, color: "var(--tt-60)" }}>
          <span style={{ width: 10, height: 4, borderRadius: 1, background: "var(--tt-40)" }} />
          Weekly payment
        </span>
      </div>

      <svg width="100%" height={H + 26} viewBox={`0 0 ${W} ${H + 26}`} preserveAspectRatio="xMidYMid meet" style={{ display: "block", overflow: "visible" }}>
        <defs>
          <linearGradient id="yil-area" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--growth-galaxy)" stopOpacity="0.18" />
            <stop offset="100%" stopColor="var(--growth-galaxy)" stopOpacity="0" />
          </linearGradient>
        </defs>

        {/* Y axis ticks */}
        {[0, 25000, 50000, 75000].map((v) => {
          const y = yAt(v);
          return (
            <g key={v}>
              <line x1={PAD.l} x2={W - PAD.r} y1={y} y2={y} stroke="var(--border-1)" strokeWidth="1" strokeDasharray={v === 75000 ? "0" : "2,4"} />
              <text x={PAD.l - 8} y={y + 3.5} fontSize="10" fill="var(--tt-60)" textAnchor="end" fontFamily="var(--font-mono)">${v / 1000}K</text>
            </g>);
        })}

        {/* Capacity area + line */}
        <path d={areaPath} fill="url(#yil-area)" />
        <path d={linePath} fill="none" stroke="var(--growth-galaxy)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />

        {/* Weekly payment dots — small ticks along the bottom */}
        {data.slice(5).map((d, i) =>
          <line
            key={`pay-${i}`}
            x1={xAt(d.w)} x2={xAt(d.w)}
            y1={PAD.t + innerH + 4} y2={PAD.t + innerH + 9}
            stroke="var(--tt-40)" strokeWidth="1.5" />
        )}

        {/* Draw markers */}
        {events.map((e) => {
          const x = xAt(e.w);
          const y = yAt(data[e.w].avail);
          return (
            <g key={e.w}>
              <line x1={x} x2={x} y1={PAD.t} y2={PAD.t + innerH} stroke="var(--funding-pool)" strokeWidth="1.5" strokeDasharray="3,4" opacity="0.6" />
              <circle cx={x} cy={y} r="6" fill="var(--funding-pool)" stroke="#fff" strokeWidth="2.5" />
              <g transform={`translate(${x + 8} ${y - 8})`}>
                <rect x="0" y="-14" width="86" height="22" rx="6" fill="var(--trust-tech)" />
                <text x="6" y="-1.5" fontSize="10" fontWeight="700" fill="rgba(255,255,255,0.6)" fontFamily="var(--font-primary)">{e.label.toUpperCase()}</text>
                <text x="48" y="-1.5" fontSize="11" fontWeight="700" fill="#fff" fontFamily="var(--font-primary)">−${e.amt / 1000}K</text>
              </g>
            </g>);
        })}

        {/* X axis: month labels */}
        {months.map((m, i) => {
          const x = xAt(Math.round(i * 53 / 12));
          return (
            <text key={m + i} x={x} y={H + 12} fontSize="10.5" fill="var(--tt-60)" textAnchor="middle" fontFamily="var(--font-mono)">{m}</text>);
        })}
      </svg>

      <div style={{ marginTop: 6, fontSize: 12, color: "var(--tt-60)", lineHeight: 1.55 }}>
        <Icon name="info" size={12} /> The line dips when you take a draw, then climbs back as weekly payments deliver receivables — capacity is reusable, not consumed.
      </div>
    </div>);
};

const ComparisonTable = () => {
  const rows = [
    { k: "Payment flexes with revenue", flex: true, term: false, card: false, bank: false },
    { k: "Soft credit pull only", flex: true, term: false, card: false, bank: false },
    { k: "Funds in 24 hours", flex: true, term: false, card: true, bank: false },
    { k: "Reusable line", flex: true, term: false, card: true, bank: true },
    { k: "No origination fees", flex: true, term: false, card: true, bank: false },
    { k: "Cost is fixed at draw", flex: true, term: true, card: false, bank: false },
    { k: "No personal guarantee of repayment", flex: true, term: false, card: false, bank: false }
  ];
  const cols = [
    { key: "flex", label: "Flex Line", featured: true },
    { key: "term", label: "Bank term loan" },
    { key: "card", label: "Business credit card" },
    { key: "bank", label: "Bank LOC" }
  ];

  const Cell = ({ on, featured }) =>
    on ? (
      <div style={{
        width: 26, height: 26, borderRadius: "50%",
        background: featured ? "var(--funding-pool)" : "var(--fp-10)",
        color: featured ? "var(--trust-tech)" : "#047a62",
        display: "grid", placeItems: "center",
        margin: "0 auto"
      }}>
        <Icon name="check" size={14} strokeWidth={3} />
      </div>
    ) : (
      <div style={{
        width: 26, height: 26, borderRadius: "50%",
        background: "var(--tt-5)", color: "var(--tt-40)",
        border: "1px solid var(--border-1)",
        display: "grid", placeItems: "center",
        margin: "0 auto"
      }}>
        <Icon name="minus" size={12} strokeWidth={3} />
      </div>
    );

  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1.6fr) repeat(4, minmax(0, 1fr))",
        background: "var(--tt-5)", borderBottom: "1px solid var(--border-1)"
      }}>
        <div style={{ padding: "16px 22px", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", color: "var(--tt-60)", textTransform: "uppercase" }}>
          Feature
        </div>
        {cols.map((c) =>
          <div key={c.key} style={{
            padding: "16px 12px",
            textAlign: "center",
            fontSize: 12.5, fontWeight: 700,
            background: c.featured ? "var(--trust-tech)" : "transparent",
            color: c.featured ? "#fff" : "var(--trust-tech)",
            position: "relative"
          }}>
            {c.featured && (
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.14em", color: "var(--funding-pool)", textTransform: "uppercase", marginBottom: 2 }}>Revenued</div>
            )}
            {c.label}
          </div>)}
      </div>
      {rows.map((r, i) =>
        <div key={r.k} style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.6fr) repeat(4, minmax(0, 1fr))",
          alignItems: "center",
          borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--border-1)"
        }}>
          <div style={{ padding: "16px 22px", fontSize: 13.5, color: "var(--trust-tech)", fontWeight: 500 }}>
            {r.k}
          </div>
          {cols.map((c) =>
            <div key={c.key} style={{
              padding: "12px 8px",
              background: c.featured ? "rgba(4,196,158,0.04)" : "transparent"
            }}>
              <Cell on={r[c.key]} featured={c.featured && r[c.key]} />
            </div>)}
        </div>)}
    </div>);
};

Object.assign(window, { ScreenHowItWorks });
