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

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

// ============================================================
// HERO
// ============================================================
function SaHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(85% 65% at 50% 0%, ${SA.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 60 }} color={SA.light} opacity={0.5} size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={SA.cyan} opacity={0.25} size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(0,138,144,0.06) 1px, transparent 0)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent)',
      }} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        {/* Breadcrumb */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em',
          marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: SA.deep, fontWeight: 600 }}>smart-ads</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'start',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22, flexWrap: 'wrap' }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${SA.cyan}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: SA.deep,
              }}>
                <Icon name="zap" size={12} />
                Smart Ads AI · Producto IA
              </div>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                color: 'var(--fg3)',
              }}>Paid · Performance</span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(40px, 5.4vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              El mismo presupuesto en ads.<br/>
              <span style={{ color: SA.deep, fontStyle: 'italic' }}>Mejores resultados.</span><br/>
              Sin contratar más gente.
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 560, margin: '0 0 32px',
            }}>
              Smart Ads AI agrega un copiloto de inteligencia artificial a la gestión de tus campañas en Meta, Google y TikTok. Cada mañana analiza el rendimiento, detecta oportunidades y sugiere acciones. Tu estratega las valida y ejecuta.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar diagnóstico
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-down-right" onClick={() => {
                document.getElementById('como')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver cómo funciona
              </Button>
            </div>

            {/* Trust line */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA.deep }} /> Meta · Google · TikTok
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA.deep }} /> Onboarding 1 semana
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: SA.deep }} /> Tu equipo decide
              </div>
            </div>
          </div>

          <BriefingPreview />
        </div>
      </Container>
    </section>
  );
}

function BriefingPreview() {
  const items = [
    {
      p: 'P1', tone: 'high',
      platform: 'Meta', icon: 'film',
      action: 'Pausa creatividad #7',
      reason: 'CTR ↓ 32% en 48h · frecuencia 4.2',
      delta: '−$1,200/d',
      deltaTone: 'bad',
    },
    {
      p: 'P2', tone: 'mid',
      platform: 'Google', icon: 'search',
      action: 'Escalar campaña "Q3 SaaS"',
      reason: 'ROAS 4.2× · pres. al 70%',
      delta: '+$8K ROAS',
      deltaTone: 'good',
    },
    {
      p: 'P3', tone: 'mid',
      platform: 'TikTok', icon: 'zap',
      action: 'Lanzar audiencia lookalike 1%',
      reason: 'Seed audience: 2,400 conv.',
      delta: '+est. 40 conv',
      deltaTone: 'good',
    },
    {
      p: 'P4', tone: 'low',
      platform: 'Meta', icon: 'film',
      action: 'Rotar 3 creatividades BOFU',
      reason: 'Anti-fatiga · próxima semana',
      delta: 'Programar',
      deltaTone: 'neutral',
    },
  ];

  const toneRing = {
    high: { dot: '#D9503C', bg: '#FEF1EE', label: '#D9503C' },
    mid:  { dot: '#F8B62D', bg: '#FEF7E6', label: '#A87616' },
    low:  { dot: SA.cyan,   bg: SA.bg,     label: SA.deep },
  };
  const deltaColor = {
    good: '#22A06B', bad: '#D9503C', neutral: 'var(--fg3)',
  };

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 20px',
        background: `linear-gradient(135deg, ${SA.deep} 0%, ${SA.cyan} 100%)`,
        color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="sparkles" size={18} />
          <div>
            <div style={{
              fontFamily: 'var(--font-heading)', fontWeight: 600,
              fontSize: 14, letterSpacing: '-0.005em', lineHeight: 1,
            }}>Smart Briefing</div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              color: 'rgba(255,255,255,0.8)', marginTop: 3,
            }}>06:42 AM · Lun 27 May 2026</div>
          </div>
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          padding: '3px 8px', borderRadius: 999,
          background: 'rgba(255,255,255,0.18)',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#82FF94',
            animation: 'saPulse 2s infinite',
          }} />
          4 acciones
        </div>
      </div>

      {/* Account snapshot */}
      <div style={{
        padding: '14px 20px',
        background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
      }}>
        {[
          { v: '3.8×', l: 'ROAS 7d', tone: 'good' },
          { v: '$427', l: 'CPA promedio', tone: 'neutral' },
          { v: '+12%', l: 'vs sem. ant.', tone: 'good' },
        ].map((k, i) => (
          <div key={k.l} style={{
            paddingLeft: i > 0 ? 16 : 0,
            borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 22, letterSpacing: '-0.025em',
              color: k.tone === 'good' ? '#22A06B' : 'var(--fg1)',
              lineHeight: 1,
            }}>{k.v}</div>
            <div style={{ fontSize: 11, color: 'var(--fg3)', marginTop: 3 }}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* Recommendation list */}
      <div style={{ padding: '6px 14px' }}>
        {items.map((it, i) => {
          const t = toneRing[it.tone];
          return (
            <div key={i} style={{
              padding: '14px 10px',
              display: 'grid', gridTemplateColumns: '36px 1fr auto', gap: 12,
              alignItems: 'center',
              borderBottom: i < items.length - 1 ? '1px solid var(--border)' : 'none',
              animation: `saSlide 500ms var(--ease-out) ${i * 90}ms both`,
            }}>
              {/* Priority pill */}
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: t.bg, color: t.label,
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 12,
                fontWeight: 700,
              }}>{it.p}</div>

              {/* Body */}
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    color: 'var(--fg3)', letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                  }}>{it.platform}</span>
                  <span style={{ color: 'var(--ink-200)' }}>·</span>
                  <span style={{
                    width: 6, height: 6, borderRadius: 999, background: t.dot,
                  }} />
                </div>
                <div style={{
                  fontSize: 13.5, fontWeight: 600,
                  color: 'var(--fg1)', lineHeight: 1.25,
                  marginBottom: 3,
                }}>{it.action}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: 'var(--fg3)', letterSpacing: '0.02em',
                }}>{it.reason}</div>
              </div>

              {/* Delta */}
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                fontWeight: 600, color: deltaColor[it.deltaTone],
                textAlign: 'right',
                padding: '4px 8px',
                background: 'var(--ink-25)',
                borderRadius: 6, whiteSpace: 'nowrap',
              }}>{it.delta}</div>
            </div>
          );
        })}
      </div>

      {/* Handoff footer */}
      <div style={{
        padding: '14px 20px',
        background: SA.bg,
        borderTop: `1px solid ${SA.cyan}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 12.5,
        gap: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 24, height: 24, borderRadius: 999,
            background: SA.deep, color: '#fff',
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
          }}>D</div>
          <span style={{ color: SA.dark }}>
            <strong style={{ color: SA.deep, fontWeight: 600 }}>Diego</strong> · estratega FRSKO revisará a las
          </span>
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontWeight: 700,
          color: SA.deep,
        }}>09:30</span>
      </div>

      <style>{`
        @keyframes saPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(130,255,148,0.5); }
          50% { box-shadow: 0 0 0 6px rgba(130,255,148,0); }
        }
        @keyframes saSlide {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function SaProblem() {
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 40px', color: 'var(--fg1)',
            maxWidth: 1000, textWrap: 'pretty',
          }}>
            Tus campañas necesitan atención diaria. ¿Cuántos días a la semana <span style={{
              background: `linear-gradient(180deg, transparent 60%, ${SA.bg} 60%)`,
              padding: '0 6px', color: SA.deep,
              fontStyle: 'italic',
            }}>las revisa alguien de verdad?</span>
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48,
            alignItems: 'start',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                La gestión de paid media tiene un problema de escala: para hacerla bien se necesita revisar las cuentas todos los días, ajustar pujas, rotar creatividades, detectar anomalías y probar audiencias nuevas constantemente.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Un media-buyer promedio puede hacer eso con <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>2 o 3 cuentas</strong>. Después de eso, las decisiones se vuelven reactivas y el rendimiento se estanca.
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.3, color: SA.deep,
                fontWeight: 700, fontStyle: 'italic',
                margin: 0, fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
              }}>
                Smart Ads AI resuelve ese cuello de botella sin triplicar tu equipo.
              </p>
            </div>

            {/* Week dial */}
            <div style={{
              background: 'var(--ink-25)',
              border: '1px solid var(--border)',
              borderRadius: 24, padding: '28px 28px',
            }}>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 16,
              }}>Revisión real de la cuenta · semana</div>

              <div style={{
                display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8,
                marginBottom: 18,
              }}>
                {[
                  { d: 'L', r: true },
                  { d: 'M', r: false },
                  { d: 'M', r: true },
                  { d: 'J', r: false },
                  { d: 'V', r: true },
                  { d: 'S', r: false },
                  { d: 'D', r: false },
                ].map((day, i) => (
                  <div key={i} style={{
                    aspectRatio: '1', borderRadius: 12,
                    background: day.r ? SA.deep : 'var(--ink-100)',
                    color: day.r ? '#fff' : 'var(--ink-400)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--font-heading)', fontSize: 16, fontWeight: 700,
                    position: 'relative',
                  }}>
                    {day.d}
                  </div>
                ))}
              </div>

              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                marginBottom: 6,
              }}>
                <span style={{ fontSize: 12, color: 'var(--fg3)' }}>Días revisados</span>
                <span style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 22, letterSpacing: '-0.02em',
                  color: 'var(--fg1)',
                }}>3 <span style={{ color: 'var(--fg3)', fontSize: 14, fontWeight: 400 }}>/ 7</span></span>
              </div>

              <p style={{
                fontFamily: 'var(--font-mono)', fontSize: 11.5,
                color: SA.deep, fontWeight: 600,
                marginTop: 16, paddingTop: 16,
                borderTop: '1px solid var(--border)',
                margin: '16px 0 0',
              }}>
                <span style={{ color: SA.cyan }}>// </span>
                Con Smart Ads AI: 7/7 días.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// HOW IT WORKS — Daily loop
// ============================================================
function SaHowItWorks() {
  const steps = [
    {
      n: '06:00',
      title: 'Analiza rendimiento',
      icon: 'chart',
      body: 'Revisa todas tus campañas activas en Meta, Google y TikTok: CPA, ROAS, CTR, frecuencia, posición, calidad de anuncio.',
      who: 'IA',
    },
    {
      n: '06:30',
      title: 'Detecta alertas',
      icon: 'zap',
      body: 'Identifica caídas, presupuesto mal distribuido, creatividades fatigadas y oportunidades de escala antes que cualquier humano.',
      who: 'IA',
    },
    {
      n: '06:42',
      title: 'Genera recomendaciones',
      icon: 'sparkles',
      body: 'Sugiere acciones concretas y priorizadas: qué escalar, qué pausar, qué audiencia probar, qué puja ajustar.',
      who: 'IA',
    },
    {
      n: '09:30',
      title: 'Tu estratega ejecuta',
      icon: 'users',
      body: 'Un estratega FRSKO revisa las sugerencias, valida las que tienen sentido y ejecuta. Nada se toca sin criterio humano.',
      who: 'Humano',
    },
  ];

  return (
    <section id="como" style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 80 }} color={SA.light} opacity={0.35} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Cómo funciona</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)',
          }}>
            Tu copiloto de IA trabaja<br/>
            <span style={{ color: SA.deep, fontStyle: 'italic' }}>mientras tú duermes.</span>
          </h2>
        </div>

        {/* Day timeline */}
        <div style={{ position: 'relative' }}>
          {/* Horizontal timeline */}
          <div aria-hidden style={{
            position: 'absolute', left: 32, right: 32, top: 32, height: 2,
            background: `linear-gradient(90deg, ${SA.cyan} 0%, ${SA.deep} 75%, var(--yellow-500) 100%)`,
            borderRadius: 2,
          }} />

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
            position: 'relative',
          }}>
            {steps.map((s, i) => (
              <div key={s.n}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: '#fff',
                  border: `2px solid ${s.who === 'IA' ? SA.cyan : 'var(--yellow-500)'}`,
                  display: 'grid', placeItems: 'center',
                  color: s.who === 'IA' ? SA.deep : 'var(--yellow-700)',
                  marginBottom: 18,
                  position: 'relative', zIndex: 1,
                  boxShadow: `0 0 0 6px ${s.who === 'IA' ? SA.bg : 'var(--yellow-50)'}`,
                }}>
                  <Icon name={s.icon} size={26} stroke={1.6} />
                </div>

                <div style={{
                  background: '#fff',
                  border: '1px solid var(--border)',
                  borderRadius: 22,
                  padding: '24px 24px',
                  position: 'relative',
                  transition: 'all var(--dur-base) var(--ease-out)',
                }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = SA.cyan; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = ''; }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 12,
                      fontWeight: 600, color: SA.deep,
                      letterSpacing: '0.04em',
                    }}>{s.n}</span>
                    <span style={{
                      fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em',
                      textTransform: 'uppercase',
                      padding: '2px 6px', borderRadius: 4,
                      background: s.who === 'IA' ? SA.bg : 'var(--yellow-50)',
                      color: s.who === 'IA' ? SA.deep : 'var(--yellow-700)',
                    }}>{s.who}</span>
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700,
                    fontSize: 18, letterSpacing: '-0.015em',
                    margin: '0 0 10px', color: 'var(--fg1)',
                    lineHeight: 1.2,
                  }}>{s.title}</h3>
                  <p style={{
                    fontSize: 13.5, lineHeight: 1.5,
                    color: 'var(--fg2)', margin: 0,
                  }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Closing line */}
        <div style={{
          marginTop: 32, padding: '24px 28px',
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 20,
          display: 'flex', alignItems: 'center', gap: 18,
          maxWidth: 880, marginLeft: 'auto', marginRight: 'auto',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: `linear-gradient(135deg, ${SA.deep}, ${SA.cyan})`,
            color: '#fff',
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <Icon name="check" size={20} stroke={2.2} />
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg1)', margin: 0 }}>
            <strong style={{ fontWeight: 600 }}>Resultado:</strong> Una cuenta gestionada con la disciplina de un analista de datos senior que trabaja todos los días — <strong style={{ color: SA.deep, fontWeight: 600 }}>sin el costo de contratar uno</strong>.
          </p>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// PLATFORMS
// ============================================================
function SaPlatforms() {
  const platforms = [
    {
      name: 'Meta Ads',
      sub: 'Facebook · Instagram',
      glyph: 'M',
      gradient: 'linear-gradient(135deg, #1877F2 0%, #E1306C 100%)',
      areas: ['Audiencias', 'Creatividades', 'Retargeting', 'Catálogo'],
    },
    {
      name: 'Google Ads',
      sub: 'Search · Display · PMax · YouTube',
      glyph: 'G',
      gradient: 'linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%)',
      areas: ['Search', 'Display', 'Performance Max', 'Shopping', 'YouTube'],
    },
    {
      name: 'TikTok Ads',
      sub: 'Spark · In-Feed',
      glyph: 'T',
      gradient: 'linear-gradient(135deg, #25F4EE 0%, #000 50%, #FE2C55 100%)',
      areas: ['Spark Ads', 'Video In-Feed', 'Audiencias', 'Presupuesto'],
    },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Plataformas que cubrimos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.4vw, 44px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Donde compras tráfico, ahí trabajamos.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {platforms.map(p => (
            <div key={p.name} style={{
              border: '1px solid var(--border)',
              borderRadius: 24,
              overflow: 'hidden',
              background: '#fff',
              transition: 'all var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = SA.cyan; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>
              <div style={{
                padding: '28px 28px',
                background: p.gradient,
                color: '#fff',
                display: 'flex', alignItems: 'center', gap: 18,
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 16,
                  background: 'rgba(255,255,255,0.18)',
                  border: '1px solid rgba(255,255,255,0.3)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 32, color: '#fff', letterSpacing: '-0.04em',
                }}>{p.glyph}</div>
                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700,
                    fontSize: 22, letterSpacing: '-0.02em',
                    margin: '0 0 4px', color: '#fff',
                  }}>{p.name}</h3>
                  <div style={{
                    fontSize: 12, color: 'rgba(255,255,255,0.85)',
                    fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
                  }}>{p.sub}</div>
                </div>
              </div>
              <div style={{ padding: '20px 24px 24px' }}>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
                  textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 12,
                }}>Cubrimos</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {p.areas.map(a => (
                    <span key={a} style={{
                      fontSize: 12.5, fontWeight: 500,
                      padding: '4px 10px', borderRadius: 999,
                      background: 'var(--ink-25)',
                      color: 'var(--fg1)',
                      border: '1px solid var(--border)',
                    }}>{a}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <p style={{
          textAlign: 'center', marginTop: 28,
          fontFamily: 'var(--font-mono)', fontSize: 12.5,
          color: 'var(--fg3)',
        }}>
          <span style={{ color: SA.deep, fontWeight: 600 }}>// </span>
          ¿Usas otra plataforma? Conversemos. Evaluamos caso por caso.
        </p>
      </Container>
    </section>
  );
}

Object.assign(window, { SaHero, SaProblem, SaHowItWorks, SaPlatforms });