/* global React, Icon, Reveal, AvatarFrame, AVATAR_VIDEO */
/* ============================================================
   OASIA — Process, Legal, Omnichannel, Principles, FAQ, CTA, Footer
   ============================================================ */

/* ---------- HOW IT WORKS ---------- */

function Process({ onTalkClick }) {
  const steps = [
    {
      n: "01", icon: "msg",
      title: "Nos cuentas tu situación",
      body: "Por web, WhatsApp o teléfono. La primera conversación es con Lucía, nuestra asistente. Sin formularios largos, sin preguntas duras de entrada. Solo escucha.",
      tag: "5 minutos",
    },
    {
      n: "02", icon: "doc",
      title: "Diagnóstico jurídico y financiero",
      body: "Nuestro abogado virtual analiza tu contrato, cuotas y procedimiento. Sabrás en horas — no semanas — qué se puede hacer con tu caso y qué no.",
      tag: "Mismo día",
    },
    {
      n: "03", icon: "users",
      title: "Un humano del equipo te llama",
      body: "Solo cuando hay algo concreto que aportarte. Un gestor especializado en tu tipo de situación que ha leído tu caso antes de marcar tu número.",
      tag: "24-48h",
    },
    {
      n: "04", icon: "scale",
      title: "Te presentamos opciones reales",
      body: "Cifras concretas, plazos concretos, condiciones concretas. Tú decides — sin presión, sin coste hasta aquí. Si te encaja, lo llevamos a cierre con un inversor.",
      tag: "2-4 semanas",
    },
  ];

  return (
    <section id="proceso" className="section">
      <div className="container">
        <div className="process-intro" style={{
          display: "grid", gridTemplateColumns: "1fr 1.4fr",
          gap: 80, alignItems: "start", marginBottom: 64,
        }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>El proceso</div>
              <h2>Cuatro pasos. Sin sorpresas.</h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <p className="lead">
              La idea es sencilla: <strong style={{ color: "var(--ink)" }}>tú no eres un lead</strong>,
              eres la persona a la que se le resuelve un problema. La operación, si la hay,
              es el vehículo de la solución — no el fin. Por eso te cuesta cero hasta que
              hay algo concreto sobre la mesa que decidas aceptar.
            </p>
          </Reveal>
        </div>

        {/* Steps */}
        <div className="process-steps" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          position: "relative",
        }}>
          {/* connector line */}
          <div className="process-connector" style={{
            position: "absolute", top: 36, left: "12.5%", right: "12.5%",
            height: 1, background: "var(--line-strong)",
            zIndex: 0,
          }} />
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{ position: "relative", zIndex: 1 }}>
                <div style={{
                  width: 72, height: 72,
                  background: "var(--bg-2)",
                  border: "1px solid var(--line)",
                  borderRadius: "50%",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  margin: "0 0 28px",
                  boxShadow: "var(--shadow-sm)",
                  position: "relative",
                }}>
                  <Icon name={s.icon} size={26} color="var(--petrol)" stroke={1.5} />
                  <div className="mono" style={{
                    position: "absolute",
                    top: -8, right: -8,
                    background: "var(--petrol)",
                    color: "#fff",
                    fontSize: 10, fontWeight: 600,
                    padding: "4px 8px",
                    borderRadius: "var(--r-pill)",
                    letterSpacing: "0.05em",
                  }}>
                    {s.n}
                  </div>
                </div>
                <div className="meta mono" style={{
                  fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "var(--terra)", marginBottom: 8,
                }}>
                  {s.tag}
                </div>
                <h3 style={{ fontSize: 22, fontWeight: 500, marginBottom: 12, lineHeight: 1.2 }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6 }}>
                  {s.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 56 }}>
          <button className="btn btn-primary btn-lg" onClick={onTalkClick}>
            Empezar el paso 01
            <Icon name="arrowRight" size={16} />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- VIRTUAL LAWYER ---------- */

function VirtualLawyer({ onTalkClick }) {
  const [tab, setTab] = React.useState(0);

  const conversations = [
    {
      q: "Tengo dos cuotas impagadas. ¿Pueden quitarme la casa ya?",
      a: "No de manera inmediata. Para iniciar ejecución hipotecaria el banco necesita un impago equivalente a 12 cuotas mensuales (Ley 5/2019). Estás muy lejos de ese umbral. Tienes margen real para negociar — y conviene hacerlo antes de llegar a 6 cuotas. ¿Quieres que veamos qué propuesta llevar al banco?",
    },
    {
      q: "Mi deuda la ha comprado un fondo. ¿Cambia mis derechos?",
      a: "Tus derechos como deudor se mantienen íntegros — el comprador asume el contrato tal cual. Lo que sí cambia es que el fondo suele tener mucha más flexibilidad para negociar que un banco. Por eso, paradójicamente, este puede ser un buen momento para llegar a un acuerdo razonable. ¿Sabes quién es el nuevo titular?",
    },
    {
      q: "Tengo subasta señalada en tres semanas. ¿Hay algo que hacer?",
      a: "Sí, varias cosas — pero el tiempo es crítico. Las vías son: oposición a la ejecución si hay causa (cláusulas abusivas, defectos procesales), petición de suspensión por vulnerabilidad si encajas en los supuestos del RDL 6/2012, o acuerdo extrajudicial con el ejecutante antes de subasta. Necesitamos hablar con un humano de Oasia hoy. ¿Te llamo en 30 minutos?",
    },
  ];

  return (
    <section id="legal" className="section section-band">
      <div className="container lawyer-grid" style={{
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center",
      }}>
        <Reveal>
          <div>
            <div className="eyebrow terra" style={{ marginBottom: 16 }}>
              Abogado virtual Oasia
            </div>
            <h2>Una primera capa de información jurídica que hoy nadie te da.</h2>
            <p className="lead" style={{ marginTop: 24 }}>
              Un agente IA especializado en protección del deudor hipotecario español.
              Entrenado en la normativa que te aplica — Ley 5/2019, RDL 6/2012,
              LEC, Código de Buenas Prácticas — y en miles de casos reales.
            </p>
            <p style={{ marginTop: 16, fontSize: 15 }}>
              No sustituye al asesoramiento profesional cuando hace falta — pero te
              da, en minutos, la orientación que mereces tener antes de tomar
              cualquier decisión sobre tu vivienda.
            </p>

            <div className="lawyer-features" style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16,
              marginTop: 32,
            }}>
              {[
                ["doc", "Revisa tu contrato", "Cláusulas abusivas, suelo, intereses, gastos."],
                ["clock", "Mide tus plazos", "Procesales, prescriptivos, de oposición."],
                ["shield", "Conoce tus defensas", "Causas reales aplicables a tu caso."],
                ["scale", "Compara escenarios", "Coste real de cada salida posible."],
              ].map(([icn, t, b]) => (
                <div key={t} style={{
                  display: "flex", gap: 12, alignItems: "flex-start",
                  padding: 16,
                  background: "var(--bg-2)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-md)",
                }}>
                  <Icon name={icn} size={20} color="var(--terra)" />
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{t}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.45 }}>{b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <LawyerChat conversations={conversations} tab={tab} setTab={setTab} />
        </Reveal>
      </div>
    </section>
  );
}

function LawyerChat({ conversations, tab, setTab }) {
  return (
    <div style={{
      background: "var(--bg-2)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-xl)",
      boxShadow: "var(--shadow-lg)",
      overflow: "hidden",
    }}>
      {/* header */}
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "18px 22px",
        borderBottom: "1px solid var(--line)",
        background: "linear-gradient(180deg, var(--bg-2), transparent)",
      }}>
        <div style={{
          width: 38, height: 38, borderRadius: "50%",
          background: "linear-gradient(135deg, var(--terra), #8c4a36)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "#fff",
          fontFamily: "var(--font-display)",
          fontSize: 16, fontWeight: 600,
        }}>
          A
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14.5 }}>Abogado virtual · Adrián</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: "var(--success)" }} />
            En línea · Responde al instante
          </div>
        </div>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
          color: "var(--ink-3)",
          padding: "4px 10px",
          background: "var(--bg-3)",
          borderRadius: "var(--r-pill)",
        }}>
          IA · Asistido
        </div>
      </div>

      {/* tabs of common questions */}
      <div style={{
        display: "flex",
        padding: "12px 12px 0",
        gap: 6,
        borderBottom: "1px solid var(--line)",
      }}>
        {conversations.map((_, i) => (
          <button key={i}
            onClick={() => setTab(i)}
            style={{
              flex: 1,
              padding: "10px 12px",
              fontSize: 12, fontWeight: 600,
              background: tab === i ? "var(--terra-soft)" : "transparent",
              color: tab === i ? "var(--terra)" : "var(--ink-3)",
              border: "none",
              borderBottom: tab === i ? "2px solid var(--terra)" : "2px solid transparent",
              cursor: "pointer",
              marginBottom: -1,
            }}
          >
            Caso {String(i + 1).padStart(2, "0")}
          </button>
        ))}
      </div>

      {/* conversation */}
      <div key={tab} className="fade-in" style={{
        padding: "24px",
        display: "flex", flexDirection: "column", gap: 16,
        minHeight: 320,
      }}>
        <div style={{
          alignSelf: "flex-end", maxWidth: "82%",
          padding: "14px 18px",
          background: "var(--petrol)",
          color: "#fff",
          borderRadius: "20px 20px 6px 20px",
          fontSize: 14.5, lineHeight: 1.5,
        }}>
          {conversations[tab].q}
        </div>
        <div style={{
          alignSelf: "flex-start", maxWidth: "92%",
          padding: "16px 20px",
          background: "var(--bg-3)",
          color: "var(--ink)",
          borderRadius: "20px 20px 20px 6px",
          fontSize: 14.5, lineHeight: 1.6,
          border: "1px solid var(--line)",
        }}>
          {conversations[tab].a}
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
          {["Sí, vamos", "Otra pregunta", "Hablar con humano"].map((c, i) => (
            <button key={i} style={{
              padding: "8px 14px",
              fontSize: 12.5, fontWeight: 500,
              background: "transparent",
              color: "var(--petrol)",
              border: "1px solid var(--petrol-line)",
              borderRadius: "var(--r-pill)",
              cursor: "pointer",
            }}>
              {c}
            </button>
          ))}
        </div>
      </div>

      {/* fake input */}
      <div style={{
        padding: 16,
        borderTop: "1px solid var(--line)",
        display: "flex", gap: 8,
        background: "var(--bg)",
      }}>
        <div style={{
          flex: 1,
          padding: "12px 16px",
          background: "var(--bg-2)",
          border: "1px solid var(--line)",
          borderRadius: "var(--r-pill)",
          fontSize: 14,
          color: "var(--ink-3)",
        }}>
          Escribe tu pregunta jurídica…
        </div>
        <button style={{
          width: 44, height: 44,
          background: "var(--terra)",
          border: "none",
          borderRadius: "50%",
          display: "flex", alignItems: "center", justifyContent: "center",
          cursor: "pointer",
        }}>
          <Icon name="send" size={18} color="#fff" />
        </button>
      </div>
    </div>
  );
}

/* ---------- PRINCIPLES (the "blindaje del propósito") ---------- */

function Principles() {
  const principles = [
    { icon: "heart", title: "Mejora objetivable", body: "Toda solución que te proponemos mejora tu situación frente al escenario de no intervenir. Si no la mejora, no te la proponemos." },
    { icon: "doc", title: "Información antes de operación", body: "Recibes información clara y asesoramiento adecuado antes de cerrar cualquier acuerdo. Sin atajos, sin letra pequeña, sin prisas inducidas." },
    { icon: "scale", title: "Condiciones proporcionadas", body: "Las condiciones económicas que pagas por nuestro servicio son siempre proporcionadas, verificables, y condicionadas al éxito real para ti." },
    { icon: "lock", title: "Confidencialidad total", body: "Lo que nos cuentas se queda con nosotros. Tu situación no se comparte, no se vende, no se comenta — ni siquiera entre socios del proyecto." },
    { icon: "eye", title: "Transparencia con el inversor", body: "Sabes quién está al otro lado de la mesa antes de firmar nada. Sabes qué gana, cómo y por qué te conviene a ti también." },
    { icon: "users", title: "Reporte de impacto", body: "Publicamos cada trimestre indicadores de impacto real sobre el deudor — no solo financieros — verificados por tercera parte." },
  ];

  return (
    <section className="section section-paper">
      <div className="container">
        <div className="principles-intro" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end",
          marginBottom: 56,
        }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Nuestros compromisos</div>
              <h2>Seis principios que <em style={{ color: "var(--petrol)" }}>no</em> negociamos.</h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <p className="lead">
              Están inscritos en nuestros estatutos y en nuestro pacto de socios — no
              son declaraciones de intenciones. Si Oasia algún día deja de cumplirlos,
              será por incumplimiento, no por cambio de modelo.
            </p>
          </Reveal>
        </div>

        <div className="principles-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          border: "1px solid var(--line)",
          borderRadius: "var(--r-lg)",
          overflow: "hidden",
          background: "var(--bg-2)",
        }}>
          {principles.map((p, i) => (
            <Reveal key={p.title} delay={i * 60}>
              <div className="principle-cell" data-i={i} style={{
                padding: 32,
                borderRight: i % 3 !== 2 ? "1px solid var(--line)" : "none",
                borderBottom: i < 3 ? "1px solid var(--line)" : "none",
                minHeight: 220,
                transition: "background .25s",
              }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-3)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
              >
                <Icon name={p.icon} size={28} color="var(--petrol)" stroke={1.5} />
                <h3 style={{ fontSize: 21, fontWeight: 500, margin: "16px 0 10px", lineHeight: 1.2 }}>
                  {p.title}
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6 }}>
                  {p.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- TEAM / About / Trust ---------- */

function Team() {
  return (
    <section id="equipo" className="section">
      <div className="container">
        <div className="team-grid" style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center",
        }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Quiénes estamos detrás</div>
              <h2 style={{ marginBottom: 24 }}>
                Un equipo humano, apoyado por la mejor tecnología del mercado.
              </h2>
              <p className="lead" style={{ marginBottom: 20 }}>
                Oasia nace de la unión entre <strong style={{ color: "var(--ink)" }}>Grupo Seneas</strong> —
                capacidad operativa, capital y red de inversores con experiencia probada en activos
                complejos— y <strong style={{ color: "var(--ink)" }}>Revirai</strong>, líder en
                inteligencia artificial aplicada al sector inmobiliario en España.
              </p>
              <p style={{ marginBottom: 32 }}>
                Detrás de cada conversación con Lucía o Adrián hay un equipo de personas
                de carne y hueso: abogados, gestores, asesores patrimoniales. La tecnología
                escucha primero. Los humanos resuelven después.
              </p>

              <div className="team-stats" style={{ display: "flex", gap: 40, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                {[
                  ["+300", "carteras NPL analizadas"],
                  ["24/7", "atención multicanal"],
                  ["100%", "casos con seguimiento humano"],
                ].map(([n, l]) => (
                  <div key={l}>
                    <div style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 38, fontWeight: 500,
                      color: "var(--petrol)",
                      letterSpacing: "-0.02em",
                      lineHeight: 1,
                    }}>
                      {n}
                    </div>
                    <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 6, lineHeight: 1.3 }}>
                      {l}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{ position: "relative" }}>
              {/* Two cards stacked artfully */}
              <div style={{
                aspectRatio: "4/5",
                background: "linear-gradient(160deg, #1F4F4B 0%, #11302D 100%)",
                borderRadius: "var(--r-xl)",
                padding: 40,
                color: "#fff",
                position: "relative",
                overflow: "hidden",
                boxShadow: "var(--shadow-lg)",
              }}>
                {/* Soft pattern */}
                <div style={{
                  position: "absolute", inset: 0,
                  backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)`,
                  backgroundSize: "24px 24px",
                  pointerEvents: "none",
                }} />
                <div style={{ position: "relative", display: "flex", flexDirection: "column", height: "100%" }}>
                  <div className="eyebrow light" style={{ color: "rgba(248,244,234,0.7)" }}>
                    Tecnología
                  </div>
                  <div style={{ marginTop: "auto" }}>
                    <h3 style={{ color: "#fff", fontSize: 28, fontWeight: 500, lineHeight: 1.2, marginBottom: 16 }}>
                      Empleados digitales <em style={{ color: "rgba(248,244,234,0.6)" }}>Aigentic Humans™</em>
                    </h3>
                    <p style={{ color: "rgba(248,244,234,0.75)", fontSize: 14.5, lineHeight: 1.6 }}>
                      Hablan, escuchan, recuerdan tu caso. Operativos en web, WhatsApp y teléfono.
                      Cuando te derivan a un humano, llegan con tu situación ya estructurada —
                      no tendrás que volver a contarla.
                    </p>
                    <div style={{
                      marginTop: 28, paddingTop: 24,
                      borderTop: "1px solid rgba(248,244,234,0.15)",
                      display: "flex", gap: 16,
                    }}>
                      <a href="https://revirai.com" target="_blank" className="btn btn-light btn-sm">
                        Por Revirai
                        <Icon name="arrowRight" size={12} />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */

function FAQ() {
  const items = [
    { q: "¿Cuánto cuesta hablar con Oasia?", a: "Nada. La primera conversación, el diagnóstico jurídico, la revisión de tu caso por un humano del equipo y la presentación de opciones son gratuitas. Solo cobramos cuando hay una operación cerrada que objetivamente mejora tu situación, y siempre en condiciones proporcionadas y verificables." },
    { q: "¿Vais a vender mis datos a un banco o a un fondo?", a: "No. Tu situación es confidencial y no se comparte con ningún tercero sin tu consentimiento explícito. Cuando llega el momento de hablar con un inversor concreto, lo decides tú, conoces su identidad, y revisas las condiciones antes de cualquier paso." },
    { q: "¿Sois recobradores disfrazados?", a: "No. Trabajamos para ti, no para tu acreedor. Oasia se constituye precisamente como contrapeso al desequilibrio que sufres hoy frente a servicers y fondos. Nuestro modelo solo es viable si tu salida es mejor que la que tendrías sin nosotros — está inscrito en nuestros estatutos." },
    { q: "Mi caso es muy complicado. ¿Me vais a coger igualmente?", a: "Sí. La complejidad es exactamente nuestro terreno. Casos con varias propiedades, deudas con distintos titulares, herencias entremezcladas, procedimientos en curso — todos ellos son habituales para nuestro equipo. Lo que no tiene salida lo decimos pronto y claro." },
    { q: "¿La IA decide sobre mi caso?", a: "No. Lucía y Adrián te escuchan, te orientan y estructuran tu caso — pero ninguna decisión sobre tu vivienda la toma una máquina. Cada operación pasa por revisión humana, y cada solución propuesta lleva el visto bueno de un gestor especializado antes de llegarte." },
    { q: "¿Cuánto tarda todo el proceso?", a: "Desde tu primer mensaje hasta el cierre de una operación, entre 4 y 12 semanas según complejidad. El diagnóstico inicial lo tienes el mismo día. La conversación con un humano del equipo, en 24-48h. Si tu situación es urgente — subasta señalada, lanzamiento próximo — aceleramos." },
  ];

  return (
    <section id="faq" className="section section-paper">
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Preguntas frecuentes</div>
            <h2>Lo que la mayoría nos pregunta antes de llamar.</h2>
          </Reveal>
        </div>

        <div style={{
          maxWidth: 920,
          background: "var(--bg-2)",
          border: "1px solid var(--line)",
          borderRadius: "var(--r-lg)",
          overflow: "hidden",
        }}>
          {items.map((it, i) => (
            <FAQItem key={i} item={it} last={i === items.length - 1} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, last, defaultOpen }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: last ? "none" : "1px solid var(--line)" }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: "100%",
          padding: "24px 28px",
          background: "transparent",
          border: "none",
          textAlign: "left",
          cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24,
        }}
      >
        <span style={{
          fontFamily: "var(--font-display)",
          fontSize: 19, fontWeight: 500, color: "var(--ink)",
          letterSpacing: "-0.01em",
        }}>
          {item.q}
        </span>
        <span style={{
          width: 32, height: 32, flexShrink: 0,
          borderRadius: "50%",
          background: open ? "var(--petrol)" : "var(--petrol-soft)",
          color: open ? "#fff" : "var(--petrol)",
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "all .25s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>
          <Icon name="plus" size={16} />
        </span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0,
        overflow: "hidden",
        transition: "max-height .35s ease, padding .35s ease",
        padding: open ? "0 28px 28px 28px" : "0 28px",
      }}>
        <p style={{ fontSize: 15.5, lineHeight: 1.65, maxWidth: 760 }}>
          {item.a}
        </p>
      </div>
    </div>
  );
}

/* ---------- CTA + Footer ---------- */

function CtaFooter({ onTalkClick }) {
  return (
    <>
      <section className="section section-dark" style={{
        background: "linear-gradient(180deg, #143836 0%, #0a201e 100%)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(60% 50% at 70% 30%, rgba(31, 79, 75, 0.4) 0%, transparent 60%)",
          pointerEvents: "none",
        }} />
        <div className="container cta-grid" style={{
          position: "relative",
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center",
        }}>
          <Reveal>
            <div>
              <div className="eyebrow light" style={{ marginBottom: 20 }}>
                El primer paso es el más difícil
              </div>
              <h2 style={{ color: "#fff", fontSize: "clamp(40px, 4.5vw, 64px)", lineHeight: 1.05, marginBottom: 24 }}>
                Cuando estés listo, <em style={{ fontStyle: "italic", color: "rgba(248,244,234,0.6)" }}>Lucía te escucha.</em>
              </h2>
              <p style={{ color: "rgba(248,244,234,0.75)", fontSize: 18, lineHeight: 1.6, maxWidth: 540 }}>
                No tienes que tomar ninguna decisión hoy. Solo abrir la conversación.
                El resto lo construimos juntos, a tu ritmo.
              </p>

              <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={onTalkClick} style={{ background: "var(--terra)" }}>
                  <Icon name="msg" size={16} />
                  Hablar ahora con Lucía
                </button>
                <a href="https://wa.me/34900000000" className="btn btn-light btn-lg">
                  <Icon name="whatsapp" size={16} />
                  Abrir WhatsApp
                </a>
                <a href="tel:+34900000000" className="btn btn-light btn-lg">
                  <Icon name="phone" size={16} />
                  Llamar
                </a>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <div style={{
                position: "relative",
                width: 280, height: 280,
                borderRadius: "50%",
                overflow: "hidden",
                border: "4px solid rgba(248,244,234,0.15)",
                boxShadow: "0 30px 80px rgba(0,0,0,0.5)",
              }}>
                <video
                  src={AVATAR_VIDEO}
                  autoPlay loop muted playsInline
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 18%" }}
                />
                <div style={{
                  position: "absolute", bottom: 0, left: 0, right: 0,
                  padding: "32px 16px 16px",
                  background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.7))",
                  color: "#fff", textAlign: "center",
                }}>
                  <div style={{ fontSize: 12, opacity: 0.7, letterSpacing: "0.12em", textTransform: "uppercase", fontFamily: "var(--font-mono)" }}>
                    Asistente
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginTop: 4 }}>Lucía</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <footer style={{
        background: "var(--bg-deep)",
        color: "rgba(248,244,234,0.6)",
        padding: "64px 0 32px",
        borderTop: "1px solid rgba(248,244,234,0.08)",
      }}>
        <div className="container">
          <div className="footer-grid" style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
            gap: 48,
            marginBottom: 48,
          }}>
            <div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: 32, fontWeight: 600,
                color: "var(--ink-inv)",
                letterSpacing: "-0.02em",
              }}>
                oa<span style={{ color: "var(--terra)", fontStyle: "italic", fontWeight: 500 }}>s</span>ia
              </div>
              <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, color: "rgba(248,244,234,0.55)", maxWidth: 340 }}>
                Acompañamiento profesional a personas con hipotecas en dificultad.
                Un proyecto de Grupo Seneas y Revirai.
              </p>
            </div>

            {[
              ["Tu situación", ["Impago temprano", "Ejecución abierta", "Dación en pago", "Refinanciación", "Alquiler con problemas"]],
              ["Recursos", ["Cómo te ayudamos", "Abogado virtual", "Quiénes somos", "Preguntas frecuentes", "Casos resueltos"]],
              ["Contacto", ["900 000 000", "hola@oasia.es", "WhatsApp 24/7", "Calle del Prado 1, Madrid", "L-V · 9:00–20:00"]],
            ].map(([title, items]) => (
              <div key={title}>
                <div className="mono" style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "rgba(248,244,234,0.5)",
                  marginBottom: 18,
                }}>
                  {title}
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                  {items.map((it) => (
                    <li key={it} style={{ fontSize: 14, color: "rgba(248,244,234,0.75)" }}>
                      {it}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="footer-bottom" style={{
            paddingTop: 28,
            borderTop: "1px solid rgba(248,244,234,0.10)",
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontSize: 12,
            color: "rgba(248,244,234,0.45)",
            flexWrap: "wrap", gap: 16,
          }}>
            <div>© 2026 Oasia · Un proyecto de Grupo Seneas y Revirai · Todos los derechos reservados.</div>
            <div style={{ display: "flex", gap: 24 }}>
              <a href="#" style={{ color: "rgba(248,244,234,0.6)" }}>Política de privacidad</a>
              <a href="#" style={{ color: "rgba(248,244,234,0.6)" }}>Aviso legal</a>
              <a href="#" style={{ color: "rgba(248,244,234,0.6)" }}>Código ético</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Process, VirtualLawyer, Principles, Team, FAQ, CtaFooter });
