// Pyrra atoms — Button, Eyebrow, SectionHeading.

// Resource resolver — returns a bundler-injected blob URL when present, else the original path.
window.R = window.R || ((p) => (window.__resources && window.__resources[p]) || p);

const Button = ({ variant = "primary", size = "md", children, onClick, href, ...rest }) => {
  const cls = ["pyrra-btn", `pyrra-btn--${variant}`, `pyrra-btn--${size}`].join(" ");
  if (href) return <a className={cls} href={href} onClick={onClick} {...rest}>{children}</a>;
  return <button className={cls} onClick={onClick} {...rest}>{children}</button>;
};

const Eyebrow = ({ children, tone = "accent" }) => (
  <div className={`pyrra-eyebrow pyrra-eyebrow--${tone}`}>{children}</div>
);

// SectionHeading: display headline, last `accentWord` (or `accent`) colored.
const SectionHeading = ({ eyebrow, children, sub, align = "center" }) => (
  <div className={`pyrra-heading pyrra-heading--${align}`}>
    {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
    <h2 className="pyrra-heading__title">{children}</h2>
    {sub ? <p className="pyrra-heading__sub">{sub}</p> : null}
  </div>
);

const AccentWord = ({ children }) => <span className="pyrra-accent-word">{children}</span>;

Object.assign(window, { Button, Eyebrow, SectionHeading, AccentWord });