// FAQs + Booking CTA + Footer
const { useState: useStateF } = React;

function FAQSection() {
  const faqs = [
    {
      q: '¿La primera sesión es realmente gratuita?',
      a: 'Sí. 30 minutos con un asesor certificado, sin compromiso. Te damos una primera lectura de tu situación y, si tiene sentido que trabajemos juntos, te explicamos cómo. Si no, igualmente te vas con claridad.',
    },
    {
      q: '¿Cuánto cuesta el servicio completo?',
      a: 'Tenemos dos modelos: plan puntual (desde 390 € pago único) o asesoramiento continuo (desde 89 €/mes). Sin comisiones ocultas, sin productos propios que colocar. Lo que pagas es lo que cuesta.',
    },
    {
      q: '¿Estáis regulados? ¿Qué pasa con mi dinero?',
      a: 'Sí. Estamos registrados en la CNMV como empresa de asesoramiento financiero. Tu dinero nunca pasa por nosotros: sigue en tu entidad de confianza. Nosotros solo planificamos y recomendamos.',
    },
    {
      q: '¿Qué pasa si ya tengo mis inversiones en otro sitio?',
      a: 'Perfecto. Analizamos lo que ya tienes (fondos, planes de pensiones, acciones) y te decimos qué mantener, qué cambiar y qué vender. No forzamos traspasos si no hay una ventaja clara para ti.',
    },
    {
      q: '¿Puedo cancelar cuando quiera?',
      a: 'Sin permanencia. Cancelas con un click desde tu panel, sin llamadas comerciales ni preguntas. Si vuelves, retomamos donde lo dejamos.',
    },
    {
      q: '¿Para quién NO es Inversimply?',
      a: 'Si buscas "pelotazos", trading diario o rentabilidades garantizadas de doble dígito, no somos para ti. Tampoco si quieres que alguien invierta por ti sin entender qué hace: creemos en la transparencia, no en la magia.',
    },
    {
      q: '¿Cuánto patrimonio necesito tener?',
      a: 'Ninguno. La mitad de nuestros clientes empiezan con menos de 10.000 € ahorrados. Lo importante es tener ingresos regulares y ganas de ordenar tus finanzas, no ser millonario.',
    },
  ];

  const [open, setOpen] = useStateF(0);

  return (
    <section id="faq" className="section">
      <div className="container" style={{ maxWidth: 860 }}>
        <div className="section-header reveal">
          <div className="eyebrow" style={{ marginBottom: 20 }}>Preguntas frecuentes</div>
          <h2 className="section-title">
            ¿Tienes <em>dudas?</em>
          </h2>
          <p className="section-sub">
            Lo más preguntado en la sesión inicial. Si no está aquí, escríbenos y te respondemos en 24h.
          </p>
        </div>

        <div className="reveal" style={{
          border: '1px solid var(--ink-200)',
          borderRadius: 18,
          background: 'white',
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--ink-150)' : 'none',
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%',
                    padding: '22px 28px',
                    textAlign: 'left',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 16,
                    background: isOpen ? 'var(--ink-25)' : 'transparent',
                    transition: 'background 0.15s ease',
                  }}
                >
                  <span style={{
                    fontSize: 16.5,
                    fontWeight: 500,
                    color: 'var(--ink-950)',
                    letterSpacing: '-0.01em',
                  }}>{f.q}</span>
                  <span style={{
                    width: 30, height: 30,
                    borderRadius: '50%',
                    background: isOpen ? 'var(--primary-600)' : 'var(--ink-100)',
                    color: isOpen ? 'white' : 'var(--ink-700)',
                    display: 'grid',
                    placeItems: 'center',
                    flexShrink: 0,
                    transition: 'all 0.3s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'none',
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 300 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)',
                }}>
                  <div style={{
                    padding: '0 28px 24px',
                    fontSize: 15.5,
                    lineHeight: 1.6,
                    color: 'var(--ink-600)',
                    maxWidth: 680,
                  }}>
                    {f.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ===== Booking CTA =====
function BookingCTA() {
  const [step, setStep] = useStateF(0); // 0 = form, 1 = picking slot, 2 = done
  const [form, setForm] = useStateF({ nombre: '', email: '', telefono: '', objetivo: '' });
  const [slot, setSlot] = useStateF(null);

  const objetivos = [
    'Organizar mis finanzas',
    'Invertir mejor mi ahorro',
    'Planificar la jubilación',
    'Optimizar impuestos',
    'Otra cosa',
  ];

  const days = [
    { d: 'Lun', date: '28', month: 'Abr' },
    { d: 'Mar', date: '29', month: 'Abr' },
    { d: 'Mié', date: '30', month: 'Abr' },
    { d: 'Jue', date: '1', month: 'May' },
    { d: 'Vie', date: '2', month: 'May' },
  ];

  const times = ['09:30', '11:00', '12:30', '16:00', '17:30', '19:00'];

  const isValid = form.nombre.trim() && /.+@.+\..+/.test(form.email) && form.objetivo;

  return (
    <section id="reservar" className="section" style={{ background: 'var(--primary-50)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, var(--primary-200) 1px, transparent 0)',
        backgroundSize: '24px 24px',
        opacity: 0.5,
        maskImage: 'radial-gradient(60% 80% at 50% 40%, black, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(60% 80% at 50% 40%, black, transparent 80%)',
      }} />

      <div className="container" style={{ maxWidth: 1080, position: 'relative' }}>
        <div className="booking-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: 'clamp(32px, 5vw, 72px)',
          alignItems: 'center',
        }}>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 20 }}>Reserva tu sesión</div>
            <h2 style={{
              fontSize: 'clamp(34px, 4.4vw, 52px)',
              lineHeight: 1.05,
              letterSpacing: '-0.035em',
              fontWeight: 500,
              margin: '0 0 20px',
              color: 'var(--ink-950)',
            }}>
              30 minutos que<br />
              <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--primary-700)' }}>cambian tu relación</em><br />
              con tu dinero.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-700)', marginBottom: 28, maxWidth: 440 }}>
              Sin compromiso, sin venta encubierta. Videollamada con un asesor certificado. Te vas con una primera lectura clara.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['Asesor certificado y sin comisión', 'Primera lectura de tu situación', 'Recomendación honesta, aunque no te convenga pagarnos'].map((b, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: 'var(--ink-800)' }}>
                  <span style={{
                    width: 22, height: 22,
                    borderRadius: '50%',
                    background: 'var(--primary-600)',
                    color: 'white',
                    display: 'grid', placeItems: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 5.5l2 2 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </span>
                  {b}
                </li>
              ))}
            </ul>
          </div>

          {/* Form card */}
          <div className="reveal reveal-delay-2" style={{
            background: 'white',
            borderRadius: 24,
            padding: 32,
            boxShadow: '0 40px 80px -24px rgba(17, 24, 39, 0.18), 0 0 0 1px var(--ink-150)',
          }}>
            {step === 0 && (
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
                  <h3 style={{ fontSize: 20, fontWeight: 500, margin: 0, color: 'var(--ink-950)', letterSpacing: '-0.02em' }}>Cuéntanos de ti</h3>
                  <span style={{ fontSize: 12, color: 'var(--ink-500)', fontFamily: 'var(--font-mono)' }}>PASO 1 / 2</span>
                </div>
                <div style={{ display: 'grid', gap: 14 }}>
                  <FormField label="Nombre" value={form.nombre} onChange={(v) => setForm({ ...form, nombre: v })} placeholder="María García" />
                  <FormField label="Email" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} placeholder="maria@email.com" />
                  <FormField label="Teléfono (opcional)" type="tel" value={form.telefono} onChange={(v) => setForm({ ...form, telefono: v })} placeholder="+34 600 000 000" />
                  <div>
                    <label style={{ fontSize: 12.5, color: 'var(--ink-600)', fontWeight: 500, marginBottom: 8, display: 'block' }}>¿Qué te trae por aquí?</label>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {objetivos.map((o) => (
                        <button key={o} onClick={() => setForm({ ...form, objetivo: o })} style={{
                          padding: '8px 14px',
                          fontSize: 13,
                          borderRadius: 999,
                          background: form.objetivo === o ? 'var(--primary-600)' : 'var(--ink-50)',
                          color: form.objetivo === o ? 'white' : 'var(--ink-700)',
                          border: form.objetivo === o ? '1px solid var(--primary-600)' : '1px solid var(--ink-200)',
                          transition: 'all 0.15s ease',
                        }}>
                          {o}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => isValid && setStep(1)}
                  disabled={!isValid}
                  style={{
                    marginTop: 22,
                    width: '100%',
                    padding: '15px 24px',
                    background: isValid ? 'var(--ink-950)' : 'var(--ink-200)',
                    color: isValid ? 'white' : 'var(--ink-500)',
                    borderRadius: 999,
                    fontSize: 15,
                    fontWeight: 500,
                    cursor: isValid ? 'pointer' : 'not-allowed',
                    transition: 'all 0.15s ease',
                  }}
                >
                  Elegir día y hora →
                </button>
              </div>
            )}

            {step === 1 && (
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
                  <h3 style={{ fontSize: 20, fontWeight: 500, margin: 0, color: 'var(--ink-950)', letterSpacing: '-0.02em' }}>Escoge un hueco</h3>
                  <span style={{ fontSize: 12, color: 'var(--ink-500)', fontFamily: 'var(--font-mono)' }}>PASO 2 / 2</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 18 }}>
                  {days.map((d, i) => (
                    <button key={i} onClick={() => setSlot({ ...(slot || {}), day: i })} style={{
                      padding: '12px 6px',
                      borderRadius: 12,
                      background: slot?.day === i ? 'var(--primary-600)' : 'var(--ink-50)',
                      color: slot?.day === i ? 'white' : 'var(--ink-800)',
                      border: slot?.day === i ? '1px solid var(--primary-600)' : '1px solid var(--ink-200)',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      gap: 2,
                      transition: 'all 0.15s ease',
                    }}>
                      <span style={{ fontSize: 11, opacity: 0.8 }}>{d.d}</span>
                      <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.02em' }}>{d.date}</span>
                      <span style={{ fontSize: 10, opacity: 0.7 }}>{d.month}</span>
                    </button>
                  ))}
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
                  {times.map((t) => (
                    <button key={t} onClick={() => setSlot({ ...(slot || { day: 0 }), time: t })} style={{
                      padding: '11px 6px',
                      borderRadius: 10,
                      fontSize: 14,
                      fontWeight: 500,
                      background: slot?.time === t ? 'var(--primary-600)' : 'white',
                      color: slot?.time === t ? 'white' : 'var(--ink-800)',
                      border: slot?.time === t ? '1px solid var(--primary-600)' : '1px solid var(--ink-200)',
                      transition: 'all 0.15s ease',
                    }}>
                      {t}
                    </button>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button onClick={() => setStep(0)} style={{
                    padding: '15px 20px',
                    background: 'transparent',
                    color: 'var(--ink-600)',
                    borderRadius: 999,
                    border: '1px solid var(--ink-200)',
                    fontSize: 14,
                  }}>← Atrás</button>
                  <button
                    disabled={!(slot?.time && slot?.day !== undefined)}
                    onClick={() => setStep(2)}
                    style={{
                      flex: 1,
                      padding: '15px 24px',
                      background: slot?.time ? 'var(--ink-950)' : 'var(--ink-200)',
                      color: slot?.time ? 'white' : 'var(--ink-500)',
                      borderRadius: 999,
                      fontSize: 15,
                      fontWeight: 500,
                      cursor: slot?.time ? 'pointer' : 'not-allowed',
                    }}
                  >
                    Confirmar reserva
                  </button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div style={{ textAlign: 'center', padding: '20px 0' }}>
                <div style={{
                  width: 64, height: 64,
                  margin: '0 auto 18px',
                  borderRadius: '50%',
                  background: 'var(--green-50)',
                  color: 'var(--green-600)',
                  display: 'grid', placeItems: 'center',
                  animation: 'popIn 0.5s cubic-bezier(0.25, 1.5, 0.5, 1)',
                }}>
                  <svg width="30" height="30" viewBox="0 0 30 30" fill="none"><path d="M8 15l5 5 10-12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 500, margin: '0 0 8px', color: 'var(--ink-950)', letterSpacing: '-0.02em' }}>
                  ¡Listo, {form.nombre.split(' ')[0]}!
                </h3>
                <p style={{ fontSize: 15, color: 'var(--ink-600)', margin: '0 0 20px', lineHeight: 1.5 }}>
                  Te hemos mandado la confirmación a <strong style={{ color: 'var(--ink-900)', fontWeight: 500 }}>{form.email}</strong> con el enlace de videollamada.
                </p>
                <div style={{
                  display: 'inline-block',
                  background: 'var(--primary-50)',
                  color: 'var(--primary-800)',
                  padding: '10px 18px',
                  borderRadius: 10,
                  fontSize: 14,
                  fontFamily: 'var(--font-mono)',
                }}>
                  {days[slot?.day || 0].d}. {days[slot?.day || 0].date} {days[slot?.day || 0].month} · {slot?.time}
                </div>
              </div>
            )}

            <div style={{
              marginTop: 18,
              paddingTop: 16,
              borderTop: '1px solid var(--ink-100)',
              fontSize: 11.5,
              color: 'var(--ink-500)',
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              justifyContent: 'center',
            }}>
              <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M3 5V3a2.5 2.5 0 015 0v2M2 5h7v5H2z" stroke="currentColor" strokeWidth="1" /></svg>
              Tus datos están protegidos. Cifrado de extremo a extremo.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) { .booking-grid { grid-template-columns: 1fr !important; } }
        @keyframes popIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
      `}</style>
    </section>
  );
}

function FormField({ label, value, onChange, placeholder, type = 'text' }) {
  return (
    <div>
      <label style={{ fontSize: 12.5, color: 'var(--ink-600)', fontWeight: 500, marginBottom: 6, display: 'block' }}>{label}</label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width: '100%',
          padding: '12px 14px',
          fontSize: 14.5,
          border: '1px solid var(--ink-200)',
          borderRadius: 10,
          background: 'var(--ink-25)',
          fontFamily: 'inherit',
          transition: 'all 0.15s ease',
          outline: 'none',
        }}
        onFocus={(e) => { e.target.style.borderColor = 'var(--primary-500)'; e.target.style.background = 'white'; e.target.style.boxShadow = '0 0 0 3px var(--primary-100)'; }}
        onBlur={(e) => { e.target.style.borderColor = 'var(--ink-200)'; e.target.style.background = 'var(--ink-25)'; e.target.style.boxShadow = 'none'; }}
      />
    </div>
  );
}

// ===== Footer =====
function Footer() {
  return (
    <footer style={{ background: 'var(--ink-950)', color: 'var(--ink-300)', paddingBlock: 72 }}>
      <div className="container-wide">
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 56,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
              <img src="assets/logo-inversimply.webp" alt="Inversimply" style={{ height: 30, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-400)', maxWidth: 320, margin: '0 0 20px' }}>
              Asesoramiento financiero independiente, sin conflicto de interés. Registrados en CNMV.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {[
                { name: 'LinkedIn', path: 'M4 4h3v12H4zm1.5-3a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM9 7h3v1.5c.5-1 1.5-1.8 3-1.8 3 0 3.5 2 3.5 4.5V16h-3v-4c0-1-.2-2-1.5-2s-1.5 1-1.5 2v4H9V7z' },
                { name: 'X', path: 'M16 3h-2.5l-3 4L7.5 3H4l4.5 6L4 17h2.5l3.5-4.5L13.5 17H17l-5-6.5L16 3z' },
                { name: 'YouTube', path: 'M19 5H3c-1 0-2 1-2 2v8c0 1 1 2 2 2h16c1 0 2-1 2-2V7c0-1-1-2-2-2zM8 14V6l7 4-7 4z' },
              ].map((s) => (
                <a key={s.name} href="#" aria-label={s.name} style={{
                  width: 36, height: 36,
                  borderRadius: 10,
                  background: 'rgba(255,255,255,0.06)',
                  display: 'grid',
                  placeItems: 'center',
                  transition: 'background 0.15s ease',
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
                >
                  <svg width="18" height="18" viewBox="0 0 20 20" fill="var(--ink-300)"><path d={s.path} /></svg>
                </a>
              ))}
            </div>
          </div>

          {[
            { title: 'Servicio', links: ['Plan puntual', 'Asesoramiento continuo', 'Para empresas', 'Precios'] },
            { title: 'Recursos', links: ['Blog', 'Calculadora jubilación', 'Guía para empezar', 'Casos reales'] },
            { title: 'Empresa', links: ['Sobre nosotros', 'Equipo', 'Prensa', 'Contacto'] },
          ].map((col) => (
            <div key={col.title}>
              <div style={{
                fontFamily: 'var(--font-mono)',
                fontSize: 11,
                letterSpacing: '0.08em',
                textTransform: 'uppercase',
                color: 'var(--ink-500)',
                marginBottom: 16,
              }}>{col.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.links.map((l) => (
                  <li key={l}>
                    <a href="#" style={{
                      fontSize: 14,
                      color: 'var(--ink-300)',
                      transition: 'color 0.15s ease',
                    }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = 'white'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--ink-300)'; }}
                    >{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 28,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 12.5,
          color: 'var(--ink-500)',
          flexWrap: 'wrap',
          gap: 16,
        }}>
          <div>© 2026 Inversimply S.L. — Registrada en CNMV nº 4215</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'var(--ink-500)' }}>Aviso legal</a>
            <a href="#" style={{ color: 'var(--ink-500)' }}>Privacidad</a>
            <a href="#" style={{ color: 'var(--ink-500)' }}>Cookies</a>
          </div>
        </div>
      </div>

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

window.FAQSection = FAQSection;
window.BookingCTA = BookingCTA;
window.Footer = Footer;