// HeroSection.jsx — Editorial hero: massive serif headline, restrained frame, typographic stats

const CountUp = ({ to, duration = 2000, decimals = 0, prefix = '', suffix = '' }) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const startedRef = React.useRef(false);

  React.useEffect(() => {
    const node = ref.current;
    if (!node) return;
    let rafId;
    const start = () => {
      if (startedRef.current) return;
      startedRef.current = true;
      const startTime = performance.now();
      const tick = (now) => {
        const elapsed = now - startTime;
        const t = Math.min(1, elapsed / duration);
        // ease-out cubic for a nice settle
        const eased = 1 - Math.pow(1 - t, 3);
        setVal(eased * to);
        if (t < 1) rafId = requestAnimationFrame(tick);
      };
      rafId = requestAnimationFrame(tick);
    };

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) start(); });
    }, { threshold: 0.4 });
    io.observe(node);

    return () => { io.disconnect(); if (rafId) cancelAnimationFrame(rafId); };
  }, [to, duration]);

  const formatted = decimals > 0
    ? val.toFixed(decimals)
    : Math.round(val).toLocaleString();

  return <span ref={ref}>{prefix}{formatted}{suffix}</span>;
};

const HeroSection = ({ onNavigate, bookingUrl, tweaks }) => {
  const t = tweaks || {};
  const accent = t.accentColor || '#7a8a64';
  return (
    <section style={{
      background: t.bgColor || '#fafaf7',
      paddingTop: 96,
      paddingBottom: 64,
      minHeight: 'calc(100vh - 0px)',
      display: 'flex',
      alignItems: 'center',
      position: 'relative',
      overflow: 'hidden'
    }}>
      <div className="hero-inner" style={{
        maxWidth: 1280, margin: '0 auto', padding: '32px 56px',
        width: '100%',
        display: 'flex', flexDirection: 'column', gap: 56
      }}>
        {/* Eyebrow */}
        <div className="eyebrow tag">GROWTH PARTNER FOR 6-7 FIGURE SOLO CONSULTANTS + BOUTIQUE FIRMS</div>

        {/* Massive headline */}
        <h1 className="hero-headline" style={{
          fontSize: 'clamp(48px, 8.4vw, 124px)',
          color: '#1a1a1a',
          margin: 0,
          lineHeight: 1.02,
          letterSpacing: '-0.025em'
        }}>
          Create clients on{' '}
          <em style={{
            color: accent,
            fontFamily: "'Instrument Serif', serif",
            fontStyle: 'italic',
            fontWeight: 400
          }}>LinkedIn</em>.<br className="hero-break" />{' '}
          Build a <em style={{
            color: '#1a1a1a',
            fontFamily: "'Instrument Serif', serif",
            fontStyle: 'italic',
            fontWeight: 400
          }}>life-first</em> business.
        </h1>

        {/* Subhead + actions */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr',
          gap: 64,
          alignItems: 'end',
          paddingTop: 8
        }} className="hero-grid">
          <p style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 19, color: '#3a3a36', lineHeight: 1.55,
            fontWeight: 300, maxWidth: 560
          }}>A 6-month hands-on partnership for solo consultants + boutique firms who want to move beyond referrals and predictably create clients. All without bro-marketing or letting your business run your life.
Because life-FIRST, always.

          </p>

          <div style={{ display: 'flex', gap: 28, alignItems: 'center', flexWrap: 'wrap', justifySelf: 'start' }}>
            <a href={bookingUrl} target="_blank" rel="noopener noreferrer" className="btn-primary">
              {t.ctaText || 'Book an intro call'}
            </a>
            <button onClick={() => onNavigate('process')} className="btn-secondary">
              See how it works
            </button>
          </div>
        </div>

        {/* Editorial divider */}
        <hr style={{ border: 'none', borderTop: '1px solid rgba(26,26,26,0.12)',
          margin: '24px 0 0 0'
        }} />

        {/* Typographic stat row */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 48, alignItems: 'start'
        }} className="three-col">
          {[
          { num: '16+', label: 'Years in business consulting and coaching', count: { to: 16, duration: 3000, suffix: '+' } },
          { num: '$15.9M', label: 'Generated', count: { to: 15.9, duration: 4000, decimals: 1, prefix: '$', suffix: 'M' } },
          { num: '1–2', label: 'Spots open / month. Intimate by design.' }].
          map((s, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <span style={{
              fontFamily: "'Fraunces', serif",
              fontVariationSettings: "'opsz' 144",
              fontSize: 'clamp(40px, 4.8vw, 64px)',
              fontWeight: 400, color: '#1a1a1a', lineHeight: 1,
              letterSpacing: '-0.03em',
              fontVariantNumeric: 'tabular-nums'
            }}>{s.count ? <CountUp {...s.count} /> : s.num}</span>
              <span className="eyebrow" style={{ marginTop: 4 }}>{s.label}</span>
            </div>
          )}
        </div>

        {/* Landscape video */}
        <VideoSection />
      </div>
    </section>);

};

Object.assign(window, { HeroSection });