// SectionOpener.jsx — the brand-signature opener (rule + eyebrow + heading + rule)
function SectionOpener({ section, version = "v0.1", date = "2026-04-29", title, standfirst, kicker }) {
  const parts = section ? section.split("·").map((s) => s.trim()) : [];
  return (
    <section className="opener">
      <div className="container">
        <div className="opener-head">
          <div className="opener-eyebrow">
            {parts.map((p, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span className="opener-eyebrow-sep" aria-hidden="true">/</span>}
                <span className={"opener-eyebrow-part" + (i === 0 ? " opener-eyebrow-lead" : "")}>{p}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="opener-version">
            <span>{version}</span>
            <span className="opener-version-sep" aria-hidden="true">·</span>
            <span>{date}</span>
          </div>
        </div>
        <h2 className="opener-title">{title}</h2>
        {standfirst && <p className="opener-standfirst">{standfirst}</p>}
      </div>
    </section>
  );
}
window.SectionOpener = SectionOpener;