/* Primitives.jsx — small shared building blocks */

function Container({ children, style }) {
  return <div className="container" style={style}>{children}</div>;
}

function Eyebrow({ children, num, color = "gold" }) {
  return (
    <div className="section-head" style={{display:'block', marginBottom: 0}}>
      <div className="eyebrow-row">
        <span className="rule"></span>
        <span className="eyebrow" style={color === "navy" ? {color: 'var(--navy-800)'} : null}>{children}</span>
        {num ? <span className="num">{num}</span> : null}
      </div>
    </div>
  );
}

function SectionHead({ eyebrow, num, title, lede }) {
  return (
    <div className="section-head">
      <div>
        <div className="eyebrow-row">
          <span className="rule"></span>
          <span className="eyebrow">{eyebrow}</span>
          {num ? <span className="num">{num}</span> : null}
        </div>
        <h2>{title}</h2>
      </div>
      <p className="lede">{lede}</p>
    </div>
  );
}

function ServiceCard({ num, title, body, link = "Read more" }) {
  return (
    <div className="svc-card">
      <span className="svc-rule"></span>
      <div className="svc-num">Service · {num}</div>
      <h3 className="svc-title">{title}</h3>
      <p className="svc-body">{body}</p>
      <a href="#services" className="svc-link" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate('services'); }}>{link}</a>
    </div>
  );
}

function Button({ children, variant = "primary", onClick, href, className }) {
  const cls = `btn btn-${variant}` + (className ? ` ${className}` : "");
  if (href) return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  return <button className={cls} onClick={onClick}>{children}</button>;
}

Object.assign(window, { Container, Eyebrow, SectionHead, ServiceCard, Button });