// 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.

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

// A word that animates in with a clip-path reveal (sliding mask),
// staggered by index. More elegant than a fade for editorial type.
function RevealWord({ text, start, idx = 0, ...rest }) {
  const time = useTime();
  const myStart = start + idx * 0.09;
  const dur = 0.7;
  const t = clamp((time - myStart) / dur, 0, 1);
  const eased = Easing.easeOutCubic(t);

  // Clip from 100% → 0% inset on the right
  const clip = `inset(0 ${(1 - eased) * 100}% 0 0)`;
  const ty = (1 - eased) * 8;

  return (
    <span style={{
      display: 'inline-block',
      clipPath: clip,
      transform: `translateY(${ty}px)`,
      ...rest,
    }}>
      {text}
    </span>
  );
}

function HeadlineScene() {
  const time = useTime();
  const sceneStart = 7.8;

  // Exit before loop restarts (loop is 12s)
  const exitStart = 11.2;
  const exitEnd   = 11.95;
  let groupOp = 1;
  if (time < sceneStart - 0.1) return null;
  if (time >= exitStart) {
    const t = clamp((time - exitStart) / (exitEnd - exitStart), 0, 1);
    groupOp = 1 - Easing.easeInCubic(t);
  } else if (time < sceneStart) {
    groupOp = clamp((time - (sceneStart - 0.2)) / 0.2, 0, 1);
  }

  // Accent line draws in
  const lineT = clamp((time - 8.0) / 0.7, 0, 1);
  const lineW = Easing.easeOutCubic(lineT) * 200;

  // Wordmark and tagline appear after headline settles
  const wmStart = 9.2;
  const wmT = clamp((time - wmStart) / 0.6, 0, 1);
  const wmEased = Easing.easeOutCubic(wmT);
  const wmOp = wmEased;
  const wmLift = (1 - wmEased) * 10;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: groupOp,
    }}>
      {/* Accent rule */}
      <div style={{
        position: 'absolute',
        left: 200, top: 360,
        width: lineW, height: 2,
        background: HL_ACCENT,
      }}/>

      {/* 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.0} idx={0} />
          <RevealWord text="clarity" start={8.0} idx={1} style={{ fontStyle: 'italic', color: HL_NAVY }}/>
        </div>
        <div style={{ marginTop: 4 }}>
          <RevealWord text="for mission-driven" start={8.0} idx={2} />
        </div>
        <div style={{ marginTop: 4 }}>
          <RevealWord text="teams." start={8.0} idx={3} />
        </div>
      </div>

      {/* Wordmark + tagline (bottom right) */}
      <div style={{
        position: 'absolute',
        right: 200, bottom: 120,
        textAlign: 'right',
        opacity: wmOp,
        transform: `translateY(${wmLift}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 });