// Plan Pionero — exclusive launch offer for the first 100 agencies.
// Lives between "Resultados reales" (testimonials) and "Construido contigo" (built).

const PlanPionero = () => {
  const pioneroCtx = (typeof useCountry === 'function') ? useCountry() : null;
  const pioneroPreciosHref = `/${(pioneroCtx && pioneroCtx.country) || 'co'}/precios/`;
  const benefits = [
    {
      i: 'shield',
      title: 'Precio bloqueado de por vida',
      desc: 'Tu suscripción nunca sube, mientras seas cliente.',
    },
    {
      i: 'home',
      title: 'Más propiedades en Ogarom',
      desc: 'Propiedades adicionales en el portal Ogarom sin costo extra.',
    },
    {
      i: 'chat',
      title: 'Voz directa en el roadmap',
      desc: "Acceso prioritario al canal 'Sugerir funcionalidad' con respuesta garantizada.",
    },
    {
      i: 'star',
      title: 'Soporte prioritario',
      desc: 'Línea directa con el equipo, sin colas.',
    },
    {
      i: 'sparkle',
      title: 'Acceso anticipado a nuevas funciones',
      desc: 'Pruebas las features antes que el resto del mercado.',
    },
  ];

  const taken = 53;
  const total = 100;
  const remaining = total - taken;
  const progress = (taken / total) * 100;

  // Inline gradient underline (same technique as ResultsSection)
  const Underline = ({ children, nowrap = true }) => (
    <span style={{
      backgroundImage: 'linear-gradient(90deg, #54B5E3, #C69CFF)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% 1.5px',
      backgroundPosition: '0 100%',
      paddingBottom: 3,
      whiteSpace: nowrap ? 'nowrap' : 'normal',
    }}>{children}</span>
  );

  return (
    <section>
      <div className="container">
        <div
          className="reveal pionero-card"
          style={{
            position: 'relative',
            maxWidth: 880,
            margin: '0 auto',
            padding: '64px 56px',
            borderRadius: 28,
            border: '1px solid var(--border)',
            background:
              'linear-gradient(180deg, rgba(84, 181, 227, 0.05) 0%, rgba(198, 156, 255, 0.04) 50%, rgba(255, 255, 255, 0.6) 100%), #fff',
            boxShadow: '0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px -16px rgba(84, 181, 227, 0.18)',
            overflow: 'hidden',
          }}
        >
          {/* Subtle decorative gradient halo */}
          <div aria-hidden="true" style={{
            position: 'absolute',
            top: -120, right: -120,
            width: 360, height: 360,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(198, 156, 255, 0.18), transparent 70%)',
            pointerEvents: 'none',
            filter: 'blur(20px)',
          }} />
          <div aria-hidden="true" style={{
            position: 'absolute',
            bottom: -140, left: -100,
            width: 320, height: 320,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(84, 181, 227, 0.14), transparent 70%)',
            pointerEvents: 'none',
            filter: 'blur(20px)',
          }} />

          <div style={{ position: 'relative' }}>
            {/* Eyebrow + Title + Subtitle */}
            <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 48px' }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>
                <span className="eyebrow-dot" />Plan Pionero
              </div>
              <h2 style={{
                fontSize: 'clamp(26px, 3.2vw, 36px)',
                fontWeight: 600,
                letterSpacing: '-0.02em',
                lineHeight: 1.15,
                marginBottom: 16,
                textWrap: 'balance',
              }}>
                Las primeras <span className="grad-text">100 agencias</span>.{' '}
                <Underline nowrap={false}>Beneficios para siempre.</Underline>
              </h2>
              <p style={{
                fontSize: 15.5,
                color: 'var(--fg-soft)',
                lineHeight: 1.6,
                textWrap: 'pretty',
                maxWidth: 580,
                margin: '0 auto',
              }}>
                Estamos en lanzamiento. Las primeras 100 agencias acceden a beneficios exclusivos que no se repetirán.
              </p>
            </div>

            {/* Benefits list */}
            <div style={{ maxWidth: 640, margin: '0 auto 48px' }}>
              {benefits.map((b, idx) => (
                <div
                  key={idx}
                  className="pionero-benefit"
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '40px 1fr',
                    gap: 18,
                    alignItems: 'flex-start',
                    padding: '18px 0',
                    borderTop: idx === 0 ? 'none' : '1px solid var(--border-soft)',
                  }}
                >
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: 'var(--grad-soft)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <Icon name={b.i} size={18} color="#54B5E3" />
                  </div>
                  <div>
                    <div style={{
                      fontSize: 15.5,
                      fontWeight: 600,
                      color: 'var(--fg)',
                      letterSpacing: '-0.005em',
                      marginBottom: 4,
                    }}>
                      {b.title}
                    </div>
                    <div style={{
                      fontSize: 14,
                      color: 'var(--fg-soft)',
                      lineHeight: 1.55,
                      textWrap: 'pretty',
                    }}>
                      {b.desc}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Urgency counter */}
            <div style={{
              maxWidth: 460,
              margin: '0 auto 36px',
              textAlign: 'center',
            }}>
              <div style={{
                fontSize: 13.5,
                color: 'var(--fg-soft)',
                marginBottom: 12,
                fontWeight: 500,
                letterSpacing: '-0.005em',
              }}>
                Quedan <span className="grad-text" style={{ fontWeight: 700 }}>{remaining} lugares</span> de {total}
              </div>
              <div
                role="progressbar"
                aria-valuenow={taken}
                aria-valuemin={0}
                aria-valuemax={total}
                style={{
                  position: 'relative',
                  height: 8,
                  width: '100%',
                  borderRadius: 999,
                  background: '#eef0f3',
                  overflow: 'hidden',
                }}
              >
                <div style={{
                  position: 'absolute',
                  top: 0, left: 0, bottom: 0,
                  width: `${progress}%`,
                  borderRadius: 999,
                  background: 'linear-gradient(90deg, #54B5E3, #C69CFF)',
                  boxShadow: '0 0 12px rgba(198, 156, 255, 0.35)',
                  animation: 'pionero-pulse 3s ease-in-out infinite',
                }} />
              </div>
            </div>

            {/* CTA */}
            <div style={{ textAlign: 'center' }}>
              <a
                href={pioneroPreciosHref}
                className="btn btn-grad pionero-cta"
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 8,
                  padding: '14px 28px',
                  fontSize: 15,
                  fontWeight: 600,
                  borderRadius: 999,
                  textDecoration: 'none',
                }}
              >
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  Asegura tu lugar
                  <Icon name="arrow" size={15} color="#fff" />
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pionero-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.85; }
        }
        @media (max-width: 720px) {
          .pionero-card {
            padding: 44px 24px !important;
            border-radius: 22px !important;
          }
          .pionero-benefit {
            grid-template-columns: 36px 1fr !important;
            gap: 14px !important;
          }
          .pionero-cta {
            width: 100%;
            justify-content: center;
          }
        }
      `}</style>
    </section>
  );
};

window.PlanPionero = PlanPionero;