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

const INT = {
  orange: '#F1A92F',
  yellow: '#E8C940',
  bg:     '#FCF3DD',
  bgMid:  '#F5E4B8',
  dark:   '#7A4C0A',
};

// ============================================================
// PROCESS — 4 semanas
// ============================================================
function IntProcess() {
  const steps = [
    {
      n: '01', weeks: 'Semana 1', title: 'Diagnóstico y objetivos', icon: 'search',
      body: 'Revisamos tus canales actuales, historial de campañas, benchmark de competencia y definimos los KPIs que van a guiar toda la operación.',
      detail: 'Sin diagnóstico no hay estrategia.',
    },
    {
      n: '02', weeks: 'Semana 2', title: 'Estrategia y plan', icon: 'compass',
      body: 'Proponemos la combinación de canales, presupuesto recomendado, estructura de campañas y calendario de contenido para los primeros 90 días.',
      detail: 'Todo argumentado, nada genérico.',
    },
    {
      n: '03', weeks: 'Semana 3', title: 'Setup y lanzamiento', icon: 'rocket',
      body: 'Configuramos las cuentas publicitarias, instalamos el tracking correcto, preparamos las creatividades iniciales y lanzamos las primeras campañas.',
      detail: 'El primer reporte llega al final de esta semana.',
    },
    {
      n: '04', weeks: 'Semana 4 en adelante', title: 'Optimización continua', icon: 'chart',
      body: 'Cada semana ajustamos lo que hay que ajustar. Cada mes revisamos la estrategia completa y proponemos el plan siguiente.',
      detail: 'Tú siempre sabes qué está pasando y por qué.',
    },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>El proceso</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Así empieza una nueva cuenta<br/>
            en{' '}
            <span style={{ color: INT.orange }}>FRSKO Interactive.</span>
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {steps.map((s, i) => (
            <div key={s.n}
              className="int-process-row"
              style={{
                background: 'var(--ink-25)', border: '1px solid var(--border)',
                borderRadius: 22, padding: '28px 32px',
                display: 'grid', gridTemplateColumns: '72px 1fr 1.3fr 48px',
                gap: 28, alignItems: 'center',
                transition: 'all var(--dur-base) var(--ease-out)',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = INT.orange;
                e.currentTarget.style.background = INT.bg;
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'var(--border)';
                e.currentTarget.style.background = 'var(--ink-25)';
                e.currentTarget.style.boxShadow = '';
              }}>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 52,
                  fontWeight: 700, letterSpacing: '-0.04em',
                  color: 'var(--fg1)', lineHeight: 1, marginBottom: 3,
                }}>{s.n}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: INT.orange, fontWeight: 600, letterSpacing: '0.04em',
                }}>paso</div>
              </div>

              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  padding: '3px 9px', borderRadius: 6,
                  background: INT.bg, color: INT.dark,
                  display: 'inline-block', marginBottom: 13,
                }}>{s.weeks}</div>
                <div style={{
                  width: 42, height: 42, borderRadius: 12,
                  background: INT.bg, color: INT.orange,
                  display: 'grid', placeItems: 'center', marginBottom: 12,
                }}>
                  <Icon name={s.icon} size={20} />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 20, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg1)',
                }}>{s.title}</h3>
              </div>

              <div>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 10px' }}>
                  {s.body}
                </p>
                <p style={{ fontSize: 13.5, lineHeight: 1.5, color: INT.orange, fontStyle: 'italic', margin: 0 }}>
                  → {s.detail}
                </p>
              </div>

              <div style={{
                width: 40, height: 40, borderRadius: 999,
                background: i === steps.length - 1 ? INT.orange : 'var(--ink-100)',
                color: i === steps.length - 1 ? '#fff' : 'var(--ink-400)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                <Icon name="arrow-right" size={17} />
              </div>
            </div>
          ))}
        </div>
      </Container>

      <style>{`
        @media (max-width: 860px) {
          .int-process-row { grid-template-columns: 1fr !important; gap: 14px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// OBJECTIVES — 4 tipos
// ============================================================
function IntObjectives() {
  const objectives = [
    {
      icon: 'megaphone', title: 'Awareness',
      metric: 'Alcance cualificado · Frecuencia · Reconocimiento',
      body: 'Hacer que tu marca exista en la cabeza de tu audiencia correcta.',
      color: 'var(--brand)', bg: 'var(--teal-50)',
    },
    {
      icon: 'sparkles', title: 'Branding',
      metric: 'Share of voice · Consistencia · Posicionamiento percibido',
      body: 'Construir una imagen de marca coherente y memorable en todos los puntos de contacto.',
      color: 'var(--sub-academy-1)', bg: 'var(--sub-academy-bg)',
    },
    {
      icon: 'heart', title: 'Engagement',
      metric: 'Tasa de interacción real · Crecimiento orgánico · Comunidad',
      body: 'Crear comunidad genuina alrededor de tu marca con audiencias que responden.',
      color: INT.orange, bg: INT.bg,
    },
    {
      icon: 'target', title: 'Performance',
      metric: 'CPA · ROAS · CPL calificado · Tasa de conversión',
      body: 'Generar leads, ventas o conversiones directas y medibles. El objetivo más demandante — y el que más nos gusta.',
      featured: true,
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ left: -60, bottom: -40 }} color={INT.yellow} opacity={0.2} size={260} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 52 }}>
          <Eyebrow>Objetivos que sabemos alcanzar</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(26px, 3.4vw, 46px)',
            lineHeight: 1.06, letterSpacing: '-0.03em',
            margin: '14px auto 12px', maxWidth: 680,
          }}>
            Define qué quieres lograr.<br/>Nosotros construimos cómo.
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg3)', margin: 0 }}>
            La mayoría de las campañas combinan más de uno de estos objetivos.
          </p>
        </div>

        <div className="int-obj-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {objectives.map(obj => (
            <div key={obj.title} style={{
              background: obj.featured ? 'var(--fg1)' : '#fff',
              borderRadius: 22, padding: '28px 26px',
              border: obj.featured ? 'none' : '1px solid var(--border)',
              boxShadow: obj.featured ? 'var(--shadow-xl)' : 'var(--shadow-sm)',
              transform: obj.featured ? 'translateY(-8px)' : 'none',
              display: 'flex', flexDirection: 'column',
              position: 'relative', overflow: 'hidden',
              transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => {
                if (!obj.featured) { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-4px)'; }
              }}
              onMouseLeave={e => {
                if (!obj.featured) { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'none'; }
              }}>
              {obj.featured && (
                <Droplets style={{ right: -20, top: -10 }} color={`rgba(241,169,47,0.2)`} opacity={1} size={160} />
              )}

              <div style={{
                width: 48, height: 48, borderRadius: 14, marginBottom: 18,
                background: obj.featured ? 'rgba(241,169,47,0.15)' : obj.bg,
                color: obj.featured ? INT.orange : obj.color,
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={obj.icon} size={22} />
              </div>

              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 20, letterSpacing: '-0.02em', margin: '0 0 10px',
                color: obj.featured ? '#fff' : 'var(--fg1)',
              }}>{obj.title}</h3>

              <p style={{
                fontSize: 14, lineHeight: 1.55, margin: '0 0 16px',
                color: obj.featured ? 'rgba(255,255,255,0.72)' : 'var(--fg2)',
              }}>{obj.body}</p>

              <div style={{
                fontSize: 11.5, lineHeight: 1.5, marginTop: 'auto',
                paddingTop: 14,
                borderTop: `1px solid ${obj.featured ? 'rgba(255,255,255,0.1)' : 'var(--border)'}`,
                color: obj.featured ? 'rgba(255,255,255,0.45)' : 'var(--fg3)',
                fontFamily: 'var(--font-mono)',
              }}>{obj.metric}</div>
            </div>
          ))}
        </div>
      </Container>

      <style>{`
        @media (max-width: 980px) {
          .int-obj-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .int-obj-grid > div { transform: none !important; }
        }
        @media (max-width: 560px) {
          .int-obj-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// IA DIFERENCIA
// ============================================================
function IntAi() {
  const stats = [
    { n: '10×', l: 'variantes de creatividades probadas' },
    { n: '5×',  l: 'más rápido el análisis de datos' },
    { n: '24/7', l: 'reportería automatizada' },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div className="int-ai-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center',
        }}>
          {/* Left — stats */}
          <div>
            <Eyebrow>IA integrada</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(26px, 3.4vw, 44px)',
              lineHeight: 1.06, letterSpacing: '-0.03em', margin: '14px 0 32px',
            }}>
              La misma estrategia.<br/>
              <span style={{ color: INT.orange }}>Diez veces más rápida</span><br/>
              de ejecutar.
            </h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {stats.map((s, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 20,
                  padding: '20px 24px', borderRadius: 18,
                  background: i === 0 ? INT.bg : 'var(--ink-25)',
                  border: `1px solid ${i === 0 ? INT.bgMid : 'var(--border)'}`,
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 36, letterSpacing: '-0.04em',
                    color: i === 0 ? INT.orange : 'var(--teal-700)',
                    lineHeight: 1, flexShrink: 0, minWidth: 72,
                  }}>{s.n}</div>
                  <div style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — explanation */}
          <div>
            <div style={{
              background: 'var(--ink-25)', border: '1px solid var(--border)',
              borderRadius: 22, padding: '32px 36px', marginBottom: 20,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: INT.bg, color: INT.orange,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name="sparkles" size={20} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  padding: '3px 9px', borderRadius: 6,
                  background: INT.bg, color: INT.dark,
                }}>Cómo funciona</div>
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
                Integramos inteligencia artificial en cada parte de la operación: análisis de
                audiencias, generación de variantes de creatividades, redacción de copies para
                pruebas, interpretación de datos de campaña y reportería automatizada.
              </p>
            </div>

            <div style={{
              background: 'var(--fg1)', borderRadius: 22, padding: '28px 32px',
              position: 'relative', overflow: 'hidden',
            }}>
              <Droplets style={{ right: -20, top: -10 }} color={`rgba(241,169,47,0.2)`} opacity={1} size={140} />
              <p style={{
                fontSize: 16, lineHeight: 1.65,
                color: 'rgba(255,255,255,0.82)', margin: '0 0 16px',
                position: 'relative',
              }}>
                Esto no reemplaza el criterio estratégico — lo acelera. Un estratega FRSKO puede
                gestionar el doble de cuentas con la misma calidad porque la IA se encarga del
                trabajo de análisis y producción que antes era manual.
              </p>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 18, color: INT.orange,
                letterSpacing: '-0.01em', margin: 0, position: 'relative',
              }}>
                Para ti: más pruebas, más velocidad, mejores resultados.
              </p>
            </div>
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 860px) {
          .int-ai-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function IntFaq() {
  const [openIdx, setOpenIdx] = React.useState(null);

  const faqs = [
    {
      q: '¿El presupuesto de ads está incluido en el precio del servicio?',
      a: 'No. El fee de FRSKO cubre la gestión estratégica y operativa. La inversión en plataformas (Meta, Google, TikTok) se paga directamente a ellas desde tu cuenta publicitaria.',
    },
    {
      q: '¿Cuánto presupuesto de ads necesito para que tenga sentido?',
      a: 'El mínimo recomendado depende del canal y el objetivo. En términos generales, con menos de $20,000 MXN/mes en ads el margen de prueba y aprendizaje es muy estrecho. Lo evaluamos caso por caso.',
    },
    {
      q: '¿Mantienen acceso a mis cuentas publicitarias?',
      a: 'Siempre. Todas tus cuentas permanecen en tu propiedad. Trabajamos con acceso compartido como administradores — nunca transferimos la propiedad de las cuentas.',
    },
    {
      q: '¿Producen las creatividades (videos, imágenes) o solo las pautas?',
      a: 'Depende del plan. Algunos planes incluyen producción básica de creatividades. Para producción de video, fotografía o contenido complejo, se puede agregar Content Studio AI o coordinar con tu equipo creativo.',
    },
    {
      q: '¿Cuánto tiempo tarda en verse resultados?',
      a: 'Las campañas de performance (leads, ventas) suelen mostrar señales en las primeras 4–6 semanas. Las de awareness y branding tienen horizontes de medición más largos — 3 a 6 meses para ver impacto medible en posicionamiento.',
    },
    {
      q: '¿Trabajan con marcas de cualquier industria?',
      a: 'Tenemos más experiencia en bienes raíces, retail, fintech, salud, legal y B2B. Para industrias con restricciones regulatorias en publicidad (farma, legal, financiero), tenemos metodología adaptada.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div className="int-faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 72 }}>
          <div>
            <Eyebrow>FAQ</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(26px, 3.2vw, 42px)',
              lineHeight: 1.06, letterSpacing: '-0.03em', margin: '14px 0 0',
            }}>
              Preguntas<br/>frecuentes
            </h2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {faqs.map((faq, i) => {
              const isOpen = openIdx === i;
              return (
                <div key={i} style={{
                  borderRadius: 16, overflow: 'hidden',
                  border: `1px solid ${isOpen ? INT.orange : 'var(--border)'}`,
                  background: isOpen ? INT.bg : '#fff',
                  transition: 'border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
                }}>
                  <button
                    onClick={() => setOpenIdx(isOpen ? null : i)}
                    style={{
                      width: '100%', background: 'none', border: 0,
                      padding: '18px 22px',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      cursor: 'pointer', textAlign: 'left', gap: 16,
                    }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontWeight: 600,
                      fontSize: 15.5, letterSpacing: '-0.01em',
                      color: isOpen ? INT.dark : 'var(--fg1)',
                    }}>{faq.q}</span>
                    <div style={{
                      width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                      background: isOpen ? INT.orange : 'var(--ink-100)',
                      color: isOpen ? '#fff' : 'var(--fg3)',
                      display: 'grid', placeItems: 'center',
                      transform: isOpen ? 'rotate(45deg)' : 'none',
                      transition: 'all var(--dur-base) var(--ease-out)',
                    }}>
                      <Icon name="arrow-right" size={13} style={{ transform: 'rotate(-45deg)' }} />
                    </div>
                  </button>
                  {isOpen && (
                    <div style={{ padding: '0 22px 18px' }}>
                      <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--fg2)', margin: 0 }}>
                        {faq.a}
                      </p>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 860px) {
          .int-faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function IntCta({ onCta }) {
  const metrics = ['Leads calificados', 'Ventas directas', 'ROAS', 'CPL', 'Brand awareness', 'Comunidad'];
  const [active, setActive] = React.useState(null);

  const stats = [
    { n: '90 días', l: 'para primeras señales de resultado' },
    { n: '1:1',     l: 'Estratega de cuenta dedicado'      },
    { n: '100%',    l: 'Propiedad de tus cuentas siempre'  },
  ];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #4A2800 0%, #1A2F35 100%)',
    }}>
      <Droplets style={{ right: -60, top: -40 }}    color="rgba(241,169,47,0.2)"  opacity={1} size={280} />
      <Droplets style={{ left: -80, bottom: -60 }}  color="rgba(232,201,64,0.15)" opacity={1} size={320} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0)',
        backgroundSize: '32px 32px',
      }} />

      <Container style={{ padding: '112px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 16px', borderRadius: 999,
            background: 'rgba(241,169,47,0.18)',
            border: '1px solid rgba(241,169,47,0.35)',
            fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: INT.orange, marginBottom: 28,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: INT.orange }} />
            Primera propuesta sin costo
          </div>

          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(30px, 5vw, 60px)',
            lineHeight: 1.03, letterSpacing: '-0.035em',
            color: '#fff', margin: '0 0 22px',
          }}>
            ¿Qué métrica de negocio<br/>quieres mover en los próximos{' '}
            <span style={{
              background: `linear-gradient(135deg, ${INT.orange} 0%, ${INT.yellow} 100%)`,
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>90 días?</span>
          </h2>

          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.65,
            color: 'rgba(255,255,255,0.68)', margin: '0 auto 36px', maxWidth: 580,
          }}>
            Esa es la primera pregunta que te hace un estratega FRSKO. No "¿cuánto quieres
            gastar?" sino "¿qué quieres lograr?". La respuesta a eso determina todo lo demás.
          </p>

          {/* Metric chips */}
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', marginBottom: 40,
          }}>
            {metrics.map((m, i) => (
              <button key={m} onClick={() => setActive(active === i ? null : i)} style={{
                padding: '9px 18px', borderRadius: 999, border: 'none', cursor: 'pointer',
                fontSize: 13.5, fontWeight: 600,
                background: active === i ? INT.orange : 'rgba(255,255,255,0.08)',
                color: active === i ? INT.dark : 'rgba(255,255,255,0.75)',
                transition: 'all var(--dur-fast) var(--ease-out)',
                outline: active === i ? `2px solid ${INT.yellow}` : 'none',
                outlineOffset: 2,
              }}>{m}</button>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
              Solicitar propuesta de campañas
            </Button>
            <a href="/casos-de-exito" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '16px 28px', borderRadius: 999, fontSize: 16, fontWeight: 600,
              border: '1px solid rgba(255,255,255,0.22)', color: 'rgba(255,255,255,0.85)',
              transition: 'all var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
              Ver casos de éxito
              <Icon name="arrow-right" size={16} />
            </a>
          </div>

          {/* Stats strip */}
          <div style={{
            marginTop: 56, display: 'flex', justifyContent: 'center',
            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 20, overflow: 'hidden',
          }}>
            {stats.map((s, i) => (
              <div key={s.l} style={{
                padding: '24px 32px', textAlign: 'center',
                borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                flex: '1 1 180px',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 26, letterSpacing: '-0.025em',
                  color: '#fff', lineHeight: 1, marginBottom: 6,
                }}>{s.n}</div>
                <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { IntProcess, IntObjectives, IntAi, IntFaq, IntCta });