/* global React, PrimaryButton */
// (PrimaryButton is sourced from Shared.jsx — variant="accent" + variant="outlined")
// Yomee — Upload Screen
// Final step of the post-result onboarding flow. Profile-specific title,
// CTA color, and copy. Includes a discrete "skipped questions" note when
// the user chose to skip the per-profile questions, plus 2 demo file rows
// showing what an uploaded statement looks like.

const { useState: useStateUp, useEffect: useEffectUp } = React;

const PROFILE_UPLOAD_COPY = {
  totalero: {
    title: "Llegó la hora",
    subtitle:
      "Carga tu primer estado de cuenta y descubre cómo mejorar tus finanzas",
    cta: "Obtén tu radiografía",
    accent: "var(--yo-mint-700)",
  },
  optimizador: {
    title: "Tu plan está casi listo",
    subtitle: "Solo necesitamos tu estado de cuenta para completarlo",
    cta: "Subir mi estado de cuenta",
    // Unified mint accent across all archetypes — matches the Totalero
    // "Obtén tu radiografía" button so the primary CTA on the upload
    // screen has one consistent visual language.
    accent: "var(--yo-mint-700)",
  },
  escalador: {
    title: "Hora de ver la verdad",
    subtitle:
      "Tu estado de cuenta revela exactamente cuánto te está costando",
    cta: "Quiero ver mi radiografía",
    accent: "var(--yo-mint-700)",
  },
  reiniciador: {
    title: "El primer paso ya lo diste",
    subtitle: "Sube tu estado de cuenta y nosotros hacemos el resto",
    cta: "Ver mi situación real",
    accent: "var(--yo-mint-700)",
  },
};

// Bank metadata for the file row badges.
const BANKS = {
  bbva:    { color: "#004A9F", letter: "B" },
  nu:      { color: "#7B2D8B", letter: "N" },
  banorte: { color: "#E30613", letter: "B" },
};

// Simulated upload sequence — each tap on the upload area appends the next file.
const UPLOAD_SEQUENCE = [
  { name: "Estado_cta_BBVA_enero.pdf",    bank: "bbva"    },
  { name: "Estado_cta_NU_enero.pdf",      bank: "nu"      },
  { name: "Estado_cta_Banorte_enero.pdf", bank: "banorte" },
];

// ────────────────────────────────────────────────
// Bank circular badge
// ────────────────────────────────────────────────
function BankBadge({ bank }) {
  const meta = BANKS[bank] || BANKS.bbva;
  return (
    <div
      aria-label={bank}
      style={{
        width: 28,
        height: 28,
        borderRadius: "50%",
        background: meta.color,
        color: "#fff",
        flexShrink: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: "var(--font-mono)",
        fontWeight: 700,
        fontSize: 11,
        letterSpacing: "0.02em",
      }}
    >
      {meta.letter}
    </div>
  );
}

// ────────────────────────────────────────────────
// Filled green circle checkmark — design-system "success" indicator.
// ────────────────────────────────────────────────
function SuccessCheck() {
  return (
    <div
      style={{
        width: 22,
        height: 22,
        borderRadius: "50%",
        background: "#2BAE80",
        flexShrink: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
        <path
          d="M2.5 6.2 L4.9 8.6 L9.5 3.6"
          fill="none"
          stroke="#fff"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );
}

// ────────────────────────────────────────────────
// File row card — animates in with fade + slide down (200ms ease-out)
// ────────────────────────────────────────────────
function FileRow({ name, bank, onDelete }) {
  const [shown, setShown] = useStateUp(false);
  useEffectUp(() => {
    const id = requestAnimationFrame(() => setShown(true));
    return () => cancelAnimationFrame(id);
  }, []);
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        background: "#fff",
        borderRadius: 12,
        padding: "12px 14px",
        boxShadow: "0 1px 0 rgba(20,32,28,0.04)",
        opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : "translateY(-8px)",
        transition: "opacity 200ms ease-out, transform 200ms ease-out",
      }}
    >
      <SuccessCheck />
      <div
        style={{
          flex: 1,
          minWidth: 0,
          fontFamily: "var(--font-mono)",
          fontWeight: 500,
          fontSize: 13,
          color: "#333",
          letterSpacing: "0.005em",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis",
        }}
      >
        {name}
      </div>
      <BankBadge bank={bank} />
      {onDelete && (
        <button
          type="button"
          onClick={onDelete}
          aria-label={`Eliminar ${name}`}
          style={{
            width: 28,
            height: 28,
            borderRadius: "50%",
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            color: "#9aa0a6",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
            transition: "color 160ms ease-out, background 160ms ease-out",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.color = "#1a1a1a";
            e.currentTarget.style.background = "rgba(20,32,28,0.06)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.color = "#9aa0a6";
            e.currentTarget.style.background = "transparent";
          }}
        >
          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
            <path
              d="M3 3l8 8M11 3l-8 8"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
            />
          </svg>
        </button>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────
// Upload area — solid border, centered tray icon + text.
// During simulated loading, replaces icon+text with a spinner.
// When inactive (all files uploaded), reduces opacity to 0.5.
// ────────────────────────────────────────────────
function UploadArea({ accent, loading, disabled, onTap }) {
  // Border + arrow icon use the same ink color as the "Ver radiografía demo"
  // outlined button below — keeps the upload area visually grouped with the
  // secondary action and lets the profile accent live only on the primary CTA.
  const inkBorder = "var(--yo-ink)";
  return (
    <button
      type="button"
      onClick={() => {
        if (!disabled && !loading && onTap) onTap();
      }}
      disabled={disabled}
      style={{
        width: "100%",
        background: "transparent",
        border: `1.5px solid ${inkBorder}`,
        borderRadius: 16,
        padding: "26px 18px 22px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 10,
        cursor: disabled || loading ? "default" : "pointer",
        textAlign: "center",
        opacity: disabled ? 0.5 : 1,
        transition: "opacity 200ms ease-out",
        minHeight: 116,
      }}
    >
      {loading ? (
        <div
          aria-label="Cargando"
          style={{
            width: 28,
            height: 28,
            borderRadius: "50%",
            border: `2.5px solid ${inkBorder}33`,
            borderTopColor: inkBorder,
            animation: "yo-upload-spin 0.7s linear infinite",
          }}
        />
      ) : (
        <React.Fragment>
          {/* Tray / upload icon */}
          <svg width="36" height="36" viewBox="0 0 36 36" aria-hidden="true">
            <path
              d="M18 23V8 M11 15l7-7 7 7"
              fill="none"
              stroke={inkBorder}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M7 22v4a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-4"
              fill="none"
              stroke={inkBorder}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          <div
            style={{
              fontFamily: "var(--font-body)",
              fontSize: 13,
              lineHeight: "18px",
              color: "#888",
            }}
          >
            Sube archivos PDF o imagen. Máx 10 MB por archivo.
          </div>
        </React.Fragment>
      )}
    </button>
  );
}

// ────────────────────────────────────────────────
// Main screen
//   profile  — internal key (totalero | optimizador | escalador | reiniciador)
//   skipped  — boolean, true if user skipped questions to reach this screen
//   onContinue — primary CTA tap (begin processing)
//   onDemo     — secondary CTA tap (see demo radiografía)
// ────────────────────────────────────────────────
function UploadScreen({
  profile = "optimizador",
  skipped = false,
  cardsAnswer = null,
  files: filesProp,
  setFiles: setFilesProp,
  onContinue,
  onDemo,
}) {
  const cfg = PROFILE_UPLOAD_COPY[profile] || PROFILE_UPLOAD_COPY.optimizador;
  // Controlled mode: files state is owned by the parent (App) so it
  // persists across navigation to Radiografía and back. Falls back to
  // local state if no parent setter is wired in.
  const [filesLocal, setFilesLocal] = useStateUp([]);
  const files = filesProp != null ? filesProp : filesLocal;
  const setFiles = setFilesProp || setFilesLocal;
  const [loading, setLoading] = useStateUp(false);
  const [showSheet, setShowSheet] = useStateUp(false);
  const [sheetIn, setSheetIn] = useStateUp(false); // animation state

  // Map declared cards answer to required minimum file count.
  // null / "1 tarjeta" → 1 (modal never triggers)
  // "2 tarjetas" → 2
  // "3 o más" → 3
  const declaredCount =
    cardsAnswer === "2 tarjetas"
      ? 2
      : cardsAnswer === "3 o más"
        ? 3
        : 1;

  const allUploaded = files.length >= UPLOAD_SEQUENCE.length;
  // CTA enables as soon as at least 1 file has been uploaded.
  const ctaEnabled = files.length >= 1;

  const proceedToRadiografia = () => {
    onContinue && onContinue(profile);
  };

  const handlePrimaryTap = () => {
    if (!ctaEnabled) return;
    // Condition A1 — Totalero: only 1 statement uploaded → show "¿Solo un
    // estado de cuenta?" modal inviting the user to upload more.
    if (profile === "totalero" && files.length === 1) {
      setShowSheet(true);
      setTimeout(() => setSheetIn(true), 16);
      return;
    }
    // Condition A2 — user declared 2+ cards but uploaded fewer files.
    if (declaredCount >= 2 && files.length < declaredCount) {
      setShowSheet(true);
      // Defer flipping sheetIn so the initial render commits with
      // translateY(100%) + opacity 0; then the transition runs.
      setTimeout(() => setSheetIn(true), 16);
      return;
    }
    // Condition B — proceed.
    proceedToRadiografia();
  };

  const closeSheet = () => {
    setSheetIn(false);
    setTimeout(() => setShowSheet(false), 200);
  };

  const handleUploadTap = () => {
    if (allUploaded || loading) return;
    setLoading(true);
    setTimeout(() => {
      setFiles((prev) => {
        const next = UPLOAD_SEQUENCE[prev.length];
        return next ? [...prev, next] : prev;
      });
      setLoading(false);
    }, 300);
  };

  const handleDelete = (idx) => {
    setFiles((prev) => prev.filter((_, i) => i !== idx));
  };

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden",
      }}
    >
      {/* Topbar — no progress, no back, only help. Sits in same spot as others. */}
      <div
        style={{
          position: "absolute",
          top: 64,
          left: 0,
          right: 0,
          height: 38,
          zIndex: 5,
        }}
      >
        <button
          onClick={() =>
            window.YomeeHelp && window.YomeeHelp.toggle("upload")
          }
          aria-label="Ayuda"
          style={{
            position: "absolute",
            right: 16,
            top: 4,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "transparent",
            border: `1.5px solid var(--yo-ink)`,
            color: "var(--yo-ink)",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontWeight: 700,
            fontSize: 14,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 1,
          }}
        >
          ?
        </button>
      </div>

      {/* Scrollable content */}
      <div
        style={{
          flex: 1,
          padding: "118px 24px 12px",
          display: "flex",
          flexDirection: "column",
          minHeight: 0,
          overflow: "auto",
        }}
      >
        {/* Title block */}
        <h1
          style={{
            margin: 0,
            fontFamily: '"Geist Mono", var(--font-mono)',
            fontWeight: 900,
            fontSize: 30,
            lineHeight: "36px",
            color: "#1a1a1a",
            letterSpacing: "-0.01em",
            textAlign: "left",
          }}
        >
          {cfg.title}
        </h1>
        <div
          style={{
            marginTop: 6,
            fontFamily: "var(--font-mono)",
            fontWeight: 700,
            fontSize: 16,
            lineHeight: "22px",
            color: "#1a1a1a",
            letterSpacing: "0.005em",
            textAlign: "left",
          }}
        >
          Obtén tu radiografía
        </div>
        <p
          style={{
            margin: "10px 0 0",
            fontFamily: "var(--font-body)",
            fontSize: 14,
            lineHeight: "20px",
            color: "#555",
            textAlign: "left",
          }}
        >
          {cfg.subtitle}
        </p>

        {/* Upload area */}
        <div style={{ marginTop: 22 }}>
          <UploadArea
            accent={cfg.accent}
            loading={loading}
            disabled={allUploaded}
            onTap={handleUploadTap}
          />
        </div>

        {/* Supported banks */}
        <div
          style={{
            marginTop: 8,
            fontFamily: "var(--font-body)",
            fontSize: 12,
            color: "#aaa",
            textAlign: "left",
          }}
        >
          Bancos soportados: BBVA, Nu y Banorte
        </div>

        {/* Skipped-questions discrete note */}
        {skipped && (
          <div
            style={{
              marginTop: 14,
              fontFamily: "var(--font-body)",
              fontSize: 12,
              color: "#aaa",
              textAlign: "center",
            }}
          >
            Puedes completar tu perfil después desde la app
          </div>
        )}

        {/* Uploaded files — only render when at least one file is loaded */}
        {files.length > 0 && (
          <React.Fragment>
            <div
              style={{
                marginTop: 22,
                fontFamily: '"Geist Mono", var(--font-mono)',
                fontWeight: 700,
                fontSize: 14,
                lineHeight: "20px",
                color: "#1a1a1a",
                marginBottom: 10,
              }}
            >
              Archivos cargados
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {files.map((f, i) => (
                <FileRow
                  key={`${f.name}-${i}`}
                  name={f.name}
                  bank={f.bank}
                  onDelete={() => handleDelete(i)}
                />
              ))}
            </div>

            {/* Privacy note */}
            <div
              style={{
                marginTop: 14,
                fontFamily: "var(--font-body)",
                fontSize: 12,
                color: "#aaa",
                textAlign: "center",
              }}
            >
              Tus archivos se eliminarán de forma permanente una vez procesados
            </div>
          </React.Fragment>
        )}

        <div style={{ flex: 1, minHeight: 18 }} />
      </div>

      {/* Sticky CTA stack */}
      <div
        style={{
          padding: "12px 24px 24px",
          background: "var(--yo-bg)",
          flexShrink: 0,
          display: "flex",
          flexDirection: "column",
          gap: 10,
        }}
      >
        {/* Primary — matches the Main Screen CTA: default ink primary
            variant with trailing arrow. Uniform across all archetypes. */}
        <PrimaryButton
          onClick={handlePrimaryTap}
          disabled={!ctaEnabled}
          trailingArrow
        >
          {cfg.cta}
        </PrimaryButton>

        {/* Secondary — outlined demo (PrimaryButton variant="outlined") */}
        <PrimaryButton
          onClick={() => onDemo && onDemo(profile)}
          variant="outlined"
        >
          Ver radiografía demo
        </PrimaryButton>
      </div>

      {/* Confirmation bottom sheet — shown when user taps CTA but uploaded
          fewer files than declared cards count. Totalero gets the
          "¿Solo un estado de cuenta?" variant. */}
      {showSheet && profile === "totalero" && (
        <TotaleroSingleStatementSheet
          visible={sheetIn}
          onAddMore={closeSheet}
          onContinueAnyway={() => {
            closeSheet();
            setTimeout(() => proceedToRadiografia(), 220);
          }}
          onBackdrop={closeSheet}
        />
      )}
      {showSheet && profile !== "totalero" && (
        <ConfirmCardsSheet
          declaredCount={declaredCount}
          uploadedCount={files.length}
          visible={sheetIn}
          onAddMore={closeSheet}
          onContinueAnyway={() => {
            closeSheet();
            // Navigate after sheet exit animation finishes
            setTimeout(() => proceedToRadiografia(), 220);
          }}
          onBackdrop={closeSheet}
        />
      )}

      <style>{`
        @keyframes yo-upload-spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

// ────────────────────────────────────────────────
// Confirmation bottom sheet
// Slides up from bottom (200ms ease-out) with 40% black backdrop.
// Title + body + file-count note + 2 stacked buttons + tertiary link.
// ────────────────────────────────────────────────
function ConfirmCardsSheet({
  declaredCount,
  uploadedCount,
  visible,
  onAddMore,
  onContinueAnyway,
  onBackdrop,
}) {
  const declaredLabel =
    declaredCount === 3 ? "3 o más tarjetas" : "2 tarjetas";
  const title = `Mencionaste que tienes ${declaredLabel}`;

  // File count note phrasing — singular/plural for the uploaded count.
  const fileWord = uploadedCount === 1 ? "estado de cuenta" : "estados de cuenta";
  const fileCountNote = `Cargaste ${uploadedCount} de ${declaredCount} estados de cuenta.`;

  const continueLabel = `CONTINUAR CON ${uploadedCount} ${fileWord.toUpperCase()}`;

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        zIndex: 50,
        pointerEvents: "auto",
      }}
    >
      {/* Backdrop */}
      <div
        onClick={onBackdrop}
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(0,0,0,0.4)",
          opacity: visible ? 1 : 0,
          transition: "opacity 200ms ease-out",
        }}
      />

      {/* Sheet */}
      <div
        role="dialog"
        aria-modal="true"
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          background: "#fff",
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          transform: visible ? "translateY(0)" : "translateY(100%)",
          transition: "transform 200ms ease-out",
          paddingBottom: 24,
        }}
      >
        {/* Handle bar */}
        <div
          style={{
            width: 36,
            height: 4,
            borderRadius: 2,
            background: "#E0E0E0",
            margin: "8px auto 0",
          }}
        />

        <div
          style={{
            padding: "20px 24px 0",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            textAlign: "center",
          }}
        >
          {/* Mascot */}
          <img
            src="assets/hedgehog-welcome.png"
            alt=""
            style={{
              width: 56,
              height: 56,
              objectFit: "contain",
              marginBottom: 12,
            }}
          />

          {/* Title */}
          <div
            style={{
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 17,
              fontWeight: 900,
              color: "#1a1a1a",
              lineHeight: "24px",
              letterSpacing: "-0.005em",
            }}
          >
            {title}
          </div>

          {/* Body */}
          <p
            style={{
              margin: "8px 0 0",
              fontFamily: "var(--font-body)",
              fontSize: 13,
              lineHeight: 1.5,
              color: "#555",
              maxWidth: 300,
            }}
          >
            Tu radiografía será más completa y precisa con todos tus estados de
            cuenta.
          </p>

          {/* File count note */}
          <div
            style={{
              marginTop: 4,
              fontFamily: "var(--font-body)",
              fontSize: 12,
              color: "#999",
            }}
          >
            {fileCountNote}
          </div>
        </div>

        {/* Buttons */}
        <div
          style={{
            padding: "20px 16px 0",
            display: "flex",
            flexDirection: "column",
            gap: 10,
          }}
        >
          <button
            onClick={onAddMore}
            style={{
              width: "100%",
              height: 50,
              borderRadius: 14,
              background: "#1a1a1a",
              color: "#fff",
              border: "none",
              cursor: "pointer",
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 14,
              fontWeight: 700,
              letterSpacing: "0.04em",
            }}
          >
            CARGAR MÁS ESTADOS DE CUENTA →
          </button>

          <button
            onClick={onContinueAnyway}
            style={{
              width: "100%",
              height: 50,
              borderRadius: 14,
              background: "transparent",
              color: "#1a1a1a",
              border: "1.5px solid #1a1a1a",
              cursor: "pointer",
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 14,
              fontWeight: 700,
              letterSpacing: "0.04em",
            }}
          >
            {continueLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────
// Totalero — single statement confirmation sheet
// Same visual pattern as ConfirmCardsSheet but with copy specific to the
// "only 1 estado de cuenta uploaded" case.
// ────────────────────────────────────────────────
function TotaleroSingleStatementSheet({
  visible,
  onAddMore,
  onContinueAnyway,
  onBackdrop,
}) {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        zIndex: 50,
        pointerEvents: "auto",
      }}
    >
      {/* Backdrop */}
      <div
        onClick={onBackdrop}
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(0,0,0,0.4)",
          opacity: visible ? 1 : 0,
          transition: "opacity 200ms ease-out",
        }}
      />

      {/* Sheet */}
      <div
        role="dialog"
        aria-modal="true"
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          background: "#fff",
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          transform: visible ? "translateY(0)" : "translateY(100%)",
          transition: "transform 200ms ease-out",
          paddingBottom: 24,
        }}
      >
        {/* Handle bar */}
        <div
          style={{
            width: 36,
            height: 4,
            borderRadius: 2,
            background: "#E0E0E0",
            margin: "8px auto 0",
          }}
        />

        <div
          style={{
            padding: "20px 24px 0",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            textAlign: "center",
          }}
        >
          {/* Mascot */}
          <img
            src="assets/hedgehog-welcome.png"
            alt=""
            style={{
              width: 56,
              height: 56,
              objectFit: "contain",
              marginBottom: 12,
            }}
          />

          {/* Title */}
          <div
            style={{
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 17,
              fontWeight: 900,
              color: "#1a1a1a",
              lineHeight: "24px",
              letterSpacing: "-0.005em",
            }}
          >
            ¿Solo un estado de cuenta?
          </div>

          {/* Body */}
          <p
            style={{
              margin: "8px 0 0",
              fontFamily: "var(--font-body)",
              fontSize: 13,
              lineHeight: 1.5,
              color: "#555",
              maxWidth: 320,
            }}
          >
            Entre más estados de cuenta cargues, más completa será tu radiografía y más oportunidades podemos encontrar para optimizar tus tarjetas.
          </p>
        </div>

        {/* Buttons */}
        <div
          style={{
            padding: "20px 16px 0",
            display: "flex",
            flexDirection: "column",
            gap: 10,
          }}
        >
          <button
            onClick={onAddMore}
            style={{
              width: "100%",
              height: 50,
              borderRadius: 14,
              background: "#1a1a1a",
              color: "#fff",
              border: "none",
              cursor: "pointer",
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 14,
              fontWeight: 700,
              letterSpacing: "0.04em",
            }}
          >
            CARGAR MÁS ESTADOS DE CUENTA →
          </button>

          <button
            onClick={onContinueAnyway}
            style={{
              width: "100%",
              height: 50,
              borderRadius: 14,
              background: "transparent",
              color: "#1a1a1a",
              border: "1.5px solid #1a1a1a",
              cursor: "pointer",
              fontFamily: '"Geist Mono", var(--font-mono)',
              fontSize: 14,
              fontWeight: 700,
              letterSpacing: "0.04em",
            }}
          >
            CONTINUAR CON 1 ESTADO DE CUENTA
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  UploadScreen,
  ConfirmCardsSheet,
  TotaleroSingleStatementSheet,
  PROFILE_UPLOAD_COPY,
});
