// Scene 4: the headline.
// Appears as the dashboard recedes (~7.8s), holds, then dissolves before loop.
// Big editorial serif. Single accent line. Wordmark + tagline below.
//
// Each word rises through a soft blur as its clip-mask sweeps open, so the line
// "develops" into focus (expensive editorial feel) rather than just sliding in.
// Blur amount + easing follow the global tweaks.

const HL_NAVY = '#0e1f3a';
const HL_CREAM = '#f5f0e6';
const HL_ACCENT = '#9b6a3f';
const HL_MUTED = '#5a6478';

function _hlEase(t) {
  const n = (t && t.ease) || 'silk';
  return n === 'glide' ? Easing.easeInOutCubic
       : n === 'crisp' ? Easing.easeOutQuart
       : Easing.easeOutExpo;
}

// A word that animates in with a clip-path reveal (sliding mask) + a clearing
// blur and a small rise, staggered by index. More elegant than a fade.
function RevealWord({ text, start, idx = 0, ...rest }) {
  const time = useTime();
  const t = useHeroTweaks();
  const dur = 1.0 * ((t && t.transScale) || 1);
  const myStart = start + idx * 0.16 * ((t && t.transScale) || 1);
  const tt = clamp((time - myStart) / dur, 0, 1);
  const eased = _hlEase(t)(tt);

  // Clip from 100% → 0% inset on the right
  const clip = `inset(0 ${((1 - eased) * 100).toFixed(2)}% 0 0)`;
  const ty = (1 - eased) * 12;
  const maxBlur = ((t && t.focusBlur != null) ? t.focusBlur : 10) * 0.6;
  const blur = (1 - eased) * maxBlur;

  return (
    <span style={{
      display: 'inline-block',
      whiteSpace: 'pre',
      clipPath: clip,
      transform: `translateY(${ty.toFixed(2)}px)`,
      filter: blur > 0.04 ? `blur(${blur.toFixed(2)}px)` : 'none',
      willChange: 'transform, filter, clip-path',
      ...rest,
    }}>
      {text}
    </span>
  );
}

function HeadlineScene() {
  const time = useTime();
  const t = useHeroTweaks();
  const acc = (t && t.accent) || HL_ACCENT;
  const sceneStart = 8.3;

  // Play once and HOLD on the headline — no exit dissolve (no loop).
  // Rise in through a soft blur so it emerges from the dashboard's dissolve.
  let groupOp = 1;
  let groupBlur = 0;
  if (time < sceneStart - 0.3) return null;
  if (time < sceneStart) {
    const f = clamp((time - (sceneStart - 0.4)) / 0.4, 0, 1);
    groupOp = f;
    groupBlur = (1 - f) * (((t && t.focusBlur != null) ? t.focusBlur : 10) * 0.5);
  }

  // Accent line draws in
  const lineT = clamp((time - 8.5) / 0.9, 0, 1);
  const lineW = _hlEase(t)(lineT) * 200;

  // Wordmark and tagline appear after headline settles
  const wmStart = 9.7;
  const wmT = clamp((time - wmStart) / 0.7, 0, 1);
  const wmEased = _hlEase(t)(wmT);
  const wmOp = wmEased;
  const wmLift = (1 - wmEased) * 12;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: groupOp,
      filter: groupBlur > 0.04 ? `blur(${groupBlur.toFixed(2)}px)` : 'none',
      willChange: 'opacity, filter',
    }}>
      {/* Accent rule */}
      <div style={{
        position: 'absolute',
        left: 200, top: 360,
        width: lineW, height: 2,
        background: acc,
      }}/>

      {/* Headline */}
      <div style={{
        position: 'absolute',
        left: 200, top: 400,
        width: 1280,
        fontFamily: 'Source Serif 4, "Source Serif Pro", Georgia, serif',
        fontSize: 124,
        fontWeight: 400,
        lineHeight: 1.02,
        letterSpacing: '-0.025em',
        color: HL_NAVY,
      }}>
        <div>
          <RevealWord text="Financial " start={8.5} idx={0} />
          <RevealWord text="clarity" start={8.5} idx={1} style={{ fontStyle: 'italic', color: acc }}/>
        </div>
        <div style={{ marginTop: 4 }}>
          <RevealWord text="for mission-driven" start={8.5} idx={2} />
        </div>
        <div style={{ marginTop: 4 }}>
          <RevealWord text="teams." start={8.5} idx={3} />
        </div>
      </div>

      {/* Wordmark + tagline (bottom right) */}
      <div style={{
        position: 'absolute',
        right: 200, bottom: 120,
        textAlign: 'right',
        opacity: wmOp,
        transform: `translateY(${wmLift.toFixed(2)}px)`,
      }}>
        <div style={{
          fontFamily: 'Source Serif 4, "Source Serif Pro", Georgia, serif',
          fontSize: 36,
          fontWeight: 400,
          color: HL_NAVY,
          letterSpacing: '-0.01em',
          lineHeight: 1,
        }}>
          The Not-For-Profit CFO
        </div>
        <div style={{
          marginTop: 10,
          fontFamily: 'Inter, system-ui, sans-serif',
          fontSize: 14,
          fontWeight: 500,
          color: HL_MUTED,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
        }}>
          Fractional CFO &nbsp;·&nbsp; Nonprofit Finance
        </div>
      </div>

      {/* Tiny meta in bottom-left */}
      <div style={{
        position: 'absolute',
        left: 200, bottom: 120,
        opacity: wmOp,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 12,
        color: HL_MUTED,
        letterSpacing: '0.06em',
      }}>
        For nonprofits with $1M – $10M in annual revenue.
      </div>
    </div>
  );
}

Object.assign(window, { HeadlineScene });