/* Paywall — RevenueCat + Apple IAP, monthly + annual */
const { Card, Btn, Icon } = window.GG;

const Paywall = ({ onClose = () => {} }) => {
  const [plan, setPlan] = React.useState('annual');

  return (
    <div className="gg-screen" style={{ background: '#fff' }}>
      <div className="gg-topbar" style={{ borderBottom: 0, marginTop: 64, paddingTop: 10 }}>
        <button className="gg-btn gg-btn--secondary" style={{ padding: '8px 12px', borderRadius: 9999 }} onClick={onClose} aria-label="Close">
          <Icon name="x" size={16} color="#333" />
        </button>
        <div style={{ font: '600 14px var(--font-ui)', color: '#222' }}>Guju Guru Premium</div>
        <div style={{ width: 32 }} />
      </div>

      <div className="gg-body">
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <img src="../../assets/AppIcon.png" alt="" style={{ width: 88, height: 88, borderRadius: 20, boxShadow: '0 0 15px rgba(44,30,116,0.16)' }} />
          <h1 style={{ font: '500 32px var(--font-display)', color: '#222', margin: '14px 0 6px', lineHeight: 1.1 }}>Unlock every unit.</h1>
          <p style={{ font: '400 14px var(--font-ui)', color: '#45515e', margin: 0 }}>All 4 units, all 5 sentence themes, every achievement.</p>
        </div>

        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {['All 4 units unlocked', 'All 5 sentence-builder themes', 'Every achievement & streak freeze', 'Cancel anytime'].map(b => (
            <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, font: '500 14px var(--font-ui)', color: '#222' }}>
              <span style={{ width: 22, height: 22, borderRadius: 9999, background: '#e8ffea', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="check" size={14} color="#10b981" stroke={2.5} />
              </span>
              {b}
            </li>
          ))}
        </ul>

        <PlanRow id="annual"  selected={plan==='annual'}  onClick={() => setPlan('annual')}  title="Annual"  price="$49.99 / yr" sub="$4.17/mo · save 40%" badge="Best value" />
        <div style={{ height: 10 }} />
        <PlanRow id="monthly" selected={plan==='monthly'} onClick={() => setPlan('monthly')} title="Monthly" price="$6.99 / mo"   sub="Billed monthly" />

        <p className="caption" style={{ marginTop: 14, textAlign: 'center' }}>Auto-renews. Cancel from Settings &gt; Apple ID.</p>
      </div>

      <div style={{ padding: '12px 20px 20px', borderTop: '1px solid var(--border-light)' }}>
        <Btn variant="primary" pill block>
          Start {plan === 'annual' ? 'annual' : 'monthly'}
        </Btn>
      </div>
    </div>
  );
};

const PlanRow = ({ selected, onClick, title, price, sub, badge }) => (
  <button onClick={onClick} style={{
    width: '100%', textAlign: 'left',
    background: '#fff',
    border: `2px solid ${selected ? '#1456f0' : '#e5e7eb'}`,
    borderRadius: 16, padding: 14,
    display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    boxShadow: selected ? '0 0 15px rgba(44,30,116,0.16)' : 'none',
    transition: 'border 150ms ease-out, box-shadow 150ms ease-out',
  }}>
    <span style={{ width: 20, height: 20, borderRadius: 9999, border: `2px solid ${selected ? '#1456f0' : '#e5e7eb'}`, background: selected ? '#1456f0' : '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
      {selected && <span style={{ width: 8, height: 8, background: '#fff', borderRadius: 9999 }} />}
    </span>
    <div style={{ flex: 1 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ font: '600 16px var(--font-display)', color: '#222' }}>{title}</span>
        {badge && <span className="gg-chip" style={{ background: '#e8efff', color: '#1456f0', padding: '3px 8px', fontSize: 11 }}>{badge}</span>}
      </div>
      <div style={{ font: '400 12px var(--font-ui)', color: '#8e8e93', marginTop: 2 }}>{sub}</div>
    </div>
    <div style={{ font: '600 15px var(--font-data)', color: '#222' }}>{price}</div>
  </button>
);

window.Paywall = Paywall;