// screens-account.jsx — Group 6: Account & Settings (3 screens)

/* ── Screen 20: Account Overview ── */
function AccountScreen({ navigate, goBack }) {
  const menuSections = [
    { title:'Your account', items:[
      { icon:'ph-user-circle', label:'Profile & ID', sub:'Verified ✓', screen:'verification' },
      { icon:'ph-lock',        label:'Security',     sub:'2FA enabled', screen:null },
      { icon:'ph-bell',        label:'Notifications',sub:'All enabled', screen:null },
    ]},
    { title:'Money & bonuses', items:[
      { icon:'ph-arrow-down-left', label:'Deposit',    sub:'Add funds',          screen:'deposit' },
      { icon:'ph-arrow-up-right',  label:'Withdraw',   sub:'€1,325.83 available',screen:'withdrawal' },
      { icon:'ph-gift',            label:'Bonuses',    sub:'1 active bonus',     screen:'bonuses' },
      { icon:'ph-clock-clockwise', label:'History',    sub:'Transactions & bets',screen:'empty-states' },
    ]},
    { title:'Responsible gambling', items:[
      { icon:'ph-shield-check',  label:'RG Tools',      sub:'Limits & exclusion',  screen:'rg-hub' },
      { icon:'ph-hand',          label:'Trust & Safety', sub:'How we protect you', screen:'trust-safety' },
    ]},
    { title:'Help & legal', items:[
      { icon:'ph-question',         label:'Help Centre',  sub:null, screen:null },
      { icon:'ph-chat-circle',      label:'Live chat',    sub:'Usually replies in 2 min', screen:null },
      { icon:'ph-file-text',        label:'Terms & Conditions', sub:null, screen:null },
    ]},
  ];

  return (
    <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>
      {/* Profile header */}
      <div style={{ background:'var(--color-surface)', borderBottom:'1px solid var(--color-border)', padding:'20px 16px 16px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:16 }}>
          <div style={{ width:56, height:56, borderRadius:18, background:'var(--color-primary)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'#fff' }}>{USER.initials}</span>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:3 }}>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18, color:'var(--color-text-primary)' }}>{USER.name}</span>
              <span style={{ background:'rgba(39,196,132,0.15)', border:'1px solid rgba(39,196,132,0.3)', borderRadius:5, padding:'1px 6px', fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, color:'var(--color-success)' }}>Verified</span>
            </div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-muted)' }}>{USER.email}</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>Member since {USER.memberSince}</div>
          </div>
        </div>

        {/* Balance card */}
        <div style={{ borderRadius:14, background:'var(--color-bg)', border:'1px solid var(--color-border)', padding:'14px', marginBottom:14 }}>
          <div style={{ display:'flex', gap:12 }}>
            <div style={{ flex:1, textAlign:'center' }}>
              <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:4 }}>Real money</div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'var(--color-success)', fontVariantNumeric:'tabular-nums' }}>€{USER.realBalance.toFixed(2)}</div>
            </div>
            <div style={{ width:1, background:'var(--color-border)' }} />
            <div style={{ flex:1, textAlign:'center' }}>
              <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:4 }}>Bonus</div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'var(--color-warning)', fontVariantNumeric:'tabular-nums' }}>€{USER.bonusBalance.toFixed(2)}</div>
            </div>
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ display:'flex', gap:8 }}>
          {[['Deposit','ph-arrow-down-left','deposit','var(--color-primary)'],['Withdraw','ph-arrow-up-right','withdrawal',null],['History','ph-clock','empty-states',null]].map(([label,icon,screen,accent]) => (
            <button key={label} onClick={() => navigate(screen)} style={{ flex:1, height:44, borderRadius:11, background:accent?`${accent}15`:'var(--color-bg)', border:`1px solid ${accent?`${accent}40`:'var(--color-border)'}`, cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3 }}>
              <i className={`ph ${icon}`} style={{ fontSize:16, color:accent||'var(--color-text-secondary)' }} />
              <span style={{ fontFamily:'var(--font-body)', fontSize:10, fontWeight:500, color:accent||'var(--color-text-secondary)' }}>{label}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Menu sections */}
      <div style={{ padding:'12px 16px' }}>
        {menuSections.map(sec => (
          <div key={sec.title} style={{ marginBottom:20 }}>
            <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:8, padding:'0 2px' }}>{sec.title}</div>
            <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', overflow:'hidden' }}>
              {sec.items.map((item, i) => (
                <div key={item.label} onClick={() => item.screen && navigate(item.screen)} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 16px', borderBottom:i<sec.items.length-1?'1px solid var(--color-border-subtle)':undefined, cursor:item.screen?'pointer':'default' }}>
                  <div style={{ width:34, height:34, borderRadius:9, background:'var(--color-bg)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <i className={`ph ${item.icon}`} style={{ fontSize:17, color:'var(--color-text-secondary)' }} />
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{item.label}</div>
                    {item.sub && <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)' }}>{item.sub}</div>}
                  </div>
                  {item.screen && <i className="ph ph-caret-right" style={{ fontSize:14, color:'var(--color-text-muted)' }} />}
                </div>
              ))}
            </div>
          </div>
        ))}

        {/* Log out */}
        <button style={{ width:'100%', height:48, borderRadius:12, background:'none', border:'1px solid rgba(239,91,91,0.3)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:14, fontWeight:500, color:'var(--color-danger)', marginBottom:24 }}>
          Log out
        </button>
      </div>
    </div>
  );
}

/* ── Screen 21: Bonuses & Promotions Hub ── */
function BonusesScreen({ navigate, goBack }) {
  return (
    <React.Fragment>
      <BackHeader title="Bonuses & Promotions" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)' }}>

        {/* Active bonuses */}
        <div style={{ padding:'16px 16px 8px' }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>Active bonuses</div>
          {ACTIVE_BONUSES.map(bonus => (
            <div key={bonus.id} style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'16px', marginBottom:10 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:12 }}>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--color-text-primary)', marginBottom:3 }}>{bonus.name}</div>
                  <span style={{ background:'rgba(245,160,58,0.15)', border:'1px solid rgba(245,160,58,0.3)', borderRadius:5, padding:'2px 7px', fontFamily:'var(--font-body)', fontSize:10, fontWeight:600, color:'var(--color-warning)' }}>€{bonus.amount.toFixed(2)} bonus</span>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', marginBottom:2 }}>Expires</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:500, color:'var(--color-text-primary)' }}>{bonus.expires}</div>
                </div>
              </div>
              <div style={{ marginBottom:8 }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:5 }}>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)' }}>Wagering progress</span>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:12, color:'var(--color-text-primary)' }}>€{bonus.wagered} / €{bonus.total}</span>
                </div>
                <LimitBar pct={Math.round((bonus.wagered/bonus.total)*100)} />
              </div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:12 }}>€{bonus.total - bonus.wagered} wagering remaining to unlock funds</div>
              <button style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-primary)', fontWeight:500, padding:0 }}>How this works →</button>
            </div>
          ))}
        </div>

        {/* Available offers */}
        <div style={{ padding:'8px 16px' }}>
          <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>Available offers</div>
          {PROMOS.map(promo => (
            <div key={promo.id} style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', padding:'14px', marginBottom:10 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10 }}>
                <span style={{ background:`${promo.color}22`, border:`1px solid ${promo.color}55`, borderRadius:5, padding:'2px 7px', fontSize:9, fontWeight:700, color:promo.color }}>{promo.tag}</span>
                <div style={{ width:32, height:32, borderRadius:9, background:`${promo.color}15`, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <i className={`ph ${promo.icon}`} style={{ fontSize:16, color:promo.color }} />
                </div>
              </div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--color-text-primary)', marginBottom:4 }}>{promo.title}</div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)', lineHeight:1.5, marginBottom:10 }}>{promo.sub}</div>
              <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:12, padding:'8px 10px', background:'var(--color-bg)', borderRadius:8 }}>{promo.terms}</div>
              <button style={{ width:'100%', height:38, borderRadius:9, background:`${promo.color}18`, border:`1px solid ${promo.color}40`, cursor:'pointer', fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:promo.color }}>Opt in</button>
            </div>
          ))}
        </div>

        <div style={{ padding:'8px 16px 24px', textAlign:'center' }}>
          <button style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-primary)', fontWeight:500 }}>View offer history →</button>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ── Screen 22: Trust & Safety ── */
function TrustSafetyScreen({ navigate, goBack }) {
  const [openSection, setOpenSection] = React.useState(null);
  const sections = [
    { id:'money', title:'Money protection', icon:'ph-vault', content:'Your deposits are held in segregated accounts, separate from VantageBet operational funds. In the unlikely event of insolvency, your balance is protected and returned in full.' },
    { id:'fairness', title:'Game fairness', icon:'ph-dice-five', content:'All games use certified Random Number Generators (RNGs), independently audited by eCOGRA and iTech Labs. RTP values are accurate and verifiable.' },
    { id:'data', title:'Data & privacy', icon:'ph-lock', content:'Your personal data is processed in accordance with GDPR. We never sell your data to third parties. You can request a full export or deletion at any time.' },
    { id:'fraud', title:'Fraud prevention', icon:'ph-shield-warning', content:'We use industry-leading fraud detection to protect your account. Unusual activity triggers an automatic review. 3DS authentication is required for all card deposits.' },
    { id:'complaints', title:'Complaints & disputes', icon:'ph-chat-circle-dots', content:'Unresolved complaints can be escalated to the Malta Gaming Authority (MGA) or to eCOGRA as an Alternative Dispute Resolution (ADR) service — both free of charge.' },
  ];

  const regulators = [
    { name:'Malta Gaming Authority', logo:'MGA', code:'MGA/B2C/123/2024' },
    { name:'eCOGRA Certified',        logo:'eCOGRA', code:'Seal #12345' },
    { name:'UKGC Pending',            logo:'UKGC', code:'Application submitted' },
  ];

  return (
    <React.Fragment>
      <BackHeader title="Trust & Safety" onBack={goBack} />
      <div style={{ flex:1, overflowY:'auto', background:'var(--color-bg)', padding:'16px' }}>
        <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.6, marginBottom:20 }}>
          VantageBet is committed to operating a safe, fair, and transparent gambling environment. Here's how we protect you.
        </div>

        {/* Accordion */}
        <div style={{ background:'var(--color-surface)', borderRadius:14, border:'1px solid var(--color-border)', overflow:'hidden', marginBottom:20 }}>
          {sections.map((sec, i) => (
            <div key={sec.id}>
              <div onClick={() => setOpenSection(openSection===sec.id ? null : sec.id)} style={{ display:'flex', alignItems:'center', gap:12, padding:'14px 16px', cursor:'pointer', borderBottom:i<sections.length-1||openSection===sec.id?'1px solid var(--color-border-subtle)':undefined }}>
                <div style={{ width:34, height:34, borderRadius:9, background:'rgba(91,138,245,0.1)', border:'1px solid rgba(91,138,245,0.2)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                  <i className={`ph ${sec.icon}`} style={{ fontSize:17, color:'var(--color-primary)' }} />
                </div>
                <span style={{ flex:1, fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>{sec.title}</span>
                <i className={`ph ${openSection===sec.id?'ph-caret-up':'ph-caret-down'}`} style={{ fontSize:14, color:'var(--color-text-muted)' }} />
              </div>
              {openSection===sec.id && (
                <div style={{ padding:'12px 16px 14px', background:'var(--color-bg)', borderBottom:i<sections.length-1?'1px solid var(--color-border-subtle)':undefined }}>
                  <p style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)', lineHeight:1.6, margin:0 }}>{sec.content}</p>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Regulatory badges */}
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, fontWeight:600, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>Licences & certifications</div>
        <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:20 }}>
          {regulators.map(reg => (
            <div key={reg.name} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', background:'var(--color-surface)', borderRadius:12, border:'1px solid var(--color-border)', cursor:'pointer' }}>
              <div style={{ width:52, height:32, borderRadius:7, background:'var(--color-bg)', border:'1px solid var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, color:'var(--color-text-secondary)' }}>{reg.logo}</span>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:500, color:'var(--color-text-primary)' }}>{reg.name}</div>
                <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)' }}>{reg.code}</div>
              </div>
              <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-primary)', fontWeight:500 }}>View →</span>
            </div>
          ))}
        </div>

        <button style={{ width:'100%', height:44, borderRadius:12, background:'var(--color-surface)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)', marginBottom:24 }}>
          <i className="ph ph-download-simple" style={{ fontSize:14, marginRight:6 }} />
          Request your data
        </button>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { AccountScreen, BonusesScreen, TrustSafetyScreen });