// Paywall — one-time unlock for Apollo 1, links to Payhip
function Paywall({ open, onClose }) {
  const S = window.SOL;
  if (!open) return null;
  const features = [
    { title:'Apollo 1', sub:'Intelligence, unbounded', icon:'apollo' },
    { title:'No refusals', sub:'Direct answers, always', icon:'sparkle' },
    { title:'Video uploads', sub:'Up to 10 minutes per file', icon:'video' },
    { title:'Priority speed', sub:'Skip the queue at peak', icon:'send' },
    { title:'Unlimited Solus X5', sub:'No daily caps, ever', icon:'dot' },
  ];
  const handleUnlock = () => {
    window.open('https://payhip.com/b/U9OGh', '_blank', 'noopener,noreferrer');
  };
  return (
    <div style={{ position:'absolute', inset:0, zIndex:40, background:S.ink, display:'flex', flexDirection:'column', animation:'sol-fade-in 0.22s ease', overflow:'hidden' }}>
      {/* Sun glow */}
      <div style={{ position:'absolute', top:-200, left:'50%', transform:'translateX(-50%)', width:540, height:540, borderRadius:'50%', pointerEvents:'none', background:'radial-gradient(circle, rgba(232,155,60,0.55) 0%, rgba(232,155,60,0.18) 35%, rgba(232,155,60,0) 62%)' }}/>
      <div style={{ position:'absolute', top:-80, left:'50%', transform:'translateX(-50%)', width:260, height:260, borderRadius:'50%', pointerEvents:'none', background:'radial-gradient(circle, rgba(244,199,123,0.35) 0%, rgba(244,199,123,0) 70%)' }}/>

      <div style={{ height:'env(safe-area-inset-top, 44px)', minHeight:44, flexShrink:0 }}/>

      {/* Close */}
      <div style={{ padding:'6px 14px 0', display:'flex', justifyContent:'flex-end', flexShrink:0, position:'relative', zIndex:2 }}>
        <button onClick={onClose} style={{ width:34, height:34, borderRadius:999, border:'none', background:'rgba(245,239,228,0.08)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="close" size={18} color="rgba(245,239,228,0.8)"/>
        </button>
      </div>

      {/* Scrollable content */}
      <div style={{ flex:1, overflowY:'auto', padding:'4px 26px 16px', position:'relative', zIndex:1, WebkitOverflowScrolling:'touch' }}>
        <div style={{ display:'flex', justifyContent:'center', marginTop:6, marginBottom:18 }}>
          <div style={{ width:72, height:72, borderRadius:'50%', background:'rgba(245,239,228,0.04)', border:'1px solid rgba(245,239,228,0.1)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <SunMark size={44} variant="apollo"/>
          </div>
        </div>

        <div style={{ fontFamily:S.mono, fontSize:10, letterSpacing:2, color:S.sun, textTransform:'uppercase', textAlign:'center', marginBottom:12 }}>Apollo 1 — Plus</div>

        <div style={{ fontFamily:S.serif, fontSize:46, lineHeight:0.98, letterSpacing:-1.4, color:S.cream, textAlign:'center' }}>
          Intelligence,<br/><span style={{ fontStyle:'italic', color:S.sun }}>unbounded.</span>
        </div>

        <div style={{ fontFamily:S.sans, fontSize:14, lineHeight:1.55, color:'rgba(245,239,228,0.6)', textAlign:'center', marginTop:14, maxWidth:300, marginLeft:'auto', marginRight:'auto' }}>
          No hedge. No refusal. No second-guessing. Apollo answers.
        </div>

        <div style={{ marginTop:30, display:'flex', flexDirection:'column' }}>
          {features.map((f, i) => (
            <div key={i} style={{ padding:'14px 2px', display:'flex', alignItems:'center', gap:14, borderBottom:i<features.length-1?'1px solid rgba(245,239,228,0.07)':'none' }}>
              <div style={{ width:30, display:'flex', justifyContent:'center', flexShrink:0 }}>
                {f.icon==='apollo'
                  ? <SunMark size={18} variant="apollo"/>
                  : <Icon name={f.icon} size={17} color={S.sun} strokeWidth={1.7}/>}
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:S.sans, fontSize:15, fontWeight:500, color:S.cream, letterSpacing:-0.2 }}>{f.title}</div>
                <div style={{ fontFamily:S.sans, fontSize:12.5, color:'rgba(245,239,228,0.5)', marginTop:1 }}>{f.sub}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ height:18 }}/>
      </div>

      {/* Fixed CTA footer */}
      <div style={{ padding:'16px 26px', paddingBottom:'calc(16px + env(safe-area-inset-bottom, 20px))', flexShrink:0, position:'relative', zIndex:2, borderTop:'1px solid rgba(245,239,228,0.06)', background:'rgba(28,26,23,0.85)', backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)' }}>
        <button onClick={handleUnlock} style={{ width:'100%', height:56, borderRadius:16, border:'none', cursor:'pointer', background:`linear-gradient(135deg, ${S.sun}, ${S.amber})`, color:S.ink, fontFamily:S.sans, fontSize:16, fontWeight:600, letterSpacing:-0.2, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 22px', boxShadow:'0 10px 30px rgba(232,155,60,0.28)' }}>
          <span>Unlock Apollo 1</span>
          <span style={{ display:'flex', alignItems:'baseline', gap:4, fontFamily:S.serif, letterSpacing:-0.8 }}>
            <span style={{ fontSize:14, fontFamily:S.sans, fontWeight:500, opacity:0.75 }}>$</span>
            <span style={{ fontSize:22 }}>10</span>
          </span>
        </button>
        <div style={{ textAlign:'center', marginTop:10, fontFamily:S.sans, fontSize:11, color:'rgba(245,239,228,0.42)', letterSpacing:0.1 }}>
          One-time payment · Yours forever · via Payhip
        </div>
      </div>
    </div>
  );
}

window.Paywall = Paywall;