// Problem + How-it-works + Four wins

const Problem = () => (
  <section id="protocol" style={{ padding: "140px 80px", borderTop: "0.5px solid rgba(26,22,19,.12)", position: "relative" }}>
    <SectionIntroducer number="02" label="The problem · Two sides, one fix" />
    <JoinReveal>
      <h2 className="km-display-md" style={{ marginTop: "16px", maxWidth: "880px" }}>
        Two sides of the same broken market<span style={{ color: "#B04A3A" }}>.</span>
      </h2>
    </JoinReveal>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0", marginTop: "80px", border: "0.5px solid rgba(26,22,19,.12)" }}>
      <JoinReveal delay={0}>
        <div className="km-side-card">
          <div className="km-eyebrow" style={{ marginBottom: "20px" }}>SIDE 01 · FOR BORROWERS</div>
          {[
            ["The rate", "wstETH borrowers pay 4–6% today. The rate is a function of the pool, not the position."],
            ["The auction", "Liquidation is a public auction — and a public auction can incentivise poor behaviour."],
            ["The exposure", "Public positions are priced positions — front-run at liquidation."],
          ].map(([h, body], i) => (
            <div key={i} className="km-row">
              <span className="km-row-num">0{i + 1}</span>
              <div>
                <div className="km-row-h">{h}</div>
                <div className="km-row-b">{body}</div>
              </div>
            </div>
          ))}
        </div>
      </JoinReveal>

      <JoinReveal delay={120}>
        <div className="km-side-card" style={{ borderLeft: "0.5px solid rgba(26,22,19,.12)" }}>
          <div className="km-eyebrow" style={{ marginBottom: "20px" }}>SIDE 02 · FOR DEPOSITORS</div>
          {[
            ["The carry", "Volatility hedges cost money to hold. They only pay if you're right."],
            ["The ceiling", "Money-market yield is capped at 3–5% — calm or crisis."],
            ["The correlation", "When markets drop, every other position drops too. Nothing earns more."],
          ].map(([h, body], i) => (
            <div key={i} className="km-row">
              <span className="km-row-num">0{i + 1}</span>
              <div>
                <div className="km-row-h">{h}</div>
                <div className="km-row-b">{body}</div>
              </div>
            </div>
          ))}
        </div>
      </JoinReveal>
    </div>
  </section>
);

const Pipeline = ({ steps }) => (
  <div className="km-pipeline">
    {steps.map((s, i) => (
      <React.Fragment key={i}>
        <div className="km-pipeline-step">
          <div className="km-data-inline" style={{ fontSize: "14px" }}>0{i + 1}</div>
          <div className="km-pipeline-name">{s[0]}</div>
          <div className="km-pipeline-desc">{s[1]}</div>
        </div>
        {i < steps.length - 1 && <div className="km-pipeline-arrow">→</div>}
      </React.Fragment>
    ))}
  </div>
);

const HowItWorks = () => (
  <section id="borrow" style={{ padding: "140px 80px", borderTop: "0.5px solid rgba(26,22,19,.12)" }}>
    <SectionIntroducer number="03" label="The product" />
    <JoinReveal>
      <h2 className="km-display-md" style={{ marginTop: "16px", maxWidth: "880px" }}>
        Efficient leverage. Dependable yield<span style={{ color: "#B04A3A" }}>.</span>
      </h2>
    </JoinReveal>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "48px", marginTop: "72px" }}>
      <JoinReveal>
        <div className="km-eyebrow">FOR BORROWERS · PIPELINE 01</div>
        <h3 className="km-display-sm" style={{ marginTop: "12px" }}>Borrow cheaper.</h3>
        <p className="km-body" style={{ maxWidth: "440px", margin: "16px 0 24px" }}>
          Post wstETH. Mint KUSD at <span className="km-data-inline">~0.5%</span> p.a. Fixed terms, private vault, no repayment schedule.
        </p>
        <div className="km-stat-row">
          <div className="km-data-xl">~0.5%</div>
          <div className="km-label-mono">ANNUAL BORROW RATE</div>
        </div>
        <Pipeline steps={[
          ["wstETH", "Collateral posted"],
          ["Vault", "Minting engine"],
          ["KUSD", "Native stable"],
          ["Borrower", "Holds KUSD, ETH still staked"],
        ]} />
      </JoinReveal>

      <JoinReveal delay={120}>
        <div className="km-eyebrow">FOR DEPOSITORS · PIPELINE 02</div>
        <h3 className="km-display-sm" style={{ marginTop: "12px" }}>Earn from liquidations.</h3>
        <p className="km-body" style={{ maxWidth: "440px", margin: "16px 0 24px" }}>
          Deposit KUSD into the Stability Fund. Earn the <span className="km-data-inline">10%</span> liquidation premium. Returns stay in KUSD.
        </p>
        <div className="km-stat-row">
          <div className="km-data-xl">10%</div>
          <div className="km-label-mono">LIQUIDATION PREMIUM</div>
        </div>
        <Pipeline steps={[
          ["KUSD", "Deposit asset"],
          ["Pool", "Liquidation backstop"],
          ["wKUSD", "Yield-bearing receipt"],
          ["Depositor", "Holds wKUSD, earns premium"],
        ]} />
      </JoinReveal>
    </div>
  </section>
);

const FourWins = () => {
  const wins = [
    ["Fair", "You pay for your own risk.", "~0.5% borrow rate — risk isn't priced into your APR. Liquidation penalty falls only on liquidated borrowers."],
    ["Fixed & known", "Your terms don't move under you.", "Fixed rate at vault creation, for the life of the vault. Liquidation price set by collateral alone."],
    ["Private", "Verifiable, not visible.", "No front-running of your liquidation price. No OTC desks pricing against your position."],
    ["Gated liquidations", "Your stop-loss isn't an auction.", "Liquidations route through the Stability Fund — not a public mempool race. MEV stays in the system."],
  ];
  return (
    <section style={{ padding: "140px 80px", borderTop: "0.5px solid rgba(26,22,19,.12)" }}>
      <SectionIntroducer number="04" label="For borrowers · Four structural wins" />
      <JoinReveal>
        <h2 className="km-display-md" style={{ marginTop: "16px", maxWidth: "900px" }}>
          Fair, fixed, private, gated.
        </h2>
      </JoinReveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "0", marginTop: "72px", border: "0.5px solid rgba(26,22,19,.12)" }}>
        {wins.map(([eb, h, body], i) => (
          <JoinReveal delay={i * 80} key={i}>
            <div className="km-win">
              <div className="km-eyebrow">0{i + 1} · {eb.toUpperCase()}</div>
              <h3 className="km-win-h">{h}</h3>
              <p className="km-win-b">{body}</p>
            </div>
          </JoinReveal>
        ))}
      </div>
      <JoinReveal>
        <div style={{ marginTop: "32px", padding: "20px 24px", background: "#1B2845", color: "#FAF7F0" }}>
          <span style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontWeight: 500, letterSpacing: "0.02em", fontSize: "14px" }}>
            Borrow at ~0.5% · earn ~2% staking yield on collateral · no repayment schedule · unlock liquidity without selling
          </span>
        </div>
      </JoinReveal>
    </section>
  );
};

Object.assign(window, { Problem, HowItWorks, FourWins });