// Shared bits: header, footer, primitives, placeholders.

function Btn({ children, variant='primary', size='md', as='button', ...rest }){
  const sizes = { sm:{p:'10px 16px',fs:13}, md:{p:'14px 22px',fs:14}, lg:{p:'18px 30px',fs:15}};
  const s = sizes[size];
  const styles = {
    primary: { background:'var(--tz-blue)', color:'#fff', border:'1px solid var(--tz-blue)'},
    gold:    { background:'var(--tz-gold)', color:'var(--tz-blue)', border:'1px solid var(--tz-gold)'},
    ghost:   { background:'transparent', color:'var(--tz-blue)', border:'1px solid rgba(11,42,74,.2)'},
    ghostLight:{background:'transparent', color:'#fff', border:'1px solid rgba(255,255,255,.35)'},
    solidLight:{background:'#fff', color:'var(--tz-blue)', border:'1px solid #fff'},
  };
  const Tag = as;
  return (
    <Tag {...rest} style={{
      ...styles[variant],
      padding: s.p, fontSize: s.fs,
      fontFamily:'var(--tz-body)', fontWeight:600, letterSpacing:'.01em',
      borderRadius: 999, cursor:'pointer', display:'inline-flex',
      alignItems:'center', gap:8, textDecoration:'none',
      transition:'transform .12s ease, box-shadow .12s ease',
      ...rest.style,
    }}>{children}</Tag>
  );
}

function Eyebrow({ children, color='var(--tz-gold)', dark=false }){
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:10,
      fontFamily:'var(--tz-body)', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
      color: dark? 'rgba(255,255,255,.7)' : 'var(--tz-muted)',
    }}>
      <span style={{width:24, height:1, background:color}}/>
      {children}
    </div>
  );
}

function Placeholder({ label='product shot', height=320, dark=false, style }){
  return (
    <div className={'ph'+(dark?' dark':'')} style={{height, borderRadius:8, ...style}}>
      <span>{label}</span>
    </div>
  );
}

function Stat({ n, label, color='var(--tz-gold)' }){
  return (
    <div style={{display:'flex',flexDirection:'column',gap:6}}>
      <div style={{fontFamily:'var(--tz-display)', fontSize:56, lineHeight:1, color, fontWeight:500, letterSpacing:'-.02em'}}>{n}</div>
      <div style={{fontFamily:'var(--tz-body)', fontSize:13, color:'var(--tz-muted)', maxWidth:200}}>{label}</div>
    </div>
  );
}

// Header with sticky nav, used inside artboards.
function SiteHeader({ dark=false, transparent=false }){
  const fg = dark? '#fff' : 'var(--tz-blue)';
  const muted = dark? 'rgba(255,255,255,.7)' : 'var(--tz-muted)';
  return (
    <header style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      gap:24, flexWrap:'wrap',
      padding:'22px 64px',
      background: transparent? 'transparent' : (dark? 'var(--tz-blue)' : 'var(--tz-cream)'),
      borderBottom: transparent? 'none' : (dark?'1px solid rgba(255,255,255,.08)':'1px solid rgba(11,42,74,.08)'),
      color: fg,
    }}>
      <Logo size="sm" color={fg} mark="var(--tz-gold)" dot="var(--tz-gold)"
            accent={dark?'var(--tz-blue)':'var(--tz-blue)'} variant="markLeft"
            badge={dark} badgeBg="var(--tz-cream)"/>
      <nav style={{display:'flex', gap:24, flexWrap:'wrap', fontFamily:'var(--tz-body)', fontSize:14, color:muted, flex:'1 1 auto', justifyContent:'center', minWidth:0}}>
        <a href="#platform" style={{color:'inherit',textDecoration:'none', whiteSpace:'nowrap', cursor:'pointer'}}>Platform</a>
        <a href="#pricing" style={{color:'inherit',textDecoration:'none', whiteSpace:'nowrap', cursor:'pointer'}}>Pricing</a>
        <a href="#contact" style={{color:'inherit',textDecoration:'none', whiteSpace:'nowrap', cursor:'pointer'}}>Contact</a>
      </nav>
      <div style={{display:'flex',gap:10,alignItems:'center', flexShrink:0}}>
        <Btn size="sm" variant={dark?'gold':'primary'} style={{whiteSpace:'nowrap'}}>Book a demo →</Btn>
      </div>
    </header>
  );
}

function SiteFooter({ dark=true }){
  return (
    <footer style={{
      background: dark? 'var(--tz-blue)' : 'var(--tz-cream)',
      color: dark? 'rgba(255,255,255,.85)' : 'var(--tz-ink)',
      padding:'72px 64px 36px',
      borderTop: dark? '1px solid rgba(255,255,255,.06)' : '1px solid rgba(11,42,74,.08)',
      fontFamily:'var(--tz-body)',
    }}>
      <div style={{display:'grid', gridTemplateColumns:'minmax(260px, 1.4fr) repeat(3, minmax(140px, 1fr))', gap:48, paddingBottom:48, borderBottom:dark?'1px solid rgba(255,255,255,.1)':'1px solid rgba(11,42,74,.1)'}}>
        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Logo variant="markLeft" size="sm"
            color={dark?'#fff':'var(--tz-blue)'}
            mark="var(--tz-gold)" dot="var(--tz-gold)"
            accent="var(--tz-blue)"
            badge={dark} badgeBg="var(--tz-cream)"/>
          <p style={{margin:0, fontSize:13, lineHeight:1.6, color:dark?'rgba(255,255,255,.7)':'var(--tz-muted)', maxWidth:300}}>
            The fundraising platform for Jewish nonprofits. Auctions, donations, events, and the admin tools to run them — built to be yours for years, not one event.
          </p>
          <div style={{display:'flex',gap:10}}>
            <Btn size="sm" variant={dark?'gold':'primary'}>Book a demo</Btn>
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div style={{fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:dark?'rgba(255,255,255,.5)':'var(--tz-muted)'}}>Site</div>
          <a href="#platform" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>Platform</a>
          <a href="#pricing" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>Pricing</a>
          <a href="#contact" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>Contact</a>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div style={{fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:dark?'rgba(255,255,255,.5)':'var(--tz-muted)'}}>Pricing</div>
          <div style={{fontFamily:'var(--tz-display)', fontSize:24, fontWeight:500, color:dark?'#fff':'var(--tz-blue)', lineHeight:1, marginTop:2}}>$10,000</div>
          <div style={{fontSize:13, lineHeight:1.55, color:dark?'rgba(255,255,255,.6)':'var(--tz-muted)'}}>One-time build fee. Fully customizable. Yours to keep.</div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div style={{fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:dark?'rgba(255,255,255,.5)':'var(--tz-muted)'}}>Contact</div>
          <a href="tel:+19175771866" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>917-577-1866</a>
          <a href="mailto:hello@tzedoka.org" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>hello@tzedoka.org</a>
          <a href="#contact" style={{color:dark?'rgba(255,255,255,.85)':'var(--tz-ink)', textDecoration:'none', fontSize:13.5, lineHeight:1.6, cursor:'pointer'}}>Send a note</a>
        </div>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:28, fontSize:12, color:dark?'rgba(255,255,255,.55)':'var(--tz-muted)'}}>
        <div>© 2026 Tzedoka, Inc. — built b'siyata d'shmaya in Brooklyn, NY.</div>
        <div style={{display:'flex',gap:24}}>
          <span style={{fontFamily:'var(--tz-accent)'}}>צדקה תציל ממות</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Btn, Eyebrow, Placeholder, Stat, SiteHeader, SiteFooter });