// Shared primitives for Deevy homepage

const Eyebrow = ({ children, color, style }) => (
  <div style={{
    fontFamily: '"IBM Plex Mono", monospace',
    fontSize: 11,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: color || '#185FA5',
    fontWeight: 500,
    ...style,
  }}>
    {children}
  </div>
);

const SerifH = ({ children, size = 56, color = '#0D1420', style, as: Tag = 'h2' }) => (
  <Tag style={{
    fontFamily: '"Source Serif 4", Georgia, serif',
    fontWeight: 500,
    fontSize: size,
    lineHeight: 1.05,
    letterSpacing: '-0.4px',
    color,
    margin: 0,
    textWrap: 'balance',
    ...style,
  }}>
    {children}
  </Tag>
);

const Body = ({ children, color = '#3A4A5E', size = 17, style }) => (
  <p style={{
    fontFamily: '"Inter", system-ui, sans-serif',
    fontSize: size,
    lineHeight: 1.55,
    color,
    margin: 0,
    textWrap: 'pretty',
    ...style,
  }}>
    {children}
  </p>
);

const Mono = ({ children, style }) => (
  <span style={{
    fontFamily: '"IBM Plex Mono", monospace',
    fontVariantNumeric: 'tabular-nums',
    ...style,
  }}>{children}</span>
);

// "+" cross-pattern background for dark navy sections
const plusPatternBg = ({ density = 28, opacity = 0.5 } = {}) => {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${density}' height='${density}' viewBox='0 0 ${density} ${density}'>
    <g stroke='%231a2332' stroke-width='1.2' opacity='${opacity}' stroke-linecap='square'>
      <line x1='${density / 2 - 3}' y1='${density / 2}' x2='${density / 2 + 3}' y2='${density / 2}'/>
      <line x1='${density / 2}' y1='${density / 2 - 3}' x2='${density / 2}' y2='${density / 2 + 3}'/>
    </g>
  </svg>`;
  return `url("data:image/svg+xml;utf8,${svg.replace(/\n/g, '').replace(/\s+/g, ' ')}")`;
};

const SectionShell = ({ dark, children, id, padY = 120, screenLabel, style }) => (
  <section
    id={id}
    data-screen-label={screenLabel}
    style={{
      background: dark ? '#0D1420' : '#F0F4FA',
      backgroundImage: dark ? plusPatternBg({ density: 28, opacity: 0.55 }) : undefined,
      color: dark ? '#DBE9FF' : '#0D1420',
      padding: `${padY}px 0`,
      position: 'relative',
      ...style,
    }}
  >
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px', position: 'relative' }}>
      {children}
    </div>
  </section>
);

// Subtle hairline rule used throughout
const Hair = ({ dark, style }) => (
  <div style={{
    height: 1,
    background: dark ? 'rgba(219,233,255,0.12)' : '#DBE9FF',
    ...style,
  }} />
);

Object.assign(window, { Eyebrow, SerifH, Body, Mono, plusPatternBg, SectionShell, Hair });