// Alert Detail Screens — a1 through a6

// ── Shared primitives ─────────────────────────────────────────────────────────
function AlertNav({ theme, label, onBack }) {
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 20px 8px' }}>
      <button onClick={onBack} style={{
        width:38, height:38, borderRadius:19,
        background:theme.surface2, border:`0.5px solid ${theme.line2}`,
        cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <Ico.arrowL size={17} stroke={theme.text} />
      </button>
      <span style={{ fontFamily:FONTS.mono, fontSize:10, letterSpacing:1.5, textTransform:'uppercase', color:theme.textMute }}>
        {label}
      </span>
      <div style={{ width:38 }} />
    </div>
  );
}

function AlertHero({ theme, warn, children }) {
  const midnight = theme?.label === 'Midnight';
  // parse warn hex → rgb for rgba()
  const r = parseInt(warn.slice(1,3),16), g = parseInt(warn.slice(3,5),16), b = parseInt(warn.slice(5,7),16);
  return (
    <div style={{
      background: midnight ? `rgba(${r},${g},${b},0.13)` : `rgba(${r},${g},${b},0.07)`,
      border:`1px solid rgba(${r},${g},${b},0.22)`, borderRadius:22, padding:'22px 20px',
    }}>
      {children}
    </div>
  );
}

function AlertCard({ theme, label, children }) {
  const midnight = theme?.label === 'Midnight';
  return (
    <div style={{
      background: midnight ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.78)',
      border: midnight ? '0.5px solid rgba(255,255,255,0.08)' : 'none',
      borderRadius:18, padding:'18px 16px',
      boxShadow: midnight ? 'none' : '0 2px 14px rgba(0,0,0,0.05)',
    }}>
      {label && (
        <div style={{ fontFamily:FONTS.mono, fontSize:9.5, letterSpacing:1.3, textTransform:'uppercase', color:theme.textMute, marginBottom:12 }}>
          {label}
        </div>
      )}
      {children}
    </div>
  );
}

function AlertRow({ theme, accent, label, value, highlight, last }) {
  return (
    <div style={{
      display:'flex', justifyContent:'space-between', alignItems:'center',
      padding:'10px 0', borderBottom: last ? 'none' : `0.5px solid ${theme.line2}`,
    }}>
      <span style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim }}>{label}</span>
      <span style={{ fontFamily:FONTS.mono, fontSize:13, fontWeight: highlight ? 600 : 400, color: highlight ? accent : theme.text }}>{value}</span>
    </div>
  );
}

// Alert CTAs: one warm primary action + one neutral secondary. No blue mixing.
function AlertCTAs({ theme, primary, secondary, onPrimary, onSecondary }) {
  const WARN = '#D95F3B';
  return (
    <div style={{ padding:'20px 16px 0', display:'flex', flexDirection:'column', gap:10 }}>
      <button onClick={onPrimary} style={{
        width:'100%', background: WARN, color:'#fff', border:'none',
        borderRadius:16, padding:'15px 20px', fontFamily:FONTS.ui, fontSize:15, fontWeight:600,
        cursor:'pointer', letterSpacing:-0.2, boxShadow:`0 4px 20px ${WARN}40`,
      }}>{primary}</button>
      {secondary && (
        <button onClick={onSecondary} style={{
          width:'100%', background:'transparent', color: theme.textDim,
          border:`1.5px solid ${theme.line}`,
          borderRadius:16, padding:'14px 20px',
          fontFamily:FONTS.ui, fontSize:15, fontWeight:600, cursor:'pointer', letterSpacing:-0.2,
        }}>{secondary}</button>
      )}
    </div>
  );
}

// ─── Kept for backward-compat (referenced nowhere externally now but safe to keep) ──
function AlertActionRow({ theme, accent, label, icon, danger, onClick, sub }) {
  const midnight = theme?.label === 'Midnight';
  const Icon = icon ? Ico[icon] : null;
  const color = danger ? '#D95F3B' : accent;
  return (
    <button onClick={onClick} style={{
      width:'100%', display:'flex', alignItems:'center', gap:14,
      background: midnight ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.7)',
      border:`0.5px solid ${theme.line2}`, borderRadius:16, padding:'14px 16px',
      cursor:'pointer', textAlign:'left',
    }}>
      {Icon && (
        <div style={{ width:36, height:36, borderRadius:10, background:`${color}15`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          <Icon size={18} stroke={color} />
        </div>
      )}
      <div style={{ flex:1 }}>
        <div style={{ fontFamily:FONTS.ui, fontSize:13, fontWeight:600, color:danger ? '#D95F3B' : theme.text }}>{label}</div>
        {sub && <div style={{ fontFamily:FONTS.ui, fontSize:11, color:theme.textDim, marginTop:2 }}>{sub}</div>}
      </div>
      <Ico.chevR size={14} stroke={theme.textMute} />
    </button>
  );
}

function SectionLabel2({ children, theme }) {
  return (
    <div style={{ fontFamily:FONTS.mono, fontSize:9.5, letterSpacing:1.3, textTransform:'uppercase', color:theme.textMute, padding:'6px 2px 2px' }}>
      {children}
    </div>
  );
}

// ─── a1: Unusual Transaction (Single) ─────────────────────────────────────────
function UnusualTxSingleScreen({ theme, accent, onBack, onAskHimma }) {
  const WARN = '#D95F3B';
  const [disputing, setDisputing] = React.useState(false);

  const rows = [
    { label:'Your avg Noon charge', value:'AED 380'          },
    { label:'This transaction',     value:'AED 4,890', hi:true },
    { label:'Deviation',            value:'12.9× above avg'  },
    { label:'Card',                 value:'•••• 4821 ENBD'   },
    { label:'Time',                 value:'May 28 · 3:47 PM' },
    { label:'Location',             value:'Dubai, UAE'       },
  ];

  const steps = [
    { n:'1', text:"Confirm it wasn't you. Check with anyone who shares this card." },
    { n:'2', text:'Himma pre-fills the merchant, date, amount and reference for Emirates NBD.' },
    { n:'3', text:'Emirates NBD reviews the claim, usually within 7–10 business days. You may receive a provisional credit.' },
    { n:'4', text:"If the charge is confirmed unauthorised, it's refunded and your card is reissued." },
  ];

  // ── Dispute process flow ──
  if (disputing) {
    return (
      <Screen theme={theme} padTop={0} padBottom={48}>
        <AlertNav theme={theme} label="Dispute charge" onBack={() => setDisputing(false)} />
        <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

          <AlertCard theme={theme}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div>
                <div style={{ fontFamily:FONTS.ui, fontSize:15, fontWeight:600, color:theme.text }}>Noon.com</div>
                <div style={{ fontFamily:FONTS.mono, fontSize:11, color:theme.textMute, marginTop:2 }}>May 28 · •••• 4821</div>
              </div>
              <div style={{ display:'flex', alignItems:'baseline', gap:2 }}>
                <Dh size="0.85em" color={WARN} />
                <span style={{ fontFamily:FONTS.display, fontSize:22, color:WARN, letterSpacing:-0.5 }}>4,890</span>
              </div>
            </div>
          </AlertCard>

          <AlertCard theme={theme} label="How disputing works">
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display:'flex', gap:12, padding:'11px 0',
                borderBottom: i < steps.length - 1 ? `0.5px solid ${theme.line2}` : 'none',
              }}>
                <div style={{ width:22, height:22, borderRadius:11, background:`${WARN}18`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
                  <span style={{ fontFamily:FONTS.mono, fontSize:10, fontWeight:700, color:WARN }}>{s.n}</span>
                </div>
                <span style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim, lineHeight:1.55 }}>{s.text}</span>
              </div>
            ))}
          </AlertCard>

        </div>
        <AlertCTAs theme={theme}
          primary="Raise dispute with Emirates NBD"
          secondary="Cancel"
          onPrimary={onAskHimma} onSecondary={() => setDisputing(false)}
        />
      </Screen>
    );
  }

  // ── Default alert detail ──
  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Alerts" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        <AlertHero theme={theme} warn={WARN}>
          <div style={{ fontFamily:FONTS.mono, fontSize:10, letterSpacing:1.4, textTransform:'uppercase', color:WARN, marginBottom:12 }}>Flagged transaction</div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <div style={{ fontFamily:FONTS.display, fontSize:28, color:theme.text, letterSpacing:-0.7, lineHeight:1 }}>Noon.com</div>
              <div style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim, marginTop:4 }}>12× your typical Noon spend</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ display:'flex', alignItems:'baseline', gap:2 }}>
                <Dh size="1em" color={WARN} />
                <span style={{ fontFamily:FONTS.display, fontSize:34, color:WARN, letterSpacing:-1, lineHeight:1 }}>4,890</span>
              </div>
              <div style={{ fontFamily:FONTS.mono, fontSize:10, color:WARN, marginTop:4, background:`${WARN}18`, borderRadius:6, padding:'3px 8px', display:'inline-block' }}>12× avg</div>
            </div>
          </div>
        </AlertHero>

        <AlertCard theme={theme} label="Transaction detail">
          {rows.map((r, i) => (
            <AlertRow key={r.label} theme={theme} accent={WARN}
              label={r.label} value={r.value} highlight={!!r.hi} last={i === rows.length - 1} />
          ))}
        </AlertCard>

      </div>
      <AlertCTAs theme={theme}
        primary="Dispute this charge"
        secondary="I recognise the charge"
        onPrimary={() => setDisputing(true)} onSecondary={onBack}
      />
    </Screen>
  );
}

// ─── a2: Unusual Transaction Cluster ─────────────────────────────────────────
function UnusualTxClusterScreen({ theme, accent, onBack, onAskHimma }) {
  const WARN = '#D95F3B';
  const midnight = theme?.label === 'Midnight';

  const txns = [
    { merchant:'Careem Quick',  amount:'AED 2.00',  time:'11:04 AM', settled:true  },
    { merchant:'iHerb.com',     amount:'AED 5.00',  time:'11:09 AM', settled:false },
    { merchant:'Noon.com',      amount:'AED 1.00',  time:'11:22 AM', settled:true  },
    { merchant:'PayPal *Store', amount:'AED 3.00',  time:'11:35 AM', settled:true  },
    { merchant:'Deliveroo',     amount:'AED 4.00',  time:'12:51 PM', settled:true  },
  ];

  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Alerts" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        <AlertHero theme={theme} warn={WARN}>
          <div style={{ fontFamily:FONTS.mono, fontSize:10, letterSpacing:1.4, textTransform:'uppercase', color:WARN, marginBottom:14 }}>Possible card testing</div>
          <div style={{ display:'flex', gap:10, marginBottom:16 }}>
            {[['5','transactions'],['2 hr','window'],['4','merchants']].map(([v,l]) => (
              <div key={l} style={{
                flex:1, textAlign:'center',
                background: midnight ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.55)',
                borderRadius:14, padding:'12px 6px',
              }}>
                <div style={{ fontFamily:FONTS.display, fontSize:22, color:WARN, letterSpacing:-0.5, lineHeight:1 }}>{v}</div>
                <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.6, marginTop:4 }}>{l}</div>
              </div>
            ))}
          </div>
          <div style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim, lineHeight:1.55 }}>
            Small charges across multiple merchants in a short window is a common <span style={{ color:WARN, fontWeight:600 }}>card-testing signature</span>.
          </div>
        </AlertHero>

        <AlertCard theme={theme} label="May 30, 2026">
          {txns.map((t, i) => (
            <div key={t.merchant} style={{
              display:'flex', alignItems:'center', padding:'11px 0',
              borderBottom: i < txns.length - 1 ? `0.5px solid ${theme.line2}` : 'none',
            }}>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:FONTS.ui, fontSize:13, fontWeight:500, color:theme.text }}>{t.merchant}</div>
                <div style={{ fontFamily:FONTS.mono, fontSize:10, color:theme.textMute, marginTop:1 }}>{t.time}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontFamily:FONTS.mono, fontSize:13, fontWeight:600, color:WARN }}>{t.amount}</div>
                <div style={{ fontFamily:FONTS.mono, fontSize:9, color: t.settled ? theme.textDim : theme.textMute, textTransform:'uppercase', letterSpacing:0.3 }}>
                  {t.settled ? 'Settled' : 'Declined'}
                </div>
              </div>
            </div>
          ))}
        </AlertCard>

      </div>
      <AlertCTAs theme={theme}
        primary="Ask Himma what to do next"
        onPrimary={onAskHimma}
      />
    </Screen>
  );
}

// ─── a3: Duplicate Charge ─────────────────────────────────────────────────────
function DuplicateChargeScreen({ theme, accent, onBack, onAskHimma }) {
  const WARN = '#D95F3B';
  const midnight = theme?.label === 'Midnight';

  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Alerts" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        <AlertHero theme={theme} warn={WARN}>
          <div style={{ fontFamily:FONTS.mono, fontSize:10, letterSpacing:1.4, textTransform:'uppercase', color:WARN, marginBottom:16 }}>Netflix charged twice</div>
          <div style={{ display:'flex', gap:10, marginBottom:16 }}>
            {[
              { tag:'Charge 1', time:'2:14 PM', color:theme.text, border:false },
              { tag:'Duplicate?', time:'2:16 PM', color:WARN, border:true },
            ].map(c => (
              <div key={c.tag} style={{
                flex:1, textAlign:'center',
                background: midnight ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.6)',
                borderRadius:14, padding:'14px 10px',
                border: c.border ? `1.5px solid ${WARN}40` : 'none',
              }}>
                <div style={{ fontFamily:FONTS.mono, fontSize:9, letterSpacing:0.6, textTransform:'uppercase', color:c.color === WARN ? WARN : theme.textMute, marginBottom:8 }}>{c.tag}</div>
                <div style={{ fontFamily:FONTS.display, fontSize:24, color:c.color, letterSpacing:-0.5 }}>AED 44.99</div>
                <div style={{ fontFamily:FONTS.mono, fontSize:10, color:c.color, marginTop:4 }}>Jun 1 · {c.time}</div>
              </div>
            ))}
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', background: midnight ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.55)', borderRadius:12, padding:'11px 14px' }}>
            <span style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim }}>Overcharge</span>
            <span style={{ fontFamily:FONTS.mono, fontSize:16, fontWeight:700, color:WARN }}>AED 44.99</span>
          </div>
        </AlertHero>

        <AlertCard theme={theme} label="Resolution path">
          {[
            { n:'1', text:'Contact Netflix first. Billing errors are usually refunded within 3–5 days.' },
            { n:'2', text:'If no response in 5 days, file a chargeback with Emirates NBD.' },
            { n:'3', text:'Keep both transaction receipts as evidence.' },
          ].map((s, i, arr) => (
            <div key={s.n} style={{
              display:'flex', gap:12, padding:'11px 0',
              borderBottom: i < arr.length - 1 ? `0.5px solid ${theme.line2}` : 'none',
            }}>
              <div style={{ width:22, height:22, borderRadius:11, background:`${accent}18`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
                <span style={{ fontFamily:FONTS.mono, fontSize:10, fontWeight:700, color:accent }}>{s.n}</span>
              </div>
              <span style={{ fontFamily:FONTS.ui, fontSize:13, color:theme.textDim, lineHeight:1.55 }}>{s.text}</span>
            </div>
          ))}
        </AlertCard>

      </div>
    </Screen>
  );
}

// ─── a4: Subscription Price Change ────────────────────────────────────────────
function SubscriptionPriceChangeScreen({ theme, accent, onBack, onAskHimma }) {
  const WARN = '#D95F3B';
  const midnight = theme?.label === 'Midnight';
  const OLD = 19.99, NEW = 27.99;
  const DIFF = (NEW - OLD).toFixed(2);
  const ANNUAL_EXTRA = ((NEW - OLD) * 12).toFixed(0);

  const history = [
    { month:'Jan', amount:19.99 },
    { month:'Feb', amount:19.99 },
    { month:'Mar', amount:19.99 },
    { month:'Apr', amount:19.99 },
    { month:'May', amount:19.99 },
    { month:'Jun', amount:27.99 },
  ];

  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Alerts" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        <AlertHero theme={theme} warn={WARN}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:18 }}>
            <div style={{ width:44, height:44, borderRadius:13, background:'#1DB954', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <Ico.sparkle size={22} stroke="#fff" />
            </div>
            <div>
              <div style={{ fontFamily:FONTS.display, fontSize:22, color:theme.text, letterSpacing:-0.4 }}>Spotify</div>
              <div style={{ fontFamily:FONTS.ui, fontSize:12, color:theme.textDim }}>Individual plan · renewed Jun 1</div>
            </div>
          </div>

          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ flex:1, textAlign:'center', background: midnight ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.6)', borderRadius:14, padding:'14px 8px' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.5, marginBottom:6 }}>Was</div>
              <div style={{ fontFamily:FONTS.display, fontSize:22, color:theme.textDim, textDecoration:'line-through' }}>AED {OLD}</div>
            </div>
            <Ico.arrowUR size={18} stroke={WARN} />
            <div style={{ flex:1, textAlign:'center', background: midnight ? `rgba(217,95,59,0.2)` : `rgba(217,95,59,0.10)`, borderRadius:14, padding:'14px 8px', border:`1.5px solid ${WARN}35` }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:WARN, textTransform:'uppercase', letterSpacing:0.5, marginBottom:6 }}>Now</div>
              <div style={{ fontFamily:FONTS.display, fontSize:22, color:WARN }}>AED {NEW}</div>
            </div>
          </div>

          <div style={{ display:'flex', gap:10, marginTop:12 }}>
            <div style={{ flex:1, background: midnight ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.55)', borderRadius:10, padding:'10px 12px', textAlign:'center' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.5, marginBottom:3 }}>Monthly extra</div>
              <div style={{ fontFamily:FONTS.display, fontSize:16, color:WARN }}>+AED {DIFF}</div>
            </div>
            <div style={{ flex:1, background: midnight ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.55)', borderRadius:10, padding:'10px 12px', textAlign:'center' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.5, marginBottom:3 }}>Annual extra</div>
              <div style={{ fontFamily:FONTS.display, fontSize:16, color:WARN }}>+AED {ANNUAL_EXTRA}</div>
            </div>
          </div>
        </AlertHero>

        <AlertCard theme={theme} label="6-month history">
          <div style={{ display:'flex', alignItems:'flex-end', gap:7, height:56 }}>
            {history.map(h => {
              const isNew = h.amount > 20;
              const barH = (h.amount / 30) * 48;
              return (
                <div key={h.month} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:5 }}>
                  <div style={{
                    width:'100%', height:barH, borderRadius:'4px 4px 0 0',
                    background: isNew ? WARN : (midnight ? 'rgba(255,255,255,0.15)' : `${accent}30`),
                  }} />
                  <span style={{ fontFamily:FONTS.mono, fontSize:9, color: isNew ? WARN : theme.textMute }}>{h.month}</span>
                </div>
              );
            })}
          </div>
        </AlertCard>

      </div>
    </Screen>
  );
}

// ─── a5: Annual Subscription Renewal Reminder ─────────────────────────────────
function SubscriptionRenewalScreen({ theme, accent, onBack, onAskHimma }) {
  const WARN = '#D95F3B';
  const midnight = theme?.label === 'Midnight';

  const details = [
    { label:'Plan',           value:'All Apps (Annual)'        },
    { label:'Next charge',    value:'Jun 15, 2026',  hi:true  },
    { label:'Amount',         value:'AED 2,399',     hi:true  },
    { label:'Monthly equiv.', value:'AED 199.92'              },
  ];

  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Alerts" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        <AlertHero theme={theme} warn={WARN}>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:18 }}>
            <div style={{ width:44, height:44, borderRadius:13, background:'rgba(255,60,0,0.15)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <Ico.compose size={22} stroke="#FF3C00" />
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontFamily:FONTS.display, fontSize:20, color:theme.text, letterSpacing:-0.3, lineHeight:1.1 }}>Adobe Creative Cloud</div>
              <div style={{ fontFamily:FONTS.ui, fontSize:12, color:theme.textDim, marginTop:2 }}>Annual billing</div>
            </div>
          </div>
          <div style={{ display:'flex', gap:10 }}>
            <div style={{ flex:1, textAlign:'center', background: midnight ? 'rgba(217,95,59,0.2)' : 'rgba(217,95,59,0.12)', borderRadius:14, padding:'14px 8px', border:`1.5px solid ${WARN}35` }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:WARN, textTransform:'uppercase', letterSpacing:0.5, marginBottom:6 }}>Renews in</div>
              <div style={{ fontFamily:FONTS.display, fontSize:36, color:WARN, letterSpacing:-1, lineHeight:1 }}>7</div>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:WARN, marginTop:4 }}>days</div>
            </div>
            <div style={{ flex:1, textAlign:'center', background: midnight ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.6)', borderRadius:14, padding:'14px 8px' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.5, marginBottom:6 }}>Amount</div>
              <div style={{ fontFamily:FONTS.display, fontSize:28, color:theme.text, letterSpacing:-0.8, lineHeight:1 }}>2,399</div>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, marginTop:4 }}>AED / year</div>
            </div>
          </div>
        </AlertHero>

        <AlertCard theme={theme} label="Subscription details">
          {details.map((r, i) => (
            <AlertRow key={r.label} theme={theme} accent={WARN}
              label={r.label} value={r.value} highlight={!!r.hi} last={i === details.length - 1} />
          ))}
        </AlertCard>

      </div>
    </Screen>
  );
}

// ─── a6: Subscription Spend Summary ───────────────────────────────────────────
function SubscriptionSummaryScreen({ theme, accent, onBack, onAskHimma }) {
  const midnight = theme?.label === 'Midnight';
  const MY_TOTAL = 312, PEER_AVG = 178;
  const PCT_ABOVE = Math.round((MY_TOTAL - PEER_AVG) / PEER_AVG * 100);

  const subs = [
    { name:'Adobe Creative Cloud', monthly:199.92, cycle:'Annual',  lastCharge:'Jun 15, 2025' },
    { name:'ChatGPT Plus',         monthly:73.70,  cycle:'Monthly', lastCharge:'Jun 1' },
    { name:'LinkedIn Premium',     monthly:62.00,  cycle:'Monthly', lastCharge:'Jun 3' },
    { name:'Netflix',              monthly:44.99,  cycle:'Monthly', lastCharge:'Jun 1' },
    { name:'Spotify',              monthly:27.99,  cycle:'Monthly', lastCharge:'Jun 1' },
    { name:'Amazon Prime',         monthly:24.99,  cycle:'Annual',  lastCharge:'Mar 12, 2026' },
    { name:'Noon Premium',         monthly:19.99,  cycle:'Monthly', lastCharge:'May 28' },
    { name:'Anghami Plus',         monthly:14.99,  cycle:'Monthly', lastCharge:'Jun 2' },
    { name:'iCloud 2TB',           monthly:12.99,  cycle:'Monthly', lastCharge:'Jun 5' },
  ];

  return (
    <Screen theme={theme} padTop={0} padBottom={48}>
      <AlertNav theme={theme} label="Spending" onBack={onBack} />
      <div style={{ padding:'8px 16px 0', display:'flex', flexDirection:'column', gap:14 }}>

        {/* Hero */}
        <div style={{
          background: midnight
            ? 'linear-gradient(145deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02))'
            : `linear-gradient(145deg,${theme.surface2},${theme.surface})`,
          borderRadius:22, padding:'22px 20px',
        }}>
          <div style={{ fontFamily:FONTS.mono, fontSize:10, letterSpacing:1.4, textTransform:'uppercase', color:theme.textMute, marginBottom:10 }}>Monthly subscriptions</div>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:16 }}>
            <div style={{ display:'flex', alignItems:'baseline', gap:4 }}>
              <Dh size="1.1em" color={theme.text} />
              <span style={{ fontFamily:FONTS.display, fontSize:48, color:theme.text, letterSpacing:-2, lineHeight:1 }}>{MY_TOTAL}</span>
            </div>
            <div style={{ textAlign:'right', paddingBottom:4 }}>
              <div style={{ fontFamily:FONTS.display, fontSize:24, color:'#D95F3B', letterSpacing:-0.5 }}>+{PCT_ABOVE}%</div>
              <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute, textTransform:'uppercase', letterSpacing:0.5 }}>vs peers</div>
            </div>
          </div>
          {/* Benchmark bar */}
          <div style={{ background: midnight ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)', borderRadius:6, height:7, overflow:'hidden', position:'relative' }}>
            <div style={{ position:'absolute', left:`${(PEER_AVG/400)*100}%`, top:0, bottom:0, width:2, background:theme.textMute, zIndex:1 }} />
            <div style={{ width:`${(MY_TOTAL/400)*100}%`, height:'100%', background:'#D95F3B', borderRadius:6 }} />
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:5 }}>
            <span style={{ fontFamily:FONTS.mono, fontSize:9, color:'#D95F3B' }}>You · AED {MY_TOTAL}/mo</span>
            <span style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute }}>Peers · AED {PEER_AVG}/mo</span>
          </div>
        </div>

        {/* Subscription list */}
        <AlertCard theme={theme} label={`${subs.length} active subscriptions`}>
          {subs.map((s, i) => (
            <div key={s.name} style={{
              display:'flex', alignItems:'center', padding:'11px 0',
              borderBottom: i < subs.length - 1 ? `0.5px solid ${theme.line2}` : 'none',
              background: 'transparent',
            }}>
              <div style={{ flex:1, minWidth:0, paddingRight:10 }}>
                <span style={{ display:'block', fontFamily:FONTS.ui, fontSize:13, fontWeight:500, color:theme.text, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{s.name}</span>
                <div style={{ fontFamily:FONTS.ui, fontSize:11, color:theme.textMute, marginTop:1 }}>{s.cycle} · Last charged {s.lastCharge}</div>
              </div>
              <div style={{ textAlign:'right', flexShrink:0 }}>
                <div style={{ fontFamily:FONTS.mono, fontSize:13, fontWeight:600, color:theme.text }}>
                  <Dh size="0.8em" color={theme.text} />{s.monthly.toFixed(2)}
                </div>
                <div style={{ fontFamily:FONTS.mono, fontSize:9, color:theme.textMute }}>/mo</div>
              </div>
            </div>
          ))}
        </AlertCard>

      </div>
      <AlertCTAs theme={theme}
        primary="Ask Himma to audit my subscriptions"
        onPrimary={onAskHimma}
      />
    </Screen>
  );
}

// ─── Exports ──────────────────────────────────────────────────────────────────
Object.assign(window, {
  UnusualTxSingleScreen,
  UnusualTxClusterScreen,
  DuplicateChargeScreen,
  SubscriptionPriceChangeScreen,
  SubscriptionRenewalScreen,
  SubscriptionSummaryScreen,
  AlertActionRow,
  SectionLabel2,
});