/* SectionHeader.jsx — official-site layout:
   [big Flash first char]  [eyebrow small top]
                           [rest title large bottom]
   + horizontal diamond rule below */

const SectionHeader = ({ eyebrow, title }) => {
  const first = title ? title[0] : "";
  const rest  = title ? title.slice(1) : "";
  return (
    <header className="sec">
      <div className="sec__inner">
        <div className="sec__left">
          <span className="sec__t-flash">{first}</span>
        </div>
        <div className="sec__right">
          <span className="sec__eyebrow">{eyebrow}</span>
          <span className="sec__t-rest">{rest}</span>
        </div>
      </div>
      <div className="sec__rule">
        <i></i>
        <span className="diamond"></span>
        <i></i>
      </div>
    </header>
  );
};

window.SectionHeader = SectionHeader;