// Mid-page sections: Problem, What We Do, Difference, Method

const { useEffect: useEffect2, useRef: useRef2, useState: useState2 } = React;

// ====== Reveal-on-scroll helper ======
const Reveal = ({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) => {
  const ref = useRef2(null);
  const [shown, setShown] = useState2(false);
  useEffect2(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setShown(true); io.disconnect(); }
    }, { threshold: 0.18 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const cls = `reveal ${shown ? 'in' : ''} ${delay ? 'delay-' + delay : ''} ${className}`;
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
};

// ====== 2. PROBLEM ======
const ProblemSection = () => (
  <section className="sec-pad" style={{background:'#050505', position:'relative', zIndex: 4}}>
    <div className="container">
      <Reveal>
        <div className="eyebrow" style={{marginBottom: 32}}>
          <span className="plus-square">+</span>
          EL PROBLEMA
        </div>
      </Reveal>
      <Reveal delay={1}>
        <h2 className="h-section" style={{maxWidth: '20ch'}}>
          La gente no odia la publicidad.<br/>
          <span className="serif" style={{color:'rgba(255,255,255,0.55)'}}>Odia cuando </span>
          <span className="red">la publicidad se nota demasiado.</span>
        </h2>
      </Reveal>
      <Reveal delay={2}>
        <p className="lead" style={{marginTop: 48, fontSize: 22, maxWidth: '60ch'}}>
          Las marcas producen más contenido que nunca. Pero si no conecta,
          no se recuerda y no mueve a nadie, solo ocupa espacio en el feed.
        </p>
      </Reveal>

      {/* Stat row */}
      <div style={{
        marginTop: 96,
        display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap: 0,
        borderTop:'1px solid rgba(255,255,255,0.08)',
      }}>
        {[
          { n: '47%', l: 'del contenido brand muere antes de los 3s' },
          { n: '×3.2', l: 'recall cuando el formato se siente nativo' },
          { n: '11d', l: 'la vida real de un trend antes de saturarse' },
          { n: '0', l: 'minutos que la audiencia te debe' },
        ].map((s, i) => (
          <Reveal key={i} delay={(i % 4) + 1} style={{
            padding:'40px 24px 40px 0',
            borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            paddingLeft: i === 0 ? 0 : 24,
          }}>
            <div className="mono" style={{
              fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 700,
              color: i === 3 ? '#E60000' : '#fff', lineHeight: 1,
            }}>{s.n}</div>
            <div style={{
              marginTop: 14, fontSize: 13, color:'rgba(255,255,255,0.6)',
              maxWidth: '24ch', lineHeight: 1.4,
            }}>{s.l}</div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ====== 3. WHAT WE DO ======
const SERVICES = [
  { id:'01', tag:'Estrategia de Influencia', headline:'Influencers sobran.', punch:'Influencia real, no tanto.', desc:'Diseñamos quién, dónde y para qué.', tone:'red' },
  { id:'02', tag:'UGC',                       headline:'Contenido que parece', punch:'recomendación, no comercial.', desc:'Personas reales, escena real, conversión real.', tone:'fuchsia' },
  { id:'03', tag:'UGC AI',                    headline:'Más ideas. Más versiones.', punch:'Menos basura generada en masa.', desc:'IA para iterar, no para llenar.', tone:'orange' },
  { id:'04', tag:'Videotelling',              headline:'Historias que se mueven', punch:'al ritmo del feed.', desc:'Hook, beat y payoff en menos de 9s.', tone:'red' },
  { id:'05', tag:'Creator Hub',               headline:'De "hace buen contenido"', punch:'a "puede construir una marca".', desc:'Talento como activo de negocio, no proveedor.', tone:'fuchsia' },
  { id:'06', tag:'Performance Creativa',      headline:'Publicar es fácil.', punch:'Aprender es el negocio.', desc:'Mediciones que deciden el siguiente movimiento.', tone:'orange' },
];

const ServiceCard = ({ s, i }) => {
  const c = s.tone === 'red' ? '#E60000' : s.tone === 'fuchsia' ? '#FF2D7A' : '#FF5A1F';
  return (
    <Reveal delay={(i % 3) + 1} className="srv-card" style={{
      position:'relative',
      padding: 32, paddingBottom: 40,
      background:'#0B0B0D',
      border:'1px solid rgba(255,255,255,0.08)',
      borderRadius: 14,
      overflow:'hidden',
      transition:'all 320ms cubic-bezier(0.2,0.8,0.2,1)',
      cursor:'pointer',
    }}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-start',
        marginBottom: 32,
      }}>
        <div className="mono" style={{
          fontSize: 11, color:'rgba(255,255,255,0.45)', letterSpacing:'0.1em',
        }}>SVC · {s.id}</div>
        <span style={{
          width:26, height:26, borderRadius:6, background: c,
          display:'grid', placeItems:'center',
          fontFamily:'var(--font-display)', fontWeight:900, fontSize:16, color:'#fff',
          lineHeight:1,
        }}>+</span>
      </div>

      <div style={{
        fontFamily:'var(--font-display-tight)', fontWeight:700, fontSize:11,
        letterSpacing:'0.18em', textTransform:'uppercase',
        color: c, marginBottom: 18,
      }}>{s.tag}</div>

      <h3 style={{
        fontFamily:'var(--font-display)',
        fontSize: 'clamp(24px, 2.4vw, 36px)',
        lineHeight: 1.05, letterSpacing:'-0.025em',
        margin: 0,
      }}>
        {s.headline}<br/>
        <span style={{color: c}}>{s.punch}</span>
      </h3>

      <p style={{
        marginTop: 24, fontSize: 14, color:'rgba(255,255,255,0.62)',
        lineHeight: 1.55,
      }}>{s.desc}</p>

      {/* hover preview strip */}
      <div className="srv-strip" style={{
        position:'absolute', bottom: -2, left: 0, right: 0, height: 3,
        background: c, transform:'scaleX(0)', transformOrigin:'left',
        transition:'transform 420ms cubic-bezier(0.2,0.8,0.2,1)',
      }}/>
    </Reveal>
  );
};

const WhatWeDoSection = () => (
  <section id="servicios" className="sec-pad" style={{background:'#050505'}}>
    <div className="container">
      <Reveal>
        <div className="eyebrow" style={{marginBottom: 32}}>
          <span className="plus-square">+</span>
          QUÉ HACEMOS
        </div>
      </Reveal>
      <Reveal delay={1}>
        <h2 className="h-section" style={{maxWidth:'24ch'}}>
          Diseñamos relevancia con contenido,
          personas, tecnología y <span className="grad-heat">data.</span>
        </h2>
      </Reveal>

      <div style={{
        marginTop: 80,
        display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap: 16,
      }}>
        {SERVICES.map((s, i) => <ServiceCard key={s.id} s={s} i={i}/>)}
      </div>
    </div>
    <style>{`
      .srv-card:hover {
        background: #131316 !important;
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.18) !important;
      }
      .srv-card:hover .srv-strip { transform: scaleX(1) !important; }
    `}</style>
  </section>
);

// ====== 4. DIFFERENCE ======
const DIFFERENTIALS = [
  { n:'01', text:'No partimos de nombres.', punch:'Partimos de estrategia.' },
  { n:'02', text:'No hacemos contenido para llenar calendarios.', punch:'Creamos piezas con intención.' },
  { n:'03', text:'No usamos IA para volvernos genéricos.', punch:'La usamos para probar mejor.' },
  { n:'04', text:'No escondemos la plata.', punch:'La explicamos.' },
  { n:'05', text:'No medimos por cumplir.', punch:'Medimos para decidir el siguiente movimiento.' },
];

const DifferenceSection = () => (
  <section className="sec-pad" style={{background:'#fff', color:'#0A0A0B', position:'relative'}}>
    <div className="container">
      <Reveal>
        <div className="eyebrow ink" style={{marginBottom: 32}}>
          <span className="plus-square">+</span>
          DIFERENCIA
        </div>
      </Reveal>
      <Reveal delay={1}>
        <h2 className="h-section" style={{color:'#0A0A0B', maxWidth:'18ch'}}>
          No somos otra agencia
          <br/>buscando <span className="red">influencers.</span>
        </h2>
      </Reveal>
      <Reveal delay={2}>
        <p className="lead ink" style={{marginTop: 32, fontSize: 19, maxWidth:'58ch'}}>
          Primero entendemos qué tiene que pasar. Después diseñamos la idea,
          el formato, la persona, el canal y la medición.
        </p>
      </Reveal>

      <div style={{marginTop: 80, display:'flex', flexDirection:'column', gap: 0}}>
        {DIFFERENTIALS.map((d, i) => (
          <Reveal key={d.n} delay={(i % 4) + 1} style={{
            display:'grid',
            gridTemplateColumns:'80px 1fr auto',
            alignItems:'center', gap: 24,
            padding:'36px 0',
            borderTop:'1px solid rgba(10,10,11,0.1)',
            borderBottom: i === DIFFERENTIALS.length - 1 ? '1px solid rgba(10,10,11,0.1)' : 'none',
          }}>
            <div className="mono" style={{
              fontSize: 14, color:'#E60000', fontWeight: 700, letterSpacing:'-0.01em',
            }}>{d.n}/05</div>
            <div style={{
              fontFamily:'var(--font-display)',
              fontSize:'clamp(22px, 2.6vw, 38px)',
              lineHeight: 1.1, letterSpacing:'-0.02em',
            }}>
              <span style={{color:'rgba(10,10,11,0.45)'}}>{d.text}</span>{' '}
              <span style={{color:'#0A0A0B'}}>{d.punch}</span>
            </div>
            <span style={{
              width:32, height:32, borderRadius:7, background:'#E60000',
              display:'grid', placeItems:'center',
              fontFamily:'var(--font-display)', fontWeight:900, fontSize:18, color:'#fff', lineHeight:1,
            }}>+</span>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ====== 5. METHOD ======
const METHOD_STEPS = [
  { id:'01', name:'Be Rescued',  desc:'Rescatamos lo que ya existe: activos, oportunidades, riesgos y objetivos.' },
  { id:'02', name:'Be Curious',  desc:'Nos metemos donde vive la audiencia: cultura, categoría, plataformas y comportamiento.' },
  { id:'03', name:'Be Creative', desc:'Diseñamos ideas que no suenan a comité.' },
  { id:'04', name:'Be Memorable',desc:'Hacemos que pase: producción, revisión, publicación y timing.' },
  { id:'05', name:'Be Smart',    desc:'Aprendemos antes de repetir.' },
];

const MethodSection = () => {
  const ref = useRef2(null);
  const [progress, setProgress] = useState2(0);
  useEffect2(() => {
    const onScroll = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const start = vh * 0.7;
      const end = -r.height + vh * 0.3;
      const p = (start - r.top) / (start - end);
      setProgress(Math.max(0, Math.min(1, p)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="metodo" ref={ref} className="sec-pad" style={{background:'#050505'}}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span className="plus-square">+</span>
            BEING RELEVANT · MÉTODO
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="h-section" style={{maxWidth:'22ch'}}>
            Así evitamos que tu marca sea
            <br/><span className="grad-heat">otro anuncio más.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead" style={{marginTop: 32, fontSize: 19, maxWidth:'58ch'}}>
            Una campaña no empieza con un post. Empieza con una pregunta incómoda:
            <span style={{color:'#fff', fontStyle:'italic'}}> ¿por qué alguien debería prestarte atención?</span>
          </p>
        </Reveal>

        {/* Horizontal flow desktop / vertical mobile */}
        <div className="method-flow" style={{
          marginTop: 96, position:'relative',
        }}>
          {/* connecting line bg */}
          <div className="method-track" style={{
            position:'absolute', top: 32, left: '5%', right: '5%', height: 1,
            background:'rgba(255,255,255,0.1)',
          }}/>
          <div className="method-track-fill" style={{
            position:'absolute', top: 32, left:'5%', height: 1,
            width: `${progress * 90}%`,
            background:'linear-gradient(90deg, #FF2D7A, #FF5A1F, #E60000)',
            transition:'width 80ms linear',
          }}/>

          <div className="method-grid" style={{
            display:'grid',
            gridTemplateColumns:'repeat(5, 1fr)',
            gap: 24,
          }}>
            {METHOD_STEPS.map((s, i) => (
              <Reveal key={s.id} delay={(i % 4) + 1} style={{position:'relative'}}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: i === 0
                    ? 'linear-gradient(135deg,#FF2D7A,#E91E63 50%,#FF6A1A)'
                    : '#0B0B0D',
                  border: i === 0 ? '0' : '1px solid rgba(255,255,255,0.12)',
                  display:'grid', placeItems:'center',
                  fontFamily:'var(--font-display)', fontSize:18, fontWeight:900,
                  color:'#fff',
                  marginBottom: 24,
                }}>{s.id}</div>
                <div style={{
                  fontFamily:'var(--font-display)',
                  fontSize: 'clamp(20px, 1.8vw, 28px)',
                  lineHeight: 1.05, letterSpacing:'-0.02em', marginBottom: 14,
                }}>{s.name}</div>
                <p style={{
                  fontSize:14, lineHeight:1.5, color:'rgba(255,255,255,0.62)', margin:0,
                }}>{s.desc}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .method-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .method-track, .method-track-fill { display: none; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Reveal, ProblemSection, WhatWeDoSection, DifferenceSection, MethodSection });