// Pain/problem section + 5 pasos proceso
const { useRef: useRefP } = React;

function PainSection() {
  const pains = [
    { text: 'Tienes dinero parado en la cuenta perdiendo valor por la inflación' },
    { text: 'No sabes si tus fondos del banco son realmente buenos o caros' },
    { text: 'Te han ofrecido productos que no entiendes (y firmaste igualmente)' },
    { text: 'Quieres invertir pero no sabes por dónde empezar ni cuánto' },
    { text: 'No tienes claro cuándo podrás jubilarte ni con cuánto' },
  ];

  return (
    <section id="servicio" className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(40px, 6vw, 96px)',
          alignItems: 'center',
        }} className="pain-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>El problema</div>
            <h2 className="section-title" style={{ textAlign: 'left' }}>
              En finanzas, la trampa<br />
              está <em>en la comodidad.</em>
            </h2>
            <p style={{
              fontSize: 18,
              lineHeight: 1.55,
              color: 'var(--ink-600)',
              marginBottom: 32,
              maxWidth: 500,
            }}>
              Dejar tu dinero donde siempre ha estado es fácil. Pero cada año que pasa sin un plan, tu patrimonio pierde poder adquisitivo y oportunidad.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {pains.map((p, i) => (
                <li key={i} className={`reveal reveal-delay-${Math.min(i + 1, 5)}`} style={{
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: 12,
                  fontSize: 15.5,
                  color: 'var(--ink-800)',
                  lineHeight: 1.45,
                }}>
                  <span style={{
                    width: 22,
                    height: 22,
                    borderRadius: '50%',
                    background: 'var(--red-50)',
                    display: 'grid',
                    placeItems: 'center',
                    flexShrink: 0,
                    marginTop: 1,
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                      <path d="M2 2l6 6M8 2l-6 6" stroke="var(--red-600)" strokeWidth="1.8" strokeLinecap="round" />
                    </svg>
                  </span>
                  <span>{p.text}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right-side visual: stacked "costo del tiempo" card */}
          <div className="reveal reveal-delay-2">
            <CostOfWaiting />
          </div>
        </div>
      </div>

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

function CostOfWaiting() {
  const ref = useRefP(null);
  const [play, setPlay] = React.useState(false);

  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setPlay(true); });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  // Simulating 10k EUR over 25 years
  // Without plan (parked): 10,000 → ~13,500 (inflation adjusted, minimal growth ~1.2%)
  // With plan (6% real): 10,000 → ~42,919
  return (
    <div ref={ref} style={{
      background: 'var(--ink-950)',
      borderRadius: 24,
      padding: 32,
      color: 'white',
      position: 'relative',
      overflow: 'hidden',
      boxShadow: '0 30px 60px -20px rgba(10, 14, 26, 0.4)',
    }}>
      {/* Grid overlay */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'linear-gradient(var(--ink-800) 1px, transparent 1px), linear-gradient(90deg, var(--ink-800) 1px, transparent 1px)',
        backgroundSize: '40px 40px',
        opacity: 0.3,
        maskImage: 'radial-gradient(80% 80% at 50% 50%, black, transparent)',
        WebkitMaskImage: 'radial-gradient(80% 80% at 50% 50%, black, transparent)',
      }} />

      <div style={{ position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: 'var(--primary-300)',
          marginBottom: 20,
        }}>
          Simulación · 10.000 € durante 25 años
        </div>

        {/* Bar: parked */}
        <div style={{ marginBottom: 28 }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            marginBottom: 10,
          }}>
            <div style={{ fontSize: 14, color: 'var(--ink-300)' }}>Parado en la cuenta</div>
            <div style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 22,
              fontWeight: 500,
              letterSpacing: '-0.02em',
              color: 'var(--ink-300)',
            }}>
              <AnimatedNumber to={13580} trigger={play} suffix=" €" />
            </div>
          </div>
          <div style={{ height: 10, background: 'rgba(255,255,255,0.08)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{
              height: '100%',
              width: play ? '31%' : '0%',
              background: 'var(--ink-500)',
              borderRadius: 999,
              transition: 'width 1.4s cubic-bezier(0.25, 0.1, 0.25, 1)',
            }} />
          </div>
        </div>

        {/* Bar: with plan */}
        <div style={{ marginBottom: 36 }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            marginBottom: 10,
          }}>
            <div style={{ fontSize: 14, color: 'white', fontWeight: 500 }}>Con un plan</div>
            <div style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 30,
              fontWeight: 500,
              letterSpacing: '-0.02em',
              color: 'white',
            }}>
              <AnimatedNumber to={42919} trigger={play} suffix=" €" />
            </div>
          </div>
          <div style={{ height: 10, background: 'rgba(255,255,255,0.08)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{
              height: '100%',
              width: play ? '100%' : '0%',
              background: 'linear-gradient(90deg, var(--primary-400), var(--primary-300))',
              borderRadius: 999,
              transition: 'width 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s',
              boxShadow: '0 0 24px rgba(96, 144, 250, 0.4)',
            }} />
          </div>
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 13, color: 'var(--ink-400)', marginBottom: 2 }}>Diferencia</div>
            <div style={{
              fontSize: 24,
              fontWeight: 500,
              color: 'var(--green-500)',
              letterSpacing: '-0.02em',
            }}>
              + <AnimatedNumber to={29339} trigger={play} suffix=" €" />
            </div>
          </div>
          <div style={{
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
            color: 'var(--ink-500)',
            textAlign: 'right',
            lineHeight: 1.4,
          }}>
            Rentabilidad real estimada<br />6% anual compuesto
          </div>
        </div>
      </div>
    </div>
  );
}

// ------ Proceso ------
function ProcessSection() {
  const steps = [
    {
      n: '01',
      title: 'Agenda una llamada gratuita',
      desc: '30 minutos con un asesor certificado. Sin compromiso, sin venta encubierta.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
          <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.6" />
          <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <circle cx="12" cy="15" r="1.2" fill="currentColor" />
        </svg>
      ),
    },
    {
      n: '02',
      title: 'Cuéntanos tu situación',
      desc: 'Ingresos, gastos, ahorros, deudas y objetivos. Todo lo que definas como importante.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
          <path d="M5 4h14v16H5z" stroke="currentColor" strokeWidth="1.6" />
          <path d="M9 9h8M9 13h8M9 17h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      ),
    },
    {
      n: '03',
      title: 'Recibes tu plan',
      desc: 'Documento claro con pasos concretos: qué cambiar, qué mantener, qué empezar.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
          <path d="M6 3h9l4 4v14H6V3z" stroke="currentColor" strokeWidth="1.6" />
          <path d="M14 3v5h5" stroke="currentColor" strokeWidth="1.6" />
          <path d="M9 13l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
    },
    {
      n: '04',
      title: 'Lo ejecutas tú (o nosotros)',
      desc: 'Te guiamos paso a paso o, si prefieres, gestionamos la implementación por ti.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
          <path d="M4 20l4-4 4 4M8 16V7m0 0l-3 3m3-3l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M20 4l-4 4-4-4m4 4v9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
    },
    {
      n: '05',
      title: 'Seguimiento continuo',
      desc: 'Revisión anual, acceso a tu asesor y ajustes cuando la vida cambia.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
          <path d="M3 12a9 9 0 019-9m9 9a9 9 0 01-9 9M3 12l3-3m-3 3l3 3M21 12l-3-3m3 3l-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
    },
  ];

  return (
    <section id="proceso" className="section" style={{ background: 'var(--ink-50)', borderTop: '1px solid var(--ink-150)', borderBottom: '1px solid var(--ink-150)' }}>
      <div className="container-wide">
        <div className="section-header reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Cómo funciona</div>
          <h2 className="section-title">
            En 5 pasos, <em>tendrás tu plan.</em>
          </h2>
          <p className="section-sub">
            Sin jerga, sin productos que colocar. Un proceso diseñado para que entiendas cada decisión.
          </p>
        </div>

        <div className="process-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 16,
          position: 'relative',
        }}>
          {/* Connecting line */}
          <div aria-hidden="true" className="process-line" style={{
            position: 'absolute',
            top: 42,
            left: '10%',
            right: '10%',
            height: 1,
            background: 'linear-gradient(90deg, var(--ink-200) 0%, var(--primary-300) 50%, var(--ink-200) 100%)',
            zIndex: 0,
          }} />

          {steps.map((s, i) => (
            <div key={s.n} className={`reveal reveal-delay-${Math.min(i + 1, 5)} process-card`} style={{
              position: 'relative',
              zIndex: 1,
              background: 'white',
              borderRadius: 16,
              padding: '28px 20px',
              border: '1px solid var(--ink-150)',
              textAlign: 'left',
              transition: 'transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                e.currentTarget.style.boxShadow = '0 16px 32px -10px rgba(17,24,39,0.12)';
                e.currentTarget.style.borderColor = 'var(--primary-200)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'none';
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.borderColor = 'var(--ink-150)';
              }}
            >
              <div style={{
                width: 44, height: 44,
                borderRadius: 12,
                background: 'var(--primary-50)',
                color: 'var(--primary-700)',
                display: 'grid',
                placeItems: 'center',
                marginBottom: 20,
              }}>
                {s.icon}
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 11,
                color: 'var(--ink-400)',
                marginBottom: 6,
                letterSpacing: '0.02em',
              }}>
                PASO {s.n}
              </div>
              <h3 style={{
                fontSize: 16.5,
                fontWeight: 500,
                letterSpacing: '-0.015em',
                color: 'var(--ink-950)',
                margin: '0 0 8px',
                lineHeight: 1.2,
              }}>
                {s.title}
              </h3>
              <p style={{
                fontSize: 13.5,
                lineHeight: 1.5,
                color: 'var(--ink-600)',
                margin: 0,
              }}>
                {s.desc}
              </p>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ textAlign: 'center', marginTop: 56 }}>
          <a href="#reservar" className="btn btn-primary btn-lg">
            Empieza tu plan
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M3 7.5h9m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .process-grid { grid-template-columns: 1fr 1fr !important; }
          .process-line { display: none; }
        }
        @media (max-width: 560px) {
          .process-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.PainSection = PainSection;
window.ProcessSection = ProcessSection;
