// Testimonials.jsx — Numbered comment section

Object.assign(window, { Testimonials });

const _av = "assets/images/comments/";
const _cm = "assets/images/comments/";

function Avatar({ src, name, color, size }) {
  const sz = size || 42;
  const [err, setErr] = React.useState(false);
  if (err || !src) {
    return (
      <div style={{ width: sz, height: sz, borderRadius: "50%", background: color || "#ccc", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: Math.floor(sz * 0.38), color: "#fff" }}>
        {(name || "?")[0].toUpperCase()}
      </div>
    );
  }
  return (
    <img src={src} alt={name} onError={() => setErr(true)}
      style={{ width: sz, height: sz, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
  );
}

const COMMENTS = [
  {
    num: 33,
    name: "Sofia Ramirez",
    time: "Hace 4 minutos",
    avatar: _av + "ava-sofia.png",
    color: "#7a4a6a",
    text: "Estoy muy contenta de haber encontrado esta app. ¡Muchísimas gracias! Me ha salvado de las deudas.",
    photo: _cm + "comment-33.png",
    replies: [],
  },
  {
    num: 32,
    name: "Maria López",
    time: "Hace 8 minutos",
    avatar: _av + "ava-maria.png",
    color: "#4a6a7a",
    text: "No sé el tiempo que me va a durar, pero ya he ganado 200% de beneficio!",
    photo: _cm + "comment-32.png",
    replies: [],
  },
  {
    num: 31,
    name: "Javier Lozano",
    time: "Hace 11 minutos",
    avatar: _av + "ava-javier.png",
    color: "#2a4a6a",
    text: "Comparto mi experiencia con honestidad. Uso Horizon AI desde hace 2 meses. He depositado 2.000 € en total, y ya he retirado 7.550 €. Las transacciones son siempre rápidas y precisas, nunca falta ni un céntimo. Aquí está la prueba de mi cuenta bancaria.",
    photo: _cm + "comment-31.png",
    replies: [],
  },
  {
    num: 30,
    name: "Óscar Jiménez",
    time: "Hace 12 minutos",
    avatar: _av + "ava-oscar.png",
    color: "#3a2a5a",
    text: "¡Vi Lo de Évole en directo! Cuando Gómez se levantó y se fue, supe que era verdad. Me registré inmediatamente. Ya llevo 185 euros de beneficio en dos días. ¡Jordi Évole es un crack!",
    photo: null,
    replies: [],
  },
  {
    num: 24,
    name: "Amanda García",
    time: "Hace 42 minutos",
    avatar: _av + "ava-amanda.png",
    color: "#5a3a7a",
    text: "¿Alguien ha probado retirar dinero al Santander? ¿Funciona? Tengo un poco de miedo de que el banco bloquee el dinero o me llame.",
    photo: null,
    replies: [
      {
        num: 23,
        name: "Luis Navarro",
        time: "Hace 35 minutos",
        avatar: _av + "ava-luis.png",
        color: "#1a3a6a",
        text: "Sí, Amanda. Tranquila. Yo retiré 550 euros ayer por la noche. El dinero estaba en mi cuenta esta mañana. El Santander no preguntó nada. Es tu dinero, ¡no pueden negártelo!",
      },
    ],
  },
  {
    num: 22,
    name: "Esteban López",
    time: "Hace 1 hora",
    avatar: _av + "ava-esteban.png",
    color: "#2a5a2a",
    text: "Vi el programa y pensé: si Gómez usa esto para recuperar su fortuna, ¿por qué yo no voy a poder? Deposité 250 euros con mi tarjeta Visa. Mi banco (BBVA) intentó bloquear la transacción como \"medida de seguridad\", pero la aprobé con mi clave online. 4 días después: 390 euros en la cuenta.",
    photo: null,
    replies: [],
  },
  {
    num: 19,
    name: "Marcos Téllez",
    time: "Hace 2 horas",
    avatar: _av + "ava-marcos.png",
    color: "#3a5a1a",
    text: "Soy estudiante y vivo de la beca. Pedí prestados 250 euros a mi padre. Ya le he devuelto el dinero y tengo suficiente para vivir sin trabajar en verano. ¡Lo más importante es responder la llamada del gestor! A veces es un número extranjero, pero hablan español y te ayudan a empezar.",
    photo: null,
    replies: [],
  },
  {
    num: 18,
    name: "Erik Montes",
    time: "Hace 2 horas",
    avatar: _av + "ava-erik.png",
    color: "#5a2a1a",
    text: "¡El registro se cierra pronto! Y yo acabo de conseguir plaza. Mi mujer lo intentó 10 minutos después y ya estaba completo para hoy. ¡Intentadlo mañana temprano si no conseguís entrar!",
    photo: null,
    replies: [],
  },
];

function ReplyCard({ num, name, time, avatar, color, text }) {
  return (
    <div style={{ display: "flex", gap: 10, marginTop: 12, paddingLeft: 20, borderLeft: "2px solid #eee" }}>
      <Avatar src={avatar} name={name} color={color} size={34} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 13, color: "#111" }}>{name}</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#aaa" }}>{time}</span>
          <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#bbb", marginLeft: "auto" }}>#{num}</span>
        </div>
        <p style={{ fontFamily: "Arial, sans-serif", fontSize: 14, color: "#333", lineHeight: 1.6, margin: 0 }}>{text}</p>
      </div>
    </div>
  );
}

function CommentCard({ num, name, time, avatar, color, text, photo, replies }) {
  return (
    <div style={{ padding: "16px 0", borderBottom: "1px solid #ebebeb" }}>
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
        <Avatar src={avatar} name={name} color={color} size={42} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8, marginBottom: 5 }}>
            <div>
              <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 14, color: "#111" }}>{name}</span>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#aaa", marginLeft: 8 }}>{time}</span>
            </div>
            <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 14, color: "#bbb", flexShrink: 0 }}>#{num}</span>
          </div>
          <p style={{ fontFamily: "Arial, sans-serif", fontSize: 15, color: "#333", lineHeight: 1.65, margin: 0 }}>{text}</p>
          {photo && (
            <img src={photo} alt="" className="comment-img"
              onError={e => { e.target.style.display = "none"; }} />
          )}
          {replies && replies.length > 0 && replies.map((r, i) => <ReplyCard key={i} {...r} />)}
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  return (
    <div style={{ width: "100%", marginTop: 40, paddingTop: 8 }}>
      <h3 style={{ fontFamily: "'Times New Roman', serif", fontWeight: 700, fontSize: 22, color: "#111", marginBottom: 0, paddingBottom: 12, borderBottom: "2px solid #111" }}>
        Comentarios
      </h3>
      <div>
        {COMMENTS.map((c, i) => <CommentCard key={i} {...c} />)}
      </div>
    </div>
  );
}