// Section 10: LATAM + Section 11: Comparison table

const LatamSection = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const currentCountry = (ctx && ctx.country) || 'co';
  const [active, setActive] = React.useState(currentCountry);
  const vocab = {
    mx: { agente: 'Asesor', depa: 'Departamento', habit: 'Recámara', renta: 'Renta', flag: '🇲🇽' },
    co: { agente: 'Agente', depa: 'Apartamento', habit: 'Habitación', arriendo: 'Arriendo', flag: '🇨🇴' },
  };
  const portalsList = (ctx && ctx.portals && ctx.portals.length) ? ctx.portals : ['Finca Raíz', 'Metrocuadrado', 'Properati', 'Mercado Libre', 'Lamudi'];
  const bolsaAgencies = currentCountry === 'mx'
    ? [
        { n: 'Aura · CDMX', m: '+24 propiedades' },
        { n: 'Casa Vida · MTY', m: '+18 propiedades' },
        { n: 'Hogar Premium · GDL', m: '+12 propiedades' },
      ]
    : [
        { n: 'Aura · Medellín', m: '+24 propiedades' },
        { n: 'Casa Vida · Bogotá', m: '+18 propiedades' },
        { n: 'Hogar Premium · Cali', m: '+12 propiedades' },
      ];
  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />Hecho para LATAM</div>
          <h2 className="h2" style={{ marginBottom: 16, textWrap: 'balance' }}>
            No es un software gringo traducido. <span className="serif" style={{fontStyle:'italic'}}>Es LATAM, en serio.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--fg-soft)', textWrap: 'pretty' }}>
            La mayoría de los CRMs son herramientas hechas para Estados Unidos o Europa, traducidas al español a la fuerza. CloserBroker es diferente: lo construimos pensando en cómo trabajan las agencias en México y Colombia desde el día uno.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {/* Vocab card with toggle */}
          <div className="reveal card-hover" style={{ padding: 28, borderRadius: 20, background: '#fff', border: '1px solid var(--border)' }}>
            <div style={{ fontSize: 28, marginBottom: 12 }}>🇲🇽🇨🇴</div>
            <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 8 }}>Vocabulario que sí entiendes</div>
            <p style={{ fontSize: 14, color: 'var(--fg-muted)', marginBottom: 18, lineHeight: 1.55 }}>
              La plataforma se adapta al vocabulario de tu región automáticamente.
            </p>
            <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
              {['mx', 'co'].map(k => (
                <button key={k} onClick={() => setActive(k)} style={{
                  padding: '5px 12px', fontSize: 12, borderRadius: 999,
                  background: active === k ? 'var(--fg)' : 'transparent',
                  color: active === k ? '#fff' : 'var(--fg-muted)',
                  border: active === k ? 'none' : '1px solid var(--border)',
                }}>{vocab[k].flag} {k.toUpperCase()}</button>
              ))}
            </div>
            <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-soft)' }}>
              {Object.entries(vocab[active]).filter(([k]) => k !== 'flag').map(([k, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border-soft)', fontSize: 13 }}>
                  <span style={{ color: 'var(--fg-muted)' }} className="mono">{k}</span>
                  <span style={{ fontWeight: 500 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="reveal reveal-delay-1 card-hover" style={{ padding: 28, borderRadius: 20, background: '#fff', border: '1px solid var(--border)' }}>
            <Icon name="globe" size={28} color="#54B5E3" />
            <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 8, marginTop: 12 }}>Portales locales integrados</div>
            <p style={{ fontSize: 14, color: 'var(--fg-muted)', marginBottom: 18, lineHeight: 1.55 }}>
              Publica en un click, sin duplicar fichas.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
              {portalsList.map((p, i) => (
                <div key={i} style={{ padding: '8px 10px', borderRadius: 8, background: 'var(--bg-soft)', fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#16a34a' }} />
                  {p}
                </div>
              ))}
            </div>
          </div>

          <div className="reveal reveal-delay-2 card-hover" style={{ padding: 28, borderRadius: 20, background: '#fff', border: '1px solid var(--border)' }}>
            <Icon name="users" size={28} color="#C69CFF" />
            <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 8, marginTop: 12 }}>Bolsa entre agencias</div>
            <p style={{ fontSize: 14, color: 'var(--fg-muted)', marginBottom: 18, lineHeight: 1.55 }}>
              Colabora con otras agencias de tu ciudad. Multiplica tu inventario.
            </p>
            <div style={{ padding: 14, borderRadius: 10, background: 'var(--bg-soft)', position: 'relative' }}>
              {bolsaAgencies.map((a, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border)', fontSize: 12 }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--grad)' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500 }}>{a.n}</div>
                  </div>
                  <div className="mono" style={{ color: '#16a34a', fontSize: 11 }}>{a.m}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CompareTable = () => {
  const rows = [
    ['CRM con pipeline visual', true, true, true, true],
    ['Sitio web incluido (con CRO)', 'Premium', 'Básico', 'Básico', 'Básico'],
    ['Bolsa con co-brokerage', true, true, false, 'Limitado'],
    ['IA para descripciones y blog', true, false, false, false],
    ['WhatsApp + Messenger unificados', true, 'Solo WA', false, false],
    ['Lead scoring automático', true, false, false, 'Limitado'],
    ['Atribución automática de leads', true, 'Básico', false, 'Básico'],
    ['Mis Links (estilo Linktree)', true, false, false, false],
    ['Vocabulario regional MX/CO', true, false, false, false],
    ['Sugerencias de funcionalidad', true, false, false, false],
    ['Precio inicial / mes', '$59', '$89', '$79', '$95'],
  ];

  const renderCell = (v, isUs) => {
    if (v === true) return <Icon name="check" size={18} color={isUs ? '#16a34a' : '#a3a3a3'} />;
    if (v === false) return <Icon name="x" size={18} color="#d4d4d4" />;
    if (typeof v === 'string') {
      if (v.startsWith('$')) return <span style={{ fontWeight: isUs ? 600 : 400, fontSize: isUs ? 16 : 14 }}>{v}</span>;
      return <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>⚠ {v}</span>;
    }
    return null;
  };

  return (
    <section id="comparar" style={{ background: 'var(--bg-soft)' }}>
      <div className="container-narrow">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />Comparativa honesta</div>
          <h2 className="h2" style={{ marginBottom: 16 }}>¿Cómo se compara CloserBroker?</h2>
          <p style={{ fontSize: 17, color: 'var(--fg-soft)' }}>
            Honestidad total: estos son los puntos donde creemos que somos mejores. Si un competidor hace algo mejor, también lo decimos.
          </p>
        </div>

        <div className="reveal" style={{ padding: 14, borderRadius: 12, background: 'linear-gradient(135deg, rgba(84,181,227,0.08), rgba(198,156,255,0.08))', border: '1px solid rgba(84,181,227,0.2)', marginBottom: 24, fontSize: 14, color: 'var(--fg-soft)', textAlign: 'center' }}>
          💡 <strong>Importante:</strong> ya estés en EasyBroker, Wasi o Tokko — puedes importar todo en un click gracias a nuestras integraciones nativas. Cambiar de CRM ya no toma semanas. Toma horas.
        </div>

        <div className="reveal" style={{ background: '#fff', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--border)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', background: 'var(--bg-soft)', borderBottom: '1px solid var(--border)' }}>
            <div style={{ padding: 16, fontSize: 12, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }} className="mono">Funcionalidad</div>
            {['CloserBroker', 'EasyBroker', 'Wasi', 'Tokko'].map((c, i) => (
              <div key={i} style={{
                padding: 16, textAlign: 'center', fontSize: 14, fontWeight: 600,
                background: i === 0 ? 'var(--grad)' : 'transparent',
                color: i === 0 ? '#fff' : 'var(--fg)',
                position: 'relative',
              }}>
                {c}
                {i === 0 && <div style={{ fontSize: 10, fontWeight: 400, opacity: 0.9, marginTop: 2 }}>Recomendado</div>}
              </div>
            ))}
          </div>
          {rows.map((row, ri) => (
            <div key={ri} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', borderBottom: ri === rows.length - 1 ? 'none' : '1px solid var(--border-soft)' }}>
              <div style={{ padding: 14, fontSize: 14, fontWeight: 500 }}>{row[0]}</div>
              {row.slice(1).map((v, ci) => (
                <div key={ci} style={{
                  padding: 14, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: ci === 0 ? 'rgba(84,181,227,0.04)' : 'transparent',
                }}>
                  {renderCell(v, ci === 0)}
                </div>
              ))}
            </div>
          ))}
        </div>

        <div className="reveal" style={{ textAlign: 'center', marginTop: 32 }}>
          <p style={{ fontSize: 15, color: 'var(--fg-soft)', marginBottom: 16 }}>
            ¿Vienes de EasyBroker, Wasi o Tokko? <strong>Importa todo en un click con nuestras integraciones nativas.</strong>
          </p>
          <button className="btn btn-primary btn-lg">Habla con nosotros y migra en &lt; 24h<Icon name="arrow" size={15} /></button>
        </div>
      </div>
    </section>
  );
};

window.LatamSection = LatamSection;
window.CompareTable = CompareTable;