// Section 14: Pricing + Section 15: FAQ

const PricingSection = ({ pricingVariant = 'a', hideHeader = false }) => {
  const [annual, setAnnual] = React.useState(true);

  const card = (plan, price, users, addUser, opts, highlighted) => (
    <div style={{
      padding: 32, borderRadius: 20, background: '#fff',
      border: highlighted ? '2px solid transparent' : '1px solid var(--border)',
      backgroundImage: highlighted ? 'linear-gradient(#fff, #fff), var(--grad)' : 'none',
      backgroundOrigin: 'border-box', backgroundClip: highlighted ? 'padding-box, border-box' : 'border-box',
      position: 'relative',
      boxShadow: highlighted ? '0 16px 48px -16px rgba(84,181,227,0.3)' : 'var(--shadow-sm)',
    }}>
      {highlighted && (
        <div style={{ position: 'absolute', top: -12, left: 32, padding: '4px 12px', borderRadius: 999, background: 'var(--grad)', color: '#fff', fontSize: 11, fontWeight: 600, letterSpacing: '0.05em' }}>
          AHORRA 15%
        </div>
      )}
      <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-muted)', marginBottom: 4 }}>{plan}</div>
      <div style={{ fontSize: 13, color: 'var(--fg-faint)', marginBottom: 24 }}>
        {highlighted ? 'Para agencias que van en serio' : 'Para empezar sin compromiso largo'}
      </div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
        <div style={{ fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em' }}>${price}</div>
        <div style={{ color: 'var(--fg-muted)', fontSize: 16 }}>USD / mes</div>
      </div>
      {highlighted && (
        <div className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 24 }}>
          facturado anualmente · ${price * 12} USD/año
        </div>
      )}
      {!highlighted && <div style={{ marginBottom: 24, height: 14 }} />}

      <button className={highlighted ? 'btn btn-grad' : 'btn btn-primary'} style={{ width: '100%', marginBottom: 28 }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          Empezar con plan {highlighted ? 'anual' : 'mensual'}<Icon name="arrow" size={14} />
        </span>
      </button>

      <div style={{ height: 1, background: 'var(--border-soft)', marginBottom: 20 }} />

      <ul style={{ listStyle: 'none' }}>
        {[
          `${users} usuarios incluidos`,
          `+$${addUser} USD por usuario adicional`,
          'Todo incluido (CRM, sitio web, IA, bolsa, automatizaciones)',
          ...opts,
        ].map((b, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '8px 0', fontSize: 14, color: 'var(--fg-soft)' }}>
            <Icon name="check" size={15} color={highlighted ? '#54B5E3' : '#16a34a'} />
            {b}
          </li>
        ))}
      </ul>
    </div>
  );

  return (
    <section id="precios">
      <div className="container">
        {!hideHeader && (
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />Precios</div>
            <h2 className="h2" style={{ marginBottom: 16, textWrap: 'balance' }}>
              Precios honestos. <span className="serif" style={{fontStyle:'italic'}}>Sin sorpresas.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--fg-soft)', textWrap: 'pretty' }}>
              Una sola suscripción que incluye CRM, sitio web, bolsa, IA y todo lo demás. Sin add-ons obligatorios. Sin trampas.
            </p>
          </div>
        )}

        {/* Toggle */}
        <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <div style={{ display: 'inline-flex', padding: 4, borderRadius: 999, background: 'var(--bg-soft)', border: '1px solid var(--border)' }}>
            <button onClick={() => setAnnual(false)} style={{
              padding: '8px 20px', fontSize: 14, fontWeight: 500, borderRadius: 999,
              background: !annual ? '#fff' : 'transparent',
              color: !annual ? 'var(--fg)' : 'var(--fg-muted)',
              boxShadow: !annual ? 'var(--shadow-sm)' : 'none',
            }}>Mensual</button>
            <button onClick={() => setAnnual(true)} style={{
              padding: '8px 20px', fontSize: 14, fontWeight: 500, borderRadius: 999,
              background: annual ? '#fff' : 'transparent',
              color: annual ? 'var(--fg)' : 'var(--fg-muted)',
              boxShadow: annual ? 'var(--shadow-sm)' : 'none',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>Anual <span style={{ fontSize: 10, padding: '2px 6px', borderRadius: 4, background: 'var(--grad)', color: '#fff' }}>-15%</span></button>
          </div>
        </div>

        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, maxWidth: 880, margin: '0 auto' }}>
          {card('Mensual', 59, 2, 9, ['Cancela cuando quieras'], false)}
          {card('Anual', 49, 4, 7, ['Migración prioritaria', 'Soporte prioritario'], true)}
        </div>

        <div className="reveal" style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="#" style={{ fontSize: 14, color: 'var(--fg-muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Ver precios completos y plan Ogarom <Icon name="arrow" size={14} />
          </a>
        </div>
      </div>
    </section>
  );
};

const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const vocab = (ctx && ctx.vocab) || (window.CO_LOCALE && window.CO_LOCALE.vocab) || { agent: 'agente' };
  const portals = (ctx && ctx.portals && ctx.portals.length)
    ? ctx.portals.join(', ')
    : 'Finca Raíz, Metrocuadrado, Properati, Mercado Libre, Lamudi';
  const faqs = [
    { q: '¿Cuánto tiempo toma migrar desde EasyBroker, Wasi o Tokko?', a: 'Menos de 5 minutos. Conectas tu cuenta de tu CRM actual, eliges las propiedades que quieres importar, y todo se sincroniza automáticamente — fotos, descripciones, prospectos, historial.' },
    { q: '¿Necesito conocimientos técnicos para usar la plataforma?', a: 'Cero. Si sabes usar WhatsApp e Instagram, sabes usar CloserBroker. La plataforma es intuitiva, el sitio web se edita visualmente sin tocar código, y si tienes dudas, nuestro equipo te acompaña.' },
    { q: '¿El sitio web está incluido en el precio?', a: 'Sí, completamente. Hosting, dominio (puedes conectar el tuyo o usar uno gratuito), templates premium optimizados para conversión, SEO, blog con IA — todo dentro de tu suscripción. Sin costos adicionales.' },
    { q: '¿Puedo pagar mensualmente o tengo que pagar el año completo?', a: 'Tú eliges. Puedes pagar mes a mes ($59 USD/mes) o anualmente con un 15% de descuento ($49 USD/mes facturados anualmente). Sin contratos largos, sin permanencia mínima — puedes cambiar de plan o cancelar cuando quieras.' },
    { q: '¿Puedo agregar o quitar usuarios fácilmente?', a: `Cuando quieras. Agregar un nuevo ${vocab.agent} toma 30 segundos: invitas su email, listo. Si alguien se va del equipo, lo eliminas igual de rápido. Cada usuario adicional cuesta $9 USD/mes (mensual) o $7 USD/mes (anual). Sin contratos largos, sin permanencia mínima.` },
    { q: '¿Cómo es el soporte?', a: 'Disponible 24/7, los 365 días del año. Nos contactas por WhatsApp, email o chat directamente desde la plataforma — sin esperas, sin tickets que tardan días.' },
    { q: '¿La IA es realmente útil o es solo marketing?', a: 'Útil, en serio. La IA de CloserBroker te ahorra horas cada semana: redacta descripciones de propiedades en segundos, escribe artículos de blog completos para tu SEO, sugiere respuestas personalizadas para cada prospecto, detecta intención de compra en mensajes y formularios. Está adaptada al vocabulario de cada región LATAM (México, Colombia, Argentina, Chile, Perú) — no es una IA gringa traducida.' },
    { q: '¿Funciona con todos los portales inmobiliarios de LATAM?', a: `Sí, con todos. ${portals} y todos los demás portales de la región. Publicas una propiedad una sola vez en CloserBroker y aparece automáticamente en todos los portales que elijas — sin duplicar trabajo.` },
    { q: '¿Qué es Ogarom y cómo funciona con CloserBroker?', a: 'Ogarom es nuestro portal inmobiliario propio, incluido en tu suscripción CloserBroker. Publicas tus propiedades en un click desde la plataforma, los compradores las encuentran con búsqueda inteligente por IA, y los leads que generan llegan automáticamente a tu CRM. Tu plan incluye 10 propiedades activas en Ogarom — los del Plan Pionero tienen 30.' },
    { q: '¿Por qué solo 100 agencias en el Plan Pionero?', a: 'Porque queremos construir CloserBroker junto a las primeras agencias que crean en el proyecto. 100 es el número que nos permite escuchar a cada una, integrar sus ideas en el roadmap, y darles soporte personalizado. Cuando se llenen los 100 lugares, el Plan Pionero se cierra para siempre — los beneficios solo están disponibles para esas 100 agencias fundadoras, sin excepción.' },
    { q: '¿Cómo proteges mis datos y los de mis clientes?', a: 'Con los más altos estándares de seguridad. Toda la información viaja encriptada (HTTPS/TLS), se almacena en servidores seguros con copias de seguridad automáticas diarias, y solo los miembros de tu equipo con permisos pueden acceder a tus datos. Cumplimos con las normativas de protección de datos de México, Colombia y otros países de LATAM.' },
    { q: '¿Qué pasa con mis datos si decido cancelar?', a: 'Son tuyos, sin condiciones. Puedes exportar todo en cualquier momento — propiedades, prospectos, historial de conversaciones — en formatos estándar (CSV, Excel). No hay penalización por cancelar, no hay datos retenidos. Tu información siempre es tuya.' },
  ];
  return (
    <section style={{ background: 'var(--bg-soft)' }}>
      <div className="container-narrow">
        <div style={{ textAlign: 'center', marginBottom: 48 }} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="eyebrow-dot" />FAQ</div>
          <h2 className="h2" style={{ textWrap: 'balance' }}>Lo que más nos preguntan.</h2>
        </div>
        <div className="reveal" style={{ background: '#fff', borderRadius: 16, border: '1px solid var(--border)', overflow: 'hidden' }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: i === faqs.length - 1 ? 'none' : '1px solid var(--border-soft)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                textAlign: 'left', gap: 16,
              }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>{f.q}</span>
                <div style={{
                  width: 28, height: 28, borderRadius: '50%', background: open === i ? 'var(--grad)' : 'var(--bg-soft)',
                  color: open === i ? '#fff' : 'var(--fg)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'all 0.3s',
                }}>
                  <Icon name="plus" size={14} />
                </div>
              </button>
              <div style={{
                maxHeight: open === i ? 600 : 0, overflow: 'hidden', transition: 'max-height 0.4s ease',
              }}>
                <div style={{ padding: '0 24px 20px', fontSize: 15, color: 'var(--fg-soft)', lineHeight: 1.6, textWrap: 'pretty' }}>
                  {f.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.PricingSection = PricingSection;
window.FAQSection = FAQSection;