// ============================================================
// SHARED — presentational components used across screens
// No portrait, no numbers in SectionIntro
// ============================================================

// Full-width section header: just eyebrow label + serif statement + sub
function SectionIntro({ eyebrow, statement, sub, children, className = '' }) {
  return (
    <Reveal className={`section-intro-full ${className}`}>
      <span className="eyebrow">{eyebrow}</span>
      <h2 className="si-statement">{statement}</h2>
      {sub && <p className="si-sub">{sub}</p>}
      {children}
    </Reveal>
  );
}

// Work index row (used on home + work page)
function WorkRow({ item, go }) {
  return (
    <div className="work-row" onClick={() => go('case', item.id)}>
      <span className="wtitle">{item.title}</span>
      <span className="wdesc">{item.desc}</span>
      <span className="wmeta">{item.meta}</span>
      <span className="warr"><Icon name="arrow-up-right" /></span>
    </div>
  );
}

Object.assign(window, { SectionIntro, WorkRow });