/* MONOLITH — Bold editorial black + orange */

function MonolithHero({ accent }) {
  const mouse = useMouse();
  const scroll = useScroll();
  const [elRef, progress] = useElementScroll();
  const [statsRef, statsVisible] = useReveal();

  // fake live metrics (CLP realistas: ~$3.5M CLP/día entre todos los clientes, miles de conversiones/día)
  const [roas, setRoas] = useState(4.82);
  const [spend, setSpend] = useState(3_485_000);
  const [convs, setConvs] = useState(2847);
  const [ctr, setCtr] = useState(7.2);
  useEffect(() => {
    const id = setInterval(() => {
      setRoas(r => Math.max(3.8, Math.min(6.2, r + (Math.random() - 0.5) * 0.12)));
      setSpend(s => s + Math.round(Math.random() * 4800));
      setConvs(c => c + Math.round(1 + Math.random() * 3));
      setCtr(v => Math.max(5.0, Math.min(9.0, v + (Math.random() - 0.5) * 0.25)));
    }, 900);
    return () => clearInterval(id);
  }, []);

  // Bars for chart
  const bars = useMemo(() => Array.from({length:28},(_,i)=>({
    h: 20 + Math.sin(i * 0.4) * 18 + Math.random() * 40 + i * 1.8,
    active: i > 20,
  })), []);

  const parallaxY = scroll.y * 0.3;
  const mx = mouse.rx * 20;
  const my = mouse.ry * 20;

  return (
    <section ref={elRef} style={{position:'relative',minHeight:'100vh',padding:'140px 40px 60px',overflow:'hidden'}}>
      {/* Grid lines bg */}
      <div style={{position:'absolute',inset:0,backgroundImage:'linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px)',backgroundSize:'80px 80px',pointerEvents:'none',transform:`translate(${mx*0.3}px, ${my*0.3}px)`}}/>

      {/* Huge background type */}
      <div aria-hidden="true" style={{
        position:'absolute',bottom:-60,left:-20,right:-20,
        fontFamily:'Archivo, Helvetica, sans-serif',fontWeight:900,
        fontSize:'clamp(180px, 30vw, 460px)',lineHeight:.85,
        color:'rgba(255,255,255,.025)',letterSpacing:'-.05em',
        whiteSpace:'nowrap',pointerEvents:'none',
        transform:`translateX(${-progress*300}px) translateY(${parallaxY*0.5}px)`,
      }}>KERN·KERN·KERN</div>

      <div style={{position:'relative',display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:60,minHeight:'calc(100vh - 200px)'}}>
        {/* Left: headline */}
        <div style={{display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
          <div>
            <div data-reveal style={{display:'flex',alignItems:'center',gap:12,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.55)',marginBottom:40}}>
              <span style={{width:8,height:8,background:accent,borderRadius:'50%',boxShadow:`0 0 16px ${accent}`,animation:'kern-pulse 1.6s ease-in-out infinite'}}/>
              <span>[ EN VIVO ] Campañas activas · Santiago, CL</span>
            </div>

            <h1 style={{
              fontFamily:'Archivo, Helvetica, sans-serif',fontWeight:900,
              fontSize:'clamp(60px, 8.5vw, 148px)',lineHeight:.86,letterSpacing:'-.04em',
              textTransform:'uppercase',
            }}>
              <div>Publicidad</div>
              <div style={{display:'flex',alignItems:'center',gap:24,flexWrap:'wrap'}}>
                <span>que</span>
                <span style={{
                  display:'inline-block',padding:'0 .1em',
                  background:accent,color:'#0a0a0a',
                  transform:`skewX(${mouse.rx*3}deg) rotate(${mouse.rx*0.5}deg)`,
                  transition:'transform .3s',
                }}>convierte</span>
                <span>.</span>
              </div>
              <div style={{
                fontStyle:'italic',fontFamily:'Instrument Serif, serif',fontWeight:400,
                textTransform:'none',letterSpacing:'-.02em',
                color:'rgba(255,255,255,.5)',fontSize:'.72em',marginTop:8,
              }}>Sin promesas, con <em>resultados</em>.</div>
            </h1>
          </div>

          <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:40,marginTop:60,flexWrap:'wrap'}}>
            <p style={{maxWidth:480,fontSize:17,lineHeight:1.5,color:'rgba(255,255,255,.7)'}}>{CONTENT.heroSub}</p>
            <div style={{display:'flex',gap:12}}>
              <a href={CONTENT.whatsappLink} data-cursor="ir" style={{
                display:'inline-flex',alignItems:'center',gap:12,
                padding:'22px 36px',background:accent,color:'#0a0a0a',
                fontFamily:'Archivo,sans-serif',fontWeight:800,letterSpacing:'.05em',
                textTransform:'uppercase',fontSize:14,
                border:'2px solid '+accent,transition:'all .3s',
              }} onMouseEnter={e=>{e.currentTarget.style.background='transparent';e.currentTarget.style.color=accent;}} onMouseLeave={e=>{e.currentTarget.style.background=accent;e.currentTarget.style.color='#0a0a0a';}}>
                Cotizar por WhatsApp <span style={{fontSize:18}}>→</span>
              </a>
              <button data-cursor="ver" onClick={()=>document.getElementById('casos')?.scrollIntoView({behavior:'smooth',block:'start'})} style={{
                padding:'22px 28px',border:'2px solid rgba(255,255,255,.2)',
                fontFamily:'Archivo,sans-serif',fontWeight:800,letterSpacing:'.05em',
                textTransform:'uppercase',fontSize:14,transition:'all .3s',
              }} onMouseEnter={e=>e.currentTarget.style.borderColor='#fff'} onMouseLeave={e=>e.currentTarget.style.borderColor='rgba(255,255,255,.2)'}>
                Ver casos
              </button>
            </div>
          </div>
        </div>

        {/* Right: dashboard */}
        <div ref={statsRef} style={{
          position:'relative',
          transform:`translate(${mx*0.6}px, ${my*0.6}px) perspective(1400px) rotateY(${mouse.rx*-4}deg) rotateX(${mouse.ry*3}deg)`,
          transition:'transform .2s ease-out',
        }}>
          <div style={{
            background:'#111',border:'1px solid rgba(255,255,255,.08)',
            borderRadius:18,padding:24,boxShadow:'0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset',
          }}>
            {/* window chrome */}
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
              <div style={{display:'flex',gap:6}}>
                <div style={{width:10,height:10,borderRadius:'50%',background:'rgba(255,255,255,.15)'}}/>
                <div style={{width:10,height:10,borderRadius:'50%',background:'rgba(255,255,255,.15)'}}/>
                <div style={{width:10,height:10,borderRadius:'50%',background:accent}}/>
              </div>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.15em',color:'rgba(255,255,255,.4)'}}>KERN · DASHBOARD · ABR 2026</div>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:accent}}>● LIVE</div>
            </div>

            {/* big stat */}
            <div style={{padding:'20px 0 28px',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.4)',textTransform:'uppercase',marginBottom:8}}>ROAS · Últimas 24h</div>
              <div style={{display:'flex',alignItems:'baseline',gap:16}}>
                <div style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:88,lineHeight:1,letterSpacing:'-.04em',color:accent,fontVariantNumeric:'tabular-nums'}}>
                  {roas.toFixed(2)}<span style={{fontSize:36,color:'rgba(255,255,255,.4)'}}>×</span>
                </div>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:12,color:'#4ade80'}}>▲ +12.4%</div>
              </div>

              {/* chart */}
              <div style={{display:'flex',alignItems:'flex-end',gap:3,height:60,marginTop:18}}>
                {bars.map((b,i)=>(
                  <div key={i} style={{
                    flex:1,height:`${b.h}%`,
                    background:b.active?accent:'rgba(255,255,255,.15)',
                    transition:'height .4s',
                    animation:b.active?`kern-bar-pulse 1.6s ease-in-out infinite ${i*0.04}s`:'none',
                  }}/>
                ))}
              </div>
            </div>

            {/* metrics grid */}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:1,background:'rgba(255,255,255,.08)',marginTop:20}}>
              {[
                { k:'Inversión hoy', v:`$${spend.toLocaleString('es-CL')}`, d:'+8.2%' },
                { k:'Conversiones', v:convs.toString(), d:'+23' },
                { k:'CTR promedio', v:`${ctr.toFixed(2)}%`, d:'+0.4%' },
                { k:'CPA', v:`$${Math.round(spend/Math.max(convs,1)).toLocaleString('es-CL')}`, d:'−12%' },
              ].map((m,i)=>(
                <div key={i} style={{background:'#111',padding:'18px 14px'}}>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:9,letterSpacing:'.15em',color:'rgba(255,255,255,.4)',textTransform:'uppercase',marginBottom:6}}>{m.k}</div>
                  <div style={{fontFamily:'Archivo,sans-serif',fontSize:22,fontWeight:800,fontVariantNumeric:'tabular-nums'}}>{m.v}</div>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'#4ade80',marginTop:2}}>{m.d}</div>
                </div>
              ))}
            </div>

            {/* live row */}
            <div style={{marginTop:20,padding:'14px 0 4px',borderTop:'1px solid rgba(255,255,255,.08)'}}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:9,letterSpacing:'.2em',color:'rgba(255,255,255,.4)',textTransform:'uppercase',marginBottom:10}}>CAMPAÑAS TOP</div>
              {[
                { n:'Calvac · PMax', r:'6.82×', s:'#4ade80' },
                { n:'Enuss · Shopping', r:'5.14×', s:'#4ade80' },
                { n:'Bioma · Reels IG', r:'4.02×', s:accent },
              ].map((c,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 0',borderBottom:i<2?'1px dashed rgba(255,255,255,.06)':'none',fontFamily:'JetBrains Mono,monospace',fontSize:11}}>
                  <span style={{color:'rgba(255,255,255,.75)'}}>{c.n}</span>
                  <span style={{color:c.s,fontWeight:700}}>{c.r}</span>
                </div>
              ))}
            </div>
          </div>

          {/* floating badges */}
          <div style={{position:'absolute',top:-20,right:-20,background:'#0a0a0a',border:`2px solid ${accent}`,padding:'10px 16px',fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.15em',transform:`rotate(${3 + mouse.rx*2}deg)`}}>
            +$240MM CLP GESTIONADOS
          </div>
          <div style={{position:'absolute',bottom:-14,left:-14,background:accent,color:'#0a0a0a',padding:'8px 14px',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:11,letterSpacing:'.1em',transform:`rotate(${-4 + mouse.ry*2}deg)`}}>
            ROAS 4.8× PROM.
          </div>
        </div>
      </div>

      {/* scroll hint */}
      <div style={{position:'absolute',bottom:24,left:40,fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.35)',textTransform:'uppercase',display:'flex',alignItems:'center',gap:10}}>
        <span>Scroll</span>
        <span style={{width:40,height:1,background:'rgba(255,255,255,.2)',position:'relative',overflow:'hidden'}}>
          <span style={{position:'absolute',inset:0,background:accent,animation:'kern-scroll-hint 2s ease-in-out infinite'}}/>
        </span>
      </div>
    </section>
  );
}

function MonolithTicker({ accent }) {
  return (
    <div style={{borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)',padding:'18px 0',overflow:'hidden'}}>
      <Marquee speed={38}>
        {Array.from({length:6}).map((_,i)=>(
          <span key={i} style={{display:'inline-flex',alignItems:'center',gap:32,padding:'0 32px',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:28,letterSpacing:'-.02em',textTransform:'uppercase'}}>
            <span>Google Ads</span>
            <span style={{color:accent}}>★</span>
            <span>Meta Ads</span>
            <span style={{color:accent}}>★</span>
            <span>Creativos</span>
            <span style={{color:accent}}>★</span>
            <span>Tracking</span>
            <span style={{color:accent}}>★</span>
            <span>ROAS 4.8×</span>
            <span style={{color:accent}}>★</span>
          </span>
        ))}
      </Marquee>
    </div>
  );
}

function MonolithServices({ accent }) {
  const [active, setActive] = useState(0);
  const [ref, visible] = useReveal();
  return (
    <section id="servicios" ref={ref} style={{padding:'140px 40px',position:'relative'}}>
      <SectionLabel n="02" label="Servicios" accent={accent}/>
      <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',maxWidth:1100,marginBottom:80}}>
        Cuatro pilares<br/>que mueven <br className="mobile-br"/><span style={{color:accent,fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>la aguja.</span>
      </h2>

      <div className="monolith-services-grid" style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:60}}>
        <div className="monolith-services-list">
          {CONTENT.services.map((s, i) => (
            <button key={s.id} onClick={()=>setActive(i)} onMouseEnter={()=>setActive(i)} data-cursor="ver" className="monolith-service-btn" style={{
              display:'block',width:'100%',textAlign:'left',
              padding:'32px 0',borderBottom:'1px solid rgba(255,255,255,.08)',
              position:'relative',transition:'all .4s',
              paddingLeft: active===i ? 28 : 0,
            }}>
              <div style={{position:'absolute',left:0,top:'50%',transform:'translateY(-50%)',width: active===i ? 16 : 0,height:1,background:accent,transition:'width .4s'}}/>
              <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',gap:20}}>
                <div style={{display:'flex',alignItems:'baseline',gap:20}}>
                  <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.4)'}}>0{i+1}</span>
                  <span style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:36,letterSpacing:'-.02em',color: active===i?accent:'#fff',transition:'color .3s'}}>{s.name}</span>
                </div>
                <span className="monolith-service-dot" style={{color:active===i?accent:'rgba(255,255,255,.3)',fontSize:24,transition:'all .3s'}}>{active===i?'●':'○'}</span>
              </div>
              {/* Mobile-only: expanded inline content */}
              <div className="monolith-service-mobile-body" style={{display:'none'}}>
                <p style={{fontSize:15,lineHeight:1.55,color:'rgba(255,255,255,.7)',marginTop:14,marginBottom:16}}>{s.desc}</p>
                <div style={{display:'grid',gridTemplateColumns:'1fr',gap:8}}>
                  {s.points.map(p => (
                    <div key={p} style={{border:'1px solid rgba(255,255,255,.1)',padding:'10px 12px',fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.05em',display:'flex',alignItems:'center',gap:8}}>
                      <span style={{color:accent}}>→</span> {p}
                    </div>
                  ))}
                </div>
              </div>
            </button>
          ))}
        </div>

        <div className="monolith-services-detail" style={{position:'sticky',top:120,alignSelf:'start',border:'1px solid rgba(255,255,255,.08)',padding:40,minHeight:400,background:'#0d0d0d',position:'relative',overflow:'hidden'}}>
          <div style={{position:'absolute',top:0,right:0,fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:180,color:'rgba(255,255,255,.03)',lineHeight:.8,letterSpacing:'-.05em'}}>
            0{active+1}
          </div>
          <div style={{position:'relative'}}>
            <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:accent,marginBottom:20}}>Servicio seleccionado</div>
            <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:64,letterSpacing:'-.03em',marginBottom:20,textTransform:'uppercase'}}>{CONTENT.services[active].name}</h3>
            <p style={{fontSize:18,lineHeight:1.5,color:'rgba(255,255,255,.7)',maxWidth:520,marginBottom:36}}>{CONTENT.services[active].desc}</p>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              {CONTENT.services[active].points.map(p => (
                <div key={p} style={{border:'1px solid rgba(255,255,255,.1)',padding:'14px 16px',fontFamily:'JetBrains Mono,monospace',fontSize:12,letterSpacing:'.05em',display:'flex',alignItems:'center',gap:10}}>
                  <span style={{color:accent}}>→</span> {p}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MonolithStats({ accent }) {
  const [ref, visible] = useReveal();
  return (
    <section ref={ref} style={{padding:'120px 40px',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
      <div className="monolith-stats-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0}}>
        {CONTENT.stats.map((s, i) => {
          const val = useCounter(s.v, { start: visible, decimals: s.decimals || 0 });
          return (
            <div key={i} className="monolith-stat-item" style={{padding:'0 32px',borderRight:i<3?'1px solid rgba(255,255,255,.08)':'none'}}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.4)',marginBottom:18}}>0{i+1} / {s.k}</div>
              <div className="monolith-stat-val" style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(44px, 7vw, 96px)',lineHeight:1,letterSpacing:'-.04em',fontVariantNumeric:'tabular-nums',wordBreak:'break-word'}}>
                {s.prefix||''}{val}<span style={{color:accent}}>{s.suffix||''}</span>
              </div>
              {s.note && <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.4)',marginTop:8}}>{s.note}</div>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

function SectionLabel({ n, label, accent }) {
  return (
    <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase'}}>
      <span style={{color:accent}}>[{n}]</span>
      <span style={{width:40,height:1,background:'rgba(255,255,255,.2)'}}/>
      <span style={{color:'rgba(255,255,255,.6)'}}>{label}</span>
    </div>
  );
}

function MonolithPricing({ accent }) {
  const [ref] = useReveal();
  return (
    <section id="precios" ref={ref} style={{padding:'140px 40px'}}>
      <SectionLabel n="05" label="Inversión" accent={accent}/>
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:40,marginBottom:80,flexWrap:'wrap'}}>
        <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',maxWidth:1100}}>
          Sin planes<br/><span style={{color:accent,fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>prefabricados.</span>
        </h2>
        <p style={{maxWidth:420,fontSize:16,lineHeight:1.55,color:'rgba(255,255,255,.65)'}}>Cada negocio es distinto. Cotizamos según tu industria, plataformas, volumen de campañas y necesidad creativa. Sin paquetes rígidos, sin sorpresas.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:40,alignItems:'stretch'}}>
        <div style={{padding:'48px 44px',background:accent,color:'#0a0a0a',position:'relative',overflow:'hidden'}}>
          <div aria-hidden="true" style={{position:'absolute',top:-40,right:-30,fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:280,lineHeight:.8,color:'rgba(0,0,0,.08)',letterSpacing:'-.05em'}}>$</div>
          <div style={{position:'relative'}}>
            <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',marginBottom:20}}>★ COTIZACIÓN PERSONALIZADA</div>
            <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,5vw,80px)',letterSpacing:'-.04em',lineHeight:.95,marginBottom:24,textTransform:'uppercase'}}>
              Hablemos<br/>y armamos<br/>tu propuesta.
            </h3>
            <p style={{fontSize:16,lineHeight:1.55,maxWidth:440,marginBottom:32,opacity:.85}}>
              Escríbenos por WhatsApp y en una conversación rápida entendemos tu negocio y te armamos una propuesta clara con alcance, inversión sugerida en pauta y fee mensual.
            </p>
            <ul style={{listStyle:'none',marginBottom:36}}>
              {CONTENT.plans[0].features.map(f=>(
                <li key={f} style={{display:'flex',gap:10,padding:'7px 0',fontSize:14,fontWeight:500}}>
                  <span>→</span><span>{f}</span>
                </li>
              ))}
            </ul>
            <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
              <a href={CONTENT.whatsappLink} style={{display:'inline-block',padding:'18px 28px',background:'#0a0a0a',color:accent,fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:13,letterSpacing:'.15em',textTransform:'uppercase'}}>Escríbenos por WhatsApp →</a>
              <a href={`tel:${CONTENT.whatsapp.replace(/\s/g,'')}`} style={{display:'inline-block',padding:'18px 28px',border:'2px solid #0a0a0a',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:13,letterSpacing:'.15em',textTransform:'uppercase'}}>Llamar</a>
            </div>
          </div>
        </div>

        <div style={{padding:'48px 40px',background:'#0d0d0d',border:'1px solid rgba(255,255,255,.1)'}}>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',color:accent,marginBottom:20,textTransform:'uppercase'}}>Qué define la inversión</div>
          <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:36,letterSpacing:'-.02em',marginBottom:32,textTransform:'uppercase'}}>4 variables clave</h3>
          {CONTENT.pricingFactors.map((p,i)=>(
            <div key={i} style={{padding:'18px 0',borderTop:'1px solid rgba(255,255,255,.08)'}}>
              <div style={{display:'flex',alignItems:'baseline',gap:14,marginBottom:6}}>
                <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:accent}}>0{i+1}</span>
                <span style={{fontFamily:'Archivo,sans-serif',fontWeight:700,fontSize:18,letterSpacing:'-.01em'}}>{p.k}</span>
              </div>
              <p style={{paddingLeft:32,fontSize:14,color:'rgba(255,255,255,.6)',lineHeight:1.55}}>{p.d}</p>
            </div>
          ))}
          <div style={{borderBottom:'1px solid rgba(255,255,255,.08)',marginBottom:24}}/>
          <p style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.5)',lineHeight:1.6}}>* La inversión en anuncios se paga directamente a Google/Meta. Nuestra fee es por gestión y operación. Valores netos sin IVA.</p>
        </div>
      </div>
    </section>
  );
}

function MonolithCases({ accent }) {
  const [ref] = useReveal();
  const scroll = useScroll();
  return (
    <section id="casos" ref={ref} style={{padding:'140px 40px',background:'#0d0d0d'}}>
      <SectionLabel n="06" label="Casos de éxito" accent={accent}/>
      <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',marginBottom:80}}>
        Resultados<br/><span style={{fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none',color:accent}}>que se facturan.</span>
      </h2>

      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
        {CONTENT.cases.map((c, i) => {
          const [cref, visible] = useReveal();
          return (
            <div key={c.name} ref={cref} data-cursor="caso" style={{
              border:'1px solid rgba(255,255,255,.1)',padding:'36px 32px',
              background:'#0a0a0a',position:'relative',overflow:'hidden',
              opacity:visible?1:0,transform:visible?'translateY(0)':'translateY(40px)',
              transition:`all .8s cubic-bezier(.2,.8,.2,1) ${(i%2)*0.15}s`,
            }} onMouseEnter={e=>{e.currentTarget.style.borderColor=accent;}} onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,.1)';}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:40,gap:16,flexWrap:'wrap'}}>
                <div className="monolith-case-head" style={{minWidth:0,flex:'1 1 auto'}}>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.4)',marginBottom:8}}>CASO 0{i+1}</div>
                  <h3 className="monolith-case-name" style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:42,letterSpacing:'-.03em',textTransform:'uppercase',wordBreak:'break-word'}}>{c.name}</h3>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:12,color:'rgba(255,255,255,.5)',marginTop:4}}>{c.tag}</div>
                </div>
                <div className="monolith-case-metric" style={{textAlign:'right',minWidth:0,flex:'0 1 auto'}}>
                  <div className="monolith-case-metric-val" style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:54,letterSpacing:'-.04em',color:accent,lineHeight:1,wordBreak:'break-word'}}>{c.metric}</div>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.5)',marginTop:2}}>{c.unit}</div>
                </div>
              </div>
              <p style={{fontSize:15,lineHeight:1.55,color:'rgba(255,255,255,.7)',marginBottom:24}}>{c.copy}</p>
              <div style={{display:'flex',alignItems:'center',gap:12,fontFamily:'JetBrains Mono,monospace',fontSize:11,textTransform:'uppercase',letterSpacing:'.15em'}}>
                <span style={{padding:'6px 10px',background:accent,color:'#0a0a0a',fontWeight:700}}>{c.delta}</span>
                <span style={{color:'rgba(255,255,255,.4)'}}>Resultado</span>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function MonolithProcess({ accent }) {
  return (
    <section style={{padding:'140px 40px'}}>
      <SectionLabel n="07" label="Proceso" accent={accent}/>
      <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(48px,7vw,120px)',lineHeight:.9,letterSpacing:'-.04em',textTransform:'uppercase',marginBottom:80}}>
        Cómo trabajamos.
      </h2>

      <div>
        {CONTENT.process.map((p, i) => {
          const [r, visible] = useReveal();
          return (
            <div key={p.n} ref={r} style={{
              display:'grid',gridTemplateColumns:'140px 1fr 1fr',gap:60,
              padding:'40px 0',borderTop:'1px solid rgba(255,255,255,.08)',
              opacity:visible?1:.2,transform:visible?'translateX(0)':'translateX(-30px)',
              transition:'all .8s cubic-bezier(.2,.8,.2,1)',
              alignItems:'center',
            }}>
              <div style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:88,color:accent,letterSpacing:'-.04em',lineHeight:1}}>{p.n}</div>
              <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:36,letterSpacing:'-.02em',textTransform:'uppercase'}}>{p.title}</h3>
              <p style={{fontSize:17,lineHeight:1.55,color:'rgba(255,255,255,.6)'}}>{p.desc}</p>
            </div>
          );
        })}
        <div style={{borderBottom:'1px solid rgba(255,255,255,.08)'}}/>
      </div>
    </section>
  );
}

function MonolithLogos({ accent }) {
  const half = Math.ceil(CONTENT.logos.length / 2);
  const row1 = CONTENT.logos.slice(0, half);
  const row2 = CONTENT.logos.slice(half);
  return (
    <section style={{padding:'100px 0',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
      <div style={{padding:'0 40px',marginBottom:40}}>
        <SectionLabel n="08" label="Clientes" accent={accent}/>
      </div>
      <Marquee speed={55}>
        {row1.map((l,i)=>(
          <span key={i} className="monolith-logo-item" style={{display:'inline-flex',alignItems:'center',padding:'0 48px',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:52,letterSpacing:'-.03em',color:'rgba(255,255,255,.42)',textTransform:'uppercase',whiteSpace:'nowrap'}}>{l}</span>
        ))}
      </Marquee>
      <Marquee speed={65} reverse style={{marginTop:20}}>
        {row2.map((l,i)=>(
          <span key={i} className="monolith-logo-item" style={{display:'inline-flex',alignItems:'center',padding:'0 48px',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:52,letterSpacing:'-.03em',color:'rgba(255,255,255,.28)',textTransform:'uppercase',whiteSpace:'nowrap'}}>{l}</span>
        ))}
      </Marquee>
    </section>
  );
}

function MonolithTestimonials({ accent }) {
  const [i, setI] = useState(0);
  useEffect(()=>{const id=setInterval(()=>setI(x=>(x+1)%CONTENT.testimonials.length),6000);return()=>clearInterval(id);},[]);
  const t = CONTENT.testimonials[i];
  return (
    <section style={{padding:'140px 40px'}}>
      <SectionLabel n="09" label="Testimonios" accent={accent}/>
      <div style={{maxWidth:1200}}>
        <blockquote key={i} style={{
          fontFamily:'Instrument Serif,serif',fontStyle:'italic',fontWeight:400,
          fontSize:'clamp(36px,5.5vw,88px)',lineHeight:1.05,letterSpacing:'-.02em',
          animation:'kern-fade-up .8s ease-out',
        }}>
          <span style={{color:accent,fontSize:'1.3em',verticalAlign:'-.15em'}}>"</span>
          {t.q}
          <span style={{color:accent,fontSize:'1.3em',verticalAlign:'-.15em'}}>"</span>
        </blockquote>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:60,borderTop:'1px solid rgba(255,255,255,.1)',paddingTop:24}}>
          <div>
            <div style={{fontFamily:'Archivo,sans-serif',fontWeight:800,fontSize:20,textTransform:'uppercase'}}>{t.who}</div>
            <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:12,color:'rgba(255,255,255,.5)',marginTop:4}}>{t.role}</div>
          </div>
          <div style={{display:'flex',gap:8}}>
            {CONTENT.testimonials.map((_,k)=>(
              <button key={k} onClick={()=>setI(k)} style={{width:36,height:2,background:k===i?accent:'rgba(255,255,255,.2)',transition:'all .3s'}}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MonolithCTA({ accent }) {
  const [form, setForm] = useState({ name:'', company:'', phone:'', msg:'' });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const mouse = useMouse();
  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const res = await fetch('https://formsubmit.co/ajax/contacto@kernagency.cl', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          company: form.company,
          phone: form.phone,
          message: form.msg || '(sin mensaje)',
          _subject: `Cotización Kern — ${form.company || form.name}`,
          _captcha: 'false',
          _template: 'table',
        }),
      });
      const data = await res.json().catch(() => ({}));
      console.log('[Formsubmit response]', res.status, data);
      if (!res.ok || data.success === 'false' || data.success === false) {
        throw new Error(data.message || `HTTP ${res.status}`);
      }
      setSent(true);
    } catch (err) {
      console.error('[Formsubmit error]', err);
      setError('No pudimos enviar tu solicitud ahora. Por favor escríbenos por WhatsApp.');
    } finally {
      setSending(false);
    }
  };
  return (
    <section id="contacto" style={{padding:'140px 40px',background:accent,color:'#0a0a0a',position:'relative',overflow:'hidden'}}>
      <div aria-hidden="true" style={{position:'absolute',top:-40,right:-40,fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(200px,30vw,500px)',lineHeight:.8,color:'rgba(0,0,0,.08)',letterSpacing:'-.05em',pointerEvents:'none',transform:`translate(${mouse.rx*40}px,${mouse.ry*40}px)`}}>
        LISTO?
      </div>
      <div style={{position:'relative',display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:80,alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',marginBottom:24}}>[ HABLEMOS ]</div>
          <h2 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(60px,9vw,160px)',lineHeight:.86,letterSpacing:'-.04em',textTransform:'uppercase'}}>
            Tu próximo<br/>ROAS<br/>empieza<br/><span style={{fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,textTransform:'none'}}>hoy.</span>
          </h2>
        </div>
        <form onSubmit={handleSubmit} style={{background:'#0a0a0a',color:'#fff',padding:40}}>
          {sent ? (
            <div style={{minHeight:400,display:'grid',placeItems:'center',textAlign:'center'}}>
              <div>
                <div style={{fontSize:48,marginBottom:16}}>✓</div>
                <h3 style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:28,textTransform:'uppercase',marginBottom:12}}>Recibido</h3>
                <p style={{color:'rgba(255,255,255,.6)',marginBottom:24}}>Te escribimos por WhatsApp en menos de 24h.</p>
                <a href={CONTENT.whatsappLink} target="_blank" rel="noopener noreferrer" onClick={(e)=>{e.stopPropagation();}} style={{display:'inline-block',padding:'14px 28px',background:accent,color:'#0a0a0a',fontFamily:'Archivo,sans-serif',fontWeight:800,textTransform:'uppercase',fontSize:13,letterSpacing:'.1em',textDecoration:'none',cursor:'pointer',position:'relative',zIndex:2}}>Ir a WhatsApp ahora</a>
              </div>
            </div>
          ) : (
            <>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>Cotización personalizada</div>
              {[
                {k:'name',ph:'Tu nombre'},
                {k:'company',ph:'Empresa'},
                {k:'phone',ph:'WhatsApp o teléfono'},
              ].map(f=>(
                <input key={f.k} required placeholder={f.ph} value={form[f.k]} onChange={e=>setForm({...form,[f.k]:e.target.value})} style={{
                  width:'100%',background:'transparent',border:'none',borderBottom:'1px solid rgba(255,255,255,.15)',padding:'18px 0',fontSize:16,color:'#fff',fontFamily:'inherit',marginBottom:8,
                }}/>
              ))}
              <textarea placeholder="Cuéntanos brevemente sobre tu negocio (opcional)" value={form.msg} onChange={e=>setForm({...form,msg:e.target.value})} rows={3} style={{
                width:'100%',background:'transparent',border:'none',borderBottom:'1px solid rgba(255,255,255,.15)',padding:'18px 0',fontSize:16,color:'#fff',fontFamily:'inherit',marginBottom:28,resize:'vertical',
              }}/>
              <button type="submit" disabled={sending} style={{width:'100%',padding:'20px',background:accent,color:'#0a0a0a',fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:14,letterSpacing:'.15em',textTransform:'uppercase',opacity:sending?.6:1,cursor:sending?'wait':'pointer'}}>{sending ? 'Enviando…' : 'Enviar solicitud →'}</button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function MonolithFooter({ accent }) {
  return (
    <footer style={{background:'#0a0a0a',borderTop:'1px solid rgba(255,255,255,.08)',padding:'80px 40px 40px'}}>
      <div style={{fontFamily:'Archivo,sans-serif',fontWeight:900,fontSize:'clamp(100px,18vw,320px)',lineHeight:.8,letterSpacing:'-.06em',textTransform:'uppercase',marginBottom:60,position:'relative'}}>
        KERN<span style={{color:accent}}>.</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',gap:40,padding:'40px 0',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.4)',marginBottom:12}}>Agencia</div>
          <p style={{fontSize:15,lineHeight:1.5,color:'rgba(255,255,255,.7)',maxWidth:380}}>Publicidad digital para ecommerce, servicios y B2B en Chile. Resultados medibles, optimización constante.</p>
        </div>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.4)',marginBottom:12}}>Contacto</div>
          <div style={{fontSize:15,lineHeight:1.8}}>
            <div style={{color:accent}}>{CONTENT.whatsapp}</div>
          </div>
        </div>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.4)',marginBottom:12}}>Servicios</div>
          <div style={{fontSize:15,lineHeight:1.8,color:'rgba(255,255,255,.7)'}}>
            <div>Google Ads</div><div>Meta Ads</div><div>Creativos</div><div>Tracking</div>
          </div>
        </div>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.4)',marginBottom:12}}>Social</div>
          <div style={{fontSize:15,lineHeight:1.8,color:'rgba(255,255,255,.7)'}}>
            <div>Instagram</div><div>LinkedIn</div><div>YouTube</div>
          </div>
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',paddingTop:24,fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.4)'}}>
        <div>© 2026 KERN AGENCY · SANTIAGO, CHILE</div>
        <div>[ PUBLICIDAD QUE CONVIERTE ]</div>
      </div>
    </footer>
  );
}

function MonolithVariant({ accent, animIntensity }) {
  return (
    <div style={{background:'#0a0a0a',color:'#fff'}}>
      <MonolithHero accent={accent}/>
      <MonolithTicker accent={accent}/>
      <MonolithDifference accent={accent}/>
      <MonolithServices accent={accent}/>
      <MonolithSystem accent={accent}/>
      <MonolithStats accent={accent}/>
      <MonolithRequirements accent={accent}/>
      <MonolithPricing accent={accent}/>
      <MonolithCases accent={accent}/>
      <MonolithProcess accent={accent}/>
      <MonolithLogos accent={accent}/>
      <MonolithTestimonials accent={accent}/>
      <MonolithFAQ accent={accent}/>
      <MonolithCTA accent={accent}/>
      <MonolithFooter accent={accent}/>
    </div>
  );
}

Object.assign(window, { MonolithVariant });
