// Shared layout helpers for the Территория B2B website UI kit.
// Exported to window so the per-screen babel files can use them.

const Wrap = ({ children, style }) => (
  <div style={{ maxWidth: '1240px', margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>
);

const Section = ({ children, pad = 'lg', dark = false, first = false, style }) => (
  <div style={{
    borderTop: first ? 'none' : '1px solid var(--tb-line)',
    background: dark ? 'var(--tb-ink)' : 'transparent',
    color: dark ? 'var(--tb-paper)' : 'inherit',
    padding: (pad === 'lg' ? '76px' : pad === 'sm' ? '52px' : '0') + ' 0',
    ...style,
  }}>{children}</div>
);

const Band = ({ children, onCta, cta = 'Присоединиться бесплатно →' }) => {
  const { Button } = window.B2B_4a97d9;
  return (
    <div style={{ background: 'var(--tb-signal)', color: '#fff' }}>
      <div style={{ maxWidth: '1240px', margin: '0 auto', padding: '56px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '30px', flexWrap: 'wrap' }}>
        <h2 style={{ fontFamily: 'var(--tb-font-display)', fontWeight: 700, fontSize: 'clamp(26px,3.4vw,46px)', textTransform: 'uppercase', color: '#fff', maxWidth: '18ch', margin: 0, lineHeight: 1.02 }}>{children}</h2>
        <Button variant="ghost-dark" onClick={onCta} style={{ borderColor: '#fff', color: '#fff' }}>{cta}</Button>
      </div>
    </div>
  );
};

// A faint blueprint coordinate grid backdrop for heroes.
const HeroGrid = () => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'linear-gradient(var(--tb-line-2) 1px,transparent 1px),linear-gradient(90deg,var(--tb-line-2) 1px,transparent 1px)',
    backgroundSize: '44px 44px', opacity: 0.5,
    WebkitMaskImage: 'radial-gradient(120% 90% at 70% 20%,#000 40%,transparent 85%)',
    maskImage: 'radial-gradient(120% 90% at 70% 20%,#000 40%,transparent 85%)',
  }} />
);

const Lead = ({ children, onDark = false, style }) => (
  <p style={{ fontFamily: 'var(--tb-font-body)', fontSize: 'clamp(17px,1.5vw,21px)', fontWeight: 500, color: onDark ? '#c9c8c2' : '#33383b', maxWidth: '60ch', lineHeight: 1.4, margin: 0, ...style }}>{children}</p>
);

Object.assign(window, { Wrap, Section, Band, HeroGrid, Lead });