// Stability Fund · Flywheel · Waitlist · Footer
// (Market section omitted per v2 baked defaults.)

const StabilityFund = () => (
  <section id="earn" style={{ padding: "140px 80px", borderTop: "0.5px solid rgba(26,22,19,.12)", background: "#1B2845", color: "#FAF7F0" }}>
    <SectionIntroducer number="05" label="For depositors · Stability Fund" dark />
    <JoinReveal>
      <h2 className="km-display-md" style={{ marginTop: "16px", color: "#FAF7F0", maxWidth: "880px" }}>
        Yield that rises with stress.
      </h2>
    </JoinReveal>

    <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "64px", marginTop: "72px", alignItems: "start" }}>
      <JoinReveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "32px 48px" }}>
          {[
            ["Gated liquidation", "Depositors are the liquidator — not the residual after searchers extract. The full liquidation discount accrues to the Stability Fund."],
            ["Uncorrelated", "Low correlation to bonds, crypto, and equities — stabilising to any portfolio."],
            ["Upside-only variance", "Returns from liquidation premiums, not market direction. Volatility works for you."],
            ["Stable-denominated", "Returns stay in KUSD. Never flips into volatile collateral."],
          ].map(([h, b], i) => (
            <div key={i}>
              <div className="km-eyebrow" style={{ color: "#C9A878" }}>0{i + 1}</div>
              <h4 style={{ fontFamily: '"IBM Plex Serif", serif', fontWeight: 600, fontSize: "20px", margin: "8px 0 8px", color: "#FAF7F0" }}>{h}</h4>
              <p style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: "14px", lineHeight: 1.55, color: "#C9A878", margin: 0 }}>{b}</p>
            </div>
          ))}
        </div>
      </JoinReveal>

      <JoinReveal delay={150}>
        <div style={{ border: "0.5px solid rgba(201,168,120,.3)", padding: "32px" }}>
          <div className="km-eyebrow" style={{ color: "#C9A878", marginBottom: "20px" }}>3-YEAR BACKTEST · BUY-WALL EXECUTION</div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "24px", marginBottom: "24px" }}>
            <div>
              <div style={{ fontFamily: '"IBM Plex Mono", monospace', fontSize: "32px", color: "#B04A3A", letterSpacing: "-0.01em" }}>22.53%</div>
              <div className="km-label-mono" style={{ color: "#C9A878" }}>ANNUALISED RETURN</div>
            </div>
            <div>
              <div style={{ fontFamily: '"IBM Plex Mono", monospace', fontSize: "32px", color: "#FAF7F0" }}>2.14</div>
              <div className="km-label-mono" style={{ color: "#C9A878" }}>SHARPE RATIO</div>
            </div>
            <div>
              <div style={{ fontFamily: '"IBM Plex Mono", monospace', fontSize: "32px", color: "#FAF7F0" }}>0.00%</div>
              <div className="km-label-mono" style={{ color: "#C9A878" }}>MAX DRAWDOWN</div>
            </div>
          </div>

          <BacktestChart />

          <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: "11px", color: "#C9A878", marginTop: "16px", lineHeight: 1.5 }}>
            100% USD in stress · 3-year backtest, Jan 2023–Apr 2026. Past performance not predictive.
          </div>
        </div>
      </JoinReveal>
    </div>
  </section>
);

const BacktestChart = () => {
  const months = 36;
  const seed = (i) => {
    const x = Math.sin(i * 12.9898) * 43758.5453;
    return x - Math.floor(x);
  };
  const heights = Array.from({ length: months }, (_, i) => 0.2 + seed(i) * 0.8);
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: "3px", height: "80px", marginTop: "8px" }}>
      {heights.map((h, i) => (
        <div key={i} style={{
          flex: 1,
          height: `${h * 100}%`,
          background: i === months - 1 ? "#B04A3A" : "#C9A878",
          opacity: 0.3 + (i / months) * 0.7,
        }} />
      ))}
    </div>
  );
};

const Waitlist = () => {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState("");

  const onSubmit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError("Please enter a valid email.");
      return;
    }
    setError("");
    setSubmitted(true);
  };

  return (
    <section id="waitlist" style={{ padding: "160px 80px", borderTop: "0.5px solid rgba(26,22,19,.12)", background: "#FAF7F0" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "80px", alignItems: "center" }}>
        <JoinReveal>
          <div>
            <SectionIntroducer number="06" label="Join the waitlist" />
            <h2 className="km-display-lg" style={{ marginTop: "16px" }}>
              Be first<br/>through the joint<span style={{ color: "#B04A3A" }}>.</span>
            </h2>
            <p className="km-body" style={{ maxWidth: "440px", marginTop: "24px" }}>
              We'll be in touch when Kigumi opens to borrowers and depositors. No newsletter. No drip campaign. One email when the protocol is live.
            </p>
          </div>
        </JoinReveal>

        <JoinReveal delay={150}>
          <form onSubmit={onSubmit} style={{ position: "relative" }}>
            {!submitted ? (
              <>
                <label className="km-eyebrow" style={{ display: "block", marginBottom: "12px" }}>YOUR EMAIL</label>
                <div style={{ display: "flex", gap: "8px", alignItems: "stretch" }}>
                  <input
                    type="email"
                    placeholder="you@firm.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="km-input"
                    required
                  />
                  <button type="submit" className="km-btn km-btn-primary km-btn-lg">
                    Join waitlist →
                  </button>
                </div>
                {error && (
                  <div style={{ fontFamily: '"IBM Plex Sans", sans-serif', fontSize: "12px", color: "#B04A3A", marginTop: "8px" }}>
                    {error}
                  </div>
                )}
                <div className="km-label-mono" style={{ marginTop: "16px", color: "#8B8276" }}>
                  CONFIDENTIAL · WE WILL NEVER SHARE YOUR DETAILS
                </div>
              </>
            ) : (
              <div style={{ padding: "32px", border: "0.5px solid #1B2845", background: "#FCFAF5" }}>
                <div className="km-eyebrow" style={{ color: "#1B2845" }}>CONFIRMED</div>
                <h3 style={{ fontFamily: '"IBM Plex Serif", serif', fontWeight: 600, fontSize: "28px", color: "#1A1613", margin: "12px 0" }}>
                  You're on the list<span style={{ color: "#B04A3A" }}>.</span>
                </h3>
                <p className="km-body" style={{ margin: 0 }}>
                  We'll reach out when the protocol is live. Until then, the joint settles quietly.
                </p>
                <div className="km-label-mono" style={{ marginTop: "16px" }}>
                  ↳ {email}
                </div>
              </div>
            )}
          </form>
        </JoinReveal>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer style={{ padding: "80px 80px 40px", borderTop: "0.5px solid rgba(26,22,19,.12)", background: "#1A1613", color: "#FAF7F0" }}>
    <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: "48px", marginBottom: "56px", alignItems: "start" }}>
      <div>
        <KigumiLockup size={28} color="#FAF7F0" bg="#1A1613" />
        <p style={{ fontFamily: '"EB Garamond", serif', fontStyle: "italic", fontSize: "20px", lineHeight: 1.5, color: "#C9A878", maxWidth: "440px", marginTop: "24px" }}>
          The joint holds because every piece is shaped to need the other four.
        </p>
        <div className="km-eyebrow" style={{ color: "#8B8276", marginTop: "24px" }}>LUMI HOLDINGS · CAYMAN ISLANDS</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: "12px", alignItems: "flex-end" }}>
        <a href="#terms" className="km-foot-link">Terms &amp; Conditions</a>
        <a href="#privacy" className="km-foot-link">Privacy Policy</a>
      </div>
    </div>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "0.5px solid rgba(201,168,120,.15)", paddingTop: "24px" }}>
      <span className="km-eyebrow" style={{ color: "#8B8276" }}>© 2026 KIGUMI · STRUCTURE WITHOUT FORCE</span>
      <span className="km-eyebrow" style={{ color: "#8B8276" }}>v1.2 · APRIL 2026</span>
    </div>
  </footer>
);

Object.assign(window, { StabilityFund, Waitlist, Footer });