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

function Problem() {
  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative' }}>
      <Container style={{ padding: '120px 32px' }} className="section-pad">
        <div className="grid-2c" style={{ gap: 80, alignItems: 'center' }}>
          <div>
            <Eyebrow>EL PROBLEMA QUE NADIE QUIERE ADMITIR</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(32px, 4.2vw, 54px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 28px',
            }}>
              Tu agencia ya dice que usa IA.<br/>
              <span style={{ color: 'var(--ink-500)' }}>¿Pero los resultados lo demuestran?</span>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 560 }}>
              El <strong style={{ color: 'var(--fg1)', fontWeight: 700 }}>78% de los directores de marketing en México</strong> quieren adoptar inteligencia artificial. Menos del <strong style={{ color: 'var(--fg1)', fontWeight: 700 }}>15% tiene un plan real para hacerlo.</strong>
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 16px', maxWidth: 560 }}>
              El resultado: mucho presupuesto, poco retorno. Contenido que se produce lento. Leads que no califican solos. Campañas que dependen de intuición, no de datos.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg1)', margin: 0, fontWeight: 500, maxWidth: 560 }}>
              FRSKO existe para cambiar eso.
            </p>
          </div>

          {/* Right: dual stat block */}
          <div style={{ position: 'relative' }}>
            <Droplets style={{ right: -30, top: -30 }} color="var(--teal-100)" opacity={0.5} size={140} />
            <div style={{ display: 'grid', gap: 20 }}>
              <StatRow
                pct={78}
                color="var(--teal-500)"
                label="Quieren adoptar IA"
                value="78%"
                sub="Directores de marketing en México"
              />
              <StatRow
                pct={15}
                color="var(--ink-400)"
                muted
                label="Tienen un plan real"
                value="15%"
                sub="Para implementar IA de verdad"
              />
              <div style={{
                background: '#fff', border: '1px solid var(--border)', borderRadius: 24,
                padding: 24, display: 'flex', alignItems: 'center', gap: 18,
                boxShadow: 'var(--shadow-sm)',
              }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 16,
                  background: 'var(--yellow-50)', color: 'var(--yellow-700)',
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <Icon name="zap" size={26} />
                </div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--yellow-700)', marginBottom: 4 }}>EL GAP</div>
                  <div style={{ fontSize: 15, color: 'var(--fg2)', lineHeight: 1.45 }}>63 puntos entre la intención y la ejecución. Ahí trabajamos nosotros.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function StatRow({ pct, color, muted, label, value, sub }) {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)', borderRadius: 24, padding: 24,
      boxShadow: 'var(--shadow-sm)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: muted ? 'var(--ink-500)' : 'var(--brand)', marginBottom: 6 }}>{label}</div>
          <div style={{ fontSize: 14, color: 'var(--fg3)' }}>{sub}</div>
        </div>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 44, letterSpacing: '-0.03em', lineHeight: 1,
          color: color,
        }}>{value}</div>
      </div>
      <div style={{ height: 8, borderRadius: 999, background: 'var(--ink-50)', overflow: 'hidden' }}>
        <div style={{ height: '100%', width: pct + '%', background: color, borderRadius: 999 }} />
      </div>
    </div>
  );
}

function Pillars() {
  const pillars = [
    {
      n: '01',
      icon: 'zap',
      tone: { bg: 'var(--teal-50)', fg: 'var(--teal-700)' },
      title: 'IA como motor, no como adorno',
      lead: 'Usamos Claude y otras herramientas de IA para operar lead generation, contenido y campañas a una velocidad que un equipo tradicional no puede igualar.',
      tail: 'No usamos IA para hacer lo de antes. La usamos para hacer cosas que antes no eran posibles.',
    },
    {
      n: '02',
      icon: 'brain',
      tone: { bg: 'var(--sub-neuro-bg)', fg: 'var(--sub-neuro-2)' },
      title: 'Neuromarketing con datos, no corazonadas',
      lead: 'Más de una década estudiando cómo el cerebro toma decisiones de compra. Creatividades que conectan, mensajes que convierten, experiencias que se quedan.',
      tail: 'Es el foso defensivo que nadie copia de un día para otro.',
    },
    {
      n: '03',
      icon: 'target',
      tone: { bg: 'var(--yellow-50)', fg: 'var(--yellow-700)' },
      title: 'Entregamos resultados, no reportes',
      lead: 'Cada servicio tiene métricas de negocio claras desde el día uno: costo por lead, tasa de conversión, ROI de contenido.',
      tail: 'Medimos lo que importa para tu empresa, no lo que nos hace quedar bien en un PDF.',
    },
  ];
  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '120px 32px' }}>
        <div style={{ maxWidth: 800, marginBottom: 56 }}>
          <Eyebrow>LO QUE HACEMOS DIFERENTE</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontSize: 'clamp(32px, 4.2vw, 54px)', fontWeight: 700,
            letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 0',
          }}>
            Tres cosas que ninguna otra agencia en LATAM combina de la misma forma.
          </h2>
        </div>
        <div className="grid-3" style={{ gap: 20 }}>
          {pillars.map(p => (
            <article key={p.n} className="card-hover" style={{
              background: '#fff', border: '1px solid var(--border)', borderRadius: 28,
              padding: 36, display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 18,
                  background: p.tone.bg, color: p.tone.fg,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={p.icon} size={26} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 44, color: 'var(--ink-100)', letterSpacing: '-0.04em', lineHeight: 1,
                }}>{p.n}</div>
              </div>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 14px', color: 'var(--fg1)' }}>{p.title}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px' }}>{p.lead}</p>
              <p style={{
                fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg1)',
                fontWeight: 500, margin: 0,
                paddingTop: 18, borderTop: '1px solid var(--border)',
                marginTop: 'auto',
              }}>{p.tail}</p>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Problem, Pillars });