/* ThanksScreen.jsx — Pantalla de "Gracias por tu interes" con animacion
 * elegante corporativa (colores HONDULEGAL). Se muestra tras el registro
 * exitoso antes de abrir el documento. Exposed as window.ThanksScreen.
 */
function ThanksScreen({ open, name, onContinue }) {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    if (!open) { setStep(0); return; }
    // Secuencia de animacion: icono → titulo → texto → boton
    const t1 = setTimeout(() => setStep(1), 100);
    const t2 = setTimeout(() => setStep(2), 600);
    const t3 = setTimeout(() => setStep(3), 1100);
    const t4 = setTimeout(() => setStep(4), 1500);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(t4); };
  }, [open]);

  React.useEffect(() => {
    if (open && window.lucide) setTimeout(() => window.lucide.createIcons(), 60);
  }, [open, step]);

  if (!open) return null;

  const first = (name || "").split(" ")[0];

  return (
    <div className="thanks-overlay">
      <div className="thanks-card">

        {/* Anillo animado */}
        <div className={"thanks-ring" + (step >= 1 ? " thanks-ring--in" : "")}>
          <svg className="thanks-ring-svg" viewBox="0 0 120 120">
            <circle cx="60" cy="60" r="54" className="thanks-ring-track" />
            <circle cx="60" cy="60" r="54" className={"thanks-ring-fill" + (step >= 1 ? " thanks-ring-fill--animate" : "")} />
          </svg>
          <div className="thanks-ring-icon">
            {step >= 1 && <i data-lucide="check"></i>}
          </div>
        </div>

        {/* Logo institucional */}
        <div className={"thanks-logo" + (step >= 2 ? " thanks-fade-in" : " thanks-hidden")}>
          HONDULEGAL
        </div>

        {/* Mensaje principal */}
        <h2 className={"thanks-title" + (step >= 2 ? " thanks-fade-in" : " thanks-hidden")}>
          {first ? "Gracias, " + first + "." : "Gracias."}
        </h2>
        <p className={"thanks-subtitle" + (step >= 3 ? " thanks-fade-in" : " thanks-hidden")}>
          Tu interés en HONDULEGAL es muy importante para nosotros.<br />
          Ya tienes acceso a nuestros recursos especializados.
        </p>

        {/* Separador elegante */}
        <div className={"thanks-divider" + (step >= 3 ? " thanks-fade-in" : " thanks-hidden")}>
          <span></span><span className="thanks-divider-dot"></span><span></span>
        </div>

        {/* Mensaje institucional */}
        <p className={"thanks-note" + (step >= 3 ? " thanks-fade-in" : " thanks-hidden")}>
          Somos tu aliado legal y estratégico en Honduras y el extranjero.
          Si necesitas asesoría personalizada, nuestro equipo está listo para atenderte.
        </p>

        {/* CTA */}
        <button
          className={"thanks-btn" + (step >= 4 ? " thanks-fade-in" : " thanks-hidden")}
          onClick={onContinue}
        >
          <i data-lucide="file-text"></i>
          Ver documento
        </button>

        {/* Detalles decorativos */}
        <div className="thanks-corner thanks-corner--tl"></div>
        <div className="thanks-corner thanks-corner--br"></div>
      </div>
    </div>
  );
}

Object.assign(window, { ThanksScreen });