/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const CS2 = {
  orange: '#F1A92F',
  amber:  '#D88812',
  soft:   '#E8C940',
  bg:     'var(--sub-interactive-bg)',
  deep:   '#5A3C0C',
};

// ============================================================
// BRAND VOICE — Cómo mantenemos tu voz de marca
// ============================================================
function CsBrandVoice() {
  const attributes = [
    { label: 'Tono', value: 'Directo, sin jerga corporativa, con humor seco' },
    { label: 'Persona', value: 'Experta amable que respeta la inteligencia de quien lee' },
    { label: 'Lo que sí decimos', value: '"Tu equipo merece…", "Sin BS", "Probado, no prometido"' },
    { label: 'Lo que nunca decimos', value: '"Sinergias", "Revolucionario", "Líderes del mercado"' },
    { label: 'Audiencias', value: 'CMO · Director Comercial · CEO PYME' },
    { label: 'Idiomas', value: 'Español MX/LATAM · Inglés US' },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56,
          alignItems: 'start',
        }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <Eyebrow>Cómo mantenemos tu voz</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(30px, 3.6vw, 48px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 20px', color: 'var(--fg1)',
            }}>
              No vas a sonar como un robot.<br/>
              <span style={{ color: CS2.amber, fontStyle: 'italic' }}>Garantizado.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px' }}>
              Lo primero que hacemos en el onboarding es construir tu <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>Brand Voice Document</strong> — un perfil que captura cómo habla tu empresa, qué no diría jamás, qué tono usa con diferentes audiencias y cuáles son los mensajes que no pueden faltar.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
              Este documento alimenta cada instrucción que le damos a la IA. El resultado es contenido que suena como tú — solo que sale en horas, no en semanas.
            </p>
          </div>

          {/* Brand voice document mockup */}
          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 24,
            boxShadow: 'var(--shadow-md)',
            overflow: 'hidden',
          }}>
            {/* Doc header */}
            <div style={{
              padding: '18px 24px',
              background: `linear-gradient(135deg, ${CS2.amber} 0%, ${CS2.orange} 100%)`,
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '0.12em', textTransform: 'uppercase',
                  color: 'rgba(255,255,255,0.7)', marginBottom: 4,
                }}>FRSKO · Brand Voice Document</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 18, letterSpacing: '-0.01em',
                }}>brand-voice.frsko.md</div>
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                padding: '4px 10px', borderRadius: 999,
                background: 'rgba(255,255,255,0.18)',
              }}>v2.3 · actualizado</div>
            </div>

            {/* Doc body */}
            <div style={{ padding: '8px 0' }}>
              {attributes.map((a, i) => (
                <div key={a.label} style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr',
                  padding: '18px 28px',
                  borderBottom: i < attributes.length - 1 ? '1px solid var(--border)' : 'none',
                  gap: 24, alignItems: 'baseline',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11.5,
                    fontWeight: 600, letterSpacing: '0.06em',
                    textTransform: 'uppercase', color: CS2.amber,
                  }}>{a.label}</div>
                  <div style={{
                    fontSize: 14.5, lineHeight: 1.5,
                    color: 'var(--fg1)',
                  }}>{a.value}</div>
                </div>
              ))}
            </div>

            {/* Doc footer */}
            <div style={{
              padding: '14px 24px',
              background: CS2.bg,
              borderTop: `1px solid ${CS2.orange}`,
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 13, color: CS2.deep, fontWeight: 500,
            }}>
              <Icon name="check" size={16} stroke={2.2} style={{ color: CS2.amber }} />
              Este doc alimenta cada prompt que le damos a la IA.
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// PLANS
// ============================================================
function CsPlans() {
  const plans = [
    {
      name: 'Lite',
      audience: 'Marcas que están empezando',
      pieces: '20',
      features: [
        'Texto + diseño (sin video)',
        '1 canal principal',
        'Revisión mensual de resultados',
        'Brand Voice Document',
      ],
      cta: 'Empezar con Lite',
    },
    {
      name: 'Pro',
      audience: 'Marcas que quieren crecer',
      pieces: '40',
      features: [
        'Texto + diseño + video básico',
        'Hasta 3 canales',
        'Revisión quincenal',
        'Estrategia de contenido mensual',
        'Ajuste continuo del calendario',
      ],
      cta: 'Probar Pro',
      featured: true,
    },
    {
      name: 'Enterprise',
      audience: 'Operación de contenido compleja',
      pieces: '60',
      features: [
        'Producción completa: texto, diseño, video, audio',
        'Todos los canales',
        'Estratega dedicado',
        'Revisión semanal',
        'Integración con CRM y analytics',
        'SLA personalizado',
      ],
      cta: 'Hablar con ventas',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -100, top: 60 }} color={CS2.soft} opacity={0.25} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Los planes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Elige según tu volumen.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            Tres niveles. Subes o bajas mes con mes — sin contratos anuales.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'stretch' }}>
          {plans.map(p => <PlanCard key={p.name} p={p} />)}
        </div>

        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
          marginTop: 28, marginBottom: 0,
        }}>
          <span style={{ color: CS2.amber, fontWeight: 600 }}>// </span>
          Precios bajo solicitud. Sin contratos anuales — facturación mes a mes.
        </p>
      </Container>
    </section>
  );
}

function PlanCard({ p }) {
  const isF = p.featured;
  return (
    <div style={{
      background: isF ? `linear-gradient(180deg, ${CS2.deep} 0%, #2A1D08 100%)` : '#fff',
      color: isF ? '#fff' : 'var(--fg1)',
      border: isF ? `2px solid ${CS2.orange}` : '1px solid var(--border)',
      borderRadius: 28,
      padding: '32px 32px 28px',
      position: 'relative',
      display: 'flex', flexDirection: 'column',
      transform: isF ? 'translateY(-8px)' : '',
      boxShadow: isF ? '0 30px 60px -20px rgba(216,136,18,0.4)' : 'var(--shadow-xs)',
      transition: 'all var(--dur-base) var(--ease-out)',
    }}>
      {isF && (
        <div style={{
          position: 'absolute', top: -14, left: '50%',
          transform: 'translateX(-50%)',
          padding: '6px 14px',
          background: CS2.orange, color: CS2.deep,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
          textTransform: 'uppercase',
          borderRadius: 999,
          boxShadow: '0 8px 16px rgba(216,136,18,0.3)',
        }}>Recomendado</div>
      )}

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 18,
      }}>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 30, letterSpacing: '-0.03em',
          margin: 0, color: isF ? '#fff' : 'var(--fg1)',
        }}>{p.name}</h3>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: isF ? 'rgba(241,169,47,0.18)' : CS2.bg,
          color: isF ? CS2.orange : CS2.amber,
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name={p.name === 'Lite' ? 'sparkles' : p.name === 'Pro' ? 'zap' : 'rocket'} size={20} />
        </div>
      </div>

      <div style={{
        fontSize: 13.5, color: isF ? 'rgba(255,255,255,0.7)' : 'var(--fg3)',
        marginBottom: 24,
      }}>{p.audience}</div>

      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 8,
        paddingBottom: 22, marginBottom: 22,
        borderBottom: isF ? '1px solid rgba(255,255,255,0.14)' : '1px solid var(--border)',
      }}>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 60, letterSpacing: '-0.04em',
          color: isF ? CS2.orange : 'var(--fg1)', lineHeight: 0.9,
        }}>{p.pieces}</div>
        <div style={{
          fontSize: 13.5, color: isF ? 'rgba(255,255,255,0.6)' : 'var(--fg3)',
        }}>piezas / mes</div>
      </div>

      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 28px',
        display: 'flex', flexDirection: 'column', gap: 10, flex: 1,
      }}>
        {p.features.map(f => (
          <li key={f} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
            fontSize: 14.5, lineHeight: 1.4,
            color: isF ? 'rgba(255,255,255,0.92)' : 'var(--fg1)',
          }}>
            <Icon name="check" size={15} stroke={2.4}
              style={{ color: isF ? CS2.orange : CS2.amber, marginTop: 3, flexShrink: 0 }} />
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <Button variant={isF ? 'cta' : 'ghost'} size="md" icon="arrow-right"
        style={{ width: '100%', justifyContent: 'center' }}>
        {p.cta}
      </Button>
    </div>
  );
}

// ============================================================
// EL RETO DE LAS 30 PIEZAS — Campaign band
// ============================================================
function CsReto() {
  return (
    <section id="reto" style={{
      background: `linear-gradient(135deg, ${CS2.deep} 0%, #1F1408 100%)`,
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -80, top: -60 }} color={CS2.orange} opacity={0.35} size={300} />
      <Droplets style={{ left: -120, bottom: -100 }} color={CS2.soft} opacity={0.18} size={360} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: 'rgba(241,169,47,0.12)',
              border: `1px solid ${CS2.orange}`,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: CS2.orange,
              marginBottom: 22,
            }}>
              <Icon name="zap" size={12} />
              El reto Content Studio
            </div>

            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(36px, 5vw, 68px)',
              lineHeight: 1.0, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: '#fff',
            }}>
              ¿Todavía no nos crees?<br/>
              <span style={{ color: CS2.orange, fontStyle: 'italic' }}>Pruébalo.</span>
            </h2>

            <p style={{
              fontSize: 18, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.82)',
              margin: '0 0 18px', maxWidth: 520,
            }}>
              Periódicamente abrimos cupos para el Reto Content Studio: te producimos <strong style={{ color: '#fff', fontWeight: 600 }}>30 piezas de contenido on-brand en 48 horas</strong>, sin costo. Solo necesitamos tu brief.
            </p>
            <p style={{
              fontSize: 17, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.72)',
              margin: '0 0 32px', maxWidth: 520,
            }}>
              Si te convence lo que ves, hablamos del retainer. <strong style={{ color: CS2.orange, fontWeight: 600 }}>Si no, te quedas con el contenido.</strong>
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <Button variant="cta" size="lg" icon="arrow-right">
                Apuntarme al próximo reto
              </Button>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: 'rgba(255,255,255,0.6)',
              }}>* lista de espera abierta</span>
            </div>
          </div>

          {/* Big visual — counter */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(241,169,47,0.3)',
            borderRadius: 28, padding: '32px 32px',
            backdropFilter: 'blur(8px)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: CS2.soft, marginBottom: 18,
            }}>El reto en números</div>

            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
              marginBottom: 24,
            }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 'clamp(56px, 7vw, 88px)',
                  lineHeight: 0.9, letterSpacing: '-0.04em',
                  color: CS2.orange, marginBottom: 8,
                }}>30</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>
                  piezas on-brand
                </div>
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 'clamp(56px, 7vw, 88px)',
                  lineHeight: 0.9, letterSpacing: '-0.04em',
                  color: CS2.orange, marginBottom: 8,
                }}>48h</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>
                  desde tu brief
                </div>
              </div>
            </div>

            <div style={{
              padding: '16px 18px',
              background: 'rgba(241,169,47,0.1)',
              borderRadius: 14,
              borderLeft: `3px solid ${CS2.orange}`,
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: CS2.soft, marginBottom: 6,
              }}>// el deal</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.5, color: '#fff', margin: 0 }}>
                Te convence → hablamos del retainer.<br/>
                No te convence → <strong style={{ color: CS2.orange, fontWeight: 600 }}>te quedas con todo</strong>.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function CsFaq() {
  const faqs = [
    {
      q: '¿Qué tan on-brand sale realmente el contenido?',
      a: 'Depende del brief inicial. Si el onboarding está bien hecho y el Brand Voice Document es completo, el 85% de las piezas salen listas para publicar sin cambios mayores. El otro 15% requiere ajuste de tono o contexto.',
    },
    {
      q: '¿Quién aprueba antes de publicar?',
      a: 'Tú. Nunca publicamos directamente sin tu revisión y aprobación. Te entregamos el contenido en borrador con tiempo suficiente para revisarlo.',
    },
    {
      q: '¿Pueden publicar en mis redes directamente?',
      a: 'Sí, si nos das acceso. Muchos clientes prefieren recibir el contenido listo y publicarlo ellos mismos desde su plataforma de gestión (Buffer, Metricool, Hootsuite).',
    },
    {
      q: '¿Qué pasa si no me gusta una pieza?',
      a: 'La revisamos y corregimos sin costo. El proceso incluye hasta dos rondas de corrección por pieza.',
    },
    {
      q: '¿Incluye la estrategia de contenido o solo la producción?',
      a: 'En los planes Pro y Enterprise incluye estrategia de contenido mensual. En Lite la estrategia es del cliente y nosotros ejecutamos.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px', maxWidth: 960 }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Lo que todo CMO pregunta antes de firmar.
          </h2>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 24,
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%',
                  padding: '22px 28px',
                  background: isOpen ? CS2.bg : '#fff',
                  border: 0,
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11.5,
                      color: isOpen ? CS2.amber : 'var(--fg3)',
                      letterSpacing: '0.04em', minWidth: 28,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontSize: 17, fontWeight: 600,
                      color: 'var(--fg1)', letterSpacing: '-0.005em',
                    }}>{f.q}</span>
                  </div>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen
                      ? `linear-gradient(135deg, ${CS2.amber} 0%, ${CS2.orange} 100%)`
                      : 'var(--ink-50)',
                    color: isOpen ? '#fff' : 'var(--fg2)',
                    display: 'grid', placeItems: 'center',
                    transition: 'all var(--dur-base) var(--ease-out)',
                    transform: isOpen ? 'rotate(45deg)' : '',
                    flexShrink: 0,
                  }}>
                    <Icon name="arrow-right" size={14} style={{ transform: 'rotate(-45deg)' }} />
                  </div>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 28px 24px 72px',
                    background: CS2.bg,
                    animation: 'csFaqIn 280ms var(--ease-out)',
                  }}>
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg1)', margin: 0, maxWidth: 720 }}>
                      {f.a}
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <style>{`
          @keyframes csFaqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA — Cost math
// ============================================================
function CsFinalCta({ onCta }) {
  return (
    <section style={{
      background: `linear-gradient(160deg, ${CS2.bg} 0%, #fff 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -120, top: 80 }} color={CS2.soft} opacity={0.5} size={320} />
      <Droplets style={{ left: -80, bottom: -40 }} color={CS2.orange} opacity={0.2} size={260} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Eyebrow>El número que importa</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(32px, 4.4vw, 60px)',
            lineHeight: 1.02, letterSpacing: '-0.035em',
            margin: '14px 0 32px', color: 'var(--fg1)',
            maxWidth: 900,
          }}>
            ¿Cuánto tiempo pierde tu equipo<br/>
            en producción de contenido<br/>
            <span style={{ color: CS2.amber, fontStyle: 'italic' }}>cada semana?</span>
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48,
            alignItems: 'center',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Suma las horas de tu equipo en escribir, diseñar, grabar, editar y publicar. Luego calcula ese costo en salario. En la mayoría de las empresas medianas, la producción de contenido consume entre <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>$30,000 y $80,000 MXN al mes</strong> en horas de equipo — para publicar 10 o 15 piezas.
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.4,
                color: CS2.deep, fontWeight: 600,
                fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
                margin: '0 0 32px',
              }}>
                Content Studio AI produce el triple<br/>en el mismo presupuesto.
              </p>

              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                  Solicitar propuesta
                </Button>
                <Button variant="ghost" size="lg" icon="arrow-right" onClick={() => {
                  document.getElementById('reto')?.scrollIntoView({ behavior: 'smooth' });
                }}>
                  Ver el reto gratis
                </Button>
              </div>
            </div>

            {/* Math card */}
            <div style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 24,
              padding: '32px 32px',
              boxShadow: 'var(--shadow-md)',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11.5,
                color: CS2.amber, letterSpacing: '0.04em',
                marginBottom: 18,
              }}>// la matemática simple</div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <MathRow label="Hoy" value="10–15 piezas" cost="$50,000 MXN/mes" muted />
                <div style={{
                  textAlign: 'center', fontFamily: 'var(--font-mono)',
                  fontSize: 18, color: CS2.amber, fontWeight: 600,
                }}>↓</div>
                <MathRow label="Con Content Studio AI" value="40–60 piezas" cost="$50,000 MXN/mes" highlight />
              </div>

              <div style={{
                marginTop: 22, padding: '14px 18px',
                background: CS2.bg, borderRadius: 14,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span style={{ fontSize: 13, color: CS2.deep, fontWeight: 600 }}>
                  Volumen producido
                </span>
                <span style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 24, color: CS2.amber, letterSpacing: '-0.025em',
                }}>3–4× más</span>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function MathRow({ label, value, cost, muted, highlight }) {
  return (
    <div style={{
      padding: '14px 16px',
      background: highlight ? CS2.bg : 'var(--ink-25)',
      border: highlight ? `1px solid ${CS2.orange}` : '1px solid var(--border)',
      borderRadius: 14,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12,
    }}>
      <div>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: highlight ? CS2.amber : 'var(--fg3)', marginBottom: 4,
        }}>{label}</div>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 22, letterSpacing: '-0.02em',
          color: highlight ? CS2.deep : 'var(--fg1)',
        }}>{value}</div>
      </div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 12.5,
        color: muted ? 'var(--fg3)' : (highlight ? CS2.deep : 'var(--fg2)'),
        fontWeight: 500,
      }}>{cost}</div>
    </div>
  );
}

Object.assign(window, { CsBrandVoice, CsPlans, CsReto, CsFaq, CsFinalCta });