/* global React */

/** Page hero in the same "opmaak" as the homepage — tall portrait photo
 *  centered with a paper-card lede block top-left.
 *  Each non-home page passes a different `portrait` so the visual rhythm changes. */
function PageHero({ titleA, titleItalic, sub, portrait, pills = [], primaryCta, primaryHref = 'contact.html', secondaryCta, secondaryHref = '#next' }) {
  return (
    <section className="cs-hero-hub">
      <div className="cs-hero-hub-portrait-wrap">
        <div className="cs-hero-hub-echo"></div>
        {portrait && (
          <div className="cs-hero-hub-portrait">
            <img src={portrait} alt="Anne Caron — Caron Studio"/>
            <span className="cs-hero-hub-portrait-tag">ANNE CARON · ROTTERDAM</span>
          </div>
        )}
        {pills[0] && <span className="cs-hero-hub-ping p1"></span>}
        {pills[1] && <span className="cs-hero-hub-ping p2"></span>}
        {pills[2] && <span className="cs-hero-hub-ping p3"></span>}
        {pills.map((p, i) => (
          <a key={i} href={p.href || '#'} className={`cs-hero-hub-sat s${i+1}`}>{p.label}</a>
        ))}
      </div>

      <div className="cs-hero-hub-lede">
        <h1 className="cs-hero-hub-h1">
          {titleA}
          {titleItalic && (<>{' '}<span className="ital">{titleItalic}</span></>)}
        </h1>
        {sub && <p className="cs-hero-hub-body">{sub}</p>}
        {(primaryCta || secondaryCta) && (
          <div className="cs-hero-hub-actions">
            {primaryCta && (
              <a href={primaryHref} className="cs-btn-primary">
                <span>{primaryCta}</span><span className="arrow">→</span>
              </a>
            )}
            {secondaryCta && (
              <a href={secondaryHref} className="cs-btn-ghost">
                {secondaryCta} <span className="arrow">↓</span>
              </a>
            )}
          </div>
        )}
      </div>
    </section>
  );
}

window.PageHero = PageHero;