// Sections 2: Service Tabs, Transparency, Cases, Resonance, Final CTA, Footer

const { useState: useState3, useEffect: useEffect3, useRef: useRef3 } = React;

// ====== 6. SERVICES TABS ======
const TAB_CONTENT = [
  {
    id:'inf', name:'Influencia',
    para:'Activar voces que la audiencia ya escucha, sin que parezca que pagaste por su opinión.',
    deliver:['Mapeo de creadores por categoría y momento', 'Brief estratégico por talento', 'Coordinación legal y operativa', 'Reporte de resonancia post-campaña'],
    when:'Cuando necesitas presencia cultural, no solo posts pagos.',
    cta:'Activar voces +',
  },
  {
    id:'ugc', name:'Influencia',
    para:'Producción de contenido que se ve, suena y se comporta como una recomendación de un usuario real.',
    deliver:['Casting de creadores nano y micro', 'Dirección remota y guion modular', 'Pack de assets verticales y horizontales', 'Aprobación legal del usage'],
    when:'Cuando tus ads de marca dejaron de funcionar.',
    cta:'Pedir pack UGC +',
  },
  {
    id:'ai', name:'UGC AI',
    para:'Iteración masiva con IA: variantes de hook, voiceover, subtítulos y formato. Sin generar slop.',
    deliver:['Sistema de prompts editorialmente curado', 'Test de variantes A/B/C/D', 'Lectura de creative fatigue', 'Reentreno mensual de criterio'],
    when:'Cuando tu pauta necesita 40 variantes y tienes presupuesto para 4.',
    cta:'Probar el sistema +',
  },
  {
    id:'vid', name:'Videotelling',
    para:'Historias de marca diseñadas para vivir en formato vertical, con hook, beat y payoff en menos de 9s.',
    deliver:['Storytelling por plataforma (TikTok / Reels / YT Shorts)', 'Producción ágil con creadores', 'Edición y motion en marca', 'Cortes para retargeting'],
    when:'Cuando el branded content suena a comunicado de prensa.',
    cta:'Diseñar la historia +',
  },
  {
    id:'hub', name:'Creator Hub',
    para:'Convertir un buen creador en un activo de marca de largo plazo, con propósito y escala.',
    deliver:['Auditoría de talento y posicionamiento', 'Plan de portafolio y verticales', 'Acuerdos de exclusividad / output', 'Roadmap de monetización propia'],
    when:'Cuando un creador puede ser una unidad de negocio, no un proveedor.',
    cta:'Construir el hub +',
  },
  {
    id:'perf', name:'Performance Creativa',
    para:'No publicamos para cumplir. Publicamos para aprender qué creativo mover, cortar o escalar.',
    deliver:['Estructura de testing creativo', 'Lectura semanal de hooks y holds', 'Decisión de presupuesto por aprendizaje', 'Banco de insights vivo'],
    when:'Cuando los reportes te dicen qué pasó pero no qué hacer.',
    cta:'Encender el sistema +',
  },
];

const ServiceTabs = () => {
  const [active, setActive] = useState3('inf');
  const data = TAB_CONTENT.find(t => t.id === active);

  return (
    <section className="sec-pad" style={{background:'#0A0A0B'}}>
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span className="plus-square">+</span>
            SERVICIOS · OPERATING SYSTEM
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="h-medium" style={{maxWidth:'24ch'}}>
            Un sistema operativo para la <span className="red">relevancia.</span>
          </h2>
        </Reveal>

        {/* Tab bar */}
        <div style={{
          marginTop: 56, display:'flex', flexWrap:'wrap', gap:6,
          borderBottom:'1px solid rgba(255,255,255,0.08)',
          paddingBottom: 0,
        }}>
          {TAB_CONTENT.map(t => (
            <button key={t.id} onClick={() => setActive(t.id)} style={{
              background:'transparent', border:0,
              fontFamily:'var(--font-display-tight)', fontWeight: active === t.id ? 800 : 600,
              fontSize: 14,
              color: active === t.id ? '#fff' : 'rgba(255,255,255,0.5)',
              padding:'14px 18px',
              borderBottom: active === t.id ? '2px solid #E60000' : '2px solid transparent',
              marginBottom:-1, cursor:'pointer',
              transition:'color 200ms ease',
            }}>{t.name}</button>
          ))}
        </div>

        {/* Tab content */}
        <div style={{
          marginTop: 48,
          display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 56,
        }} className="tabs-grid">
          <div>
            <div className="mono" style={{
              fontSize:11, color:'#FF5A1F', letterSpacing:'0.18em', marginBottom:16,
            }}>PARA QUÉ SIRVE</div>
            <p style={{
              fontFamily:'var(--font-display-tight)', fontWeight: 500,
              fontSize: 'clamp(22px, 2.2vw, 30px)', lineHeight: 1.25,
              letterSpacing:'-0.015em', margin: 0, color:'#fff',
            }}>{data.para}</p>

            <div style={{marginTop: 48}}>
              <div className="mono" style={{fontSize:11, color:'#FF5A1F', letterSpacing:'0.18em', marginBottom:16}}>CUÁNDO USARLO</div>
              <p style={{fontSize:16, color:'rgba(255,255,255,0.78)', lineHeight: 1.55, margin: 0, fontStyle:'italic'}}>
                {data.when}
              </p>
            </div>

            <button className="cta-primary" style={{marginTop: 48}}>
              {data.cta.replace(' +','')}
              <span className="plus">+</span>
            </button>
          </div>

          <div style={{
            background:'#131316', border:'1px solid rgba(255,255,255,0.08)',
            borderRadius: 14, padding: 32,
          }}>
            <div className="mono" style={{
              fontSize:11, color:'#FF2D7A', letterSpacing:'0.18em', marginBottom: 24,
            }}>QUÉ ENTREGAMOS</div>
            <ul style={{listStyle:'none', padding:0, margin:0}}>
              {data.deliver.map((d, i) => (
                <li key={i} style={{
                  display:'flex', alignItems:'flex-start', gap:14,
                  padding:'18px 0',
                  borderTop: i ? '1px solid rgba(255,255,255,0.06)' : 'none',
                  fontSize: 15, lineHeight: 1.45, color:'rgba(255,255,255,0.85)',
                }}>
                  <span style={{
                    width:18, height:18, borderRadius:4, background:'#E60000',
                    color:'#fff', display:'grid', placeItems:'center',
                    fontFamily:'var(--font-display)', fontSize: 13, fontWeight: 900, lineHeight: 1,
                    flexShrink: 0, marginTop: 1,
                  }}>+</span>
                  {d}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

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

// ====== 7. TRANSPARENCY ======
const TransparencySection = () => {
  const [base, setBase] = useState3(1500);
  const fee = +(base * 0.1766).toFixed(2);
  const total = +(base + fee).toFixed(2);

  const fmt = (n) => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  return (
    <section className="sec-pad" style={{background:'#050505'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'center'}} className="trans-grid">
          <div>
            <Reveal>
              <div className="eyebrow" style={{marginBottom: 32}}>
                <span className="plus-square">+</span>
                TRANSPARENCIA
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2 className="h-section" style={{maxWidth:'18ch'}}>
                La plata también
                <br/>debería ser <span className="red">clara.</span>
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p className="lead" style={{marginTop: 28, fontSize: 18}}>
                Nuestra comisión es clara: <strong style={{color:'#fff'}}>15% del total de la inversión.</strong> Sabes
                cuánto va al talento, cuánto corresponde a gestión y cuánto cuesta operar la campaña.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <div style={{
                marginTop: 36, display:'flex', gap:24, flexWrap:'wrap',
                fontFamily:'var(--font-mono)', fontSize:12, color:'rgba(255,255,255,0.55)',
              }}>
                <div>15% transparente</div>
                <div>·</div>
                <div>0% rebate oculto</div>
                <div>·</div>
                <div>0% markup encubierto</div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={2} className="glass" style={{padding: 32}}>
            <div style={{
              display:'flex', justifyContent:'space-between', alignItems:'center',
              paddingBottom: 24, borderBottom:'1px solid rgba(255,255,255,0.08)',
            }}>
              <div className="mono" style={{fontSize:11, letterSpacing:'0.18em', color:'rgba(255,255,255,0.6)'}}>
                CALCULADORA · SIM_v01
              </div>
              <span style={{
                display:'inline-flex', alignItems:'center', gap:6, padding:'4px 8px', borderRadius:4,
                background:'rgba(20,184,100,0.15)', color:'#14B864',
                fontFamily:'var(--font-display-tight)', fontSize:10, fontWeight:800, letterSpacing:'0.12em',
              }}>
                <span className="live-dot" style={{background:'#14B864'}}/>LIVE
              </span>
            </div>

            <div style={{padding:'28px 0 0'}}>
              <label style={{fontFamily:'var(--font-mono)', fontSize:11, color:'rgba(255,255,255,0.55)', letterSpacing:'0.12em'}}>
                TALENT BASE
              </label>
              <div style={{display:'flex', alignItems:'baseline', gap:12, marginTop: 10}}>
                <span className="mono" style={{fontSize: 14, color:'rgba(255,255,255,0.55)'}}>$</span>
                <input
                  type="number" min="0" step="100" value={base}
                  onChange={(e) => setBase(Math.max(0, +e.target.value || 0))}
                  className="mono"
                  style={{
                    flex:1, background:'transparent', border:0, outline:'none',
                    color:'#fff', fontSize: 'clamp(32px, 4vw, 48px)', fontWeight: 700,
                    letterSpacing:'-0.02em',
                  }}
                />
              </div>
              <input type="range" min="500" max="50000" step="100" value={base}
                onChange={(e) => setBase(+e.target.value)}
                style={{width:'100%', marginTop: 16, accentColor:'#E60000'}}/>
            </div>

            <div style={{marginTop: 28}}>
              {[
                { l:'Talent base',         v: fmt(base),  color:'#fff' },
                { l:'Agency fee (17.66%)', v: fmt(fee),   color:'rgba(255,255,255,0.85)' },
              ].map((r, i) => (
                <div key={i} style={{
                  display:'flex', justifyContent:'space-between', alignItems:'baseline',
                  padding:'14px 0',
                  borderTop:'1px solid rgba(255,255,255,0.06)',
                  fontFamily:'var(--font-mono)', fontSize: 14,
                }}>
                  <span style={{color:'rgba(255,255,255,0.6)'}}>{r.l}</span>
                  <span style={{color: r.color, fontWeight:600}}>{r.v}</span>
                </div>
              ))}
              {/* total */}
              <div style={{
                marginTop: 12, padding: 18,
                background:'linear-gradient(120deg, rgba(230,0,0,0.18), rgba(255,90,31,0.18))',
                border:'1px solid rgba(230,0,0,0.45)',
                borderRadius: 10,
                display:'flex', justifyContent:'space-between', alignItems:'baseline',
              }}>
                <span style={{
                  fontFamily:'var(--font-display-tight)', fontWeight: 800,
                  fontSize: 13, letterSpacing:'0.12em', textTransform:'uppercase', color:'#fff',
                }}>Total invertido</span>
                <span className="mono" style={{
                  fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 700,
                  color:'#fff', letterSpacing:'-0.02em',
                }}>{fmt(total)}</span>
              </div>
              <div style={{
                marginTop: 12, fontFamily:'var(--font-mono)', fontSize:11,
                color:'rgba(255,255,255,0.45)', letterSpacing:'0.04em',
                display:'flex', justifyContent:'space-between',
              }}>
                <span>Contentders fee</span>
                <span style={{color:'#E60000'}}>15% sobre talent base</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>

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

// ====== 8. CASES ======
const CASES = [
  { brand:'Bon Bon Bum', country:'🇨🇴', services:['Estrategia de Influencia','UGC'], desc:'Activaciones de lanzamiento con creadores locales y alcance nacional.', metric:'+38% recall', tone:'#E60000' },
  { brand:'Necesito Lentes', country:'🇲🇽', services:['UGC','Videotelling'], desc:'Contenido para ecommerce en México con scouting y dirección creativa remota.', metric:'4.1× ROAS', tone:'#FF2D7A' },
  { brand:'Kinoé Chardon', country:'🇨🇱', services:['Influencia','Activación','Belleza'], desc:'Scouting y activación de creadores para eventos en varias ciudades.', metric:'+22% engagement', tone:'#FF5A1F' },
];

const CaseCard = ({ c, i }) => (
  <Reveal delay={(i % 3) + 1} style={{
    position:'relative',
    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',
  }} className="case-card">
    {/* visual */}
    <div style={{
      aspectRatio:'4/5', position:'relative', overflow:'hidden',
      background:`
        linear-gradient(165deg, ${c.tone}aa 0%, #0a0a0b 75%),
        radial-gradient(circle at 40% 30%, ${c.tone}99, transparent 55%)
      `,
    }}>
      <div style={{
        position:'absolute', inset:0,
        background:'repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 7px)'
      }}/>
      <div style={{position:'absolute', top:16, left:16, display:'flex', gap:8}}>
        <span style={{
          background:'rgba(0,0,0,0.5)', backdropFilter:'blur(8px)', color:'#fff',
          padding:'6px 10px', borderRadius:999, fontSize:13, lineHeight:1,
        }}>{c.country}</span>
      </div>
      <div style={{position:'absolute', top:16, right:16}}>
        <span style={{
          width:28, height:28, borderRadius:7, background:'#E60000',
          display:'grid', placeItems:'center',
          fontFamily:'var(--font-display)', fontSize:18, fontWeight:900, color:'#fff', lineHeight:1,
        }}>+</span>
      </div>
      <div style={{
        position:'absolute', bottom:16, left:16,
        background:'rgba(0,0,0,0.6)', backdropFilter:'blur(10px)',
        border:`1px solid ${c.tone}66`,
        padding:'8px 12px', borderRadius:8,
        fontFamily:'var(--font-mono)', fontSize:13, color:'#fff', fontWeight:600,
      }}>
        <span style={{color: c.tone, marginRight:6}}>↗</span>{c.metric}
      </div>
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, height:'40%',
        background:'linear-gradient(180deg, transparent, rgba(0,0,0,0.85))'
      }}/>
    </div>

    {/* meta */}
    <div style={{padding: 28}}>
      <div style={{display:'flex', gap:8, flexWrap:'wrap', marginBottom: 18}}>
        {c.services.map((s, j) => (
          <span key={j} style={{
            fontFamily:'var(--font-display-tight)', fontWeight:700,
            fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase',
            color:'rgba(255,255,255,0.7)',
            padding:'6px 10px', borderRadius:999,
            border:'1px solid rgba(255,255,255,0.12)',
          }}>{s}</span>
        ))}
      </div>
      <h3 style={{
        fontFamily:'var(--font-display)', fontSize: 28, lineHeight:1.05,
        letterSpacing:'-0.025em', margin: 0,
      }}>{c.brand}</h3>
      <p style={{marginTop: 14, color:'rgba(255,255,255,0.62)', fontSize:14, lineHeight: 1.5, margin:'14px 0 0'}}>
        {c.desc}
      </p>
    </div>
  </Reveal>
);

const CasesSection = () => (
  <section id="casos" className="sec-pad" style={{background:'#050505'}}>
    <div className="container">
      <Reveal>
        <div className="eyebrow" style={{marginBottom: 32}}>
          <span className="plus-square">+</span>
          CASOS
        </div>
      </Reveal>
      <Reveal delay={1}>
        <h2 className="h-section" style={{maxWidth:'18ch'}}>
          No vendemos humo.
          <br/><span className="grad-heat">Ya lo estamos haciendo.</span>
        </h2>
      </Reveal>

      <div style={{
        marginTop: 80,
        display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap: 20,
      }}>
        {CASES.map((c, i) => <CaseCard key={c.brand} c={c} i={i}/>)}
      </div>
    </div>
    <style>{`
      .case-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255,255,255,0.18) !important;
        background: #131316 !important;
      }
    `}</style>
  </section>
);

// ====== 9. RESONANCE ======
const ResonanceSection = () => {
  const ref = useRef3(null);
  const [p, setP] = useState3(0);
  useEffect3(() => {
    const onS = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const prog = Math.max(0, Math.min(1, (vh - r.top) / (vh + r.height)));
      setP(prog);
    };
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  return (
    <section id="resonancia" ref={ref} style={{
      background:'#050505', position:'relative', padding:'160px 0', overflow:'hidden',
    }}>
      {/* slow pulse */}
      <div aria-hidden style={{
        position:'absolute', top:'50%', left:'50%',
        transform:`translate(-50%,-50%) scale(${0.6 + p * 0.6})`,
        width: 1200, height: 1200, borderRadius:999,
        background:'radial-gradient(circle, rgba(255,45,122,0.18) 0%, transparent 60%)',
        opacity: 0.6 + p * 0.4,
        transition:'all 200ms linear',
        pointerEvents:'none',
      }}/>
      <div aria-hidden style={{
        position:'absolute', top:'50%', left:'50%',
        transform:`translate(-50%,-50%) scale(${0.4 + p * 0.4})`,
        width: 800, height: 800, borderRadius:999,
        background:'radial-gradient(circle, rgba(230,0,0,0.22) 0%, transparent 65%)',
        opacity: 0.6 + p * 0.4,
        transition:'all 200ms linear',
        pointerEvents:'none',
      }}/>

      <div className="container" style={{position:'relative', zIndex: 2, textAlign:'center'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom: 40, justifyContent:'center'}}>
            <span className="plus-square">+</span>
            RESONANCIA
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="h-section" style={{
            maxWidth: '20ch', margin:'0 auto',
          }}>
            Lo que <span className="serif" style={{color:'rgba(255,255,255,0.45)'}}>no resuena,</span>
            <br/><span className="grad-heat">no existe.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead" style={{
            marginTop: 48, margin:'48px auto 0', fontSize: 19, textAlign:'center',
          }}>
            Una marca puede tener producto, presupuesto y presencia. Pero si no logra
            tocar una conversación real, se vuelve parte del ruido.
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lead" style={{
            marginTop: 24, margin:'24px auto 0', fontSize: 19, textAlign:'center',
          }}>
            En Contentders trabajamos para que las marcas no solo comuniquen.
            Trabajamos para que <span style={{color:'#fff'}}>resuenen</span>:
            que tengan forma, tono, momento, canal y significado.
          </p>
        </Reveal>

        <Reveal delay={4} style={{marginTop: 120}}>
          <div style={{
            fontFamily:'"Instrument Serif", Georgia, serif',
            fontStyle:'italic',
            fontSize: 'clamp(40px, 6vw, 96px)',
            lineHeight: 1.05, letterSpacing:'-0.02em',
            color:'rgba(255,255,255,0.92)',
          }}>
            La relevancia no se publica.
          </div>
          <div style={{
            fontFamily:'var(--font-display)',
            fontSize: 'clamp(48px, 7vw, 112px)',
            lineHeight: 1.0, letterSpacing:'-0.035em',
            marginTop: 8,
          }}>
            Se <span className="grad-heat">diseña.</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ====== 10. FINAL CTA ======
const FinalCTA = () => (
  <section className="sec-pad" style={{
    background:'#fff', color:'#0A0A0B', textAlign:'left',
  }}>
    <div className="container" style={{
      display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 56, alignItems:'center',
    }} className="cta-grid">
      <div>
        <Reveal>
          <div className="eyebrow ink" style={{marginBottom: 32}}>
            <span className="plus-square">+</span>
            READY WHEN YOU ARE
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="h-section" style={{color:'#0A0A0B', maxWidth:'18ch'}}>
            Deja de hacer campañas
            <br/>que parecen <span className="red">campañas.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead ink" style={{marginTop: 32, fontSize: 19, maxWidth:'52ch'}}>
            Diseñemos contenido, influencia y resonancia para que tu marca entre al feed
            como algo que sí vale la pena ver.
          </p>
        </Reveal>
        <Reveal delay={3}>
          <div style={{display:'flex', gap:14, marginTop:40, flexWrap:'wrap'}}>
            <button className="cta-primary">
              Planificar campaña
              <span className="plus">+</span>
            </button>
            <button style={{
              background:'transparent', color:'#0A0A0B',
              border:'1.5px solid rgba(10,10,11,0.2)',
              fontFamily:'var(--font-display-tight)', fontWeight:600, fontSize:14,
              padding:'13px 22px', borderRadius:999,
              display:'inline-flex', alignItems:'center', gap:10,
            }}>
              hola@contentders.com →
            </button>
          </div>
        </Reveal>
      </div>

      <Reveal delay={2} style={{
        position:'relative',
        aspectRatio: '4/5',
        borderRadius: 14, overflow:'hidden',
        background:`
          linear-gradient(160deg, #FF2D7A 0%, #E60000 50%, #FF5A1F 100%)
        `,
        boxShadow:'0 30px 80px rgba(230,0,0,0.35)',
      }} className="cta-visual">
        <div style={{
          position:'absolute', inset:0,
          background:'repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(255,255,255,0.04) 6px, rgba(255,255,255,0.04) 7px)'
        }}/>
        <div style={{
          position:'absolute', top: 32, left: 32,
          fontFamily:'var(--font-mono)', fontSize: 11, color:'rgba(255,255,255,0.85)',
          letterSpacing:'0.12em',
        }}>NEXT_CAMPAIGN.brief</div>
        <div style={{
          position:'absolute', bottom: 32, left: 32, right: 32,
          fontFamily:'"Instrument Serif", Georgia, serif', fontStyle:'italic',
          fontSize: 'clamp(28px, 3vw, 44px)', lineHeight:1.05, letterSpacing:'-0.015em',
          color:'#fff',
        }}>
          "¿por qué alguien debería prestarte atención?"
        </div>
      </Reveal>
    </div>

    <style>{`
      @media (max-width: 880px) {
        .cta-grid { grid-template-columns: 1fr !important; }
        .cta-visual { aspect-ratio: 16/10 !important; }
      }
    `}</style>
  </section>
);

// ====== Footer ======
const Footer = () => (
  <footer style={{background:'#050505', borderTop:'1px solid rgba(255,255,255,0.08)'}}>
    <div className="container" style={{padding:'56px 32px 36px'}}>
      <div style={{
        display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:32,
      }} className="ftr-grid">
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom: 24}}>
            <span style={{
              width:28, height:28, borderRadius:7, background:'#E60000',
              display:'grid', placeItems:'center',
              fontFamily:'var(--font-display)', fontSize:18, fontWeight:900, color:'#fff', lineHeight:1,
            }}>+</span>
            <span style={{fontFamily:'var(--font-display)', fontSize:18, letterSpacing:'-0.02em'}}>contentders</span>
          </div>
          <p style={{
            color:'rgba(255,255,255,0.55)', fontSize:14, lineHeight:1.5,
            maxWidth: '32ch', margin:0,
          }}>
            Diseñamos relevancia para marcas LATAM. Quito · CDMX · Bogotá · São Paulo · Santiago.
          </p>
        </div>
        {[
          { h:'Agencia', items:['Método','Servicios','Casos','Resonancia'] },
          { h:'Servicios', items:['Influencia','UGC','UGC AI','Videotelling','Creator Hub','Performance'] },
          { h:'Contacto', items:['hola@contentders.com','WhatsApp +593 99 000 0000','Instagram','TikTok','LinkedIn'] },
        ].map((col, i) => (
          <div key={i}>
            <div className="mono" style={{
              fontSize:11, color:'rgba(255,255,255,0.45)', letterSpacing:'0.18em', marginBottom:18,
            }}>{col.h.toUpperCase()}</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
              {col.items.map(it => (
                <li key={it} style={{
                  fontFamily:'var(--font-display-tight)', fontWeight: 500, fontSize:14,
                  color:'rgba(255,255,255,0.78)', cursor:'pointer',
                }}>{it}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 64, paddingTop: 24,
        borderTop:'1px solid rgba(255,255,255,0.08)',
        display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap',
        fontFamily:'var(--font-mono)', fontSize: 11, color:'rgba(255,255,255,0.45)',
        letterSpacing:'0.04em',
      }}>
        <div>© 2026 CONTENTDERS · BEING RELEVANT™</div>
        <div>Si parece publicidad, ya perdiste.</div>
      </div>
    </div>

    <style>{`
      @media (max-width: 880px) {
        .ftr-grid { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 560px) {
        .ftr-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </footer>
);

Object.assign(window, {
  ServiceTabs, TransparencySection, CasesSection, ResonanceSection, FinalCTA, Footer,
});