// Yomee — Centro de ayuda (FAQ)
// Acordeón agrupado en 3 categorías. Solo un item abierto por categoría.
// Reutiliza el shell visual y los tokens del proyecto (var(--yo-*)).
/* global React, RadioIcon */

const { useState: useStateHA } = React;

const HA_BG = "rgb(238, 235, 230)";
const HA_FG = "var(--yo-ink)";
const HA_FG_MUTED = "#6b6b6b";
const HA_FG_SOFT = "#9aa0a6";
const HA_LINE = "rgba(20,32,28,0.08)";
const HA_BRAND = "var(--yo-forest-700)";
const HA_BRAND_PRESSED = "var(--yo-forest-900)";

// ────────────────────────────────────────────────
// FAQ data — 10 preguntas, 3 categorías
// ────────────────────────────────────────────────
const HA_CATEGORIES = [
  {
    key: "seguridad",
    title: "Seguridad y privacidad",
    items: [
      {
        q: "¿Qué pasa con mi estado de cuenta cuando lo subo?",
        a: "Procesamos el archivo para extraer la información que necesitas ver (montos, fechas, cargos) y eliminamos el original inmediatamente después, conforme al estándar NIST 800-88. Nunca guardamos el PDF ni la imagen — solo los datos que tu radiografía utiliza.",
      },
      {
        q: "¿Es seguro compartir mi información financiera?",
        a: "Tu información viaja encriptada con TLS 1.3, el mismo estándar que usa la banca en línea, y se almacena con encriptación AES-256. Además, tu identidad y tus datos financieros se guardan por separado, así que aunque alguien accediera a un sistema, no podría unir las piezas. Cumplimos al 100% con la LFPDPPP.",
      },
      {
        q: "¿Comparten mis datos con bancos o terceros?",
        a: "No. Nunca. yomee.ai vive exclusivamente de las suscripciones de sus usuarios — no recibimos comisiones, referencias ni pagos de ningún banco o institución financiera. Esa independencia es lo que nos permite mostrarte lo que de verdad te conviene a ti.",
      },
      {
        q: "¿Cómo elimino mi cuenta y mis datos?",
        a: "En cualquier momento desde Perfil → Privacidad y seguridad → Eliminar cuenta. Borramos toda tu información asociada en un máximo de 30 días, conforme a tus derechos ARCO bajo la LFPDPPP.",
      },
    ],
  },
  {
    key: "radiografia",
    title: "Tu radiografía",
    items: [
      {
        q: "¿Qué bancos soporta yomee.ai?",
        a: "En esta versión soportamos los 10 bancos más usados en México: BBVA, Banorte, Citibanamex, Santander, HSBC, Scotiabank, Nu, Klar, BanRegio e Inbursa. Esto cubre cerca del 85% de las cuentas en el país. Estamos agregando más bancos cada mes.",
      },
      {
        q: "¿Cómo se calcula mi YoMee Score?",
        a: "Tu score combina 4 factores extraídos de tus estados de cuenta: cuánta deuda tienes, cuánto te cuesta financieramente (intereses + comisiones), cómo pagas (puntualidad y monto), y qué tan diversificados están tus productos. Cuantos más estados de cuenta cargas, más preciso se vuelve el cálculo.",
      },
      {
        q: "¿Las comparaciones de mercado están sesgadas hacia algún banco?",
        a: "No. Como yomee.ai no recibe comisiones de bancos, las comparaciones vienen de fuentes públicas y oficiales (CONDUSEF y CNBV). Ves los productos vigentes en el mercado, no los que más nos paguen — porque nadie nos paga por mostrártelos.",
      },
    ],
  },
  {
    key: "cuenta",
    title: "Cuenta y planes",
    items: [
      {
        q: "¿Qué incluye el plan gratuito?",
        a: "Con el plan Free puedes cargar 1 estado de cuenta al mes, ver categorización básica de tus gastos y obtener insights limitados. Es suficiente para una primera fotografía. Para ver tu radiografía completa, comparaciones de mercado y consolidación multi-cuenta, necesitas Plus o Pro.",
      },
      {
        q: "¿Puedo cancelar mi suscripción cuando quiera?",
        a: "Sí. Puedes cancelar desde Perfil → Mi suscripción en cualquier momento. Mantienes acceso al plan pagado hasta el final del periodo que ya cubriste. No cobramos cargos de cancelación ni te pedimos explicaciones.",
      },
      {
        q: "¿Por qué pagar por entender mis propias finanzas?",
        a: "Porque alguien tiene que pagar para que tu información esté segura y las recomendaciones sean honestas. Las apps \"gratuitas\" suelen cobrarles a los bancos por dirigirte hacia ciertos productos — eso crea conflicto de interés. Al pagar tú, te aseguras de que trabajamos para ti, no para alguien más.",
      },
    ],
  },
];

// ────────────────────────────────────────────────
// Header (matches Mi perfil)
// ────────────────────────────────────────────────
function HAHeader({ title, onBack }) {
  return (
    <div
      style={{
        position: "sticky",
        top: 0,
        zIndex: 5,
        background: HA_BG,
        padding: "62px 8px 12px",
        display: "grid",
        gridTemplateColumns: "44px 1fr 44px",
        alignItems: "center",
        flexShrink: 0,
      }}
    >
      <button
        type="button"
        onClick={onBack}
        aria-label="Regresar"
        style={{
          width: 44,
          height: 44,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          background: "transparent",
          border: "none",
          padding: 0,
          cursor: "pointer",
          color: HA_FG,
        }}
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M15 18l-6-6 6-6" />
        </svg>
      </button>
      <h1
        style={{
          margin: 0,
          textAlign: "center",
          fontFamily: "var(--font-body)",
          fontSize: 16,
          fontWeight: 600,
          color: HA_FG,
          letterSpacing: "0.005em",
          lineHeight: 1.2,
        }}
      >
        {title}
      </h1>
      <span aria-hidden="true" />
    </div>
  );
}

// ────────────────────────────────────────────────
// Accordion item
// ────────────────────────────────────────────────
function FaqRow({ q, a, expanded, onToggle, last }) {
  const [pressed, setPressed] = useStateHA(false);
  const bodyRef = React.useRef(null);
  const [maxH, setMaxH] = useStateHA(0);

  React.useLayoutEffect(() => {
    if (expanded && bodyRef.current) {
      setMaxH(bodyRef.current.scrollHeight);
    } else {
      setMaxH(0);
    }
  }, [expanded, a]);

  return (
    <div
      style={{
        borderBottom: last ? "none" : `1px solid ${HA_LINE}`,
      }}
    >
      <button
        type="button"
        aria-expanded={expanded}
        onClick={onToggle}
        onMouseDown={() => setPressed(true)}
        onMouseUp={() => setPressed(false)}
        onMouseLeave={() => setPressed(false)}
        onTouchStart={() => setPressed(true)}
        onTouchEnd={() => setPressed(false)}
        style={{
          display: "flex",
          alignItems: "flex-start",
          gap: 14,
          width: "100%",
          padding: "14px 16px",
          background: pressed ? "#f5f5f5" : "transparent",
          border: "none",
          cursor: "pointer",
          textAlign: "left",
          transition: "background 100ms ease-out",
          fontFamily: "inherit",
        }}
      >
        <span
          style={{
            flex: 1,
            minWidth: 0,
            fontFamily: "var(--font-body)",
            fontSize: 14,
            fontWeight: 500,
            color: HA_FG,
            lineHeight: 1.4,
            letterSpacing: "0.005em",
          }}
        >
          {q}
        </span>
        <span
          aria-hidden="true"
          style={{
            width: 20,
            height: 20,
            flexShrink: 0,
            position: "relative",
            marginTop: 2,
            color: HA_FG_SOFT,
          }}
        >
          {/* horizontal bar — always visible */}
          <span
            style={{
              position: "absolute",
              top: "50%",
              left: 2,
              right: 2,
              height: 1.6,
              background: "currentColor",
              transform: "translateY(-50%)",
              borderRadius: 1,
            }}
          />
          {/* vertical bar — collapses to form a minus when expanded */}
          <span
            style={{
              position: "absolute",
              left: "50%",
              top: 2,
              bottom: 2,
              width: 1.6,
              background: "currentColor",
              transform: `translateX(-50%) rotate(${expanded ? 90 : 0}deg) scaleY(${expanded ? 0 : 1})`,
              transformOrigin: "center",
              transition: "transform 200ms ease-out",
              borderRadius: 1,
            }}
          />
        </span>
      </button>
      <div
        style={{
          maxHeight: maxH,
          overflow: "hidden",
          transition: "max-height 250ms ease-out",
        }}
      >
        <div
          ref={bodyRef}
          style={{
            padding: "0 36px 16px 16px",
            fontFamily: "var(--font-body)",
            fontSize: 13.5,
            fontWeight: 400,
            color: "#444",
            lineHeight: 1.6,
            letterSpacing: "0.005em",
          }}
        >
          {a}
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────
// Category section — owns its own "single open at a time" state
// ────────────────────────────────────────────────
function FaqCategory({ title, items }) {
  const [openIdx, setOpenIdx] = useStateHA(-1);
  return (
    <div style={{ margin: "20px 16px 0" }}>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: "0.10em",
          textTransform: "uppercase",
          color: HA_FG_MUTED,
          margin: "0 4px 10px",
        }}
      >
        {title}
      </div>
      <section
        style={{
          background: "#fff",
          borderRadius: 14,
          border: "1px solid #eeeeee",
          boxShadow: "0 1px 2px rgba(20,32,28,0.04)",
          overflow: "hidden",
        }}
      >
        {items.map((it, i) => (
          <FaqRow
            key={i}
            q={it.q}
            a={it.a}
            expanded={openIdx === i}
            onToggle={() => setOpenIdx((v) => (v === i ? -1 : i))}
            last={i === items.length - 1}
          />
        ))}
      </section>
    </div>
  );
}

// ────────────────────────────────────────────────
// Hero card (Ayuda)
// ────────────────────────────────────────────────
function AyudaHeroCard() {
  return (
    <section
      style={{
        margin: "12px 16px 0",
        padding: "18px 18px 16px",
        background: "#fff",
        borderRadius: 14,
        border: "1px solid #eeeeee",
        boxShadow: "0 1px 2px rgba(20,32,28,0.04)",
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 17,
          fontWeight: 600,
          color: HA_FG,
          letterSpacing: "0.005em",
          lineHeight: 1.3,
        }}
      >
        ¿En qué podemos ayudarte?
      </div>
      <div
        style={{
          marginTop: 6,
          fontFamily: "var(--font-body)",
          fontSize: 13,
          fontWeight: 400,
          color: HA_FG_MUTED,
          letterSpacing: "0.005em",
          lineHeight: 1.5,
        }}
      >
        Las dudas más comunes de quienes ya están usando yomee.
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────
// Contact footer card
// ────────────────────────────────────────────────
function ContactFooter() {
  const [pressed, setPressed] = useStateHA(false);
  return (
    <section
      style={{
        margin: "24px 16px 32px",
        padding: 20,
        background: "#fff",
        borderRadius: 14,
        border: "1px solid #eeeeee",
        boxShadow: "0 1px 2px rgba(20,32,28,0.04)",
        textAlign: "center",
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 14,
          fontWeight: 500,
          color: HA_FG,
          letterSpacing: "0.005em",
          lineHeight: 1.35,
        }}
      >
        ¿No encontraste lo que buscabas?
      </div>
      <div
        style={{
          marginTop: 4,
          fontFamily: "var(--font-body)",
          fontSize: 12.5,
          fontWeight: 400,
          color: HA_FG_MUTED,
          letterSpacing: "0.005em",
          lineHeight: 1.5,
        }}
      >
        Escríbenos y te respondemos en menos de 24 horas.
      </div>
      <button
        type="button"
        onClick={() => window.open("https://www.yomee.ai", "_blank")}
        onMouseDown={() => setPressed(true)}
        onMouseUp={() => setPressed(false)}
        onMouseLeave={() => setPressed(false)}
        onTouchStart={() => setPressed(true)}
        onTouchEnd={() => setPressed(false)}
        style={{
          marginTop: 14,
          width: "100%",
          height: 44,
          borderRadius: 12,
          background: pressed ? HA_BRAND_PRESSED : HA_BRAND,
          color: "#fff",
          border: "none",
          fontFamily: "var(--font-body)",
          fontSize: 14,
          fontWeight: 600,
          letterSpacing: "0.01em",
          cursor: "pointer",
          transition: "background 120ms ease-out",
        }}
      >
        Contactar a soporte
      </button>
    </section>
  );
}

// ────────────────────────────────────────────────
// Main screen
// ────────────────────────────────────────────────
function AyudaScreen({ onBack }) {
  return (
    <div
      data-screen-label="ayuda"
      style={{
        position: "absolute",
        inset: 0,
        display: "flex",
        flexDirection: "column",
        background: HA_BG,
      }}
    >
      <HAHeader title="Centro de ayuda" onBack={onBack} />
      <div
        style={{
          flex: 1,
          minHeight: 0,
          overflow: "auto",
          padding: "4px 0 0",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <AyudaHeroCard />
        {HA_CATEGORIES.map((cat) => (
          <FaqCategory key={cat.key} title={cat.title} items={cat.items} />
        ))}
        <ContactFooter />
      </div>
    </div>
  );
}

window.AyudaScreen = AyudaScreen;
