// Hero + Confirmation screens (updated)

function ScreenHero({ onEnter, tweaks = {} }) {
  const [pressed, setPressed] = React.useState(false);
  const ctaCopy = tweaks.ctaCopy || 'Tap To Win';
  const variant = tweaks.headlineVariant || 'primary';

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, #006FD6 0%, #003A6E 100%)',
      overflow: 'hidden', color: '#fff',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 20% 30%, rgba(68,200,245,0.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(247,147,26,0.15), transparent 45%)',
        pointerEvents: 'none',
      }}/>

      {/* ghosted bitcoin marks */}
      <div style={{ position: 'absolute', top: 140, left: -30, opacity: 0.1, transform: 'rotate(-18deg)', pointerEvents: 'none' }}>
        <BitcoinLogo size={160}/>
      </div>
      <div style={{ position: 'absolute', bottom: 200, right: -24, opacity: 0.08, transform: 'rotate(22deg)', pointerEvents: 'none' }}>
        <BitcoinLogo size={140}/>
      </div>

      {/* context strip */}
      <div style={{ position: 'relative', zIndex: 2, padding: '56px 20px 0 20px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5,
          letterSpacing: 2.2, textTransform: 'uppercase',
          color: '#FFC800', fontWeight: 600,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FFC800', boxShadow: '0 0 12px #FFC800' }}/>
          <span>APE WATER × THE GREEK</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span>JUNE 2026</span>
        </div>
      </div>

      {/* headline — sized so button always fits */}
      <div style={{ position: 'relative', zIndex: 2, padding: '14px 20px 0 20px' }}>
        <h1 style={{
          margin: 0, fontFamily: 'Anton, Impact, sans-serif',
          fontSize: variant === 'can' ? 58 : variant === 'primal' ? 46 : 60,
          lineHeight: 0.88, letterSpacing: -1.2,
          textTransform: 'uppercase', color: '#fff',
          textShadow: '0 2px 0 rgba(0,0,0,0.12)',
        }}>
          {variant === 'primary' && (<>Win <span style={{ color: '#F7931A' }}>Bitcoin.</span><br/>Drink <span style={{ color: '#44C8F5' }}>Water.</span></>)}
          {variant === 'can' && (<>Can <span style={{ color: '#44C8F5' }}>→</span> <span style={{ color: '#F7931A' }}>Coin.</span><br/><span style={{ fontSize: 24, letterSpacing: 1, opacity: 0.85 }}>IN 90 SECONDS.</span></>)}
          {variant === 'primal' && (<>Satisfy your <span style={{ color: '#44C8F5' }}>primal</span> thirst. <span style={{ color: '#F7931A' }}>Take the BTC.</span></>)}
        </h1>
        <div style={{
          marginTop: 10, fontFamily: 'Inter', fontSize: 14,
          lineHeight: 1.35, color: 'rgba(255,255,255,0.85)', maxWidth: 280,
        }}>
          Scan the can. Answer 10 levels. Take home <b style={{ color: '#FFE8A6' }}>$1,500 in BTC.</b>
        </div>
      </div>

      {/* can */}
      <div style={{
        position: 'relative', zIndex: 2, flex: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        minHeight: 0,
      }}>
        <div style={{
          position: 'absolute', width: 280, height: 280, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(247,147,26,0.3) 0%, rgba(207,152,67,0.15) 40%, transparent 70%)',
          filter: 'blur(10px)',
        }}/>
        <svg viewBox="0 0 300 300" width="320" height="320" style={{ position: 'absolute', opacity: 0.5, animation: 'spin 40s linear infinite' }}>
          {Array.from({length: 16}).map((_, i) => (
            <rect key={i} x="148" y="0" width="4" height="150" fill="#F7931A" opacity="0.3"
              transform={`rotate(${i * 22.5} 150 150)`}/>
          ))}
        </svg>
        <div style={{ transform: 'rotate(-8deg)', position: 'relative', zIndex: 3 }}>
          <GoldCan width={180} height={315}/>
        </div>
        <div style={{ position: 'absolute', left: -6, bottom: 10, zIndex: 4, transform: 'rotate(-8deg)' }}>
          <Bingo pose="peek" size={86}/>
        </div>
      </div>

      {/* CTA always visible */}
      <div style={{ position: 'relative', zIndex: 2, padding: '0 20px 32px 20px' }}>
        <button
          onClick={onEnter}
          onTouchStart={() => setPressed(true)} onTouchEnd={() => setPressed(false)}
          onMouseDown={() => setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)}
          style={{
            width: '100%', border: 'none', background: '#FFC800', color: '#140602',
            padding: '20px 22px',
            fontFamily: 'Anton, Impact, sans-serif', fontSize: 26, letterSpacing: 2,
            borderRadius: 16, textTransform: 'uppercase', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            boxShadow: pressed ? '0 2px 0 #140602' : '0 6px 0 #140602, 0 12px 20px rgba(0,0,0,0.3)',
            transform: pressed ? 'translateY(4px)' : 'translateY(0)',
            transition: 'all 80ms ease',
          }}>
          <span>{ctaCopy}</span>
          <svg width="26" height="26" viewBox="0 0 28 28">
            <circle cx="14" cy="14" r="13" fill="#140602"/>
            <path d="M10 14 h9 m-4 -4 l4 4 -4 4" stroke="#FFC800" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <div style={{
          marginTop: 10, textAlign: 'center',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.4,
          color: 'rgba(255,255,255,0.65)',
        }}>
          10 LEVELS · ~2 MIN · ENTRY CONFIRMED INSTANTLY
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// Confirmation / Celebration
// ───────────────────────────────────────────────
function ScreenConfirm({ onBack, entryNumber, bonusEntries }) {
  const [counter, setCounter] = React.useState(0);
  const [bonusCounter, setBonusCounter] = React.useState(0);
  const [shareFlash, setShareFlash] = React.useState(null);
  const [smsOpen, setSmsOpen] = React.useState(false);
  const [friends, setFriends] = React.useState(['', '', '', '', '']);
  const [sentFriends, setSentFriends] = React.useState([]);

  React.useEffect(() => {
    let c = 0;
    const step = Math.max(1, Math.floor(entryNumber / 22));
    const id = setInterval(() => {
      c += step;
      if (c >= entryNumber) { c = entryNumber; clearInterval(id); }
      setCounter(c);
    }, 40);
    return () => clearInterval(id);
  }, [entryNumber]);

  React.useEffect(() => {
    let c = 0;
    const id = setInterval(() => {
      c += 1;
      if (c >= bonusEntries) { c = bonusEntries; clearInterval(id); }
      setBonusCounter(c);
    }, 80);
    return () => clearInterval(id);
  }, [bonusEntries]);

  const shareClick = (kind) => {
    if (kind === 'SMS') { setSmsOpen(true); return; }
    console.log('[share]', kind, 'tapped — would open', kind, 'share sheet');
    setShareFlash(kind);
    setTimeout(() => setShareFlash(null), 1400);
  };

  const updateFriend = (i, val) => {
    const next = [...friends];
    next[i] = val;
    setFriends(next);
  };

  const sendInvites = () => {
    const valid = friends
      .map((p, i) => ({ p: p.replace(/\D/g, ''), i }))
      .filter(x => x.p.length >= 10 && !sentFriends.includes(x.i));
    const newSent = [...sentFriends, ...valid.map(v => v.i)];
    setSentFriends(newSent);
    console.log('[SMS referral] sent to', valid.map(v => friends[v.i]));
  };

  const ShareBtn = ({ kind, children }) => {
    const [p, setP] = React.useState(false);
    const active = shareFlash === kind;
    return (
      <button
        onClick={() => shareClick(kind)}
        onTouchStart={() => setP(true)} onTouchEnd={() => setP(false)}
        onMouseDown={() => setP(true)} onMouseUp={() => setP(false)} onMouseLeave={() => setP(false)}
        style={{
          flex: 1, padding: '14px 8px',
          background: active ? 'rgba(247,147,26,0.25)' : (p ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.08)'),
          border: `1.5px solid ${active ? '#F7931A' : 'rgba(255,232,166,0.35)'}`,
          borderRadius: 14, cursor: 'pointer', color: '#fff',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5, letterSpacing: 1.5,
          transform: p ? 'translateY(2px) scale(0.97)' : 'translateY(0) scale(1)',
          boxShadow: p ? 'inset 0 2px 8px rgba(0,0,0,0.3)' : '0 4px 0 rgba(0,0,0,0.25)',
          transition: 'all 120ms cubic-bezier(.3,1.4,.5,1)',
          position: 'relative', overflow: 'hidden',
        }}>
        {children}
        {active && <div style={{
          position: 'absolute', inset: 0, background: 'radial-gradient(circle, rgba(247,147,26,0.5), transparent 70%)',
          animation: 'ripple 500ms ease-out', pointerEvents: 'none',
        }}/>}
      </button>
    );
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, #003A6E 0%, #140602 100%)',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden', color: '#fff',
    }}>
      {/* stars */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {Array.from({length: 36}).map((_, i) => {
          const x = (i * 37) % 100, y = (i * 73) % 100, s = (i % 4) + 1;
          return (
            <div key={i} style={{
              position: 'absolute', left: `${x}%`, top: `${y}%`,
              width: s, height: s, borderRadius: '50%',
              background: '#FFE8A6', opacity: 0.4 + (i%3)*0.15,
              boxShadow: s > 2 ? '0 0 6px #FFE8A6' : 'none',
            }}/>
          );
        })}
      </div>

      {/* header */}
      <div style={{ position: 'relative', zIndex: 3, padding: '54px 20px 0 20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button onClick={onBack} style={{
            width: 38, height: 38, borderRadius: '50%', border: '1.5px solid rgba(255,255,255,0.3)',
            background: 'transparent', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="12" height="12" viewBox="0 0 14 14">
              <path d="M9 2 L3 7 L9 12" stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2,
            color: '#F7931A', fontWeight: 600,
          }}>✓ ENTRY CONFIRMED</div>
        </div>
      </div>

      {/* HERO PRIZE — real Bitcoin logo with rays */}
      <div style={{
        position: 'relative', zIndex: 3,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: '18px 20px 0 20px',
      }}>
        <div style={{ position: 'relative', width: 170, height: 170, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 220 220" width="220" height="220" style={{ position: 'absolute', inset: -25, animation: 'spin 30s linear infinite', opacity: 0.75 }}>
            {Array.from({length: 20}).map((_, i) => (
              <rect key={i} x="108" y="0" width="4" height="105" fill="#F7931A" opacity={i%2?0.3:0.55} transform={`rotate(${i * 18} 110 110)`}/>
            ))}
          </svg>
          <BitcoinLogo size={140} glow/>
        </div>

        <div style={{
          marginTop: 14,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 2,
          color: '#44C8F5',
        }}>— CONGRATS, APE —</div>
        <h1 style={{
          margin: '6px 0 0 0', fontFamily: 'Anton, Impact, sans-serif',
          fontSize: 72, lineHeight: 0.85, letterSpacing: -1.6,
          textTransform: 'uppercase', color: '#FFC800',
          textShadow: '0 4px 0 #140602, 0 8px 30px rgba(255,200,0,0.4)',
          textAlign: 'center',
        }}>
          You're <span style={{ color: '#F7931A' }}>IN.</span>
        </h1>
        <div style={{
          marginTop: 6, fontFamily: 'Anton', fontSize: 20, letterSpacing: 1,
          color: '#FFE8A6',
        }}>
          {bonusCounter} ENTRIES BANKED
        </div>
      </div>

      {/* entry # card */}
      <div style={{
        position: 'relative', zIndex: 3,
        margin: '18px 20px 0 20px',
        padding: '14px 18px',
        background: 'linear-gradient(135deg, rgba(247,147,26,0.18) 0%, rgba(247,147,26,0.05) 100%)',
        border: '1.5px solid rgba(247,147,26,0.4)',
        borderRadius: 16,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: 1.8,
            color: '#FFE8A6', opacity: 0.7,
          }}>ENTRY NUMBER</div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 26, letterSpacing: 1.5,
            color: '#FFE8A6', fontWeight: 700, lineHeight: 1,
          }}>#{String(counter).padStart(5, '0')}</div>
        </div>
        <div style={{
          padding: '6px 10px', borderRadius: 100, background: 'rgba(255,200,0,0.18)',
          color: '#FFC800', fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: 1,
        }}>$1,500 IN BTC</div>
      </div>

      {/* Recruit friends — headline flow */}
      <div style={{ position: 'relative', zIndex: 3, padding: '14px 20px 0 20px' }}>
        <button onClick={() => setSmsOpen(true)} style={{
          width: '100%', padding: '16px 18px',
          background: 'linear-gradient(90deg, #F7931A 0%, #FFC800 100%)',
          border: 'none', borderRadius: 14, cursor: 'pointer',
          color: '#140602', fontFamily: 'Anton', fontSize: 20, letterSpacing: 1.5,
          textTransform: 'uppercase', textAlign: 'left',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          boxShadow: '0 4px 0 #140602, 0 10px 18px rgba(0,0,0,0.3)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
            <span>Text 5 Friends</span>
            <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: 1.5, opacity: 0.7, fontWeight: 600 }}>+1 ENTRY EACH · UP TO +5</span>
          </div>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 6a2 2 0 012-2h12a2 2 0 012 2v9a2 2 0 01-2 2H10l-5 4v-4H6a2 2 0 01-2-2V6z" stroke="#140602" strokeWidth="2" strokeLinejoin="round"/></svg>
        </button>
        {sentFriends.length > 0 && (
          <div style={{
            marginTop: 8, fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: 1.5,
            color: '#F7931A', textAlign: 'center',
          }}>✓ {sentFriends.length} INVITE{sentFriends.length===1?'':'S'} SENT · +{sentFriends.length} BONUS LOCKED</div>
        )}
      </div>

      {/* Social share — secondary */}
      <div style={{ position: 'relative', zIndex: 3, padding: '14px 20px 0 20px' }}>
        <div style={{
          fontFamily: 'Anton', fontSize: 13, letterSpacing: 1.5,
          color: 'rgba(255,232,166,0.6)', marginBottom: 8,
        }}>OR POST IT · +3 BONUS</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <ShareBtn kind="IG">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="#FFE8A6" strokeWidth="1.8"/><circle cx="12" cy="12" r="4" stroke="#FFE8A6" strokeWidth="1.8"/><circle cx="17.5" cy="6.5" r="1" fill="#FFE8A6"/></svg>
            INSTAGRAM
          </ShareBtn>
          <ShareBtn kind="TIKTOK">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M13 4v11a3 3 0 11-3-3" stroke="#FFE8A6" strokeWidth="1.8" strokeLinecap="round"/><path d="M13 4c0 3 2 5 5 5" stroke="#FFE8A6" strokeWidth="1.8" strokeLinecap="round"/></svg>
            TIKTOK
          </ShareBtn>
          <ShareBtn kind="X">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 4l16 16M20 4L4 20" stroke="#FFE8A6" strokeWidth="1.8" strokeLinecap="round"/></svg>
            X / TWITTER
          </ShareBtn>
        </div>
        {shareFlash && (
          <div style={{
            marginTop: 8, textAlign: 'center',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 1.5,
            color: '#F7931A',
          }}>✓ {shareFlash} READY · +3 BONUS LOCKED</div>
        )}
      </div>

      {/* SMS Referral Modal */}
      {smsOpen && (
        <div style={{
          position: 'absolute', inset: 0, zIndex: 50,
          background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
          display: 'flex', alignItems: 'flex-end',
          animation: 'fadein 200ms ease',
        }} onClick={() => setSmsOpen(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%', background: '#F9F0CD', color: '#140602',
            borderRadius: '28px 28px 0 0', padding: '22px 20px 26px',
            boxShadow: '0 -20px 40px rgba(0,0,0,0.4)',
            maxHeight: '85%', overflow: 'auto',
            animation: 'slideup 280ms cubic-bezier(.2,.8,.2,1)',
          }}>
            <div style={{
              width: 42, height: 4, borderRadius: 100, background: 'rgba(20,6,2,0.2)',
              margin: '0 auto 14px',
            }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
              <div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 9.5, letterSpacing: 1.8, color: '#F7931A', fontWeight: 700 }}>
                  TEXT-A-FRIEND · BONUS ENTRIES
                </div>
                <h2 style={{
                  margin: '4px 0 0 0', fontFamily: 'Anton', fontSize: 32, lineHeight: 0.95,
                  textTransform: 'uppercase', letterSpacing: -0.8,
                }}>
                  Drag 5 apes<br/>into the jungle.
                </h2>
              </div>
              <button onClick={() => setSmsOpen(false)} style={{
                width: 32, height: 32, borderRadius: '50%', border: 'none',
                background: 'rgba(20,6,2,0.08)', cursor: 'pointer',
                fontFamily: 'Inter', fontSize: 18, lineHeight: 1,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>×</button>
            </div>
            <div style={{
              marginTop: 10, fontFamily: 'Inter', fontSize: 13, lineHeight: 1.45,
              color: 'rgba(20,6,2,0.7)',
            }}>
              Every friend you text gets <b>+1 entry for you</b>. Max 5. They'll get a link to their own shot at the BTC.
            </div>

            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {friends.map((val, i) => {
                const sent = sentFriends.includes(i);
                const valid = val.replace(/\D/g, '').length >= 10;
                return (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    padding: '10px 12px',
                    background: sent ? 'rgba(247,147,26,0.15)' : '#fff',
                    border: `2px solid ${sent ? '#F7931A' : (valid ? '#006FD6' : 'rgba(20,6,2,0.1)')}`,
                    borderRadius: 12,
                    transition: 'all 140ms ease',
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: sent ? '#F7931A' : 'rgba(20,6,2,0.06)',
                      color: sent ? '#140602' : 'rgba(20,6,2,0.5)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 700,
                      flexShrink: 0,
                    }}>
                      {sent ? '✓' : i + 1}
                    </div>
                    <input
                      type="tel"
                      placeholder={`Friend ${i+1} · (415) 555-0${100+i}`}
                      value={val}
                      disabled={sent}
                      onChange={e => updateFriend(i, e.target.value)}
                      style={{
                        flex: 1, border: 'none', background: 'transparent', outline: 'none',
                        fontFamily: 'Inter', fontSize: 15, color: '#140602',
                        padding: '4px 0',
                      }}
                    />
                    {sent && (
                      <span style={{
                        fontFamily: 'JetBrains Mono', fontSize: 9, letterSpacing: 1,
                        color: '#F7931A', fontWeight: 700,
                      }}>+1</span>
                    )}
                  </div>
                );
              })}
            </div>

            {/* preview of the text */}
            <div style={{
              marginTop: 14, padding: '12px 14px',
              background: 'rgba(20,6,2,0.05)', borderRadius: 12,
              fontFamily: 'Inter', fontSize: 12, color: 'rgba(20,6,2,0.7)',
              lineHeight: 1.4,
            }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 9, letterSpacing: 1.5, marginBottom: 4, opacity: 0.6 }}>PREVIEW</div>
              "yo — I just entered to win $1,500 in Bitcoin from Ape Water at The Greek. you should too: drinkape.com/g 🐒"
            </div>

            <button onClick={sendInvites} style={{
              marginTop: 14, width: '100%', border: 'none',
              background: '#140602', color: '#FFC800',
              padding: '18px 20px',
              fontFamily: 'Anton', fontSize: 22, letterSpacing: 1.8,
              borderRadius: 14, textTransform: 'uppercase', cursor: 'pointer',
              boxShadow: '0 4px 0 #3A2605',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            }}>
              <span>Send {friends.filter((p,i) => p.replace(/\D/g,'').length >= 10 && !sentFriends.includes(i)).length || ''} Invites</span>
              <svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 12 L20 12 M14 6 L20 12 L14 18" stroke="#FFC800" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <div style={{
              marginTop: 10, textAlign: 'center',
              fontFamily: 'JetBrains Mono', fontSize: 9.5, letterSpacing: 1.2,
              color: 'rgba(20,6,2,0.5)',
            }}>
              STANDARD MSG & DATA RATES. ONE TEXT PER FRIEND. NO SPAM.
            </div>
          </div>
        </div>
      )}

      {/* footer */}
      <div style={{
        position: 'relative', zIndex: 3, flex: 1,
        display: 'flex', alignItems: 'flex-end',
        padding: '14px 20px 28px 20px',
      }}>
        <div style={{
          fontFamily: 'Inter', fontSize: 11, lineHeight: 1.4,
          color: 'rgba(255,255,255,0.5)', textAlign: 'center', width: '100%',
          fontStyle: 'italic',
        }}>
          We'll text the winner on <b style={{ color: '#FFC800', fontStyle: 'normal' }}>July 3rd</b>. Don't peace out on your phone that weekend.
        </div>
      </div>

      {/* Bingo dabbing */}
      <div style={{ position: 'absolute', right: -14, top: 86, zIndex: 4, transform: 'rotate(6deg)' }}>
        <Bingo pose="dab" size={108}/>
      </div>
    </div>
  );
}

window.ScreenHero = ScreenHero;
window.ScreenConfirm = ScreenConfirm;