// Hero composition — bio left, calculator right.

function Hero({ active, toggle, pool, lastToggled }) {
  // Bio's "all of that" reacts to ANY filter toggle. Build a fingerprint
  // covering every filter; the reactive segment fires shine + particles
  // whenever this string changes. Color follows whichever filter just
  // toggled, falling back to the page accent.
  const allIds = React.useMemo(
    () => (window.RARE_FILTERS || []).map((f) => f.id),
    []
  );
  // Count of ON filters. The reactive segment fires only when this rises
  // (any ON event), staying silent on OFF.
  const allTrigger = allIds.reduce((n, id) => n + (active[id] ? 1 : 0), 0);
  const lastColor = React.useMemo(() => {
    const f = (window.RARE_FILTERS || []).find((x) => x.id === lastToggled);
    return f ? f.color : 'var(--accent)';
  }, [lastToggled]);

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'var(--hero-cols)',
      padding: 'var(--space-6) var(--page-pad-x) var(--space-4)', gap: 'var(--hero-gap)',
      position: 'relative', alignItems: 'start',
    }}>
      {/* Bio is offset down so the headline starts roughly level with the
          calculator card's content, not its eyebrow row.
          On mobile (--bio-pad-top: 0), the offset is removed.
          minWidth: 0 lets this grid track shrink below its content's
          min-content (long headline words) instead of pushing the page wider. */}
      <div style={{ paddingTop: 'var(--bio-pad-top)', minWidth: 0 }}>
        <window.ReactiveHeadline active={active} lastToggled={lastToggled} style={{ fontSize: 'var(--headline-size)' }} />
        <div style={{
          marginTop: 'var(--space-5)', fontSize: 'var(--bio-body-size)', lineHeight: 1.45, opacity: 0.85,
          fontFamily: 'var(--font-serif)', maxWidth: 600,
        }}>
          Statistically speaking,{' '}
          <span style={{ opacity: 0.72 }}>
            almost nobody does{' '}
            <window.ReactiveHeadlineSegment
              text="all of that"
              trigger={allTrigger}
              flourishColor={lastColor}
              baseColor="inherit"
              particles={false}
            />
            .
          </span>{' '}
          <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>I do.</span>
        </div>
        <div style={{ marginTop: 'var(--cta-space-top)' }}>
          <window.CTALine />
        </div>
      </div>

      <window.Calculator active={active} toggle={toggle} pool={pool} />
    </div>
  );
}

window.Hero = Hero;