// Paywall

function PaywallScreen({ theme, accent, onClose }) {
  const [annual, setAnnual] = React.useState(true);
  const [plan, setPlan] = React.useState('pro');

  const price = plan === 'free' ? 0 : (annual ? 39 : 49);
  const billed = plan === 'free' ? null : (annual ? <><Dh/> {price * 12}/yr · save 20%</> : 'Billed monthly');

  return (
    <div style={{ height: '100%', background: theme.bg, color: theme.text, display:'flex', flexDirection:'column', position: 'relative' }}>
      {/* Close */}
      <div style={{ padding: '12px 20px 0', display: 'flex', justifyContent:'space-between', alignItems: 'center' }}>
        <Wordmark color={theme.text} accent={accent} size={18}/>
        <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: 16, background: theme.surface, border: `0.5px solid ${theme.line2}`, color: theme.text, cursor: 'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Ico.close size={14}/>
        </button>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '22px 20px 200px' }}>
        {/* Hero */}
        <div style={{ marginBottom: 28 }}>
          <SectionLabel theme={theme} style={{ color: accent }}>himma · Pro</SectionLabel>
          <div style={{
            fontFamily: FONTS.display, fontSize: 34, color: theme.text,
            letterSpacing: -1, lineHeight: 1.08, marginTop: 8,
          }}>
            Your complete<br/>financial picture.
          </div>
          <div style={{ fontSize: 13.5, color: theme.textDim, marginTop: 10, lineHeight: 1.55, fontFamily: FONTS.ui }}>
            Connect every asset class, not just banking. Unlimited AI analysis. Personalised recommendations.
          </div>
        </div>

        {/* Monthly / annual toggle */}
        <div style={{
          background: theme.surface, border: `0.5px solid ${theme.line}`,
          borderRadius: 999, padding: 4, display: 'flex', gap: 4,
          marginBottom: 18,
        }}>
          {['Monthly','Annual'].map((l, i) => {
            const active = (i === 0 ? !annual : annual);
            return (
              <button key={l} onClick={() => setAnnual(i === 1)} style={{
                flex: 1, padding: '9px 10px', borderRadius: 999,
                background: active ? theme.text : 'transparent',
                color: active ? theme.bg : theme.text,
                border: 'none', cursor: 'pointer',
                fontFamily: FONTS.ui, fontSize: 12.5, fontWeight: 500,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                {l}
                {i === 1 && <span style={{ fontFamily: FONTS.mono, fontSize: 9, padding: '2px 5px', borderRadius: 4, background: active ? `${theme.bg}15` : `${accent}30`, color: active ? theme.bg : accent, letterSpacing: 0.5 }}>−20%</span>}
              </button>
            );
          })}
        </div>

        {/* Plans */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
          <PlanCard
            selected={plan === 'free'}
            onSelect={() => setPlan('free')}
            name="Free"
            tagline="Banking + basic tracking"
            price={0}
            theme={theme} accent={accent}
            features={['UAE bank aggregation','Basic spend tracking','5 AI queries / month']}
          />
          <PlanCard
            selected={plan === 'pro'}
            onSelect={() => setPlan('pro')}
            name="Himma Pro"
            tagline="Every asset class, unlimited AI"
            price={annual ? 39 : 49}
            billed={annual ? 'per month · billed yearly' : 'per month'}
            theme={theme} accent={accent}
            featured
            features={[
              'All asset classes — crypto, brokerages, real estate',
              'Unlimited AI chat & analysis',
              'Personalised recommendations engine',
              'Priority human support',
              'Export to CSV + accountant sharing',
            ]}
          />
        </div>

        {/* Comparison feel */}
        <div style={{ marginTop: 20 }}>
          <SectionLabel theme={theme}>What's included</SectionLabel>
          <div style={{ marginTop: 12, display:'flex', flexDirection:'column', gap: 2 }}>
            {[
              { label: 'Bank aggregation (UAE + intl)', free: true, pro: true },
              { label: 'Spending categorisation',       free: true, pro: true },
              { label: 'AI chat',                       free: '5/mo', pro: 'Unlimited' },
              { label: 'Asset classes',                 free: 'Banking', pro: 'All' },
              { label: 'Recommendations engine',        free: false, pro: true },
              { label: 'Net-worth reporting',           free: false, pro: true },
              { label: 'Mortgage & liquidity modeling', free: false, pro: true },
            ].map((row, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns: '1fr 60px 60px',
                padding: '10px 2px', gap: 10, alignItems:'center',
                borderBottom: `0.5px solid ${theme.line}`,
                fontSize: 12.5, fontFamily: FONTS.ui,
              }}>
                <span style={{ color: theme.text }}>{row.label}</span>
                <span style={{ textAlign: 'center', color: theme.textMute, fontFamily: FONTS.mono, fontSize: 11 }}>
                  {row.free === true ? '•' : row.free === false ? '—' : row.free}
                </span>
                <span style={{ textAlign: 'center', color: accent, fontFamily: FONTS.mono, fontSize: 11 }}>
                  {row.pro === true ? '•' : row.pro === false ? '—' : row.pro}
                </span>
              </div>
            ))}
            <div style={{
              display:'grid', gridTemplateColumns: '1fr 60px 60px', marginTop: 6,
              fontFamily: FONTS.mono, fontSize: 9.5, color: theme.textMute, textTransform:'uppercase', letterSpacing: 1, gap: 10,
            }}>
              <span></span>
              <span style={{ textAlign: 'center' }}>Free</span>
              <span style={{ textAlign: 'center', color: accent }}>Pro</span>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 24, fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, textAlign:'center', lineHeight: 1.6 }}>
          Licensed in the UAE · Bank-grade encryption<br/>Cancel anytime · No questions asked
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '14px 20px 34px',
        background: `linear-gradient(to top, ${theme.bg} 70%, ${theme.bg}00)`,
      }}>
        <button style={{
          width: '100%',
          background: plan === 'free' ? theme.surface2 : accent,
          color: plan === 'free' ? theme.text : theme.bg,
          border: `0.5px solid ${plan === 'free' ? theme.line2 : accent}`,
          borderRadius: 16,
          padding: '16px',
          fontFamily: FONTS.ui, fontSize: 14.5, fontWeight: 600,
          cursor: 'pointer', letterSpacing: 0.1,
        }}>
          {plan === 'free' ? 'Continue with Free' : 'Start 14-day free trial'}
        </button>
        {billed && plan !== 'free' && (
          <div style={{ textAlign:'center', fontFamily: FONTS.mono, fontSize: 10, color: theme.textMute, marginTop: 10 }}>
            Then <Dh/> {price}/mo · {billed}
          </div>
        )}
      </div>
    </div>
  );
}

function PlanCard({ name, tagline, price, billed, features, selected, onSelect, theme, accent, featured }) {
  return (
    <button onClick={onSelect} style={{
      background: featured ? `linear-gradient(145deg, ${accent}10, ${theme.surface})` : theme.surface,
      border: `${selected ? 1.5 : 0.5}px solid ${selected ? accent : theme.line2}`,
      borderRadius: 18,
      padding: 16,
      cursor: 'pointer', textAlign: 'left',
      color: theme.text,
      position: 'relative',
    }}>
      {featured && <div style={{
        position: 'absolute', top: -9, right: 16,
        fontFamily: FONTS.mono, fontSize: 9, letterSpacing: 1.2, textTransform: 'uppercase',
        background: accent, color: theme.bg,
        padding: '3px 8px', borderRadius: 4, fontWeight: 600,
      }}>Recommended</div>}

      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div>
          <div style={{ fontFamily: FONTS.display, fontSize: 17, color: theme.text }}>{name}</div>
          <div style={{ fontSize: 11.5, color: theme.textDim, marginTop: 3, fontFamily: FONTS.ui }}>{tagline}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div>
            <span style={{ fontFamily: FONTS.mono, fontSize: 14, color: theme.textMute, verticalAlign: 'top', marginRight: 4, display: 'inline-flex', alignItems: 'center' }}><Dh/></span>
            <span style={{ fontFamily: FONTS.display, fontSize: 22, color: theme.text, fontVariantNumeric: 'tabular-nums' }}>{price}</span>
          </div>
          <div style={{ fontSize: 9.5, color: theme.textMute, fontFamily: FONTS.mono, marginTop: -2 }}>{billed || 'per month'}</div>
        </div>
      </div>

      <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 5 }}>
        {features.map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: theme.textDim, fontFamily: FONTS.ui }}>
            <Ico.check size={12} stroke={selected ? accent : theme.textDim} sw={2}/>
            <span>{f}</span>
          </div>
        ))}
      </div>
    </button>
  );
}

Object.assign(window, { PaywallScreen });