/* global React */

function BeTag({ name, size }) {
  return (
    <span className={`be-tag ${size === "lg" ? "lg" : ""}`}>
      <span className="be">Be</span>
      <span className="us">_</span>
      <span className="name">{name}</span>
    </span>
  );
}

function Section({ id, tone = "paper", children, full = false }) {
  return (
    <section id={id} className={`section bg-${tone}`} data-screen-label={id}>
      {full ? children : <div className="page">{children}</div>}
    </section>
  );
}

function SectionHead({ num, title, sub, tag, right = null }) {
  return (
    <Reveal className="section-head" as="div">
      <div className="section-head__num">
        <div>{num}</div>
        {tag ? <div style={{ marginTop: 8 }}>{tag}</div> : null}
      </div>
      <div>
        <h2 className="section-head__title" dangerouslySetInnerHTML={{ __html: title }} />
        {sub ? <p className="section-head__sub" dangerouslySetInnerHTML={{ __html: sub }} /> : null}
        {right}
      </div>
    </Reveal>
  );
}

function Img({ label, ratio = "4/3", style }) {
  return (
    <div className="img-ph" style={{ aspectRatio: ratio, ...style }}>
      <span className="img-ph__label">{label}</span>
    </div>
  );
}

function HumanVerifiedBadge({ id = "HV-2026-0042" }) {
  return (
    <span className="hv-badge" title="Human-Verified by Bolder">
      <span className="hv-badge__seal">✓</span>
      Human-Verified · {id}
    </span>
  );
}

function PoweredByBoldy() {
  return (
    <span className="boldy-chip">
      <span className="gear" />
      Powered by Boldy
    </span>
  );
}

window.BeTag = BeTag;
window.Section = Section;
window.SectionHead = SectionHead;
window.Img = Img;
window.HumanVerifiedBadge = HumanVerifiedBadge;
window.PoweredByBoldy = PoweredByBoldy;