// Primitives — Eyebrow, Button, Disclaimer, Rule
const Eyebrow = ({ tone = 'navy', children }) => (
  <div className={`v-eyebrow tone-${tone}`}>{children}</div>
);

const Button = ({ variant = 'primary', children, onClick, style }) => {
  const cls = variant === 'primary' ? 'v-btn-primary'
    : variant === 'outline' ? 'v-btn-outline'
    : variant === 'cta' ? 'v-btn-cta'
    : 'v-btn-nav';
  return <button className={cls} onClick={onClick} style={style}>{children}</button>;
};

const Disclaimer = ({ dark = false, strong, children }) => (
  <div className={`v-disclaimer ${dark ? 'dark' : ''}`}>
    {strong && <strong>{strong}</strong>} {children}
  </div>
);

const SectionHeader = ({ eyebrow, eyebrowTone, headline, sub }) => (
  <div className="v-section-header">
    {eyebrow && <Eyebrow tone={eyebrowTone}>{eyebrow}</Eyebrow>}
    <h2 className="v-h1" style={{ marginTop: 18 }} dangerouslySetInnerHTML={{ __html: headline }} />
    {sub && <p className="v-section-sub">{sub}</p>}
  </div>
);

Object.assign(window, { Eyebrow, Button, Disclaimer, SectionHeader });