// Recommendations — AI insight cards

function RecommendationsScreen({ theme, accent, onOpenPaywall, onNav }) {
  const cats = ['All', 'Savings', 'Investments', 'Property', 'Protection'];
  const [cat, setCat] = React.useState('All');
  const list = cat === 'All' ? RECOMMENDATIONS : RECOMMENDATIONS.filter(r => r.category === cat);

  const impactColor = (i) => i === 'High' ? accent : i === 'Medium' ? theme.textDim : theme.textMute;

  return (
    <Screen theme={theme}>
      <ScreenHeader title="Insights" subtitle={`${RECOMMENDATIONS.length} recommendations`} theme={theme} accent={accent}/>

      {/* Hero callout */}
      <div style={{ padding: '0 16px 14px' }}>
        <Card theme={theme} padded={false} style={{
          padding: 18,
          background: `linear-gradient(140deg, ${accent}10, ${theme.surface})`,
          border: `0.5px solid ${accent}40`,
        }}>
          <div style={{ display:'flex', alignItems:'flex-start', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: `${accent}20`, display:'flex', alignItems:'center', justifyContent:'center', color: accent, flexShrink: 0 }}>
              <Ico.target size={16}/>
            </div>
            <div style={{ flex: 1 }}>
              <SectionLabel theme={theme} style={{ color: accent }}>Weekly review</SectionLabel>
              <div style={{ fontFamily: FONTS.display, fontSize: 18, color: theme.text, marginTop: 4, lineHeight: 1.3 }}>
                Three moves could add <span style={{ color: accent }}><Dh/> 2,250/yr</span> without changing your lifestyle.
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Filters */}
      <div style={{ display: 'flex', gap: 6, padding: '0 16px 14px', overflowX: 'auto' }}>
        {cats.map(c => (
          <Chip key={c} active={cat === c} onClick={() => setCat(c)} theme={theme} accent={accent}>{c}</Chip>
        ))}
      </div>

      {/* Cards */}
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {list.map(r => (
          <Card key={r.id} theme={theme} padded={false} style={{ padding: 18 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap: 10 }}>
              <Tag theme={theme} color={theme.textDim}>{r.category}</Tag>
              <div style={{ display:'flex', alignItems:'center', gap: 5 }}>
                <div style={{ width: 5, height: 5, borderRadius: 3, background: impactColor(r.impact) }}/>
                <span style={{ fontFamily: FONTS.mono, fontSize: 9.5, color: impactColor(r.impact), textTransform:'uppercase', letterSpacing: 1 }}>{r.impact} impact</span>
              </div>
            </div>
            <div style={{
              fontFamily: FONTS.display, fontSize: 17, color: theme.text,
              marginTop: 12, lineHeight: 1.3, letterSpacing: -0.3,
            }}>{dhText(r.headline)}</div>
            <div style={{
              fontSize: 13, color: theme.textDim, marginTop: 8, lineHeight: 1.55, fontFamily: FONTS.ui,
            }}>{dhText(r.body)}</div>

            <div style={{
              marginTop: 14, padding: '10px 12px',
              background: theme.surface2, borderRadius: 10,
              display:'flex', alignItems:'center', gap: 10,
            }}>
              <Ico.sparkle size={13} stroke={accent}/>
              <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: theme.text, letterSpacing: 0.2 }}>{dhText(r.meta)}</span>
            </div>

            <div style={{ display:'flex', gap: 8, marginTop: 14 }}>
              <button style={{
                flex: 1, background: theme.text, color: theme.bg, border: 'none',
                padding: '11px 14px', borderRadius: 12, fontFamily: FONTS.ui,
                fontSize: 13, fontWeight: 500, cursor: 'pointer',
                display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
              }}>
                {r.cta} <Ico.arrowUR size={12} stroke={theme.bg}/>
              </button>
              <button style={{
                background: 'transparent', color: theme.textDim, border: `0.5px solid ${theme.line2}`,
                padding: '11px 14px', borderRadius: 12, fontFamily: FONTS.ui,
                fontSize: 13, cursor: 'pointer',
              }}>Dismiss</button>
            </div>
          </Card>
        ))}

        {/* Peer comparison teaser */}
        <button onClick={() => onNav && onNav('compare')} style={{
          background: theme.surface,
          border: `0.5px solid ${theme.line2}`,
          borderRadius: 16,
          padding: 16,
          cursor: 'pointer',
          textAlign: 'left',
          color: theme.text,
          marginTop: 4,
          display:'flex', alignItems:'center', gap: 12,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 18,
            background: `${accent}15`, color: accent,
            display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0,
          }}><Ico.chart size={16}/></div>
          <div style={{ flex: 1 }}>
            <SectionLabel theme={theme}>How you compare</SectionLabel>
            <div style={{ fontFamily: FONTS.display, fontSize: 14.5, color: theme.text, marginTop: 4, lineHeight: 1.3 }}>
              See where you stand vs. peers in your age, gender and income group
            </div>
          </div>
          <Ico.chevR size={15} stroke={theme.textDim}/>
        </button>

        {/* Upsell */}
        <button onClick={onOpenPaywall} style={{
          background: 'transparent',
          border: `0.5px dashed ${accent}60`,
          borderRadius: 20,
          padding: 18,
          cursor: 'pointer',
          textAlign: 'left',
          color: theme.text,
          marginTop: 8,
        }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div>
              <SectionLabel theme={theme} style={{ color: accent }}>Himma Pro</SectionLabel>
              <div style={{ fontFamily: FONTS.display, fontSize: 15, color: theme.text, marginTop: 4 }}>Unlock 8 more tailored moves</div>
            </div>
            <Ico.chevR size={16} stroke={accent}/>
          </div>
        </button>
      </div>

      <div style={{ height: 10 }}/>
    </Screen>
  );
}

Object.assign(window, { RecommendationsScreen });