/* PageHero.jsx — compact typographic hero used on all inner pages.
   No video. Sits below the solid nav. Eyebrow + display headline + subline. */

const PageHero = ({ eyebrow, title, titleItalic, subline, tone = 'light' }) => {
  const dark = tone === 'dark';
  return (
    <section
      data-screen-label="PageHero"
      style={{
        position: 'relative',
        paddingTop: 'clamp(160px, 18vw, 240px)',
        paddingBottom: 'clamp(72px, 8vw, 128px)',
        background: dark ? 'var(--color-ink)' : 'var(--bg-1)',
        color: dark ? '#fff' : 'var(--fg-1)',
        borderBottom: dark ? 'none' : '1px solid var(--border-hairline)',
        overflow: 'hidden',
      }}
      className={dark ? 'aurora aurora-dark grain' : 'aurora grain-light'}
    >
      <div aria-hidden style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        background: dark
          ? 'radial-gradient(700px 340px at 15% 0%, rgba(21,84,168,0.22), transparent 70%)'
          : 'radial-gradient(700px 340px at 15% 0%, rgba(21,84,168,0.10), transparent 70%)',
      }} />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 920 }}>
          <div
            className="eyebrow eyebrow-row reveal reveal-1"
            style={{
              marginBottom: 36,
              color: dark ? 'rgba(255,255,255,0.7)' : undefined,
            }}
          >
            <span className="eyebrow-dot" /> {eyebrow}
          </div>

          <h1
            className="reveal reveal-2"
            style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 'clamp(40px, 5.2vw, 80px)',
              fontWeight: 500,
              lineHeight: 1.04,
              letterSpacing: '-0.025em',
              margin: 0,
              maxWidth: '18ch',
              textWrap: 'balance',
              color: dark ? '#fff' : 'var(--fg-1)',
            }}
          >
            {title}
            {titleItalic && (
              <>
                {' '}
                <em
                  style={{
                    fontFamily: 'var(--font-serif)',
                    fontStyle: 'italic',
                    fontWeight: 400,
                    letterSpacing: '-0.015em',
                  }}
                >
                  {titleItalic}
                </em>
              </>
            )}
          </h1>

          {subline && (
            <p
              className="reveal reveal-3"
              style={{
                fontSize: 'clamp(18px, 1.4vw, 22px)',
                lineHeight: 1.5,
                color: dark ? 'rgba(255,255,255,0.82)' : 'var(--fg-2)',
                marginTop: 32,
                maxWidth: '50ch',
                fontWeight: 300,
                letterSpacing: '-0.005em',
              }}
            >
              {subline}
            </p>
          )}
        </div>
      </div>
    </section>
  );
};

window.PageHero = PageHero;