// screens.jsx · the four flow screens

const GREEN = '#0F6E56';
const GREEN_DARK = '#0A4E3D';
const GREEN_LIGHT = '#E8F4EF';
const GREEN_TINT = '#F4FAF7';
const INK = '#0D1F1A';
const MUTED = '#5C6B66';
const LINE = '#E5EAE8';
const GOLD = '#D4A64A';

// ─── shared bits ────────────────────────────────────────────
function StatusBarLight() {
  return (
    <div style={{
      height: 54, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      padding: '0 28px 8px', position: 'relative', zIndex: 5,
      fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 600, fontSize: 15, color: INK,
    }}>
      <span>9:41</span>
      <div style={{ position: 'absolute', left: '50%', top: 11, transform: 'translateX(-50%)', width: 126, height: 37, borderRadius: 24, background: '#000' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <svg width="18" height="11" viewBox="0 0 18 11"><rect x="0" y="7" width="3" height="4" rx="0.7" fill={INK}/><rect x="4.5" y="5" width="3" height="6" rx="0.7" fill={INK}/><rect x="9" y="2.5" width="3" height="8.5" rx="0.7" fill={INK}/><rect x="13.5" y="0" width="3" height="11" rx="0.7" fill={INK}/></svg>
        <svg width="16" height="11" viewBox="0 0 16 11"><path d="M8 3C9.9 3 11.6 3.7 12.8 4.9L13.7 4C12.2 2.5 10.2 1.5 8 1.5C5.8 1.5 3.8 2.5 2.3 4L3.2 4.9C4.4 3.7 6.1 3 8 3Z" fill={INK}/><path d="M8 6.3C9.1 6.3 10.1 6.7 10.9 7.4L11.8 6.5C10.7 5.5 9.4 4.8 8 4.8C6.6 4.8 5.3 5.5 4.2 6.5L5.1 7.4C5.9 6.7 6.9 6.3 8 6.3Z" fill={INK}/><circle cx="8" cy="9.5" r="1.3" fill={INK}/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke={INK} strokeOpacity="0.35" fill="none"/><rect x="2" y="2" width="18" height="8" rx="1.5" fill={INK}/><path d="M23 4V8C23.6 7.8 24 7.1 24 6.5C24 5.9 23.6 5.2 23 4Z" fill={INK} fillOpacity="0.4"/></svg>
      </div>
    </div>
  );
}

function HomeIndicator({ dark = false }) {
  return (
    <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center', zIndex: 60, pointerEvents: 'none' }}>
      <div style={{ width: 139, height: 5, borderRadius: 100, background: dark ? 'rgba(255,255,255,0.75)' : 'rgba(0,0,0,0.3)' }} />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SCREEN 1 · Celebration
// ═══════════════════════════════════════════════════════════
function Screen1({ onNext, active }) {
  // confetti · deterministic positions
  const confetti = React.useMemo(() => {
    const colors = [GREEN, '#4CAF8A', GOLD, '#E87A5D', '#6FB5A0', '#F2C94C'];
    const shapes = ['rect', 'circle', 'bar'];
    return Array.from({ length: 48 }, (_, i) => {
      const seed = (i * 9301 + 49297) % 233280;
      const r = (seed / 233280);
      const r2 = ((i * 137) % 100) / 100;
      const r3 = ((i * 61) % 100) / 100;
      return {
        left: r * 100,
        delay: r2 * 2.8,
        duration: 2.6 + r3 * 1.6,
        rotate: r * 720 - 360,
        color: colors[i % colors.length],
        shape: shapes[i % shapes.length],
        size: 6 + (i % 4) * 2,
        drift: (r2 - 0.5) * 80,
      };
    });
  }, []);

  return (
    <div style={{ height: '100%', background: '#fff', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <StatusBarLight />

      {/* confetti layer */}
      {active && (
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', zIndex: 1 }}>
          {confetti.map((c, i) => (
            <div key={i} style={{
              position: 'absolute', top: -20, left: `${c.left}%`,
              width: c.shape === 'bar' ? 3 : c.size, height: c.shape === 'bar' ? c.size * 2 : c.size,
              background: c.color,
              borderRadius: c.shape === 'circle' ? '50%' : 2,
              animation: `confetti-fall ${c.duration}s ${c.delay}s cubic-bezier(.25,.46,.45,.94) forwards`,
              opacity: 0,
              '--drift': `${c.drift}px`,
              '--rot': `${c.rotate}deg`,
            }} />
          ))}
        </div>
      )}

      {/* celebration content */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 22px 0', position: 'relative', zIndex: 2 }}>
        {/* green badge with check */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28, marginBottom: 22 }}>
          <div style={{
            width: 88, height: 88, borderRadius: '50%',
            background: `radial-gradient(circle at 30% 30%, #1a8f72, ${GREEN})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 8px 24px ${GREEN}33, inset 0 -3px 8px rgba(0,0,0,0.15)`,
            animation: active ? 'pop-in 0.7s cubic-bezier(.34,1.56,.64,1) both' : 'none',
          }}>
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <path d="M10 20l7 7 14-14" stroke="#fff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"
                style={{ strokeDasharray: 40, strokeDashoffset: active ? 0 : 40, transition: 'stroke-dashoffset 0.6s 0.4s' }}/>
            </svg>
          </div>
        </div>

        <div style={{
          textAlign: 'center', fontSize: 13, fontWeight: 600, letterSpacing: 1.5,
          color: GREEN, textTransform: 'uppercase', marginBottom: 10,
        }}>Mortgage closed</div>

        <h1 style={{
          margin: 0, fontSize: 30, fontWeight: 700, lineHeight: 1.15,
          color: INK, textAlign: 'center', letterSpacing: -0.6,
          fontFamily: '"Instrument Serif", Georgia, serif',
        }}>
          Congratulations,<br/>Haresh
        </h1>
        <p style={{
          margin: '12px 24px 0', fontSize: 15, lineHeight: 1.45,
          color: MUTED, textAlign: 'center',
        }}>
          Your mortgage for <span style={{ color: INK, fontWeight: 600 }}>Palm Jumeirah Apt 2408</span> is confirmed.
        </p>

        {/* mortgage summary card */}
        <div style={{
          marginTop: 22, background: GREEN_TINT, border: `1px solid ${GREEN_LIGHT}`,
          borderRadius: 18, padding: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 12, borderBottom: `1px solid ${GREEN_LIGHT}` }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: `repeating-linear-gradient(135deg, #d5e5dd 0 6px, #c5d9d0 6px 12px)`,
              flexShrink: 0, position: 'relative',
            }}>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M3 18V8l7-5 7 5v10h-5v-6H8v6H3z" fill={GREEN}/></svg>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: INK }}>Palm Jumeirah, Apt 2408</div>
              <div style={{ fontSize: 12, color: MUTED, marginTop: 2 }}>Tower B · 2 BR · Sea view</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, paddingTop: 12 }}>
            <SumItem label="Property value" value="AED 1,850,000" />
            <SumItem label="Monthly payment" value="AED 7,200" />
            <SumItem label="Bank" value="Emirates NBD" />
            <SumItem label="Tenor" value="25 years" />
          </div>
        </div>

        {/* cross-sell slide-up card */}
        <div style={{
          marginTop: 16, background: '#fff',
          border: `1px solid ${LINE}`, borderRadius: 18,
          padding: 16, display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: '0 8px 24px rgba(15,110,86,0.08)',
          animation: active ? 'slide-up 0.6s 1.6s cubic-bezier(.2,.8,.2,1) both' : 'none',
        }}>
          <div style={{
            width: 42, height: 42, borderRadius: 12, flexShrink: 0,
            background: `linear-gradient(135deg, ${GREEN} 0%, #1a8f72 100%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 22 22"><rect x="3" y="3" width="7" height="7" rx="1" fill="#fff"/><rect x="12" y="3" width="7" height="7" rx="1" fill="#fff" fillOpacity="0.7"/><rect x="3" y="12" width="7" height="7" rx="1" fill="#fff" fillOpacity="0.55"/><rect x="12" y="12" width="7" height="7" rx="1" fill="#fff"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: INK, lineHeight: 1.3 }}>
              While you wait for handover
            </div>
            <div style={{ fontSize: 13, color: MUTED, marginTop: 2 }}>
              Your money could be working
            </div>
          </div>
        </div>
      </div>

      {/* sticky CTA */}
      <div style={{
        padding: '16px 22px 38px', background: 'linear-gradient(to top, #fff 60%, rgba(255,255,255,0))',
        position: 'relative', zIndex: 3,
      }}>
        <button onClick={onNext} style={{
          width: '100%', height: 56, borderRadius: 14,
          background: GREEN, color: '#fff', border: 'none',
          fontSize: 16, fontWeight: 600, letterSpacing: -0.1,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          cursor: 'pointer', boxShadow: `0 4px 16px ${GREEN}40`,
          fontFamily: 'inherit',
        }}>
          See how Blocks works
          <svg width="16" height="14" viewBox="0 0 16 14"><path d="M1 7h13m0 0L9 2m5 5l-5 5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ textAlign: 'center', marginTop: 12, fontSize: 12, color: MUTED }}>
          Skip for now
        </div>
      </div>

      <HomeIndicator />
    </div>
  );
}

function SumItem({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: MUTED, letterSpacing: 0.3, textTransform: 'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 14, color: INK, fontWeight: 600, marginTop: 3 }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SCREEN 2 · Blocks pitch
// ═══════════════════════════════════════════════════════════
function Screen2({ onNext, onBack }) {
  const [investAmount, setInvestAmount] = React.useState(10000);
  const monthlyReturn = ((investAmount * 0.094) / 12).toFixed(2);

  return (
    <div style={{ height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <StatusBarLight />

      {/* top chrome */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 18px 14px' }}>
        <button onClick={onBack} style={{
          width: 40, height: 40, borderRadius: 20, border: `1px solid ${LINE}`,
          background: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
        }}>
          <svg width="8" height="14" viewBox="0 0 8 14"><path d="M7 1L1 7l6 6" stroke={INK} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontSize: 14, fontWeight: 600, color: INK }}>Blocks</div>
        <div style={{ width: 40 }} />
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 22px 20px' }}>
        {/* Headline */}
        <h1 style={{
          margin: '4px 0 0', fontSize: 28, fontWeight: 700, lineHeight: 1.18,
          color: INK, letterSpacing: -0.5,
          fontFamily: '"Instrument Serif", Georgia, serif',
        }}>
          Haresh, your neighbors are earning <span style={{ color: GREEN }}>9.1%</span> on their second property.
        </h1>

        {/* Social proof */}
        <div style={{
          marginTop: 18, display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 14px', background: GREEN_TINT, borderRadius: 14,
        }}>
          <div style={{ display: 'flex' }}>
            {['#D4A64A', '#E87A5D', '#6FB5A0', '#8B7AB8'].map((c, i) => (
              <div key={i} style={{
                width: 28, height: 28, borderRadius: '50%', background: c,
                border: '2px solid #fff', marginLeft: i === 0 ? 0 : -8,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 600, color: '#fff',
              }}>{['MK','AR','SJ','HT'][i]}</div>
            ))}
          </div>
          <div style={{ fontSize: 13, color: INK, lineHeight: 1.35 }}>
            <span style={{ fontWeight: 600 }}>47 mortgage customers</span> invested in Blocks this month
          </div>
        </div>

        {/* Featured property */}
        <div style={{
          marginTop: 18, borderRadius: 20, overflow: 'hidden',
          border: `1px solid ${LINE}`, background: '#fff',
        }}>
          {/* placeholder image */}
          <div style={{
            height: 168, position: 'relative',
            background: `linear-gradient(135deg, #2d5a4d 0%, #0F6E56 50%, #1a8f72 100%)`,
          }}>
            {/* skyline stripe */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0, height: 70,
              background: `
                linear-gradient(to top, rgba(13,31,26,0.6), transparent),
                repeating-linear-gradient(90deg,
                  rgba(0,0,0,0.18) 0 12px, rgba(0,0,0,0.35) 12px 14px,
                  rgba(0,0,0,0.22) 14px 28px, rgba(0,0,0,0.4) 28px 30px,
                  rgba(0,0,0,0.15) 30px 48px, rgba(0,0,0,0.38) 48px 50px)`,
            }} />
            <div style={{
              position: 'absolute', top: 14, left: 14,
              padding: '6px 10px', borderRadius: 8,
              background: 'rgba(255,255,255,0.92)', fontSize: 11, fontWeight: 600,
              color: GREEN, display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: GREEN }}/>
              Fully occupied
            </div>
            <div style={{
              position: 'absolute', bottom: 14, right: 14,
              fontFamily: 'monospace', fontSize: 10, color: 'rgba(255,255,255,0.6)',
              letterSpacing: 0.5,
            }}>[ studio · 42 sqm ]</div>
          </div>
          <div style={{ padding: '16px 16px 18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600, color: INK }}>Burj Vista Studio</div>
                <div style={{ fontSize: 12, color: MUTED, marginTop: 2 }}>Downtown Dubai · Tower 2</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: GREEN, fontFamily: '"Instrument Serif", serif', letterSpacing: -0.3 }}>9.4%</div>
                <div style={{ fontSize: 10, color: MUTED, letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 500 }}>Annual yield</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 18, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${LINE}` }}>
              <Stat label="Min. entry" value="AED 2,000" />
              <Stat label="Funded" value="78%" />
              <Stat label="Investors" value="6 in" />
            </div>
            {/* progress */}
            <div style={{ marginTop: 12, height: 4, borderRadius: 2, background: LINE, overflow: 'hidden' }}>
              <div style={{ width: '78%', height: '100%', background: GREEN }}/>
            </div>
          </div>
        </div>

        {/* Return calculator */}
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', color: MUTED }}>See your return</div>
          <div style={{
            marginTop: 10, padding: 18, borderRadius: 18,
            background: INK, color: '#fff', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140, borderRadius: '50%', background: `${GREEN}30`, filter: 'blur(40px)' }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 12, opacity: 0.6 }}>If you invest</div>
              <div style={{ fontSize: 26, fontWeight: 700, marginTop: 2, fontFamily: '"Instrument Serif", serif' }}>
                AED {investAmount.toLocaleString()}
              </div>
              {/* slider */}
              <input type="range" min="2000" max="50000" step="1000" value={investAmount}
                onChange={e => setInvestAmount(+e.target.value)}
                style={{
                  width: '100%', marginTop: 12, accentColor: GREEN,
                  height: 4,
                }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, opacity: 0.5, marginTop: 2 }}>
                <span>AED 2,000</span><span>AED 50,000</span>
              </div>
              <div style={{
                marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.12)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              }}>
                <span style={{ fontSize: 13, opacity: 0.7 }}>You earn monthly</span>
                <span style={{ fontSize: 22, fontWeight: 700, color: '#8ED6BB', fontFamily: '"Instrument Serif", serif' }}>
                  AED {monthlyReturn}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* sticky CTAs */}
      <div style={{ padding: '14px 22px 38px', background: '#fff', borderTop: `1px solid ${LINE}` }}>
        <button onClick={onNext} style={{
          width: '100%', height: 54, borderRadius: 14,
          background: GREEN, color: '#fff', border: 'none',
          fontSize: 16, fontWeight: 600, cursor: 'pointer',
          boxShadow: `0 4px 14px ${GREEN}40`, fontFamily: 'inherit',
        }}>
          Invest AED 2,000 to start
        </button>
        <button disabled title="Concept only in this prototype" style={{
          width: '100%', height: 46, marginTop: 8,
          background: 'transparent', color: '#9CA5A1', border: 'none',
          fontSize: 14, fontWeight: 500, cursor: 'not-allowed', fontFamily: 'inherit',
        }}>
          Learn more first
        </button>
      </div>

      <HomeIndicator />
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 10, color: MUTED, letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 13, color: INK, fontWeight: 600, marginTop: 3 }}>{value}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SCREEN 3 · Frictionless invest
// ═══════════════════════════════════════════════════════════
function Screen3({ onNext, onBack, amount, setAmount }) {
  const presets = [2000, 5000, 10000];
  const [custom, setCustom] = React.useState(false);
  const monthly = ((amount * 0.094) / 12).toFixed(2);
  const [processing, setProcessing] = React.useState(false);

  const confirm = () => {
    setProcessing(true);
    setTimeout(() => { setProcessing(false); onNext(); }, 1100);
  };

  return (
    <div style={{ height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <StatusBarLight />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 18px 14px' }}>
        <button onClick={onBack} style={{
          width: 40, height: 40, borderRadius: 20, border: `1px solid ${LINE}`,
          background: '#fff', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
        }}>
          <svg width="8" height="14" viewBox="0 0 8 14"><path d="M7 1L1 7l6 6" stroke={INK} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontSize: 14, fontWeight: 600, color: INK }}>Confirm investment</div>
        <div style={{ width: 40 }} />
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 22px' }}>
        {/* property capsule */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: 12, background: GREEN_TINT, borderRadius: 14,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10, flexShrink: 0,
            background: `linear-gradient(135deg, #2d5a4d, ${GREEN})`,
          }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: INK }}>Burj Vista Studio</div>
            <div style={{ fontSize: 12, color: MUTED, marginTop: 1 }}>Downtown Dubai · 9.4% yield</div>
          </div>
        </div>

        {/* amount */}
        <div style={{ marginTop: 22, textAlign: 'center' }}>
          <div style={{ fontSize: 11, color: MUTED, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>
            Investment amount
          </div>
          <div style={{
            marginTop: 8, fontSize: 48, fontWeight: 700, color: INK,
            letterSpacing: -1.2, lineHeight: 1,
            fontFamily: '"Instrument Serif", Georgia, serif',
          }}>
            <span style={{ color: MUTED, fontSize: 22, marginRight: 6 }}>AED</span>
            {amount.toLocaleString()}
          </div>
        </div>

        {/* presets */}
        <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
          {presets.map(p => (
            <button key={p} onClick={() => { setAmount(p); setCustom(false); }} style={{
              flex: 1, height: 50, borderRadius: 12,
              border: amount === p && !custom ? `1.5px solid ${GREEN}` : `1px solid ${LINE}`,
              background: amount === p && !custom ? GREEN_TINT : '#fff',
              color: INK, fontWeight: 600, fontSize: 14,
              cursor: 'pointer', fontFamily: 'inherit',
            }}>
              {p.toLocaleString()}
            </button>
          ))}
          <button onClick={() => setCustom(true)} style={{
            flex: 1, height: 50, borderRadius: 12,
            border: custom ? `1.5px solid ${GREEN}` : `1px solid ${LINE}`,
            background: custom ? GREEN_TINT : '#fff',
            color: INK, fontWeight: 600, fontSize: 14,
            cursor: 'pointer', fontFamily: 'inherit',
          }}>Custom</button>
        </div>

        {custom && (
          <input type="number" min="2000" value={amount}
            onChange={e => setAmount(+e.target.value || 2000)}
            style={{
              width: '100%', marginTop: 10, height: 50, borderRadius: 12,
              border: `1px solid ${LINE}`, padding: '0 14px',
              fontSize: 15, fontFamily: 'inherit', boxSizing: 'border-box',
            }}/>
        )}

        {/* live calc */}
        <div style={{
          marginTop: 18, padding: '14px 16px', borderRadius: 14,
          background: '#fff', border: `1px dashed ${GREEN}50`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: 12, color: MUTED }}>Your monthly income</div>
            <div style={{
              fontSize: 22, fontWeight: 700, color: GREEN, marginTop: 2,
              fontFamily: '"Instrument Serif", serif', letterSpacing: -0.3,
            }}>
              AED {monthly}
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 12, color: MUTED }}>First payout</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: INK, marginTop: 4 }}>~28 days</div>
          </div>
        </div>

        {/* payment method */}
        <div style={{ marginTop: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', color: MUTED, marginBottom: 8 }}>
            Pay from
          </div>
          <div style={{
            padding: 14, borderRadius: 14, border: `1px solid ${LINE}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 40, height: 28, borderRadius: 5,
              background: `linear-gradient(135deg, #C8102E, #8B0A1F)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 7, fontWeight: 700, color: '#fff', letterSpacing: 0.3,
            }}>BANK</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: INK }}>Emirates NBD</div>
              <div style={{ fontSize: 12, color: MUTED, marginTop: 1, fontFamily: 'monospace' }}>•••• •••• •••• 4821</div>
            </div>
            <div style={{
              fontSize: 10, fontWeight: 600, letterSpacing: 0.5, color: GREEN,
              textTransform: 'uppercase', padding: '4px 8px',
              background: GREEN_LIGHT, borderRadius: 6,
            }}>Saved</div>
          </div>
        </div>

        {/* DFSA + disclaimer */}
        <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 10, padding: '12px 0' }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8, background: GREEN_LIGHT,
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 1l6 2.5v5c0 3.5-2.5 6-6 6.5-3.5-.5-6-3-6-6.5v-5L8 1z" fill={GREEN}/><path d="M5 8l2 2 4-4" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round"/></svg>
          </div>
          <div style={{ fontSize: 11, color: MUTED, lineHeight: 1.4 }}>
            <span style={{ color: INK, fontWeight: 600 }}>DFSA regulated.</span> Withdraw anytime after the 180-day exit window.
          </div>
        </div>
      </div>

      {/* confirm */}
      <div style={{ padding: '14px 22px 38px', borderTop: `1px solid ${LINE}` }}>
        <button onClick={confirm} disabled={processing} style={{
          width: '100%', height: 56, borderRadius: 14,
          background: GREEN, color: '#fff', border: 'none',
          fontSize: 16, fontWeight: 600, cursor: processing ? 'wait' : 'pointer',
          boxShadow: `0 4px 14px ${GREEN}40`, fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          opacity: processing ? 0.8 : 1,
        }}>
          {processing ? (
            <>
              <div style={{ width: 18, height: 18, borderRadius: '50%', border: '2px solid rgba(255,255,255,0.35)', borderTopColor: '#fff', animation: 'spin 0.7s linear infinite' }}/>
              Processing…
            </>
          ) : (
            <>Invest now · AED {amount.toLocaleString()}</>
          )}
        </button>
      </div>

      <HomeIndicator />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SCREEN 4 · Success + retention
// ═══════════════════════════════════════════════════════════
function Screen4({ onRestart, amount }) {
  const [tab, setTab] = React.useState('home');
  const monthly = ((amount * 0.094) / 12).toFixed(2);

  return (
    <div style={{ height: '100%', background: '#fff', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <StatusBarLight />

      <div style={{ flex: 1, overflow: 'auto', padding: '6px 22px 18px' }}>
        {/* Badge */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16 }}>
          <div style={{
            width: 76, height: 76, borderRadius: 22,
            background: `linear-gradient(135deg, ${GREEN}, #1a8f72)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 10px 24px ${GREEN}40`,
            transform: 'rotate(-6deg)',
          }}>
            <svg width="38" height="38" viewBox="0 0 38 38">
              <path d="M6 32V14l13-9 13 9v18h-9v-11h-8v11H6z" fill="#fff"/>
            </svg>
          </div>
        </div>

        <h1 style={{
          margin: '20px 0 0', fontSize: 28, fontWeight: 700,
          textAlign: 'center', color: INK, letterSpacing: -0.5, lineHeight: 1.15,
          fontFamily: '"Instrument Serif", Georgia, serif',
        }}>
          You're a property<br/>investor now.
        </h1>
        <p style={{ margin: '10px 10px 0', fontSize: 14, color: MUTED, textAlign: 'center', lineHeight: 1.4 }}>
          Your Block is live. First rental income arrives in <span style={{ color: INK, fontWeight: 600 }}>~28 days</span>.
        </p>

        {/* New holding */}
        <div style={{
          marginTop: 22, borderRadius: 18, overflow: 'hidden',
          border: `1px solid ${LINE}`, background: '#fff',
        }}>
          <div style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 52, height: 52, borderRadius: 12, flexShrink: 0,
              background: `linear-gradient(135deg, #2d5a4d, ${GREEN})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="22" height="22" viewBox="0 0 22 22"><path d="M3 19V9l8-6 8 6v10h-5v-6H8v6H3z" fill="#fff"/></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: GREEN, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>New holding</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: INK, marginTop: 2 }}>Burj Vista Studio</div>
              <div style={{ fontSize: 12, color: MUTED, marginTop: 1 }}>Downtown Dubai</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: INK, fontFamily: '"Instrument Serif", serif' }}>
                AED {amount.toLocaleString()}
              </div>
              <div style={{ fontSize: 10, color: MUTED, marginTop: 2 }}>INVESTED</div>
            </div>
          </div>
          <div style={{ padding: '12px 16px', background: GREEN_TINT, borderTop: `1px solid ${LINE}`, display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: MUTED }}>Est. monthly rent</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: GREEN, marginTop: 2 }}>+AED {monthly}</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: MUTED }}>First payout</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: INK, marginTop: 2 }}>May 21</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: MUTED }}>Ownership</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: INK, marginTop: 2 }}>0.54%</div>
            </div>
          </div>
        </div>

        {/* Collect points */}
        <div style={{
          marginTop: 14, padding: 14, borderRadius: 14,
          background: `linear-gradient(135deg, #FFF8E7, #FBEFC9)`,
          display: 'flex', alignItems: 'center', gap: 12,
          border: `1px solid ${GOLD}30`,
        }}>
          <div style={{
            width: 42, height: 42, borderRadius: '50%',
            background: `radial-gradient(circle at 30% 30%, #F5CC6B, ${GOLD})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 3px 10px ${GOLD}50`,
          }}>
            <span style={{ fontSize: 18, fontWeight: 700, color: '#fff', fontFamily: '"Instrument Serif", serif' }}>C</span>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: INK, fontWeight: 600 }}>+200 Collect points earned</div>
            <div style={{ fontSize: 11, color: '#7A6430', marginTop: 2 }}>Redeem for rewards in your wallet</div>
          </div>
          <svg width="8" height="14" viewBox="0 0 8 14"><path d="M1 1l6 6-6 6" stroke="#7A6430" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>

        {/* Share · concept only in this prototype */}
        <button disabled title="Concept only in this prototype" style={{
          width: '100%', marginTop: 14, height: 50, borderRadius: 14,
          background: '#EEEBE3', border: `1px dashed ${LINE}`, color: '#8C9591',
          fontSize: 14, fontWeight: 600, cursor: 'not-allowed', fontFamily: 'inherit',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16"><path d="M12 5a2.5 2.5 0 11-2.4-2.5m-7.1 7a2.5 2.5 0 100 1m9.5 3a2.5 2.5 0 11-2.4-2.5M5 7.5l5.5-3m-5.5 4l5.5 3" stroke="#8C9591" strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg>
          Share your investment
        </button>

        <div onClick={onRestart} style={{ textAlign: 'center', marginTop: 16, fontSize: 12, color: MUTED, cursor: 'pointer' }}>
          ↻ Restart flow
        </div>
      </div>

      {/* bottom nav · now with Portfolio! */}
      <div style={{
        display: 'flex', borderTop: `1px solid ${LINE}`, background: '#fff',
        paddingTop: 8, paddingBottom: 28, position: 'relative',
      }}>
        {[
          { k: 'home', label: 'Home', icon: <path d="M3 19V9l8-6 8 6v10h-5v-6H8v6H3z"/> },
          { k: 'mort', label: 'Mortgage', icon: <path d="M4 20V8l7-4 7 4v12M9 14h4v6"/> },
          { k: 'port', label: 'Portfolio', icon: <><rect x="3" y="6" width="16" height="13" rx="2"/><path d="M8 6V4a3 3 0 016 0v2"/></>, highlight: true },
          { k: 'coll', label: 'Collect', icon: <circle cx="11" cy="11" r="8"/> },
          { k: 'acc', label: 'Account', icon: <><circle cx="11" cy="8" r="4"/><path d="M3 20a8 8 0 0116 0"/></> },
        ].map(t => {
          const sel = tab === t.k;
          return (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              flex: 1, border: 'none', background: 'transparent',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              padding: '4px 0', cursor: 'pointer', position: 'relative',
              fontFamily: 'inherit',
            }}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                stroke={sel ? GREEN : MUTED} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                {t.icon}
              </svg>
              <span style={{ fontSize: 10, fontWeight: sel ? 600 : 500, color: sel ? GREEN : MUTED }}>
                {t.label}
              </span>
              {t.highlight && (
                <span style={{
                  position: 'absolute', top: 2, right: '28%',
                  width: 7, height: 7, borderRadius: '50%', background: GREEN,
                  border: '2px solid #fff',
                  animation: 'pulse 1.5s ease-in-out infinite',
                }}/>
              )}
            </button>
          );
        })}
      </div>

      <HomeIndicator />
    </div>
  );
}

Object.assign(window, { Screen1, Screen2, Screen3, Screen4 });