window.HandbookComponents = (() => {
  function SectionLabel({ number, children }) {
    return (
      <div className="section-label">
        {number ? <span className="num">{number}</span> : null}
        {children}
      </div>
    );
  }

  function Card({ title, body, tone = "mist" }) {
    return (
      <article className={`card ${tone}`}>
        <h4>{title}</h4>
        <p>{body}</p>
      </article>
    );
  }

  function Principle({ label, title, body }) {
    return (
      <article className="principle">
        <div className="pill-tag">{label}</div>
        <h4>{title}</h4>
        <p>{body}</p>
      </article>
    );
  }

  function Swatch({ color }) {
    return (
      <article className="swatch" style={{ backgroundColor: color.value, color: color.text }}>
        <div className="swatch-name">{color.name}</div>
        <div className="swatch-hex">{color.value}</div>
        <div className="swatch-role">{color.role}</div>
      </article>
    );
  }

  function BulletList({ items, variant = "arrow" }) {
    return (
      <ul className={`bullet-list ${variant}`}>
        {items.map((item) => <li key={item}>{item}</li>)}
      </ul>
    );
  }

  function DetailGrid({ details }) {
    return (
      <div className="detail-grid">
        {details.map(([label, value]) => (
          <div className="detail-item" key={label}>
            <div className="detail-label">{label}</div>
            <div className="detail-value">{value}</div>
          </div>
        ))}
      </div>
    );
  }

  function PersonaCard({ audience }) {
    return (
      <article className="persona-card">
        <div className="persona-tag">{audience.label}</div>
        <h3>{audience.title}</h3>
        <p className="persona-sub">{audience.body}</p>
        <DetailGrid details={audience.details} />
      </article>
    );
  }

  function ChannelCard({ channel }) {
    return (
      <article className="channel-card">
        <div className="ch-tag">{channel.number}</div>
        <h4>{channel.title}</h4>
        <div className="ch-role">{channel.role}</div>
        <p>{channel.body}</p>
        <BulletList items={channel.bullets} />
      </article>
    );
  }

  function TemplateCard({ template }) {
    return (
      <article className="template-card">
        <div className="template-label">{template.label}</div>
        <h4>{template.title}</h4>
        <pre>{template.example.join("\n")}</pre>
        <p className="template-notes">{template.notes}</p>
      </article>
    );
  }

  function AgentRule({ rule }) {
    return (
      <article className="agent-rule">
        <h4>{rule.title}</h4>
        <p>{rule.body}</p>
      </article>
    );
  }

  return {
    AgentRule,
    BulletList,
    Card,
    ChannelCard,
    DetailGrid,
    PersonaCard,
    Principle,
    SectionLabel,
    Swatch,
    TemplateCard
  };
})();