/* Meridian Onboarding — Screens Part 2: Deposit, Connect MT5, Preferences */

/* ═══════ Screen 4: Deposit Funds ═══════ */
function DepositScreen({ onContinue, onBack, stepVariant, currentStep, density, btnStyle }) {
  const [subState, setSubState] = useState("methods"); // methods | exchange-qr | pending | confirmed | ready
  const [selectedMethod, setSelectedMethod] = useState(null);
  const pad = density === "compact" ? "var(--space-4)" : density === "spacious" ? "var(--space-8)" : "var(--space-6)";

  const methods = [
    { id: "usdc-arb", icon: "$", title: "USD Coin (USDC · Arbitrum)", time: "Instant · 15 min", fee: "0%", limits: "10 – 200,000 USD", badge: "Recommended", enabled: true },
    { id: "card", icon: "◻", title: "Card or Apple Pay", time: "Instant – 30 min", fee: "~3%", limits: "10 – 10,000 USD", badge: null, enabled: true },
    { id: "bank", icon: "⚏", title: "Bank transfer (ACH / wire / SEPA)", time: "1–3 business days", fee: "0%", limits: "10 – 200,000 USD", badge: null, enabled: true },
    { id: "usdc-eth", icon: "$", title: "USD Coin (USDC · Ethereum)", time: "Instant · 15 min", fee: "0%", limits: "10 – 200,000 USD", badge: "Coming soon", enabled: false },
    { id: "usdt-trc", icon: "$", title: "Tether (USDT · TRC20)", time: "Instant · 15 min", fee: "0%", limits: "10 – 200,000 USD", badge: "Coming soon", enabled: false },
    { id: "usdt-erc", icon: "$", title: "Tether (USDT · ERC20)", time: "Instant · 15 min", fee: "0%", limits: "10 – 200,000 USD", badge: "Coming soon", enabled: false },
  ];

  /* Start pending simulation */
  const startDeposit = () => {
    setSubState("pending");
    setTimeout(() => setSubState("confirmed"), 3000);
    setTimeout(() => setSubState("ready"), 4500);
  };

  /* Method picker */
  if (subState === "methods") {
    return (
      <div data-screen-label="Deposit Funds">
        <StepIndicator current={currentStep} variant={stepVariant} />
        <div className={`onboard-main ${density}`}>
          <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)", letterSpacing: "var(--track-tight)" }}>
            Deposit funds
          </h1>
          <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-5)" }}>
            All payment methods
          </h3>

          <div className="grid-2" style={{ gap: "var(--space-3)" }}>
            {methods.map(m => (
              <div key={m.id} className={`m-method-card ${selectedMethod === m.id ? 'selected' : ''} ${!m.enabled ? 'disabled' : ''}`}
                onClick={() => m.enabled && setSelectedMethod(m.id)}>
                <div className="m-method-header">
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span className="m-method-icon">{m.icon}</span>
                    <span className="m-method-title">{m.title}</span>
                  </div>
                  {m.badge && <span className={`m-method-badge ${!m.enabled ? 'soon' : ''}`}>{m.badge}</span>}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 2, paddingLeft: 42 }}>
                  <span className="m-method-detail">Processing time  <strong>{m.time}</strong></span>
                  <span className="m-method-detail">Fee  <strong>{m.fee}</strong></span>
                  <span className="m-method-detail">Limits  <strong>{m.limits}</strong></span>
                </div>
              </div>
            ))}
          </div>

          <p style={{ textAlign: "center", fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: "var(--space-5)" }}>
            Onramps powered by Privy. Bank deposits via Bridge.
          </p>

          {/* Why this matters */}
          <div className="m-card" style={{ marginTop: "var(--space-6)", padding: pad, background: "var(--bg-elevated)" }}>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Why this matters</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6 }}>
              <strong style={{ color: "var(--fg)" }}>Your deposit goes to your account. Only you can withdraw from it. We can see the balance, we cannot move it.</strong>
            </p>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginTop: "var(--space-2)" }}>
              The trading authorization on your account can place trades. It cannot move your money.
            </p>
          </div>

          <Accordion title="Which method should I pick?">
            <p style={{ marginBottom: 8 }}><strong style={{ color: "var(--fg)" }}>USDC on Arbitrum</strong> is the fastest and cheapest — no fees, arrives in seconds. Best if you already hold crypto.</p>
            <p style={{ marginBottom: 8 }}><strong style={{ color: "var(--fg)" }}>Card or Apple Pay</strong> is instant but carries a ~3% processing fee.</p>
            <p><strong style={{ color: "var(--fg)" }}>Bank transfer</strong> has no fee but takes 1–3 business days.</p>
          </Accordion>

          <div style={{ textAlign: "center", marginTop: "var(--space-5)" }}>
            <a href="#" onClick={e => { e.preventDefault(); onContinue(); }} style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
              Skip for now, finish deposit later
            </a>
          </div>

          <div className="m-bottom-nav">
            <button className="m-btn m-btn-ghost" onClick={onBack}>Back</button>
            <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
              disabled={!selectedMethod} onClick={() => {
                if (selectedMethod === "usdc-arb") setSubState("exchange-qr");
                else startDeposit();
              }}>Continue</button>
          </div>
        </div>
      </div>
    );
  }

  /* Exchange QR / address */
  if (subState === "exchange-qr") {
    return (
      <div data-screen-label="Deposit — Send USDC">
        <StepIndicator current={currentStep} variant={stepVariant} />
        <div className={`onboard-main ${density}`}>
          <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-6)", letterSpacing: "var(--track-tight)" }}>
            Deposit funds
          </h1>

          <div className="m-card" style={{ padding: pad, marginBottom: "var(--space-5)" }}>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-5)" }}>Send to this address</h3>
            <div className="m-qr-placeholder" style={{ marginBottom: "var(--space-5)" }}>
              <span>[QR · USDC · Arbitrum]</span>
            </div>
            <div className="m-copy-field" style={{ marginBottom: "var(--space-2)" }}>
              <input className="m-copy-value" value="0xAB12CD34EF56789012345678901234567890ABCD" readOnly style={{ fontSize: 13 }} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-2)", marginTop: "var(--space-3)" }}>
              <button className="m-btn m-btn-dark m-btn-full">Copy address</button>
              <button className="m-btn m-btn-ghost m-btn-full">Show as QR</button>
            </div>
            <p style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: "var(--space-3)" }}>
              Usually arrives within seconds of confirmation.
            </p>
          </div>

          {/* Step-by-step exchange guide */}
          <div className="m-card" style={{ padding: pad, marginBottom: "var(--space-5)" }}>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Step-by-step for your exchange</h3>
            <div className="m-input-wrap" style={{ marginBottom: "var(--space-4)" }}>
              <label className="m-input-label">Where are you sending from?</label>
              <select className="m-input" style={{ cursor: "pointer" }}>
                <option>Binance</option>
                <option>Coinbase</option>
                <option>Kraken</option>
                <option>OKX</option>
                <option>Bybit</option>
              </select>
            </div>
            <ol style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", paddingLeft: 18, display: "flex", flexDirection: "column", gap: 6, lineHeight: 1.6 }}>
              <li>Open Binance → Wallet → Withdraw → USDC.</li>
              <li>Paste the address shown above.</li>
              <li>Network: choose Arbitrum One (ARBITRUM).</li>
              <li>Confirm and send.</li>
            </ol>
          </div>

          <Accordion title="Deposit not arriving?">
            <p>Deposits are typically detected within 15 minutes. If your deposit hasn't arrived after 30 minutes, check the transaction hash on Arbiscan and contact support with the reference.</p>
          </Accordion>

          <div className="m-card" style={{ padding: pad, marginTop: "var(--space-5)" }}>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Why this matters</h3>
            <p style={{ fontSize: "var(--text-sm)", lineHeight: 1.6 }}>
              <strong>Your deposit goes to your account. Only you can withdraw from it. We can see the balance, we cannot move it.</strong>
            </p>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginTop: "var(--space-2)" }}>
              The trading authorization on your account can place trades. It cannot move your money.
            </p>
          </div>

          <div style={{ textAlign: "center", marginTop: "var(--space-5)" }}>
            <a href="#" onClick={e => { e.preventDefault(); onContinue(); }} style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
              Skip for now, finish deposit later
            </a>
          </div>

          <div className="m-bottom-nav">
            <button className="m-btn m-btn-ghost" onClick={() => setSubState("methods")}>Back</button>
            <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
              onClick={startDeposit}>Continue</button>
          </div>
        </div>
      </div>
    );
  }

  /* Pending / Confirmed / Ready */
  const isPending = subState === "pending";
  const isConfirmed = subState === "confirmed";
  const isReady = subState === "ready";

  return (
    <div data-screen-label={`Deposit — ${subState}`}>
      <StepIndicator current={currentStep} variant={stepVariant} />
      <div className={`onboard-main ${density}`}>
        <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-6)", letterSpacing: "var(--track-tight)" }}>
          Deposit funds
        </h1>

        <div className="m-card" style={{ padding: pad, marginBottom: "var(--space-5)" }}>
          {isPending && (
            <div>
              <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-2)" }}>
                Pending — usually a few seconds
              </h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-4)" }}>
                Reference: <span className="tnum" style={{ color: "var(--fg)" }}>0xAB...12</span>
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", marginBottom: "var(--space-3)" }}>
                <div className="m-spinner"></div>
                <span className="tnum" style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>Elapsed 4s</span>
              </div>
              <p style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)" }}>
                We register your funds the moment they land — no need to refresh.
              </p>
            </div>
          )}
          {isConfirmed && (
            <div style={{ textAlign: "center", padding: "var(--space-4) 0" }}>
              <div style={{ width: 48, height: 48, borderRadius: "50%", background: "rgba(95,126,120,0.15)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: "var(--space-4)" }}>
                <Icon name="checkCircle" size={28} color="var(--accent)" />
              </div>
              <h3 style={{ fontSize: "var(--text-h3)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-2)" }}>Deposit confirmed</h3>
              <p className="tnum" style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-2)" }}>500.00 USD</p>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>Funds are in your account and ready to trade.</p>
            </div>
          )}
          {isReady && (
            <div>
              <a href="#" onClick={e => { e.preventDefault(); setSubState("methods"); }}
                style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", display: "block", marginBottom: "var(--space-4)" }}>
                ← Back to deposit options
              </a>
              <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-2)" }}>Your funds are in</h3>
              <p className="tnum" style={{ fontSize: "var(--text-body)", marginBottom: "var(--space-5)" }}>
                Account balance: <strong>500.00 USD</strong>
              </p>
              <button className={`m-btn m-btn-full m-btn-lg ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
                onClick={onContinue}>Continue: connect MetaTrader</button>
              <div className="m-card" style={{ marginTop: "var(--space-5)", padding: "var(--space-4)" }}>
                <p style={{ fontSize: "var(--text-sm)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-2)" }}>Practising on a demo account?</p>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-3)" }}>You can top up your demo balance any time.</p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-2)" }}>
                  <button className="m-btn m-btn-ghost m-btn-full">+ $5,000 demo</button>
                  <button className="m-btn m-btn-ghost m-btn-full">+ $10,000 demo</button>
                </div>
              </div>
            </div>
          )}
        </div>

        {!isReady && (
          <div>
            <div className="m-card" style={{ padding: pad, marginBottom: "var(--space-5)" }}>
              <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Why this matters</h3>
              <p style={{ fontSize: "var(--text-sm)", lineHeight: 1.6 }}>
                <strong>Your deposit goes to your account. Only you can withdraw from it. We can see the balance, we cannot move it.</strong>
              </p>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginTop: "var(--space-2)" }}>
                The trading authorization on your account can place trades. It cannot move your money.
              </p>
            </div>
            <div style={{ textAlign: "center", marginTop: "var(--space-5)" }}>
              <a href="#" onClick={e => { e.preventDefault(); onContinue(); }} style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
                Skip for now, finish deposit later
              </a>
            </div>
            <div className="m-bottom-nav">
              <button className="m-btn m-btn-ghost" onClick={() => setSubState("methods")}>Back</button>
              <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
                disabled={isPending} onClick={onContinue}>Continue</button>
            </div>
          </div>
        )}

        {isReady && (
          <div className="m-bottom-nav">
            <button className="m-btn m-btn-ghost" onClick={() => setSubState("methods")}>Back</button>
            <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
              onClick={onContinue}>Continue</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ═══════ Screen 5: Connect MT5 ═══════ */
function ConnectMT5Screen({ onContinue, onBack, stepVariant, currentStep, density, btnStyle }) {
  const [status, setStatus] = useState("waiting"); // waiting | probing | connected | later
  const pad = density === "compact" ? "var(--space-4)" : density === "spacious" ? "var(--space-8)" : "var(--space-6)";

  const simulateConnect = () => {
    setStatus("probing");
    setTimeout(() => setStatus("connected"), 2500);
  };

  return (
    <div data-screen-label="Connect MT5">
      <StepIndicator current={currentStep} variant={stepVariant} />
      <div className={`onboard-main ${density}`}>
        <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-8)", letterSpacing: "var(--track-tight)" }}>
          Connect MetaTrader
        </h1>

        <div className="two-col">
          {/* Left column */}
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
            {status === "connected" ? (
              <div className="m-card" style={{ padding: pad }}>
                <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)", marginBottom: "var(--space-3)" }}>
                  <span className="m-status-dot connected"></span>
                  <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)" }}>MT5 connected — ready to trade</h3>
                </div>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-5)", lineHeight: 1.6 }}>
                  Your fills will appear in MT5 and on the Meridian dashboard.
                </p>
                <button className={`m-btn m-btn-full m-btn-lg ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
                  onClick={onContinue}>Continue to dashboard</button>
              </div>
            ) : status === "later" ? (
              <div className="m-card" style={{ padding: pad }}>
                <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>No problem</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-5)", lineHeight: 1.6 }}>
                  Your credentials are saved on the right. You can re-reveal them any time from <a href="#">Account → MT5 account</a>.
                </p>
                <button className={`m-btn m-btn-full m-btn-lg ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
                  onClick={onContinue}>Go to dashboard</button>
              </div>
            ) : (
              <div className="m-card" style={{ padding: pad }}>
                <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Open MetaTrader 5</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-5)", lineHeight: 1.6 }}>
                  Launch MT5 and log in with the credentials on the right. We'll detect the connection and turn green when it's live.
                </p>
                <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
                  <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
                    onClick={simulateConnect}>
                    <Icon name="monitor" size={16} /> Open desktop app
                  </button>
                  <button className="m-btn m-btn-ghost" onClick={simulateConnect}>
                    <Icon name="globe" size={16} /> Open in browser
                  </button>
                </div>
              </div>
            )}

            <Accordion title="How to add credentials on MetaTrader">
              <ol style={{ paddingLeft: 18, display: "flex", flexDirection: "column", gap: 4 }}>
                <li>Open MetaTrader 5 desktop or web.</li>
                <li>Go to File → Login to Trade Account.</li>
                <li>Paste the Server, Login, and Password from the right panel.</li>
                <li>Click Login.</li>
              </ol>
            </Accordion>
            <Accordion title="Don't have MetaTrader yet?">
              <p>Download MetaTrader 5 from <a href="#">metatrader5.com</a> for desktop, or use the web terminal at <a href="#">trade.metatrader5.com</a>. Available for Windows, Mac, iOS, and Android.</p>
            </Accordion>
          </div>

          {/* Right column — credentials */}
          <div>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-5)" }}>Your MT5 credentials</h3>
            <div className="m-card" style={{ padding: pad, display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
              <CopyField label="Server" value="meridian-live-01" helper="Paste into the Server field in MetaTrader." />
              <CopyField label="Login" value="50047231" />
              <PasswordField label="Password" value="xK9mP2vR" />
              <div className="m-status">
                <span className={`m-status-dot ${status === "connected" ? "connected" : status === "probing" ? "waiting" : status === "later" ? "saved" : ""}`}></span>
                <span style={{ color: "var(--fg-muted)" }}>
                  Status: <strong style={{ color: "var(--fg)" }}>
                    {status === "waiting" && "Waiting for MT5 to log in"}
                    {status === "probing" && "Detecting connection..."}
                    {status === "connected" && "Connected"}
                    {status === "later" && "Saved — re-reveal from Account"}
                  </strong>
                </span>
              </div>
            </div>
            <p style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: "var(--space-4)", lineHeight: 1.6, fontStyle: "italic" }}>
              These were generated automatically when you authorized trading. You don't need to do anything to create them — just paste them into MT5.
            </p>
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: "var(--space-5)" }}>
          <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", marginBottom: "var(--space-2)" }}>
            Trouble connecting? <a href="#">See connection problem</a>
          </p>
          <a href="#" onClick={e => { e.preventDefault(); setStatus("later"); }}
            style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
            I'll do this later
          </a>
        </div>

        <div className="m-bottom-nav">
          <button className="m-btn m-btn-ghost" onClick={onBack}>Back</button>
          <button className={`m-btn ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
            onClick={onContinue}>Continue to dashboard</button>
        </div>
      </div>
    </div>
  );
}

/* ═══════ Screen 6: Trading Preferences ═══════ */
function PreferencesScreen({ onFinish, onBack, stepVariant, currentStep, density, btnStyle }) {
  const [partialFills, setPartialFills] = useState("no");
  const [riskAck, setRiskAck] = useState(false);
  const pad = density === "compact" ? "var(--space-4)" : density === "spacious" ? "var(--space-8)" : "var(--space-6)";

  const canFinish = partialFills === "no" || (partialFills === "yes" && riskAck);

  return (
    <div data-screen-label="Trading Preferences">
      <StepIndicator current={currentStep} variant={stepVariant} />
      <div className={`onboard-main ${density}`}>
        <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-8)", letterSpacing: "var(--track-tight)" }}>
          Trading preferences
        </h1>

        <div className="two-col">
          {/* Left: explainer */}
          <div className="m-card" style={{ padding: pad }}>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Why we ask</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginBottom: "var(--space-4)" }}>
              By default Meridian rejects orders that can't fill in full.
            </p>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginBottom: "var(--space-4)" }}>
              Allowing partial fills can get you into a position when liquidity is thin, but the average price you get may differ from what you expected.{" "}
              <strong style={{ color: "var(--fg)" }}>Most traders leave this off.</strong>
            </p>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6 }}>
              You can change this any time in <a href="#">Account → Trading preferences</a>.
            </p>
          </div>

          {/* Right: selection */}
          <div>
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-5)" }}>Allow partial fills?</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
              <div className={`m-radio ${partialFills === "no" ? "selected" : ""}`}
                onClick={() => { setPartialFills("no"); setRiskAck(false); }}>
                <div className="m-radio-dot"></div>
                <div>
                  <div style={{ fontWeight: "var(--w-semibold)", marginBottom: 2 }}>
                    No, do not allow partial fills{" "}
                    <span style={{ fontWeight: "var(--w-regular)", color: "var(--fg-muted)", fontSize: "var(--text-sm)" }}>recommended</span>
                  </div>
                  <div style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
                    Orders that can't fill in full will be rejected.
                  </div>
                </div>
              </div>

              <div className={`m-radio ${partialFills === "yes" ? "selected" : ""}`}
                onClick={() => setPartialFills("yes")}>
                <div className="m-radio-dot"></div>
                <div>
                  <div style={{ fontWeight: "var(--w-semibold)", marginBottom: 2 }}>
                    Yes, allow partial fills
                  </div>
                  <div style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>
                    Orders may execute in pieces at different prices.
                  </div>
                </div>
              </div>

              {partialFills === "yes" && (
                <div className={`m-checkbox ${riskAck ? 'checked' : ''}`} onClick={() => setRiskAck(!riskAck)}
                  style={{ animation: "slideUp .2s ease" }}>
                  <div className="m-check-box">
                    {riskAck && <Icon name="check" size={14} stroke={3} color="#fff" />}
                  </div>
                  <span style={{ fontSize: "var(--text-sm)", lineHeight: 1.5 }}>
                    I understand my order may execute in pieces at different prices.
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="m-bottom-nav">
          <button className="m-btn m-btn-ghost" onClick={onBack}>Back</button>
          <button className={`m-btn m-btn-lg ${btnStyle === 'outline' ? 'm-btn-ghost' : 'm-btn-dark'}`}
            disabled={!canFinish} onClick={onFinish}>
            Finish & go to dashboard
          </button>
        </div>
      </div>
    </div>
  );
}

/* ═══════ Success / Complete ═══════ */
function CompleteScreen({ density }) {
  return (
    <div className={`onboard-main ${density}`} data-screen-label="Onboarding Complete" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "50vh" }}>
      <div style={{ width: 64, height: 64, borderRadius: "50%", background: "rgba(95,126,120,0.15)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "var(--space-6)" }}>
        <Icon name="checkCircle" size={36} color="var(--accent)" />
      </div>
      <h1 style={{ fontSize: "var(--text-h1)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)", letterSpacing: "var(--track-tight)" }}>
        You're all set
      </h1>
      <p style={{ fontSize: "var(--text-body)", color: "var(--fg-muted)", maxWidth: 480, marginBottom: "var(--space-8)", lineHeight: 1.6 }}>
        Your account is live, funded, and connected. Open MetaTrader to start trading, or explore your dashboard.
      </p>
      <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", justifyContent: "center" }}>
        <button className="m-btn m-btn-primary m-btn-lg">Open MetaTrader</button>
        <button className="m-btn m-btn-ghost m-btn-lg">Go to dashboard</button>
      </div>
    </div>
  );
}

Object.assign(window, { DepositScreen, ConnectMT5Screen, PreferencesScreen, CompleteScreen });