// Benefits + Comparison toggle
const { useState: useStateC } = React;

function BenefitsSection() {
  const benefits = [
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <rect x="4" y="6" width="20" height="16" rx="3" stroke="currentColor" strokeWidth="1.6" />
          <path d="M4 11h20" stroke="currentColor" strokeWidth="1.6" />
          <rect x="8" y="15" width="5" height="2" rx="1" fill="currentColor" />
        </svg>
      ),
      title: 'Organizar tus finanzas',
      desc: 'Mapeamos tu situación completa: cuentas, deudas, ahorros e inversiones. Ves tu patrimonio en una sola pantalla.',
      stat: { value: '—', label: 'Visión 360°' },
    },
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <path d="M6 22V11M14 22V6M22 22v-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          <path d="M3 22h22" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
        </svg>
      ),
      title: 'Invertir con criterio',
      desc: 'Portafolios diversificados, con costes bajos y ajustados a tu perfil de riesgo. Nada de productos opacos.',
      stat: { value: '0,45%', label: 'comisión anual media' },
    },
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <circle cx="14" cy="14" r="10" stroke="currentColor" strokeWidth="1.6" />
          <path d="M14 8v6l4 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
      title: 'Planificar tu jubilación',
      desc: 'Calculamos cuánto necesitas, cuánto aportar y qué vehículos usar. Llegas al retiro con certeza, no con fe.',
      stat: { value: '25+', label: 'años de horizonte' },
    },
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <path d="M14 4l3 3h6v6l3 3-3 3v6h-6l-3 3-3-3H5v-6l-3-3 3-3V7h6l3-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
          <path d="M10 14l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
      title: 'Optimizar impuestos',
      desc: 'Estructura fiscal eficiente: qué declarar, qué productos usar y cuándo vender para pagar lo justo.',
      stat: { value: 'hasta 23%', label: 'ahorro fiscal' },
    },
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <path d="M14 3C8 6 4 10 4 16c0 5 4 9 10 9s10-4 10-9c0-6-4-10-10-13z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
          <path d="M10 16l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ),
      title: 'Proteger tu patrimonio',
      desc: 'Fondo de emergencia, seguros que importan y estructura para tus herederos. Dormir tranquilo tiene precio.',
      stat: { value: '6 meses', label: 'colchón recomendado' },
    },
    {
      icon: (
        <svg viewBox="0 0 28 28" fill="none" width="28" height="28">
          <circle cx="10" cy="10" r="4" stroke="currentColor" strokeWidth="1.6" />
          <circle cx="18" cy="18" r="4" stroke="currentColor" strokeWidth="1.6" />
          <path d="M10 14v4M18 14v0M14 10h4M14 18h0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      ),
      title: 'Decidir con confianza',
      desc: '¿Vender el piso? ¿Amortizar hipoteca? ¿Cambiar de trabajo? Lo modelamos contigo antes de decidir.',
      stat: { value: '1:1', label: 'acceso a tu asesor' },
    },
  ];

  return (
    <section className="section" id="beneficios">
      <div className="container-wide">
        <div className="section-header reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Te ayudamos a</div>
          <h2 className="section-title">
            Seis cosas que <em>cambian de verdad</em><br />
            cuando tienes un plan.
          </h2>
        </div>

        <div className="benefits-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1,
          background: 'var(--ink-150)',
          border: '1px solid var(--ink-150)',
          borderRadius: 20,
          overflow: 'hidden',
        }}>
          {benefits.map((b, i) => (
            <div key={i} className={`reveal reveal-delay-${Math.min((i % 3) + 1, 5)} benefit-card`} style={{
              background: 'white',
              padding: '36px 32px',
              transition: 'background 0.2s ease',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--ink-25)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'white'; }}
            >
              <div style={{
                color: 'var(--primary-600)',
                marginBottom: 22,
              }}>
                {b.icon}
              </div>
              <h3 style={{
                fontSize: 20,
                fontWeight: 500,
                letterSpacing: '-0.02em',
                margin: '0 0 10px',
                color: 'var(--ink-950)',
                lineHeight: 1.2,
              }}>
                {b.title}
              </h3>
              <p style={{
                fontSize: 14.5,
                lineHeight: 1.55,
                color: 'var(--ink-600)',
                margin: '0 0 24px',
              }}>
                {b.desc}
              </p>
              <div style={{
                display: 'flex',
                alignItems: 'baseline',
                gap: 8,
                paddingTop: 20,
                borderTop: '1px dashed var(--ink-200)',
              }}>
                <span style={{
                  fontFamily: 'var(--font-sans)',
                  fontSize: 22,
                  fontWeight: 500,
                  letterSpacing: '-0.025em',
                  color: 'var(--ink-950)',
                }}>{b.stat.value}</span>
                <span style={{
                  fontSize: 12.5,
                  color: 'var(--ink-500)',
                }}>{b.stat.label}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

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

// ======= Comparison Table (dos columnas) =======
function ComparisonSection() {
  const rows = [
    { k: 'Comisiones anuales', sub: 'lo que pagas cada año', banco: '2,30%', inv: '0,45%' },
    { k: 'Interés del comercial', sub: '¿a quién sirve quien te asesora?', banco: 'Productos propios', inv: 'Ninguno' },
    { k: 'Revisión de tu cartera', sub: 'cuándo y por qué te llaman', banco: 'Cuando hay que vender', inv: 'Semestral programada' },
    { k: 'Acceso a asesor', sub: 'quién te atiende', banco: 'El del día', inv: 'El tuyo fijo' },
    { k: 'Tu plan financiero', sub: 'la foto completa de tu dinero', banco: 'No existe', inv: 'Personalizado' },
    { k: 'Rentabilidad neta', sub: 'sobre 100.000 € en 25 años', banco: '+ 68.000 €', inv: '+ 168.000 €' },
  ];

  return (
    <section id="comparativa" className="section" style={{
      background: 'linear-gradient(180deg, white 0%, var(--ink-50) 100%)',
      position: 'relative',
    }}>
      <div className="container">
        <div className="section-header reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>La diferencia</div>
          <h2 className="section-title">
            El mismo dinero, <em>dos futuros.</em>
          </h2>
          <p className="section-sub">
            Lo que pagas, lo que recibes y lo que te llevas. Banco e Inversimply, lado a lado.
          </p>
        </div>

        <div className="reveal cmp-table" style={{
          background: 'white',
          borderRadius: 24,
          border: '1px solid var(--ink-150)',
          boxShadow: '0 30px 60px -20px rgba(17, 24, 39, 0.14)',
          overflow: 'hidden',
        }}>
          {/* Header row */}
          <div className="cmp-row cmp-head" style={{
            display: 'grid',
            gridTemplateColumns: '1.5fr 1fr 1fr',
            alignItems: 'stretch',
          }}>
            <div style={{ padding: '22px 28px', display: 'flex', alignItems: 'flex-end' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.04em', lineHeight: 1.4 }}>
                Simulación · 100.000 € · 25 años
              </span>
            </div>
            <div style={{ padding: '22px 20px', background: 'var(--red-50)', textAlign: 'center', borderLeft: '1px solid var(--ink-100)' }}>
              <div style={{ fontSize: 22, marginBottom: 4 }}>🏦</div>
              <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--red-600)', letterSpacing: '-0.02em' }}>Tu banco</div>
            </div>
            <div style={{ padding: '22px 20px', background: 'var(--primary-600)', textAlign: 'center', position: 'relative' }}>
              <div style={{
                position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
                fontSize: 9.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em',
                color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase',
              }}>Recomendado</div>
              <div style={{ fontSize: 22, marginBottom: 4 }}>✦</div>
              <div style={{ fontSize: 17, fontWeight: 600, color: 'white', letterSpacing: '-0.02em' }}>Inversimply</div>
            </div>
          </div>

          {/* Data rows */}
          {rows.map((row, i) => {
            const last = i === rows.length - 1;
            return (
              <div key={row.k} className="cmp-row" style={{
                display: 'grid',
                gridTemplateColumns: '1.5fr 1fr 1fr',
                alignItems: 'stretch',
                borderTop: '1px solid var(--ink-100)',
              }}>
                <div style={{ padding: '20px 28px' }}>
                  <div style={{ fontSize: 15.5, fontWeight: 500, color: 'var(--ink-900)', marginBottom: 3, letterSpacing: '-0.01em' }}>{row.k}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{row.sub}</div>
                </div>
                <div className="cmp-cell" style={{
                  padding: '20px', textAlign: 'center', borderLeft: '1px solid var(--ink-100)',
                  display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 6,
                  background: last ? 'var(--red-50)' : 'transparent',
                }}>
                  <span className="cmp-tag" data-col="Tu banco" style={{ fontSize: last ? 19 : 16, fontWeight: 500, color: 'var(--red-600)', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{row.banco}</span>
                </div>
                <div className="cmp-cell" style={{
                  padding: '20px', textAlign: 'center',
                  display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 6,
                  background: last ? 'var(--primary-50)' : 'var(--primary-50)',
                  borderLeft: '1px solid var(--primary-100)',
                }}>
                  <span className="cmp-tag" data-col="Inversimply" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: last ? 19 : 16, fontWeight: 600, color: 'var(--primary-700)', letterSpacing: '-0.02em', lineHeight: 1.2 }}>
                    {row.inv}
                  </span>
                </div>
              </div>
            );
          })}
        </div>

        <div className="reveal" style={{
          textAlign: 'center', marginTop: 28,
          fontSize: 13, color: 'var(--ink-500)', fontStyle: 'italic',
        }}>
          *Comisión media del mercado bancario español (estudio BBVA Research 2024) vs. comisión total Inversimply. Rentabilidad asumida 6% anual real.
        </div>
      </div>

      <style>{`
        @media (max-width: 680px) {
          .cmp-table .cmp-head > div:first-child { display: none !important; }
          .cmp-table .cmp-head { grid-template-columns: 1fr 1fr !important; }
          .cmp-row:not(.cmp-head) { grid-template-columns: 1fr 1fr !important; position: relative; }
          .cmp-row:not(.cmp-head) > div:first-child {
            grid-column: 1 / -1; padding-bottom: 6px !important;
            border-bottom: 1px dashed var(--ink-200);
          }
          .cmp-cell { align-items: center !important; }
          .cmp-cell .cmp-tag::before {
            content: attr(data-col); display: block; font-family: var(--font-mono);
            font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
            color: var(--ink-400); margin-bottom: 4px; font-weight: 500;
          }
        }
      `}</style>
    </section>
  );
}

window.BenefitsSection = BenefitsSection;
window.ComparisonSection = ComparisonSection;