// Primitives — small reusable atoms used across the landing kit.
// Window-exported at the end so other Babel scripts can use them.

const Eyebrow = ({ children, gold = false, className = "" }) => (
  <span className={`ms-eyebrow ${gold ? "is-gold" : ""} ${className}`}>
    <span className="ms-eyebrow__rule" />
    {children}
  </span>
);

const Script = ({ children, tone = "champagne", size = 56 }) => (
  <span
    className={`ms-script tone-${tone}`}
    style={{ fontSize: size, lineHeight: 0.9 }}
  >
    {children}
  </span>
);

const Button = ({ children, variant = "primary", onClick, type = "button", className = "" }) => (
  <button type={type} onClick={onClick} className={`ms-btn ms-btn--${variant} ${className}`}>
    <span>{children}</span>
    <span className="ms-btn__arr">→</span>
  </button>
);

const Monogram = ({ variant = "taupe", size = 28, className = "" }) => (
  <img
    src={`../../assets/logos/ms-journey-${variant}.png`}
    alt="MS Journey"
    style={{ height: size, width: "auto", display: "inline-block" }}
    className={className}
  />
);

const Fleuron = ({ variant = "taupe" }) => (
  <div className="ms-fleuron" aria-hidden="true">
    <span className="ms-fleuron__rule" />
    <Monogram variant={variant} size={32} />
    <span className="ms-fleuron__rule" />
  </div>
);

const Section = ({ tone = "cream", children, id, className = "", style = {} }) => (
  <section
    id={id}
    data-screen-label={id}
    className={`ms-section ms-section--${tone} ${className}`}
    style={style}
  >
    <div className="ms-container">{children}</div>
  </section>
);

Object.assign(window, { Eyebrow, Script, Button, Monogram, Fleuron, Section });