/* global React */
// Marketing-site primitives — pared back. No icon-tile chrome, no badges.

function Container({ children, narrow }) {
  return <div className={narrow ? 'ea-container ea-container-narrow' : 'ea-container'}>{children}</div>;
}

function Section({ children, dark, id }) {
  return <section id={id} className={`ea-section${dark ? ' ea-section-dark' : ''}`}>{children}</section>;
}

function SectionIdx({ n, name, meta }) {
  return (
    <div className="ea-section-idx">
      <span className="n">[{n}]</span>
      <span className="name">— {name}</span>
      <span className="meta">{meta}</span>
    </div>
  );
}

function Button({ variant = 'primary', size = 'md', arrow, children, onClick, type, style, disabled }) {
  return (
    <button type={type} className={`ea-btn ea-btn-${variant} ea-btn-${size}`} onClick={onClick} style={style} disabled={disabled}>
      <span>{children}</span>
      {arrow ? <span className="arr">→</span> : null}
    </button>
  );
}

Object.assign(window, { Button, Container, Section, SectionIdx });