// Pellex secondary pages — Map, Kit detail, Checkout, Success, Resource, Business
// Part 1: shared sub-page chrome + Map page

// Shared back-button header for sub-pages
function SubHeader({ p, title, kicker }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      padding: '12px 18px 14px',
      background: `${p.bg}ee`,
      backdropFilter: 'blur(14px) saturate(140%)',
      WebkitBackdropFilter: 'blur(14px) saturate(140%)',
      borderBottom: `1px solid ${p.border}`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <button onClick={() => window.pellexNav('landing')} style={{
        appearance: 'none', cursor: 'pointer', flexShrink: 0,
        width: 34, height: 34, borderRadius: 99,
        background: p.bgElev, border: `1px solid ${p.border}`,
        color: p.text, display: 'grid', placeItems: 'center',
      }} aria-label="Back">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M8.5 3L4.5 7l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      <div style={{ minWidth: 0, flex: 1 }}>
        {kicker && <div style={{
          color: p.accent, fontSize: 10, fontFamily: PELLEX_FONTS.mono,
          letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 2,
        }}>{kicker}</div>}
        <div style={{
          color: p.text, fontSize: 16, fontWeight: 700, fontFamily: PELLEX_FONTS.body,
          letterSpacing: -0.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{title}</div>
      </div>
    </div>
  );
}

// Simple thank-you/section divider
function PageFooter({ p, note }) {
  return (
    <div style={{
      padding: '20px 22px 100px',
      borderTop: `1px solid ${p.border}`,
      background: p.bg, marginTop: 24,
    }}>
      <div style={{ color: p.textDim, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3, textAlign: 'center' }}>
        {note || '© 2026 Pellex · Build assets · Sell shovels · Automate fulfilment'}
      </div>
    </div>
  );
}

window.SubHeader = SubHeader;
window.PageFooter = PageFooter;