/* NEBULA — Cosmic gradients, glassmorphism, orbs */

function NebulaHero({ accent }) {
  const mouse = useMouse();
  const scroll = useScroll();
  const [elRef, progress] = useElementScroll();
  const [roas, setRoas] = useState(4.82);
  const [spend, setSpend] = useState(2847);
  const [convs, setConvs] = useState(318);
  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() * 40));
      setConvs(c => c + (Math.random() > 0.6 ? 1 : 0));
    }, 900);
    return () => clearInterval(id);
  }, []);

  const bars = useMemo(() => Array.from({length:32},(_,i)=>20 + Math.sin(i*.35)*15 + Math.random()*35 + i*1.4), []);

  return (
    <section ref={elRef} style={{position:'relative',minHeight:'100vh',padding:'140px 40px 60px',overflow:'hidden'}}>
      {/* cosmic orbs */}
      <div style={{position:'absolute',top:'10%',left:'-10%',width:600,height:600,borderRadius:'50%',background:'radial-gradient(circle, rgba(124,58,237,.4), transparent 70%)',filter:'blur(60px)',transform:`translate(${mouse.rx*80}px,${mouse.ry*80}px)`,transition:'transform .8s ease-out',pointerEvents:'none'}}/>
      <div style={{position:'absolute',top:'30%',right:'-10%',width:500,height:500,borderRadius:'50%',background:'radial-gradient(circle, rgba(6,182,212,.35), transparent 70%)',filter:'blur(60px)',transform:`translate(${mouse.rx*-60}px,${mouse.ry*-60}px)`,transition:'transform .8s ease-out',pointerEvents:'none'}}/>
      <div style={{position:'absolute',bottom:'-20%',left:'30%',width:600,height:600,borderRadius:'50%',background:'radial-gradient(circle, rgba(236,72,153,.25), transparent 70%)',filter:'blur(80px)',transform:`translate(${mouse.rx*40}px,${mouse.ry*-40}px)`,transition:'transform 1s ease-out',pointerEvents:'none'}}/>

      {/* noise grain */}
      <div style={{position:'absolute',inset:0,background:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>\")",opacity:.06,pointerEvents:'none',mixBlendMode:'overlay'}}/>

      <div style={{position:'relative',zIndex:2,maxWidth:1400,margin:'0 auto'}}>
        <div style={{display:'flex',alignItems:'center',gap:12,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.6)',marginBottom:48}}>
          <span style={{width:8,height:8,background:'#4ade80',borderRadius:'50%',boxShadow:'0 0 16px #4ade80',animation:'kern-pulse 1.6s ease-in-out infinite'}}/>
          <span>Kern Agency · Santiago · En vivo</span>
        </div>

        <h1 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(56px,8vw,148px)',lineHeight:.92,letterSpacing:'-.04em',maxWidth:1400}}>
          <div>Publicidad que</div>
          <div style={{
            display:'inline-block',
            background:'linear-gradient(120deg, #7c3aed 0%, #06b6d4 40%, #ec4899 80%)',
            WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
            backgroundSize:'200% 200%',
            animation:'kern-gradient 8s ease-in-out infinite',
            fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,
          }}>convierte.</div>
          <div style={{color:'rgba(255,255,255,.45)'}}>Sin promesas.</div>
          <div style={{color:'rgba(255,255,255,.45)'}}>Con resultados.</div>
        </h1>

        <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:60,marginTop:80,alignItems:'center'}}>
          <div>
            <p style={{fontSize:18,lineHeight:1.55,color:'rgba(255,255,255,.7)',maxWidth:520,marginBottom:36}}>{CONTENT.heroSub}</p>
            <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
              <a href={CONTENT.whatsappLink} data-cursor="cotizar" style={{
                display:'inline-flex',alignItems:'center',gap:12,padding:'20px 32px',
                background:'linear-gradient(120deg,#7c3aed,#06b6d4)',color:'#fff',
                fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:15,letterSpacing:'.02em',
                borderRadius:999,boxShadow:'0 20px 60px -10px rgba(124,58,237,.6)',
                transition:'transform .3s',
              }} onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'} onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}>
                Cotizar por WhatsApp <span>→</span>
              </a>
              <button data-cursor="ver" onClick={()=>document.getElementById('casos-n')?.scrollIntoView({behavior:'smooth'})} style={{
                padding:'20px 28px',background:'rgba(255,255,255,.05)',backdropFilter:'blur(20px)',border:'1px solid rgba(255,255,255,.12)',
                fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:15,borderRadius:999,transition:'all .3s',
              }} onMouseEnter={e=>{e.currentTarget.style.background='rgba(255,255,255,.12)';}} onMouseLeave={e=>{e.currentTarget.style.background='rgba(255,255,255,.05)';}}>
                Explorar casos
              </button>
            </div>
          </div>

          {/* glass dashboard */}
          <div style={{
            position:'relative',borderRadius:24,padding:24,
            background:'rgba(255,255,255,.04)',backdropFilter:'blur(24px)',border:'1px solid rgba(255,255,255,.1)',
            boxShadow:'0 40px 120px -20px rgba(124,58,237,.4), inset 0 0 0 1px rgba(255,255,255,.05)',
            transform:`perspective(1400px) rotateY(${mouse.rx*-4}deg) rotateX(${mouse.ry*3}deg)`,
            transition:'transform .3s',
          }}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.15em',color:'rgba(255,255,255,.5)',textTransform:'uppercase'}}>Kern · Live ROAS</div>
              <div style={{display:'flex',gap:4}}>
                <div style={{width:6,height:6,borderRadius:'50%',background:'#4ade80'}}/>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'#4ade80'}}>ONLINE</div>
              </div>
            </div>
            <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:20}}>
              <div style={{
                fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:80,letterSpacing:'-.04em',lineHeight:1,
                background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
                fontVariantNumeric:'tabular-nums',
              }}>{roas.toFixed(2)}×</div>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:12,color:'#4ade80'}}>▲ 12.4%</div>
            </div>

            {/* area chart svg */}
            <svg viewBox="0 0 320 80" style={{width:'100%',height:80,marginBottom:18}}>
              <defs>
                <linearGradient id="areaG" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#7c3aed" stopOpacity=".6"/>
                  <stop offset="1" stopColor="#7c3aed" stopOpacity="0"/>
                </linearGradient>
                <linearGradient id="lineG" x1="0" x2="1">
                  <stop offset="0" stopColor="#7c3aed"/>
                  <stop offset=".5" stopColor="#06b6d4"/>
                  <stop offset="1" stopColor="#ec4899"/>
                </linearGradient>
              </defs>
              {(() => {
                const pts = bars.map((h,i)=>`${(i/(bars.length-1))*320},${80 - (h/100)*70}`).join(' ');
                const area = `0,80 ${pts} 320,80`;
                return <>
                  <polygon points={area} fill="url(#areaG)"/>
                  <polyline points={pts} fill="none" stroke="url(#lineG)" strokeWidth="2.5" strokeLinejoin="round"/>
                </>;
              })()}
            </svg>

            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12}}>
              {[
                {k:'Inversión', v:`$${(spend/1000).toFixed(1)}K`},
                {k:'Conversiones', v:convs},
                {k:'CPA', v:`$${Math.round(spend/Math.max(convs,1)).toLocaleString('es-CL')}`},
              ].map((m,i)=>(
                <div key={i} style={{padding:14,borderRadius:12,background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)'}}>
                  <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:9,letterSpacing:'.15em',color:'rgba(255,255,255,.5)',textTransform:'uppercase',marginBottom:4}}>{m.k}</div>
                  <div style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:18}}>{m.v}</div>
                </div>
              ))}
            </div>

            {/* floating pill */}
            <div style={{position:'absolute',top:-18,right:-18,padding:'10px 16px',borderRadius:999,background:'linear-gradient(120deg,#7c3aed,#ec4899)',fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.15em',boxShadow:'0 10px 30px -5px rgba(236,72,153,.5)'}}>
              +$18B GENERADOS
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function NebulaSectionHead({ n, label, title, subtitle }) {
  return (
    <div style={{marginBottom:60}}>
      <div style={{display:'flex',alignItems:'center',gap:14,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>
        <span style={{padding:'4px 10px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.1)'}}>{n}</span>
        <span>{label}</span>
      </div>
      <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(44px,6vw,96px)',lineHeight:.95,letterSpacing:'-.03em',maxWidth:1200}}>{title}</h2>
      {subtitle && <p style={{fontSize:17,lineHeight:1.55,color:'rgba(255,255,255,.6)',maxWidth:600,marginTop:20}}>{subtitle}</p>}
    </div>
  );
}

function NebulaServices() {
  const mouse = useMouse();
  return (
    <section style={{padding:'140px 40px',position:'relative',maxWidth:1400,margin:'0 auto'}}>
      <NebulaSectionHead n="01" label="Servicios" title={<><span>Cuatro piezas.</span><br/><span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>Una máquina que vende.</span></>}/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:20}}>
        {CONTENT.services.map((s, i) => {
          const [r, visible] = useReveal();
          const gradients = [
            'linear-gradient(135deg, rgba(124,58,237,.2), rgba(6,182,212,.1))',
            'linear-gradient(135deg, rgba(236,72,153,.2), rgba(124,58,237,.1))',
            'linear-gradient(135deg, rgba(6,182,212,.2), rgba(236,72,153,.1))',
            'linear-gradient(135deg, rgba(253,224,71,.15), rgba(124,58,237,.1))',
          ];
          return (
            <div key={s.id} ref={r} data-cursor="ver" style={{
              padding:36,borderRadius:24,
              background: gradients[i%4],
              backdropFilter:'blur(20px)',
              border:'1px solid rgba(255,255,255,.1)',
              position:'relative',overflow:'hidden',
              opacity:visible?1:0,transform:visible?'translateY(0)':'translateY(40px)',
              transition:`all .8s cubic-bezier(.2,.8,.2,1) ${i*.1}s`,
              minHeight:320,
            }}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.5)',marginBottom:16}}>0{i+1}</div>
              <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:48,letterSpacing:'-.02em',marginBottom:16}}>{s.name}</h3>
              <p style={{fontSize:15,lineHeight:1.6,color:'rgba(255,255,255,.7)',marginBottom:28,maxWidth:440}}>{s.desc}</p>
              <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
                {s.points.map(p=>(
                  <span key={p} style={{padding:'8px 14px',borderRadius:999,background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.08)',fontFamily:'JetBrains Mono,monospace',fontSize:11}}>{p}</span>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function NebulaStats() {
  const [ref, visible] = useReveal();
  return (
    <section ref={ref} style={{padding:'120px 40px'}}>
      <div style={{maxWidth:1400,margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20}}>
        {CONTENT.stats.map((s, i) => {
          const val = useCounter(s.v, { start: visible, decimals: s.decimals || 0 });
          return (
            <div key={i} style={{padding:32,borderRadius:24,background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',backdropFilter:'blur(20px)'}}>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:16}}>{s.k}</div>
              <div style={{
                fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:64,lineHeight:1,letterSpacing:'-.03em',
                background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
                fontVariantNumeric:'tabular-nums',
              }}>{s.prefix||''}{val}{s.suffix||''}</div>
              {s.note && <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'rgba(255,255,255,.4)',marginTop:8}}>{s.note}</div>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

function NebulaPricing() {
  return (
    <section id="precios-n" style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <NebulaSectionHead n="02" label="Inversión" title={<><span>Sin planes</span><br/><span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>prefabricados.</span></>} subtitle="Cada negocio es distinto. Cotizamos según industria, plataformas, volumen de campañas y necesidad creativa."/>

      <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:24,alignItems:'stretch'}}>
        <div style={{
          padding:48,borderRadius:28,
          background:'linear-gradient(140deg, rgba(124,58,237,.25), rgba(236,72,153,.15))',
          border:'1px solid rgba(124,58,237,.4)',backdropFilter:'blur(20px)',
          boxShadow:'0 30px 80px -20px rgba(124,58,237,.4)',position:'relative',overflow:'hidden',
        }}>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',color:'#c4b5fd',marginBottom:20,textTransform:'uppercase'}}>★ Cotización personalizada</div>
          <h3 style={{
            fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(40px,4.5vw,72px)',letterSpacing:'-.04em',lineHeight:.95,marginBottom:24,
          }}>Hablemos y armamos<br/><span style={{background:'linear-gradient(120deg,#fff,#c4b5fd)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>tu propuesta.</span></h3>
          <p style={{fontSize:15,lineHeight:1.6,color:'rgba(255,255,255,.8)',maxWidth:480,marginBottom:28}}>
            Después de una llamada de 30 minutos entendemos tu negocio y armamos una propuesta clara con alcance, inversión sugerida en pauta y fee mensual.
          </p>
          <ul style={{listStyle:'none',marginBottom:32}}>
            {CONTENT.plans[0].features.map(f=>(
              <li key={f} style={{display:'flex',gap:10,padding:'7px 0',fontSize:14,color:'rgba(255,255,255,.85)'}}>
                <span style={{color:'#06b6d4'}}>✓</span><span>{f}</span>
              </li>
            ))}
          </ul>
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
            <a href={CONTENT.callLink} style={{padding:'16px 26px',borderRadius:999,background:'linear-gradient(120deg,#7c3aed,#ec4899)',fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:14,boxShadow:'0 20px 60px -10px rgba(124,58,237,.5)'}}>Agendar llamada →</a>
            <a href={CONTENT.whatsappLink} style={{padding:'16px 26px',borderRadius:999,background:'rgba(255,255,255,.08)',border:'1px solid rgba(255,255,255,.12)',fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:14}}>WhatsApp</a>
          </div>
        </div>

        <div style={{padding:40,borderRadius:28,background:'rgba(255,255,255,.03)',border:'1px solid rgba(255,255,255,.08)',backdropFilter:'blur(20px)'}}>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',color:'rgba(255,255,255,.5)',marginBottom:18,textTransform:'uppercase'}}>Qué define la inversión</div>
          <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:30,letterSpacing:'-.02em',marginBottom:24}}>4 variables clave</h3>
          {CONTENT.pricingFactors.map((p,i)=>(
            <div key={i} style={{padding:'14px 0',borderTop:'1px solid rgba(255,255,255,.06)'}}>
              <div style={{display:'flex',gap:14,alignItems:'baseline',marginBottom:4}}>
                <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'#c4b5fd'}}>0{i+1}</span>
                <span style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:16,letterSpacing:'-.005em'}}>{p.k}</span>
              </div>
              <p style={{paddingLeft:32,fontSize:13,color:'rgba(255,255,255,.6)',lineHeight:1.55}}>{p.d}</p>
            </div>
          ))}
          <p style={{marginTop:20,fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'rgba(255,255,255,.45)',lineHeight:1.6}}>* La inversión en anuncios se paga directo a Google/Meta. Nuestra fee es por gestión. Valores netos sin IVA.</p>
        </div>
      </div>
    </section>
  );
}

function NebulaCases() {
  const [active, setActive] = useState(0);
  return (
    <section id="casos-n" style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <NebulaSectionHead n="03" label="Casos de éxito" title={<><span>Números</span> <span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400}}>que facturan.</span></>}/>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.3fr',gap:40,alignItems:'start'}}>
        <div>
          {CONTENT.cases.map((c, i) => (
            <button key={c.name} onMouseEnter={()=>setActive(i)} data-cursor="ver" style={{
              display:'block',width:'100%',textAlign:'left',
              padding:'28px 24px',borderRadius:16,marginBottom:8,
              background: active===i ? 'linear-gradient(120deg, rgba(124,58,237,.2), rgba(6,182,212,.1))' : 'transparent',
              border:'1px solid ' + (active===i?'rgba(124,58,237,.3)':'rgba(255,255,255,.06)'),
              transition:'all .4s',
            }}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
                <div style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:28,letterSpacing:'-.02em'}}>{c.name}</div>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,color:'rgba(255,255,255,.5)'}}>0{i+1}/06</div>
              </div>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.55)'}}>{c.tag}</div>
            </button>
          ))}
        </div>
        <div style={{position:'sticky',top:120,padding:48,borderRadius:28,background:'linear-gradient(140deg, rgba(124,58,237,.15), rgba(6,182,212,.08))',backdropFilter:'blur(20px)',border:'1px solid rgba(255,255,255,.1)',minHeight:520}}>
          <div key={active} style={{animation:'kern-fade-up .6s ease-out'}}>
            <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',color:'#c4b5fd',marginBottom:16}}>CASO {String(active+1).padStart(2,'0')} · {CONTENT.cases[active].tag}</div>
            <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:72,letterSpacing:'-.04em',marginBottom:24,lineHeight:1}}>{CONTENT.cases[active].name}</h3>
            <div style={{display:'flex',gap:40,marginBottom:32,paddingBottom:32,borderBottom:'1px solid rgba(255,255,255,.1)'}}>
              <div>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.5)',marginBottom:6,textTransform:'uppercase'}}>Resultado</div>
                <div style={{
                  fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:56,letterSpacing:'-.03em',
                  background:'linear-gradient(120deg,#7c3aed,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
                }}>{CONTENT.cases[active].metric}</div>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,.5)'}}>{CONTENT.cases[active].unit}</div>
              </div>
              <div>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',color:'rgba(255,255,255,.5)',marginBottom:6,textTransform:'uppercase'}}>Crecimiento</div>
                <div style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:44,letterSpacing:'-.02em',color:'#06b6d4'}}>{CONTENT.cases[active].delta}</div>
              </div>
            </div>
            <p style={{fontSize:17,lineHeight:1.6,color:'rgba(255,255,255,.8)'}}>{CONTENT.cases[active].copy}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function NebulaProcess() {
  return (
    <section style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <NebulaSectionHead n="04" label="Proceso" title="Cinco pasos. Una máquina de ventas."/>
      <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:14}}>
        {CONTENT.process.map((p, i) => {
          const [r, visible] = useReveal();
          return (
            <div key={p.n} ref={r} style={{
              padding:28,borderRadius:20,
              background:'rgba(255,255,255,.03)',backdropFilter:'blur(20px)',border:'1px solid rgba(255,255,255,.08)',
              opacity:visible?1:0,transform:visible?'translateY(0)':'translateY(30px)',
              transition:`all .7s cubic-bezier(.2,.8,.2,1) ${i*.1}s`,
              minHeight:260,
            }}>
              <div style={{
                width:44,height:44,borderRadius:12,
                background:'linear-gradient(135deg,#7c3aed,#06b6d4)',
                display:'grid',placeItems:'center',
                fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:18,marginBottom:20,
              }}>{p.n}</div>
              <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:20,letterSpacing:'-.01em',marginBottom:12}}>{p.title}</h3>
              <p style={{fontSize:13,lineHeight:1.55,color:'rgba(255,255,255,.65)'}}>{p.desc}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function NebulaLogos() {
  return (
    <section style={{padding:'80px 0',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
      <div style={{textAlign:'center',marginBottom:40,fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'rgba(255,255,255,.5)'}}>Confiaron en nosotros</div>
      <Marquee speed={55}>
        {CONTENT.logos.map((l,i)=>(
          <span key={i} style={{display:'inline-flex',padding:'0 40px',fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:44,letterSpacing:'-.02em',color:'rgba(255,255,255,.4)'}}>{l}</span>
        ))}
      </Marquee>
    </section>
  );
}

function NebulaTestimonials() {
  const [i, setI] = useState(0);
  useEffect(()=>{const id=setInterval(()=>setI(x=>(x+1)%CONTENT.testimonials.length),6500);return()=>clearInterval(id);},[]);
  const t = CONTENT.testimonials[i];
  return (
    <section style={{padding:'140px 40px',maxWidth:1400,margin:'0 auto'}}>
      <NebulaSectionHead n="05" label="Testimonios" title="Lo que dicen."/>
      <div key={i} style={{
        padding:'60px 48px',borderRadius:32,
        background:'linear-gradient(140deg, rgba(124,58,237,.15), rgba(236,72,153,.08))',
        backdropFilter:'blur(20px)',border:'1px solid rgba(255,255,255,.1)',
        animation:'kern-fade-up .7s ease-out',
      }}>
        <div style={{fontFamily:'Instrument Serif,serif',fontStyle:'italic',fontSize:'clamp(28px,4vw,56px)',lineHeight:1.15,letterSpacing:'-.02em'}}>
          <span style={{
            background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontSize:'1.4em',verticalAlign:'-.15em',
          }}>"</span>{t.q}<span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',fontSize:'1.4em',verticalAlign:'-.15em'}}>"</span>
        </div>
        <div style={{marginTop:40,paddingTop:28,borderTop:'1px solid rgba(255,255,255,.1)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div>
            <div style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:20}}>{t.who}</div>
            <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:12,color:'rgba(255,255,255,.5)',marginTop:2}}>{t.role}</div>
          </div>
          <div style={{display:'flex',gap:6}}>
            {CONTENT.testimonials.map((_,k)=>(
              <button key={k} onClick={()=>setI(k)} style={{width:32,height:4,borderRadius:2,background:k===i?'linear-gradient(120deg,#7c3aed,#ec4899)':'rgba(255,255,255,.15)',border:'none'}}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function NebulaCTA() {
  const [form, setForm] = useState({ name:'', company:'', phone:'', budget:'500K-1M' });
  const [sent, setSent] = useState(false);
  const mouse = useMouse();
  return (
    <section id="contacto-n" style={{padding:'140px 40px',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:'20%',left:'10%',width:500,height:500,borderRadius:'50%',background:'radial-gradient(circle, rgba(124,58,237,.35), transparent 70%)',filter:'blur(60px)',transform:`translate(${mouse.rx*60}px,${mouse.ry*60}px)`,transition:'transform .8s',pointerEvents:'none'}}/>
      <div style={{position:'absolute',bottom:'10%',right:'10%',width:400,height:400,borderRadius:'50%',background:'radial-gradient(circle, rgba(236,72,153,.3), transparent 70%)',filter:'blur(60px)',transform:`translate(${mouse.rx*-50}px,${mouse.ry*-50}px)`,transition:'transform .8s',pointerEvents:'none'}}/>

      <div style={{position:'relative',maxWidth:1400,margin:'0 auto',display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:80,alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.25em',textTransform:'uppercase',color:'#c4b5fd',marginBottom:24}}>[ Hablemos ]</div>
          <h2 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(56px,8vw,144px)',lineHeight:.92,letterSpacing:'-.04em'}}>
            Tu próximo<br/>
            <span style={{background:'linear-gradient(120deg,#7c3aed,#06b6d4,#ec4899)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>ROAS</span>
            <br/>empieza <span style={{fontStyle:'italic',fontFamily:'Instrument Serif,serif',fontWeight:400,color:'rgba(255,255,255,.5)'}}>hoy.</span>
          </h2>
          <div style={{display:'flex',gap:24,marginTop:40,fontFamily:'JetBrains Mono,monospace',fontSize:13}}>
            <div><div style={{color:'rgba(255,255,255,.5)',fontSize:10,letterSpacing:'.2em',marginBottom:4}}>TELÉFONO</div>{CONTENT.phone}</div>
            <div><div style={{color:'rgba(255,255,255,.5)',fontSize:10,letterSpacing:'.2em',marginBottom:4}}>WHATSAPP</div><span style={{color:'#c4b5fd'}}>{CONTENT.whatsapp}</span></div>
          </div>
        </div>
        <form onSubmit={e=>{e.preventDefault();setSent(true);}} style={{padding:40,borderRadius:28,background:'rgba(255,255,255,.04)',backdropFilter:'blur(24px)',border:'1px solid rgba(255,255,255,.1)'}}>
          {sent ? (
            <div style={{minHeight:400,display:'grid',placeItems:'center',textAlign:'center'}}>
              <div>
                <div style={{fontSize:48,marginBottom:16,background:'linear-gradient(120deg,#7c3aed,#06b6d4)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>✓</div>
                <h3 style={{fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:28,marginBottom:12}}>Recibido</h3>
                <p style={{color:'rgba(255,255,255,.6)',marginBottom:24}}>Te escribimos por WhatsApp en menos de 24h.</p>
              </div>
            </div>
          ) : (
            <>
              <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:24}}>Cotizar en 60 segundos</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:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',padding:'16px 18px',fontSize:15,color:'#fff',fontFamily:'inherit',marginBottom:10,borderRadius:12,outline:'none',
                }}/>
              ))}
              <div style={{marginTop:20,marginBottom:28}}>
                <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.2em',textTransform:'uppercase',color:'rgba(255,255,255,.5)',marginBottom:10}}>Inversión mensual estimada en pauta</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:6}}>
                  {['<500K','500K-1M','1M-3M','3M+'].map(b=>(
                    <button type="button" key={b} onClick={()=>setForm({...form,budget:b})} style={{
                      padding:'12px 6px',fontFamily:'JetBrains Mono,monospace',fontSize:10,letterSpacing:'.1em',borderRadius:10,
                      background:form.budget===b?'linear-gradient(120deg,#7c3aed,#ec4899)':'rgba(255,255,255,.04)',
                      color:'#fff',
                      border:`1px solid ${form.budget===b?'transparent':'rgba(255,255,255,.08)'}`,
                    }}>{b}</button>
                  ))}
                </div>
              </div>
              <button type="submit" style={{width:'100%',padding:'18px',background:'linear-gradient(120deg,#7c3aed,#ec4899)',fontFamily:'Space Grotesk,sans-serif',fontWeight:600,fontSize:15,borderRadius:999,color:'#fff',boxShadow:'0 20px 60px -10px rgba(124,58,237,.5)'}}>Enviar solicitud →</button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function NebulaFooter() {
  return (
    <footer style={{padding:'80px 40px 40px',borderTop:'1px solid rgba(255,255,255,.08)'}}>
      <div style={{maxWidth:1400,margin:'0 auto'}}>
        <div style={{
          fontFamily:'Space Grotesk,sans-serif',fontWeight:500,fontSize:'clamp(120px,20vw,360px)',lineHeight:.85,letterSpacing:'-.06em',marginBottom:60,
          background:'linear-gradient(120deg,#fff 20%, #7c3aed 50%, #06b6d4 80%)',WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent',
        }}>kern.</div>
        <div style={{display:'flex',justifyContent:'space-between',paddingTop:24,borderTop:'1px solid rgba(255,255,255,.08)',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>
      </div>
    </footer>
  );
}

function NebulaVariant({ animIntensity }) {
  return (
    <div style={{background:'#050010',color:'#fff',position:'relative',overflow:'hidden'}}>
      {/* global starfield / ambient bg */}
      <div style={{position:'fixed',inset:0,background:'radial-gradient(ellipse at top, rgba(124,58,237,.12), transparent 50%), radial-gradient(ellipse at bottom, rgba(6,182,212,.08), transparent 50%), #050010',pointerEvents:'none',zIndex:0}}/>
      <div style={{position:'relative',zIndex:1}}>
        <NebulaHero/>
        <NebulaDifference/>
        <NebulaServices/>
        <NebulaSystem/>
        <NebulaStats/>
        <NebulaRequirements/>
        <NebulaPricing/>
        <NebulaCases/>
        <NebulaProcess/>
        <NebulaLogos/>
        <NebulaTestimonials/>
        <NebulaFAQ/>
        <NebulaCTA/>
        <NebulaFooter/>
      </div>
    </div>
  );
}

Object.assign(window, { NebulaVariant });
