// modals.jsx — Broadcast composer, QR/NFC share, Onboarding, Mobile profile

// ─────────────────────────────────────────────────────────────────────────
// Generic modal wrapper
// ─────────────────────────────────────────────────────────────────────────
const Modal = ({ onClose, children, width = 560 }) => {
  React.useEffect(() => {
    const k = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, []);
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" style={{maxWidth: width}} onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// EVENT DETAILS
// ─────────────────────────────────────────────────────────────────────────
const EventDetailsModal = ({ onClose, event, onShowQR }) => {
  const e = event || { t:'Event', d:'—', loc:'—', cat:'—', mine:false };
  const [saved, setSaved] = React.useState(false);

  const addToCalendar = () => {
    // Demo stub: real app would generate ICS or deep-link.
    try { navigator.clipboard?.writeText(`${e.t} — ${e.d} — ${e.loc}`); } catch (_) {}
  };

  return (
    <Modal onClose={onClose} width={820}>
      <div style={{padding:'16px 18px', borderBottom:'1px solid var(--line-2)'}}>
        <div className="row between" style={{alignItems:'flex-start', gap:14}}>
          <div style={{minWidth:0}}>
            <div className="eyebrow">Event</div>
            <h2 className="h2" style={{marginTop:4}}>{e.t}</h2>
            <div className="tiny" style={{color:'var(--mute)', marginTop:6}}>
              <span className="tag accent" style={{marginRight:8}}>{String(e.cat || 'Event')}</span>
              {e.mine ? <span className="tag">Attending</span> : null}
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} style={{width:32, height:32, flex:'0 0 auto'}} aria-label="Close">
            <I name="plus" size={16} style={{transform:'rotate(45deg)'}}/>
          </button>
        </div>
      </div>

      <div className="event-modal" style={{padding:18}}>
        <div className="event-modal-hero">
          <div className="placeholder-img" style={{borderRadius:14, height:220}}>{String(e.cat || '').toUpperCase()}</div>
          <div className="card" style={{padding:16, marginTop:12}}>
            <div className="eyebrow" style={{marginBottom:8}}>When & where</div>
            <div className="row gap-md" style={{alignItems:'flex-start'}}>
              <div style={{width:36, height:36, borderRadius:10, background:'var(--surface-2)', display:'grid', placeItems:'center'}}>
                <I name="events" size={16}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:650}}>{e.d}</div>
                <div className="tiny" style={{color:'var(--mute)', marginTop:2}}>{e.loc}</div>
              </div>
            </div>

            <div className="row gap-sm" style={{marginTop:14, flexWrap:'wrap'}}>
              <button className="btn btn-primary" onClick={addToCalendar}><I name="link" size={14}/> Add to calendar</button>
              <button className="btn btn-ghost" onClick={() => setSaved(v => !v)}>{saved ? 'Saved' : 'Save'}</button>
              <button className="btn btn-ghost" onClick={() => onShowQR?.()}><I name="qr" size={14}/> Show QR</button>
            </div>
            <div className="tiny" style={{color:'var(--mute-2)', marginTop:8}}>Demo note: “Add to calendar” copies details to clipboard.</div>
          </div>
        </div>

        <div className="event-modal-body">
          <div className="card" style={{padding:16}}>
            <div className="eyebrow" style={{marginBottom:8}}>About</div>
            <div style={{color:'var(--ink-2)', lineHeight:1.55}}>
              <div><span style={{fontWeight:650}}>Details in this demo are representative.</span> Use this view to skim the essentials, then save or show your pass on arrival.</div>
            </div>
          </div>

          <div className="card" style={{padding:16}}>
            <div className="card-head" style={{padding:0, marginBottom:10}}>
              <h3 style={{margin:0}}>Your operators attending</h3>
              <span className="tiny" style={{color:'var(--mute)'}}>Sample list</span>
            </div>
            <div className="row" style={{gap:-6}}>
              {['AM','JL','TG','MS','DC'].map((n, i) => (
                <div key={i} className="avatar sm" style={{marginLeft: i === 0 ? 0 : -8, boxShadow:'0 0 0 2px var(--surface)'}}>{n}</div>
              ))}
            </div>
            <div className="tiny" style={{color:'var(--mute)', marginTop:10}}>Tap “Show QR” to share your pass at the door.</div>
          </div>

          <div className="card" style={{padding:16}}>
            <div className="eyebrow" style={{marginBottom:8}}>Location</div>
            <div className="placeholder-img" style={{borderRadius:12, height:140}}>MAP PREVIEW</div>
            <div className="row between" style={{marginTop:10, flexWrap:'wrap', rowGap:10}}>
              <div>
                <div style={{fontWeight:650}}>{e.loc}</div>
                <div className="tiny" style={{color:'var(--mute)'}}>Address not included in this prototype.</div>
              </div>
              <button className="btn btn-ghost" onClick={() => { try { navigator.clipboard?.writeText(String(e.loc || '')); } catch (_) {} }}>
                <I name="copy" size={14}/> Copy location
              </button>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// BROADCAST COMPOSER
// ─────────────────────────────────────────────────────────────────────────
const BroadcastModal = ({ onClose }) => {
  const [msg, setMsg] = React.useState('Excited to share — we just shipped the new Beeprd Pages experience. Take a look.');
  const [targets, setTargets] = React.useState({ x:true, linkedin:true, instagram:false, youtube:false });
  const [audience, setAudience] = React.useState('All subscribers');
  const [posted, setPosted] = React.useState(false);
  const toast = (m) => window.__beeprd?.toast?.(m);

  return (
    <Modal onClose={onClose} width={640}>
      <div style={{padding:'18px 22px', borderBottom:'1px solid var(--line-2)'}}>
        <div className="row between">
          <div>
            <div className="eyebrow">Broadcast</div>
            <h2 className="h2" style={{marginTop:4}}>New Signal</h2>
          </div>
          <button className="icon-btn" onClick={onClose} style={{width:32, height:32}}>
            <I name="plus" size={16} style={{transform:'rotate(45deg)'}}/>
          </button>
        </div>
      </div>

      {posted ? (
        <div style={{padding:'40px 22px', textAlign:'center'}}>
          <div className="avatar lg" style={{margin:'0 auto 16px', background:'var(--good)'}}>
            <I name="check" size={32} stroke={2.2}/>
          </div>
          <div className="serif" style={{fontSize:28}}>Broadcast sent</div>
          <div className="subtle" style={{marginTop:6}}>Your signal is going out to {Object.values(targets).filter(Boolean).length} platforms.</div>
          <div style={{marginTop:20}}>
            <button className="btn btn-primary" onClick={onClose}>Done</button>
          </div>
        </div>
      ) : (
        <>
          <div style={{padding:'18px 22px'}}>
            <div className="row gap-md" style={{marginBottom:14}}>
              <div className="avatar">CH</div>
              <div>
                <div style={{fontWeight:600}}>Clarence Holmes</div>
                <div className="tiny" style={{color:'var(--mute)'}}>Posting to {audience}</div>
              </div>
            </div>
            <textarea className="textarea" value={msg} onChange={(e)=>setMsg(e.target.value)} style={{minHeight:120, fontSize:15, lineHeight:1.5}}/>
            <div className="row between tiny" style={{color:'var(--mute)', marginTop:6}}>
              <span>{msg.length}/280</span>
              <div className="row gap-sm">
                <button className="icon-btn" style={{width:30, height:30}} onClick={() => toast('Add link (demo)')} aria-label="Add link"><I name="link" size={14}/></button>
                <button className="icon-btn" style={{width:30, height:30}} onClick={() => toast('Attach media (demo)')} aria-label="Attach media"><I name="external" size={14}/></button>
              </div>
            </div>

            <div className="eyebrow" style={{marginTop:18, marginBottom:10}}>Send to</div>
            <div className="row gap-sm" style={{flexWrap:'wrap'}}>
              {Object.keys(targets).map(k => (
                <button key={k} onClick={() => setTargets({...targets, [k]: !targets[k]})}
                  className="row gap-sm" style={{
                    padding:'8px 12px', borderRadius:10,
                    border:`1px solid ${targets[k] ? 'var(--accent)' : 'var(--line)'}`,
                    background: targets[k] ? 'var(--accent-soft)' : 'var(--surface)',
                    color: targets[k] ? 'var(--accent-ink)' : 'var(--ink-2)',
                    fontSize:13, fontWeight:500,
                  }}>
                    <PlatformIcon kind={k} size={20}/>
                    {PLATFORMS[k].name}
                    {targets[k] && <I name="check" size={14}/>}
                </button>
              ))}
            </div>

            <div className="row between" style={{marginTop:18, paddingTop:16, borderTop:'1px solid var(--line-2)'}}>
              <select className="select" style={{width:'auto', padding:'8px 32px 8px 12px'}} value={audience} onChange={(e)=>setAudience(e.target.value)}>
                <option>All subscribers</option>
                <option>Top-tier subscribers only</option>
                <option>Connections only</option>
                <option>Public</option>
              </select>
            </div>
          </div>

          <div className="row between" style={{padding:'14px 22px', borderTop:'1px solid var(--line-2)', background:'var(--surface-2)', borderRadius:'0 0 18px 18px'}}>
            <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
            <div className="row gap-sm">
              <button className="btn btn-ghost" onClick={() => toast('Draft saved (demo)')}>Save Draft</button>
              <button className="btn btn-primary" onClick={() => setPosted(true)}>
                <I name="broadcast" size={14}/> Broadcast Now
              </button>
            </div>
          </div>
        </>
      )}
    </Modal>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// QR / NFC SHARE MODAL
// ─────────────────────────────────────────────────────────────────────────
const ShareModal = ({ onClose, onScan }) => {
  const [tab, setTab] = React.useState('Share Profile');
  const [copied, setCopied] = React.useState(false);
  const toast = (m) => window.__beeprd?.toast?.(m);

  return (
    <Modal onClose={onClose} width={620}>
      <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line-2)'}}>
        <div className="row between">
          <div className="seg">
            <button className={tab==='Share Profile' ? 'on' : ''} onClick={() => setTab('Share Profile')}>Share Profile</button>
            <button className={tab==='Share Signal'  ? 'on' : ''} onClick={() => setTab('Share Signal')}>Share Signal</button>
          </div>
          <button className="icon-btn" onClick={onClose} style={{width:32, height:32}}>
            <I name="plus" size={16} style={{transform:'rotate(45deg)'}}/>
          </button>
        </div>
      </div>

      <div className="modal-split" style={{padding:22}}>
        <div style={{flex:'1 1 50%'}}>
          {[
            { i:'qr',    t:'QR Code',     s:'Scan to view my profile' },
            { i:'nfc',   t:'NFC Tap',     s:'Tap to share my profile' },
            { i:'link',  t:'Share Link',  s:'beeprd.com/clarence' },
            { i:'share', t:'Share via…',  s:'Send through other apps' },
          ].map((o, i) => (
            <button key={i} className="row gap-md" style={{
              width:'100%', padding:'12px 14px', borderRadius:12,
              border:'1px solid var(--line)', background:'var(--surface)',
              marginBottom:10, justifyContent:'flex-start', textAlign:'left'
            }} onMouseEnter={(e)=> e.currentTarget.style.background='var(--surface-2)'}
               onMouseLeave={(e)=> e.currentTarget.style.background='var(--surface)'}
               onClick={() => {
                  if (o.i === 'link') {
                    try { navigator.clipboard?.writeText('beeprd.com/clarence'); } catch (_) {}
                    setCopied(true);
                    toast('Copied link');
                    setTimeout(() => setCopied(false), 1600);
                    return;
                  }

                  if (o.i === 'share') {
                    try {
                      if (navigator.share) {
                        navigator.share({ title: 'Beeprd', text: 'beeprd.com/clarence', url: 'https://beeprd.com/clarence' });
                        return;
                      }
                    } catch (_) {}
                    toast('Share sheet (demo)');
                    return;
                  }

                  if (o.i === 'nfc') { toast('Ready to tap (demo)'); return; }
                  if (o.i === 'qr') { toast('QR ready (demo)'); return; }
                }}>
              <div style={{width:36, height:36, borderRadius:10, background:'var(--surface-2)', display:'grid', placeItems:'center', color:'var(--ink-2)'}}>
                <I name={o.i} size={18}/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13.5}}>{o.t}</div>
                <div className="tiny" style={{color:'var(--mute)'}}>{o.s}</div>
              </div>
              {o.i === 'link' && copied && <span className="tag good">Copied</span>}
              <I name="chevron" size={14} style={{color:'var(--mute-2)'}}/>
            </button>
          ))}
        </div>

        <div style={{flex:'1 1 50%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'8px 0'}}>
          <div style={{
            width:200, height:200, borderRadius:14,
            background:'var(--surface)', border:'1px solid var(--line)',
            padding:14, display:'grid', placeItems:'center', position:'relative'
          }}>
            <FakeQR size={172}/>
            <div style={{position:'absolute', width:42, height:42, borderRadius:10, background:'#0C0B0A', display:'grid', placeItems:'center'}}>
              <div className="brand-mark" style={{width:26, height:26, borderRadius:6}}>
                <span className="brand-mark-letter" style={{fontSize:12}}>B</span>
              </div>
            </div>
          </div>
          <div className="tiny" style={{color:'var(--mute)', textAlign:'center', marginTop:14, maxWidth:200}}>Scan to view {tab==='Share Profile' ? 'my profile' : 'this signal'}</div>
          <button className="btn btn-primary" style={{marginTop:14}} onClick={onScan}>Try Scanning →</button>
          <div className="tiny" style={{color:'var(--mute-2)', marginTop:6}}>Preview the subscriber experience</div>
        </div>
      </div>
    </Modal>
  );
};

// crude pseudo-QR (decorative)
const FakeQR = ({ size = 172 }) => {
  const n = 21;
  const cells = React.useMemo(() => {
    // deterministic pattern
    const arr = [];
    for (let y = 0; y < n; y++) {
      const row = [];
      for (let x = 0; x < n; x++) {
        const corner = ((x < 7 && y < 7) || (x > n-8 && y < 7) || (x < 7 && y > n-8));
        const innerCorner = ((x >= 1 && x <= 5 && y >= 1 && y <= 5) ||
                             (x >= n-6 && x <= n-2 && y >= 1 && y <= 5) ||
                             (x >= 1 && x <= 5 && y >= n-6 && y <= n-2));
        const centerCorner = ((x === 0 || x === 6 || y === 0 || y === 6) && (x < 7 && y < 7)) ||
                             ((x === n-1 || x === n-7 || y === 0 || y === 6) && (x > n-8 && y < 7)) ||
                             ((x === 0 || x === 6 || y === n-1 || y === n-7) && (x < 7 && y > n-8));
        let on = false;
        if (corner) {
          on = centerCorner || (x >= 2 && x <= 4 && y >= 2 && y <= 4) ||
               (x >= n-5 && x <= n-3 && y >= 2 && y <= 4) ||
               (x >= 2 && x <= 4 && y >= n-5 && y <= n-3);
        } else {
          on = ((x*13 + y*7 + x*y) % 3 === 0);
        }
        row.push(on);
      }
      arr.push(row);
    }
    return arr;
  }, []);
  const cs = size / n;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {cells.map((row, y) => row.map((on, x) => on ? (
        <rect key={`${x}-${y}`} x={x*cs} y={y*cs} width={cs} height={cs} rx={cs*0.18} fill="var(--ink)"/>
      ) : null))}
    </svg>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// ONBOARDING
// ─────────────────────────────────────────────────────────────────────────
const ONBOARD_STEPS = [
  { title:'Welcome to Beeprd', body:'Your digital beeper for the modern world. Stay connected, share signals, and grow your network.', cta:'Get Started', viz:'pager' },
  { title:'Connect Your Platforms', body:'Automatically pull in your content and updates from the platforms you use most.', cta:'Connect Platforms', viz:'platforms' },
  { title:'Share Your Profile', body:'Let others discover you. Share your Beeprd profile and start building meaningful connections.', cta:'Create My Profile', viz:'card' },
  { title:'Turn On Notifications', body:"When someone interacts with you or your content, you'll get pinged in real time.", cta:'Enable Notifications', viz:'bell' },
  { title:"You're All Set!", body:'Your network is ready. Start broadcasting, connecting, and building your digital presence.', cta:'Go to Dashboard', viz:'check' },
];

const OnboardingModal = ({ onClose }) => {
  const [step, setStep] = React.useState(0);
  const s = ONBOARD_STEPS[step];
  const last = step === ONBOARD_STEPS.length - 1;

  return (
    <Modal onClose={onClose} width={460}>
      <div style={{padding:'18px 22px 8px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div className="tiny mono" style={{color:'var(--mute)', letterSpacing:'.1em', textTransform:'uppercase'}}>
          Step {step+1} of {ONBOARD_STEPS.length}
        </div>
        <button className="link" style={{fontSize:12}} onClick={onClose}>{last ? '' : 'Skip'}</button>
      </div>

      <div style={{padding:'10px 22px 22px'}}>
        <div style={{
          height:220, borderRadius:14, marginBottom:22,
          background:'var(--surface-2)', border:'1px solid var(--line)',
          display:'grid', placeItems:'center', position:'relative', overflow:'hidden'
        }}>
          {s.viz === 'pager' && (
            <div style={{transform:'scale(1)'}}>
              <PagerCard msg="HELLO" id="CLARENCE" subtitle="Beeprd ID" actions={false} compact/>
            </div>
          )}
          {s.viz === 'platforms' && (
            <div className="row gap-md" style={{flexWrap:'wrap', justifyContent:'center', maxWidth:300}}>
              {['x','instagram','linkedin','youtube','podcast','blog'].map(k => (
                <PlatformIcon key={k} kind={k} size={50}/>
              ))}
            </div>
          )}
          {s.viz === 'card' && (
            <div style={{
              width:240, padding:16, borderRadius:14,
              background:'linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #2a1d6a) 100%)',
              color:'#fff'
            }}>
              <div className="row between"><span className="mono tiny" style={{opacity:.7}}>BEEPRD</span><span className="mono tiny" style={{opacity:.7}}>#001247</span></div>
              <div className="serif" style={{fontSize:18, marginTop:18}}>Clarence Holmes</div>
              <div style={{fontSize:11, opacity:.8}}>Entrepreneur · Investor</div>
              <div className="row between" style={{marginTop:18, alignItems:'flex-end'}}>
                <div className="mono" style={{fontSize:11, letterSpacing:'.06em'}}>CLARENCE</div>
                <div style={{width:28, height:28, borderRadius:6, background:'rgba(255,255,255,.15)'}}/>
              </div>
            </div>
          )}
          {s.viz === 'bell' && (
            <div style={{position:'relative'}}>
              <div style={{width:90, height:90, borderRadius:'50%', background:'var(--accent-soft)', display:'grid', placeItems:'center'}}>
                <span style={{color:'var(--accent)'}}><I name="bell" size={42}/></span>
              </div>
              <div style={{position:'absolute', top:-4, right:-4, width:28, height:28, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', fontWeight:700, fontSize:12, boxShadow:'0 0 0 3px var(--surface-2)'}}>3</div>
            </div>
          )}
          {s.viz === 'check' && (
            <div style={{width:90, height:90, borderRadius:'50%', border:'2px solid var(--good)', display:'grid', placeItems:'center', color:'var(--good)'}}>
              <I name="check" size={48} stroke={2}/>
            </div>
          )}
        </div>

        <h2 className="h2" style={{fontSize:22, textAlign:'center', marginBottom:8}}>{s.title}</h2>
        <p className="subtle" style={{textAlign:'center', margin:'0 auto', maxWidth:340}}>{s.body}</p>

        <button className="btn btn-primary" style={{width:'100%', marginTop:22, padding:'12px 16px', fontSize:14}} onClick={() => last ? onClose() : setStep(step+1)}>
          {s.cta}
        </button>

        <div className="row" style={{justifyContent:'center', gap:6, marginTop:18}}>
          {ONBOARD_STEPS.map((_, i) => (
            <div key={i} onClick={() => setStep(i)} style={{
              width: i === step ? 18 : 6, height: 6, borderRadius: 999,
              background: i === step ? 'var(--accent)' : 'var(--line)',
              transition:'all .18s', cursor:'pointer'
            }}/>
          ))}
        </div>
      </div>
    </Modal>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// MOBILE PROFILE PREVIEW
// ─────────────────────────────────────────────────────────────────────────
const MobileProfileModal = ({ onClose }) => (
  <Modal onClose={onClose} width={420}>
    <div className="mobile-frame" style={{margin:0, borderRadius:'18px 18px 0 0', width:'100%'}}>
      {/* status bar */}
      <div className="row between" style={{padding:'14px 20px 0', fontSize:12, fontWeight:600}}>
        <span className="mono">9:41</span>
        <div className="row gap-sm" style={{color:'var(--ink)'}}>
          <span>●●●●</span><span>📶</span><span>100%</span>
        </div>
      </div>

      <div className="row between" style={{padding:'14px 18px'}}>
        <button className="icon-btn" style={{width:32, height:32}} onClick={onClose}><I name="chevron" size={14} style={{transform:'rotate(180deg)'}}/></button>
        <div className="eyebrow">Profile</div>
        <button className="icon-btn" style={{width:32, height:32}} onClick={() => window.__beeprd?.toast?.('Opened in browser (demo)')} aria-label="Open in browser"><I name="external" size={14}/></button>
      </div>

      <div style={{padding:'8px 22px 22px', textAlign:'center'}}>
        <div className="avatar xl" style={{margin:'8px auto 14px'}}>CH</div>
        <div className="row" style={{justifyContent:'center', gap:6, marginBottom:4}}>
          <h2 className="h2" style={{fontSize:22}}>Clarence Holmes</h2>
          <span style={{color:'var(--accent)'}}><I name="badgeCheck" size={16}/></span>
        </div>
        <div className="subtle" style={{fontSize:13}}>Entrepreneur · Investor · Creator</div>
        <div className="tiny" style={{color:'var(--mute)', marginTop:8}}>
          <I name="pin" size={11}/> Atlanta, GA · joined May 2025
        </div>
        <div className="tiny" style={{color:'var(--accent-ink)', marginTop:4}}>beeprd.com/clarence</div>

        <div style={{margin:'18px 0'}}>
          <PagerCard msg="HELLO" id="CLARENCE" subtitle="Beeprd ID" actions={false}/>
        </div>

        <div className="row" style={{justifyContent:'space-around', padding:'14px 0', border:'1px solid var(--line)', borderRadius:12}}>
          <div><div className="num" style={{fontSize:18, fontWeight:600}}>1,328</div><div className="tiny" style={{color:'var(--mute)'}}>Views</div></div>
          <div><div className="num" style={{fontSize:18, fontWeight:600}}>842</div><div className="tiny" style={{color:'var(--mute)'}}>Subscribers</div></div>
          <div><div className="num" style={{fontSize:18, fontWeight:600}}>128</div><div className="tiny" style={{color:'var(--mute)'}}>Pings</div></div>
          <div><div className="num" style={{fontSize:18, fontWeight:600}}>612</div><div className="tiny" style={{color:'var(--mute)'}}>Connections</div></div>
        </div>

        <div className="row gap-sm" style={{marginTop:16}}>
          <button className="btn btn-primary" style={{flex:1}} onClick={() => window.__beeprd?.toast?.('Ping sent')}><I name="send" size={14}/> Send Ping</button>
          <button className="btn btn-ghost" style={{flex:1}} onClick={() => window.__beeprd?.openModal?.('share')}><I name="share" size={14}/> Share</button>
        </div>

        <div style={{marginTop:18, textAlign:'left'}}>
          <div className="eyebrow" style={{marginBottom:8}}>About</div>
          <p className="subtle" style={{margin:0, fontSize:13, lineHeight:1.5}}>
            Founder of JetSuite. I build systems and invest in founders solving real problems.
          </p>
        </div>
      </div>
    </div>
  </Modal>
);

Object.assign(window, { Modal, BroadcastModal, ShareModal, OnboardingModal, MobileProfileModal, EventDetailsModal });