/* Meridian — Landing Page + App Deposit (post-onboarding) */

function LandingScreen({ onNavigate }) {
  return (
    <div data-screen-label="Landing Page">
      {/* Hero */}
      <div className="landing-hero">
        <div>
          <h1 style={{ fontSize: "var(--text-display)", fontWeight: "var(--w-semibold)", letterSpacing: "var(--track-tight)", lineHeight: 1.04, marginBottom: "var(--space-4)" }}>
            Trade on MetaTrader. Keep your own money.
          </h1>
          <p style={{ fontSize: "var(--text-body)", color: "var(--fg-muted)", lineHeight: 1.6, marginBottom: "var(--space-5)", maxWidth: 420 }}>
            MT5 trading. Your money in your account, always under your control. No KYC, no review, no broker holding your funds.
          </p>
          <div className="landing-badges" style={{ marginBottom: "var(--space-6)" }}>
            <span className="landing-badge"><Icon name="check" size={14} color="var(--accent)" /> Funds stay in your account</span>
            <span className="landing-badge"><Icon name="check" size={14} color="var(--accent)" /> No deposit fee, spread-only</span>
            <span className="landing-badge"><Icon name="check" size={14} color="var(--accent)" /> No KYC</span>
          </div>
          <div style={{ display: "flex", gap: "var(--space-3)" }}>
            <button className="m-btn m-btn-dark m-btn-lg" onClick={() => onNavigate("signup")}>Start trading</button>
            <button className="m-btn m-btn-ghost m-btn-lg" onClick={() => { const el = document.getElementById("how-it-works"); el && el.scrollIntoView({ behavior: "smooth" }); }}>How it really works</button>
          </div>
        </div>
        <div className="trading-hero">
          <div className="trading-hero__glow"></div>
          <div className="trading-hero__grid"></div>
          <div className="trading-hero__window">
            <div className="trading-hero__bar">
              <span className="trading-hero__pill">Meridian terminal</span>
              <span className="trading-hero__status"><span className="trading-hero__dot"></span> Live routing</span>
            </div>
            <div className="trading-hero__main">
              <div className="trading-hero__card trading-hero__card--primary">
                <div className="trading-hero__head">
                  <span className="trading-hero__label">Market pulse</span>
                  <span className="trading-hero__chip">XAUUSD</span>
                </div>
                <div className="trading-hero__price-row">
                  <span className="trading-hero__price">2,348.60</span>
                  <span className="trading-hero__change">+1.12%</span>
                </div>
                <div className="trading-hero__candles">
                  <span className="candle down h36"></span>
                  <span className="candle up h52"></span>
                  <span className="candle up h62"></span>
                  <span className="candle down h44"></span>
                  <span className="candle up h78"></span>
                  <span className="candle up h70"></span>
                  <span className="candle down h58"></span>
                  <span className="candle up h88"></span>
                </div>
                <div className="trading-hero__stats">
                  <span className="stat">Spread 0.4</span>
                  <span className="stat">Latency 21ms</span>
                  <span className="stat stat--accent">PnL +1,248</span>
                </div>
              </div>
              <div className="trading-hero__bottom">
                <div className="trading-hero__card">
                  <div className="trading-hero__head">
                    <span className="trading-hero__label">Open positions</span>
                    <span className="trading-hero__chip">3 live</span>
                  </div>
                  <div className="trading-hero__rows">
                    <div className="row"><span className="pair">XAUUSD</span><span>+1.20</span><span className="up">+184</span></div>
                    <div className="row"><span className="pair">XAGUSD</span><span>+6.00</span><span className="up">+72</span></div>
                    <div className="row muted"><span className="pair">EURUSD</span><span>-0.40</span><span className="down">-18</span></div>
                  </div>
                </div>
                <div className="trading-hero__card">
                  <div className="trading-hero__head">
                    <span className="trading-hero__label">Order book</span>
                    <span className="trading-hero__chip">Depth</span>
                  </div>
                  <div className="book">
                    <div className="book-row ask"><span>2,349.10</span><i className="fill w48"></i></div>
                    <div className="book-row ask"><span>2,348.90</span><i className="fill w62"></i></div>
                    <div className="book-row mid"><span>2,348.60</span><i className="marker"></i></div>
                    <div className="book-row bid"><span>2,348.30</span><i className="fill w70"></i></div>
                    <div className="book-row bid"><span>2,348.00</span><i className="fill w54"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="landing-divider"></div>

      {/* Why Meridian */}
      <div className="landing-section">
        <h2 style={{ fontSize: "var(--text-h2)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-6)" }}>Why Meridian</h2>
        <div className="landing-cards">
          <div className="m-card">
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>Withdraw any time</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6 }}>Withdrawals go straight to your account. No approval, no waiting line, no excuses.</p>
          </div>
          <div className="m-card">
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>No desk</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6 }}>No dealing desk. Your orders settle directly with the exchange — what you see is what fills.</p>
          </div>
          <div className="m-card">
            <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>No KYC</h3>
            <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6 }}>Sign in with email, social, or passkey. Your identity is yours.</p>
          </div>
        </div>
      </div>

      <div className="landing-divider"></div>

      {/* How it really works */}
      <div className="landing-section" id="how-it-works">
        <h2 style={{ fontSize: "var(--text-h2)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-5)" }}>How it really works</h2>
        <ol style={{ fontSize: "var(--text-body)", color: "var(--fg-muted)", paddingLeft: 22, display: "flex", flexDirection: "column", gap: "var(--space-3)", lineHeight: 1.6, marginBottom: "var(--space-6)" }}>
          <li><strong style={{ color: "var(--fg)" }}>Email, social, or passkey.</strong></li>
          <li><strong style={{ color: "var(--fg)" }}>Authorize trading.</strong> One signature gives us a key that can place trades but <strong style={{ color: "var(--fg)" }}>never move your money</strong>.</li>
          <li><strong style={{ color: "var(--fg)" }}>Trade in MetaTrader.</strong> Three credentials, paste into MT5, and you're trading. Withdraw any time.</li>
        </ol>
        <button className="m-btn m-btn-dark m-btn-lg" onClick={() => onNavigate("signup")}>Start trading</button>
      </div>

      <div className="landing-divider"></div>

      {/* The honest version */}
      <div className="landing-section">
        <div className="m-card-lg m-card" style={{ maxWidth: 700 }}>
          <h3 style={{ fontSize: "var(--text-h3)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-4)" }}>The honest version</h3>
          <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.6, marginBottom: "var(--space-4)" }}>
            Three things to set up. Two minutes total. We've tested all three end-to-end.
          </p>
          <ol style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", paddingLeft: 22, display: "flex", flexDirection: "column", gap: "var(--space-2)", lineHeight: 1.6 }}>
            <li><strong style={{ color: "var(--fg)" }}>A signature</strong> — lets us place trades, never move money.</li>
            <li><strong style={{ color: "var(--fg)" }}>Send dollars</strong> — straight into your Meridian Account. Usually arrives in seconds.</li>
            <li><strong style={{ color: "var(--fg)" }}>Connect MetaTrader</strong> — paste three values into the platform you already know.</li>
          </ol>
        </div>
      </div>
    </div>
  );
}

/* ═══════ App Deposit (post-onboarding, inside app shell) ═══════ */
function AppDepositScreen({ onNavigate }) {
  const [selectedMethod, setSelectedMethod] = useState(null);
  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 },
  ];

  return (
    <div className="app-page" data-screen-label="Deposit (App)">
      <div className="breadcrumb">Account › Deposit</div>
      <h1 style={{ fontSize: "var(--text-h2)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-3)" }}>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)", maxWidth: 900 }}>
        {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={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: "var(--space-4)", textAlign: "center", maxWidth: 900 }}>
        Onramps powered by Privy. Bank deposits via Bridge.
      </p>

      <div className="m-card" style={{ marginTop: "var(--space-6)", maxWidth: 900 }}>
        <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>

      <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.</p>
        <p style={{ marginBottom: 8 }}><strong style={{ color: "var(--fg)" }}>Card or Apple Pay</strong> is instant but ~3% fee.</p>
        <p><strong style={{ color: "var(--fg)" }}>Bank transfer</strong> is free but takes 1–3 business days.</p>
      </Accordion>
    </div>
  );
}

Object.assign(window, { LandingScreen, AppDepositScreen });