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

const ST = {
  green:  '#38C28C',
  lime:   '#6DD442',
  bg:     '#E9F8EE',
  bgMid:  '#C8EDD8',
  dark:   '#1A5C40',
};

// ============================================================
// DIFERENCIADORES
// ============================================================
function StartDiff() {
  const diffs = [
    {
      icon: 'users', tag: 'Expertise',
      title: 'Especialistas, no generalistas',
      body: 'Tu consultor tiene experiencia en tu industria o en empresas del mismo tamaño. No llega a aprender contigo — llega con contexto.',
    },
    {
      icon: 'rocket', tag: 'Ecosistema',
      title: 'Estrategia + implementación',
      body: 'Si necesitas ejecutar algo de lo que construimos — una campaña, una landing page, un proceso de lead gen — el mismo ecosistema FRSKO lo opera. No tienes que salir a buscar otro proveedor.',
    },
    {
      icon: 'sparkles', tag: 'Velocidad',
      title: 'IA integrada',
      body: 'Usamos inteligencia artificial para acelerar el diagnóstico, analizar a tu competencia, identificar oportunidades y construir variantes de posicionamiento. Lo que antes tomaba semanas, hoy lo tenemos en días.',
    },
    {
      icon: 'target', tag: 'Transparencia',
      title: 'Sin bullshit',
      body: 'Si tu pregunta tiene una respuesta directa, te la damos. Si algo no va a funcionar, te lo decimos antes de que lo pagues. La consultoría honesta ahorra más dinero que la que solo confirma lo que el cliente quiere escuchar.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ left: -80, top: 80 }} color={ST.lime} opacity={0.16} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div className="start-diff-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 72, alignItems: 'start',
        }}>
          {/* Sticky left label */}
          <div style={{ position: 'sticky', top: '100px' }}>
            <Eyebrow>Por qué FRSKO Start</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 'clamp(26px, 3.4vw, 44px)',
              lineHeight: 1.06, letterSpacing: '-0.03em',
              margin: '14px 0 22px',
            }}>
              No es una consultoría<br/>de PowerPoints.
            </h2>
            <p style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 20, color: ST.green, lineHeight: 1.3,
              letterSpacing: '-0.01em', margin: 0,
            }}>
              Es trabajo real<br/>semana a semana.
            </p>
          </div>

          {/* Right — diff cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {diffs.map((d, i) => (
              <div key={d.title} style={{
                background: '#fff', borderRadius: 22, padding: '26px 30px',
                border: '1px solid var(--border)',
                display: 'flex', gap: 22, alignItems: 'flex-start',
                transition: 'all var(--dur-base) var(--ease-out)',
              }}
                onMouseEnter={e => {
                  e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                  e.currentTarget.style.borderColor = ST.green;
                  e.currentTarget.style.transform = 'translateX(4px)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.boxShadow = '';
                  e.currentTarget.style.borderColor = 'var(--border)';
                  e.currentTarget.style.transform = '';
                }}>
                <div style={{
                  width: 50, height: 50, borderRadius: 15, flexShrink: 0,
                  background: ST.bg, color: ST.green,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={d.icon} size={23} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                    marginBottom: 9,
                  }}>
                    <h3 style={{
                      fontFamily: 'var(--font-display)', fontWeight: 700,
                      fontSize: 19, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg1)',
                    }}>{d.title}</h3>
                    <div style={{
                      fontFamily: 'var(--font-mono)', fontSize: 10.5,
                      padding: '3px 9px', borderRadius: 6,
                      background: ST.bg, color: ST.dark, marginLeft: 12, flexShrink: 0,
                    }}>{d.tag}</div>
                  </div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
                    {d.body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 900px) {
          .start-diff-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .start-diff-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// CLIENTS
// ============================================================
function StartClients() {
  return (
    <section style={{
      background: '#fff',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
    }}>
      <Container style={{ padding: '56px 32px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 48, flexWrap: 'wrap',
        }}>
          <div style={{ flexShrink: 0 }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 700,
              fontSize: 52, letterSpacing: '-0.04em', color: ST.green, lineHeight: 1,
            }}>+30</div>
            <div style={{ fontSize: 14, color: 'var(--fg2)', marginTop: 4, maxWidth: 180 }}>
              Marcas acompañadas desde el arranque o reinicio en México
            </div>
          </div>
          <div style={{ width: 1, height: 64, background: 'var(--border)', flexShrink: 0 }} />
          <p style={{
            fontSize: 16, lineHeight: 1.65, color: 'var(--fg2)',
            maxWidth: 620, margin: 0, fontStyle: 'italic',
          }}>
            "Hemos acompañado el arranque y reinicio de más de treinta marcas en México — desde
            startups en etapa temprana hasta divisiones de negocio de empresas establecidas que
            querían reposicionarse."
          </p>
        </div>
      </Container>
    </section>
  );
}

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

  const faqs = [
    {
      q: '¿Cuánto dura el contrato mínimo?',
      a: 'El proceso de diagnóstico + estrategia es un proyecto de 4 semanas. El acompañamiento posterior se contrata mes a mes — sin contratos de permanencia. Si no te aporta, lo detienes.',
    },
    {
      q: '¿La consultoría es presencial o en línea?',
      a: 'Ambas opciones disponibles. Las sesiones semanales son por videollamada. Si estás en CDMX, la sesión de kick-off puede ser presencial si lo prefieres.',
    },
    {
      q: '¿Trabajan con empresas fuera de CDMX?',
      a: 'Sí. Tenemos clientes en Guadalajara, Monterrey, Querétaro, Mérida y en otras ciudades de LATAM. El formato en línea funciona igual de bien.',
    },
    {
      q: '¿Qué pasa si ya tengo una agencia o equipo de marketing interno?',
      a: 'FRSKO Start funciona como capa estratégica sobre tu equipo existente o tu agencia actual. Le damos dirección a quien ejecuta, sin remplazarlo.',
    },
    {
      q: '¿Pueden manejar toda mi estrategia de marketing o solo una parte?',
      a: 'Podemos hacer el diagnóstico y plan completo de marketing, o enfocarnos en un área específica — posicionamiento, adquisición, retención, producto. Lo definimos en la sesión de diagnóstico inicial.',
    },
  ];

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div className="start-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 ? ST.green : 'var(--border)'}`,
                  background: isOpen ? ST.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: '20px 24px',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      cursor: 'pointer', textAlign: 'left', gap: 16,
                    }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontWeight: 600,
                      fontSize: 16, letterSpacing: '-0.01em',
                      color: isOpen ? ST.dark : 'var(--fg1)',
                    }}>{faq.q}</span>
                    <div style={{
                      width: 28, height: 28, borderRadius: 999, flexShrink: 0,
                      background: isOpen ? ST.green : 'var(--ink-100)',
                      color: isOpen ? '#fff' : 'var(--fg3)',
                      display: 'grid', placeItems: 'center',
                      transition: 'all var(--dur-base) var(--ease-out)',
                      transform: isOpen ? 'rotate(45deg)' : 'none',
                    }}>
                      <Icon name="arrow-right" size={13} style={{ transform: 'rotate(-45deg)' }} />
                    </div>
                  </button>
                  {isOpen && (
                    <div style={{ padding: '0 24px 20px' }}>
                      <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) {
          .start-faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================
function StartCta({ onCta }) {
  const stats = [
    { n: '4 semanas', l: 'Diagnóstico + estrategia' },
    { n: 'Mes a mes', l: 'Sin contrato de permanencia' },
    { n: '1:1', l: 'Estratega dedicado a tu cuenta' },
  ];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #1A5C40 0%, #1C484C 100%)',
    }}>
      <Droplets style={{ right: -60, top: -40 }}   color="rgba(109,212,66,0.22)"  opacity={1} size={280} />
      <Droplets style={{ left: -80, bottom: -60 }} color="rgba(56,194,140,0.18)"  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: 800, margin: '0 auto', textAlign: 'center' }}>
          {/* Badge */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 16px', borderRadius: 999,
            background: 'rgba(56,194,140,0.2)',
            border: '1px solid rgba(56,194,140,0.35)',
            fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
            textTransform: 'uppercase', color: ST.green, marginBottom: 28,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: ST.green }} />
            Sin costo · Sin compromiso
          </div>

          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(32px, 5vw, 62px)',
            lineHeight: 1.03, letterSpacing: '-0.035em',
            color: '#fff', margin: '0 0 22px',
          }}>
            La primera sesión es<br/>
            <span style={{
              background: `linear-gradient(135deg, ${ST.green} 0%, ${ST.lime} 100%)`,
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>de diagnóstico, sin costo.</span>
          </h2>

          <p style={{
            fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.65,
            color: 'rgba(255,255,255,0.72)',
            margin: '0 auto 40px', maxWidth: 580,
          }}>
            Agendamos 45 minutos para entender tu situación actual, tus objetivos y si FRSKO Start
            tiene sentido para tu empresa en este momento. Si no es el momento correcto,
            te lo decimos directamente.
          </p>

          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
              Agendar sesión de diagnóstico
            </Button>
            <a href="/servicios" 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 otros servicios FRSKO
              <Icon name="arrow-right" size={16} />
            </a>
          </div>

          {/* Stats strip */}
          <div style={{
            marginTop: 56, display: 'flex', justifyContent: 'center',
            gap: 0, flexWrap: 'wrap',
            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 36px', textAlign: 'center',
                borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                flex: '1 1 160px',
              }}>
                <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: 13, color: 'rgba(255,255,255,0.5)' }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { StartDiff, StartClients, StartFaq, StartCta });