/* ============================================================================
   BetPrince Sportsbook — Info Screens (Me, FAQ, About, Terms)
   Depends on sb-atoms.jsx. Exports to window.
   ============================================================================ */

/* ---- Shared sub-header with back button ----------------------------------- */
function InfoHeader({ title, onBack }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px',
      background: 'var(--header-bg)' }}>
      <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: 999, border: 'none',
        background: 'rgba(255,255,255,0.16)', color: 'var(--header-ink)', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="chevron-left" size={20} />
      </button>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17,
        color: 'var(--header-ink)' }}>{title}</span>
    </div>
  );
}

/* ---- Section label --------------------------------------------------------- */
function SectionTitle({ children }) {
  return (
    <div style={{ padding: '18px 16px 10px', fontFamily: 'var(--font-text)', fontWeight: 800,
      fontSize: 11.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
      {children}
    </div>
  );
}

/* ---- Menu row -------------------------------------------------------------- */
function MenuRow({ icon, label, right, color, onClick, danger }) {
  return (
    <button onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 14,
      width: '100%', background: 'var(--card)', border: 'none', borderBottom: '1px solid var(--line)',
      padding: '15px 16px', cursor: 'pointer', textAlign: 'left' }}>
      <span style={{ width: 38, height: 38, borderRadius: 12,
        background: danger ? 'rgba(239,68,68,0.12)' : 'var(--card-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: danger ? 'var(--live)' : (color || 'var(--ink-2)') }}>
        <Icon name={icon} size={18} />
      </span>
      <span style={{ flex: 1, fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 15,
        color: danger ? 'var(--live)' : 'var(--ink)' }}>{label}</span>
      {right || <Icon name="chevron-right" size={18} color="var(--ink-3)" />}
    </button>
  );
}

/* ============================================================================
   ME / PROFILE SCREEN
   ============================================================================ */
/* ============================================================================
   EDIT PROFILE SCREEN
   ============================================================================ */
const AVATAR_OPTIONS = [
  { id: 'av1', url: 'https://i.pravatar.cc/200?img=12' },
  { id: 'av2', url: 'https://i.pravatar.cc/200?img=53' },
  { id: 'av3', url: 'https://i.pravatar.cc/200?img=33' },
  { id: 'av4', url: 'https://i.pravatar.cc/200?img=68' },
];

function EditProfileScreen({ onBack, avatar, onSetAvatar }) {
  const [name, setName] = useState('BetPrince User');
  const [phone, setPhone] = useState('+234 812 345 6789');
  const [email, setEmail] = useState('');
  const [saved, setSaved] = useState(false);

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => { setSaved(false); onBack(); }, 1200);
  };

  if (saved) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', padding: '80px 30px', textAlign: 'center', minHeight: '60vh' }}>
        <div style={{ width: 72, height: 72, borderRadius: 999, background: 'var(--green)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20,
          boxShadow: '0 12px 32px rgba(22,163,74,0.3)' }}>
          <Icon name="check" size={36} color="#fff" />
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,
          color: 'var(--ink)' }}>Profile Updated!</div>
      </div>
    );
  }

  const fieldStyle = { width: '100%', padding: '13px 14px',
    fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 15,
    color: 'var(--ink)', background: 'var(--card)',
    border: '1.5px solid var(--line-2)', borderRadius: 12, outline: 'none',
    boxSizing: 'border-box', caretColor: 'var(--blue)' };

  return (
    <div>
      <InfoHeader title="Edit Profile" onBack={onBack} />

      {/* Avatar section */}
      <div style={{ padding: '24px 16px 8px', textAlign: 'center' }}>
        <div style={{ position: 'relative', display: 'inline-block', marginBottom: 16 }}>
          {avatar ? (
            <img src={avatar} alt="Avatar" style={{ width: 80, height: 80, borderRadius: '50%',
              objectFit: 'cover', border: '3px solid var(--gold)' }} />
          ) : (
            <div style={{ width: 80, height: 80, borderRadius: '50%',
              background: 'var(--card-2)', border: '3px solid var(--gold)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="user" size={34} color="var(--ink-3)" />
            </div>
          )}
          <span style={{ position: 'absolute', bottom: 0, right: -2, width: 28, height: 28,
            borderRadius: 999, background: 'var(--blue)', border: '3px solid var(--bg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="camera" size={13} color="#fff" />
          </span>
        </div>

        <div style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
          color: 'var(--ink-2)', marginBottom: 12 }}>Choose your avatar</div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginBottom: 4 }}>
          {AVATAR_OPTIONS.map(av => {
            const selected = avatar === av.url;
            return (
              <button key={av.id} onClick={() => onSetAvatar(av.url)}
                style={{ width: 56, height: 56, borderRadius: '50%', padding: 0, border: 'none',
                  cursor: 'pointer', position: 'relative', background: 'transparent' }}>
                <img src={av.url} alt="Avatar option" style={{ width: 56, height: 56,
                  borderRadius: '50%', objectFit: 'cover',
                  border: selected ? '3px solid var(--blue)' : '3px solid var(--line)',
                  opacity: selected ? 1 : 0.7,
                  transition: 'border-color 150ms, opacity 150ms' }} />
                {selected && (
                  <span style={{ position: 'absolute', bottom: -2, right: -2, width: 20, height: 20,
                    borderRadius: 999, background: 'var(--blue)', border: '2px solid var(--bg)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="check" size={11} color="#fff" />
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* Form fields */}
      <div style={{ padding: '16px 14px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Display Name */}
        <div>
          <label style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
            color: 'var(--ink-2)', display: 'block', marginBottom: 7 }}>Display Name</label>
          <input type="text" value={name} onChange={(e) => setName(e.target.value)}
            style={fieldStyle}
            onFocus={(e) => { e.target.style.borderColor = 'var(--blue)'; }}
            onBlur={(e) => { e.target.style.borderColor = 'var(--line-2)'; }} />
        </div>

        {/* Phone */}
        <div>
          <label style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
            color: 'var(--ink-2)', display: 'block', marginBottom: 7 }}>Phone Number (optional)</label>
          <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)}
            placeholder="+234 000 000 0000"
            style={fieldStyle}
            onFocus={(e) => { e.target.style.borderColor = 'var(--blue)'; }}
            onBlur={(e) => { e.target.style.borderColor = 'var(--line-2)'; }} />
        </div>

        {/* Email */}
        <div>
          <label style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
            color: 'var(--ink-2)', display: 'block', marginBottom: 7 }}>Email</label>
          <div style={{ ...fieldStyle, display: 'flex', alignItems: 'center', gap: 10,
            color: 'var(--ink-3)', background: 'var(--card-2)', cursor: 'default' }}>
            <span>user@betprince.com</span>
            <Icon name="lock" size={14} color="var(--ink-3)" style={{ marginLeft: 'auto' }} />
          </div>
        </div>

        {/* Country (read-only) */}
        <div>
          <label style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
            color: 'var(--ink-2)', display: 'block', marginBottom: 7 }}>Country</label>
          <div style={{ ...fieldStyle, display: 'flex', alignItems: 'center', gap: 10,
            color: 'var(--ink-3)', background: 'var(--card-2)', cursor: 'default' }}>
            <img src="https://flagcdn.com/w40/ng.png" alt="NG" style={{ width: 22, height: 15,
              objectFit: 'cover', borderRadius: 2 }} />
            <span>Nigeria</span>
            <Icon name="lock" size={14} color="var(--ink-3)" style={{ marginLeft: 'auto' }} />
          </div>
        </div>

        {/* Save button */}
        <button onClick={handleSave}
          style={{ width: '100%', padding: '15px', border: 'none', borderRadius: 14,
            cursor: 'pointer', fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 16,
            background: 'var(--blue)', color: '#fff', marginTop: 8,
            boxShadow: '0 8px 24px rgba(37,54,216,0.3)' }}>
          Save Changes
        </button>
      </div>
    </div>
  );
}

function MeScreen({ balance, onNavigate, theme, onToggleTheme, onDeposit, onWithdraw, onGoToBets, onTransactions, user, onLogout }) {
  const displayName = (user && user.name) || 'BetPrince User';
  const ctry = (user && user.country) || { code: 'NG', flag: 'ng' };
  return (
    <div>
      {/* Profile card */}
      <div onClick={() => onNavigate('editprofile')} style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer' }}>
        <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140,
          borderRadius: '50%', background: 'var(--gold)', opacity: 0.15 }} />
        <div style={{ padding: '24px 16px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
          {window.__bpAvatar ? (
            <img src={window.__bpAvatar} alt="Avatar" style={{ width: 56, height: 56, borderRadius: '50%',
              objectFit: 'cover', border: '3px solid var(--gold)' }} />
          ) : (
            <div style={{ width: 56, height: 56, borderRadius: '50%',
              background: 'var(--card-2)', border: '3px solid var(--gold)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="user" size={26} color="var(--ink-3)" />
            </div>
          )}
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18,
              color: 'var(--ink)' }}>{displayName}</div>
            <div style={{ fontFamily: 'var(--font-text)', fontSize: 13, color: 'var(--ink-3)',
              marginTop: 2 }}>Tap to edit profile</div>
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--card)',
            border: '1px solid var(--line)', borderRadius: 999, padding: '6px 12px' }}>
            <img src={`https://flagcdn.com/w40/${ctry.flag}.png`} alt={ctry.code} style={{ width: 20, height: 14,
              objectFit: 'cover', borderRadius: 2 }} />
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12,
              color: 'var(--ink-2)' }}>{ctry.code}</span>
          </span>
        </div>
      </div>

      {/* Balance card */}
      <div style={{ margin: '0 14px 6px', borderRadius: 16, overflow: 'hidden',
        background: 'linear-gradient(135deg, var(--card) 0%, var(--card-2) 100%)',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
        <div style={{ padding: '18px 18px 14px' }}>
          <div style={{ fontFamily: 'var(--font-text)', fontWeight: 800, fontSize: 11,
            letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 6 }}>
            Total Balance
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <span className="sb-num" style={{ fontWeight: 700, fontSize: 28, color: 'var(--ink)',
              letterSpacing: '-0.02em' }}>{fmtNGN(balance)}</span>
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12,
              color: 'var(--green)', background: 'rgba(22,163,74,0.1)', padding: '4px 10px',
              borderRadius: 999 }}>NGN</span>
          </div>
        </div>
        <div style={{ padding: '0 18px 14px' }}>
          <div style={{ background: 'var(--card-2)', borderRadius: 12, border: '1px solid var(--line)',
            padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11,
                letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Bonus Balance</div>
              <div style={{ fontFamily: 'var(--font-text)', fontSize: 12, color: 'var(--ink-3)', marginTop: 3 }}>
                Bonus is credited on first successful deposit.
              </div>
            </div>
            <span className="sb-num" style={{ fontWeight: 700, fontSize: 18, color: 'var(--ink-2)' }}>₦0.00</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, padding: '0 18px 18px' }}>
          <button onClick={onDeposit} style={{ flex: 1, background: 'var(--blue)', color: '#fff',
            border: 'none', borderRadius: 12, padding: '13px', fontFamily: 'var(--font-text)',
            fontWeight: 700, fontSize: 14.5, cursor: 'pointer' }}>Deposit</button>
          <button onClick={onWithdraw} style={{ flex: 1, background: 'var(--card-2)',
            color: 'var(--ink)', border: '1px solid var(--line-2)', borderRadius: 12, padding: '13px',
            fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14.5, cursor: 'pointer' }}>Withdraw</button>
        </div>
      </div>

      {/* Shortcuts */}
      <SectionTitle>Shortcuts</SectionTitle>
      <div style={{ display: 'flex', gap: 10, padding: '0 14px 4px' }}>
        {[
          { icon: 'receipt-text', label: 'Sports Bet\nHistory', color: 'var(--blue)', action: () => onGoToBets && onGoToBets() },
          { icon: 'arrow-left-right', label: 'Transactions', color: 'var(--blue)', action: () => onTransactions && onTransactions() },
          { icon: 'gift', label: 'Gifts', color: 'var(--blue)', action: () => onNavigate('gifts') },
        ].map((s, i) => (
          <button key={i} onClick={s.action} style={{ flex: 1, background: 'var(--card)', border: '1px solid var(--line)',
            borderRadius: 14, padding: '18px 8px 14px', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
            boxShadow: 'var(--shadow-card)' }}>
            <Icon name={s.icon} size={22} color={s.color} />
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 12.5,
              color: 'var(--ink)', textAlign: 'center', whiteSpace: 'pre-line', lineHeight: 1.3 }}>
              {s.label}
            </span>
          </button>
        ))}
      </div>

      {/* Account & Support */}
      <SectionTitle>Account &amp; Support</SectionTitle>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, margin: '0 14px' }}>
        <div style={{ borderRadius: 14, overflow: 'hidden',
          border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
          <MenuRow icon="headphones" label="Customer Service" color="var(--blue)"
            right={
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12,
                  color: 'var(--green)', background: 'rgba(22,163,74,0.1)', padding: '4px 10px',
                  borderRadius: 999 }}>Online 24/7</span>
                <Icon name="chevron-right" size={18} color="var(--ink-3)" />
              </span>
            } />
        </div>
        <div style={{ borderRadius: 14, overflow: 'hidden',
          border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
          <MenuRow icon="circle-help" label="How to Play" color="var(--blue)"
            onClick={() => onNavigate('howtoplay')} />
        </div>
        <div style={{ borderRadius: 14, overflow: 'hidden',
          border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
          <MenuRow icon="file-text" label="FAQ" color="var(--blue)"
            onClick={() => onNavigate('faq')} />
        </div>
      </div>

      {/* Appearance */}
      <SectionTitle>Preferences</SectionTitle>
      <div style={{ margin: '0 14px', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
        <MenuRow icon="sun-moon" label="Appearance" color="var(--blue)"
          right={
            <div style={{ display: 'flex', background: 'var(--card-2)', borderRadius: 10,
              border: '1px solid var(--line)', overflow: 'hidden' }}>
              {['Dark', 'Light'].map(m => (
                <button key={m} onClick={onToggleTheme}
                  style={{ padding: '8px 16px', border: 'none', cursor: 'pointer',
                    fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
                    background: theme === m.toLowerCase() ? 'var(--blue)' : 'transparent',
                    color: theme === m.toLowerCase() ? '#fff' : 'var(--ink-3)' }}>
                  {m}
                </button>
              ))}
            </div>
          } />
      </div>

      {/* Log out */}
      <div style={{ margin: '12px 14px 0', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
        <MenuRow icon="log-out" label="Log out" danger onClick={onLogout} />
      </div>

      <BPFooter onNavigate={onNavigate} />
    </div>
  );
}

/* ============================================================================
   FAQ SCREEN
   ============================================================================ */
const FAQ_DATA = [
  { q: 'How do I create an account?',
    a: 'Simply sign up on the BetPrince website using your basic details and verify your account.' },
  { q: 'Is BetPrince safe to use?',
    a: 'Yes, we implement security measures to protect user data and transactions. Users are also responsible for keeping their login details secure.' },
  { q: 'How fast are withdrawals?',
    a: 'Withdrawals are processed quickly and smoothly once all account requirements are completed.' },
  { q: 'Why is my withdrawal pending?',
    a: 'Your withdrawal may be pending due to:\n• Account verification\n• Security checks\n• Incomplete activity requirements' },
  { q: 'Do I need to complete any requirements before withdrawal?',
    a: 'Yes. In some cases, especially after a first win, users may need to complete a minimum activity level (such as deposit or betting cycles up to 3x) before withdrawals are enabled.' },
  { q: 'Can my account be restricted?',
    a: 'Yes. Accounts may be temporarily restricted if:\n• Rules are violated\n• Suspicious activity is detected\n• Required steps are not completed' },
  { q: 'Are there any fees?',
    a: 'Some transactions may include service or processing fees depending on account activity. All fees are communicated clearly before processing.' },
  { q: 'What happens if I break the rules?',
    a: 'Violation of platform rules may lead to:\n• Temporary account suspension\n• Delayed withdrawals\n• Permanent ban in serious cases' },
  { q: 'Can I have more than one account?',
    a: 'No. Multiple accounts are not allowed and will lead to suspension.' },
  { q: 'Who can use BetPrince?',
    a: 'Only individuals aged 18 years and above are allowed to use this platform.' },
];

function FAQItem({ item, index, open, onToggle }) {
  return (
    <div style={{ background: 'var(--card)', borderBottom: '1px solid var(--line)' }}>
      <button onClick={onToggle} style={{ display: 'flex', alignItems: 'center', gap: 12,
        width: '100%', padding: '16px', background: 'transparent', border: 'none',
        cursor: 'pointer', textAlign: 'left' }}>
        <span className="sb-num" style={{ width: 28, height: 28, borderRadius: 8, flexShrink: 0,
          background: open ? 'var(--blue)' : 'var(--card-2)',
          color: open ? '#fff' : 'var(--ink-3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 13 }}>{index + 1}</span>
        <span style={{ flex: 1, fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14.5,
          color: 'var(--ink)' }}>{item.q}</span>
        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={18} color="var(--ink-3)" />
      </button>
      {open && (
        <div style={{ padding: '0 16px 16px 56px' }}>
          <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
            lineHeight: 1.6, whiteSpace: 'pre-line' }}>
            {item.a}
          </div>
        </div>
      )}
    </div>
  );
}

function FAQScreen({ onBack }) {
  const [openIdx, setOpenIdx] = useState(null);
  return (
    <div>
      <InfoHeader title="FAQ" onBack={onBack} />
      <div style={{ padding: '16px 16px 12px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
          color: 'var(--ink)', marginBottom: 4 }}>Frequently Asked Questions</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-3)' }}>
          Answers to common questions about BetPrince account usage, withdrawals, and policies.
        </div>
      </div>
      <div style={{ margin: '0 14px 24px', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
        {FAQ_DATA.map((item, i) => (
          <FAQItem key={i} item={item} index={i} open={openIdx === i}
            onToggle={() => setOpenIdx(openIdx === i ? null : i)} />
        ))}
      </div>

      {/* Still need help? */}
      <div style={{ margin: '0 14px 24px', background: 'var(--blue-tint)', borderRadius: 14,
        padding: '20px', textAlign: 'center', border: '1px solid var(--line)' }}>
        <Icon name="headphones" size={28} color="var(--blue)" />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
          color: 'var(--ink)', margin: '10px 0 4px' }}>Still need help?</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 13, color: 'var(--ink-2)',
          marginBottom: 14 }}>Our support team is available 24/7</div>
        <button style={{ background: 'var(--blue)', color: '#fff', border: 'none',
          borderRadius: 10, padding: '12px 24px', fontFamily: 'var(--font-text)',
          fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>Contact Support</button>
      </div>
    </div>
  );
}

/* ============================================================================
   ABOUT US SCREEN
   ============================================================================ */
function AboutScreen({ onBack }) {
  return (
    <div>
      <InfoHeader title="About Us" onBack={onBack} />

      {/* Hero */}
      <div style={{ padding: '24px 16px 20px', textAlign: 'center' }}>
        <Wordmark size={26} />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
          color: 'var(--ink)', margin: '16px 0 6px' }}>About BetPrince</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
          lineHeight: 1.6, maxWidth: 340, margin: '0 auto' }}>
          BetPrince is a modern online betting platform built to provide users with a fast,
          simple, and engaging gaming experience.
        </div>
      </div>

      {/* What we deliver */}
      <SectionTitle>What We Deliver</SectionTitle>
      <div style={{ margin: '0 14px', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
        {[
          { icon: 'zap', label: 'Fast deposits and withdrawals', color: 'var(--gold-strong)' },
          { icon: 'trophy', label: 'Competitive odds across multiple sports', color: 'var(--blue)' },
          { icon: 'smartphone', label: 'Easy-to-use platform for mobile and desktop', color: 'var(--green)' },
          { icon: 'shield-check', label: 'Secure and monitored user accounts', color: 'var(--blue)' },
        ].map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14,
            padding: '14px 16px', background: 'var(--card)',
            borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
            <span style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--card-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={item.icon} size={18} color={item.color} />
            </span>
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 14.5,
              color: 'var(--ink)' }}>{item.label}</span>
          </div>
        ))}
      </div>

      {/* Mission */}
      <div style={{ margin: '20px 14px', borderRadius: 14, overflow: 'hidden',
        background: 'var(--blue-tint)', border: '1px solid var(--line)', padding: '20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <Icon name="target" size={20} color="var(--blue)" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17,
            color: 'var(--ink)' }}>Our Mission</span>
        </div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
          lineHeight: 1.6 }}>
          To provide a reliable and entertaining betting experience while maintaining
          transparency, fairness, and user satisfaction.
        </div>
      </div>

      {/* Responsible Gambling */}
      <SectionTitle>Responsible Gambling</SectionTitle>
      <div style={{ margin: '0 14px', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)', padding: '18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <span style={{ width: 38, height: 38, borderRadius: 12,
            background: 'rgba(239,68,68,0.1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="alert-triangle" size={18} color="var(--live)" />
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
            color: 'var(--ink)' }}>18+ Only</span>
        </div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
          lineHeight: 1.6, marginBottom: 14 }}>
          BetPrince is strictly for users aged 18 and above. We encourage all users to:
        </div>
        {[
          'Bet responsibly',
          'Avoid chasing losses',
          'Take breaks when needed',
        ].map((txt, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 0' }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--gold)',
              flexShrink: 0 }} />
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 14,
              color: 'var(--ink)' }}>{txt}</span>
          </div>
        ))}
      </div>

      {/* Transparency */}
      <SectionTitle>Transparency &amp; Fair Use</SectionTitle>
      <div style={{ margin: '0 14px 24px', borderRadius: 14, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)', padding: '18px' }}>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
          lineHeight: 1.6, marginBottom: 14 }}>
          We are committed to being open with our users:
        </div>
        {[
          'All rules and policies are clearly stated',
          'No hidden actions are taken on accounts',
          'Users are expected to follow platform guidelines',
          'Our system is designed to protect both the platform and genuine users',
        ].map((txt, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '7px 0' }}>
            <Icon name="check-circle" size={16} color="var(--green)"
              style={{ flexShrink: 0, marginTop: 2 }} />
            <span style={{ fontFamily: 'var(--font-text)', fontWeight: 500, fontSize: 14,
              color: 'var(--ink)', lineHeight: 1.4 }}>{txt}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================================
   TERMS & CONDITIONS SCREEN
   ============================================================================ */
const TERMS_DATA = [
  { title: '1. Eligibility', items: [
    'You must be 18 years or older to register and use this platform.',
    'By creating an account, you confirm that all information provided is accurate and truthful.',
    'Underage users are strictly prohibited and will have accounts permanently suspended.',
  ]},
  { title: '2. Account Usage', items: [
    'Each user is allowed one account only.',
    'Any attempt to create multiple accounts will result in suspension or termination.',
    'Users are responsible for maintaining the confidentiality of their login details.',
  ]},
  { title: '3. Deposits & Bonuses', items: [
    'All deposits must be made using valid payment methods owned by the user.',
    'Bonuses (if applicable) may come with wagering requirements before withdrawal.',
  ]},
  { title: '4. Withdrawal Policy', items: [
    'Withdrawals are processed quickly and smoothly once all requirements are met.',
    'For security and anti-fraud purposes, users may be required to verify identity and complete account activity requirements.',
    'After a first successful win, users may be required to complete a minimum activity level (for example, deposit or betting cycles up to 3x) before withdrawal is enabled.',
    'Any violation of this policy may result in temporary account restriction or delayed withdrawal processing.',
  ]},
  { title: '5. Fees & Charges', items: [
    'Certain transactions may attract service or processing fees, depending on user activity and account status.',
    'Fees are always communicated clearly before processing.',
    'We do not deduct hidden fees without notice.',
  ]},
  { title: '6. Responsible Gambling', items: [
    'Betting should be done for entertainment purposes only.',
    'Gambling can be addictive and users are encouraged to play responsibly.',
    'If you feel loss of control, please stop immediately.',
  ]},
  { title: '7. Prohibited Activities', sub: 'The following will lead to account suspension or permanent ban:', items: [
    'Fraudulent deposits or chargebacks.',
    'Use of bots or manipulation tools.',
    'Exploiting system errors.',
  ]},
  { title: '8. Account Suspension', sub: 'We reserve the right to:', items: [
    'Suspend accounts under investigation.',
    'Freeze funds during suspicious activity.',
    'Permanently ban users who violate rules.',
  ]},
  { title: '9. Limitation of Liability', sub: 'BetPrince is not responsible for:', items: [
    'Losses due to betting decisions.',
    'Technical interruptions.',
    'External payment delays.',
  ]},
  { title: '10. Changes to Terms', items: [
    'We may update these terms at any time. Continued use means acceptance of updated terms.',
  ]},
];

function TermsScreen({ onBack }) {
  return (
    <div>
      <InfoHeader title="Terms & Conditions" onBack={onBack} />
      <div style={{ padding: '16px 16px 8px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
          color: 'var(--ink)', marginBottom: 4 }}>Terms &amp; Conditions</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-3)',
          lineHeight: 1.5 }}>
          Welcome to BetPrince. By accessing or using our platform, you agree to comply with
          these terms and conditions.
        </div>
      </div>

      {TERMS_DATA.map((section, si) => (
        <div key={si} style={{ margin: '10px 14px', borderRadius: 14, overflow: 'hidden',
          border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)' }}>
          <div style={{ padding: '14px 16px 0' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
              color: 'var(--ink)', marginBottom: section.sub ? 4 : 8 }}>{section.title}</div>
            {section.sub && (
              <div style={{ fontFamily: 'var(--font-text)', fontSize: 13, color: 'var(--ink-3)',
                marginBottom: 8 }}>{section.sub}</div>
            )}
          </div>
          <div style={{ padding: '0 16px 14px' }}>
            {section.items.map((item, ii) => (
              <div key={ii} style={{ display: 'flex', alignItems: 'flex-start', gap: 10,
                padding: '7px 0' }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, marginTop: 7,
                  background: 'var(--blue)', flexShrink: 0 }} />
                <span style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
                  lineHeight: 1.55 }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      ))}

      {/* Last updated */}
      <div style={{ padding: '16px 16px 28px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 12, color: 'var(--ink-3)' }}>
          Last updated: June 2025
        </div>
      </div>
    </div>
  );
}

/* ============================================================================
   SHARED FOOTER
   ============================================================================ */
function BPFooter({ onNavigate }) {
  const BP_MARQUEE_IMGS = [
    'https://betlap.net/assets/images/footer-images/banner_1675531117_4452.png',
    'https://betlap.net/assets/images/footer-images/banner_1675531121_1345.png',
    'https://betlap.net/assets/images/footer-images/banner_1675531127_7830.png',
    'https://betlap.net/assets/images/footer-images/banner_1675531132_1567.png',
    'https://betlap.net/assets/images/footer-images/banner_1675531136_1617.png',
    'https://betlap.net/assets/images/footer-images/banner_1675531139_1978.png',
    'https://betlap.net/assets/images/footer-images/banner_etheruem.png',
    'https://betlap.net/assets/images/footer-images/banner_payyer.png',
    'https://betlap.net/assets/images/footer-images/banner_skrill.png',
    'https://betlap.net/assets/images/footer-images/banner_tether.png',
  ];
  const doubled = [...BP_MARQUEE_IMGS, ...BP_MARQUEE_IMGS];
  return (
    <div style={{ padding: '28px 16px 16px', textAlign: 'center',
      background: 'var(--blue)', borderRadius: '20px 20px 0 0', margin: '20px 0 0' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17,
        color: '#fff', marginBottom: 4 }}>
        Official Sports Betting Partner
      </div>
      <div style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 13,
        color: 'var(--gold)', marginBottom: 18 }}>
        The world's most exciting betting platform
      </div>
      <div style={{ overflow: 'hidden', margin: '0 -16px 18px', position: 'relative' }}>
        <div className="payment-marquee" style={{ display: 'flex', gap: 20, alignItems: 'center',
          animation: 'marqueeScroll 18s linear infinite', width: 'max-content' }}>
          {doubled.map((src, i) => (
            <img key={i} src={src} alt="" loading="lazy" style={{ height: 32, width: 'auto',
              opacity: 0.85, filter: 'brightness(1.1)' }} />
          ))}
        </div>
      </div>
      <div style={{ fontFamily: 'var(--font-text)', fontSize: 12, color: 'rgba(255,255,255,0.6)',
        lineHeight: 1.5, marginBottom: 16 }}>
        Age 18 and above only to register or play. Play Responsibly. Betting can be addictive
        and psychologically harmful. BetPrince is licensed by regulatory bodies as stated.
      </div>
      <div style={{ fontFamily: 'var(--font-text)', fontSize: 12, color: 'rgba(255,255,255,0.4)',
        marginBottom: 14 }}>
        WhatsApp Channel
      </div>
      {onNavigate && (
        <div style={{ display: 'flex', justifyContent: 'center', gap: 20 }}>
          <span onClick={() => onNavigate('faq')} style={{ fontFamily: 'var(--font-text)', fontWeight: 700,
            fontSize: 14, color: '#fff', textDecoration: 'underline',
            textUnderlineOffset: 3, cursor: 'pointer' }}>FAQ</span>
          <span onClick={() => onNavigate('about')} style={{ fontFamily: 'var(--font-text)', fontWeight: 700,
            fontSize: 14, color: '#fff', textDecoration: 'underline',
            textUnderlineOffset: 3, cursor: 'pointer' }}>About Us</span>
          <span onClick={() => onNavigate('terms')} style={{ fontFamily: 'var(--font-text)', fontWeight: 700,
            fontSize: 14, color: '#fff', textDecoration: 'underline',
            textUnderlineOffset: 3, cursor: 'pointer' }}>Terms</span>
        </div>
      )}
    </div>
  );
}

/* ============================================================================
   GIFTS SCREEN (empty state)
   ============================================================================ */
function GiftsScreen({ onBack, onGoHome }) {
  return (
    <div>
      <InfoHeader title="Gifts" onBack={onBack} />
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', padding: '60px 24px 40px', minHeight: 340 }}>
        <div style={{ width: 72, height: 72, borderRadius: '50%',
          background: 'var(--card-2)', border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
          <Icon name="gift" size={32} color="var(--ink-3)" />
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,
          color: 'var(--ink)', marginBottom: 8, textAlign: 'center' }}>
          No gifts available
        </div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-3)',
          textAlign: 'center', lineHeight: 1.5, maxWidth: 300 }}>
          Gift drops and promo rewards will appear here.
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 28, width: '100%', maxWidth: 320 }}>
          <button onClick={onGoHome} style={{ flex: 1, background: 'var(--gold)', color: 'var(--ink)',
            border: 'none', borderRadius: 12, padding: '13px', fontFamily: 'var(--font-text)',
            fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>Go to Home</button>
          <button onClick={onBack} style={{ flex: 1, background: 'var(--card)',
            color: 'var(--ink)', border: '1px solid var(--line)', borderRadius: 12, padding: '13px',
            fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>Back to Profile</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================================
   HOW TO PLAY SCREEN
   ============================================================================ */
const HTP_STEPS = [
  { num: '1', title: 'Create Your Account',
    text: 'Sign up with your phone number or email. Verify your identity to unlock all features.',
    icon: 'user-plus' },
  { num: '2', title: 'Make a Deposit',
    text: 'Go to Deposit and fund your wallet via Bank Transfer (Paystack) or Crypto. Minimum deposit is ₦50,000.',
    icon: 'wallet' },
  { num: '3', title: 'Pick Your Markets',
    text: 'Browse live and upcoming matches on the Sports tab. Tap an odd to add it to your bet slip. You can combine multiple selections into a multiple bet.',
    icon: 'target' },
  { num: '4', title: 'Place Your Bet',
    text: 'Open your bet slip, set your stake amount, and tap Place Bet. Your ticket is confirmed instantly.',
    icon: 'receipt-text' },
  { num: '5', title: 'Track & Cash Out',
    text: 'Monitor your open bets in the Bets tab. If a cash-out offer is available, you can settle early before the match ends.',
    icon: 'activity' },
  { num: '6', title: 'Withdraw Your Winnings',
    text: 'Go to Withdraw, select your bank or crypto wallet, and enter the amount. Withdrawals are processed in 5–30 minutes.',
    icon: 'banknote' },
];

function HowToPlayScreen({ onBack }) {
  return (
    <div>
      <InfoHeader title="How to Play" onBack={onBack} />

      <div style={{ padding: '20px 16px 10px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
          color: 'var(--ink)', marginBottom: 4 }}>How to Play</div>
        <div style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-3)',
          lineHeight: 1.5 }}>
          Get started in 6 simple steps.
        </div>
      </div>

      <div style={{ padding: '6px 14px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {HTP_STEPS.map((step, i) => (
          <div key={i} style={{ background: 'var(--card)', borderRadius: 14,
            border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)',
            padding: '16px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <span style={{ width: 40, height: 40, borderRadius: 12, flexShrink: 0,
              background: i === 0 ? 'var(--blue)' : 'var(--card-2)',
              color: i === 0 ? '#fff' : 'var(--blue)',
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={step.icon} size={18} />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span className="sb-num" style={{ fontWeight: 700, fontSize: 12,
                  color: 'var(--blue)', background: 'var(--blue-tint)',
                  padding: '2px 8px', borderRadius: 999 }}>Step {step.num}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 15,
                color: 'var(--ink)', marginBottom: 4 }}>{step.title}</div>
              <div style={{ fontFamily: 'var(--font-text)', fontSize: 13.5, color: 'var(--ink-2)',
                lineHeight: 1.55 }}>{step.text}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Tips */}
      <div style={{ margin: '0 14px 24px', background: 'var(--card)', borderRadius: 14,
        border: '1px solid var(--line)', boxShadow: 'var(--shadow-card)', padding: '18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <span style={{ width: 32, height: 32, borderRadius: 10,
            background: 'rgba(247,197,61,0.14)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="lightbulb" size={16} color="var(--gold-strong)" />
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16,
            color: 'var(--ink)' }}>Quick Tips</span>
        </div>
        {[
          'Use Load Code to import a friend\'s bet selections instantly.',
          'Multiple bets multiply your odds — higher risk, higher reward.',
          'Cash out locks in profit before the match ends.',
        ].map((tip, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10,
            padding: '7px 0' }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, marginTop: 7,
              background: 'var(--gold)', flexShrink: 0 }} />
            <span style={{ fontFamily: 'var(--font-text)', fontSize: 14, color: 'var(--ink-2)',
              lineHeight: 1.55 }}>{tip}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { InfoHeader, SectionTitle, MenuRow, MeScreen, EditProfileScreen, FAQScreen, AboutScreen, TermsScreen, GiftsScreen, HowToPlayScreen, BPFooter });