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

const SA2 = {
  cyan:   '#00B3BA',
  deep:   '#008A90',
  dark:   '#003C3F',
  bg:     'var(--cyan-50)',
  light:  '#C2F9FB',
};

// ============================================================
// LO QUE NO HACEMOS — Claridad sobre lo que no es
// ============================================================
function SaWhatNot() {
  const items = [
    {
      no: 'No somos una plataforma de automatización ciega',
      icon: 'zap',
      body: 'Smart Ads AI no es un bot que ajusta pujas sin criterio. Cada cambio en tus campañas pasa por la validación de un estratega.',
      tagline: 'La IA sugiere. Las personas deciden.',
    },
    {
      no: 'No gestionamos el presupuesto de tus clientes',
      icon: 'briefcase',
      body: 'Este servicio es para empresas que invierten su propio presupuesto en ads, no para agencias que gestionan presupuesto de terceros.',
      tagline: 'Trabajamos con marcas in-house.',
    },
    {
      no: 'No creamos las creatividades',
      icon: 'film',
      body: 'Gestionamos el rendimiento de las campañas. Si necesitas producción de creatividades, Content Studio AI es el complemento natural.',
      tagline: 'A menos que también contrates Content Studio AI.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Lo que no hacemos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 16px', color: 'var(--fg1)',
          }}>
            Claridad sobre lo que <span style={{ color: SA2.deep }}>sí es</span> y lo que <span style={{
              textDecoration: 'line-through',
              textDecorationColor: 'var(--ink-400)',
              textDecorationThickness: '2px',
              color: 'var(--fg3)',
            }}>no es</span>.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            Preferimos decirlo arriba que cobrarlo después.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 24,
              padding: '32px 28px',
              display: 'flex', flexDirection: 'column',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* No badge */}
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 11px', borderRadius: 999,
                background: 'var(--ink-100)',
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--ink-600)',
                marginBottom: 18, alignSelf: 'flex-start',
              }}>
                <Icon name="arrow-right" size={11} style={{ transform: 'rotate(45deg)' }} />
                NO
              </div>

              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: 'var(--ink-50)', color: 'var(--ink-500)',
                display: 'grid', placeItems: 'center',
                marginBottom: 18,
                position: 'relative',
              }}>
                <Icon name={it.icon} size={22} />
                <svg viewBox="0 0 48 48" style={{
                  position: 'absolute', inset: 0, pointerEvents: 'none',
                }}>
                  <line x1="8" y1="40" x2="40" y2="8" stroke={SA2.deep} strokeWidth="2" strokeLinecap="round" opacity="0.85" />
                </svg>
              </div>

              <h3 style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 19, letterSpacing: '-0.015em',
                margin: '0 0 12px', color: 'var(--fg1)',
                lineHeight: 1.25,
              }}>{it.no}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 18px', flex: 1 }}>
                {it.body}
              </p>
              <div style={{
                paddingTop: 14,
                borderTop: '1px solid var(--border)',
                fontSize: 13, fontWeight: 600,
                color: SA2.deep, fontStyle: 'italic',
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <Icon name="check" size={14} stroke={2.4} />
                {it.tagline}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// METRICS — KPIs we track
// ============================================================
function SaMetrics() {
  const kpis = [
    { kpi: 'ROAS',          name: 'Retorno sobre inversión en ads', what: 'Eficiencia del gasto',                  icon: 'chart' },
    { kpi: 'CPA',           name: 'Costo por adquisición',           what: 'Rentabilidad por cliente',               icon: 'target' },
    { kpi: 'CTR',           name: 'Click-through rate',              what: 'Calidad de creatividades y audiencias',  icon: 'zap' },
    { kpi: 'Frecuencia',    name: 'Impresiones / usuario',           what: 'Fatiga de audiencia',                    icon: 'film' },
    { kpi: 'Share of voice',name: 'Posición vs competencia',         what: 'Tu participación en la conversación',    icon: 'megaphone' },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <Eyebrow>Métricas que seguimos</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 20px', color: 'var(--fg1)',
            }}>
              Los KPIs que decidimos vigilar — y por qué.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 24px' }}>
              No medimos por medir. Cada KPI corresponde a una decisión de negocio.
            </p>

            <div style={{
              padding: '20px 22px',
              background: SA2.bg,
              borderRadius: 16,
              borderLeft: `3px solid ${SA2.deep}`,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: SA2.deep, marginBottom: 8,
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="clipboard" size={12} /> Reporte
              </div>
              <p style={{ fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg1)', margin: 0 }}>
                Dashboard en tiempo real + <strong style={{ color: SA2.deep, fontWeight: 600 }}>reporte ejecutivo semanal</strong> con las decisiones tomadas y el impacto medido.
              </p>
            </div>
          </div>

          {/* KPI table */}
          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 24,
            overflow: 'hidden',
          }}>
            <div style={{
              padding: '14px 24px',
              background: 'var(--ink-25)',
              borderBottom: '1px solid var(--border)',
              display: 'grid', gridTemplateColumns: '48px 1.2fr 1fr',
              gap: 16,
              fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
              textTransform: 'uppercase', color: 'var(--fg3)',
            }}>
              <span></span>
              <span>KPI</span>
              <span>Qué mide</span>
            </div>
            {kpis.map((k, i) => (
              <div key={k.kpi} style={{
                padding: '20px 24px',
                display: 'grid', gridTemplateColumns: '48px 1.2fr 1fr',
                gap: 16, alignItems: 'center',
                borderBottom: i < kpis.length - 1 ? '1px solid var(--border)' : 'none',
                transition: 'background var(--dur-fast) var(--ease-out)',
              }}
                onMouseEnter={e => e.currentTarget.style.background = SA2.bg}
                onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: SA2.bg, color: SA2.deep,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={k.icon} size={18} />
                </div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700,
                    fontSize: 18, letterSpacing: '-0.02em',
                    color: 'var(--fg1)', marginBottom: 2,
                  }}>{k.kpi}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg3)' }}>{k.name}</div>
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--fg2)' }}>
                  {k.what}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function SaFaq() {
  const faqs = [
    {
      q: '¿Cuánto presupuesto mínimo necesito para que tenga sentido?',
      a: 'El servicio tiene más impacto a partir de $50,000 MXN/mes de inversión en ads. Por debajo de eso, la optimización manual puede ser suficiente.',
    },
    {
      q: '¿Cuánto tarda el onboarding?',
      a: 'Tomamos acceso a tus cuentas publicitarias, hacemos una auditoría inicial de rendimiento y en 1 semana ya estamos operando con el sistema activo.',
    },
    {
      q: '¿Pueden manejar múltiples marcas?',
      a: 'Sí. El sistema está diseñado para gestionar cuentas múltiples. Si tienes varias marcas o líneas de negocio, lo estructuramos como una sola operación.',
    },
    {
      q: '¿Puedo mantener acceso a mis cuentas?',
      a: 'Siempre. Tú nunca pierdes acceso a tus cuentas publicitarias. Trabajamos con permisos de administrador compartido, no con acceso transferido.',
    },
    {
      q: '¿Incluye el presupuesto de inversión en ads?',
      a: 'No. El servicio cubre la gestión. La inversión en ads se paga directamente a las plataformas con tu método de pago.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <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 pregunta todo Director de Performance.
          </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 ? SA2.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 ? SA2.deep : '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, ${SA2.deep} 0%, ${SA2.cyan} 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: SA2.bg,
                    animation: 'saFaqIn 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 saFaqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA — 48h diagnostic
// ============================================================
function SaFinalCta({ onCta }) {
  return (
    <section style={{
      background: `linear-gradient(160deg, ${SA2.dark} 0%, #001A1C 100%)`,
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -100, top: -60 }} color={SA2.cyan} opacity={0.3} size={320} />
      <Droplets style={{ left: -120, bottom: -100 }} color={SA2.light} opacity={0.2} size={360} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64,
          alignItems: 'center',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: 'rgba(0,218,227,0.1)',
              border: `1px solid ${SA2.cyan}`,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: SA2.cyan,
              marginBottom: 22,
            }}>
              <Icon name="sparkles" size={12} /> Diagnóstico gratuito · 48h
            </div>

            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(34px, 4.6vw, 64px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: '#fff',
            }}>
              ¿Cuándo fue la última vez<br/>
              que alguien revisó tus campañas<br/>
              <span style={{ color: SA2.cyan, fontStyle: 'italic' }}>con datos de ayer?</span>
            </h2>

            <p style={{
              fontSize: 18, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.8)',
              margin: '0 0 32px', maxWidth: 540,
            }}>
              Solicita un diagnóstico gratuito de tus campañas actuales. En 48 horas te decimos qué está funcionando, qué no, y dónde hay oportunidades de mejora inmediata — sin compromiso.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar diagnóstico
              </Button>
              <Button variant="inverse" size="lg" icon="arrow-right" onClick={onCta}>
                Agendar demo
              </Button>
            </div>

            <div style={{
              marginTop: 32, paddingTop: 32,
              borderTop: '1px solid rgba(255,255,255,0.1)',
              display: 'flex', gap: 28, flexWrap: 'wrap',
              fontSize: 13, color: 'rgba(255,255,255,0.6)',
            }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA2.cyan }} />
                Sin compromiso de contratación
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA2.cyan }} />
                Reporte por escrito
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA2.cyan }} />
                NDA si lo necesitas
              </span>
            </div>
          </div>

          {/* What you get card */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(0,218,227,0.3)',
            borderRadius: 28, padding: '32px 32px',
            backdropFilter: 'blur(8px)',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11.5,
              color: SA2.cyan, letterSpacing: '0.06em',
              marginBottom: 18, textTransform: 'uppercase',
            }}>El diagnóstico incluye</div>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'chart',    h: 'Auditoría de rendimiento',         d: 'Análisis de últimos 90 días, plataforma por plataforma' },
                { icon: 'target',   h: 'Mapa de oportunidades inmediatas', d: 'Lo que se puede mejorar la próxima semana, no en 3 meses' },
                { icon: 'sparkles', h: 'Lista priorizada de quick-wins',   d: 'Acciones de bajo riesgo, alto impacto, ranqueadas' },
                { icon: 'compass',  h: 'Recomendación de siguiente paso',  d: 'Trabajemos juntos o con tu equipo actual — sin sesgo' },
              ].map((it, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: 'rgba(0,218,227,0.14)',
                    color: SA2.cyan,
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    <Icon name={it.icon} size={17} />
                  </div>
                  <div>
                    <div style={{
                      fontFamily: 'var(--font-heading)', fontWeight: 600,
                      fontSize: 15.5, color: '#fff', marginBottom: 4,
                      letterSpacing: '-0.01em',
                    }}>{it.h}</div>
                    <div style={{
                      fontSize: 13, lineHeight: 1.45,
                      color: 'rgba(255,255,255,0.65)',
                    }}>{it.d}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div style={{
              marginTop: 24, paddingTop: 18,
              borderTop: '1px solid rgba(255,255,255,0.14)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)' }}>
                Tiempo de respuesta
              </span>
              <span style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 22, color: SA2.cyan, letterSpacing: '-0.02em',
              }}>≤ 48 horas</span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { SaWhatNot, SaMetrics, SaFaq, SaFinalCta });