// Screens for Ledger SNA login flow.
// Theme is provided via context (t) — colors react to Tweaks.

const { useEffect, useState, useRef } = React;

// ───── shared bits ─────
const Brand = ({ dark }) =>
<div style={{
  display: 'flex', alignItems: 'center', gap: 8,
  fontFamily: "'DM Sans', system-ui", fontWeight: 600,
  fontSize: 14, letterSpacing: -0.1,
  color: dark ? '#f3f4f7' : '#0c0d12'
}}>
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <rect x="1" y="1" width="20" height="20" rx="6" fill="currentColor" opacity="0.08" />
      <path d="M6 14.5 L11 5.5 L16 14.5 M7.5 12 H14.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
    <span>Ledger</span>
  </div>;


const PrimaryBtn = ({ children, onClick, disabled, theme, full = true, kind = 'primary' }) => {
  const styles = {
    primary: { bg: theme.primary, fg: '#fff', border: 'transparent' },
    ghost: { bg: 'transparent', fg: theme.dark ? '#f3f4f7' : '#0c0d12', border: theme.dark ? '#2a2d36' : '#dcd8cf' },
    soft: { bg: theme.dark ? '#1c1e27' : '#f4f1ea', fg: theme.dark ? '#f3f4f7' : '#0c0d12', border: 'transparent' }
  }[kind];
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        width: full ? '100%' : 'auto',
        padding: '16px 20px',
        background: disabled ? theme.dark ? '#23252e' : '#e6e2d8' : styles.bg,
        color: disabled ? theme.dark ? '#5a5d68' : '#a4a098' : styles.fg,
        border: `1px solid ${styles.border}`,
        borderRadius: 14,
        fontFamily: "'DM Sans', system-ui",
        fontSize: 15.5, fontWeight: 600, letterSpacing: -0.1,
        cursor: disabled ? 'default' : 'pointer',
        transition: 'transform .15s ease, background .2s ease, opacity .2s ease',
        boxShadow: kind === 'primary' && !disabled ? `0 8px 22px -10px ${styles.bg}` : 'none'
      }}
      onMouseDown={(e) => !disabled && (e.currentTarget.style.transform = 'scale(0.98)')}
      onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
      
      {children}
    </button>);

};

// ─────────────────────────────────────────────
// SCREEN 1: Phone input (with Google-style phone-number hint modal)
// ─────────────────────────────────────────────
const PhoneInputScreen = ({ theme, phone, onPhoneChange, onContinue, focusKey, autoplay }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const surface = theme.dark ? '#15171f' : '#ffffff';
  const line = theme.dark ? '#272a35' : '#e7e3d9';

  const [showHint, setShowHint] = useState(true);

  // Re-show the hint whenever the phone field is cleared (e.g. step reset).
  useEffect(() => {
    if (!phone) setShowHint(true);
  }, [phone]);

  // Autoplay: after a beat, auto-select the first hinted number.
  useEffect(() => {
    if (!autoplay) return;
    if (!showHint) return;
    const t = setTimeout(() => {
      onPhoneChange && onPhoneChange('9876543210');
      setShowHint(false);
    }, 1800);
    return () => clearTimeout(t);
  }, [autoplay, showHint, onPhoneChange]);

  const pick = (num) => {
    onPhoneChange && onPhoneChange(num.replace(/\D/g, '').slice(-10));
    setShowHint(false);
  };

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff',
      position: 'relative', overflow: 'hidden'
    }}>
      <Brand dark={theme.dark} />

      <div style={{ marginTop: 44 }}>
        <div style={{
          fontSize: 11, fontWeight: 500, letterSpacing: 1.2, textTransform: 'uppercase',
          color: theme.primary, fontFamily: "'JetBrains Mono', monospace"
        }}>
          Step 1 of 2
        </div>
        <h1 style={{
          fontFamily: "'DM Sans', system-ui",
          fontSize: 30, fontWeight: 600, letterSpacing: -0.8, lineHeight: 1.15,
          margin: '10px 0 10px', color: ink
        }}>
          Enter your<br />mobile number
        </h1>
      </div>

      {/* phone input */}
      <div style={{ marginTop: 32 }}>
        <label style={{
          fontSize: 12, fontWeight: 500, color: inkSoft, letterSpacing: 0.3,
          display: 'block', marginBottom: 8
        }}>
          MOBILE NUMBER
        </label>
        <div style={{
          display: 'flex', alignItems: 'stretch',
          border: `1.5px solid ${line}`,
          borderRadius: 14, overflow: 'hidden',
          background: surface,
          transition: 'border-color .2s ease',
          borderColor: phone.length >= 10 ? theme.primary : line
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '0 14px', cursor: 'pointer',
            borderRight: `1px solid ${line}`,
            background: theme.dark ? '#11131a' : '#fbfaf6'
          }}>
            <span style={{ fontSize: 18 }}>🇮🇳</span>
            <span style={{ fontSize: 15, fontWeight: 600, color: ink }}>+91</span>
            <svg width="10" height="10" viewBox="0 0 10 10" style={{ marginLeft: 2 }}>
              <path d="M2 4 L5 7 L8 4" stroke={inkSoft} strokeWidth="1.5" fill="none" strokeLinecap="round" />
            </svg>
          </div>
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', padding: '14px 16px',
            fontFamily: "'DM Sans', system-ui", fontSize: 19, fontWeight: 500,
            color: ink, letterSpacing: 0.5, position: 'relative'
          }}>
            <span>{phone.length > 0 ? phone : <span style={{ color: theme.dark ? '#494c56' : '#bdb9b0' }}>98765 43210</span>}</span>
            <span key={focusKey} style={{
              display: 'inline-block', width: 2, height: 22, marginLeft: 2,
              background: theme.primary, animation: 'caret 1s steps(1) infinite',
              opacity: phone.length > 0 ? 1 : 0
            }} />
          </div>
        </div>

        {/* SIM detected chip */}
        <div style={{
          marginTop: 14, display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 12.5, color: inkSoft, fontFamily: "'DM Sans', system-ui"
        }}>
          <div style={{
            width: 6, height: 6, borderRadius: '50%', background: theme.primary,
            animation: 'pulse-dot 1.6s ease-in-out infinite'
          }} />
          SIM detected · Airtel · 4G
        </div>
      </div>

      <div style={{ flex: 1 }} />

      <PrimaryBtn theme={theme} onClick={onContinue} disabled={phone.length < 10}>
        Continue
      </PrimaryBtn>

      <p style={{
        fontSize: 11.5, textAlign: 'center', color: inkSoft,
        margin: '14px 0 0', lineHeight: 1.5
      }}>
        By continuing, you agree to Ledger's{' '}
        <span style={{ color: ink, textDecoration: 'underline' }}>Terms</span> &{' '}
        <span style={{ color: ink, textDecoration: 'underline' }}>Privacy</span>
      </p>

      <GooglePhoneHintModal
        open={showHint}
        onClose={() => setShowHint(false)}
        onPick={pick}
        theme={theme}
      />
    </div>);

};

// Google Phone Number Hint — system-style modal that lets the user pick a
// number tied to their Google account. We use an original 4-color quadrant
// mark in place of any branded logo.
const GooglePhoneHintModal = ({ open, onClose, onPick, theme }) => {
  const numbers = ['+91 98765 43210', '+91 91060 18026'];

  // Google "G" mark — built from 5 filled segments forming a single ring with a
  // blue horizontal bar protruding inward from the right.
  const GoogleG = ({ size = 26 }) => (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-label="Google">
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
      <path fill="#FBBC05" d="M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z"/>
      <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/>
    </svg>
  );

  return (
    <div style={{
      position: 'absolute', inset: 0,
      pointerEvents: open ? 'auto' : 'none',
      transition: 'background .3s ease',
      background: open ? 'rgba(0,0,0,0.42)' : 'rgba(0,0,0,0)',
      zIndex: 30,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%',
        background: '#ffffff',
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 32px -8px rgba(0,0,0,0.18)',
        padding: '8px 0 18px',
        transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform .32s cubic-bezier(.2,.8,.2,1)',
        fontFamily: "'DM Sans', system-ui"
      }}>
        {/* drag handle */}
        <div style={{
          width: 34, height: 4, borderRadius: 2,
          background: '#d6d3cb', margin: '0 auto 16px'
        }} />

        <div style={{ padding: '0 22px' }}>
          {/* header: G logo + close X */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 14
          }}>
            <GoogleG size={26} />
            <button onClick={onClose} aria-label="Close" style={{
              width: 32, height: 32, borderRadius: '50%', border: 'none',
              background: 'transparent', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 0
            }}>
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M4.5 4.5 L13.5 13.5 M13.5 4.5 L4.5 13.5"
                      stroke="#5f6368" strokeWidth="1.7" strokeLinecap="round" />
              </svg>
            </button>
          </div>

          <div style={{
            fontSize: 18, fontWeight: 500, color: '#202124',
            lineHeight: 1.3, marginBottom: 10, letterSpacing: -0.1
          }}>
            Choose a phone number
          </div>
          <p style={{
            fontSize: 13, color: '#5f6368', margin: '0 0 10px', lineHeight: 1.5
          }}>
            You can choose a phone number that's assigned to your phone, and Google will share it only with this app.
          </p>
          <p style={{
            fontSize: 13, color: '#5f6368', margin: '0 0 14px', lineHeight: 1.5
          }}>
            Google won't store the phone number you share with this app in your Google Account.
          </p>

          {/* number list */}
          <div style={{
            display: 'flex', flexDirection: 'column',
            borderTop: '1px solid #e8eaed', marginTop: 4
          }}>
            {numbers.map((n, i) => (
              <button key={n} onClick={() => onPick(n)} style={{
                padding: '12px 0', display: 'flex', alignItems: 'center', gap: 14,
                background: 'transparent', border: 'none',
                borderBottom: i < numbers.length - 1 ? '1px solid #e8eaed' : 'none',
                cursor: 'pointer', textAlign: 'left', width: '100%'
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: '#e8f0fe',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="#1a73e8" aria-hidden="true">
                    <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.67-.36 1.02-.24 1.12.37 2.32.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                  </svg>
                </div>
                <span style={{
                  fontSize: 14, color: '#202124', fontWeight: 400, letterSpacing: 0.1
                }}>{n}</span>
              </button>
            ))}
          </div>

          <p style={{
            fontSize: 12, color: '#5f6368', margin: '16px 0 0',
            lineHeight: 1.5, borderTop: '1px solid #e8eaed', paddingTop: 12
          }}>
            You can update your phone number sharing preference in your{' '}
            <span style={{ color: '#1a73e8', fontWeight: 500 }}>device settings</span>.
          </p>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────
// SCREEN 2: Consent
// ─────────────────────────────────────────────
const ConsentScreen = ({ theme, phone, onContinue, onUseOtp }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const card = theme.dark ? '#15171f' : '#fbf9f4';
  const line = theme.dark ? '#272a35' : '#ece8dc';

  const rows = [
  { icon: '⚡', title: 'Instant', desc: 'No OTP, no copy-paste — usually under 2 seconds.' },
  { icon: '🔒', title: 'Secure', desc: 'Your carrier confirms the SIM is the one signing in.' },
  { icon: '🛡️', title: 'Private', desc: 'We never see your password or store SIM data.' }];


  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff'
    }}>
      <Brand dark={theme.dark} />

      <div style={{ marginTop: 36 }}>
        <div style={{
          fontSize: 11, fontWeight: 500, letterSpacing: 1.2, textTransform: 'uppercase',
          color: theme.primary, fontFamily: "'JetBrains Mono', monospace"
        }}>
          Verify with SIM
        </div>
        <h1 style={{
          fontFamily: "'DM Sans', system-ui",
          fontSize: 26, fontWeight: 600, letterSpacing: -0.6, lineHeight: 1.2,
          margin: '10px 0 8px', color: ink
        }}>
          Sign in silently with<br />your phone number
        </h1>
        <p style={{
          fontSize: 14, lineHeight: 1.5, color: inkSoft, margin: 0
        }}>
          For <span style={{ color: ink, fontWeight: 600 }} className="mono">+91 {phone}</span>
        </p>
      </div>

      {/* benefit cards */}
      <div style={{
        marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10
      }}>
        {rows.map((r, i) =>
        <div key={i} style={{
          display: 'flex', gap: 14, alignItems: 'flex-start',
          padding: '14px 16px',
          background: card,
          border: `1px solid ${line}`,
          borderRadius: 12,
          animation: `float-up .5s ${i * 0.08}s both ease-out`
        }}>
            <div style={{
            width: 32, height: 32, borderRadius: 9,
            background: theme.dark ? '#1f222d' : '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16, flexShrink: 0,
            border: `1px solid ${line}`
          }}>
              {r.icon}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: ink, lineHeight: 1.3 }}>
                {r.title}
              </div>
              <div style={{ fontSize: 12.5, color: inkSoft, marginTop: 2, lineHeight: 1.45 }}>
                {r.desc}
              </div>
            </div>
          </div>
        )}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{
        padding: '10px 14px', borderRadius: 10,
        background: theme.dark ? '#15171f' : '#fbf9f4',
        border: `1px solid ${line}`,
        fontSize: 11.5, color: inkSoft, marginBottom: 14,
        display: 'flex', alignItems: 'center', gap: 8
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
          <circle cx="7" cy="7" r="6" stroke={inkSoft} strokeWidth="1.2" />
          <path d="M7 4v3.5M7 10v0.1" stroke={inkSoft} strokeWidth="1.4" strokeLinecap="round" />
        </svg>
        Mobile data must be on momentarily — this uses your carrier network.
      </div>

      <PrimaryBtn theme={theme} onClick={onContinue}>
        Verify with my SIM
      </PrimaryBtn>
      <button onClick={onUseOtp} style={{
        marginTop: 10, padding: '12px', border: 'none', background: 'transparent',
        fontSize: 13.5, color: inkSoft, fontFamily: "'DM Sans', system-ui",
        fontWeight: 500, cursor: 'pointer'
      }}>
        Use OTP instead
      </button>
    </div>);

};

// ─────────────────────────────────────────────
// SCREEN 3: Loader — connecting to telecom
// ─────────────────────────────────────────────
const LoaderScreen = ({ theme, step, variant }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const line = theme.dark ? '#272a35' : '#ece8dc';
  const card = theme.dark ? '#15171f' : '#fbf9f4';

  const steps = [
  'Reaching your carrier',
  'Verifying SIM identity',
  'Securing your session'];


  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff'
    }}>
      <Brand dark={theme.dark} />

      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center',
        gap: 36
      }}>
        {variant === 'pulse' && <PulseVisual theme={theme} />}
        {variant === 'spinner' && <SpinnerVisual theme={theme} />}
        {variant === 'wave' && <WaveVisual theme={theme} />}

        <div style={{ minHeight: 90 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10.5, color: theme.primary, letterSpacing: 1.5,
            textTransform: 'uppercase', marginBottom: 12
          }}>
            SECURE HANDSHAKE · AIRTEL
          </div>
          <div key={step} style={{
            fontFamily: "'DM Sans', system-ui", fontSize: 20,
            fontWeight: 600, color: ink, letterSpacing: -0.3,
            animation: 'float-up .35s ease-out'
          }}>
            {steps[step] || steps[0]}
          </div>
          <div style={{
            fontSize: 13, color: inkSoft, marginTop: 6
          }}>
            This usually takes a second or two.
          </div>
        </div>
      </div>

      {/* progressive 3-step indicator */}
      <div style={{
        padding: '14px 16px', background: card, borderRadius: 14,
        border: `1px solid ${line}`
      }}>
        <div style={{
          display: 'flex', gap: 6, marginBottom: 12
        }}>
          {[0, 1, 2].map((i) =>
          <div key={i} style={{
            flex: 1, height: 4, borderRadius: 2,
            background: theme.dark ? '#22242d' : '#ebe7da',
            overflow: 'hidden', position: 'relative'
          }}>
              <div
                key={`${i}-${step}`}
                style={{
                  position: 'absolute', inset: 0,
                  background: theme.primary,
                  width: step > i ? '100%' : step === i ? '100%' : '0%',
                  transition: step > i ? 'none' : 'none',
                  animation: step === i ? 'fill-bar 1.2s linear forwards' : 'none',
                  transformOrigin: 'left center'
                }}
              />
              {step === i &&
            <div style={{
              position: 'absolute', top: 0, left: 0, height: '100%', width: '40%',
              background: `linear-gradient(90deg, transparent, ${theme.primary}, transparent)`,
              animation: 'sweep 1.4s linear infinite',
              opacity: 0.7
            }} />
            }
            </div>
          )}
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontSize: 10.5, fontFamily: "'JetBrains Mono', monospace",
          color: inkSoft, letterSpacing: 0.5, textTransform: 'uppercase'
        }}>
          <span style={{ color: step >= 0 ? ink : inkSoft }}>01 · Reach</span>
          <span style={{ color: step >= 1 ? ink : inkSoft }}>02 · Verify</span>
          <span style={{ color: step >= 2 ? ink : inkSoft }}>03 · Secure</span>
        </div>
      </div>
    </div>);

};

const PulseVisual = ({ theme }) =>
<div style={{
  width: 200, height: 200, position: 'relative',
  display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
    {[0, 1, 2].map((i) =>
  <div key={i} style={{
    position: 'absolute',
    width: 80, height: 80, borderRadius: '50%',
    border: `1.5px solid ${theme.primary}`,
    animation: `pulse-ring 2.4s ${i * 0.6}s ease-out infinite`,
    opacity: 0
  }} />
  )}
    {/* core */}
    <div style={{
    width: 80, height: 80, borderRadius: '50%',
    background: theme.primary,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: `0 12px 32px -8px ${theme.primary}`,
    animation: 'pulse-dot 1.6s ease-in-out infinite'
  }}>
      {/* SIM card glyph */}
      <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
        <path d="M9 6 H22 L27 11 V30 H9 Z" stroke="#fff" strokeWidth="2" strokeLinejoin="round" fill="none" />
        <rect x="13" y="15" width="10" height="9" rx="1.5" stroke="#fff" strokeWidth="1.5" fill="none" />
        <path d="M16 15 V24 M20 15 V24 M13 18 H23 M13 21 H23" stroke="#fff" strokeWidth="1" />
      </svg>
    </div>
  </div>;


const SpinnerVisual = ({ theme }) =>
<div style={{
  width: 160, height: 160, position: 'relative',
  display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
    <svg width="120" height="120" viewBox="0 0 120 120" style={{ animation: 'rotate 1.4s linear infinite' }}>
      <circle cx="60" cy="60" r="50" stroke={theme.dark ? '#22242d' : '#ece8dc'} strokeWidth="6" fill="none" />
      <circle cx="60" cy="60" r="50" stroke={theme.primary} strokeWidth="6" fill="none"
    strokeDasharray="80 314" strokeLinecap="round" />
    </svg>
    <div style={{
    position: 'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center',
    width: 60, height: 60, borderRadius: '50%',
    background: theme.dark ? '#15171f' : '#fbf9f4'
  }}>
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <path d="M7 4 H17 L21 8 V24 H7 Z" stroke={theme.primary} strokeWidth="1.8" strokeLinejoin="round" fill="none" />
        <rect x="10" y="12" width="8" height="7" rx="1" stroke={theme.primary} strokeWidth="1.4" fill="none" />
      </svg>
    </div>
  </div>;


const WaveVisual = ({ theme }) =>
<div style={{
  width: 220, height: 160, position: 'relative',
  display: 'flex', alignItems: 'center', justifyContent: 'center'
}}>
    {/* tower */}
    <div style={{
    position: 'absolute', left: 30, bottom: 24,
    display: 'flex', flexDirection: 'column', alignItems: 'center'
  }}>
      <div style={{ width: 4, height: 50, background: theme.primary }} />
      <div style={{ width: 24, height: 4, background: theme.primary, marginTop: -2 }} />
    </div>
    {/* phone */}
    <div style={{
    position: 'absolute', right: 30, bottom: 24,
    width: 32, height: 56, borderRadius: 6,
    border: `2.5px solid ${theme.primary}`,
    background: theme.dark ? '#15171f' : '#fff'
  }} />
    {/* arcs */}
    {[0, 1, 2, 3].map((i) =>
  <svg key={i} width="180" height="100" viewBox="0 0 180 100" style={{
    position: 'absolute', top: 20,
    animation: `pulse-ring 2s ${i * 0.4}s ease-out infinite`,
    opacity: 0
  }}>
        <path d="M 20 80 Q 90 -10 160 80" stroke={theme.primary} strokeWidth="2" fill="none" strokeLinecap="round" />
      </svg>
  )}
  </div>;


// ─────────────────────────────────────────────
// SCREEN 4: Success
// ─────────────────────────────────────────────
const SuccessScreen = ({ theme, phone }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const card = theme.dark ? '#15171f' : '#fbf9f4';
  const line = theme.dark ? '#272a35' : '#ece8dc';
  const okColor = '#0f8a5f';

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff'
    }}>
      <Brand dark={theme.dark} />

      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 24
      }}>
        <div style={{
          width: 88, height: 88, borderRadius: '50%',
          background: okColor,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 18px 40px -12px ${okColor}`,
          animation: 'float-up .5s ease-out'
        }}>
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
            <path d="M10 20 L17 27 L30 13" stroke="#fff" strokeWidth="3.2"
            strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray="36" strokeDashoffset="36"
            style={{ animation: 'check-draw .5s .2s ease-out forwards' }} />
          </svg>
        </div>

        <div style={{ animation: 'float-up .4s .3s both ease-out' }}>
          <h1 style={{
            fontFamily: "'DM Sans', system-ui",
            fontSize: 26, fontWeight: 600, letterSpacing: -0.6,
            margin: '0 0 8px', color: ink
          }}>
            You're in, Anuj
          </h1>
          <p style={{ fontSize: 14, color: inkSoft, margin: 0 }}>
            Signed in with <span className="mono" style={{ color: ink }}>+91 {phone}</span>
          </p>
        </div>

        {/* dashboard glimpse */}
        <div style={{
          width: '100%', padding: 14, background: card,
          border: `1px solid ${line}`, borderRadius: 14,
          animation: 'float-up .5s .5s both ease-out',
          textAlign: 'left'
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            marginBottom: 8
          }}>
            <div style={{ fontSize: 11, color: inkSoft, letterSpacing: 0.5, textTransform: 'uppercase' }}>
              Available balance
            </div>
            <div style={{ fontSize: 10, color: okColor, fontWeight: 600 }}>● LIVE</div>
          </div>
          <div style={{
            fontFamily: "'DM Sans', system-ui", fontSize: 32, fontWeight: 600,
            color: ink, letterSpacing: -0.8
          }}>
            ₹1,24,580<span style={{ color: inkSoft, fontSize: 18 }}>.40</span>
          </div>
          <div style={{
            display: 'flex', gap: 8, marginTop: 14
          }}>
            {['Send', 'Receive', 'Invest'].map((l) =>
            <div key={l} style={{
              flex: 1, padding: '10px 6px', borderRadius: 10,
              background: theme.dark ? '#0e0f15' : '#fff',
              border: `1px solid ${line}`,
              fontSize: 12, fontWeight: 500, color: ink, textAlign: 'center'
            }}>{l}</div>
            )}
          </div>
        </div>
      </div>

      <PrimaryBtn theme={theme}>Go to dashboard</PrimaryBtn>
    </div>);

};

// ─────────────────────────────────────────────
// SCREEN 5: Fallback to OTP
// ─────────────────────────────────────────────
const FallbackScreen = ({ theme, phone, onResend, onBack }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const line = theme.dark ? '#272a35' : '#ece8dc';
  const card = theme.dark ? '#15171f' : '#fbf9f4';
  const [digits, setDigits] = useState(['', '', '', '', '', '']);
  const [filled, setFilled] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setFilled((f) => {
        if (f >= 6) {clearInterval(id);return f;}
        setDigits((d) => {
          const nd = [...d];
          nd[f] = String(Math.floor(Math.random() * 10));
          return nd;
        });
        return f + 1;
      });
    }, 380);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff'
    }}>
      <Brand dark={theme.dark} />

      <div style={{ marginTop: 32 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 100,
          background: theme.dark ? '#2a1d12' : '#fbf0e3',
          color: '#b8500d',
          fontSize: 11, fontWeight: 600, letterSpacing: 0.3
        }}>
          <div style={{
            width: 5, height: 5, borderRadius: '50%', background: '#b8500d'
          }} />
          Silent verify unavailable
        </div>
        <h1 style={{
          fontFamily: "'DM Sans', system-ui",
          fontSize: 26, fontWeight: 600, letterSpacing: -0.6, lineHeight: 1.2,
          margin: '14px 0 8px', color: ink
        }}>
          Enter the 6-digit code
        </h1>
        <p style={{ fontSize: 14, color: inkSoft, margin: 0, lineHeight: 1.5 }}>
          Sent to <span className="mono" style={{ color: ink }}>+91 {phone}</span> ·{' '}
          <span style={{ color: theme.primary, fontWeight: 600 }}>Change</span>
        </p>
      </div>

      {/* OTP boxes */}
      <div style={{
        display: 'flex', gap: 8, marginTop: 32, justifyContent: 'space-between'
      }}>
        {digits.map((d, i) =>
        <div key={i} style={{
          flex: 1, aspectRatio: '1 / 1.15',
          border: `1.5px solid ${d ? theme.primary : line}`,
          borderRadius: 12,
          background: d ? theme.dark ? '#1a1b25' : '#fbfaf6' : theme.dark ? '#15171f' : '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 22, fontWeight: 600, color: ink,
          fontFamily: "'DM Sans', system-ui",
          transition: 'all .2s ease',
          position: 'relative'
        }}>
            {d ||
          i === filled &&
          <span style={{
            width: 2, height: 24, background: theme.primary,
            animation: 'caret 1s steps(1) infinite'
          }} />

          }
          </div>
        )}
      </div>

      {/* resend */}
      <div style={{
        marginTop: 20, padding: '12px 14px', borderRadius: 12,
        background: card, border: `1px solid ${line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <div style={{ fontSize: 12.5, color: inkSoft }}>
          Didn't get the code?
        </div>
        <button onClick={onResend} style={{
          padding: '6px 12px', borderRadius: 8, border: 'none',
          background: 'transparent', color: theme.primary,
          fontFamily: "'DM Sans', system-ui", fontSize: 13, fontWeight: 600,
          cursor: 'pointer'
        }}>
          Resend · 0:24
        </button>
      </div>

      <div style={{ flex: 1 }} />

      <PrimaryBtn theme={theme} disabled={filled < 6}>
        {filled < 6 ? 'Verifying…' : 'Verify code'}
      </PrimaryBtn>
      <button onClick={onBack} style={{
        marginTop: 10, padding: '12px', border: 'none', background: 'transparent',
        fontSize: 13.5, color: inkSoft, fontFamily: "'DM Sans', system-ui",
        fontWeight: 500, cursor: 'pointer'
      }}>
        ← Try silent verify again
      </button>
    </div>);

};

// ─────────────────────────────────────────────
// SCREEN: Enable Data Network (shown only when mobile data is OFF)
// ─────────────────────────────────────────────
const EnableDataScreen = ({ theme, phone, dataOn, onToggleData, onContinue, onAutoToggle }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const card = theme.dark ? '#15171f' : '#fbf9f4';
  const line = theme.dark ? '#272a35' : '#ece8dc';
  const warn = '#b8500d';

  const [showSettings, setShowSettings] = useState(false);

  // When data toggles on inside the settings sheet, slide it away and let the
  // parent proceed to the loader.
  useEffect(() => {
    if (showSettings && dataOn) {
      const t1 = setTimeout(() => setShowSettings(false), 700);
      const t2 = setTimeout(() => onContinue && onContinue(), 1300);
      return () => {clearTimeout(t1);clearTimeout(t2);};
    }
  }, [showSettings, dataOn, onContinue]);

  const openSettings = () => {
    setShowSettings(true);
    // mock the OS redirect — give user a beat, then auto-toggle to demonstrate
    setTimeout(() => {
      if (!dataOn && onToggleData) onToggleData();
    }, 1500);
  };

  // Mask phone for readability: 9876543210 → 98••••3210
  const maskedPhone = phone && phone.length >= 10 ?
  `${phone.slice(0, 2)}••••${phone.slice(-4)}` :
  phone;

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff',
      position: 'relative', overflow: 'hidden'
    }}>
      <Brand dark={theme.dark} />

      <div style={{ marginTop: 32 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 100,
          background: theme.dark ? '#2a1d12' : '#fbf0e3',
          color: warn,
          fontSize: 11, fontWeight: 600, letterSpacing: 0.3
        }}>
          <div style={{ width: 5, height: 5, borderRadius: '50%', background: warn }} />
          Mobile data is off
        </div>
        <h1 style={{
          fontFamily: "'DM Sans', system-ui",
          fontSize: 26, fontWeight: 600, letterSpacing: -0.6, lineHeight: 1.2,
          margin: '14px 0 8px', color: ink
        }}>
          Turn on mobile data<br />for this SIM
        </h1>
        <p style={{ fontSize: 14, color: inkSoft, margin: 0, lineHeight: 1.5 }}>
          We need to verify the SIM that owns{' '}
          <span className="mono" style={{ color: ink, fontWeight: 600 }}>+91 {phone}</span>{' '}
          with your carrier. This only works over mobile data.
        </p>
      </div>

      {/* SIM card snapshot */}
      <div style={{
        marginTop: 24, padding: '14px 16px',
        background: card, border: `1px solid ${line}`, borderRadius: 14,
        display: 'flex', alignItems: 'center', gap: 14
      }}>
        {/* SIM glyph */}
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: theme.dark ? '#22242d' : '#fff',
          border: `1px solid ${line}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
        }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M5 3 H14 L19 8 V19 H5 Z" stroke={theme.primary} strokeWidth="1.6" strokeLinejoin="round" fill="none" />
            <rect x="8" y="11" width="6" height="5" rx="1" stroke={theme.primary} strokeWidth="1.3" fill="none" />
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 11, color: inkSoft, letterSpacing: 0.4,
            textTransform: 'uppercase', fontFamily: "'JetBrains Mono', monospace"
          }}>
            SIM 1 · Airtel
          </div>
          <div style={{
            fontFamily: "'DM Sans', system-ui", fontSize: 16, fontWeight: 600,
            color: ink, letterSpacing: -0.2, marginTop: 2
          }}>
            +91 {phone}
          </div>
        </div>
        <div style={{
          padding: '4px 9px', borderRadius: 100,
          background: dataOn ? theme.dark ? '#0f2a1f' : '#e6f4ec' : theme.dark ? '#2a1d12' : '#fbf0e3',
          color: dataOn ? '#0f8a5f' : warn,
          fontSize: 10.5, fontWeight: 600, letterSpacing: 0.3,
          display: 'flex', alignItems: 'center', gap: 5
        }}>
          <div style={{
            width: 5, height: 5, borderRadius: '50%',
            background: dataOn ? '#0f8a5f' : warn
          }} />
          {dataOn ? 'Data ON' : 'Data OFF'}
        </div>
      </div>

      {/* Info note */}
      <div style={{
        marginTop: 12, padding: '10px 14px', borderRadius: 10,
        background: card, border: `1px solid ${line}`,
        fontSize: 11.5, color: inkSoft,
        display: 'flex', alignItems: 'flex-start', gap: 8, lineHeight: 1.5
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0, marginTop: 1 }}>
          <circle cx="7" cy="7" r="6" stroke={inkSoft} strokeWidth="1.2" />
          <path d="M7 4v3.5M7 10v0.1" stroke={inkSoft} strokeWidth="1.4" strokeLinecap="round" />
        </svg>
        We'll take you to your phone settings.
      
      </div>

      <div style={{ flex: 1 }} />

      <PrimaryBtn theme={theme} onClick={dataOn ? onContinue : openSettings} disabled={false}>
        {dataOn ? 'Continue' : 'Turn on data network'}
      </PrimaryBtn>

      {/* OS Settings sheet (mocked redirect) */}
      <AndroidDataSettingsSheet
        open={showSettings}
        dataOn={dataOn}
        onToggleData={onToggleData}
        onClose={() => setShowSettings(false)}
        phone={phone}
        theme={theme} />
      
    </div>);

};

// Android Quick Settings / Mobile Network sheet — full-bleed overlay slides up
const AndroidDataSettingsSheet = ({ open, dataOn, onToggleData, onClose, phone, theme }) => {
  const osBg = '#f1efe9';
  const osCard = '#ffffff';
  const osInk = '#1a1c1e';
  const osInkSoft = '#5a5d67';
  const osLine = '#dcd8cf';
  const osAccent = '#0c54c8';

  return (
    <div style={{
      position: 'absolute', inset: 0,
      pointerEvents: open ? 'auto' : 'none',
      transition: 'background .35s ease',
      background: open ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0)',
      zIndex: 20
    }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        height: '94%',
        background: osBg,
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform .4s cubic-bezier(.2,.7,.2,1)',
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 -20px 40px -10px rgba(0,0,0,0.2)'
      }}>
        {/* OS app bar */}
        <div style={{
          padding: '18px 16px 12px',
          display: 'flex', alignItems: 'center', gap: 14
        }}>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: '50%', border: 'none',
            background: 'transparent', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M13 4 L7 10 L13 16" stroke={osInk} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <div style={{
            fontFamily: "'DM Sans', system-ui", fontSize: 18, fontWeight: 500,
            color: osInk
          }}>
            Mobile network
          </div>
        </div>

        {/* SIM label header */}
        <div style={{
          padding: '8px 16px 12px',
          fontSize: 13, fontWeight: 600, color: osAccent,
          fontFamily: "'DM Sans', system-ui"
        }}>
          SIM 1 · Airtel
        </div>

        {/* Mobile data row */}
        <div style={{
          margin: '0 12px', background: osCard, borderRadius: 18,
          border: `1px solid ${osLine}`, overflow: 'hidden'
        }}>
          <button onClick={onToggleData} style={{
            width: '100%', padding: '16px 18px',
            display: 'flex', alignItems: 'center', gap: 14,
            background: 'transparent', border: 'none', cursor: 'pointer',
            textAlign: 'left'
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: dataOn ? '#dde4f2' : '#ece9e0',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0
            }}>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M3 17 L17 3 M3 17 H8 V12 M17 3 H12 V8" stroke={dataOn ? osAccent : osInkSoft}
                strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </svg>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: "'DM Sans', system-ui", fontSize: 15.5, fontWeight: 500,
                color: osInk
              }}>
                Mobile data
              </div>
              <div style={{ fontSize: 12.5, color: osInkSoft, marginTop: 2 }}>
                Access data using mobile network
              </div>
            </div>
            {/* Material switch */}
            <div style={{
              width: 52, height: 32, borderRadius: 100,
              background: dataOn ? osAccent : '#cac6bb',
              position: 'relative', flexShrink: 0,
              transition: 'background .25s ease',
              border: `2px solid ${dataOn ? osAccent : '#cac6bb'}`,
              boxSizing: 'border-box'
            }}>
              <div style={{
                position: 'absolute',
                top: '50%', left: dataOn ? 24 : 4,
                transform: 'translateY(-50%)',
                width: 20, height: 20, borderRadius: '50%',
                background: dataOn ? '#fff' : '#5a5d67',
                transition: 'left .25s cubic-bezier(.2,.7,.2,1)'
              }} />
            </div>
          </button>

          <div style={{ height: 1, background: osLine, margin: '0 18px' }} />

          {/* Secondary row — roaming */}
          <div style={{
            padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14
          }}>
            <div style={{ width: 40, height: 40, flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, color: osInk }}>Data roaming</div>
              <div style={{ fontSize: 12, color: osInkSoft, marginTop: 1 }}>Off</div>
            </div>
          </div>
        </div>

        {/* Help text */}
        <div style={{
          padding: '14px 22px', fontSize: 12, color: osInkSoft, lineHeight: 1.5
        }}>
          Turning on mobile data may use your data plan. To continue verifying{' '}
          <span style={{ color: osInk, fontWeight: 600 }}>+91 {phone}</span>, switch
          the toggle on.
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ height: 22 }} />
      </div>
    </div>);

};

// ─────────────────────────────────────────────
// SCREEN: Switch Data SIM
// Scenario: Mobile data is running on a SIM whose carrier doesn't match
// the number the user typed. We don't actually know each SIM's number —
// we only know which carriers are present and which one currently has
// mobile data. We infer the *carrier* of the typed number (e.g. Jio)
// from its prefix and ask the user to put data on whichever SIM is
// that carrier — they are the one who knows which slot it lives in.
// ─────────────────────────────────────────────
const SwitchSimScreen = ({ theme, phone, dataSim, onSwitchSim, onContinue }) => {
  const inkSoft = theme.dark ? '#9fa2ac' : '#5a5d67';
  const ink = theme.dark ? '#f3f4f7' : '#0c0d12';
  const card = theme.dark ? '#15171f' : '#fbf9f4';
  const line = theme.dark ? '#272a35' : '#ece8dc';
  const warn = '#b8500d';
  const ok = '#0f8a5f';

  const [showSettings, setShowSettings] = useState(false);

  // Once user flips data to SIM 2 inside the sheet, dismiss and continue
  useEffect(() => {
    if (showSettings && dataSim === 2) {
      const t1 = setTimeout(() => setShowSettings(false), 700);
      const t2 = setTimeout(() => onContinue && onContinue(), 1300);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }
  }, [showSettings, dataSim, onContinue]);

  const openSettings = () => {
    setShowSettings(true);
    setTimeout(() => {
      if (dataSim !== 2 && onSwitchSim) onSwitchSim();
    }, 1500);
  };

  const sims = [
    { idx: 1, carrier: 'Airtel', color: '#d62b2b' },
    { idx: 2, carrier: 'Jio',    color: '#0a3e8a' },
  ];

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      padding: '20px 24px 28px', boxSizing: 'border-box',
      background: theme.dark ? '#0e0f15' : '#ffffff',
      position: 'relative', overflow: 'hidden'
    }}>
      <Brand dark={theme.dark} />

      <div style={{ marginTop: 28 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '4px 10px', borderRadius: 100,
          background: theme.dark ? '#2a1d12' : '#fbf0e3',
          color: warn,
          fontSize: 11, fontWeight: 600, letterSpacing: 0.3
        }}>
          <div style={{ width: 5, height: 5, borderRadius: '50%', background: warn }} />
          Data is on a different carrier
        </div>
        <h1 style={{
          fontFamily: "'DM Sans', system-ui",
          fontSize: 24, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1.2,
          margin: '12px 0 8px', color: ink
        }}>
          Use mobile data on<br />your Jio SIM
        </h1>
        <p style={{ fontSize: 13.5, color: inkSoft, margin: 0, lineHeight: 1.5 }}>
          The number you entered looks like a{' '}
          <span style={{ color: ink, fontWeight: 600 }}>Jio</span> number, but
          mobile data is currently running on{' '}
          <span style={{ color: ink, fontWeight: 600 }}>Airtel — SIM 1</span>.
          Please change the mobile data to your Jio SIM so we can verify it.
        </p>
      </div>

      {/* SIM stack — we don't know each SIM's number; only carriers + which has data */}
      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {sims.map((s) => {
          const hasData = dataSim === s.idx;
          const isTargetCarrier = s.carrier === 'Jio';
          return (
            <div key={s.idx} style={{
              padding: '12px 14px',
              background: card,
              border: `1.5px solid ${isTargetCarrier && !hasData ? theme.primary : line}`,
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 12,
              transition: 'all .3s ease'
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9,
                background: s.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0
              }}>
                <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
                  <path d="M5 3 H14 L19 8 V19 H5 Z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" fill="none" />
                  <rect x="8" y="11" width="6" height="5" rx="1" stroke="#fff" strokeWidth="1.3" fill="none" />
                </svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 10.5, color: inkSoft, letterSpacing: 0.4,
                  textTransform: 'uppercase', fontFamily: "'JetBrains Mono', monospace"
                }}>
                  SIM {s.idx}
                </div>
                <div style={{
                  fontFamily: "'DM Sans', system-ui", fontSize: 14.5, fontWeight: 600,
                  color: ink, letterSpacing: -0.2, marginTop: 2,
                  display: 'flex', alignItems: 'center', gap: 8
                }}>
                  {s.carrier}
                  {isTargetCarrier && (
                    <span style={{
                      fontSize: 10, fontWeight: 600, padding: '2px 7px',
                      borderRadius: 100,
                      background: theme.dark ? 'rgba(79,70,229,0.18)' : 'rgba(79,70,229,0.08)',
                      color: theme.primary, letterSpacing: 0.3
                    }}>
                      Needed for verify
                    </span>
                  )}
                </div>
              </div>
              <div style={{
                padding: '4px 9px', borderRadius: 100,
                background: hasData ? (theme.dark ? '#0f2a1f' : '#e6f4ec') : (theme.dark ? '#22242d' : '#ece9e0'),
                color: hasData ? ok : inkSoft,
                fontSize: 10.5, fontWeight: 600, letterSpacing: 0.3,
                display: 'flex', alignItems: 'center', gap: 5
              }}>
                <div style={{
                  width: 5, height: 5, borderRadius: '50%',
                  background: hasData ? ok : inkSoft
                }} />
                {hasData ? 'Data ON' : 'Data off'}
              </div>
            </div>
          );
        })}
      </div>

      {/* Helper line */}
      <div style={{
        marginTop: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
        gap: 6, fontSize: 11.5, color: inkSoft,
        fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.4,
        textAlign: 'center'
      }}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
          <path d="M6 2 V10 M3 7 L6 10 L9 7" stroke={inkSoft} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        MOVE DATA · AIRTEL → JIO
      </div>

      <div style={{ flex: 1 }} />

      <PrimaryBtn theme={theme} onClick={dataSim === 2 ? onContinue : openSettings}>
        {dataSim === 2 ? 'Continue' : 'Change Data Network'}
      </PrimaryBtn>

      <AndroidSimSwitchSheet
        open={showSettings}
        dataSim={dataSim}
        onSwitchSim={onSwitchSim}
        onClose={() => setShowSettings(false)}
        theme={theme}
      />
    </div>
  );
};

// Android Mobile Network sheet — pick which SIM gets mobile data
const AndroidSimSwitchSheet = ({ open, dataSim, onSwitchSim, onClose, theme }) => {
  const osBg = '#f1efe9';
  const osCard = '#ffffff';
  const osInk = '#1a1c1e';
  const osInkSoft = '#5a5d67';
  const osLine = '#dcd8cf';
  const osAccent = '#0c54c8';

  const sims = [
    { idx: 1, carrier: 'Airtel', color: '#d62b2b' },
    { idx: 2, carrier: 'Jio',    color: '#0a3e8a' },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      pointerEvents: open ? 'auto' : 'none',
      transition: 'background .35s ease',
      background: open ? 'rgba(0,0,0,0.25)' : 'rgba(0,0,0,0)',
      zIndex: 20
    }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        height: '94%',
        background: osBg,
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform .4s cubic-bezier(.2,.7,.2,1)',
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 -20px 40px -10px rgba(0,0,0,0.2)'
      }}>
        {/* OS app bar */}
        <div style={{
          padding: '18px 16px 12px',
          display: 'flex', alignItems: 'center', gap: 14
        }}>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: '50%', border: 'none',
            background: 'transparent', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M13 4 L7 10 L13 16" stroke={osInk} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
          <div style={{
            fontFamily: "'DM Sans', system-ui", fontSize: 18, fontWeight: 500,
            color: osInk
          }}>
            Mobile network
          </div>
        </div>

        {/* Section heading */}
        <div style={{
          padding: '8px 22px 10px',
          fontSize: 13, fontWeight: 600, color: osAccent,
          fontFamily: "'DM Sans', system-ui"
        }}>
          Mobile data preference
        </div>

        {/* SIM picker rows */}
        <div style={{
          margin: '0 12px', background: osCard, borderRadius: 18,
          border: `1px solid ${osLine}`, overflow: 'hidden'
        }}>
          {sims.map((s, i) => {
            const selected = dataSim === s.idx;
            return (
              <React.Fragment key={s.idx}>
                <button onClick={() => onSwitchSim && onSwitchSim()} style={{
                  width: '100%', padding: '16px 18px',
                  display: 'flex', alignItems: 'center', gap: 14,
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  textAlign: 'left'
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 9,
                    background: s.color,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0
                  }}>
                    <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
                      <path d="M5 3 H14 L19 8 V19 H5 Z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" fill="none" />
                      <rect x="8" y="11" width="6" height="5" rx="1" stroke="#fff" strokeWidth="1.3" fill="none" />
                    </svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: "'DM Sans', system-ui", fontSize: 15.5, fontWeight: 500,
                      color: osInk
                    }}>
                      SIM {s.idx} · {s.carrier}
                    </div>
                    <div style={{ fontSize: 12.5, color: osInkSoft, marginTop: 2 }}>
                      {s.idx === 1 ? '5G · Available' : '4G · Available'}
                    </div>
                  </div>
                  {/* Material radio */}
                  <div style={{
                    width: 22, height: 22, borderRadius: '50%',
                    border: `2px solid ${selected ? osAccent : '#8b8e97'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, transition: 'border-color .25s ease'
                  }}>
                    <div style={{
                      width: 11, height: 11, borderRadius: '50%',
                      background: osAccent,
                      transform: selected ? 'scale(1)' : 'scale(0)',
                      transition: 'transform .25s cubic-bezier(.2,.7,.2,1)'
                    }} />
                  </div>
                </button>
                {i < sims.length - 1 && (
                  <div style={{ height: 1, background: osLine, margin: '0 18px' }} />
                )}
              </React.Fragment>
            );
          })}
        </div>

        {/* Help text */}
        <div style={{
          padding: '14px 22px', fontSize: 12, color: osInkSoft, lineHeight: 1.5
        }}>
          Calls and messages will still use their own SIM. Only the SIM selected
          here is used for mobile data.
        </div>

        <div style={{ flex: 1 }} />
        <div style={{ height: 22 }} />
      </div>
    </div>
  );
};

Object.assign(window, {
  PhoneInputScreen, ConsentScreen, LoaderScreen, SuccessScreen, FallbackScreen,
  EnableDataScreen, SwitchSimScreen, GooglePhoneHintModal, PrimaryBtn, Brand
});