// Method section (5 steps) — sticky-scroll storytelling function MethodSection() { const [active, setActive] = useState(0); const stepRefs = useRef([]); useEffect(() => { const observers = []; stepRefs.current.forEach((el, i) => { if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) setActive(i); }, { threshold: 0.55, rootMargin: "-20% 0px -30% 0px" } ); io.observe(el); observers.push(io); }); return () => observers.forEach((o) => o.disconnect()); }, []); return (
{/* Section heading */}
El método · 5 fases

Cinco pasos, en orden.
Como lo haría una agencia,
pero contigo al mando.

Las herramientas genéricas te dejan delante de una hoja en blanco. El método Media Planning Canvas te guía paso a paso —del contexto al plan de medios— exactamente igual que aprenderías en una escuela de negocios.

{/* Left: step list */}
{METHOD_STEPS.map((step, i) => (
(stepRefs.current[i] = el)} style={{ minHeight: 320 }} >
FASE {step.n} {step.name.toUpperCase()}

{step.title}

{step.body}

    {step.bullets.map((b, j) => (
  • ✓ {b}
    • ))}
))}
{/* Right: sticky screenshot */}
{METHOD_STEPS.map((_, i) => ( ))}
FASE {METHOD_STEPS[active].n} · {METHOD_STEPS[active].name}
{METHOD_STEPS.map((s, i) => ( {s.name} ))}
); } function PlayBadge({ accent = "var(--accent)" }) { return ( ); } Object.assign(window, { MethodSection, PlayBadge });