// All page sections for Sumafin — modernized

/* ============================================================
   NAV
============================================================ */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <Wordmark />
        <div className="nav-links">
          <a href="#productos">Crédito</a>
          <a href="#productos">Arrendamiento</a>
          <a href="#como-funciona">Cómo funciona</a>
          <a href="#sucursales">Sucursales</a>
          <a href="#faq">Preguntas</a>
        </div>
        <div className="nav-cta">
          <a className="nav-phone" href="tel:+529511234567">
            <Icon name="phone" size={14} /> 951 123 4567
          </a>
          <a className="btn btn-primary btn-sm" href="#cotiza">
            Solicita tu cotización <Icon name="arrow-right" size={14} stroke={2} />
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   HERO
============================================================ */
function Hero() {
  return (
    <header className="hero">
      <div className="container hero-inner">
        <div className="hero-grid">
          <div>
            <span className="hero-tag">
              <span className="pulse"></span>
              Operando en Oaxaca y Puebla · CNBV regulada
            </span>
            <h1 className="h-display">
              Tu próximo auto,<br />
              <span className="txt-blue">financiado</span> a tu medida.
            </h1>
            <p className="lede">
              En Sumafin diseñamos planes de crédito y arrendamiento automotriz simples, rápidos y humanos. Aprobamos en 24 horas y te acompañamos en cada paso.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="#cotiza">
                Solicita tu cotización <Icon name="arrow-right" size={16} stroke={2} />
              </a>
              <a className="btn btn-ghost btn-lg" href="#como-funciona">
                Cómo funciona
              </a>
            </div>
            <div className="hero-trust">
              <div className="hero-trust-item">
                <span className="ico-mini"><Icon name="shield-check" size={12} stroke={2} /></span>
                CNBV · SOFOM E.N.R.
              </div>
              <div className="hero-trust-item">
                <span className="ico-mini"><Icon name="star" size={12} /></span>
                4.9 en Google
              </div>
              <div className="hero-trust-item">
                <span className="ico-mini"><Icon name="users" size={12} stroke={2} /></span>
                +8,400 clientes
              </div>
            </div>
          </div>

          <div className="hero-visual">
            <HeroValueGrid />
          </div>
        </div>
      </div>
    </header>
  );
}

function HeroValueGrid() {
  return (
    <div className="hv-grid">
      <div className="hv-cell hv-1">
        <div>
          <div className="hv-label">Tasa desde</div>
          <div className="hv-value">11.9<span style={{ fontSize: '.5em' }}>%</span></div>
        </div>
        <div className="hv-caption">Fija anual. Sin sorpresas a lo largo del plazo.</div>
        <Icon name="zap" size={28} stroke={1.5} className="hv-ico" />
      </div>
      <div className="hv-cell hv-2">
        <div>
          <div className="hv-label">Aprobación</div>
          <div className="hv-value">24h</div>
        </div>
        <div className="hv-caption">Respuesta en menos de un día hábil.</div>
        <Icon name="clock" size={28} stroke={1.5} className="hv-ico" />
      </div>
      <div className="hv-cell hv-3">
        <div>
          <div className="hv-label">Plazos</div>
          <div className="hv-value">12–60</div>
        </div>
        <div className="hv-caption">Meses flexibles para crédito y arrendamiento.</div>
        <Icon name="calendar" size={28} stroke={1.5} className="hv-ico" />
      </div>
      <div className="hv-cell hv-4">
        <div>
          <div className="hv-label">Sucursales</div>
          <div className="hv-value">02</div>
        </div>
        <div className="hv-caption">Oaxaca y Puebla, con atención local real.</div>
        <Icon name="map-pin" size={28} stroke={1.5} className="hv-ico" />
      </div>
    </div>
  );
}

/* ============================================================
   STATS STRIP
============================================================ */
function StatsStrip() {
  const stats = [
    { n: "+8,400", l: "Clientes que confían en nosotros desde 2014" },
    { n: "24", u: "hrs", l: "Aprobación promedio sin papeleo eterno" },
    { n: "4.9", u: "/5", l: "Calificación promedio en Google y Facebook" },
    { n: "100", u: "%", l: "Digital — solicita y firma desde tu celular" },
  ];

  return (
    <section className="stats-strip">
      <div className="container">
        <div className="stats-grid">
          {stats.map((s, i) => (
            <div key={i} className="stat-block">
              <div className="stat-n">{s.n}{s.u && <span className="unit">{s.u}</span>}</div>
              <div className="stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PRODUCTS — Crédito vs Arrendamiento
============================================================ */
function Products() {
  return (
    <section className="products" id="productos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Productos
            </span>
            <h2 className="h-section">Dos caminos para tener tu auto <span className="txt-blue">hoy</span>.</h2>
          </div>
          <div className="right">
            Ya sea que quieras un auto en propiedad o renovarlo cada cierto tiempo, en Sumafin tenemos un plan que se ajusta a tu vida y a tu bolsillo.
          </div>
        </div>

        <div className="products-grid">
          <article className="product-card">
            <span className="product-tag">Para personas</span>
            <span className="product-icon"><Icon name="wallet" size={26} stroke={1.6} /></span>
            <h3>Crédito automotriz</h3>
            <p className="product-meta">Compra tu auto nuevo o seminuevo. Al terminar el plazo, es 100% tuyo.</p>
            <div className="product-features">
              <FeatItem>Tasa fija desde 11.9% anual</FeatItem>
              <FeatItem>Enganche desde el 20% del valor</FeatItem>
              <FeatItem>Sin penalización por pagos anticipados</FeatItem>
              <FeatItem>Autos nuevos y seminuevos hasta 5 años</FeatItem>
            </div>
            <div className="product-stats">
              <Stat num="12–60" lbl="meses de plazo" />
              <Stat num="20%" lbl="enganche mínimo" />
              <Stat num="$1.5M" lbl="monto máximo" />
            </div>
            <div className="product-cta-row">
              <a className="btn btn-primary" href="#cotiza">Solicitar crédito <Icon name="arrow-right" size={14} stroke={2} /></a>
              <a className="btn-link" href="#requisitos">Ver requisitos</a>
            </div>
          </article>

          <article className="product-card featured">
            <span className="product-tag">Empresas y profesionistas</span>
            <span className="product-icon"><Icon name="key" size={26} stroke={1.6} /></span>
            <h3>Arrendamiento</h3>
            <p className="product-meta">Renueva tu auto cada 2–4 años, deduce el 100% de las rentas y olvídate de la depreciación.</p>
            <div className="product-features">
              <FeatItem>Deduce 100% de tus rentas mensuales</FeatItem>
              <FeatItem>Sin enganche tradicional — solo depósito inicial</FeatItem>
              <FeatItem>Mantenimiento y seguro incluidos*</FeatItem>
              <FeatItem>Cambia, renueva o compra al final del plazo</FeatItem>
            </div>
            <div className="product-stats">
              <Stat num="24–60" lbl="meses de plazo" />
              <Stat num="100%" lbl="deducible IVA/ISR" />
              <Stat num="3 días" lbl="entrega típica" />
            </div>
            <div className="product-cta-row">
              <a className="btn" href="#cotiza" style={{ background: 'var(--cyan)', color: 'var(--navy-deep)' }}>
                Solicitar arrendamiento <Icon name="arrow-right" size={14} stroke={2} />
              </a>
              <a className="btn-link" href="#" style={{ color: 'var(--cyan-light)' }}>Ver beneficios fiscales</a>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

function FeatItem({ children }) {
  return (
    <div className="product-feat-item">
      <span className="check"><Icon name="check" size={11} stroke={3} /></span>
      <span>{children}</span>
    </div>
  );
}

function Stat({ num, lbl }) {
  return (
    <div className="product-stat">
      <div className="stat-num">{num}</div>
      <div className="stat-lbl">{lbl}</div>
    </div>
  );
}

/* ============================================================
   PROCESS — How it works
============================================================ */
function Process() {
  const steps = [
    { n: "01", title: "Solicítalo", desc: "Llena el formulario o llámanos. Te contactamos en menos de 2 horas hábiles.", ico: "spark" },
    { n: "02", title: "Entrega tus datos", desc: "Proporciona tu INE, comprobantes de ingresos.", ico: "doc" },
    { n: "03", title: "Aprobamos en 24h", desc: "Evaluamos tu perfil de forma personal. Te respondemos por WhatsApp y correo.", ico: "shield-check" },
    { n: "04", title: "Recibe tu auto", desc: "Firma digital, nos encargamos de todo el papeleo y coordinamos la entrega. En pocos días ya estás manejando.", ico: "car" },
  ];

  return (
    <section className="process" id="como-funciona">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              El proceso
            </span>
            <h2 className="h-section">Cuatro pasos. <span className="txt-blue">Cero filas.</span></h2>
          </div>
          <div className="right">
            Diseñamos un proceso transparente donde tú ves todo: tasa, plazo, mensualidad y costo total desde el primer minuto.
          </div>
        </div>
        <div className="process-steps">
          {steps.map((s) => (
            <div key={s.n} className="process-step">
              <div className="step-icon"><Icon name={s.ico} size={22} stroke={1.6} /></div>
              <div className="step-n">PASO {s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BENEFITS
============================================================ */
function Benefits() {
  const items = [
    { ico: "map-pin", title: "Atención local", desc: "Asesores que conocen Oaxaca y Puebla. Te visitamos donde estés." },
    { ico: "zap", title: "Aprobación en 24 hrs", desc: "Sin esperas eternas. Respuesta clara en menos de un día hábil." },
    { ico: "wallet", title: "Planes flexibles", desc: "Tú eliges el plazo, el enganche y la mensualidad que te acomoda." },
    { ico: "spark", title: "Tasas competitivas", desc: "Desde 11.9% anual fija. Sin variaciones a lo largo del plazo." },
    { ico: "shield-check", title: "Sin penalización", desc: "Adelanta pagos o liquida cuando quieras. Sin comisiones ocultas." },
    { ico: "users", title: "Asesoría personalizada", desc: "Un asesor te acompaña — antes, durante y después." },
  ];

  return (
    <section className="benefits" id="beneficios">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Por qué Sumafin
            </span>
            <h2 className="h-section">Hecho para que digas <span className="txt-blue">que sí</span>.</h2>
          </div>
          <div className="right">
            Somos una financiera regional con la agilidad de una fintech y la cercanía de la sucursal de toda la vida.
          </div>
        </div>
        <div className="benefits-grid">
          {items.map((b) => (
            <div key={b.title} className="benefit">
              <span className="benefit-ico"><Icon name={b.ico} size={22} stroke={1.6} /></span>
              <h4>{b.title}</h4>
              <p>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   REQUISITOS
============================================================ */
function Requisitos() {
  return (
    <section className="requisitos" id="requisitos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Requisitos
            </span>
            <h2 className="h-section">Lo que necesitas para empezar.</h2>
          </div>
          <div className="right">
            Documentación mínima, todo digital. Si te falta algo, tu asesor te orienta — no te dejamos a medias.
          </div>
        </div>

        <div className="req-grid">
          <article className="req-card">
            <span className="req-meta"><Icon name="users" size={12} stroke={2} /> Persona física</span>
            <h3>Si compras para ti.</h3>
            <p className="req-sub">Personas asalariadas o con actividad empresarial.</p>
            <ul className="req-list">
              <li>Tener entre 21 y 75 años cumplidos al final del plazo.</li>
              <li>Identificación oficial vigente (INE o pasaporte).</li>
              <li>Comprobante de domicilio reciente (máx. 3 meses).</li>
              <li>Comprobantes de ingresos de los últimos 3 meses.</li>
              <li>Ingreso mínimo mensual de $12,000 MXN.</li>
              <li>Antigüedad laboral mínima de 1 año.</li>
            </ul>
          </article>

          <article className="req-card">
            <span className="req-meta"><Icon name="building" size={12} stroke={2} /> Persona moral</span>
            <h3>Si financias tu flotilla.</h3>
            <p className="req-sub">Empresas y negocios establecidos en México.</p>
            <ul className="req-list">
              <li>Acta constitutiva y poderes del representante legal.</li>
              <li>RFC, comprobante de domicilio fiscal y CSF.</li>
              <li>Estados financieros al ultimo trimestre.</li>
              <li>Declaración anual 2025.</li>
              <li>Antigüedad mínima de la empresa: 2 años.</li>
              <li>Identificación del representante legal.</li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   COTIZACIÓN — replaces simulator
============================================================ */
// ↓ Pega aquí la clave de web3forms.com (entra al sitio, escribe tu correo y cópiala)
const WEB3FORMS_KEY = '4cf70859-201d-476f-8664-f3daae927b10';

// ↓ Sitekey pública de hCaptcha (no es un secreto, puede estar en el código)
const HCAPTCHA_SITEKEY = 'c5f49a72-7a7e-4eaa-830a-cffee4848116';

function Cotizacion() {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState('');
  const [fields, setFields] = useState({ nombre: '', tel: '', email: '', producto: '', ciudad: '' });
  const [touched, setTouched] = useState({});

  // ── Protección anti-bot ──────────────────────────────────────────────
  // 1. Honeypot: campo oculto que los bots llenan pero los humanos no ven
  const [honeypot, setHoneypot] = useState('');

  // 2. Rate limit: máximo 1 envío cada 3 minutos por sesión
  const RATE_LIMIT_MS = 3 * 60 * 1000;
  const [rateLimitMsg, setRateLimitMsg] = useState(() => {
    try {
      const last = sessionStorage.getItem('sf_last_submit');
      if (!last) return '';
      const diff = Date.now() - parseInt(last, 10);
      if (diff < RATE_LIMIT_MS) {
        const mins = Math.ceil((RATE_LIMIT_MS - diff) / 60000);
        return `Solicitud recibida. Espera ${mins} min antes de enviar otra.`;
      }
    } catch {}
    return '';
  });
  // ────────────────────────────────────────────────────────────────────

  const validators = {
    nombre:   (v) => v.trim().length >= 3 ? '' : 'Escribe tu nombre completo',
    tel:      (v) => /^\d[\d\s\-]{8,}$/.test(v.trim()) ? '' : 'Teléfono inválido (mín. 10 dígitos)',
    email:    (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) ? '' : 'Correo inválido',
    producto: (v) => v ? '' : 'Selecciona un producto',
    ciudad:   (v) => v ? '' : 'Selecciona tu ciudad',
  };

  const errors = Object.fromEntries(Object.entries(fields).map(([k, v]) => [k, validators[k](v)]));
  const isValid = Object.values(errors).every((e) => e === '');

  const set = (k) => (e) => setFields((f) => ({ ...f, [k]: e.target.value }));
  const blur = (k) => () => setTouched((t) => ({ ...t, [k]: true }));

  const onSubmit = async (e) => {
    e.preventDefault();

    // ── Verificaciones anti-bot ──────────────────────────────────────
    // 1. Si el honeypot tiene contenido → es un bot; ignorar silenciosamente
    if (honeypot) return;

    // 2. Rate limit
    try {
      const last = sessionStorage.getItem('sf_last_submit');
      if (last && Date.now() - parseInt(last, 10) < RATE_LIMIT_MS) {
        const mins = Math.ceil((RATE_LIMIT_MS - (Date.now() - parseInt(last, 10))) / 60000);
        setRateLimitMsg(`Ya enviaste una solicitud. Espera ${mins} min antes de enviar otra.`);
        return;
      }
    } catch {}
    // ────────────────────────────────────────────────────────────────

    setTouched({ nombre: true, tel: true, email: true, producto: true, ciudad: true });
    if (!isValid) return;

    // 4. Verificar que el usuario completó hCaptcha
    const hcToken = window.hcaptcha?.getResponse();
    if (!hcToken) {
      setSendError('Completa la verificación de seguridad (el recuadro azul).');
      return;
    }

    setSending(true);
    setSendError('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `Nueva cotización Sumafin — ${fields.producto} · ${fields.ciudad}`,
          from_name: 'Sumafin Web',
          botcheck: false,
          'h-captcha-response': hcToken,   // 4. Token de hCaptcha para verificación
          nombre: fields.nombre,
          telefono: fields.tel,
          correo: fields.email,
          producto: fields.producto,
          ciudad: fields.ciudad,
        }),
      });
      const data = await res.json();
      if (data.success) {
        try { sessionStorage.setItem('sf_last_submit', String(Date.now())); } catch {}
        window.hcaptcha?.reset();
        setSent(true);
      } else {
        setSendError('No se pudo enviar. Intenta de nuevo o llámanos directamente.');
      }
    } catch {
      setSendError('Error de conexión. Verifica tu internet e intenta de nuevo.');
      window.hcaptcha?.reset();
    } finally {
      setSending(false);
    }
  };

  const fieldErr = (k) => touched[k] && errors[k]
    ? <span style={{ fontSize: 11, color: '#fca5a5', marginTop: 4, display: 'block' }}>{errors[k]}</span>
    : null;

  return (
    <section className="cotiza" id="cotiza">
      <div className="container">
        <div className="cotiza-inner">
          <div className="cotiza-grid">
            <div>
              <span className="eyebrow" style={{ color: 'var(--cyan-light)' }}>
                <span className="dot-grid"><span /><span /><span /><span /></span>
                Solicita tu cotización
              </span>
              <h2>Déjanos tus datos y un asesor te contacta <span style={{ color: 'var(--cyan)' }}>hoy mismo.</span></h2>
              <p className="lede">
                Sin compromiso. Sólo platicamos contigo para entender qué buscas y armarte la mejor opción.
              </p>

              <div className="channels">
                <div className="cotiza-channel" style={{ cursor: 'default', opacity: .6 }}>
                  <span className="ch-ico"><Icon name="whatsapp" size={20} /></span>
                  <div>
                    <div className="ch-label">WhatsApp · Respuesta inmediata</div>
                    <div className="ch-value" style={{ fontSize: 13, fontStyle: 'italic' }}>Próximamente</div>
                  </div>
                </div>
                <a className="cotiza-channel" href="tel:+529511234567">
                  <span className="ch-ico"><Icon name="phone" size={20} stroke={1.8} /></span>
                  <div>
                    <div className="ch-label">Teléfono Oaxaca · Lun–Sáb</div>
                    <div className="ch-value">951 123 4567</div>
                  </div>
                  <Icon name="arrow-up-right" size={16} stroke={2} className="ch-arrow" />
                </a>
                <a className="cotiza-channel" href="tel:+522229876543">
                  <span className="ch-ico"><Icon name="phone" size={20} stroke={1.8} /></span>
                  <div>
                    <div className="ch-label">Teléfono Puebla · Lun–Sáb</div>
                    <div className="ch-value">222 987 6543</div>
                  </div>
                  <Icon name="arrow-up-right" size={16} stroke={2} className="ch-arrow" />
                </a>
                <div className="cotiza-channel" style={{ cursor: 'default', opacity: .6 }}>
                  <span className="ch-ico"><Icon name="mail" size={20} stroke={1.8} /></span>
                  <div>
                    <div className="ch-label">Correo</div>
                    <div className="ch-value" style={{ fontSize: 13, fontStyle: 'italic' }}>Próximamente</div>
                  </div>
                </div>
              </div>
            </div>

            {sent ? (
              <div className="cotiza-card sent">
                <div className="success-ico"><Icon name="check" size={32} stroke={3} /></div>
                <h3>¡Recibimos tu solicitud!</h3>
                <p style={{ color: 'rgba(255,255,255,.7)', margin: '8px 0 0' }}>
                  Un asesor de Sumafin te contactará en las próximas <strong style={{ color: '#fff' }}>2 horas hábiles</strong> al teléfono o correo que indicaste.
                </p>
                <button className="btn btn-ghost" style={{ marginTop: 24, color: '#fff', borderColor: 'rgba(255,255,255,.25)' }}
                  onClick={() => { setSent(false); setFields({ nombre: '', tel: '', email: '', producto: '', ciudad: '' }); setTouched({}); }}>
                  Enviar otra solicitud
                </button>
              </div>
            ) : (
              <form className="cotiza-card" onSubmit={onSubmit} noValidate>
                {/* ── Honeypot anti-spam (invisible para humanos) ── */}
                <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 0, height: 0, overflow: 'hidden', opacity: 0 }}>
                  <label>Do not fill this field</label>
                  <input type="text" name="website_url" tabIndex={-1} autoComplete="off"
                    value={honeypot} onChange={(e) => setHoneypot(e.target.value)} />
                </div>
                {/* ─────────────────────────────────────────────── */}
                <h3>Solicita una cotización</h3>
                <div className="ccc-sub">Responde 5 datos y un asesor te llama hoy.</div>

                <div className="form-row">
                  <div className="field">
                    <label>Nombre completo</label>
                    <input type="text" placeholder="Tu nombre" value={fields.nombre}
                      onChange={set('nombre')} onBlur={blur('nombre')}
                      style={touched.nombre && errors.nombre ? { borderColor: '#fca5a5' } : {}} />
                    {fieldErr('nombre')}
                  </div>
                  <div className="field">
                    <label>Teléfono</label>
                    <input type="tel" placeholder="951 000 0000" value={fields.tel}
                      onChange={set('tel')} onBlur={blur('tel')}
                      style={touched.tel && errors.tel ? { borderColor: '#fca5a5' } : {}} />
                    {fieldErr('tel')}
                  </div>
                </div>

                <div className="field">
                  <label>Correo electrónico</label>
                  <input type="email" placeholder="tu@correo.com" value={fields.email}
                    onChange={set('email')} onBlur={blur('email')}
                    style={touched.email && errors.email ? { borderColor: '#fca5a5' } : {}} />
                  {fieldErr('email')}
                </div>

                <div className="form-row">
                  <div className="field">
                    <label>Producto</label>
                    <select value={fields.producto} onChange={set('producto')} onBlur={blur('producto')}
                      style={touched.producto && errors.producto ? { borderColor: '#fca5a5' } : {}}>
                      <option value="">Selecciona…</option>
                      <option value="Crédito automotriz">Crédito automotriz</option>
                      <option value="Arrendamiento">Arrendamiento</option>
                      <option value="Flotilla empresarial">Flotilla empresarial</option>
                      <option value="No estoy seguro/a">No estoy seguro/a</option>
                    </select>
                    {fieldErr('producto')}
                  </div>
                  <div className="field">
                    <label>Ciudad</label>
                    <select value={fields.ciudad} onChange={set('ciudad')} onBlur={blur('ciudad')}
                      style={touched.ciudad && errors.ciudad ? { borderColor: '#fca5a5' } : {}}>
                      <option value="">Selecciona…</option>
                      <option value="Oaxaca de Juárez">Oaxaca de Juárez</option>
                      <option value="Puebla">Puebla</option>
                      <option value="San Andrés Cholula">San Andrés Cholula</option>
                      <option value="Otra">Otra</option>
                    </select>
                    {fieldErr('ciudad')}
                  </div>
                </div>

                {/* Widget hCaptcha — el usuario debe completarlo antes de enviar */}
                <div className="h-captcha" data-sitekey={HCAPTCHA_SITEKEY}
                  style={{ margin: '4px 0 8px' }} />

                <button type="submit" disabled={sending || !!rateLimitMsg} className="btn" style={{
                  background: isValid && !sending && !rateLimitMsg ? 'var(--cyan)' : 'rgba(91,179,217,.4)',
                  color: 'var(--navy-deep)', fontWeight: 600,
                  cursor: isValid && !sending && !rateLimitMsg ? 'pointer' : 'not-allowed',
                  transition: 'background .2s ease',
                }}>
                  {sending ? 'Enviando…' : <> Solicitar cotización <Icon name="arrow-right" size={14} stroke={2.5} /></>}
                </button>
                {rateLimitMsg && (
                  <p style={{ fontSize: 12.5, color: 'var(--cyan-light)', margin: '8px 0 0', textAlign: 'center' }}>{rateLimitMsg}</p>
                )}
                {sendError && (
                  <p style={{ fontSize: 12.5, color: '#fca5a5', margin: '8px 0 0', textAlign: 'center' }}>{sendError}</p>
                )}
                <div className="privacy">
                  Al enviar aceptas nuestro aviso de privacidad.
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TESTIMONIALS
============================================================ */
function Testimonials() {
  const items = [
    { quote: "Lo que más me gustó fue que no me marearon. Mi asesor me explicó todo, sin letras chiquitas. A los 2 días ya tenía mi camioneta.", name: "Marisol R.", role: "Oaxaca de Juárez · Crédito", stars: 5 },
    { quote: "Renovamos la flotilla de la panadería con arrendamiento. Deducimos todo y mantenemos el flujo de la empresa intacto.", name: "Carlos H.", role: "Puebla · Arrendamiento empresarial", stars: 5 },
    { quote: "Tenía miedo por mi historial. En Sumafin me escucharon antes de juzgarme y encontramos un plan que sí podía pagar.", name: "Diego M.", role: "Cholula · Crédito seminuevo", stars: 5 },
  ];

  return (
    <section className="testimonials" id="testimonios">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Testimonios
            </span>
            <h2 className="h-section">Más de 8,400 personas ya manejan <span className="txt-blue">con Sumafin</span>.</h2>
          </div>
          <div className="right">
            Calificación promedio de 4.9 en Google y Facebook. Pero lo que más nos gusta es cuando vuelven por su segundo auto.
          </div>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <article key={i} className="testi-card">
              <span className="testi-stars">
                {Array.from({ length: t.stars }).map((_, k) => <Icon key={k} name="star" size={15} />)}
              </span>
              <p className="testi-quote">"{t.quote}"</p>
              <div className="testi-author">
                <span className="testi-avatar">{t.name[0]}</span>
                <div>
                  <div className="testi-name">{t.name}</div>
                  <div className="testi-role">{t.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SUCURSALES
============================================================ */
function Sucursales() {
  const list = [
    {
      city: "Oaxaca",
      state: "Estado de Oaxaca",
      address: "Av. Universidad 1205, Col. Reforma",
      cp: "68050, Oaxaca de Juárez",
      hours: "Lun–Vie 9:00–19:00 · Sáb 10:00–14:00",
      phone: "951 123 4567",
      mail: "oaxaca@sumafin.mx",
      mapUrl: "https://maps.app.goo.gl/e53nGbSXpzjkzekx8",
    },
    {
      city: "Puebla",
      state: "Estado de Puebla",
      address: "Blvd. Atlixcáyotl 5208, Reserva Territorial",
      cp: "72830, San Andrés Cholula",
      hours: "Lun–Vie 9:00–19:00 · Sáb 10:00–14:00",
      phone: "222 987 6543",
      mail: "puebla@sumafin.mx",
      mapUrl: "https://maps.app.goo.gl/WbUMGtbzo5rfKh377",
    },
  ];

  return (
    <section className="sucursales" id="sucursales">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Sucursales
            </span>
            <h2 className="h-section">Cerca de ti, en <span className="txt-blue">Oaxaca y Puebla</span>.</h2>
          </div>
          <div className="right">
            Visítanos para conocer tu plan en persona o agenda una videollamada con un asesor. Atención de lunes a sábado.
          </div>
        </div>

        <div className="suc-grid">
          {list.map((s) => (
            <article key={s.city} className="suc-card">
              <MapStub city={s.city} />
              <div className="suc-body">
                <div className="suc-state">{s.state}</div>
                <h3>Sumafin {s.city}</h3>
                <div className="suc-info">
                  <div className="row">
                    <span className="ico-wrap"><Icon name="map-pin" size={14} stroke={2} /></span>
                    <span><strong>{s.address}</strong>{s.cp}</span>
                  </div>
                  <div className="row">
                    <span className="ico-wrap"><Icon name="clock" size={14} stroke={2} /></span>
                    <span>{s.hours}</span>
                  </div>
                  <div className="row">
                    <span className="ico-wrap"><Icon name="phone" size={14} stroke={2} /></span>
                    <span>{s.phone} · {s.mail}</span>
                  </div>
                </div>
                <div className="suc-actions">
                  <a className="btn btn-primary btn-sm" href="#cotiza">Agendar visita <Icon name="arrow-right" size={12} stroke={2.5} /></a>
                  <a className="btn btn-ghost btn-sm" href={s.mapUrl} target="_blank" rel="noreferrer noopener">Ver en Maps <Icon name="arrow-up-right" size={12} stroke={2} /></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function MapStub({ city }) {
  const seed = city === "Oaxaca" ? 0 : 1;
  return (
    <div className="suc-map">
      <svg width="100%" height="100%" viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <pattern id={`grid-${city}`} width="24" height="24" patternUnits="userSpaceOnUse">
            <path d="M 24 0 L 0 0 0 24" fill="none" stroke="rgba(30,112,184,.10)" strokeWidth=".75" />
          </pattern>
          <linearGradient id={`bg-${city}`} x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="#E8F4FA" />
            <stop offset="100%" stopColor="#D4ECF5" />
          </linearGradient>
        </defs>
        <rect width="400" height="220" fill={`url(#bg-${city})`} />
        <rect width="400" height="220" fill={`url(#grid-${city})`} />
        <path d={seed === 0 ? "M 0 140 Q 130 90 200 110 T 400 80" : "M 0 90 Q 160 150 250 130 T 400 150"}
          fill="none" stroke="rgba(30,112,184,.25)" strokeWidth="8" strokeLinecap="round" />
        <path d={seed === 0 ? "M 80 220 L 160 90 L 260 60 L 360 0" : "M 40 0 L 120 100 L 220 130 L 400 220"}
          fill="none" stroke="rgba(30,112,184,.18)" strokeWidth="3" strokeLinecap="round" />
        <path d={seed === 0 ? "M 0 30 L 400 200" : "M 0 180 L 400 30"}
          fill="none" stroke="rgba(30,112,184,.12)" strokeWidth="2" strokeDasharray="6 8" />
        <g transform="translate(200 110)">
          <circle r="36" fill="rgba(30,112,184,.10)" />
          <circle r="22" fill="rgba(30,112,184,.20)" />
          <circle r="12" fill="#133E80" />
          <circle r="4" fill="#fff" />
        </g>
        <text x="14" y="208" fill="rgba(19,62,128,.55)" fontFamily="ui-monospace, monospace" fontSize="10" fontWeight="500" letterSpacing="1">{city.toUpperCase()}, MX</text>
      </svg>
    </div>
  );
}

/* ============================================================
   FAQ
============================================================ */
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: "¿Estoy en buró de crédito, puedo aplicar?", a: "Sí. Evaluamos cada caso de forma individual. Tener detalles en buró no es razón automática de rechazo — depende de tu perfil completo, ingresos y antigüedad laboral." },
    { q: "¿Cuánto enganche necesito?", a: "Para crédito automotriz, el enganche mínimo es del 20% del valor del auto. Mientras más alto, menor será tu mensualidad y el costo total del financiamiento." },
    { q: "¿Cuál es la diferencia entre crédito y arrendamiento?", a: "En crédito, el auto es tuyo desde el día uno y al pagar la última cuota la deuda se cancela. En arrendamiento, pagas por el uso y al final puedes comprarlo, renovarlo o devolverlo — ideal para empresas y profesionistas por los beneficios fiscales." },
    { q: "¿Aplican comisiones por apertura o cancelación?", a: "Cobramos comisión de apertura del 2.5%. No hay penalización por pago anticipado ni por liquidación total — puedes adelantar cuando quieras." },
    { q: "¿Cuánto tarda la aprobación?", a: "El promedio es 24 horas hábiles desde que recibimos toda tu documentación. En algunos casos, mismo día." },
    { q: "¿Puedo financiar un auto seminuevo?", a: "Sí, con hasta 5 años de antigüedad (modelo no mayor a 5 años al cierre del crédito) y con verificación mecánica previa." },
  ];

  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">
              <span className="dot-grid"><span /><span /><span /><span /></span>
              Dudas frecuentes
            </span>
            <h2 className="h-section">Preguntas que <span className="txt-blue">todos</span> hacen.</h2>
            <p className="section-sub">¿No encuentras tu duda? Escríbenos por WhatsApp y un asesor humano te contesta en minutos.</p>
            <div style={{ marginTop: 28 }}>
              <a className="btn btn-primary" href="https://wa.me/5219511234567"><Icon name="whatsapp" size={16} /> Habla con un asesor</a>
            </div>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-toggle">+</span>
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BRANDS STRIP
============================================================ */
function Brands() {
  const brands = ["Toyota", "Nissan", "Mazda", "Honda", "KIA", "Volkswagen"];
  return (
    <section className="brands">
      <div className="container">
        <div className="brands-header">Trabajamos con las principales agencias en Oaxaca y Puebla</div>
        <div className="brands-row">
          {brands.map((b) => (
            <div key={b} className="brand-logo">{b}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-block">
            <Wordmark />
            <p>Financiera automotriz regulada por la CNBV. Crédito y arrendamiento de autos en Oaxaca y Puebla desde 2014.</p>
            <div className="footer-social">
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
              <a href="#" aria-label="Facebook"><Icon name="facebook" size={16} /></a>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Productos</h5>
            <ul>
              <li><a href="#productos">Crédito automotriz</a></li>
              <li><a href="#productos">Arrendamiento</a></li>
              <li><a href="#productos">Flotillas empresariales</a></li>
              <li><a href="#">Seguros automotrices</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <ul>
              <li><a href="#">Nosotros</a></li>
              <li><a href="#sucursales">Sucursales</a></li>
              <li><a href="#">Blog y educación</a></li>
              <li><a href="#">Trabaja con nosotros</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Ayuda</h5>
            <ul>
              <li><a href="#faq">Preguntas frecuentes</a></li>
              <li><a href="#cotiza">Contacto</a></li>
              <li><a href="#">Centro de ayuda</a></li>
              <li><a href="#">Aviso de privacidad</a></li>
            </ul>
          </div>
          <div className="footer-col newsletter">
            <h5>Tips para tu auto</h5>
            <p>Educación financiera y promos mensuales. Sin spam.</p>
            <div className="row">
              <input placeholder="tu@correo.com" />
              <button className="btn btn-blue">Suscribir</button>
            </div>
            <small>Al suscribirte aceptas el aviso de privacidad.</small>
          </div>
        </div>

        <div className="footer-bot">
          <span>© 2026 Sumafin Servicios Financieros, S.A. de C.V. SOFOM, E.N.R.</span>
          <div className="links">
            <a href="#">Términos</a>
            <a href="#">Privacidad</a>
            <a href="#">CAT</a>
            <a href="#">CONDUSEF</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, StatsStrip, Brands, Products, Process, Benefits, Requisitos, Cotizacion, Testimonials, Sucursales, FAQ, Footer });