/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container, Reveal, useWindowWidth */
/* CA constant defined in closer-ai-top.jsx (loaded first) */

// ============================================================
// EL ORIGEN DEL LEAD NO IMPORTA
// ============================================================
function CaChannels() {
  const w = useWindowWidth();
  const cols = w < 640 ? 1 : w < 900 ? 2 : 3;
  const sources = [
    { icon: 'zap',      label: 'Pauta digital' },
    { icon: 'search',   label: 'SEO Pulse' },
    { icon: 'target',   label: 'Lead Engine AI' },
    { icon: 'users',    label: 'Referidos' },
    { icon: 'briefcase',label: 'Otro servicio FRSKO' },
    { icon: 'globe',    label: 'Cualquier otro canal' },
  ];

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px' }}>
        <Reveal>
          <div style={{ maxWidth: 720, margin: '0 auto 48px', textAlign: 'center' }}>
            <Eyebrow color={CA.coral}>El origen del lead no importa</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              lineHeight: 1.08, letterSpacing: '-0.03em',
              margin: '14px 0 16px', color: 'var(--fg1)',
            }}>
              Un solo agente para todos tus canales de entrada.
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
              Closer AI conecta con los leads que entran por pauta digital, por una campaña de Smart Ads AI, por una auditoría de SEO Pulse, por Lead Engine AI, por referidos o por cualquier otro servicio de FRSKO, incluso por canales completamente ajenos a FRSKO.
            </p>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 14, maxWidth: 820, margin: '0 auto 28px' }}>
            {sources.map(s => (
              <div key={s.label} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '14px 16px', borderRadius: 16,
                background: '#fff', border: '1px solid var(--border)',
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 10,
                  background: CA.bg, color: CA.coral,
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <Icon name={s.icon} size={16} />
                </div>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--fg1)' }}>{s.label}</span>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
            maxWidth: 420, margin: '0 auto',
          }}>
            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
            <Icon name="arrow-down-right" size={18} style={{ color: CA.coral, transform: 'rotate(45deg)' }} />
            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
          </div>
          <div style={{
            marginTop: 14, display: 'flex', justifyContent: 'center',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '14px 24px', borderRadius: 999,
              background: `linear-gradient(135deg, ${CA.coral}, ${CA.warm})`,
              color: '#fff', boxShadow: '0 16px 32px -12px rgba(225,79,61,0.5)',
            }}>
              <Icon name="message" size={18} />
              <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 16 }}>Closer AI</span>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// ============================================================
// LO QUE TU EQUIPO RECIBE
// ============================================================
function CaDeliverables() {
  const items = [
    { icon: 'zap',      title: 'Respuesta en menos de 8 segundos, 24/7', body: 'Nadie vuelve a perder un lead por horario.' },
    { icon: 'users',    title: 'Leads calificados directo en tu CRM',    body: 'Con el historial completo de la conversación.' },
    { icon: 'calendar', title: 'Citas agendadas en tu calendario',       body: 'En el momento de mayor intención de compra.' },
    { icon: 'clipboard',title: 'Playbook de objeciones vivo',            body: 'Se actualiza con las objeciones reales que enfrenta tu equipo.' },
    { icon: 'chart',    title: 'Reporte semanal',                       body: 'Tasa de respuesta, leads calificados vs. curiosos, objeciones más comunes.' },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px' }}>
        <Reveal>
          <div style={{ maxWidth: 760, marginBottom: 48 }}>
            <Eyebrow color={CA.coral}>Lo que tu equipo recibe</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)',
            }}>
              No mensajes sin responder. Citas con gente lista para comprar.
            </h2>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gap: 10 }}>
          {items.map((it, i) => (
            <Reveal key={it.title} delay={i + 1}>
              <article style={{
                display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
                alignItems: 'flex-start',
                padding: '16px 18px',
                border: '1px solid var(--border)', borderRadius: 16,
                background: 'var(--ink-25)',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: '#fff', color: CA.coral,
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <Icon name={it.icon} size={18} />
                </div>
                <div>
                  <h3 style={{ margin: '0 0 4px', color: 'var(--fg1)', fontFamily: 'var(--font-heading)', fontSize: 16, lineHeight: 1.25, letterSpacing: '-0.01em', fontWeight: 650 }}>{it.title}</h3>
                  <p style={{ margin: 0, color: 'var(--fg2)', fontSize: 13.5, lineHeight: 1.5 }}>{it.body}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// MÉTRICAS OBJETIVO
// ============================================================
function CaMetrics() {
  const w = useWindowWidth();
  const cols = w < 620 ? 1 : w < 940 ? 2 : 4;
  const metrics = [
    { label: 'Tiempo de primera respuesta',            goal: '<8s',  hint: '24 horas al día, los 7 días',              icon: 'zap' },
    { label: 'Recuperación de leads sin seguimiento',   goal: '40%',  hint: 'Leads que hoy se pierden por horario',    icon: 'chart' },
    { label: 'Tiempo de implementación',                goal: '21d',  hint: 'Del kickoff al piloto con tu playbook',   icon: 'calendar' },
    { label: 'Leads calificados vs. curiosos',          goal: 'Sem 1',hint: 'Visible desde la primera semana',         icon: 'target' },
  ];

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px' }}>
        <Reveal>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            gap: 24, flexWrap: 'wrap', marginBottom: 40,
          }}>
            <div>
              <Eyebrow color={CA.coral}>Métricas objetivo</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 'clamp(28px, 3.4vw, 44px)',
                lineHeight: 1.05, letterSpacing: '-0.03em',
                margin: '10px 0 0', color: 'var(--fg1)',
              }}>Esto es lo que medimos desde el día uno.</h2>
            </div>
            <p style={{ fontSize: 13, color: 'var(--fg3)', maxWidth: 320, margin: 0 }}>
              Los números específicos de clientes se agregan cuando los pilotos entreguen datos publicables.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 14 }}>
          {metrics.map((m, i) => (
            <Reveal key={m.label} delay={i + 1} fast>
              <div style={{
                background: '#fff', border: '1px solid var(--border)',
                borderRadius: 20, padding: '22px 20px',
              }}>
                <Icon name={m.icon} size={20} style={{ color: CA.coral }} />
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 32, letterSpacing: '-0.03em',
                  color: CA.coral, margin: '12px 0 8px',
                }}>{m.goal}</div>
                <h3 style={{ margin: '0 0 4px', fontSize: 14.5, fontWeight: 650, color: 'var(--fg1)' }}>{m.label}</h3>
                <p style={{ margin: 0, fontSize: 12.5, color: 'var(--fg3)', lineHeight: 1.4 }}>{m.hint}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FIT CHECK
// ============================================================
function CaFit() {
  const w = useWindowWidth();
  const stack = w < 860;
  const yes = [
    'Vendes un producto o servicio de alto ticket con proceso de decisión consultivo',
    'Ya generas leads por algún canal, pero el seguimiento inmediato es tu cuello de botella',
    'Tu equipo de ventas pierde tiempo respondiendo lo mismo en lugar de cerrar',
    'Operas en México, LATAM o cualquier mercado donde WhatsApp es el canal principal',
  ];
  const no = [
    'Todavía no tienes un playbook de objeciones ni proceso de venta definido',
    'Tu venta ocurre 100% en persona sin ningún componente digital',
    'Buscas un chatbot de menú simple para atención básica, no para calificar y cerrar',
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px' }}>
        <Reveal>
          <div style={{ maxWidth: 760, marginBottom: 40 }}>
            <Eyebrow color={CA.coral}>Para qué tipo de empresa tiene sentido</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)',
            }}>
              Hablamos claro: ¿es para ti o no?
            </h2>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1fr 1fr', gap: 24 }}>
          <Reveal dir="left" delay={1}><CaFitCol kind="yes" title="Tiene sentido si…" items={yes} /></Reveal>
          <Reveal dir="right" delay={2}><CaFitCol kind="no" title="Puede no ser tu momento si…" items={no} /></Reveal>
        </div>
      </Container>
    </section>
  );
}

function CaFitCol({ kind, title, items }) {
  const isYes = kind === 'yes';
  return (
    <div style={{
      background: isYes ? CA.bg : 'var(--ink-25)',
      border: `1px solid ${isYes ? CA.warm : 'var(--border)'}`,
      borderRadius: 24, padding: '28px 28px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 999,
          background: isYes ? CA.coral : 'var(--ink-200)', color: '#fff',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name={isYes ? 'check' : 'arrow-right'} size={18} style={isYes ? {} : { transform: 'rotate(45deg)' }} />
        </div>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 20, letterSpacing: '-0.015em',
          color: isYes ? CA.deep : 'var(--fg2)',
        }}>{title}</div>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(it => (
          <li key={it} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            paddingBottom: 12,
            borderBottom: `1px solid ${isYes ? 'rgba(225,79,61,0.18)' : 'var(--border)'}`,
          }}>
            <Icon name={isYes ? 'check' : 'arrow-right'} size={16} stroke={2.2}
              style={{ color: isYes ? CA.coral : 'var(--ink-400)', transform: isYes ? '' : 'rotate(45deg)', marginTop: 3, flexShrink: 0 }} />
            <span style={{ fontSize: 15, lineHeight: 1.5, color: isYes ? 'var(--fg1)' : 'var(--fg2)' }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ============================================================
// STACK
// ============================================================
function CaStack() {
  const w = useWindowWidth();
  const stack = w < 860;
  const toolCols = w < 520 ? 1 : 2;
  const tools = [
    { name: 'Meta Business Agent', desc: 'WhatsApp Business Platform' },
    { name: 'Claude',              desc: 'Anthropic · Ingeniería Conversacional' },
    { name: 'Tu CRM',              desc: 'HubSpot, Pipedrive o el tuyo' },
    { name: 'Calendarios',         desc: 'Google Calendar / Calendly' },
  ];

  return (
    <section style={{ background: 'var(--teal-900)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -80, top: -60 }} color={CA.warm} opacity={0.14} size={300} />
      <Droplets style={{ left: -120, bottom: -120 }} color={CA.coral} opacity={0.12} size={360} />
      <Container style={{ padding: 'clamp(48px, 6.5vw, 80px) 32px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1fr 1.3fr', gap: stack ? 32 : 56, alignItems: 'center' }}>
          <Reveal>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: CA.warm, marginBottom: 14 }}>Stack tecnológico</div>
              <h2 style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 'clamp(28px, 3.4vw, 44px)',
                lineHeight: 1.05, letterSpacing: '-0.03em',
                margin: '0 0 16px', color: '#fff',
              }}>Las herramientas.<br/>El método.<br/>El equipo.</h2>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', margin: 0 }}>
                Tú no necesitas contratar ninguna de estas herramientas por separado.
                <br/>
                <span style={{ color: CA.warm, fontWeight: 600 }}>FRSKO las opera como parte del servicio.</span>
              </p>
            </div>
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${toolCols}, 1fr)`, gap: 12 }}>
            {tools.map((t, i) => (
              <Reveal key={t.name} delay={i + 1} fast>
                <div style={{
                  background: 'rgba(255,255,255,0.04)',
                  border: `1px solid rgba(255,146,112,0.28)`,
                  borderRadius: 14, padding: '14px 16px',
                }}>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: 15, color: '#fff', letterSpacing: '-0.01em', marginBottom: 4 }}>{t.name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.02em' }}>{t.desc}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function CaFaq() {
  const faqs = [
    { q: '¿Esto reemplaza a mi equipo de ventas?', a: 'No. El Meta Business Agent no reemplaza a tu equipo; lo potencia. Elimina la parte que nadie quiere hacer: responder a las 10 PM o calificar curiosos. Así tu equipo habla solo con prospectos listos para cerrar.' },
    { q: '¿Funciona solo con leads que vienen de FRSKO?', a: 'No. Closer AI se conecta a cualquier canal de entrada de leads, sea o no un servicio de FRSKO. Es la capa de seguimiento, no el canal de adquisición.' },
    { q: '¿Cuánto tarda en implementarse?', a: 'El piloto completo, con la secuencia P-T-N cargada con tu playbook real, toma alrededor de 21 días.' },
    { q: '¿Qué pasa con mis datos y los de mis clientes?', a: 'Operamos bajo el principio de Soberanía de Datos: la información vive dentro de tu propio CRM, no en una base externa de FRSKO.' },
    { q: '¿Qué diferencia hay entre esto y un chatbot normal?', a: 'Un chatbot convencional atiende con menús. Closer AI está construido con Ingeniería Conversacional: califica con preguntas reales, maneja objeciones de tu playbook y agenda en el momento de mayor intención. No se limita a responder preguntas frecuentes.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: '#fff' }}>
      <Container maxW={960} style={{ padding: 'clamp(48px, 6.5vw, 80px) 32px' }}>
        <Reveal>
          <div style={{ maxWidth: 720, marginBottom: 32 }}>
            <Eyebrow color={CA.coral}>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 Director Comercial pregunta primero.
            </h2>
          </div>
        </Reveal>

        <Reveal delay={1} scale>
          <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)}
                    aria-expanded={isOpen}
                    aria-controls={`ca-faq-${i}`}
                    style={{
                      width: '100%', padding: '20px 24px',
                      background: isOpen ? CA.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 ? CA.coral : '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 ? CA.coral : '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>
                  <div id={`ca-faq-${i}`} role="region" style={{
                    display: 'grid',
                    gridTemplateRows: isOpen ? '1fr' : '0fr',
                    transition: 'grid-template-rows var(--dur-base) var(--ease-out)',
                  }}>
                    <div style={{ overflow: 'hidden' }}>
                      <p style={{ padding: '0 24px 22px 58px', fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg1)', margin: 0, maxWidth: 720 }}>{f.a}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function CaFinalCta({ onCta }) {
  const w = useWindowWidth();
  const stack = w < 860;
  return (
    <section style={{
      background: `linear-gradient(160deg, ${CA.bg} 0%, var(--cyan-50) 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -120, top: 80 }} color={CA.warm} opacity={0.4} size={320} />
      <Droplets style={{ left: -100, bottom: -60 }} color="var(--cyan-200)" opacity={0.4} size={280} />

      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1.1fr 0.9fr', gap: stack ? 32 : 56, alignItems: 'center' }}>
          <Reveal dir="left">
            <div>
              <Eyebrow color={CA.coral}>El número que más importa</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)',
              }}>
                ¿Cuánto te cuesta<br/>
                <span style={{ color: CA.coral }}>cada lead que se enfría</span> antes de que alguien responda?
              </h2>
              <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 24px', maxWidth: 480 }}>
                Rodrigo, Director Comercial de una empresa de alto ticket, pasó de responder el 40% de sus mensajes con retraso a tener una tasa de respuesta de menos de 8 segundos, 24/7, en 21 días.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                  Agenda tu diagnóstico
                </Button>
                <Button variant="ghost" size="lg" onClick={onCta}>
                  Hablar con un estratega
                </Button>
              </div>
            </div>
          </Reveal>

          <Reveal dir="right" delay={2}>
            <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 28, padding: 28, boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: CA.coral, letterSpacing: '0.04em', marginBottom: 20 }}>// antes / después</div>
              <StatSplit label="Tasa de respuesta con retraso" before="40%" after="<8s" />
              <StatSplit label="Días para implementar el piloto" before="—" after="21" />
              <StatSplit label="Cobertura de atención" before="Horario de oficina" after="24/7" last />
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function StatSplit({ label, before, after, last }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 12, alignItems: 'center',
      paddingBottom: 16, marginBottom: 16,
      borderBottom: last ? 'none' : '1px solid var(--border)',
    }}>
      <div>
        <div style={{ fontSize: 11, color: 'var(--fg3)', marginBottom: 4 }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 20, color: 'var(--ink-400)' }}>{before}</div>
      </div>
      <Icon name="arrow-right" size={16} style={{ color: CA.coral }} />
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 11, color: CA.coral, marginBottom: 4 }}>Con Closer AI</div>
        <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 20, color: CA.coral }}>{after}</div>
      </div>
    </div>
  );
}

Object.assign(window, { CaChannels, CaDeliverables, CaMetrics, CaFit, CaStack, CaFaq, CaFinalCta });