/* FAQ + Contacto + Footer */

const { useState: useStateC } = React;

function FAQ({ tweaks }) {
  const [open, setOpen] = useStateC(0);
  const items = [
    {
      q: '¿Sustituís a mi gestoría o asesoría fiscal?',
      a: 'En la mayoría de casos, sí. Llevamos directamente tu contabilidad, fiscalidad y administración: para nosotras tener los datos en casa es la única forma de garantizar información fiel y siempre actualizada — esa es la base para entender y decidir. Solo en consultas muy especializadas o asesoramientos puntuales trabajamos con la información que tú nos facilites o nos coordinamos con un especialista existente.',
    },
    {
      q: '¿Necesito tener mi contabilidad ordenada antes de empezar?',
      a: 'No. Una de las primeras cosas que hacemos en el onboarding es revisar el año en curso, ajustar el plan contable y dejar la información lista para que tenga sentido. Si la base no está, la construimos contigo — sin reproches.',
    },
    {
      q: '¿Cuánto tiempo voy a tener que dedicarle?',
      a: 'Lo justo. Una reunión periódica de 60 minutos, alguna pregunta puntual por email durante el cierre, y revisión del panel cuando tú quieras. La idea es liberarte tiempo, no añadirte deberes.',
    },
    {
      q: '¿En qué momento de mi negocio tiene sentido contrataros?',
      a: 'Cuando facturar más ya no se traduce automáticamente en dormir mejor. Solemos encajar bien con empresas que facturan entre 60.000 € y 1 M € al año, aunque hay excepciones. En el diagnóstico gratuito te decimos honestamente si es tu momento.',
    },
    {
      q: '¿Qué herramientas usáis? ¿Tengo que cambiar mi software?',
      a: 'Trabajamos sobre Holded — somos Partner oficial. Si ya lo usas, encajamos directo y nos coordinamos contigo. Si no, lo configuramos para tu sector y te enseñamos a usarlo: facturación, contabilidad, banca y reporting integrados, todo en el mismo sitio.',
    },
    {
      q: '¿Hay permanencia?',
      a: 'No. Trabajamos por trimestres y se cancela con 30 días de aviso. Si no aporta valor, no queremos que sigas pagando — es así de simple.',
    },
    {
      q: '¿Mi información financiera está segura?',
      a: 'Sí. Datos cifrados en tránsito y en reposo, servidores en la UE, accesos por usuario y bitácora de actividad. Firmamos NDA si lo necesitas, y nuestro equipo está sujeto a confidencialidad por contrato.',
    },
  ];

  return (
    <section id="faq" style={{ padding: '120px 24px', background: 'var(--bg-3)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, alignItems: 'flex-start' }} className="faq-grid">
        <div style={{ position: 'sticky', top: 100 }}>
          <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Preguntas frecuentes</div>
          <h2 className="h2" style={{ margin: '0 0 20px', fontSize: 'clamp(28px, 3.4vw, 42px)' }}>
            Las dudas que se plantea casi todo el mundo<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p style={{ color: 'var(--fg-2)', margin: '0 0 28px', lineHeight: 1.6 }}>
            Si la tuya no está aquí, escríbenos. Respondemos en menos de 24 horas hábiles.
          </p>
          <a href="#contacto" className="btn-ghost" style={{ textDecoration: 'none', display: 'inline-block' }}>Hacer una pregunta →</a>
        </div>

        <div style={{ background: 'var(--white)', border: '1px solid var(--border-1)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderTop: i === 0 ? 'none' : '1px solid var(--border-1)' }}>
              <button
                aria-expanded={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left',
                  padding: '24px 28px',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16,
                  fontFamily: 'inherit',
                }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--fg-1)', lineHeight: 1.4, textWrap: 'pretty' }}>{it.q}</span>
                <span style={{
                  flexShrink: 0, marginTop: 2,
                  width: 28, height: 28, borderRadius: 999,
                  background: open === i ? tweaks.accent : 'var(--bg-3)',
                  color: open === i ? 'var(--navy-800)' : 'var(--fg-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'all 200ms var(--ease-out)',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14 M5 12h14"/></svg>
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 400 : 0,
                overflow: 'hidden', transition: 'max-height 300ms var(--ease-out)',
              }}>
                <div style={{ padding: '0 28px 24px', color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.65, maxWidth: 620 }}>{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mqengvvr';

function Contacto({ tweaks }) {
  const [form, setForm] = useStateC({ name: '', email: '', empresa: '', mensaje: '', momento: 'creciendo', consent: false });
  const [errors, setErrors] = useStateC({});
  const [submitted, setSubmitted] = useStateC(false);
  const [submitting, setSubmitting] = useStateC(false);
  const [serverError, setServerError] = useStateC(null);

  const update = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => ({ ...e, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Cuéntanos cómo te llamas';
    if (!form.email.trim()) e.email = 'Necesitamos un email para responder';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Ese email no parece válido';
    if (!form.mensaje.trim() || form.mensaje.trim().length < 10) e.mensaje = 'Cuéntanos un poco más (mínimo 10 caracteres)';
    if (!form.consent) e.consent = 'Necesitamos tu permiso para contactarte';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setServerError(null);
    try {
      const momentoLabel = { empezando: 'Empezando', creciendo: 'Creciendo', decidiendo: 'Decisión grande', otra: 'Otra' }[form.momento] || form.momento;
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          empresa: form.empresa || '—',
          momento: momentoLabel,
          mensaje: form.mensaje,
          _subject: `Nuevo diagnóstico — ${form.name}${form.empresa ? ' (' + form.empresa + ')' : ''}`,
          _replyto: form.email,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setServerError((data && data.errors && data.errors[0] && data.errors[0].message) || 'No se ha podido enviar. Inténtalo de nuevo en un momento.');
      }
    } catch (err) {
      setServerError('No hay conexión. Revisa tu red e inténtalo de nuevo.');
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <section id="contacto" style={{ padding: '120px 24px', background: 'var(--navy-800)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            width: 72, height: 72, borderRadius: 999, background: tweaks.accent,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px',
            color: 'var(--navy-800)',
          }}>
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
          </div>
          <h2 className="h2" style={{ color: 'var(--paper)', margin: '0 0 16px' }}>
            Mensaje recibido<span style={{ color: tweaks.accent }}>.</span>
          </h2>
          <p style={{ color: 'var(--navy-200)', fontSize: 18, lineHeight: 1.6, margin: '0 0 32px' }}>
            Gracias, {form.name.split(' ')[0]}. Te respondemos en menos de 24 horas hábiles con disponibilidad para tu diagnóstico.
          </p>
          <button onClick={() => { setSubmitted(false); setForm({ name: '', email: '', empresa: '', mensaje: '', momento: 'creciendo', consent: false }); }}
            className="btn-ghost" style={{ borderColor: 'var(--navy-600)', color: 'var(--paper)' }}>
            Enviar otro mensaje
          </button>
        </div>
      </section>
    );
  }

  const inputStyle = (err) => ({
    background: 'var(--navy-700)',
    border: `1px solid ${err ? 'var(--orange-500)' : 'var(--navy-600)'}`,
    color: 'var(--paper)', padding: '14px 16px',
    borderRadius: 'var(--radius-sm)', fontFamily: 'inherit', fontSize: 15,
    outline: 'none', width: '100%', transition: 'border-color 200ms var(--ease-out)',
  });

  const labelStyle = { fontSize: 13, fontWeight: 600, color: 'var(--navy-200)', marginBottom: 8, display: 'block' };

  return (
    <section id="contacto" style={{ padding: '120px 24px', background: 'var(--navy-800)', color: 'var(--paper)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="contacto-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-start' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: tweaks.accent }}>Diagnóstico gratuito</div>
            <h2 className="h2" style={{ color: 'var(--paper)', margin: '0 0 20px', fontSize: 'clamp(32px, 4vw, 44px)' }}>
              Empecemos por conocer tu negocio<span style={{ color: tweaks.accent }}>.</span>
            </h2>
            <p style={{ color: 'var(--navy-200)', fontSize: 17, lineHeight: 1.6, margin: '0 0 36px' }}>
              30 minutos por videollamada. Sin compromiso. Te decimos por dónde empezar y, si encajamos, cómo seguimos juntas.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {[
                { i: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z', t: '+34 600 41 39 50', s: 'Lunes a viernes, 9:00 — 18:00' },
                { i: 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6', t: 'hola@inncertia.com', s: 'Respondemos en < 24h hábiles' },
                { i: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M12 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6z', t: 'Sevilla', s: 'En remoto en todo el país' },
              ].map(c => (
                <div key={c.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 8,
                    background: 'var(--navy-700)', color: tweaks.accent,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={c.i}/></svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{c.t}</div>
                    <div style={{ fontSize: 13, color: 'var(--navy-300)', marginTop: 2 }}>{c.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <form onSubmit={submit} noValidate style={{
            background: 'var(--navy-700)',
            border: '1px solid var(--navy-600)',
            borderRadius: 'var(--radius-lg)', padding: 36,
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }} className="form-row">
              <div>
                <label style={labelStyle} htmlFor="f-name">Nombre y apellidos</label>
                <input id="f-name" value={form.name} onChange={e => update('name', e.target.value)}
                  style={inputStyle(errors.name)} placeholder="Marta Lozano"/>
                {errors.name && <div style={{ color: tweaks.accent, fontSize: 12, marginTop: 6 }}>{errors.name}</div>}
              </div>
              <div>
                <label style={labelStyle} htmlFor="f-email">Email</label>
                <input id="f-email" type="email" value={form.email} onChange={e => update('email', e.target.value)}
                  style={inputStyle(errors.email)} placeholder="marta@miempresa.com"/>
                {errors.email && <div style={{ color: tweaks.accent, fontSize: 12, marginTop: 6 }}>{errors.email}</div>}
              </div>
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={labelStyle} htmlFor="f-empresa">Empresa <span style={{ color: 'var(--navy-300)', fontWeight: 400 }}>(opcional)</span></label>
              <input id="f-empresa" value={form.empresa} onChange={e => update('empresa', e.target.value)}
                style={inputStyle(false)} placeholder="Panadería Marta S.L."/>
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={labelStyle}>¿En qué momento estás?</label>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {[
                  { v: 'empezando', l: 'Empezando' },
                  { v: 'creciendo', l: 'Creciendo' },
                  { v: 'decidiendo', l: 'Decisión grande' },
                  { v: 'otra', l: 'Otra' },
                ].map(opt => (
                  <button key={opt.v} type="button" onClick={() => update('momento', opt.v)}
                    style={{
                      padding: '10px 16px', borderRadius: 999,
                      background: form.momento === opt.v ? tweaks.accent : 'transparent',
                      color: form.momento === opt.v ? 'var(--navy-800)' : 'var(--paper)',
                      border: `1px solid ${form.momento === opt.v ? tweaks.accent : 'var(--navy-600)'}`,
                      fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
                      cursor: 'pointer', transition: 'all 200ms var(--ease-out)',
                    }}>{opt.l}</button>
                ))}
              </div>
            </div>

            <div style={{ marginBottom: 16 }}>
              <label style={labelStyle} htmlFor="f-mensaje">¿En qué te podemos ayudar?</label>
              <textarea id="f-mensaje" value={form.mensaje} onChange={e => update('mensaje', e.target.value)}
                style={{ ...inputStyle(errors.mensaje), minHeight: 120, resize: 'vertical' }}
                placeholder="Cuéntanos brevemente qué tipo de empresa tienes y qué te haría llamarnos…"/>
              {errors.mensaje && <div style={{ color: tweaks.accent, fontSize: 12, marginTop: 6 }}>{errors.mensaje}</div>}
            </div>

            <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', marginBottom: 24 }}>
              <input type="checkbox" checked={form.consent} onChange={e => update('consent', e.target.checked)}
                style={{ marginTop: 4, accentColor: tweaks.accent, width: 16, height: 16 }}/>
              <span style={{ fontSize: 12.5, color: 'var(--navy-200)', lineHeight: 1.5 }}>
                He leído la <a href="privacidad.html" target="_blank" rel="noopener" style={{ color: tweaks.accent, textDecoration: 'underline' }}>política de privacidad</a> y autorizo el contacto comercial. Tus datos no se comparten con terceros.
              </span>
            </label>
            {errors.consent && <div style={{ color: tweaks.accent, fontSize: 12, marginTop: -16, marginBottom: 16 }}>{errors.consent}</div>}

            {serverError && (
              <div role="alert" style={{
                padding: '12px 14px', marginBottom: 14,
                background: 'rgba(255,144,78,0.10)', border: '1px solid var(--orange-500)',
                borderRadius: 'var(--radius-sm)', fontSize: 13.5, color: 'var(--paper)', lineHeight: 1.5,
              }}>{serverError}</div>
            )}
            <button type="submit" disabled={submitting} className="btn-primary" style={{
              background: tweaks.accent, width: '100%', padding: '16px 22px', fontSize: 15,
              opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer',
            }}>
              {submitting ? (
                <>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" style={{ animation: 'spin 800ms linear infinite' }}>
                    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                  </svg>
                  Enviando…
                </>
              ) : 'Enviar y reservar diagnóstico →'}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

function Newsletter({ tweaks }) {
  const [email, setEmail] = useStateC('');
  const [done, setDone] = useStateC(false);
  const [submitting, setSubmitting] = useStateC(false);
  const [error, setError] = useStateC(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError('Ese email no parece válido.');
      return;
    }
    setSubmitting(true);
    try {
      const fd = new FormData();
      fd.append('fields[email]', email);
      fd.append('ml-submit', '1');
      fd.append('anticsrf', 'true');
      await fetch('https://assets.mailerlite.com/jsonp/1367780/forms/187113096754496514/subscribe', {
        method: 'POST',
        body: fd,
        mode: 'no-cors',
      });
      setDone(true);
    } catch (err) {
      setError('No se ha podido suscribir. Inténtalo de nuevo en un momento.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section style={{ padding: '80px 24px', background: 'var(--paper)', borderTop: '1px solid var(--border-1)' }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
      }} className="newsletter-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 12, color: tweaks.accent }}>🟠  Newsletter</div>
          <h3 style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.01em' }}>Números, IA y casos que inspiran<span style={{ color: tweaks.accent }}>.</span></h3>
          <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.6 }}>
            Lo que está cambiando en gestión financiera, qué puedes empezar a hacer con IA en tu negocio, y casos reales que inspiran. Sin paja, sin spam, sin vender humo.
          </p>
        </div>
        {done ? (
          <div style={{ padding: '20px 24px', background: 'var(--orange-050)', borderRadius: 'var(--radius-md)', borderLeft: `3px solid ${tweaks.accent}`, fontSize: 14, color: 'var(--fg-1)' }}>
            <b>Casi.</b> Te hemos enviado un email para confirmar la suscripción — revisa tu bandeja (y la carpeta de spam, por si acaso).
          </div>
        ) : (
          <div>
            <form onSubmit={onSubmit} style={{ display: 'flex', gap: 8 }}>
              <input value={email} onChange={e => setEmail(e.target.value)} type="email" required placeholder="tu@email.com" disabled={submitting} style={{
                flex: 1, padding: '14px 16px', borderRadius: 'var(--radius-sm)',
                border: `1px solid ${error ? 'var(--orange-500)' : 'var(--border-2)'}`,
                fontFamily: 'inherit', fontSize: 15,
                background: 'var(--white)', outline: 'none',
              }}/>
              <button type="submit" disabled={submitting} className="btn-primary" style={{
                background: tweaks.accent, padding: '14px 22px', whiteSpace: 'nowrap',
                opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer',
              }}>
                {submitting ? (
                  <>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" style={{ animation: 'spin 800ms linear infinite' }}>
                      <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                    </svg>
                    Enviando…
                  </>
                ) : 'Suscribirme'}
              </button>
            </form>
            {error && <div style={{ color: 'var(--orange-700)', fontSize: 12.5, marginTop: 8 }}>{error}</div>}
            <p style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 10, lineHeight: 1.5 }}>
              Al suscribirte aceptas nuestra <a href="privacidad.html" target="_blank" rel="noopener" style={{ color: 'var(--fg-2)' }}>política de privacidad</a>. Cancela cuando quieras desde cualquier email.
            </p>
          </div>
        )}
      </div>
    </section>
  );
}

function Footer({ tweaks }) {
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'var(--paper)', padding: '64px 24px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 56 }}>
          <div>
            <div style={{ display: 'inline-block', background: 'var(--paper)', padding: '10px 14px', borderRadius: 8, marginBottom: 20 }}>
              <img src="assets/logo-wordmark.jpg" alt="inncertia" style={{ height: 40, display: 'block' }}/>
            </div>
            <p style={{ color: 'var(--navy-200)', fontSize: 14, margin: '0 0 16px', maxWidth: 320, lineHeight: 1.6 }}>
              Control de gestión y asesoramiento para pequeñas empresas y empresarias. Ordenar, entender, decidir.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                { l: 'LinkedIn', u: 'https://www.linkedin.com/company/inncertia', i: 'M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z M2 9h4v12H2z M4 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' },
                { l: 'Instagram', u: 'https://www.instagram.com/inncertia', i: 'M2 7a5 5 0 0 1 5-5h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5z M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z M17.5 6.5h.01' },
              ].map(s => (
                <a key={s.l} href={s.u} target="_blank" rel="noopener" aria-label={s.l} style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: 'var(--navy-700)', color: 'var(--paper)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  textDecoration: 'none',
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={s.i}/></svg>
                </a>
              ))}
            </div>
          </div>
          {[
            { h: 'Servicios', l: [
              { t: 'Reporting financiero', u: '#servicios' },
              { t: 'Control de gestión', u: '#servicios' },
              { t: 'Asesoramiento puntual', u: '#servicios' },
              { t: 'Diagnóstico gratuito', u: '#contacto' },
            ] },
            { h: 'Inncertia', l: [
              { t: 'Sobre nosotras', u: '#para-quien' },
              { t: 'Casos de éxito', u: '#testimonios' },
              { t: 'Newsletter', u: '#newsletter' },
              { t: 'Trabaja con nosotras', u: '#' },
            ] },
            { h: 'Recursos', l: [
              { t: 'LinkedIn', u: 'https://www.linkedin.com/company/inncertia' },
              { t: 'Instagram', u: 'https://www.instagram.com/inncertia' },
            ] },
          ].map(col => (
            <div key={col.h}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: tweaks.accent, marginBottom: 16 }}>{col.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.l.map(item => <li key={item.t}><a href={item.u} style={{ color: 'var(--navy-200)', textDecoration: 'none', fontSize: 14 }}>{item.t}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--navy-700)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontSize: 13, color: 'var(--navy-300)',
        }}>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <span>© 2026 Inncertia</span>
            <a href="privacidad.html" style={{ color: 'var(--navy-300)', textDecoration: 'none' }}>Privacidad</a>
            <a href="cookies.html" style={{ color: 'var(--navy-300)', textDecoration: 'none' }}>Cookies</a>
          </div>
          <div style={{ fontSize: 12, color: 'var(--navy-300)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>
            Ordenar · Entender · Decidir<span style={{ color: tweaks.accent }}>.</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.FAQ = FAQ;
window.Contacto = Contacto;
window.Newsletter = Newsletter;
window.Footer = Footer;