// growth-sections.jsx — secciones premium de la landing "Growth"
// Reusa F, Magnetic, Parallax, RevealText, RevealWords, GlitchWord, useScrollProgress,
// useInView de shared.jsx / final-hooks.jsx / final-sections.jsx.
// Pieza nueva de esta landing: GrowthChart — un gráfico de crecimiento animado con
// contadores en vivo, distinto de la terminal de MVP y la red de nodos de Empresas.

function useCountUp(target, active, duration = 1600) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [active, target, duration]);
  return val;
}

function GrowthChart() {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.35 });
  const svgRef = React.useRef(null);
  const [dash, setDash] = React.useState(1000);

  const pathD = 'M0,150 C40,148 60,140 90,132 C130,122 150,110 190,100 C230,90 250,60 290,52 C320,46 340,20 380,8';
  const points = [
    { x: 0, y: 150 }, { x: 90, y: 132 }, { x: 190, y: 100 }, { x: 290, y: 52 }, { x: 380, y: 8 }
  ];

  React.useEffect(() => {
    const p = svgRef.current;
    if (p) setDash(p.getTotalLength());
  }, []);

  const clientes = useCountUp(312, inView, 1800);
  const roas = useCountUp(4.2, inView, 1800);
  const cac = useCountUp(38, inView, 1800);

  return (
    <div ref={ref} style={{
      background: F.surface, border: `1px solid ${F.lineStrong}`, borderRadius: 24,
      padding: '32px 32px 24px', boxShadow: `0 0 60px ${F.accentGlow}`, position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: F.textMute, letterSpacing: '0.1em' }}>ADQUISICIÓN · ÚLTIMOS 90 DÍAS</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: F.ok }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: F.ok, boxShadow: `0 0 8px ${F.ok}` }} />EN VIVO
        </span>
      </div>

      <svg viewBox="0 0 380 160" style={{ width: '100%', height: 140, display: 'block', overflow: 'visible' }}>
        <defs>
          <linearGradient id="growthFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={F.accent} stopOpacity="0.35" />
            <stop offset="100%" stopColor={F.accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={`${pathD} L380,160 L0,160 Z`} fill="url(#growthFill)" opacity={inView ? 1 : 0} style={{ transition: 'opacity 1s ease .6s' }} />
        <path ref={svgRef} d={pathD} fill="none" stroke={F.accent} strokeWidth="2.5" strokeLinecap="round"
          style={{
            strokeDasharray: dash, strokeDashoffset: inView ? 0 : dash,
            transition: 'stroke-dashoffset 1.6s cubic-bezier(.16,.84,.3,1)',
            filter: `drop-shadow(0 0 6px ${F.accent})`
          }} />
        {points.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r="4" fill={F.accent}
            style={{
              opacity: inView ? 1 : 0, transform: inView ? 'scale(1)' : 'scale(0)', transformOrigin: `${p.x}px ${p.y}px`,
              transition: `opacity .4s ${0.4 + i * 0.25}s, transform .4s ${0.4 + i * 0.25}s`
            }} />
        ))}
      </svg>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 20, paddingTop: 20, borderTop: `1px solid ${F.line}` }}>
        <div>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: 26, fontWeight: 500, color: F.text }}>{Math.round(clientes)}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: F.textMute, letterSpacing: '0.06em', marginTop: 4 }}>CLIENTES NUEVOS</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: 26, fontWeight: 500, color: F.text }}>{roas.toFixed(1)}x</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: F.textMute, letterSpacing: '0.06em', marginTop: 4 }}>RETORNO SOBRE PAUTA</div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: 26, fontWeight: 500, color: F.text }}>-{Math.round(cac)}%</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: F.textMute, letterSpacing: '0.06em', marginTop: 4 }}>COSTO POR CLIENTE</div>
        </div>
      </div>
    </div>
  );
}

// ───────────── HERO ─────────────
function GHero({ content }) {
  const heroRef = React.useRef(null);
  const progress = useScrollProgress(heroRef);
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });

  React.useEffect(() => {
    if (document.getElementById('growth-hero-styles')) return;
    const s = document.createElement('style');
    s.id = 'growth-hero-styles';
    s.textContent = `
      @property --grBorderAngle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
      @keyframes grBorderRotate { to { --grBorderAngle: 360deg; } }
      @keyframes grBtnShimmer {
        0%, 75% { background-position: 200% center; opacity: 0; }
        80% { opacity: 1; } 95%, 100% { background-position: -100% center; opacity: 0; }
      }
      @keyframes grArrow { 0%, 60%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } }
      .gr-cta-wrap {
        position: relative; display: inline-block; border-radius: 14px; padding: 2px;
        background: conic-gradient(from var(--grBorderAngle), transparent 0%, #2199ea 12%, #63b7f0 22%, #137dc5 32%, transparent 44%, transparent 100%);
        animation: grBorderRotate 2.5s linear infinite;
        transition: transform 0.3s cubic-bezier(.2,.8,.3,1);
      }
      .gr-cta-wrap:hover { transform: scale(1.04); }
      .gr-cta-inner {
        position: relative; overflow: hidden; padding: 20px 36px;
        background: linear-gradient(135deg, #2199ea 20%, #137dc5); color: #fff; border: none; border-radius: 12px;
        font-family: var(--font-heading); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
        cursor: pointer; display: flex; align-items: center; gap: 8px;
      }
      .gr-cta-inner::after {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
        background-size: 200% 100%; animation: grBtnShimmer 9s ease-in-out infinite; pointer-events: none;
      }
      .gr-arrow { display: inline-block; animation: grArrow 3s ease-in-out infinite; }
    `;
    document.head.appendChild(s);
  }, []);

  React.useEffect(() => {
    const onMove = (e) => {
      const el = heroRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
    };
    const el = heroRef.current; if (!el) return;
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  const px = (mouse.x - 0.5) * 20;
  const py = (mouse.y - 0.5) * 20;

  return (
    <section ref={heroRef} style={{
      position: 'relative', padding: '180px 80px 140px', overflow: 'hidden', minHeight: '100vh',
      background: `
        radial-gradient(ellipse at ${mouse.x * 100}% ${mouse.y * 100}%, ${F.accentGlow} 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(19,125,197,0.18) 0%, transparent 55%),
        ${F.bg}`,
      transition: 'background 0.4s'
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(${F.line} 1px, transparent 1px), linear-gradient(90deg, ${F.line} 1px, transparent 1px)`,
        backgroundSize: '120px 120px',
        transform: `translate3d(${px}px, ${py - progress * 120}px, 0)`, opacity: 0.6
      }} />
      <Parallax speed={-0.3} style={{ position: 'absolute', bottom: 80, left: 40, pointerEvents: 'none' }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12, color: F.accent, letterSpacing: '0.3em',
          writingMode: 'vertical-rl', transform: 'rotate(180deg)', opacity: 0.5
        }}>EUREKANT.GROWTH.MARKETING</div>
      </Parallax>

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', paddingTop: 40, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{
            color: F.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 44,
            display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-mono)'
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: F.accent,
              boxShadow: `0 0 14px ${F.accent}`, animation: 'finalPulse 2s infinite'
            }} />
            <RevealWords text={content.hero.eyebrow} stagger={40} delay={300} />
          </div>

          <h1 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 500, fontSize: 'clamp(40px, 5.6vw, 92px)',
            lineHeight: 1.02, margin: 0, color: F.text, letterSpacing: '-0.03em',
            transform: `translate3d(${px * -0.3}px, ${py * -0.2 - progress * 40}px, 0)`,
            transition: 'transform .4s cubic-bezier(.2,.7,.3,1)'
          }}>
            <div style={{ overflow: 'hidden', paddingBottom: 6 }}>
              <GlitchWord words={content.hero.rotating} interval={3000} gradient />
              <span style={{ display: 'inline-block', marginLeft: '0.25em' }}>
                <RevealText text={content.hero.titleRest} stagger={35} delay={600} />
              </span>
            </div>
            <div style={{ overflow: 'hidden', paddingBottom: 6 }}>
              <RevealText text={content.hero.title2} stagger={18} delay={1000} gradient />
            </div>
          </h1>

          <p style={{
            color: F.textDim, fontSize: 20, lineHeight: 1.55, maxWidth: 600, marginTop: 40, fontWeight: 300,
            opacity: 0, animation: 'finalFadeUp 1s cubic-bezier(.16,.84,.3,1) 1500ms forwards'
          }}>{content.hero.sub}</p>

          <div style={{
            display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap', alignItems: 'center',
            opacity: 0, animation: 'finalFadeUp 1s cubic-bezier(.16,.84,.3,1) 1800ms forwards'
          }}>
            <Magnetic strength={0.3}>
              <div className="gr-cta-wrap">
                <button className="gr-cta-inner" onClick={() => { window.location.href = 'agendar'; }}>
                  {content.hero.cta1}<span className="gr-arrow">→</span>
                </button>
              </div>
            </Magnetic>
            <Magnetic strength={0.2}>
              <a href="#modulos" onClick={(e) => { e.preventDefault(); const t = document.getElementById('modulos'); if (t) window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }} style={{
                padding: '20px 36px', background: 'transparent', color: F.text, textDecoration: 'none',
                border: `1px solid ${F.lineStrong}`, borderRadius: 12, fontFamily: 'var(--font-heading)',
                fontSize: 15, fontWeight: 500, cursor: 'pointer', display: 'inline-block'
              }}>{content.hero.cta2}</a>
            </Magnetic>
          </div>

          <div style={{
            marginTop: 52, display: 'inline-flex', alignItems: 'center', gap: 10, padding: '12px 20px',
            border: `1px solid ${F.line}`, borderRadius: 12, background: 'rgba(10,14,28,0.6)',
            fontFamily: 'var(--font-mono)', fontSize: 12, color: F.textDim, letterSpacing: '0.04em',
            opacity: 0, animation: 'finalFadeUp 1s cubic-bezier(.16,.84,.3,1) 2100ms forwards'
          }}>
            <span style={{ color: F.ok }}>●</span>{content.hero.meta}
          </div>
        </div>

        <div style={{
          opacity: 0, animation: 'finalFadeUp 1.1s cubic-bezier(.16,.84,.3,1) 1200ms forwards',
          transform: `translate3d(${px * 0.2}px, 0, 0)`
        }}>
          <GrowthChart />
        </div>
      </div>
    </section>
  );
}

function SectionEyebrowHead({ eyebrow, title, sub, align = 'left', maxTitle = 900 }) {
  return (
    <div style={{ maxWidth: 900, margin: align === 'center' ? '0 auto 72px' : '0 0 72px', textAlign: align }}>
      <div style={{ color: F.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 24, fontFamily: 'var(--font-mono)' }}>{eyebrow}</div>
      <h2 style={{
        fontFamily: 'var(--font-heading)', fontSize: 'clamp(36px, 4.8vw, 68px)', fontWeight: 500,
        lineHeight: 1.02, margin: 0, color: F.text, letterSpacing: '-0.02em', maxWidth: maxTitle
      }}>{title}</h2>
      {sub && <p style={{ color: F.textDim, fontSize: 18, lineHeight: 1.6, marginTop: 24, maxWidth: 680 }}>{sub}</p>}
    </div>
  );
}

// ───────────── COSTO DE SER INVISIBLE ─────────────
function GCost({ content }) {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.2 });
  return (
    <section ref={ref} style={{ padding: '140px 80px', position: 'relative', overflow: 'hidden' }}>
      <Parallax speed={0.4} style={{ position: 'absolute', top: 40, right: -60, pointerEvents: 'none' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 240, fontWeight: 200, color: 'transparent', WebkitTextStroke: `1px ${F.line}`, opacity: 0.4 }}>01</div>
      </Parallax>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <SectionEyebrowHead eyebrow={content.cost.eyebrow} title={content.cost.title} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 1, background: F.line, borderRadius: 24, overflow: 'hidden', border: `1px solid ${F.line}` }}>
          {content.cost.items.map((c, i) => (
            <div key={i} style={{
              background: F.surface, padding: '48px 40px',
              opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(24px)',
              transition: `all .8s ${i * 0.15}s cubic-bezier(.16,.84,.3,1)`
            }}>
              <div style={{
                fontFamily: 'var(--font-heading)', fontSize: 56, fontWeight: 500, letterSpacing: '-0.02em',
                background: 'linear-gradient(135deg, #2199ea 0%, #63b7f0 60%, #e7ecff 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'
              }}>{c.stat}</div>
              <div style={{ color: F.textMute, fontSize: 12, letterSpacing: '0.1em', fontFamily: 'var(--font-mono)', margin: '10px 0 20px', textTransform: 'uppercase' }}>{c.label}</div>
              <p style={{ color: F.textDim, fontSize: 15.5, lineHeight: 1.6, margin: 0 }}>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────── DOLORES ─────────────
function GPains({ content }) {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.15 });
  return (
    <section ref={ref} style={{ padding: '140px 80px', background: F.bgAlt, borderTop: `1px solid ${F.line}`, borderBottom: `1px solid ${F.line}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionEyebrowHead eyebrow={content.pains.eyebrow} title={content.pains.title} sub={content.pains.sub} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {content.pains.items.map((p, i) => (
            <div key={i}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = F.accent}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = F.line}
              style={{
                background: F.surface, border: `1px solid ${F.line}`, borderRadius: 24, padding: 40,
                position: 'relative', overflow: 'hidden',
                opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(28px)',
                transitionProperty: 'border-color, opacity, transform',
                transitionDuration: `.35s, .8s, .8s`, transitionDelay: `0s, ${i * 0.12}s, ${i * 0.12}s`,
                transitionTimingFunction: 'ease, cubic-bezier(.16,.84,.3,1), cubic-bezier(.16,.84,.3,1)'
              }}>
              <div style={{
                position: 'absolute', top: 12, right: 20, fontFamily: 'var(--font-heading)', fontSize: 88,
                color: 'transparent', WebkitTextStroke: `1px ${F.lineStrong}`, fontWeight: 200, lineHeight: 1
              }}>{p.n}</div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 22, fontWeight: 500, color: F.text, margin: '0 0 14px', position: 'relative', maxWidth: 260 }}>{p.title}</h3>
              <p style={{ color: F.textDim, fontSize: 15, lineHeight: 1.65, margin: 0, position: 'relative' }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────── QUÉ INCLUYE (sticky scroll) ─────────────
function GModules({ content }) {
  const [active, setActive] = React.useState(0);
  const ref = React.useRef(null);
  const progress = useScrollProgress(ref);

  React.useEffect(() => {
    if (progress > 0.1 && progress < 0.9) {
      const idx = Math.min(3, Math.floor(progress * 4));
      if (idx !== active) setActive(idx);
    }
  }, [progress]);

  const step = content.modules.steps[active];

  return (
    <section ref={ref} id="modulos" style={{ padding: '160px 80px', position: 'relative', overflow: 'hidden' }}>
      <Parallax speed={-0.4} style={{ position: 'absolute', top: 100, left: -40, pointerEvents: 'none' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 240, fontWeight: 200, color: 'transparent', WebkitTextStroke: `1px ${F.line}`, lineHeight: 0.85, opacity: 0.4 }}>02</div>
      </Parallax>

      <div style={{ maxWidth: 1280, margin: '0 auto 80px', position: 'relative' }}>
        <SectionEyebrowHead eyebrow={content.modules.eyebrow} title={content.modules.title} sub={content.modules.sub} maxTitle={780} />
      </div>

      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
        <div>
          {content.modules.steps.map((s, i) => (
            <div key={i} onMouseEnter={() => setActive(i)} onClick={() => setActive(i)}
              style={{
                padding: '32px 0', cursor: 'pointer',
                borderTop: `1px solid ${active === i ? F.accent : F.line}`,
                opacity: active === i ? 1 : 0.4,
                transform: active === i ? 'translateX(8px)' : 'translateX(0)',
                transition: 'opacity .4s, border-color .4s, transform .4s'
              }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>
                <span style={{ color: F.accent, fontSize: 12, fontFamily: 'var(--font-mono)' }}>{s.n}</span>
                <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 24, fontWeight: 500, margin: 0, color: F.text, flex: 1, letterSpacing: '-0.01em' }}>{s.title}</h3>
                <span style={{ color: F.textMute, fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>{s.dur}</span>
              </div>
            </div>
          ))}
          <div style={{ borderTop: `1px solid ${F.line}` }} />
        </div>
        <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
          <div key={active} style={{
            background: F.surface, border: `1px solid ${F.lineStrong}`, borderRadius: 32, padding: 56,
            position: 'relative', overflow: 'hidden', boxShadow: `0 0 80px ${F.accentGlow}`,
            animation: 'finalFadeUp .7s cubic-bezier(.16,.84,.3,1)'
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: `linear-gradient(90deg, transparent, ${F.accent}, transparent)` }} />
            <div style={{
              position: 'absolute', left: 0, right: 0, height: 1,
              background: `linear-gradient(90deg, transparent, ${F.accent}, transparent)`,
              animation: 'finalScan 4s linear infinite', opacity: 0.4
            }} />
            <div style={{
              position: 'absolute', right: 24, top: 24, fontFamily: 'var(--font-heading)', fontSize: 200,
              color: F.accentGlow, lineHeight: 0.85, letterSpacing: '-0.04em', pointerEvents: 'none', opacity: 0.25, fontWeight: 200
            }}>{step.n}</div>
            <div style={{ position: 'relative' }}>
              <div style={{ color: F.accent, fontSize: 11, letterSpacing: '0.2em', marginBottom: 28, fontFamily: 'var(--font-mono)' }}>
                CANAL {step.n} / 04 · {step.dur.toUpperCase()}
              </div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 40, fontWeight: 500, margin: '0 0 28px', color: F.text, lineHeight: 1.05, letterSpacing: '-0.02em' }}>{step.title}</h3>
              <p style={{ color: F.textDim, fontSize: 17, lineHeight: 1.65, margin: 0 }}>{step.desc}</p>
              <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 4 }}>
                {content.modules.steps.map((_, i) => (
                  <div key={i} style={{ height: 3, background: i <= active ? F.accent : F.line, transition: 'background .5s', boxShadow: i === active ? `0 0 12px ${F.accent}` : 'none' }} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────────── CÓMO TRABAJAMOS ─────────────
function GProcess({ content }) {
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.15 });
  return (
    <section ref={ref} style={{ padding: '140px 80px', background: F.bgAlt, borderTop: `1px solid ${F.line}`, borderBottom: `1px solid ${F.line}`, position: 'relative', overflow: 'hidden' }}>
      <Parallax speed={0.3} style={{ position: 'absolute', top: 60, right: -60, pointerEvents: 'none' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 220, fontWeight: 200, color: 'transparent', WebkitTextStroke: `1px ${F.line}`, opacity: 0.4 }}>03</div>
      </Parallax>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <SectionEyebrowHead eyebrow={content.process.eyebrow} title={content.process.title} sub={content.process.sub} maxTitle={760} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32 }}>
          {content.process.items.map((st, i) => (
            <div key={i} style={{
              opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(24px)',
              transition: `all .8s ${i * 0.15}s cubic-bezier(.16,.84,.3,1)`
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 48, fontWeight: 200, color: 'transparent', WebkitTextStroke: `1px ${F.lineStrong}`, marginBottom: 20, lineHeight: 1 }}>0{i + 1}</div>
              <div style={{ color: F.accent, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', marginBottom: 10 }}>{st.dur.toUpperCase()}</div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 23, fontWeight: 500, color: F.text, margin: '0 0 12px' }}>{st.title}</h3>
              <p style={{ color: F.textDim, fontSize: 15, lineHeight: 1.6, margin: 0 }}>{st.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GrowthChart, GHero, GCost, GPains, GModules, GProcess });