/* global React, Icon, Reveal */
/* ============================================================
   OASIA — Situation selector (multi-landing A/B concept)
   ============================================================ */

const SITUATIONS = [
  {
    id: "impago",
    icon: "alert",
    tab: "Impago temprano",
    headline: "Llevas una o dos cuotas sin pagar y la presión empieza.",
    description: "El servicer ya te llama. Las cartas suben de tono. Pero todavía estás a tiempo de actuar con margen — y eso lo cambia todo. Lo más caro para ti es no hacer nada.",
    options: [
      { title: "Refinanciación con tu banco", body: "Te ayudamos a negociar carencias, alargar plazos o ajustar la cuota. Llegamos a la mesa con tu caso ya estructurado." },
      { title: "Acuerdo con un inversor", body: "Si la deuda ya se ha vendido o está a punto, accedemos directamente al comprador para acordar condiciones favorables antes de que escale." },
      { title: "Diagnóstico legal previo", body: "Nuestro abogado virtual revisa tu contrato, cuotas y derechos en minutos. Sabrás exactamente qué puede y qué no puede hacerse contigo." },
    ],
    outcome: "Mantener la vivienda en 8 de cada 10 casos cuando se actúa en esta fase.",
    cta: "Empezar diagnóstico",
  },
  {
    id: "ejecucion",
    icon: "scale",
    tab: "Ejecución abierta",
    headline: "Ya hay un procedimiento judicial en marcha. El reloj corre.",
    description: "Subasta señalada, lanzamiento próximo, o sentencia firme. Aún hay margen — los plazos legales son tu aliado si los conoces y los usas a tiempo.",
    options: [
      { title: "Compra de tu deuda en condiciones favorables", body: "Un inversor de la red Oasia adquiere tu hipoteca al banco y la renegocia contigo. Tú mantienes la vivienda con cuota sostenible." },
      { title: "Suspensión y alternativas pre-subasta", body: "Análisis exhaustivo de causas de oposición, defensas procesales y mecanismos de paralización aplicables a tu caso concreto." },
      { title: "Dación negociada con bonus", body: "Si la mejor opción es entregar la vivienda, lo hacemos con condiciones — quita total de deuda, plazo de permanencia, ayuda al realojo." },
    ],
    outcome: "Reducción media de la pérdida patrimonial del 42% frente a no intervenir.",
    cta: "Hablar con urgencia",
  },
  {
    id: "dacion",
    icon: "key",
    tab: "Dación en pago",
    headline: "Has decidido entregar la vivienda. Hagámoslo bien.",
    description: "Una dación sin acompañamiento te deja sin casa y a menudo sin extinción total de la deuda. Bien negociada, es una salida limpia: cerrar capítulo y empezar de nuevo.",
    options: [
      { title: "Extinción total de la deuda", body: "Negociamos que la entrega de la vivienda salde íntegramente el préstamo — sin colas pendientes que te persigan después." },
      { title: "Permanencia post-dación", body: "Acordamos un plazo de permanencia en la vivienda en condiciones de alquiler social mientras organizas tu salida." },
      { title: "Ayuda al realojo", body: "Bonus económico, asesoramiento patrimonial y, si procede, derivación a red de alquiler asequible de partners." },
    ],
    outcome: "Quita total de la deuda en el 78% de las daciones cerradas con Oasia.",
    cta: "Estudiar mi dación",
  },
  {
    id: "refinanciar",
    icon: "refresh",
    tab: "Refinanciación",
    headline: "La cuota es viable, pero no la actual.",
    description: "Ingresos a la baja, tipos al alza, o un cambio vital. No estás en impago — todavía. Refinanciar a tiempo es la decisión más rentable que vas a tomar este año.",
    options: [
      { title: "Renegociación con tu entidad", body: "Te preparamos el caso, los números y la conversación. Llegas a la mesa con propuesta concreta, no en posición pasiva." },
      { title: "Subrogación a otra entidad", body: "Si tu banco no quiere mover ficha, buscamos quien sí lo haga. Comparamos ofertas reales de toda la red bancaria." },
      { title: "Reestructuración con inversor privado", body: "Cuando la banca tradicional no es opción, accedemos a financiación especializada en condiciones razonables." },
    ],
    outcome: "Cuota mensual reducida un 31% de media en las refinanciaciones cerradas.",
    cta: "Calcular mi cuota viable",
  },
  {
    id: "alquiler",
    icon: "home",
    tab: "Alquiler con problemas",
    headline: "Vives de alquiler en una vivienda en disputa.",
    description: "La propiedad cambia de manos, te llega un burofax, o el procedimiento del propietario te alcanza sin haber hecho nada mal. Tienes más derechos de los que crees.",
    options: [
      { title: "Verificación de tu contrato y derechos", body: "Revisión completa del contrato, antigüedad efectiva, protección frente al nuevo propietario y plazos aplicables." },
      { title: "Mediación con el nuevo titular", body: "Si la vivienda ha sido subastada o vendida, intermediamos para acordar permanencia, traspaso o realojo en buenas condiciones." },
      { title: "Defensa procesal especializada", body: "Si hay procedimiento abierto contra ti, equipo legal con experiencia específica en LAU y ejecuciones hipotecarias del propietario." },
    ],
    outcome: "Plazo de permanencia mínimo asegurado o realojo digno en el 91% de los casos.",
    cta: "Revisar mi situación",
  },
];

function SituationSelector({ onTalkClick }) {
  const [active, setActive] = React.useState(SITUATIONS[0].id);
  const current = SITUATIONS.find((s) => s.id === active);

  return (
    <section id="situacion" className="section section-paper">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              Cinco situaciones · Cinco caminos
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h2>Cuéntanos en qué punto estás. Te decimos qué se puede hacer.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead" style={{ marginTop: 20 }}>
              No hay un único deudor en dificultad. Hay cinco tipos de situación y cada
              una pide una conversación distinta. Elige la tuya — verás opciones reales,
              con palabras claras.
            </p>
          </Reveal>
        </div>

        {/* Tabs */}
        <div style={{
          display: "flex",
          gap: 8,
          padding: 8,
          background: "var(--bg-3)",
          border: "1px solid var(--line)",
          borderRadius: "var(--r-pill)",
          marginBottom: 40,
          overflowX: "auto",
          width: "fit-content",
          maxWidth: "100%",
        }}>
          {SITUATIONS.map((s) => (
            <button
              key={s.id}
              onClick={() => setActive(s.id)}
              style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "12px 20px",
                fontSize: 14, fontWeight: 600,
                background: active === s.id ? "var(--petrol)" : "transparent",
                color: active === s.id ? "#fff" : "var(--ink-2)",
                border: "none",
                borderRadius: "var(--r-pill)",
                cursor: "pointer",
                whiteSpace: "nowrap",
                transition: "all .25s",
              }}
            >
              <Icon name={s.icon} size={16} />
              {s.tab}
            </button>
          ))}
        </div>

        {/* Active situation panel */}
        <div key={current.id} className="fade-in situation-panel" style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          alignItems: "start",
        }}>
          <div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "8px 14px",
              background: "var(--terra-soft)",
              color: "var(--terra)",
              borderRadius: "var(--r-pill)",
              fontSize: 12, fontWeight: 600, letterSpacing: "0.04em",
              marginBottom: 24,
            }}>
              <Icon name={current.icon} size={14} />
              {current.tab.toUpperCase()}
            </div>
            <h3 className="situation-headline" style={{ fontSize: 38, lineHeight: 1.1, fontWeight: 500, marginBottom: 20 }}>
              {current.headline}
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.65 }}>
              {current.description}
            </p>

            <div style={{
              marginTop: 32,
              padding: 24,
              background: "var(--petrol-soft)",
              border: "1px solid var(--petrol-line)",
              borderRadius: "var(--r-lg)",
              display: "flex", gap: 16, alignItems: "flex-start",
            }}>
              <Icon name="sparkles" size={22} color="var(--petrol)" />
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--petrol)", marginBottom: 6, fontFamily: "var(--font-mono)" }}>
                  Resultado típico
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.25, fontWeight: 500, color: "var(--ink)" }}>
                  {current.outcome}
                </div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={onTalkClick}>
                {current.cta}
                <Icon name="arrowRight" size={14} />
              </button>
              <a href="#proceso" className="btn btn-ghost">
                Ver cómo funciona
              </a>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="meta mono" style={{
              padding: "4px 0 12px",
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--ink-3)",
            }}>
              Caminos posibles
            </div>
            {current.options.map((opt, i) => (
              <OptionCard key={i} index={i} option={opt} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function OptionCard({ option, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--bg-2)",
        border: "1px solid var(--line)",
        borderLeft: `3px solid ${hover ? "var(--petrol)" : "var(--line-strong)"}`,
        borderRadius: "var(--r-md)",
        padding: "22px 24px",
        transition: "all .25s",
        transform: hover ? "translateX(4px)" : "translateX(0)",
        boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        cursor: "pointer",
      }}
    >
      <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
        <div className="mono" style={{
          fontSize: 11, fontWeight: 600, letterSpacing: "0.08em",
          color: "var(--petrol)",
          padding: "4px 8px",
          background: "var(--petrol-soft)",
          borderRadius: 4,
          flexShrink: 0,
        }}>
          {String(index + 1).padStart(2, "0")}
        </div>
        <div>
          <h4 style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.3, marginBottom: 6, color: "var(--ink)", fontFamily: "var(--font-sans)" }}>
            {option.title}
          </h4>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)" }}>
            {option.body}
          </p>
        </div>
      </div>
    </div>
  );
}

window.SituationSelector = SituationSelector;
