// Shared sub-hero used on every interior page (pricing, platform, nis2, blog, contact).
// Smaller than the home hero, same aurora atmosphere, no live console.

function PageHero({ eyebrow, title, subtitle, tweaks = {}, children, minHeight = '64vh' }) {
  return (
    <section className="bg-aurora fade-bottom" style={{position:'relative', minHeight}}>
      <div className="hero-video-wrap" aria-hidden="true">
        <Aurora intensity={0.85} variant={tweaks.aurora || 'blue'} />
        <div className="hero-video-tint"/>
      </div>
      <div className="grid-fine" style={{position:'absolute', inset:0, opacity:.32, pointerEvents:'none', zIndex:1}}/>

      <div className="wrap" style={{position:'relative', zIndex:2, paddingTop:200, paddingBottom:110}}>
        <div style={{maxWidth: 940}}>
          {eyebrow && (
            <div className="chip" style={{marginBottom:28}}>
              <span className="live-dot"/> {eyebrow}
            </div>
          )}
          <h1 className="display" style={{
            fontSize:'clamp(46px, 6.2vw, 96px)', margin:0, color:'#fff',
            fontWeight:700, lineHeight:.98, letterSpacing:'-.035em',
          }}>
            {title}
          </h1>
          {subtitle && (
            <p style={{
              fontSize:'clamp(17px, 1.4vw, 21px)', lineHeight:1.5, color:'var(--txt-2)',
              maxWidth:680, marginTop:28, marginBottom:0,
            }}>
              {subtitle}
            </p>
          )}
          {children && <div style={{marginTop:34}}>{children}</div>}
        </div>
      </div>
    </section>
  );
}

window.PageHero = PageHero;