// screens-final.jsx — Final Vault design.
// Option B (Earn Ladder) + Option C (Live ticker strip above lists).
// Light + dark for every screen. Inspired by Bonus Buddy data model.

const FT_LIGHT = {
  bg:'#F4F1EA', surface:'#FFFFFF', surface2:'#EDE8DD', surface3:'#1B1A17',
  ink:'#0E0E10', ink2:'#5A554C', ink3:'#8A8478', line:'#E5E0D6',
  accent:'#0E6E4F', accentInk:'#FFFFFF', warn:'#C2691A', danger:'#B23A3A', coin:'#C49B3C', info:'#23416E', violet:'#7A4DFF',
  fontDisplay:'"Geist", "Inter", sans-serif', fontBody:'"Inter", sans-serif', fontMono:'"JetBrains Mono", monospace',
};
const FT_DARK = {
  ...FT_LIGHT, bg:'#100F0D', surface:'#1A1815', surface2:'#23211D', surface3:'#000',
  ink:'#F4F1EA', ink2:'#9C9588', ink3:'#6B6558', line:'#2B2823', accent:'#3FB58A', accentInk:'#0F0E0C',
};
const ftTheme = dark => dark ? FT_DARK : FT_LIGHT;
const tn = { fontVariantNumeric: 'tabular-nums' };
const finr = n => '₹' + Number(n).toLocaleString('en-IN');

// ── Global animation stylesheet (one-time injection) ─────────────
(() => {
  if (typeof document === 'undefined' || document.getElementById('f-final-anims')) return;
  const s = document.createElement('style');
  s.id = 'f-final-anims';
  s.textContent = `
    @keyframes f-flame {
      0%,100% { transform: scale(1) rotate(-1deg); opacity: 1; }
      25%     { transform: scale(1.10) rotate(2deg); opacity: 0.92; }
      50%     { transform: scale(0.94) rotate(-2deg); opacity: 1; }
      75%     { transform: scale(1.07) rotate(1deg); opacity: 0.94; }
    }
    .f-flame { animation: f-flame 1.2s ease-in-out infinite; transform-origin: 50% 80%; display: inline-block; }

    @keyframes f-pulse-ring {
      0%,100% { transform: scale(1); opacity: 0.55; }
      50%     { transform: scale(2.6); opacity: 0; }
    }
    .f-pulse-ring { animation: f-pulse-ring 2s ease-out infinite; }

    @keyframes f-pulse-soft {
      0%,100% { transform: scale(1); opacity: 1; }
      50%     { transform: scale(1.06); opacity: 0.85; }
    }
    .f-pulse-soft { animation: f-pulse-soft 1.8s ease-in-out infinite; }

    @keyframes f-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .f-spin-slow { animation: f-spin-slow 18s linear infinite; }

    @keyframes f-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } }
    .f-shine-wrap { position: relative; overflow: hidden; isolation: isolate; }
    .f-shine-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 35%; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      animation: f-shine 3.4s ease-in-out infinite; mix-blend-mode: overlay;
    }

    @keyframes f-tick-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .f-tick-up { animation: f-tick-up 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }

    @keyframes f-coin {
      0%,100% { transform: rotateY(0deg) scale(1); }
      50%     { transform: rotateY(180deg) scale(1.05); }
    }
    .f-coin { animation: f-coin 2.4s ease-in-out infinite; display: inline-block; transform-style: preserve-3d; }

    @keyframes f-bell {
      0%, 60%, 100% { transform: rotate(0); }
      5%, 25%, 45%  { transform: rotate(-10deg); }
      15%, 35%      { transform: rotate(10deg); }
    }
    .f-bell { animation: f-bell 4s ease-in-out infinite; transform-origin: 50% 10%; display: inline-block; }

    @keyframes f-pop-in {
      from { transform: scale(0); opacity: 0; }
      60%  { transform: scale(1.18); opacity: 1; }
      to   { transform: scale(1); opacity: 1; }
    }
    .f-pop-in { animation: f-pop-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards; }

    @keyframes f-bolt {
      0%, 100% { transform: scale(1) rotate(-2deg); }
      50%      { transform: scale(1.18) rotate(4deg); }
    }
    .f-bolt { animation: f-bolt 1.4s ease-in-out infinite; display: inline-block; transform-origin: center; }

    @keyframes f-counter-roll {
      from { transform: translateY(60%); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    .f-counter-roll { animation: f-counter-roll 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; display: inline-block; }

    @keyframes f-stroke-fill { from { stroke-dashoffset: 201; } to { stroke-dashoffset: 80; } }
    .f-stroke-fill { animation: f-stroke-fill 1.5s cubic-bezier(0.25, 0.8, 0.3, 1) forwards; }

    @keyframes f-fire-glow {
      0%,100% { box-shadow: 0 0 0 0 currentColor; }
      50%     { box-shadow: 0 0 0 6px rgba(194, 105, 26, 0); }
    }

    @keyframes f-shimmer-x {
      0%   { background-position: -120% 0; }
      100% { background-position: 220% 0; }
    }
    .f-shimmer { background-size: 200% 100% !important; animation: f-shimmer-x 2.4s ease-in-out infinite; }

    @keyframes f-arrow-nudge {
      0%, 100% { transform: translateX(0); }
      50%      { transform: translateX(3px); }
    }
    .f-arrow-nudge { animation: f-arrow-nudge 1.4s ease-in-out infinite; display: inline-block; }

    @keyframes f-confetti {
      0%   { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1; }
      100% { transform: translate(var(--cx), var(--cy)) scale(0.4) rotate(360deg); opacity: 0; }
    }

    @keyframes f-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
    .f-rise { animation: f-rise 1.6s ease-out infinite; }

    @keyframes f-marker-pulse {
      0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
      70%     { box-shadow: 0 0 0 8px transparent; opacity: 0.95; }
    }
    .f-marker-pulse { animation: f-marker-pulse 1.6s ease-out infinite; }
  `;
  document.head.appendChild(s);
})();

// ── Sample data ─────────────────────────────────────────────────
const FOFFERS = [
  { id: 1, brand:'Zerodha',     cat:'KYC + Trade', amt:1250, time:12, hot:true,  tag:'2× boost', ladder:[{l:'Sign up',   v:50,  done:true}, {l:'Verify PAN', v:200, done:true}, {l:'Place trade', v:1000, done:false}] },
  { id: 2, brand:'Bajaj Brkg',  cat:'Activate',    amt:1250, time:15, hot:true,  tag:'Today only', ladder:[{l:'Open demat', v:100, done:false}, {l:'Activate F&O', v:400, done:false}, {l:'First trade', v:750, done:false}] },
  { id: 3, brand:'CoinSwitch',  cat:'KYC + Buy',   amt:850,  time:10, hot:true,  tag:'6h left', ladder:[{l:'Register', v:50, done:false}, {l:'KYC', v:300, done:false}, {l:'Buy ₹100',  v:500, done:false}] },
  { id: 4, brand:'Zebpay',      cat:'KYC + Trade', amt:760,  time:8,  hot:false, tag:'Crypto',  ladder:[{l:'Register', v:50, done:false}, {l:'KYC', v:200, done:false}, {l:'Trade',  v:510, done:false}] },
  { id: 5, brand:'Angel One',   cat:'Demat',       amt:400,  time:6,  hot:false, new:true,      ladder:[{l:'Sign up',   v:100, done:false}, {l:'Activate', v:300, done:false}] },
  { id: 6, brand:'Tide',        cat:'Account',     amt:300,  time:7,  hot:false, new:true,      ladder:[{l:'Sign up', v:80, done:false}, {l:'First payment', v:220, done:false}] },
  { id: 7, brand:'RapidRupee',  cat:'Registration',amt:50,   time:4,  hot:false, ladder:[{l:'Sign up', v:20, done:false}, {l:'Verify',  v:30, done:false}] },
  { id: 8, brand:'Story Max',   cat:'Install',     amt:18,   time:3,  hot:false, ladder:[{l:'Install + open',v:18, done:false}] },
  { id: 9, brand:'Rummy Twist', cat:'Gameplay',    amt:20,   time:5,  hot:false, ladder:[{l:'Install + play',v:20, done:false}] },
  { id:10, brand:'foundIt',     cat:'Registration',amt:18,   time:2,  hot:false, ladder:[{l:'Register',v:18, done:false}] },
  { id:11, brand:'Kuku TV',     cat:'Install',     amt:15,   time:2,  hot:false, ladder:[{l:'Install',v:15, done:false}] },
  { id:12, brand:'lendingPlate',cat:'Loan',        amt:51,   time:4,  hot:false, ladder:[{l:'Apply',v:25, done:false}, {l:'Approved', v:26, done:false}] },
];

const FTICKER = [
  { u:'priya_m',  amt:450,  brand:'Zerodha',    age:'2m'  },
  { u:'rohan_g',  amt:250,  brand:'Zebpay',     age:'4m'  },
  { u:'meera_p',  amt:1250, brand:'Bajaj Brkg', age:'6m'  },
  { u:'karan_v',  amt:18,   brand:'Story Max',  age:'7m'  },
  { u:'aditi_k',  amt:850,  brand:'CoinSwitch', age:'9m'  },
  { u:'nikhil_s', amt:400,  brand:'Angel One',  age:'11m' },
  { u:'sara_a',   amt:300,  brand:'Tide',       age:'13m' },
  { u:'arjun_p',  amt:51,   brand:'lendingP.',  age:'14m' },
];

// ── Brand mark ──────────────────────────────────────────────────
function FBrand({ name, size = 40, t, tone = 'vivid' }) {
  const initials = name.split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase().slice(0,2);
  const seed = name.charCodeAt(0) + name.charCodeAt(name.length-1);
  const tones = [
    { bg:'#1B1A17', fg:'#F4F1EA' },
    { bg: t.accent, fg: t.accentInk },
    { bg:'#23416E', fg:'#F4F1EA' },
    { bg:'#C2691A', fg:'#F4F1EA' },
    { bg:'#7A4DFF', fg:'#F4F1EA' },
    { bg:'#B23A3A', fg:'#F4F1EA' },
  ];
  const c = tone === 'mono' ? { bg: t.ink, fg: t.bg } : tones[seed % tones.length];
  return (
    <div style={{ width:size, height:size, borderRadius:8, background:c.bg, color:c.fg, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:t.fontDisplay, fontWeight:700, fontSize:size*0.34, letterSpacing:-0.4, flexShrink:0 }}>
      {initials}
    </div>
  );
}

// ── Live ticker strip (4 rows above any list) ───────────────────
function FTickerStrip({ t, rows = 4 }) {
  return (
    <div style={{ margin:'0 16px 12px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
      <div style={{ padding:'8px 12px', display:'flex', alignItems:'center', gap:8, borderBottom:`1px solid ${t.line}`, background:t.surface2 }}>
        <div style={{ position:'relative', width:6, height:6 }}>
          <div style={{ position:'absolute', inset:0, borderRadius:999, background:t.accent }} />
          <div className="f-pulse-ring" style={{ position:'absolute', inset:-3, borderRadius:999, background:t.accent }} />
        </div>
        <div style={{ fontSize:10, fontWeight:700, letterSpacing:1.4, color:t.ink, textTransform:'uppercase' }}>Live · earning now</div>
        <div style={{ flex:1 }} />
        <div style={{ fontSize:10, color:t.ink2, fontFamily:t.fontMono, ...tn }}>1,284 active</div>
      </div>
      {FTICKER.slice(0, rows).map((r, i, arr) => (
        <div key={i} className="f-tick-up" style={{ padding:'8px 12px', display:'flex', alignItems:'center', gap:10, borderBottom: i < arr.length-1 ? `1px solid ${t.line}` : 'none', animationDelay:`${i*70}ms` }}>
          <div style={{ width:22, height:22, borderRadius:999, background:t.surface2, color:t.ink, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:700, fontFamily:t.fontMono }}>{r.u[0].toUpperCase()}</div>
          <div style={{ flex:1, fontSize:11.5, color:t.ink2, minWidth:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
            <strong style={{ color:t.ink, fontFamily:t.fontMono, ...tn }}>{r.u}</strong> · {r.brand} · {r.age}
          </div>
          <div style={{ fontFamily:t.fontDisplay, fontWeight:700, color:t.accent, fontSize:13, ...tn }}>+{finr(r.amt)}</div>
        </div>
      ))}
    </div>
  );
}

// ── Ladder row (the core unit) ──────────────────────────────────
function FLadderRow({ t, o, onTap }) {
  const completed = o.ladder.filter(s => s.done).length;
  const pct = (completed / o.ladder.length) * 100;
  return (
    <div style={{ padding:'14px 20px', display:'flex', flexDirection:'column', gap:10, borderBottom:`1px solid ${t.line}` }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <FBrand t={t} name={o.brand} size={40} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <div style={{ fontFamily:t.fontDisplay, fontSize:14.5, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{o.brand}</div>
            {o.hot && <span style={{ padding:'1px 5px', background:`${t.warn}1A`, color:t.warn, fontSize:9, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>BOOST</span>}
            {o.new && <span style={{ padding:'1px 5px', background:`${t.accent}1A`, color:t.accent, fontSize:9, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>NEW</span>}
          </div>
          <div style={{ fontSize:11, color:t.ink2, marginTop:1 }}>{o.cat} · ~{o.time} min</div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:17, fontWeight:700, color:t.accent, letterSpacing:-0.3, ...tn }}>+{finr(o.amt)}</div>
          {completed > 0 && <div style={{ fontSize:9, color:t.ink3, marginTop:1, fontWeight:600 }}>{completed}/{o.ladder.length} done</div>}
        </div>
      </div>

      {/* Compact ladder */}
      <div style={{ display:'flex', alignItems:'center', gap:6, paddingLeft:52 }}>
        {o.ladder.map((s, i) => (
          <React.Fragment key={i}>
            <div style={{ display:'flex', alignItems:'center', gap:5 }}>
              <div style={{ width:14, height:14, borderRadius:999, background: s.done ? t.accent : 'transparent', border: s.done ? 'none' : `1.5px solid ${t.line}`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                {s.done && <i className="fa-solid fa-check" style={{ color:t.accentInk, fontSize:7 }} />}
              </div>
              <div style={{ fontFamily:t.fontMono, fontSize:10, color: s.done ? t.accent : t.ink3, fontWeight:700, ...tn }}>+{finr(s.v)}</div>
            </div>
            {i < o.ladder.length - 1 && <div style={{ flex:1, height:1.5, background: i < completed ? t.accent : t.line }} />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ── Compact list row (used in dense lists) ──────────────────────
function FCompactRow({ t, o }) {
  return (
    <div style={{ padding:'12px 20px', display:'flex', alignItems:'center', gap:12, borderBottom:`1px solid ${t.line}` }}>
      <FBrand t={t} name={o.brand} size={36} />
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontFamily:t.fontDisplay, fontSize:13.5, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{o.brand}</div>
        <div style={{ display:'flex', alignItems:'center', gap:4, marginTop:3 }}>
          {o.ladder.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ fontFamily:t.fontMono, fontSize:9.5, color: s.done ? t.accent : t.ink2, fontWeight:700, ...tn }}>₹{s.v}</div>
              {i < o.ladder.length-1 && <i className="fa-solid fa-arrow-right" style={{ fontSize:6, color:t.ink3 }} />}
            </React.Fragment>
          ))}
        </div>
      </div>
      <button style={{ height:30, padding:'0 12px', borderRadius:999, background:'transparent', border:`1.5px solid ${t.accent}`, color:t.accent, fontWeight:700, fontSize:11.5, fontFamily:t.fontBody, ...tn }}>+{finr(o.amt)}</button>
    </div>
  );
}

// ── Bottom nav ──────────────────────────────────────────────────
function FBottomNav({ t, active }) {
  const items = [
    { l:'Home',   i:'fa-house' },
    { l:'Earn',   i:'fa-bolt', anim:'f-bolt' },
    { l:'Wallet', i:'fa-wallet' },
    { l:'Ranks',  i:'fa-ranking-star' },
    { l:'Me',     i:'fa-user' },
  ];
  return (
    <div style={{ position:'absolute', bottom:0, left:0, right:0, height:76, background:t.surface, borderTop:`1px solid ${t.line}`, paddingBottom:18, display:'flex' }}>
      {items.map(it => {
        const isActive = it.l === active;
        return (
          <div key={it.l} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3, color: isActive ? t.ink : t.ink3, position:'relative' }}>
            {isActive && <div style={{ position:'absolute', top:6, width:24, height:3, borderRadius:999, background:t.accent }} />}
            <i className={`fa-solid ${it.i} ${isActive && it.anim ? it.anim : ''}`} style={{ fontSize:14 }} />
            <div style={{ fontSize:9.5, fontWeight: isActive ? 700 : 500 }}>{it.l}</div>
          </div>
        );
      })}
    </div>
  );
}

// ── Section label ───────────────────────────────────────────────
function FSec({ t, label, right, children }) {
  return (
    <>
      <div style={{ padding:'14px 20px 6px', display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink2, textTransform:'uppercase' }}>{label}</div>
        {right && <div style={{ fontSize:10.5, color:t.warn, fontWeight:700 }}>{right}</div>}
      </div>
      {children}
    </>
  );
}

// ═════════════════════════════════════════════════════════════════
// SCREENS
// ═════════════════════════════════════════════════════════════════

const FINAL = {
  Home({ dark }) {
    const t = ftTheme(dark);
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'6px 20px 14px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink2, textTransform:'uppercase' }}>Friday · 8 May</div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:600, color:t.ink, letterSpacing:-0.4, marginTop:2 }}>Hi, Aarav.</div>
          </div>
          <div style={{ display:'flex', gap:8 }}>
            <div style={{ width:36, height:36, borderRadius:999, background:t.surface, border:`1px solid ${t.line}`, display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
              <i className="fa-solid fa-bell f-bell" style={{ color:t.ink, fontSize:13 }} />
              <div className="f-pulse-soft" style={{ position:'absolute', top:8, right:9, width:6, height:6, borderRadius:999, background:t.warn }} />
            </div>
            <div style={{ width:36, height:36, borderRadius:999, background:t.ink, color:t.bg, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:t.fontDisplay, fontWeight:700, fontSize:13 }}>A</div>
          </div>
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:100 }} className="ph-scroll">
          {/* Hero carousel — auto-advancing banners */}
          <FHeroCarousel t={t} />

          {/* Quick action chips */}
          <FQuickChips t={t} />

          {/* Balance card */}
          <div style={{ margin:'12px 16px 0', padding:18, background:t.surface3, color:'#FFF', borderRadius:14, position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', right:-30, top:-30, width:160, height:160, borderRadius:999, background:t.accent, opacity:0.16 }} />
            <div style={{ display:'flex', alignItems:'center', gap:14, position:'relative' }}>
              <div style={{ width:76, height:76, position:'relative' }}>
                <svg viewBox="0 0 76 76" style={{ width:'100%', height:'100%' }}>
                  <circle cx="38" cy="38" r="32" fill="none" stroke="#FFFFFF20" strokeWidth="6" />
                  <circle className="f-stroke-fill" cx="38" cy="38" r="32" fill="none" stroke={t.accent} strokeWidth="6" strokeLinecap="round" strokeDasharray="201" strokeDashoffset="80" transform="rotate(-90 38 38)" />
                </svg>
                <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
                  <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:700, ...tn }}>60%</div>
                  <div style={{ fontSize:8, color:'#FFFFFFA0' }}>weekly</div>
                </div>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:'#FFFFFF80', textTransform:'uppercase' }}>Available · ₹2,000 goal</div>
                <div style={{ fontFamily:t.fontDisplay, fontSize:26, fontWeight:600, marginTop:2, ...tn, letterSpacing:-0.6 }}>₹1,184</div>
                <div style={{ fontSize:11, color:'#FFFFFFA0', marginTop:2 }}>+₹127 today · <span style={{ color:t.accent, fontWeight:700 }}>₹816 to go</span></div>
              </div>
            </div>
            <div style={{ display:'flex', gap:8, marginTop:14, position:'relative' }}>
              <button className="f-shine-wrap" style={{ flex:1, height:38, borderRadius:8, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:13 }}>Withdraw</button>
              <button style={{ flex:1, height:38, borderRadius:8, background:'transparent', border:'1px solid #FFFFFF26', color:'#FFF', fontWeight:600, fontSize:13 }}>Earn more</button>
            </div>
          </div>

          {/* Daily check-in compact ladder */}
          <FSec t={t} label="Daily check-in" right="Day 7 of 7">
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, padding:'14px 12px' }}>
              <div style={{ display:'flex', gap:6 }}>
                {[5, 10, 15, 20, 30, 50, 100].map((amt, i) => {
                  const done = i < 6, today = i === 6;
                  return (
                    <div key={i} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:4 }}>
                      <div style={{ width:'100%', aspectRatio:'1', borderRadius:7, background: today ? t.accent : done ? `${t.accent}1A` : t.surface2, border: today ? 'none' : `1px solid ${t.line}`, display:'flex', alignItems:'center', justifyContent:'center', color: today ? t.accentInk : done ? t.accent : t.ink3, fontSize:11, fontWeight:700, fontFamily:t.fontDisplay }}>
                        {done ? <i className="fa-solid fa-check" style={{ fontSize:10 }} /> : `₹${amt}`}
                      </div>
                      <div style={{ fontSize:8, color:t.ink3, fontWeight:600 }}>D{i+1}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </FSec>

          {/* Live ticker — the C strip */}
          <FSec t={t} label="Recent payouts">
            <FTickerStrip t={t} rows={4} />
          </FSec>

          {/* Featured ladder — the B hero */}
          <FSec t={t} label="Earn ₹1,250 today" right="2× boost · 5h left">
            <FFeatured t={t} o={FOFFERS[0]} />
          </FSec>

          {/* Quick wins */}
          <FSec t={t} label="Quick wins · under 5 min">
            <div style={{ padding:'4px 16px 6px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
              {FOFFERS.filter(o => o.time <= 5).slice(0, 4).map((o, i) => <FQuickCard key={o.id} t={t} o={o} idx={i} />)}
            </div>
          </FSec>

          {/* Top offers for you — 3-col tiles (BB style) */}
          <FSec t={t} label="Top offers for you" right={<span style={{ color:t.accent }}>View all →</span>}>
            <div style={{ padding:'4px 16px 6px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
              {FOFFERS.slice(0, 6).map((o, i) => <FBonusTile key={o.id} t={t} o={o} idx={i} />)}
            </div>
          </FSec>

          {/* High paying — 3-col */}
          <FSec t={t} label="High paying offers" right={<span style={{ color:t.accent }}>View all →</span>}>
            <div style={{ padding:'4px 16px 6px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
              {FOFFERS.filter(o => o.amt >= 300).slice(0, 6).map((o, i) => <FBonusTile key={o.id} t={t} o={o} idx={i} />)}
            </div>
          </FSec>

          {/* Fun gaming — 3-col */}
          <FSec t={t} label="Fun gaming offers" right={<span style={{ color:t.accent }}>View all →</span>}>
            <div style={{ padding:'4px 16px 6px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
              {[
                { id:'g1', brand:'Rummy Twist',  cat:'Gameplay', amt:20,  time:5, hot:false, ladder:[{l:'Play',v:20,done:false}],  game:'fa-dice'      },
                { id:'g2', brand:'Bus Rush',     cat:'Gameplay', amt:78,  time:6, hot:true,  ladder:[{l:'Win', v:78,done:false}],  game:'fa-bus'       },
                { id:'g3', brand:'Brain Test',   cat:'Gameplay', amt:498, time:8, hot:true,  ladder:[{l:'Lvl50',v:498,done:false}],game:'fa-brain'     },
                { id:'g4', brand:'Fusion Blocks',cat:'Gameplay', amt:142, time:6, hot:false, ladder:[{l:'Play',v:142,done:false}], game:'fa-cubes'     },
                { id:'g5', brand:'Modern Spin',  cat:'Gameplay', amt:142, time:5, hot:false, ladder:[{l:'Play',v:142,done:false}], game:'fa-circle-notch'},
                { id:'g6', brand:'Grumbl',       cat:'Gameplay', amt:23,  time:4, hot:false, ladder:[{l:'Play',v:23, done:false}], game:'fa-ghost'     },
              ].map((o, i) => <FBonusTile key={o.id} t={t} o={o} idx={i} />)}
            </div>
          </FSec>

          {/* All offers list */}
          <FSec t={t} label="All offers" right={<span style={{ color:t.accent, fontFamily:t.fontMono, ...tn }}>{FOFFERS.length}</span>}>
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              {FOFFERS.slice(0, 8).map((o, i, arr) => (
                <div key={o.id} className="f-tick-up" style={{ padding:'10px 12px', display:'flex', alignItems:'center', gap:10, borderBottom: i < arr.length-1 ? `1px solid ${t.line}` : 'none', animationDelay:`${i*35}ms` }}>
                  <FBrand t={t} name={o.brand} size={32} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.brand}</div>
                    <div style={{ fontSize:10, color:t.ink2, marginTop:1 }}>{o.cat} · ~{o.time}m</div>
                  </div>
                  <button className="f-shine-wrap" style={{ height:28, padding:'0 12px', borderRadius:999, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:11, fontFamily:t.fontBody, ...tn }}>Get +{finr(o.amt)}</button>
                </div>
              ))}
              <div style={{ padding:10, textAlign:'center', borderTop:`1px solid ${t.line}` }}>
                <button className="f-shine-wrap" style={{ height:36, padding:'0 22px', borderRadius:999, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:12 }}>View all offers</button>
              </div>
            </div>
          </FSec>
        </div>

        <FBottomNav t={t} active="Home" />
      </div>
    );
  },

  Earn({ dark }) {
    const t = ftTheme(dark);
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 12px', display:'flex', alignItems:'center', gap:10 }}>
          <i className="fa-solid fa-arrow-left" style={{ color:t.ink, fontSize:14 }} />
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:t.fontDisplay, fontSize:18, fontWeight:600, color:t.ink, letterSpacing:-0.3 }}>All offers</div>
            <div style={{ fontSize:11, color:t.ink2 }}>{FOFFERS.length} active · ₹4,212 earned today</div>
          </div>
          <i className="fa-solid fa-magnifying-glass" style={{ color:t.ink, fontSize:14, marginRight:12 }} />
          <i className="fa-solid fa-sliders" style={{ color:t.ink, fontSize:14 }} />
        </div>

        {/* Ticker strip — 4 rows above list */}
        <FTickerStrip t={t} rows={4} />

        {/* Filter chips */}
        <div style={{ display:'flex', gap:6, padding:'0 16px 12px', overflowX:'auto' }} className="ph-scroll">
          {[
            { k:'All', n:12, on:true },
            { k:'Boosted', n:3 },
            { k:'≤ 5 min', n:5 },
            { k:'High pay', n:4 },
            { k:'New', n:2 },
            { k:'KYC', n:3 },
            { k:'Crypto', n:2 },
          ].map((c, i) => (
            <div key={i} style={{ padding:'6px 12px', borderRadius:999, background: c.on ? t.ink : 'transparent', border: c.on ? 'none' : `1px solid ${t.line}`, color: c.on ? t.bg : t.ink, fontSize:12, fontWeight:600, whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
              {c.k} <span style={{ fontSize:10, opacity:0.6, ...tn }}>{c.n}</span>
            </div>
          ))}
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:100 }} className="ph-scroll">
          <div style={{ padding:'4px 20px 6px', display:'flex', justifyContent:'space-between' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink, textTransform:'uppercase' }}>Boosted now</div>
            <div style={{ fontFamily:t.fontMono, fontSize:10.5, color:t.warn, ...tn }}>05:42:18</div>
          </div>
          {FOFFERS.filter(o => o.hot).map(o => <FLadderRow key={o.id} t={t} o={o} />)}

          <div style={{ padding:'14px 20px 6px' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:t.ink2, textTransform:'uppercase' }}>For you</div>
          </div>
          {FOFFERS.filter(o => !o.hot).slice(0, 8).map(o => <FLadderRow key={o.id} t={t} o={o} />)}
        </div>

        <FBottomNav t={t} active="Earn" />
      </div>
    );
  },

  Wallet({ dark }) {
    const t = ftTheme(dark);
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 12px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:600, color:t.ink, letterSpacing:-0.4 }}>Wallet</div>
          <i className="fa-solid fa-circle-info" style={{ color:t.ink2, fontSize:16 }} />
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:100 }} className="ph-scroll">
          {/* Balance */}
          <div style={{ margin:'0 16px', padding:'18px 18px 16px', background:t.surface3, color:'#FFF', borderRadius:14, position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', right:-30, top:-30, width:160, height:160, borderRadius:999, background:t.accent, opacity:0.16 }} />
            <div style={{ position:'relative' }}>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:'#FFFFFF80', textTransform:'uppercase' }}>Available balance</div>
              <div style={{ fontFamily:t.fontDisplay, fontSize:36, fontWeight:600, letterSpacing:-1.2, marginTop:4, ...tn }}>₹1,184</div>
              <div style={{ fontSize:11, color:'#FFFFFFA0', marginTop:2 }}>14,200 coins · 12 gems</div>
              <div style={{ display:'flex', gap:8, marginTop:14 }}>
                <button className="f-shine-wrap" style={{ flex:1, height:38, borderRadius:8, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:13 }}>Withdraw</button>
                <button style={{ flex:1, height:38, borderRadius:8, background:'transparent', border:'1px solid #FFFFFF26', color:'#FFF', fontWeight:600, fontSize:13 }}>Send</button>
              </div>
            </div>
          </div>

          {/* Pending earnings ladder */}
          <FSec t={t} label="Pending · tracking" right="₹1,250 in flight">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              {[
                { brand:'Zerodha',  amt:200, status:'Tracked', stage:'Day 2 of 30' },
                { brand:'Zebpay',   amt:760, status:'Pending', stage:'Awaiting confirmation' },
                { brand:'Bajaj',    amt:290, status:'In review', stage:'Submitted 4h ago' },
              ].map((p, i, arr) => (
                <div key={i} style={{ padding:'10px 0', display:'flex', alignItems:'center', gap:12, borderBottom: i < arr.length-1 ? `1px solid ${t.line}` : 'none' }}>
                  <FBrand t={t} name={p.brand} size={32} />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{p.brand}</div>
                    <div style={{ fontSize:10.5, color:t.ink2, marginTop:1 }}>{p.status} · {p.stage}</div>
                  </div>
                  <div style={{ fontFamily:t.fontDisplay, fontSize:14, fontWeight:700, color:t.ink, ...tn }}>{finr(p.amt)}</div>
                </div>
              ))}
            </div>
          </FSec>

          {/* Live ticker */}
          <FSec t={t} label="Recent payouts · live">
            <FTickerStrip t={t} rows={4} />
          </FSec>

          {/* Transaction history */}
          <FSec t={t} label="History">
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              {[
                { type:'Withdraw', sub:'To HDFC ••2389',     amt:-2500, when:'Today, 11:40', icon:'fa-arrow-up-right-from-square', dir:'out' },
                { type:'Earned',   sub:'Zerodha · stage 2',  amt:200,   when:'Today, 09:18', icon:'fa-bolt',                       dir:'in'  },
                { type:'Earned',   sub:'Daily streak · D7',  amt:100,   when:'Today, 08:01', icon:'fa-fire',                       dir:'in'  },
                { type:'Earned',   sub:'Trivia · 5/5',       amt:25,    when:'Yesterday',    icon:'fa-question',                   dir:'in'  },
                { type:'Withdraw', sub:'To HDFC ••2389',     amt:-1000, when:'Mon, 6 May',   icon:'fa-arrow-up-right-from-square', dir:'out' },
              ].map((x, i, arr) => (
                <div key={i} style={{ padding:'12px 14px', display:'flex', alignItems:'center', gap:12, borderBottom: i < arr.length-1 ? `1px solid ${t.line}` : 'none' }}>
                  <div style={{ width:32, height:32, borderRadius:8, background: x.dir==='in' ? `${t.accent}1A` : t.surface2, color: x.dir==='in' ? t.accent : t.ink2, display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <i className={`fa-solid ${x.icon}`} style={{ fontSize:13 }} />
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{x.type}</div>
                    <div style={{ fontSize:10.5, color:t.ink2, marginTop:1 }}>{x.sub} · {x.when}</div>
                  </div>
                  <div style={{ fontFamily:t.fontDisplay, fontSize:14, fontWeight:700, color: x.amt > 0 ? t.accent : t.ink, ...tn }}>{x.amt > 0 ? '+' : ''}{finr(x.amt)}</div>
                </div>
              ))}
            </div>
          </FSec>
        </div>

        <FBottomNav t={t} active="Wallet" />
      </div>
    );
  },

  Ranks({ dark }) {
    const t = ftTheme(dark);
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ padding:'8px 20px 14px' }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:600, color:t.ink, letterSpacing:-0.4 }}>Ranks</div>
          <div style={{ fontSize:11, color:t.ink2, marginTop:2 }}>Climb to unlock multipliers</div>
        </div>

        <div style={{ flex:1, overflowY:'auto', paddingBottom:100 }} className="ph-scroll">
          {/* Tier ladder */}
          <div style={{ margin:'0 16px 6px', padding:18, background:t.surface3, color:'#FFF', borderRadius:14, position:'relative', overflow:'hidden' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:1.6, color:'#FFFFFF80', textTransform:'uppercase' }}>Your tier</div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:24, fontWeight:600, marginTop:4 }}>Silver · 1.1×</div>
            <div style={{ marginTop:14, display:'flex', alignItems:'center' }}>
              {[
                { l:'Bronze',   v:'1.0×', done:true },
                { l:'Silver',   v:'1.1×', done:true, here:true },
                { l:'Gold',     v:'1.25×', done:false },
                { l:'Platinum', v:'1.5×', done:false },
                { l:'Diamond',  v:'2.0×', done:false },
              ].map((s, i, arr) => (
                <React.Fragment key={i}>
                  <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4, flexShrink:0 }}>
                    <div style={{ width:s.here ? 36 : 24, height:s.here ? 36 : 24, borderRadius:999, background: s.done ? t.accent : '#FFFFFF20', color: s.here ? t.accentInk : '#FFF', display:'flex', alignItems:'center', justifyContent:'center', border: s.here ? `2px solid #FFF` : 'none' }}>
                      <i className={`fa-solid ${['fa-medal','fa-medal','fa-award','fa-crown','fa-gem'][i]}`} style={{ fontSize: s.here ? 14 : 10 }} />
                    </div>
                    <div style={{ fontSize:9, color: s.here ? '#FFF' : '#FFFFFFA0', fontWeight: s.here ? 700 : 500 }}>{s.l}</div>
                    <div style={{ fontSize:8.5, color: s.here ? t.accent : '#FFFFFF60', fontFamily:t.fontMono, ...tn }}>{s.v}</div>
                  </div>
                  {i < arr.length-1 && <div style={{ flex:1, height:2, background: i < 1 ? t.accent : '#FFFFFF20', marginTop:-22 }} />}
                </React.Fragment>
              ))}
            </div>
            <div style={{ marginTop:14, fontSize:11, color:'#FFFFFFA0' }}>
              <strong style={{ color:t.accent }}>₹816 more</strong> to unlock Gold (1.25× on every offer).
            </div>
          </div>

          {/* Live activity ticker — rank changes */}
          <FSec t={t} label="Live · climbing now">
            <FTickerStrip t={t} rows={4} />
          </FSec>

          {/* Leaderboard */}
          <FSec t={t} label="This week · top earners">
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              {[
                { r:1, u:'priya_m', a:18450, d:'+₹2,400', tier:'Diamond' },
                { r:2, u:'rohan_g', a:14210, d:'+₹1,820', tier:'Diamond' },
                { r:3, u:'meera_p', a:12080, d:'+₹1,540', tier:'Platinum' },
                { r:42, u:'aarav_k (you)', a:1184, d:'+₹127', tier:'Silver', me:true },
                { r:43, u:'karan_v', a:1140, d:'+₹120', tier:'Silver' },
              ].map((row, i, arr) => (
                <div key={i} style={{ padding:'12px 14px', display:'flex', alignItems:'center', gap:12, borderBottom: i < arr.length-1 ? `1px solid ${t.line}` : 'none', background: row.me ? `${t.accent}10` : 'transparent' }}>
                  <div style={{ width:28, fontFamily:t.fontMono, fontSize:13, fontWeight:700, color: row.r <= 3 ? t.coin : t.ink2, ...tn }}>#{row.r}</div>
                  <div style={{ width:32, height:32, borderRadius:999, background:t.surface2, color:t.ink, display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700, fontFamily:t.fontMono }}>{row.u[0].toUpperCase()}</div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:600, color:t.ink, letterSpacing:-0.2 }}>{row.u}</div>
                    <div style={{ fontSize:10, color:t.ink2 }}>{row.tier}</div>
                  </div>
                  <div style={{ textAlign:'right' }}>
                    <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:700, color:t.ink, ...tn }}>{finr(row.a)}</div>
                    <div style={{ fontSize:10, color:t.accent, fontWeight:600, ...tn }}>{row.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </FSec>
        </div>

        <FBottomNav t={t} active="Ranks" />
      </div>
    );
  },

  Profile({ dark }) {
    const t = ftTheme(dark);
    const Row = ({ icon, label, sub, right, danger, color }) => (
      <div style={{ padding:'14px 16px', display:'flex', alignItems:'center', gap:12, borderBottom:`1px solid ${t.line}` }}>
        <div style={{ width:34, height:34, borderRadius:8, background: color ? `${color}1A` : t.surface2, color: color || t.ink2, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <i className={`fa-solid ${icon}`} style={{ fontSize:13 }} />
        </div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:14, fontWeight:600, color: danger ? t.danger : t.ink, letterSpacing:-0.2 }}>{label}</div>
          {sub && <div style={{ fontSize:11, color:t.ink2, marginTop:1 }}>{sub}</div>}
        </div>
        {right && <div style={{ fontSize:11.5, color:t.ink2 }}>{right}</div>}
        <i className="fa-solid fa-chevron-right" style={{ color:t.ink3, fontSize:11 }} />
      </div>
    );
    return (
      <div style={{ height:'100%', background:t.bg, fontFamily:t.fontBody, display:'flex', flexDirection:'column' }}>
        <div style={{ height:54 }} />
        <div style={{ flex:1, overflowY:'auto', paddingBottom:100 }} className="ph-scroll">
          {/* Profile head */}
          <div style={{ padding:'8px 20px 18px', display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
            <div style={{ width:64, height:64, borderRadius:999, background:t.ink, color:t.bg, display:'flex', alignItems:'center', justifyContent:'center', fontFamily:t.fontDisplay, fontWeight:700, fontSize:22 }}>A</div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:18, fontWeight:600, color:t.ink, letterSpacing:-0.3 }}>Aarav Kapoor</div>
            <div style={{ fontSize:11, color:t.ink2 }}>Member since Jan 2026 · Silver tier</div>
          </div>

          {/* Stats */}
          <div style={{ padding:'0 16px 14px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
            {[
              { l:'Total earned', v:'₹14,820' },
              { l:'Streak',       v:'7 days'  },
              { l:'Rank',         v:'#42'     },
            ].map((s, i) => (
              <div key={i} style={{ padding:'12px 10px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:10, textAlign:'left' }}>
                <div style={{ fontSize:10, fontWeight:700, letterSpacing:1.4, color:t.ink2, textTransform:'uppercase' }}>{s.l}</div>
                <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:700, color:t.ink, marginTop:3, letterSpacing:-0.3, ...tn }}>{s.v}</div>
              </div>
            ))}
          </div>

          {/* KYC ladder */}
          <FSec t={t} label="KYC · 60% done" right="Unlock ₹50,000 limit">
            <div style={{ margin:'0 16px', padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12 }}>
              <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                {[
                  { l:'Phone',   done:true },
                  { l:'PAN',     done:true },
                  { l:'Aadhaar', done:true },
                  { l:'Face',    done:false, here:true },
                  { l:'Bank',    done:false },
                ].map((s, i, arr) => (
                  <React.Fragment key={i}>
                    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:5, flexShrink:0 }}>
                      <div style={{ width: s.here ? 28 : 22, height: s.here ? 28 : 22, borderRadius:999, background: s.done ? t.accent : s.here ? t.surface : 'transparent', border: s.done ? 'none' : `2px solid ${s.here ? t.accent : t.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
                        {s.done ? <i className="fa-solid fa-check" style={{ color:t.accentInk, fontSize:10 }} /> : <span style={{ fontSize:10, fontWeight:800, color: s.here ? t.accent : t.ink3 }}>{i+1}</span>}
                      </div>
                      <div style={{ fontSize:9, color: s.done ? t.accent : s.here ? t.accent : t.ink3, fontWeight:600 }}>{s.l}</div>
                    </div>
                    {i < arr.length-1 && <div style={{ flex:1, height:2, background: i < 2 ? t.accent : t.line, marginTop:-14 }} />}
                  </React.Fragment>
                ))}
              </div>
              <button style={{ width:'100%', marginTop:14, height:38, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:13 }}>Continue · face capture</button>
            </div>
          </FSec>

          {/* Account */}
          <FSec t={t} label="Account">
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              <Row icon="fa-id-card"     label="Personal info"    sub="Name, email, DOB" />
              <Row icon="fa-shield-halved" label="Security"        sub="PIN, biometric, 2FA" />
              <Row icon="fa-building-columns" label="Bank account" sub="HDFC ••2389"  color={t.info} />
              <Row icon="fa-receipt"     label="Tax · TDS"          sub="Auto · ₹0 deducted"  />
            </div>
          </FSec>

          <FSec t={t} label="App">
            <div style={{ margin:'0 16px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              <Row icon="fa-bell"      label="Notifications"  sub="Daily reminders, payout alerts" />
              <Row icon="fa-language"  label="Language"       right="English" />
              <Row icon="fa-moon"      label="Theme"          right="System" />
              <Row icon="fa-circle-question" label="Help & support" />
            </div>
          </FSec>

          <FSec t={t} label="Danger zone">
            <div style={{ margin:'0 16px 24px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, overflow:'hidden' }}>
              <Row icon="fa-arrow-right-from-bracket" label="Sign out"      color={t.warn} />
              <Row icon="fa-trash"                    label="Delete account" danger color={t.danger} />
            </div>
          </FSec>
        </div>
        <FBottomNav t={t} active="Me" />
      </div>
    );
  },
};

// ── Featured ladder card (hero offer on Home) ────────────────────
function FFeatured({ t, o }) {
  return (
    <div className="f-tick-up" style={{ margin:'0 16px', padding:16, background:t.surface, border:`1px solid ${t.line}`, borderRadius:14, animationDelay:'80ms' }}>
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:14 }}>
        <FBrand t={t} name={o.brand} size={48} />
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <div style={{ fontFamily:t.fontDisplay, fontSize:16, fontWeight:700, color:t.ink, letterSpacing:-0.3 }}>{o.brand}</div>
            <span style={{ padding:'1px 5px', background:`${t.warn}1A`, color:t.warn, fontSize:9, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>2× BOOST</span>
          </div>
          <div style={{ fontSize:11, color:t.ink2, marginTop:1 }}>{o.cat} · ~{o.time} min · {o.ladder.length} stages</div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:20, fontWeight:700, color:t.accent, letterSpacing:-0.4, ...tn }}>+{finr(o.amt)}</div>
          <div style={{ fontSize:9, color:t.ink3, textDecoration:'line-through', marginTop:1, ...tn }}>was ₹625</div>
        </div>
      </div>

      {/* Detailed ladder */}
      <div style={{ position:'relative', display:'flex', justifyContent:'space-between', padding:'4px 0 14px' }}>
        <div style={{ position:'absolute', left:14, right:14, top:18, height:2, background:t.line }} />
        <div style={{ position:'absolute', left:14, top:18, height:2, width:`${(o.ladder.filter(s=>s.done).length / o.ladder.length) * 60}%`, background:t.accent }} />
        {o.ladder.map((s, i) => (
          <div key={i} style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:4, width:`${100/o.ladder.length}%` }}>
            <div style={{ width:28, height:28, borderRadius:999, background: s.done ? t.accent : t.surface, border: s.done ? 'none' : `2px solid ${t.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
              {s.done ? <i className="fa-solid fa-check" style={{ color:t.accentInk, fontSize:11 }} /> : <span style={{ fontSize:11, fontWeight:800, color:t.ink2, ...tn }}>{i+1}</span>}
            </div>
            <div style={{ fontFamily:t.fontDisplay, fontSize:13, fontWeight:700, color: s.done ? t.accent : t.ink, ...tn }}>+{finr(s.v)}</div>
            <div style={{ fontSize:9, color:t.ink3, fontWeight:600, textAlign:'center' }}>{s.l}</div>
          </div>
        ))}
      </div>

      <button className="f-shine-wrap" style={{ width:'100%', height:42, borderRadius:10, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:13 }}>Continue earning <span className="f-arrow-nudge">→</span></button>
    </div>
  );
}

function FQuickCard({ t, o, idx = 0 }) {
  return (
    <div className="f-tick-up" style={{ padding:12, background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, animationDelay:`${60 + idx*50}ms` }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
        <FBrand t={t} name={o.brand} size={32} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily:t.fontDisplay, fontSize:12.5, fontWeight:600, color:t.ink, letterSpacing:-0.2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.brand}</div>
          <div style={{ fontSize:9.5, color:t.ink2 }}>~{o.time} min</div>
        </div>
      </div>
      <div style={{ fontFamily:t.fontDisplay, fontSize:18, fontWeight:700, color:t.accent, letterSpacing:-0.3, ...tn }}>+{finr(o.amt)}</div>
      <div style={{ fontSize:9.5, color:t.ink3, marginTop:2 }}>{o.cat}</div>
    </div>
  );
}

// ── Big tile (homepage offers, ladder embedded) ─────────────────
function FBigTile({ t, o, idx = 0 }) {
  const completed = o.ladder.filter(s => s.done).length;
  return (
    <div className="f-tick-up" style={{ padding:14, background:t.surface, border:`1px solid ${t.line}`, borderRadius:13, animationDelay:`${100 + idx*70}ms`, position:'relative', overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:10 }}>
        <FBrand t={t} name={o.brand} size={38} />
        {o.hot && <span className="f-shimmer" style={{ padding:'2px 6px', background:`linear-gradient(90deg, ${t.warn}1A, ${t.warn}33, ${t.warn}1A)`, color:t.warn, fontSize:8.5, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>BOOST</span>}
        {o.new && <span style={{ padding:'2px 6px', background:`${t.accent}1A`, color:t.accent, fontSize:8.5, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>NEW</span>}
      </div>
      <div style={{ fontFamily:t.fontDisplay, fontSize:13.5, fontWeight:600, color:t.ink, letterSpacing:-0.2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.brand}</div>
      <div style={{ fontSize:10.5, color:t.ink2, marginTop:1 }}>{o.cat} · ~{o.time}m</div>
      <div style={{ fontFamily:t.fontDisplay, fontSize:22, fontWeight:700, color:t.accent, letterSpacing:-0.5, marginTop:8, ...tn }}>+{finr(o.amt)}</div>
      {/* Embedded mini ladder */}
      <div style={{ display:'flex', alignItems:'center', gap:4, marginTop:10 }}>
        {o.ladder.map((s, i) => (
          <React.Fragment key={i}>
            <div className={s.done ? 'f-pop-in' : ''} style={{ width:10, height:10, borderRadius:999, background: s.done ? t.accent : 'transparent', border: s.done ? 'none' : `1.5px solid ${t.line}`, flexShrink:0, animationDelay: s.done ? `${300 + i*80}ms` : '0ms' }} />
            {i < o.ladder.length-1 && <div style={{ flex:1, height:1.5, background: i < completed ? t.accent : t.line }} />}
          </React.Fragment>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:8 }}>
        <span style={{ fontSize:10, color:t.ink3, fontWeight:600 }}>{o.ladder.length} stages</span>
        <span style={{ fontSize:10.5, color:t.accent, fontWeight:700 }}>Start <span className="f-arrow-nudge">→</span></span>
      </div>
    </div>
  );
}

// ── Hero carousel (auto-advancing banners with dots) ────────────
function FHeroCarousel({ t }) {
  const [i, setI] = React.useState(0);
  const slides = [
    { tag:'New · FD-style returns', title:'Earn ₹51 daily', sub:'Lock coins · 5% bonus', cta:'Try now', bg:`linear-gradient(135deg, ${t.accent}, ${t.accent}cc)`, icon:'fa-piggy-bank', anim:'f-coin' },
    { tag:'Boost · 5h left',        title:'Zerodha · ₹1,250', sub:'2× boost on every stage', cta:'Earn now', bg:`linear-gradient(135deg, #1B1A17, ${t.surface3})`, icon:'fa-bolt', anim:'f-bolt' },
    { tag:'Daily · streak D7',      title:'Claim ₹100 free',  sub:'Don\u2019t break the chain',   cta:'Claim',   bg:`linear-gradient(135deg, #C2691A, #d8843a)`, icon:'fa-fire', anim:'f-flame' },
    { tag:'Refer · ₹50 each',       title:'Invite friends',   sub:'Both get ₹50 instantly',     cta:'Share',   bg:`linear-gradient(135deg, #7A4DFF, #9b75ff)`, icon:'fa-gift', anim:'f-pulse-soft' },
  ];
  React.useEffect(() => { const id = setInterval(() => setI(p => (p+1) % slides.length), 4000); return () => clearInterval(id); }, []);
  return (
    <div style={{ margin:'0 16px 4px' }}>
      <div style={{ position:'relative', height:124, borderRadius:14, overflow:'hidden' }}>
        {slides.map((s, k) => (
          <div key={k} style={{ position:'absolute', inset:0, background:s.bg, color:'#FFF', padding:'14px 16px', display:'flex', alignItems:'center', gap:14, opacity: i===k ? 1 : 0, transition:'opacity 0.6s ease', pointerEvents: i===k ? 'auto' : 'none' }}>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:9.5, fontWeight:800, letterSpacing:1.4, opacity:0.85, textTransform:'uppercase' }}>{s.tag}</div>
              <div style={{ fontFamily:t.fontDisplay, fontSize:20, fontWeight:700, letterSpacing:-0.4, marginTop:3 }}>{s.title}</div>
              <div style={{ fontSize:11, opacity:0.85, marginTop:2 }}>{s.sub}</div>
              <button className="f-shine-wrap" style={{ marginTop:10, height:28, padding:'0 12px', borderRadius:999, background:'#FFF', color:'#0E0E10', border:'none', fontWeight:700, fontSize:11 }}>{s.cta} <span className="f-arrow-nudge">→</span></button>
            </div>
            <div style={{ width:78, height:78, borderRadius:999, background:'rgba(255,255,255,0.16)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <i className={`fa-solid ${s.icon} ${s.anim}`} style={{ fontSize:32, color:'#FFF' }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'center', gap:5, marginTop:8 }}>
        {slides.map((_, k) => (
          <div key={k} style={{ width: i===k ? 18 : 5, height:5, borderRadius:999, background: i===k ? t.ink : t.line, transition:'all 0.3s' }} />
        ))}
      </div>
    </div>
  );
}

// ── Quick-action chip row (animated icons) ───────────────────────
function FQuickChips({ t }) {
  const items = [
    { l:'Scratch',   i:'fa-ticket',         color:t.accent,  anim:'f-pulse-soft', tag:'+₹5' },
    { l:'Daily',     i:'fa-fire',           color:t.warn,    anim:'f-flame',      tag:'D7' },
    { l:'Spin',      i:'fa-bolt',           color:t.coin,    anim:'f-bolt',       tag:'3 left' },
    { l:'Games',     i:'fa-gamepad',        color:t.violet,  anim:'f-pulse-soft', tag:'12' },
    { l:'Refer',     i:'fa-gift',           color:t.info,    anim:'f-bell',       tag:'+₹50' },
  ];
  return (
    <div style={{ padding:'4px 12px 6px', display:'flex', gap:8, overflowX:'auto' }} className="ph-scroll">
      {items.map((it, k) => (
        <div key={k} className="f-tick-up" style={{ flexShrink:0, width:72, padding:'12px 6px 10px', background:t.surface, border:`1px solid ${t.line}`, borderRadius:12, display:'flex', flexDirection:'column', alignItems:'center', gap:6, animationDelay:`${k*55}ms`, position:'relative' }}>
          <div style={{ width:36, height:36, borderRadius:999, background:`${it.color}1A`, color:it.color, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <i className={`fa-solid ${it.i} ${it.anim}`} style={{ fontSize:15 }} />
          </div>
          <div style={{ fontFamily:t.fontDisplay, fontSize:11, fontWeight:600, color:t.ink, letterSpacing:-0.1 }}>{it.l}</div>
          <div style={{ position:'absolute', top:6, right:6, padding:'1px 4px', background:t.accent, color:t.accentInk, fontSize:8, fontWeight:800, borderRadius:3, letterSpacing:0.3, fontFamily:t.fontMono, ...tn }}>{it.tag}</div>
        </div>
      ))}
    </div>
  );
}

window.FHeroCarousel = FHeroCarousel;
window.FQuickChips = FQuickChips;

// ── Bonus-style 3-col tile (big colored brand block + Get button) ──
function FBonusTile({ t, o, idx = 0 }) {
  const tones = [
    { bg:'#E11D48' }, { bg:'#F59E0B' }, { bg:'#1E3A8A' }, { bg:'#10B981' },
    { bg:'#7A4DFF' }, { bg:'#0EA5E9' }, { bg:'#1B1A17' }, { bg:'#C2691A' },
    { bg:'#BE185D' }, { bg:'#0E6E4F' },
  ];
  const seed = (o.brand.charCodeAt(0) + (o.brand.charCodeAt(2) || 0) + (o.brand.charCodeAt(4) || 0)) % tones.length;
  const tone = tones[seed];
  const initials = o.brand.split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase().slice(0,2);
  return (
    <div className="f-tick-up" style={{ padding:8, background:t.surface, border:`1px solid ${t.line}`, borderRadius:11, animationDelay:`${idx*55}ms` }}>
      <div style={{ aspectRatio:'1', borderRadius:9, background:tone.bg, color:'#FFF', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden', marginBottom:7 }}>
        {o.game ? (
          <i className={`fa-solid ${o.game} f-pulse-soft`} style={{ fontSize:28, color:'#FFF' }} />
        ) : (
          <span style={{ fontFamily:t.fontDisplay, fontWeight:800, fontSize:24, letterSpacing:-0.6 }}>{initials}</span>
        )}
        {o.hot && <i className="fa-solid fa-bolt f-bolt" style={{ position:'absolute', top:5, right:6, color:'#FFE57F', fontSize:11 }} />}
        {o.new && <span style={{ position:'absolute', top:5, left:5, padding:'1px 4px', background:'#FFF', color:'#0E0E10', fontSize:7.5, fontWeight:800, letterSpacing:0.4, borderRadius:3 }}>NEW</span>}
      </div>
      <div style={{ fontFamily:t.fontDisplay, fontSize:11.5, fontWeight:600, color:t.ink, letterSpacing:-0.2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', textAlign:'center' }}>{o.brand}</div>
      <div style={{ fontSize:9, color:t.ink2, textAlign:'center', marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.cat}</div>
      <button className="f-shine-wrap" style={{ width:'100%', marginTop:7, height:26, borderRadius:6, background:t.accent, color:t.accentInk, border:'none', fontWeight:700, fontSize:10.5, fontFamily:t.fontBody, ...tn }}>Get +{finr(o.amt)}</button>
    </div>
  );
}
window.FBonusTile = FBonusTile;
window.FINAL = FINAL;
window.FT_LIGHT = FT_LIGHT;
window.FT_DARK = FT_DARK;
window.ftTheme = ftTheme;
window.FOFFERS = FOFFERS;
window.FTICKER = FTICKER;
window.FBrand = FBrand;
window.FTickerStrip = FTickerStrip;
window.FLadderRow = FLadderRow;
window.FBottomNav = FBottomNav;
window.FSec = FSec;
window.FFeatured = FFeatured;
window.FCompactRow = FCompactRow;
window.FQuickCard = FQuickCard;
window.tn = tn;
window.finr = finr;