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

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

// ============================================================
// CAMPAIGN DASHBOARD — hero visual
// ============================================================
function CampaignDashboard() {
  const [activePlat, setActivePlat] = React.useState(0);

  const platforms = [
    { name: 'Meta',     color: '#0866FF', bg: '#EEF4FF' },
    { name: 'Google',   color: '#EA4335', bg: '#FEF0EE' },
    { name: 'TikTok',   color: '#010101', bg: '#F2F2F2' },
    { name: 'LinkedIn', color: '#0A66C2', bg: '#EDF3FB' },
  ];

  const kpiSets = [
    [{ v: '4.8×',  l: 'ROAS' }, { v: '$193',  l: 'CPL · MXN' }, { v: '47',    l: 'Leads' }],
    [{ v: '3.2×',  l: 'ROAS' }, { v: '$241',  l: 'CPC · MXN' }, { v: '1,820', l: 'Clics' }],
    [{ v: '7.1%',  l: 'CTR'  }, { v: '$112',  l: 'CPM · MXN' }, { v: '28k',   l: 'Views' }],
    [{ v: '0.62%', l: 'CTR'  }, { v: '$318',  l: 'CPL · MXN' }, { v: '22',    l: 'Leads' }],
  ];

  const barValues = [38, 52, 44, 61, 73, 88, 82];
  const days      = ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
  const maxV      = Math.max(...barValues);

  const kpis = kpiSets[activePlat];
  const plat = platforms[activePlat];

  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)',
      borderRadius: 24, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
    }}>
      {/* Window chrome */}
      <div style={{
        padding: '12px 16px', background: 'var(--ink-25)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {['#FF5F57','#FEBC2E','#27C840'].map(c => (
            <div key={c} style={{ width: 10, height: 10, borderRadius: 999, background: c }} />
          ))}
        </div>
        <div style={{
          flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', textAlign: 'center',
        }}>app.frsko.com/interactive</div>
        <div style={{
          fontSize: 10, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: INT.dark, padding: '3px 8px', borderRadius: 999, background: INT.bg,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#22A06B',
            animation: 'campPulse 2s infinite',
          }} />
          Live
        </div>
      </div>

      {/* Platform tabs */}
      <div style={{
        padding: '10px 14px', borderBottom: '1px solid var(--border)',
        display: 'flex', gap: 6,
      }}>
        {platforms.map((p, i) => (
          <button key={p.name} onClick={() => setActivePlat(i)} style={{
            padding: '5px 12px', borderRadius: 999, border: 'none', cursor: 'pointer',
            fontSize: 11.5, fontWeight: 600, letterSpacing: '0.02em',
            background: activePlat === i ? p.bg : 'transparent',
            color: activePlat === i ? p.color : 'var(--fg3)',
            transition: 'all var(--dur-fast) var(--ease-out)',
          }}>{p.name}</button>
        ))}
      </div>

      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderBottom: '1px solid var(--border)' }}>
        {kpis.map((k, i) => (
          <div key={k.l} style={{
            padding: '16px 18px',
            borderLeft: i > 0 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 26, letterSpacing: '-0.03em', color: plat.color,
              lineHeight: 1,
            }}>{k.v}</div>
            <div style={{ fontSize: 11, color: 'var(--fg3)', marginTop: 4, fontWeight: 500 }}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* Bar chart */}
      <div style={{ padding: '18px 18px 14px' }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 12,
        }}>Últimos 7 días · Leads</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 60 }}>
          {barValues.map((v, i) => (
            <div key={i} style={{
              flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            }}>
              <div style={{
                width: '100%', borderRadius: '4px 4px 0 0',
                height: `${(v / maxV) * 52}px`,
                background: i === barValues.length - 1 ? INT.orange : INT.bg,
                border: i === barValues.length - 1 ? 'none' : `1px solid ${INT.bgMid}`,
                transition: 'all var(--dur-base) var(--ease-out)',
              }} />
              <div style={{ fontSize: 9.5, color: 'var(--fg3)', fontWeight: 500 }}>{days[i]}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{
        padding: '12px 18px', background: INT.bg,
        fontSize: 12, color: INT.dark,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} />
          IA optimizó 3 audiencias automáticamente
        </span>
        <span style={{ fontWeight: 600 }}>Ver detalle →</span>
      </div>

      <style>{`
        @keyframes campPulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(34,160,107,0.4); }
          50%       { box-shadow: 0 0 0 5px rgba(34,160,107,0); }
        }
      `}</style>
    </div>
  );
}

// ============================================================
// HERO
// ============================================================
function IntHero({ onCta }) {
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(80% 60% at 50% 0%, ${INT.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 60 }}    color={INT.yellow} opacity={0.4}  size={240} />
      <Droplets style={{ left: -100, bottom: -60 }} color={INT.orange} opacity={0.2}  size={300} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(20,47,50,0.05) 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="/servicios" style={{ color: 'var(--fg3)' }}>servicios</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: INT.orange, fontWeight: 600 }}>campanas-digitales</span>
        </div>

        <div className="int-hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'start',
        }}>
          {/* Left — copy */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 12px', borderRadius: 999,
                background: '#fff', border: `1px solid ${INT.orange}`,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: INT.dark,
              }}>
                <Icon name="megaphone" size={12} />
                FRSKO Interactive · Campañas
              </div>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--fg3)' }}>
                Performance · MX / LATAM
              </span>
            </div>

            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(36px, 5vw, 66px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Publicar por publicar<br/>no es marketing.
              <br/>
              <span style={{ color: INT.orange, fontStyle: 'italic' }}>Esto es diferente.</span>
            </h1>

            <p style={{
              fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.6,
              color: 'var(--fg2)', maxWidth: 540, margin: '0 0 32px',
            }}>
              FRSKO Interactive gestiona tus campañas digitales con un objetivo claro: impactar
              en tus ventas. Paid media, redes sociales y contenido trabajando juntos —
              medido semana a semana con métricas que le importan a tu negocio.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar propuesta de campañas
              </Button>
              <Button variant="ghost" size="lg" icon="chart" onClick={() => {
                document.getElementById('resultados')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver cómo medimos resultados
              </Button>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              {['Meta · Google · TikTok · LinkedIn', 'Primera semana de onboarding', 'Sin lock-in de contratos'].map((text, i) => (
                <React.Fragment key={text}>
                  {i > 0 && <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: INT.orange }} />
                    {text}
                  </div>
                </React.Fragment>
              ))}
            </div>
          </div>

          {/* Right — dashboard visual */}
          <CampaignDashboard />
        </div>
      </Container>

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

// ============================================================
// PROBLEM — likes vs clientes
// ============================================================
function IntProblem() {
  const vanity = [
    { label: 'Alcance', value: '45,200', note: 'personas' },
    { label: 'Likes',   value: '892',    note: 'reacciones' },
    { label: 'Impresiones', value: '180K', note: 'visualizaciones' },
    { label: 'Shares',  value: '234',    note: 'compartidos' },
  ];
  const biz = [
    { label: 'Leads calificados', value: '47',    note: 'este mes'     },
    { label: 'CPL',               value: '$193',  note: 'MXN por lead' },
    { label: 'ROAS',              value: '4.8×',  note: 'retorno total' },
    { label: 'CAC',               value: '$892',  note: 'costo por cliente' },
  ];

  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <Eyebrow>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.8vw, 52px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 16px', color: 'var(--fg1)',
          }}>
            ¿Tu agencia actual te reporta{' '}
            <span style={{
              display: 'inline', fontStyle: 'italic',
              background: `linear-gradient(180deg, transparent 58%, #FEE5E3 58%)`,
              padding: '0 4px',
            }}>likes</span>
            {' '}o te reporta{' '}
            <span style={{
              display: 'inline', fontStyle: 'italic',
              background: `linear-gradient(180deg, transparent 58%, ${INT.bgMid} 58%)`,
              padding: '0 4px',
            }}>clientes?</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 48px', maxWidth: 720 }}>
            El indicador más común que reciben las empresas de sus agencias es el "alcance" —
            cuántas personas vieron la publicación. El problema es que el alcance no paga nóminas.
          </p>

          <div className="int-problem-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {/* Vanity card */}
            <div style={{
              border: '1px solid var(--border)', borderRadius: 22, overflow: 'hidden',
              opacity: 0.78,
            }}>
              <div style={{
                padding: '16px 20px', background: 'var(--ink-25)', borderBottom: '1px solid var(--border)',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8, background: '#FEF0EE',
                  color: 'var(--danger)', display: 'grid', placeItems: 'center',
                }}>
                  <Icon name="heart" size={14} />
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--fg2)' }}>Lo que reporta tu agencia actual</div>
              </div>
              <div>
                {vanity.map((item, i) => (
                  <div key={item.label} style={{
                    padding: '14px 20px',
                    borderBottom: i < vanity.length - 1 ? '1px solid var(--border)' : 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  }}>
                    <span style={{ fontSize: 14, color: 'var(--fg3)' }}>{item.label}</span>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--fg2)', letterSpacing: '-0.02em' }}>{item.value}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg3)' }}>{item.note}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{
                padding: '14px 20px', background: 'var(--ink-50)',
                fontSize: 13, color: 'var(--fg3)', fontStyle: 'italic',
              }}>¿Cuántos clientes nuevos generó esto?</div>
            </div>

            {/* Business card */}
            <div style={{
              border: `1.5px solid ${INT.orange}`, borderRadius: 22, overflow: 'hidden',
              boxShadow: '0 0 0 4px rgba(241,169,47,0.12)',
            }}>
              <div style={{
                padding: '16px 20px', background: INT.bg, borderBottom: `1px solid ${INT.bgMid}`,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8, background: INT.orange,
                  color: '#fff', display: 'grid', placeItems: 'center',
                }}>
                  <Icon name="chart" size={14} />
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: INT.dark }}>Lo que reporta FRSKO Interactive</div>
              </div>
              <div>
                {biz.map((item, i) => (
                  <div key={item.label} style={{
                    padding: '14px 20px',
                    borderBottom: i < biz.length - 1 ? '1px solid var(--border)' : 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  }}>
                    <span style={{ fontSize: 14, color: 'var(--fg1)', fontWeight: 500 }}>{item.label}</span>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: INT.dark, letterSpacing: '-0.02em' }}>{item.value}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg3)' }}>{item.note}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{
                padding: '14px 20px', background: INT.bg,
                fontSize: 13, color: INT.dark, fontWeight: 600,
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="check" size={14} stroke={2.5} />
                Esto sí paga nóminas.
              </div>
            </div>
          </div>
        </div>
      </Container>

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

// ============================================================
// SERVICES — Lo que cubrimos
// ============================================================
function IntServices() {
  const platforms = [
    { label: 'Meta Ads',   color: '#0866FF', bg: '#EEF4FF' },
    { label: 'Google Ads', color: '#EA4335', bg: '#FEF0EE' },
    { label: 'TikTok Ads', color: '#010101', bg: '#F2F2F2' },
    { label: 'LinkedIn Ads', color: '#0A66C2', bg: '#EDF3FB' },
  ];

  const services = [
    {
      icon: 'users', title: 'Redes Sociales Orgánicas',
      body: 'Calendario editorial, producción de contenido, publicación y gestión de comunidad. Orientado a construir audiencias propias que no dependen de presupuesto pagado indefinidamente.',
      tag: 'Orgánico',
    },
    {
      icon: 'clipboard', title: 'Estrategia de Contenido',
      body: 'Definición de pilares de contenido, arquetipos de audiencia, voz de marca y calendario estratégico alineado a tus objetivos de negocio.',
      tag: 'Estrategia',
    },
    {
      icon: 'mail', title: 'Email Marketing y Automatización',
      body: 'Secuencias de bienvenida, nurturing, reactivación y newsletters. Integración con tu CRM para que el email acompañe cada etapa del ciclo de compra.',
      tag: 'CRM',
    },
    {
      icon: 'chart', title: 'Reportería y Analytics',
      body: 'Dashboard en tiempo real con las métricas que definimos contigo desde el inicio. Reporte ejecutivo mensual con decisiones tomadas y plan del mes siguiente.',
      tag: 'Data',
    },
  ];

  return (
    <section id="resultados" style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -80, top: 60 }} color={INT.yellow} opacity={0.22} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ textAlign: 'left', marginBottom: 52 }}>
          <Eyebrow>Lo que cubrimos</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(26px, 3.4vw, 46px)',
            lineHeight: 1.06, letterSpacing: '-0.03em', margin: '14px 0 0', maxWidth: 640,
          }}>
            Una operación de marketing digital completa — bajo un solo equipo.
          </h2>
        </div>

        {/* Featured: Paid Media */}
        <div style={{
          background: '#fff', border: `1.5px solid ${INT.orange}`,
          borderRadius: 22, padding: '32px 36px', marginBottom: 16,
          boxShadow: `0 0 0 4px rgba(241,169,47,0.1)`,
          position: 'relative', overflow: 'hidden',
        }}>
          <Droplets style={{ right: -20, top: -10 }} color={INT.yellow} opacity={0.3} size={160} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center', position: 'relative' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: INT.bg, color: INT.orange,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name="megaphone" size={24} />
                </div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10.5,
                    padding: '2px 8px', borderRadius: 6, background: INT.bg, color: INT.dark,
                    display: 'inline-block', marginBottom: 4,
                  }}>Servicio principal</div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 22, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg1)',
                  }}>Paid Media</h3>
                </div>
              </div>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
                Gestión y optimización de campañas pagadas con estrategia de audiencias,
                creatividades, pruebas A/B y optimización de presupuesto semana a semana.
              </p>
            </div>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 12,
              }}>Plataformas activas</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {platforms.map(p => (
                  <div key={p.label} style={{
                    padding: '7px 14px', borderRadius: 999,
                    background: p.bg, color: p.color,
                    fontSize: 12.5, fontWeight: 700, letterSpacing: '0.01em',
                  }}>{p.label}</div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 4-card grid */}
        <div className="int-services-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14,
        }}>
          {services.map(s => (
            <div key={s.title} style={{
              background: '#fff', borderRadius: 20, padding: '26px 28px',
              border: '1px solid var(--border)',
              transition: 'all var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = INT.orange;
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'var(--border)';
                e.currentTarget.style.boxShadow = '';
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 12,
                  background: INT.bg, color: INT.orange,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={s.icon} size={20} />
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10.5,
                  padding: '2px 8px', borderRadius: 6,
                  background: 'var(--ink-50)', color: 'var(--fg3)',
                }}>{s.tag}</div>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontWeight: 700,
                fontSize: 18, letterSpacing: '-0.02em', margin: '0 0 10px', color: 'var(--fg1)',
              }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </Container>

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

Object.assign(window, { IntHero, IntProblem, IntServices });