// Shared site chrome — header + footer

function SiteHeader({ variant = 'default' }) {
  const dense = variant === 'dense';

  return (
    <header style={{
      display: 'flex', justifyContent: 'flex-start', alignItems: 'center',
      padding: dense ? '16px 32px' : '20px 56px',
      borderBottom: '1px solid var(--line)',
      position: 'relative', zIndex: 10,
      background: 'rgba(11,11,13,0.7)',
      backdropFilter: 'blur(12px)',
    }}>
      <a href="/" style={{ textDecoration: 'none', color: 'var(--fg)', display: 'flex', alignItems: 'center' }}>
        <Wordmark size={20} />
      </a>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      padding: 0,
      position: 'relative',
    }}>
      <div style={{
        maxWidth: 1280,
        margin: '0 auto',
        padding: '48px 56px 0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        gap: 40,
        flexWrap: 'wrap',
      }}>
        <a href="/" style={{ textDecoration: 'none', color: 'var(--fg)', display: 'flex', alignItems: 'center' }}>
          <LockupHorizontal size={20} />
        </a>
        <p className="bz-body" style={{
          fontSize: 15,
          lineHeight: 1.45,
          margin: 0,
          maxWidth: 420,
          color: 'var(--fg-2)',
          textAlign: 'right',
          flex: '1 1 240px',
        }}>
          <span style={{ display: 'block' }}>A Studio of Apps in Motion.</span>
          <span style={{ display: 'block', marginTop: 4 }}>Always Building. Always Shipping.</span>
        </p>
      </div>
      <div
        role="presentation"
        style={{
          width: '100%',
          borderTop: '1px solid var(--line)',
          marginTop: 28,
        }}
      />
      <div style={{
        maxWidth: 1280,
        margin: '0 auto',
        padding: '24px 56px 32px',
        fontSize: 12,
        color: 'var(--fg-3)',
      }}>
        © 2026 360 Buzz. All apps in motion.
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter });