// Hero section — cycles through three headline statements
function Hero({ headlines, cycleSeconds, onBook }) {
  const [index, setIndex] = React.useState(0);
  const safeHeadlines = headlines && headlines.length ? headlines : [''];

  React.useEffect(() => {
    if (safeHeadlines.length <= 1) return;
    const id = setInterval(() => {
      setIndex(i => (i + 1) % safeHeadlines.length);
    }, Math.max(1500, cycleSeconds * 1000));
    return () => clearInterval(id);
  }, [safeHeadlines.length, cycleSeconds]);

  // Reset to first headline whenever the headlines themselves change
  React.useEffect(() => { setIndex(0); }, [safeHeadlines.join('|')]);

  const current = safeHeadlines[index] || '';

  return (
    <section id="top" style={{
      padding: '96px 32px 40px',
      borderBottom: 'none',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        {/* cycling headline */}
        <h1 style={{
          margin: '0 auto',
          maxWidth: 980,
          fontFamily: "'Instrument Serif', serif",
          fontWeight: 400,
          fontSize: 'clamp(48px, 7vw, 92px)',
          lineHeight: 1.02,
          letterSpacing: '-0.025em',
          color: 'var(--ink)',
          minHeight: '2.05em',
        }}>
          <CycleText text={current} keyId={index} />
        </h1>

        {/* progress dots */}
        <div style={{
          display: 'flex', gap: 6, justifyContent: 'center', marginTop: 22,
        }}>
          {safeHeadlines.map((_, i) => (
            <button key={i}
              onClick={() => setIndex(i)}
              aria-label={`Headline ${i+1}`}
              style={{
                width: i === index ? 28 : 8, height: 4,
                background: i === index ? 'var(--ink)' : 'var(--line)',
                border: 'none', borderRadius: 999, padding: 0,
                transition: 'width 320ms ease, background 320ms ease',
              }}
            />
          ))}
        </div>

        {/* subhead */}
        <p style={{
          margin: '32px auto 0', maxWidth: 640,
          fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)',
        }}>
          Hi, I’m Christian. I’m a senior finance leader who builds financial tools
          founders can actually use. Pricing, unit economics, scenarios, and the boring
          plumbing underneath. Productized packages, built for the long haul.
        </p>

        {/* CTAs */}
        <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button onClick={onBook} style={{
            background: 'var(--ink)', color: 'var(--paper)',
            border: 'none', borderRadius: 999,
            padding: '14px 26px', fontSize: 15, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            Book a 30-min intro
            <span style={{ opacity: 0.7 }}>→</span>
          </button>
          <a href="#services" style={{
            background: 'transparent', color: 'var(--ink)',
            border: '1px solid var(--line)', borderRadius: 999,
            padding: '14px 26px', fontSize: 15, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            See services
          </a>
        </div>

        {/* meta line */}
        <div style={{
          marginTop: 88, display: 'flex', justifyContent: 'center',
          fontSize: 17, fontWeight: 400, color: 'var(--ink)',
        }}>
          <span style={{ letterSpacing: '0.01em' }}>
            Working with portfolio companies of
          </span>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value }) {
  return (
    <span style={{ display: 'inline-flex', gap: 8, alignItems: 'baseline' }}>
      <span className="mono" style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 14 }}>{value}</span>
      <span>{label}</span>
    </span>
  );
}

// Animated text crossfade
function CycleText({ text, keyId }) {
  return (
    <span key={keyId} style={{
      display: 'inline-block',
      animation: 'heroFade 700ms cubic-bezier(.2,.7,.2,1) both',
    }}>
      {text}
      <style>{`
        @keyframes heroFade {
          0% { opacity: 0; transform: translateY(8px) }
          100% { opacity: 1; transform: translateY(0) }
        }
      `}</style>
    </span>
  );
}

window.Hero = Hero;