// The two-paths illustrated journey (anti-Klarna comparison)
// Left path: BNPL stormy island. Right path: KauPua sunny island.

const TwoPaths = () => {
  return (
    <section className="two-paths">
      <div className="section-head">
        <div className="section-eyebrow">There are two roads to the thing you want</div>
        <h2 className="section-h2">One leaves you with <span className="hl-good">it</span>. The other leaves you with <span className="hl-danger">debt</span>.</h2>
        <p className="section-lede">You want a $449 pair of Sonos headphones. You can click "Pay in 4" — or you can take a smarter route that gets you there in the same time with money left over for next month.</p>
      </div>

      <div className="paths-map">
        {/* Path A — BNPL stormy */}
        <div className="path path-bnpl">
          <div className="path-island island-storm">
            <svg viewBox="0 0 400 280" width="100%" height="100%">
              {/* storm sky */}
              <rect width="400" height="140" fill="#6B7A8A" />
              {/* cloud */}
              <ellipse cx="120" cy="50" rx="60" ry="22" fill="#4A5866" />
              <ellipse cx="280" cy="40" rx="70" ry="24" fill="#4A5866" />
              {/* rain */}
              {[...Array(20)].map((_, i) => (
                <line key={i} x1={40 + i * 18} y1={80 + (i % 3) * 10} x2={30 + i * 18} y2={110 + (i % 3) * 10} stroke="#A8BDD0" strokeWidth="2" />
              ))}
              {/* ocean choppy */}
              <path d="M0 140 Q 50 125 100 140 T 200 140 T 300 140 T 400 140 L 400 200 L 0 200 Z" fill="#3A4A5A" />
              {/* island */}
              <ellipse cx="200" cy="200" rx="160" ry="28" fill="#8A7A5E" />
              <rect x="40" y="160" width="320" height="40" fill="#8A7A5E" />
              {/* dead palm */}
              <rect x="130" y="90" width="6" height="70" fill="#3A2A1E" />
              <path d="M133 90 Q 100 80 96 98 M133 90 Q 166 80 170 98 M133 90 Q 110 70 100 84 M133 90 Q 156 70 166 84" stroke="#5A4A3A" strokeWidth="4" fill="none" strokeLinecap="round" />
            </svg>
            <div className="storm-stamp">Pay in 4 · BNPL</div>
          </div>
          <div className="path-card path-card-bnpl">
            <h3>Get it today.<br/><span className="sub-danger">Owe it tomorrow.</span></h3>
            <ul className="bullet-list">
              <li><span className="bullet bullet-x">✕</span>4 payments of <b>$112</b> from your next 4 paychecks</li>
              <li><span className="bullet bullet-x">✕</span>Nothing about your spending changes</li>
              <li><span className="bullet bullet-x">✕</span>Late fees if life happens</li>
              <li><span className="bullet bullet-x">✕</span><b>40%+</b> of users miss at least one payment</li>
              <li><span className="bullet bullet-x">✕</span>You finish 6 weeks with <b>$0</b> in savings and a phone reminder</li>
            </ul>
            <div className="path-outcome path-outcome-bad">
              <div className="outcome-label">After 6 weeks</div>
              <div className="outcome-stat">Break-even. Maybe late fees.</div>
            </div>
          </div>
        </div>

        {/* Center connector */}
        <div className="paths-divider">
          <div className="divider-line" />
          <div className="divider-pill">vs.</div>
          <div className="divider-line" />
        </div>

        {/* Path B — KauPua sunny */}
        <div className="path path-kaupua">
          <div className="path-island island-sunny">
            <svg viewBox="0 0 400 280" width="100%" height="100%">
              <defs>
                <linearGradient id="sunnySky" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#FFD9A8" />
                  <stop offset="100%" stopColor="#FFB8C4" />
                </linearGradient>
              </defs>
              <rect width="400" height="140" fill="url(#sunnySky)" />
              {/* sun */}
              <circle cx="320" cy="60" r="36" fill="#FFD36B" />
              <circle cx="320" cy="60" r="28" fill="#FFE38A" />
              {/* birds */}
              <path d="M80 60 Q 90 52 100 60 Q 110 52 120 60" stroke="#3A2A2A" strokeWidth="2" fill="none" />
              <path d="M160 40 Q 168 34 176 40 Q 184 34 192 40" stroke="#3A2A2A" strokeWidth="2" fill="none" />
              {/* ocean */}
              <path d="M0 140 Q 50 130 100 140 T 200 140 T 300 140 T 400 140 L 400 200 L 0 200 Z" fill="#5FB7E0" />
              <path d="M0 150 Q 50 142 100 150 T 200 150 T 300 150 T 400 150" stroke="#FFF" strokeWidth="2" fill="none" opacity="0.6" />
              {/* island */}
              <ellipse cx="200" cy="200" rx="170" ry="30" fill="#F5DDA8" />
              <rect x="30" y="160" width="340" height="40" fill="#F5DDA8" />
              {/* palm */}
              <rect x="195" y="80" width="7" height="80" fill="#6B3A1E" />
              <g transform="translate(198 84)">
                {[...Array(7)].map((_, i) => (
                  <ellipse key={i} cx="0" cy="0" rx="40" ry="7" fill="#2D6B4A" transform={`rotate(${-80 + i * 26}) translate(36 0)`} />
                ))}
              </g>
              {/* treasure chest */}
              <rect x="170" y="170" width="60" height="26" rx="4" fill="#7A4E2A" />
              <path d="M170 170 Q 200 152 230 170" fill="#8A5C3A" />
              <rect x="196" y="178" width="8" height="10" fill="#FFD36B" />
            </svg>
            <div className="sunny-stamp">KauPua · the anti-Klarna</div>
          </div>
          <div className="path-card path-card-kaupua">
            <h3>Earn it.<br/><span className="sub-good">Keep the savings.</span></h3>
            <ul className="bullet-list">
              <li><span className="bullet bullet-check">✓</span>We find <b>$112/mo</b> hiding in your current bills</li>
              <li><span className="bullet bullet-check">✓</span>You approve the cuts you actually want</li>
              <li><span className="bullet bullet-check">✓</span>The headphones are yours in <b>~6 weeks</b> — fully paid</li>
              <li><span className="bullet bullet-check">✓</span>Those monthly savings keep working, <b>forever</b></li>
              <li><span className="bullet bullet-check">✓</span>You finish with the thing <b>and</b> $112/mo of permanent lift</li>
            </ul>
            <div className="path-outcome path-outcome-good">
              <div className="outcome-label">After 6 weeks</div>
              <div className="outcome-stat">+$112/mo ongoing. Next goal funded faster.</div>
            </div>
          </div>
        </div>
      </div>

      {/* Side-by-side math table */}
      <div className="math-table">
        <div className="math-head">
          <div className="math-title">The math, side by side</div>
          <div className="math-sub">$449 Sonos headphones, two ways.</div>
        </div>
        <div className="math-grid">
          <div className="math-col math-col-label"></div>
          <div className="math-col math-col-bnpl">Pay in 4</div>
          <div className="math-col math-col-kau">KauPua</div>

          <MathRow label="Time to have the thing" a="0 weeks" b="~6 weeks" />
          <MathRow label="Time to fully paid" a="6 weeks" b="~6 weeks" />
          <MathRow label="Where the money comes from" a="Next 4 paychecks" b="Bills you're overpaying" />
          <MathRow label="What changes about your life" a="Nothing" b="Permanent monthly savings" />
          <MathRow label="Debt impact" a="4th installment still owed" b="None" highlight />
          <MathRow label="After the 6 weeks" a="Break-even. Maybe late fees." b={<b>+$112/mo ongoing. Next goal funded faster.</b>} big highlight />
        </div>
      </div>
    </section>
  );
};

const MathRow = ({ label, a, b, highlight, big }) => (
  <>
    <div className={`mrow mrow-label ${big ? "mrow-big" : ""}`}>{label}</div>
    <div className={`mrow mrow-a ${highlight ? "mrow-a-hl" : ""} ${big ? "mrow-big" : ""}`}>{a}</div>
    <div className={`mrow mrow-b ${highlight ? "mrow-b-hl" : ""} ${big ? "mrow-big" : ""}`}>{b}</div>
  </>
);

Object.assign(window, { TwoPaths });